/* ============================================================
   Inner Edge Scalping — sales page
   Palette + type derived from the bull/bear chrome logo:
   near-black navy base, electric blue glow, chrome headings,
   cyan/red as the up/down accents, mono for every number.
   ============================================================ */

:root {
  /* Surfaces */
  --void:   #04060c;
  --ink:    #070b14;
  --panel:  #0b1120;
  --panel-2:#0e1526;
  --line:   rgba(120, 170, 235, 0.14);
  --line-2: rgba(120, 170, 235, 0.28);

  /* Brand */
  --electric: #1e9bff;
  --electric-d:#0b6dd6;
  --cyan:     #4fe3f5;
  --up:       #21e58a;
  --down:     #ff3b52;

  /* Text */
  --chrome: #eaf2ff;
  --text:   #b9c8de;
  --muted:  #7c8ca6;

  /* Type */
  --f-display: 'Saira Condensed', 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 16px;
  --nav-h: 68px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--electric); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }
.wrap--mid { max-width: 860px; }

/* ---------- Ambient chart canvas ---------- */
#chartCanvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Veil keeps the chart readable-but-quiet behind content */
.bg-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(30,155,255,.10), transparent 60%),
    radial-gradient(70% 50% at 50% 100%, rgba(11,109,214,.08), transparent 60%),
    linear-gradient(180deg, rgba(4,6,12,.40) 0%, rgba(4,6,12,.68) 45%, rgba(4,6,12,.86) 100%);
}
#crossCanvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
main, .nav, .foot { position: relative; z-index: 3; }

/* ---------- Type ---------- */
.h2, .hero__title {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .98;
  color: var(--chrome);
  margin: 0;
}
.h2 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }

/* Chrome/metallic sweep, echoes the logo lettering */
.grad {
  background: linear-gradient(180deg, #ffffff 0%, #cfe4ff 38%, #6aaeff 62%, #1e9bff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 26px rgba(30,155,255,.35));
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1.5rem;
  display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 0 rgba(33,229,138,.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(33,229,138,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(33,229,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(33,229,138,0); }
}

/* text-wrap:balance evens out the line lengths on these short centred
   blocks, which stops the one-word orphan on the last line. */
.lede {
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  color: var(--muted);
  max-width: 62ch;
  margin: 1rem 0 0;
  text-wrap: balance;
}
.h2, .hero__title, .hero__sub, .coach__intro, .vs__desc, .mod__head p {
  text-wrap: balance;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 700; font-size: .95rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #3aacff, #0b6dd6);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(30,155,255,.65), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease);
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(30,155,255,.8), inset 0 1px 0 rgba(255,255,255,.35); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.02rem; }
.btn--sm { padding: .6rem 1.15rem; font-size: .86rem; }
.btn--block { width: 100%; }
.btn--ghost {
  background: rgba(255,255,255,.065);
  border-color: rgba(120,170,235,.45);
  color: var(--chrome);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(30,155,255,.10); border-color: var(--electric); box-shadow: 0 0 0 1px rgba(30,155,255,.25); }

/* ---------- Nav ---------- */
/* The whole bar is absent over the hero and drops in once the hero logo
   scrolls away, so the opening screen is just the logo and the headline.
   visibility (not just opacity) keeps it out of the tab order while hidden. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  z-index: 60;
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: opacity .35s var(--ease), transform .35s var(--ease),
              visibility .35s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease);
}
.nav.is-visible { opacity: 1; visibility: visible; transform: none; }
.nav.is-stuck {
  background: rgba(6,9,17,.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
/* Links sit against the logo, CTA pushed right. space-between let the
   uneven side widths knock the links off true centre, which read as
   accidental rather than deliberate. */
.nav__inner { display: flex; align-items: center; gap: 2.2rem; }
.nav__brand img {
  height: 46px; width: auto;
  mix-blend-mode: screen;
  /* logo art has a stormy near-black backdrop; feather it so no box edge shows */
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 52%, transparent 80%);
          mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 52%, transparent 80%);
}
/* Anchored right, next to the CTA. Left-aligning them left the links
   parked at the width of the (invisible) logo, which looked arbitrary. */
.nav__links { display: flex; gap: 2rem; margin-left: auto; }
.nav__links a {
  font-size: .92rem; font-weight: 500; color: var(--text);
  position: relative; padding: .3rem 0;
  transition: color .2s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--electric));
  transition: width .25s var(--ease);
}
.nav__links a:hover { color: var(--chrome); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: .8rem; }

