/* ============================================================
   Every page but the homepage, in the homepage's Nov 2026 look
   (home-v3.css): a light cool-grey page, heavy uppercase headings,
   Michroma for the small labels, uppercase tracked 14px buttons,
   white cards with a hairline, and dark bands (with slanted edges)
   where the old pages used the blue sky. Loaded last on each page
   that carries body.v3; markup and behaviour are unchanged.
   ============================================================ */
body.v2.v3 {
  --ink: #171A21; --muted: #5D6474; --dark: #1D1E22; --dark-card: #26282E; --hair-l: #E1E4EC;
  --navy: #171A21; --unit: rgba(255, 255, 255, 0.72); --frost: rgba(255, 255, 255, 0.08);
  --wide: Michroma, var(--font-body);
  --band: radial-gradient(60% 40% at 50% 0%, rgba(48, 112, 255, 0.24), rgba(48, 112, 255, 0) 70%), radial-gradient(50% 40% at 85% 100%, rgba(48, 112, 255, 0.2), rgba(48, 112, 255, 0) 70%), var(--dark);
  --sky-page: var(--band);
  --v3-card: 0 24px 50px -34px rgba(23, 26, 33, 0.45), inset 0 0 0 1px var(--hair-l);
  background: #F3F4F7; color: var(--ink);
}
body.v2.v3 main { background: transparent; }

/* ---------- type ---------- */
body.v2.v3 :is(h1, h2) { font-family: var(--font-heading); font-weight: 900; letter-spacing: -0.045em; text-transform: uppercase; text-wrap: balance; }
body.v2.v3 h1 { font-size: clamp(38px, 5vw, 72px) !important; line-height: 0.92 !important; }
body.v2.v3 h2 { font-size: clamp(32px, 3.9vw, 56px) !important; line-height: 0.94 !important; }
body.v2.v3 h3 { letter-spacing: -0.02em; }
body.v2.v3 .eyebrow { color: var(--blue); font: 400 10px/1.3 var(--wide) !important; letter-spacing: 0.3em !important; text-transform: uppercase; }
body.v2.v3 .lede { color: var(--muted); font-size: 16px !important; line-height: 1.6; max-width: 600px; }
body.v2.v3 .crumbs { font: 400 9px/1 var(--wide); letter-spacing: 0.22em; text-transform: uppercase; }
body.v2.v3 .crumbs, body.v2.v3 .crumbs a { color: var(--muted) !important; }
body.v2.v3 .crumbs a:hover { color: var(--ink) !important; }