.nav__toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 6px; cursor: pointer;
}
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--chrome); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 1.5rem) 0 4.5rem;
  position: relative;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; }

.hero__logo {
  width: min(440px, 78vw);
  mix-blend-mode: screen;
  margin-top: -2.5rem;
  margin-bottom: -0.8rem;
  /* Feathered so the artwork's rectangular backdrop dissolves into the page */
  -webkit-mask-image: radial-gradient(ellipse 58% 56% at 50% 50%, #000 48%, transparent 78%);
          mask-image: radial-gradient(ellipse 58% 56% at 50% 50%, #000 48%, transparent 78%);
  filter: drop-shadow(0 0 70px rgba(30,155,255,.4));
  animation: floatIn 1s var(--ease) both;
}
@keyframes floatIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.hero__title {
  font-size: clamp(2.6rem, 7.4vw, 5.4rem);
  margin: .5rem 0 0;
}
.hero__sub {
  font-size: clamp(.98rem, 1.75vw, 1.12rem);
  color: var(--text);
  max-width: 58ch;
  margin: 1.7rem auto 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2.5rem; }
/* Equal width so the pair reads as one deliberate unit rather than two
   buttons sized by whatever their labels happened to be. */
.hero__actions .btn { min-width: 16.5rem; }

/* Deliberately NOT a pill. Dressed like the buttons above it, this read
   as a third clickable control when it is only a statement of price. */
.hero__price {
  display: inline-flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.9rem;
  padding: 0;
  border: 0;
  background: none;
}
.hero__price-num {
  font-family: var(--f-mono); font-weight: 700; font-size: 1.35rem;
  color: var(--chrome);
}
.hero__price-per { font-size: .95rem; color: var(--muted); }
.hero__price-sep { width: 1px; height: 13px; background: rgba(120,170,235,.35); align-self: center; }
.hero__price-note { font-size: .95rem; color: var(--cyan); }

/* ---------- Market sessions ---------- */
.sessions {
  border-block: 1px solid var(--line);
  background: rgba(8,12,22,.78);
  backdrop-filter: blur(12px);
  position: relative; z-index: 2;
  padding: .95rem 0;
}
.sessions__inner { display: flex; align-items: center; gap: 1.6rem; }

.sessions__head { display: flex; flex-direction: column; gap: .15rem; flex: none; }
.sessions__label {
  font-family: var(--f-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.sessions__utc {
  font-family: var(--f-mono); font-size: .8rem; font-weight: 700;
  color: var(--chrome); letter-spacing: .04em;
}

.sessions__list { display: flex; flex: 1; gap: .6rem; }
.ses {
  flex: 1;
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.014);
  min-width: 0;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.ses__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #46566d;
}
.ses__name {
  font-family: var(--f-mono); font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.ses__time {
  margin-left: auto;
  font-family: var(--f-mono); font-size: .72rem;
  color: #5f6f86; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* open state */
.ses.is-open {
  border-color: rgba(33,229,138,.34);
  background: rgba(33,229,138,.06);
}
.ses.is-open .ses__dot {
  background: var(--up);
  box-shadow: 0 0 0 0 rgba(33,229,138,.6);
  animation: pulse 2.2s infinite;
}
.ses.is-open .ses__name { color: var(--chrome); }
.ses.is-open .ses__time { color: var(--up); }

/* ---------- Sections ---------- */
.section { padding: clamp(4.5rem, 11vw, 8rem) 0; }
.head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); display: flex; flex-direction: column; align-items: center; }
.head .lede { text-align: center; }

/* ---------- Curriculum ----------
   Each module opens to the real lesson list, so the depth is provable
   rather than asserted. */
.mod { display: grid; gap: .5rem; }
.mod li {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), rgba(11,17,32,.72);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.mod li:hover { border-color: var(--line-2); box-shadow: 0 20px 46px -26px rgba(30,155,255,.6); }
.mod li:has(details[open]) { border-color: var(--line-2); }

.mod__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  list-style: none;
}
.mod__row::-webkit-details-marker { display: none; }

.mod__n {
  font-family: var(--f-mono);
  font-size: 1.05rem; font-weight: 700;
  color: rgba(79,227,245,.55);
  line-height: 1.2;
}
.mod__head h3 {
  margin: 0 0 .25rem;
  font-family: var(--f-display);
  font-weight: 700; text-transform: uppercase; letter-spacing: .015em;
  font-size: 1.12rem; line-height: 1.15;
  color: var(--chrome);
}
.mod__head p { margin: 0; font-size: .88rem; color: var(--muted); }

/* lesson count doubles as the open/close affordance */
.mod__count {
  position: relative;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--cyan);
  padding: .28rem .55rem .28rem .55rem;
  border: 1px solid rgba(79,227,245,.3);
  border-radius: 999px;
  background: rgba(79,227,245,.08);
  white-space: nowrap;
}
.mod__count::after { content: " LESSONS"; letter-spacing: .12em; }
/* this module grows weekly, so it carries a label rather than a count
   that would be wrong the moment the next video goes up */
.mod__count--live {
  color: var(--up);
  border-color: rgba(33,229,138,.35);
  background: rgba(33,229,138,.10);
  text-transform: uppercase;
}
.mod__count--live::after { content: ""; }

.mod__lessons {
  display: grid;
  gap: .1rem;
  padding: 0 1.3rem 1.2rem 3.5rem;
}
.mod__lessons li {
  border: 0; background: none; backdrop-filter: none; border-radius: 0;
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .38rem 0;
  font-size: .9rem; color: var(--text);
}
.mod__lessons li:hover { box-shadow: none; }
.mod__lessons li::before {
  content: ""; flex: none;
  width: 5px; height: 5px; margin-top: .55rem; border-radius: 50%;
  background: rgba(79,227,245,.6);
}
.mod__note {
  margin: 0; padding: 0 1.3rem 1.2rem 3.5rem;
  font-size: .88rem; color: var(--muted);
}

/* ---------- Coaches ---------- */
.coach {
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16,24,42,.9), rgba(9,13,24,.92));
  backdrop-filter: blur(14px);
  overflow: hidden;
}

/* real photo carries the trust here, so it leads the card edge to edge */
.coach__photo { position: relative; margin: 0; line-height: 0; }
.coach__photo img { width: 100%; height: auto; display: block; }
/* scrim so the photo dissolves into the card rather than butting against it */
.coach__photo::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 38%;
  background: linear-gradient(180deg, transparent, rgba(11,16,28,.75) 60%, rgba(11,16,28,.97));
  pointer-events: none;
}

.coach__inner { padding: clamp(1.4rem, 3.5vw, 2.4rem); margin-top: -2.5rem; position: relative; }

.coach__top { text-align: center; }
.coach__name {
  margin: 0;
  font-family: var(--f-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--chrome);
}
.coach__role {
  margin: .2rem 0 0;
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cyan);
}
.coach__intro {
  max-width: 62ch; margin: 1.1rem auto 0;
  font-size: 1rem; color: var(--text);
}

.coach__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 2.6rem);
  margin-top: 2rem; padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}
.coach__one h4 {
  margin: 0 0 .5rem;
  font-family: var(--f-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.15rem; color: var(--cyan);
}
.coach__one p { margin: 0 0 1rem; font-size: .93rem; color: var(--muted); }
.coach__creds { display: grid; gap: .55rem; }
.coach__creds li {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .9rem; line-height: 1.45; color: var(--text);
  /* balance stops a single word stranding on the second line */
  text-wrap: balance;
}
.coach__creds li::before {
  content: ""; flex: none;
  width: 6px; height: 6px; margin-top: .46rem; border-radius: 50%;
  background: linear-gradient(180deg, var(--cyan), var(--electric));
  box-shadow: 0 0 12px rgba(79,227,245,.9);
}

/* ---------- Inside the room (Discord recreation) ----------
   Rebuilt in markup rather than screenshotted: crisp at any size,
   responsive, and it leaks no invites or member data. */
.dc {
  display: grid;
  grid-template-columns: 258px 1fr;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(9,13,24,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 90px -45px rgba(30,155,255,.5);
  min-height: 470px;
}


/* sidebar */
.dc__side {
  background: rgba(6,10,18,.96);
  border-right: 1px solid var(--line);
  padding-bottom: 1.2rem;
  overflow: hidden;
}
.dc__server {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
}
.dc__server img {
  width: 30px; height: 30px; border-radius: 7px; object-fit: cover;
  mix-blend-mode: screen;
}
.dc__server-name {
  display: flex; flex-direction: column; gap: .12rem; min-width: 0;
  font-weight: 700; font-size: .9rem; color: var(--chrome);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* names the platform outright, since Discord's UI only reads as Discord
   to people who already use it */
.dc__server-sub {
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--f-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #7d8dff;
}
.dc__server-sub svg { width: 11px; height: 11px; flex: none; }

.dc__group { padding: .9rem 0 0; }
.dc__cat {
  margin: 0 0 .3rem;
  padding: 0 1rem;
  font-family: var(--f-mono);
  font-size: .63rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #5d6c82;
}
.dc__side button {
  width: 100%;
  display: flex; align-items: center; gap: .45rem;
  padding: .34rem 1rem;
  font-family: inherit; font-size: .84rem; text-align: left;
  color: #8c9bb2;
  background: none; border: 0; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.dc__side button i { font-style: normal; font-size: .82rem; flex: none; }
.dc__side button:hover { background: rgba(30,155,255,.10); color: var(--chrome); }
.dc__side button.is-active {
  background: rgba(30,155,255,.16);
  color: var(--chrome);
  box-shadow: inset 2px 0 0 var(--cyan);
}
.dc__side li.is-live button { color: var(--down); }
.dc__side li.is-voice button { color: var(--cyan); }

/* members-only / voice placeholder */
.dc__state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .5rem;
  min-height: 260px; padding: 2rem 1.5rem;
  color: var(--muted);
}
.dc__state svg { width: 34px; height: 34px; color: rgba(79,227,245,.55); margin-bottom: .3rem; }
.dc__state p { margin: 0; font-size: .9rem; max-width: 42ch; }
.dc__state b { color: var(--chrome); font-size: .95rem; }

/* main pane */
.dc__main { display: flex; flex-direction: column; min-width: 0; }
.dc__top {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  min-width: 0;
}
.dc__hash { color: #5d6c82; font-weight: 700; }
/* name holds its line; the topic is the part allowed to truncate */
.dc__top strong { color: var(--chrome); font-size: .93rem; white-space: nowrap; flex: none; }
.dc__topic {
  color: var(--muted); font-size: .8rem;
  padding-left: .75rem; margin-left: .25rem;
  border-left: 1px solid var(--line-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dc__feed { padding: 1.1rem 1.2rem; display: grid; gap: 1.15rem; }
.dc__msg { display: grid; grid-template-columns: auto 1fr; gap: .8rem; }
.dc__av {
  width: 36px; height: 36px; border-radius: 50%;
  flex: none; object-fit: cover;
  background: #04060c;
  box-shadow: 0 0 0 1px rgba(120,170,235,.22), 0 0 14px -4px rgba(30,155,255,.7);
}
.dc__meta { margin: 0 0 .2rem; display: flex; align-items: center; gap: .45rem; }
.dc__meta b { color: var(--chrome); font-size: .88rem; }
.dc__badge {
  font-family: var(--f-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .08em;
  padding: .1rem .3rem; border-radius: 3px;
  background: var(--electric); color: #fff;
}
.dc__text { margin: 0; font-size: .89rem; color: var(--text); }
.dc__ref {
  color: var(--cyan);
  background: rgba(79,227,245,.12);
  padding: 0 .25rem; border-radius: 4px;
}

/* ---------- Value stack (itemised receipt) ----------
   Dot leaders + a right-aligned money column, so it reads as an
   itemised invoice that totals up, rather than a feature list. */
.vs {
  position: relative;
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(16,24,42,.92), rgba(9,13,24,.94));
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 90px -45px rgba(30,155,255,.5);
  overflow: hidden;
}
.vs__glow {
  position: absolute; inset: -45% -10% auto -10%; height: 65%;
  background: radial-gradient(50% 60% at 50% 50%, rgba(30,155,255,.22), transparent 70%);
  pointer-events: none;
}

.vs__list { position: relative; }
.vs__list > li + li { border-top: 1px solid rgba(120,170,235,.08); }

.vs__item {
  border-radius: 10px;
  margin: 0 -.4rem;
  padding: 0 .4rem;
  transition: background .2s var(--ease);
}
.vs__item:hover, .vs__item:focus-visible { background: rgba(30,155,255,.07); outline: none; }
.vs__item:focus-visible { box-shadow: inset 0 0 0 1px rgba(79,227,245,.5); }

.vs__row {
  display: flex; align-items: center; gap: .95rem;
  padding: .95rem .6rem;
}
.vs__row::before {
  content: ""; flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2304060c'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat,
    linear-gradient(180deg, var(--cyan), var(--electric));
  box-shadow: 0 0 16px -4px rgba(79,227,245,.95);
  transition: transform .2s var(--ease);
}
.vs__item:hover .vs__row::before { transform: scale(1.08); }

.vs__name {
  font-size: 1rem;
  color: var(--text);
  transition: color .2s var(--ease);
}
.vs__item:hover .vs__name, .vs__item:focus-visible .vs__name { color: var(--chrome); }

/* Default (touch, no hover available): descriptions are simply shown,
   so nothing is hidden behind an interaction that does not exist there. */
.vs__reveal { display: grid; grid-template-rows: 1fr; }
/* the clip lives on an inner wrapper so the description's own padding
   collapses with it, instead of leaking a dead gap when closed */
.vs__revealInner { min-height: 0; overflow: hidden; }
.vs__desc {
  margin: 0;
  padding: 0 .6rem .9rem 3.15rem;
  font-size: .89rem; line-height: 1.6;
  color: var(--muted);
  max-width: 70ch;
}

/* Pointer devices: collapse and reveal on hover. 0fr -> 1fr animates to
   auto height without hardcoding a max-height. */
@media (hover: hover) {
  .vs__reveal {
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s var(--ease);
  }
  .vs__revealInner { transition: opacity .22s var(--ease); opacity: 0; }
  .vs__item:hover .vs__reveal,
  .vs__item:focus-visible .vs__reveal { grid-template-rows: 1fr; }
  .vs__item:hover .vs__revealInner,
  .vs__item:focus-visible .vs__revealInner { opacity: 1; }
}

/* the payoff */
.vs__pay {
  position: relative;
  margin-top: 2.2rem; padding-top: 2.4rem;
  border-top: 1px dashed rgba(130,175,235,.28);
  text-align: center;
}
.vs__pay-label {
  margin: 0 0 1rem;
  font-family: var(--f-mono);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan);
}
.vs__amount {
  display: flex; align-items: flex-start; justify-content: center; gap: .1rem;
  margin-bottom: 2rem;
  font-family: var(--f-mono); color: var(--chrome); line-height: 1;
}
.vs__cur { font-size: 1.8rem; font-weight: 700; margin-top: .5rem; }
.vs__num {
  font-size: clamp(3.6rem, 10vw, 5.4rem); font-weight: 700; letter-spacing: -.03em;
}
.vs__per { font-size: 1rem; color: var(--muted); align-self: flex-end; margin: 0 0 .95rem .25rem; }


.vs__fine {
  margin: 1.5rem 0 0;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em;
  color: #5f6f86;
}
/* ---------- FAQ ---------- */
.faq { display: grid; gap: .8rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(11,17,32,.65);
  backdrop-filter: blur(8px);
  padding: 0 1.3rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.faq details[open] { border-color: var(--line-2); background: rgba(14,21,38,.8); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.15rem 0;
  font-family: var(--f-display); font-size: 1.12rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .015em;
  color: var(--chrome);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--f-mono); font-size: 1.4rem; color: var(--cyan);
  transition: transform .25s var(--ease); flex: none; line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.2rem; color: var(--muted); font-size: .95rem; }

/* ---------- Final CTA ---------- */
.cta { padding: clamp(4rem, 9vw, 7rem) 0 clamp(5rem, 10vw, 8rem); text-align: center; }
.cta__inner { display: flex; flex-direction: column; align-items: center; }
.cta .lede { text-align: center; margin-bottom: 2rem; }

/* ---------- Footer ----------
   Type wordmark rather than the logo artwork: that illustration is a hero
   asset and turns to mush at footer size, where the name becomes unreadable. */
.foot {
  border-top: 1px solid var(--line);
  background: rgba(5,8,15,.9);
  backdrop-filter: blur(10px);
  padding: 3.4rem 0 2.6rem;
}
.foot__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }

.foot__brand { display: flex; flex-direction: column; gap: .3rem; }
.foot__mark {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--chrome);
}
.foot__tag {
  margin: 0;
  font-family: var(--f-mono);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan);
}

.foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; }
.foot__nav a {
  font-size: .88rem; color: var(--muted);
  transition: color .2s var(--ease);
}
.foot__nav a:hover { color: var(--chrome); }

.foot__disc {
  max-width: 68ch; margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: .8rem; line-height: 1.65; color: var(--muted);
  text-wrap: balance;
}
.foot__copy { margin: 0; font-size: .8rem; color: #5d6b80; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sessions__inner { flex-direction: column; align-items: stretch; gap: .8rem; }
  .sessions__head { flex-direction: row; align-items: baseline; gap: .6rem; }
  .sessions__list { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  /* sidebar is the persuasive half, so keep it and drop the feed below */
  .dc { grid-template-columns: 1fr; min-height: 0; }
  .dc__side { border-right: 0; border-bottom: 1px solid var(--line); }
  .dc__topic { display: none; }
}

@media (max-width: 860px) {
  .coach__pair { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 700px) {
  .coach { grid-template-columns: 1fr; }
  .coach__id { flex-direction: row; align-items: center; gap: 1.1rem; }
  .coach__badge { width: 78px; height: 78px; }
}


@media (max-width: 780px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; gap: 0;
    background: rgba(6,9,17,.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.4rem;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform .28s var(--ease), opacity .28s var(--ease), visibility .28s;
  }
  .nav__links.is-open { transform: none; opacity: 1; visibility: visible; }
  /* links leave the flow here, so the CTA needs its own push right */
  .nav__cta { margin-left: auto; }
  .nav__links a { padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav__links a::after { display: none; }
  .hero__title { letter-spacing: 0; }
  .hero__actions { width: 100%; flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}