/* ---------- buttons: 14px squircle, uppercase tracked labels ---------- */
body.v2.v3 .btn {
  --r: 14px; border-radius: 14px; corner-shape: squircle; min-height: 52px; padding: 0 26px;
  font: 600 12px/1 var(--font-body) !important; letter-spacing: 0.16em; text-transform: uppercase;
}
body.v2.v3 .btn--lg { min-height: 56px; }
body.v2.v3 .btn--primary { background: var(--blue) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 14px 28px -14px rgba(48, 112, 255, 0.65) !important; }
body.v2.v3 .btn--dark { background: var(--ink) !important; color: #fff !important; border-color: transparent !important; }
body.v2.v3 .btn--outline { background: #fff; color: var(--ink); border-color: transparent; box-shadow: 0 10px 24px -16px rgba(29, 30, 34, 0.35), inset 0 0 0 1px var(--hair-l); }
@media (hover: hover) and (pointer: fine) {
  body.v2.v3 .btn--primary:hover { background: #2A64F0 !important; }
  body.v2.v3 .btn--outline:hover { background: #F7F8FB; }
}
body.v2.v3 .hbtn { --r: 14px; font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }
body.v2.v3 .hbtn--primary { background: var(--blue); color: #fff; box-shadow: 0 14px 28px -14px rgba(48, 112, 255, 0.65); }
body.v2.v3 .hbtn--primary .hbtn__ico { background: #fff; }
body.v2.v3 .hbtn--primary .hbtn__ico svg { stroke: var(--blue); }
body.v2.v3 .pill { --r: 999px; background: #fff; box-shadow: 0 6px 18px -12px rgba(23, 26, 33, 0.35), inset 0 0 0 1px var(--hair-l); color: var(--ink); }

/* ---------- header (same as the homepage) ---------- */
body.v2.v3 .hh__nav a { font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }
body.v2.v3 .hh.is-light .hh__nav a { color: #3D414B; opacity: 1; }
body.v2.v3 .hh.is-light .hh__nav a:hover, body.v2.v3 .hh.is-light .hh__nav a.is-current { color: var(--ink); }
body.v2.v3 .hh__cta { --r: 14px; height: 44px; padding: 0 22px; font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }
body.v2.v3 .hh.is-light .hh__cta { background: var(--blue); color: #fff; }
body.v2.v3 .hh.is-scrolled:not(.is-light) { background: rgba(23, 26, 33, 0.72); }
body.v2.v3 .hh.is-light .hh__brand, body.v2.v3 .hh.is-light .hh__brand span { color: var(--ink); }
@media (max-width: 1023px) {
  body.v2.v3 .hh__nav { background: radial-gradient(80% 50% at 50% 0%, rgba(48, 112, 255, 0.28), rgba(48, 112, 255, 0) 70%), radial-gradient(70% 40% at 50% 100%, rgba(48, 112, 255, 0.22), rgba(48, 112, 255, 0) 70%), var(--dark); }
  body.v2.v3 .hh .hh__nav > a { min-height: 76px; border-bottom-color: rgba(255, 255, 255, 0.1); font: 900 clamp(30px, 8vw, 42px)/1 var(--font-heading); letter-spacing: -0.045em; text-transform: uppercase; }
  body.v2.v3 .hh__nav > a::after { border-color: var(--blue); }
  body.v2.v3 :is(.hh, .hh.is-light) .hh__nav .hh__navcta { background: var(--blue); color: #fff; font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 14px 28px -14px rgba(48, 112, 255, 0.65); }
  body.v2.v3 :is(.hh, .hh.is-light) .hh__nav .hh__get { font: 400 10px/1 var(--wide); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
  body.v2.v3 .hh.is-open .hh__nav > a, body.v2.v3 .hh.is-open.is-light .hh__nav > a { color: #fff; }
  body.v2.v3 .hh.is-open .hh__brand, body.v2.v3 .hh.is-open .hh__brand span, body.v2.v3 .hh.is-open.is-light .hh__brand span { color: #fff; }
  body.v2.v3 .hh.is-open .hh__brand img { filter: invert(1); }
}

/* ---------- page tops: light, like the homepage hero ---------- */
body.v2.v3 .pghead:not(.pgsky) {
  padding: clamp(124px, 11vw, 156px) 0 clamp(36px, 4vw, 56px) !important; background: transparent !important;
  border-radius: 0 !important; color: var(--ink); overflow: visible;
}
body.v2.v3 .pghead:not(.pgsky)::before { display: none; }
body.v2.v3 .pghead:not(.pgsky) :is(h1, h2, h3) { color: var(--ink) !important; }
body.v2.v3 .pghead:not(.pgsky) .eyebrow { color: var(--blue) !important; }
body.v2.v3 .pghead:not(.pgsky) :is(.lede, .wrap > p, .sec-head > p, .wrap > div > p) { color: var(--muted) !important; }
body.v2.v3 .pghead:not(.pgsky) h1 { max-width: 1000px; margin-top: 18px; }
body.v2.v3 .pghead.center:not(.pgsky) h1 { margin-inline: auto; }
body.v2.v3 .pghead:not(.pgsky) .lede { margin-top: 24px; }
body.v2.v3 .pghead:not(.pgsky) > .wrap a:not([class]) { color: var(--blue); }
body.v2.v3 .pghead .stat-tiles div { --r: 18px; border-radius: 18px; background: #fff !important; box-shadow: var(--v3-card); }
body.v2.v3 .pghead .stat-tiles b { color: var(--ink) !important; font: 900 30px/1 var(--font-heading); letter-spacing: -0.045em; }
body.v2.v3 .pghead .stat-tiles span { color: var(--muted) !important; font: 400 9px/1.4 var(--wide); letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- the blue bands become the homepage's dark bands ---------- */
body.v2.v3 :is(.pgsky, .live-prize, .live-band, .shophead, .wlt) { background: var(--band) !important; color: #fff; }
body.v2.v3 main > section:is(.pgsky, .live-band) { border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%); padding-bottom: calc(var(--pb, 96px) + 40px) !important; }
body.v2.v3 :is(.pgsky, .live-prize, .live-band, .shophead, .wlt) .eyebrow { color: var(--lime) !important; }
body.v2.v3 :is(.pgsky, .live-band, .wlt) .crumbs, body.v2.v3 :is(.pgsky, .live-band, .wlt) .crumbs a { color: rgba(255, 255, 255, 0.6) !important; }
body.v2.v3 .pg :is(.pgsky) .btn--primary, body.v2.v3 :is(.pgsky, .live-band) .btn--primary, body.v2.v3 :is(.pgsky, .live-band) .btn--dark, body.v2.pg.v3 .hero5__cta .btn { background: var(--blue) !important; color: #fff !important; box-shadow: 0 14px 28px -14px rgba(48, 112, 255, 0.65) !important; }
body.v2.v3 :is(.pgsky, .live-band) .btn--outline { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important; }
body.v2.v3 .live-card__head { background: var(--band) !important; }
@media (max-width: 699px) {
  body.v2.v3 main > section:is(.pgsky, .live-band) { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%); padding-bottom: calc(var(--pb, 72px) + 24px) !important; }
}

/* ---------- cards: white, 18px, a hairline and a soft fall ---------- */
body.v2.v3 :is(.panel, .hq, .objection, .objections > *, .step, .path, .live-card, .road__bubble, .mp, .faq details, .card) {
  --r: 18px; border-radius: 18px; corner-shape: squircle; border-color: transparent; background-color: #fff; box-shadow: var(--v3-card);
}
body.v2.v3 :is(.sec--tint, .panel.sec--tint) { background: transparent !important; }

/* ---------- the plans: white cards, Unlimited the dark card with a lime price ---------- */
body.v2.v3 .tier { --r: 18px; border-radius: 18px; corner-shape: squircle; box-shadow: var(--v3-card); }
body.v2.v3 .tier--sky { background: radial-gradient(90% 60% at 100% 100%, rgba(48, 112, 255, 0.45), rgba(48, 112, 255, 0) 70%), #1B1D22 !important; box-shadow: 0 30px 60px -30px rgba(23, 26, 33, 0.7) !important; }
body.v2.v3 .tier h3, body.v2.v3 .tier__name { font-size: 24px !important; line-height: 1 !important; font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; }
body.v2.v3 .tier__tag { font: 400 9px/1 var(--wide) !important; letter-spacing: 0.16em; text-transform: uppercase; }
body.v2.v3 .tier__btn { --r: 14px; border-radius: 14px; font: 600 12px/1 var(--font-body) !important; letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- footer ---------- */
body.v2.v3 .hfoot h4 { font: 400 10px/1 var(--wide); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }

/* ---------- the phone bar ---------- */
body.v2.v3 .sticky-cta { --r: 18px; }

/* ---------- fixes found in the screenshots ---------- */
/* the membership top had a pale wash over its bottom edge from the old sky */
body.v2.v3 .hero5.pgsky::after { display: none !important; }
/* outline buttons on the light page tops (404, a session that has ended) */
body.v2.v3 .pghead:not(.pgsky) .btn--outline { background: #fff !important; color: var(--ink) !important; box-shadow: 0 10px 24px -16px rgba(29, 30, 34, 0.35), inset 0 0 0 1px var(--hair-l) !important; }
/* long reading (terms, privacy, articles): headings at reading size, not poster size */
body.v2.v3 :is(.legal, .prose, article, .article) h2 { font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.1 !important; letter-spacing: -0.03em; margin-top: 1.8em; }
/* breadcrumbs on the light page tops (an older rule kept them white) */
body.v2.v3 main .pghead:not(.pgsky) .crumbs, body.v2.v3 main .pghead:not(.pgsky) .crumbs :is(a, span) { color: var(--muted) !important; }
body.v2.v3 main .pghead:not(.pgsky) .crumbs a:hover { color: var(--ink) !important; }
/* the waitlist page's countdown, now on a light top */
body.v2.v3 .pghead:not(.pgsky) .wlx__count, body.v2.v3 .pghead:not(.pgsky) .wlx__count b { color: var(--ink) !important; font: 400 11px/1 var(--wide); letter-spacing: 0.2em; text-transform: uppercase; }
/* the guarantee strip under the plans: the homepage's dark guarantee card */
body.v2.v3 .pguar { --r: 18px; border-radius: 18px; background: radial-gradient(320px 200px at 60px 50%, rgba(48, 112, 255, 0.3), transparent 70%), #1B1D22 !important; box-shadow: 0 24px 50px -30px rgba(23, 26, 33, 0.7) !important; }
body.v2.v3 .pguar__copy b { font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; }
body.v2.v3 .pguar__btn { --r: 14px; border-radius: 14px; font: 600 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
