/* ============================================================
   JV PARTNERS PAGE — components that exist only on /jvz/partners/.
   Everything else comes from style.css (identical to the live FE
   page), so the tokens, type and section grammar stay shared.
   ============================================================ */

/* ---------- Top bar (JV) ---------- */
.topbar .jv-meta {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.topbar .jv-meta b {
  color: #fff;
}

/* ---------- Hero ---------- */
.hero .pre-head {
  font-family: "Bubblegum Sans", sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--gold);
  margin: 0 auto 14px;
  max-width: 820px;
}
.hero h1.jv-h1 {
  font-size: clamp(1.9rem, 4.3vw, 3.05rem);
  line-height: 1.12;
  max-width: 1040px;
  margin: 0 auto;
}
.hero h1.jv-h1 .hl {
  color: var(--orange-2);
}
.hero .jv-offer {
  display: inline-block;
  margin-top: 18px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 1.02rem;
}
.hero .jv-offer .hl {
  color: var(--gold);
}
.launch-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px auto 0;
  max-width: 980px;
}
.launch-strip > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 100px;
  padding: 9px 16px;
}
.launch-strip > span i {
  color: var(--orange-2);
}

/* ---------- Get on board (JV list + link) ---------- */
.board {
  max-width: 900px;
  margin: 52px auto 0;
  background: #fff;
  border-radius: 30px;
  border: 3px solid var(--orange);
  padding: 34px 36px;
  text-align: left;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 30px;
  align-items: center;
}
@media (max-width: 820px) {
  .board {
    grid-template-columns: 1fr;
    padding: 26px 22px;
  }
}
.board h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 6px;
}
.board h3 .grad-text {
  font-weight: 800;
}
.board p {
  font-size: 1rem;
  color: var(--slate);
  margin-bottom: 0;
}
.board .or {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 14px;
}
.jv-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jv-form input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
}
.jv-form input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(245, 123, 24, 0.14);
}
.jv-form .btn-cta {
  width: 100%;
  font-size: 1.12rem;
  padding: 14px 22px;
  border: 0;
}
.jv-form .fine {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
  text-align: center;
}
.jv-form .ok {
  display: none;
  font-weight: 700;
  color: var(--viridian);
  text-align: center;
  font-size: 0.95rem;
}
.jv-form.sent .ok {
  display: block;
}
.btn-jvz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 1.08rem;
  border-radius: 100px;
  padding: 14px 22px;
  text-decoration: none;
  transition: 0.2s;
}
.btn-jvz:hover {
  background: var(--ink-3);
  color: #fff;
  transform: translateY(-2px);
}
.btn-jvz img {
  height: 22px;
}

/* ---------- Glimpse (9 capability cards) ---------- */
.glimpse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .glimpse {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .glimpse {
    grid-template-columns: 1fr;
  }
}
.gcard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-rest);
  transition: 0.25s;
  position: relative;
}
.gcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(245, 123, 24, 0.35);
}
.gcard .gi {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 16px;
  background: var(--grad-cta);
  box-shadow: var(--glow-orange);
}
.gcard .gi.t {
  background: linear-gradient(135deg, var(--pine), var(--teal));
  box-shadow: 0 4px 14px rgba(21, 122, 116, 0.25);
}
.gcard .gi.m {
  background: linear-gradient(135deg, var(--viridian), var(--mantis));
  box-shadow: 0 4px 14px rgba(96, 193, 77, 0.25);
}
.gcard h3 {
  font-size: 1.18rem;
  margin-bottom: 8px;
}
.gcard p {
  font-size: 0.98rem;
  margin: 0;
  color: var(--slate);
}
.gcard.money {
  background: linear-gradient(160deg, #fff7ef, #fff);
  border-color: rgba(245, 123, 24, 0.4);
}
.fable-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--pine);
  background: rgba(21, 122, 116, 0.08);
  border: 1px solid rgba(21, 122, 116, 0.2);
  border-radius: 100px;
  padding: 7px 15px;
}

/* ---------- Hook callout ---------- */
.hook-box {
  max-width: 940px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 44px 40px;
  text-align: center;
  background: radial-gradient(
      circle at 20% 0%,
      rgba(245, 123, 24, 0.22),
      transparent 55%
    ),
    var(--ink);
  border: 1px solid rgba(245, 123, 24, 0.35);
  position: relative;
  overflow: hidden;
}
.hook-box .tag {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.74rem;
  color: var(--orange-2);
}
.hook-box h2 {
  color: #fff;
  margin: 10px 0 8px;
}
.hook-box .sub3 {
  color: #aeb6c2;
  font-size: 1.05rem;
  margin-bottom: 24px;
}
.hook-box blockquote {
  margin: 0 auto;
  max-width: 760px;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  line-height: 1.25;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
}
.hook-box blockquote .q {
  color: var(--gold);
}

/* ---------- Top 3 reasons ---------- */
.reasons {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
.reason {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 26px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-rest);
}
.reason:nth-child(2) {
  margin-left: 60px;
}
@media (max-width: 700px) {
  .reason {
    grid-template-columns: 1fr;
  }
  .reason:nth-child(2) {
    margin-left: 0;
  }
}
.reason .num {
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  font-size: 4rem;
  line-height: 1;
  background: var(--grad-sweep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.reason h3 {
  margin-bottom: 10px;
}
.reason ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.reason li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
  font-size: 1.02rem;
  color: var(--slate);
}
.reason li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--mantis);
}

/* ---------- Welcome (dark reveal) ---------- */
.welcome-hi {
  font-family: "Bubblegum Sans", sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--gold);
  margin-bottom: 4px;
}
.tagline-six {
  font-size: 1.12rem;
  color: #d7dce3;
  max-width: 760px;
  margin: 10px auto 0;
}
.tagline-six b {
  color: #fff;
}

/* ---------- Narrative / differentiator ---------- */
.mech-card {
  background: linear-gradient(160deg, #fff7ef, #fff);
  border: 1px solid rgba(245, 123, 24, 0.3);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  margin-top: 26px;
}
.mech-card h3 {
  margin-bottom: 12px;
}
.not-this {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}
.not-this span {
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 100px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--slate);
}
.not-this span.yes {
  background: var(--grad-cta);
  color: #fff;
  border: 0;
}
.why-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .why-cards {
    grid-template-columns: 1fr;
  }
}
.why-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  border-top: 4px solid var(--orange);
}
.why-card:nth-child(2) {
  border-top-color: var(--pine);
}
.why-card:nth-child(3) {
  border-top-color: var(--mantis);
}
.why-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.why-card p {
  font-size: 1rem;
  margin: 0;
  color: var(--slate);
}

/* ---------- Lever band ---------- */
.lever {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.lever p.big {
  font-size: clamp(1.2rem, 2.3vw, 1.5rem);
  color: #fff;
  font-weight: 700;
}
.lever .question {
  margin: 28px auto 0;
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  color: #fff;
  letter-spacing: -0.01em;
}

/* ---------- Comparison (7 cols) ---------- */
.cmp.cmp7 {
  min-width: 980px;
  font-size: 0.9rem;
}
.cmp.cmp7 thead th {
  font-size: 0.95rem;
  line-height: 1.25;
}
.cmp.cmp7 thead th small {
  display: block;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.74rem;
  margin-top: 3px;
}
.cmp.cmp7 thead .vd small {
  color: rgba(255, 255, 255, 0.85);
}
.cmp.cmp7 td.word {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
}
.cmp.cmp7 tr.cost td {
  font-weight: 800;
  color: var(--ink);
  background: var(--bg);
}
.cmp.cmp7 tr.cost td.vd {
  color: var(--orange);
}
.cmp.cmp7 td.vd.inc {
  color: var(--viridian);
  font-weight: 800;
}

/* ---------- Proof: success stories ---------- */
.stories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 800px) {
  .stories {
    grid-template-columns: 1fr;
  }
}
.story-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-rest);
}
.story-card .ph {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: #fff;
  background: var(--grad-cta);
  overflow: hidden;
}
.story-card .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-card:nth-child(4n + 2) .ph {
  background: linear-gradient(135deg, var(--pine), var(--teal));
}
.story-card:nth-child(4n + 3) .ph {
  background: linear-gradient(135deg, var(--viridian), var(--mantis));
}
.story-card:nth-child(4n) .ph {
  background: linear-gradient(135deg, #7a5cf5, #f57b18);
}
.story-card p {
  font-size: 1rem;
  margin: 0;
  color: var(--slate);
}
.story-card p b {
  color: var(--orange);
}

/* ---------- Market stats ---------- */
.market {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 800px) {
  .market {
    grid-template-columns: 1fr;
  }
}
.mstat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.mstat .mi {
  flex: 0 0 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  background: var(--grad-cta);
}
.mstat:nth-child(2) .mi {
  background: linear-gradient(135deg, var(--pine), var(--teal));
}
.mstat:nth-child(3) .mi {
  background: linear-gradient(135deg, var(--viridian), var(--mantis));
}
.mstat:nth-child(4) .mi {
  background: linear-gradient(135deg, #7a5cf5, #f57b18);
}
.mstat p {
  margin: 0;
  font-size: 1.02rem;
  color: #c9d0da;
}
.mstat p b {
  color: #fff;
}
.gary {
  margin: 44px auto 0;
  max-width: 820px;
  text-align: center;
  padding: 32px 30px;
  border-radius: 26px;
  background: linear-gradient(
    135deg,
    rgba(245, 123, 24, 0.14),
    rgba(96, 193, 77, 0.08)
  );
  border: 1px solid rgba(245, 123, 24, 0.3);
}
.gary .qm {
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 0.6;
  color: var(--orange-2);
  display: block;
}
.gary p.q {
  font-family: "Outfit", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  color: #fff;
  margin: 10px 0 12px;
}
.gary .by {
  font-weight: 700;
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Recurring income duo ---------- */
.duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .duo {
    grid-template-columns: 1fr;
  }
}
.duo-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
}
.duo-card .top {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff3e6, #ffe0bf);
}
.duo-card:nth-child(2) .top {
  background: linear-gradient(135deg, #e7f7f2, #d2efe6);
}
.duo-card .top .fig {
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--orange);
}
.duo-card:nth-child(2) .top .fig {
  color: var(--pine);
}
.duo-card .top small {
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.duo-card .body {
  padding: 20px 22px;
}
.duo-card .body p {
  margin: 0;
  font-size: 1.02rem;
  color: var(--slate);
}

/* ---------- Audience looking-for cards ---------- */
.looking {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .looking {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 580px) {
  .looking {
    grid-template-columns: 1fr;
  }
}
.look {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.look .cap {
  display: inline-block;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--orange);
  background: rgba(245, 123, 24, 0.08);
  border-radius: 100px;
  padding: 5px 12px;
  margin-bottom: 12px;
}
.look h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.look p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--slate);
}
.look.more {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--grad-cta);
  border: 0;
}
.look.more h3 {
  color: #fff;
  font-size: 1.5rem;
  margin: 0;
}

/* ---------- Problems ---------- */
.probs {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
.prob {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 26px;
  box-shadow: var(--shadow-rest);
}
.prob:nth-child(even) .pimg {
  order: 2;
}
@media (max-width: 760px) {
  .prob {
    grid-template-columns: 1fr;
  }
  .prob:nth-child(even) .pimg {
    order: 0;
  }
}
.prob .pimg img {
  border-radius: 18px;
  width: 100%;
}
.prob .tag {
  display: inline-block;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: #e5484d;
  border-radius: 100px;
  padding: 5px 12px;
  margin-bottom: 10px;
}
.prob h3 {
  margin-bottom: 10px;
}
.prob ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.prob li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 6px;
  color: var(--slate);
  font-size: 1rem;
}
.prob li::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 2px;
  top: 1px;
  color: #e5484d;
}
.prob p {
  font-size: 1rem;
  margin: 0;
}
.better {
  max-width: 900px;
  margin: 44px auto 0;
  background: linear-gradient(160deg, #effaf2, #fff);
  border: 1px solid rgba(96, 193, 77, 0.35);
  border-radius: 26px;
  padding: 30px 32px;
}
.better h3 {
  text-align: center;
  margin-bottom: 18px;
}
.better ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.better li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 1.04rem;
  color: var(--slate);
}
.better li img {
  width: 26px;
  flex: 0 0 26px;
  margin-top: 2px;
}

/* ---------- Introducing chips ---------- */
.no-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.no-more span {
  font-weight: 700;
  background: rgba(229, 72, 77, 0.12);
  color: #ff9a9d;
  border: 1px solid rgba(229, 72, 77, 0.35);
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 0.98rem;
}

/* ---------- 4 steps (image variant) ---------- */
.steps4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 800px) {
  .steps4 {
    grid-template-columns: 1fr;
  }
}
.step4 {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  display: flex;
  flex-direction: column;
}
.step4 .fig {
  background: linear-gradient(160deg, #fff3e6, #fff);
  padding: 18px 18px 0;
}
.step4 .fig img {
  border-radius: 14px 14px 0 0;
  display: block;
  width: 100%;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.06);
}
.step4 .body {
  padding: 22px 24px 26px;
}
.step4 .sn {
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.step4 h3 {
  margin: 6px 0 8px;
  font-size: 1.3rem;
}
.step4 p {
  margin: 0;
  font-size: 1rem;
  color: var(--slate);
}

/* ---------- Core tool + upgrades ---------- */
.sold {
  display: inline-block;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 100px;
  padding: 5px 13px;
  margin: 6px 0 12px;
}
.sold b {
  color: var(--ink);
}
.feature .jv-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.feature .jv-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
  font-size: 0.98rem;
  color: var(--slate);
}
.feature .jv-list li img {
  width: 20px;
  margin-top: 3px;
}
/* masonry flow: short cards no longer stretch to match the tall ones */
.incl-grid {
  columns: 2;
  column-gap: 20px;
  margin-top: 30px;
}
@media (max-width: 800px) {
  .incl-grid {
    columns: 1;
  }
}
.incl-grid > .incl {
  break-inside: avoid;
  margin-bottom: 20px;
}
.incl {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-rest);
}
.incl .ih {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.incl .ih .gi {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--grad-cta);
  font-size: 1.05rem;
  flex: 0 0 44px;
}
.incl:nth-child(3n + 2) .ih .gi {
  background: linear-gradient(135deg, var(--pine), var(--teal));
}
.incl:nth-child(3n) .ih .gi {
  background: linear-gradient(135deg, var(--viridian), var(--mantis));
}
.incl h3 {
  font-size: 1.15rem;
  margin: 0;
}
.incl p {
  font-size: 0.98rem;
  margin: 0 0 6px;
  color: var(--slate);
}
.incl ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.incl li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 5px;
  font-size: 0.95rem;
  color: var(--slate);
}
.incl li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad-cta);
}
.incl img.shot {
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-top: 12px;
  width: 100%;
}
.incl.wide {
  column-span: all;
  background: linear-gradient(160deg, #fff7ef, #fff);
  border-color: rgba(245, 123, 24, 0.35);
}

.upgrades {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 800px) {
  .upgrades {
    grid-template-columns: 1fr;
  }
}
.upg {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  box-shadow: var(--shadow-rest);
}
.upg .ulabel {
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.upg h3 {
  margin: 6px 0 2px;
}
.upg .lead {
  font-style: italic;
  color: var(--muted);
  font-size: 0.98rem;
  margin: 6px 0 12px;
}
.upg ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.upg li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 7px;
  font-size: 0.98rem;
  color: var(--slate);
}
.upg li img {
  width: 20px;
  margin-top: 3px;
}
.upg .why {
  font-size: 0.96rem;
  margin: 0;
  color: var(--slate);
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}
.upg.bonus-up {
  grid-column: 1/-1;
  background: linear-gradient(135deg, #1d2128, #2d333c);
  border: 0;
}
.upg.bonus-up h3,
.upg.bonus-up .why {
  color: #fff;
}
.upg.bonus-up .lead {
  color: #aeb6c2;
}
.upg.bonus-up .sold {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: #aeb6c2;
}
.upg.bonus-up .sold b {
  color: #fff;
}

.small-fee {
  max-width: 900px;
  margin: 44px auto 0;
  text-align: center;
  border-radius: 26px;
  padding: 34px 32px;
  background: var(--ink);
  border: 1px solid rgba(245, 123, 24, 0.35);
}
.small-fee h3 {
  color: #fff;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  margin-bottom: 12px;
}
.small-fee p {
  color: #aeb6c2;
  font-size: 1.04rem;
}
.small-fee p strong {
  color: var(--gold);
}

/* ---------- Why affiliates love ---------- */
.love {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .love {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 580px) {
  .love {
    grid-template-columns: 1fr;
  }
}
.love-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.love-card .gi {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  background: var(--grad-cta);
  margin-bottom: 14px;
}
.love-card:nth-child(3n + 2) .gi {
  background: linear-gradient(135deg, var(--pine), var(--teal));
}
.love-card:nth-child(3n) .gi {
  background: linear-gradient(135deg, var(--viridian), var(--mantis));
}
.love-card h3 {
  font-size: 1.12rem;
  margin-bottom: 8px;
}
.love-card p {
  margin: 0;
  font-size: 0.98rem;
}
.bonus-note {
  max-width: 860px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 1.1rem;
  color: #d7dce3;
}
.bonus-note b {
  color: var(--gold);
}

/* ---------- Funnel ladder ---------- */
.ladder {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rung {
  display: grid;
  grid-template-columns: 150px 1fr 190px;
  gap: 22px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px 24px;
  box-shadow: var(--shadow-rest);
  position: relative;
}
.rung::after {
  content: "";
  position: absolute;
  left: 96px;
  bottom: -17px;
  width: 2px;
  height: 16px;
  background: var(--border);
}
.rung:last-child::after {
  display: none;
}
@media (max-width: 820px) {
  .rung {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .rung::after {
    left: 40px;
  }
}
.rung .step {
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink-3);
  border-radius: 100px;
  padding: 7px 12px;
  text-align: center;
}
.rung.fe .step {
  background: var(--grad-cta);
}
.rung.oto .step {
  background: linear-gradient(135deg, var(--pine), var(--teal));
}
.rung.rec .step {
  background: linear-gradient(135deg, var(--viridian), var(--mantis));
}
.rung h3 {
  font-size: 1.2rem;
  margin: 0 0 6px;
}
.rung h3 .p {
  color: var(--orange);
}
.rung p {
  margin: 0;
  font-size: 0.97rem;
  color: var(--slate);
}
.rung .comm {
  text-align: center;
  background: linear-gradient(160deg, #fff7ef, #fff);
  border: 1px solid rgba(245, 123, 24, 0.35);
  border-radius: 16px;
  padding: 12px 10px;
}
.rung .comm .v {
  display: block;
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rung .comm .l {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rung .comm .l2 {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--viridian);
  margin-top: 3px;
}
.rung.fe {
  border: 2px solid var(--orange);
}
.ladder-foot {
  text-align: center;
  margin-top: 22px;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------- Prizes / reciprocation / resources ---------- */
.prize-pool {
  text-align: center;
}
.prize-pool .pool {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 9vw, 6rem);
  line-height: 1;
  background: var(--grad-sweep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.prizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}
@media (max-width: 800px) {
  .prizes {
    grid-template-columns: 1fr;
  }
}
.prize {
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.prize .medal-i {
  font-size: 2.2rem;
}
.prize h3 {
  font-size: 1.15rem;
  margin: 10px 0 6px;
}
.prize p {
  margin: 0;
  font-size: 0.95rem;
}
.prize.gold {
  border-color: rgba(254, 214, 41, 0.5);
  background: linear-gradient(
    160deg,
    rgba(254, 214, 41, 0.12),
    rgba(255, 255, 255, 0.03)
  );
}
.recip {
  text-align: center;
}
.recip .yeah {
  font-family: "Bubblegum Sans", sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--orange);
  line-height: 1;
  margin: 6px 0 24px;
  display: block;
}
.proof-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 800px) {
  .proof-slots {
    grid-template-columns: 1fr;
  }
}
.proof-slot {
  aspect-ratio: 4/3;
  border-radius: 20px;
  border: 2px dashed rgba(245, 123, 24, 0.4);
  background: linear-gradient(160deg, #fff7ef, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.92rem;
}
.proof-slot i {
  font-size: 1.8rem;
  color: var(--orange);
}
.proof-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .tools {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 580px) {
  .tools {
    grid-template-columns: 1fr;
  }
}
.tool-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-rest);
}
.tool-card .gi {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  background: var(--grad-cta);
}
.tool-card:nth-child(3n + 2) .gi {
  background: linear-gradient(135deg, var(--pine), var(--teal));
}
.tool-card:nth-child(3n) .gi {
  background: linear-gradient(135deg, var(--viridian), var(--mantis));
}
.tool-card h3 {
  font-size: 1.12rem;
  margin: 0;
}
.tool-card p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--slate);
  flex: 1;
}
.tool-card a {
  align-self: flex-start;
  font-weight: 800;
  color: var(--orange);
  text-decoration: none;
  border: 1.5px solid rgba(245, 123, 24, 0.4);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 0.92rem;
  transition: 0.2s;
}
.tool-card a:hover {
  background: var(--orange);
  color: #fff;
}

/* ---------- Contact / final box ---------- */
.contact-row {
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.contact-row .faces {
  display: flex;
}
.contact-row .faces img,
.contact-row .faces span {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: var(--shadow-lift);
  object-fit: cover;
}
.contact-row .faces span {
  margin-left: -18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-cta);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
}
.contact-row .names .sig {
  font-family: "Bubblegum Sans", sans-serif;
  font-size: 1.8rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.contact-row .names .role {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.contact-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
}
.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 18px;
  transition: 0.2s;
}
.contact-links a:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.terms {
  max-width: 900px;
  margin: 0 auto;
}
.terms ol {
  padding-left: 20px;
  margin: 0;
}
.terms li {
  color: #aeb6c2;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.terms li b {
  color: #fff;
}
.date-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--grad-cta);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 1.02rem;
  box-shadow: var(--glow-orange);
}

/* placeholder token (anything still waiting on real content) */
.ph-token {
  border-bottom: 2px dashed var(--orange);
}

/* ---------- Top-bar countdown label ---------- */
.topbar .timer-lbl {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.9;
}
.topbar .timer-lbl:empty {
  display: none;
}

/* ---------- Launch at a glance (timeline) ---------- */
.timeline {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  padding-left: 34px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--grad-sweep);
}
.tl {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-rest);
}
.tl::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 20px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--pine);
}
.tl.hot {
  border-color: rgba(245, 123, 24, 0.45);
  background: linear-gradient(160deg, #fff7ef, #fff);
}
.tl.hot::before {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(245, 123, 24, 0.18);
}
.tl .when {
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}
.tl h3 {
  font-size: 1.12rem;
  margin: 4px 0 4px;
}
.tl p {
  margin: 0;
  font-size: 0.97rem;
  color: var(--slate);
}

/* ---------- Two contests ---------- */
.contests {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 34px;
}
@media (max-width: 800px) {
  .contests {
    grid-template-columns: 1fr;
  }
}
.contest {
  border-radius: var(--radius-lg);
  padding: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.contest:first-child {
  border-color: rgba(254, 214, 41, 0.45);
  background: linear-gradient(
    160deg,
    rgba(254, 214, 41, 0.1),
    rgba(255, 255, 255, 0.03)
  );
}
.contest .ch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.contest .cn {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
}
.contest .cw {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 700;
}
.contest .places {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contest .places li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #d7dce3;
  font-weight: 600;
}
.contest .places li b {
  font-family: "Outfit", sans-serif;
  font-size: 1.2rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.contest .places li.p1 b {
  color: var(--gold);
  font-size: 1.45rem;
}
.contest .ctot {
  text-align: right;
  margin-top: 10px;
  color: #aeb6c2;
  font-weight: 700;
}
.contest .ctot b {
  color: var(--orange-2);
  font-size: 1.2rem;
}
.contest-rules {
  max-width: 900px;
  margin: 30px auto 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 22px 26px;
}
.contest-rules h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.contest-rules ul {
  margin: 0;
  padding-left: 20px;
}
.contest-rules li {
  color: #aeb6c2;
  font-size: 0.94rem;
  margin-bottom: 6px;
}
.contest-rules li b {
  color: #fff;
}

/* ---------- Contact note ---------- */
.contact-note {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--slate);
  max-width: 620px;
  margin: 18px auto 0;
}

/* ============================================================
   FRONT-END (All Access Bundle) — components used only on /jvz/bundle/.
   Everything above this line is shared with /jvz/partners/jv.css.
   ============================================================ */

/* steps: five cards, the last spans both columns */
.step4.wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
}
.step4.wide .fig {
  padding: 18px;
  height: 100%;
  display: flex;
  align-items: center;
}
.step4.wide .fig img {
  border-radius: 14px;
}
@media (max-width: 800px) {
  .step4.wide {
    grid-template-columns: 1fr;
  }
}
.step4 .body p + p {
  margin-top: 8px;
}
.step4 .body p.tail {
  font-weight: 700;
  color: var(--ink);
  font-style: italic;
}

/* the feed narrative */
.feed-punch {
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  line-height: 1.1;
  background: var(--grad-sweep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  margin: 6px 0 14px;
}
.story-close {
  max-width: 820px;
  margin: 40px auto 0;
  text-align: center;
}
.story-close p {
  font-size: 1.08rem;
}
.story-close .kick {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--ink);
  margin-top: 22px;
}
.reason p {
  font-size: 1.02rem;
  color: var(--slate);
  margin: 0;
}
.inner-quote {
  font-family: "Bubblegum Sans", sans-serif;
  font-size: 1.35rem !important;
  color: var(--orange) !important;
  border-left: 4px solid var(--orange);
  padding-left: 16px;
}

/* businesses paying top dollar */
.pay-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .pay-duo {
    grid-template-columns: 1fr;
  }
}
.pay-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.pay-card img {
  width: 100%;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.pay-card .cap {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(29, 33, 40, 0.88);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 12px 16px;
  color: #fff;
}
.pay-card .cap b {
  display: block;
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--gold);
}
.pay-card .cap span {
  font-size: 0.92rem;
  color: #d7dce3;
}

/* five agency jobs */
.jobs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) {
  .jobs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .jobs {
    grid-template-columns: 1fr;
  }
}
.job {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  box-shadow: var(--shadow-rest);
}
.job .jn {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-weight: 900;
  color: #fff;
  background: var(--grad-cta);
  margin-bottom: 12px;
}
.job:nth-child(2) .jn {
  background: linear-gradient(135deg, var(--pine), var(--teal));
}
.job:nth-child(3) .jn {
  background: linear-gradient(135deg, var(--viridian), var(--mantis));
}
.job:nth-child(4) .jn {
  background: linear-gradient(135deg, #7a5cf5, #f57b18);
}
.job:nth-child(5) .jn {
  background: var(--ink-3);
}
.job h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.job p {
  font-size: 0.95rem;
  margin: 0;
  color: var(--slate);
}

/* "different doors, same room" closer card inside the personas grid */
.persona.door-end {
  display: flex;
  align-items: center;
  background: var(--ink);
  border: 0;
}
.persona.door-end h3 {
  color: #fff;
  font-size: 1.5rem;
}
.persona.door-end p {
  color: #aeb6c2;
}
.persona.door-end strong {
  color: #fff;
}

/* payback */
.payback {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1000px) {
  .payback {
    grid-template-columns: 1fr;
  }
}
.pb {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-rest);
}
.pb.main {
  border: 2px solid var(--orange);
  background: linear-gradient(160deg, #fff7ef, #fff);
}
.pb .gi {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  background: var(--grad-cta);
  margin-bottom: 14px;
}
.pb .gi.t {
  background: linear-gradient(135deg, var(--pine), var(--teal));
}
.pb .gi.m {
  background: linear-gradient(135deg, var(--viridian), var(--mantis));
}
.pb h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.pb p {
  font-size: 1rem;
  color: var(--slate);
}
.calc-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.calc-rows .cr {
  background: #fff;
  border: 1px solid rgba(245, 123, 24, 0.25);
  border-radius: 14px;
  padding: 12px 14px;
}
.calc-rows .k {
  display: block;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 3px;
}
.calc-rows .v {
  font-size: 0.97rem;
  color: var(--slate);
}
.calc-rows .v b {
  color: var(--ink);
}

/* value tables: inline description + closing lines */
.stack-table .what .rep {
  display: block;
  font-weight: 500;
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: 3px;
}
.stack-total .nofee {
  color: #d7dce3;
  font-weight: 600;
  margin-top: 8px;
}

/* buy card */
.price-card .buy-box {
  display: block;
  max-width: 230px;
  margin: 0 auto 10px;
}
.price-card .incl-h {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 6px 0 10px;
}
.price-card .includes li span {
  flex: 1;
}
.price-card .bonus-list em {
  color: var(--orange);
  font-style: normal;
  font-weight: 700;
}
.buy-soon {
  text-align: center;
  font-weight: 700;
  color: var(--orange);
  margin: 10px 0 0;
  font-size: 0.98rem;
}

/* 14-day guarantee strip (the shared warranty-badge image says "30 Day" — wrong for this offer) */
.offer-foot.g14 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.offer-foot.g14 .g14-seal {
  width: 74px;
  height: auto;
}
.offer-foot.g14 .g14-txt {
  text-align: left;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.2;
}
.offer-foot.g14 .g14-txt b {
  color: var(--orange);
}
.offer-foot.g14 .g14-txt span {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
}

/* five stories: zig-zag every other card (the shared rule only offsets the 2nd of 3) */
.reasons .reason:nth-child(even) {
  margin-left: 60px;
}
@media (max-width: 700px) {
  .reasons .reason:nth-child(even) {
    margin-left: 0;
  }
}

/* ============================================================
   PRELAUNCH (webinar registration) — components used only on /jvz/prelaunch/.
   Everything above is shared with /jvz/bundle/fe.css.
   ============================================================ */

/* registration card */
.reg-card {
  max-width: 620px;
  margin: 48px auto 0;
  background: #fff;
  border-radius: 30px;
  border: 3px solid var(--orange);
  padding: 30px 32px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.sec-dark .reg-card {
  margin-top: 0;
}
@media (max-width: 580px) {
  .reg-card {
    padding: 24px 18px;
  }
}
.reg-card .reg-head h3 {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  margin: 14px 0 6px;
}
.reg-card .reg-head p {
  font-size: 1rem;
  color: var(--slate);
  margin-bottom: 18px;
}
.when-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--orange);
  background: rgba(245, 123, 24, 0.1);
  border: 1px solid rgba(245, 123, 24, 0.3);
  border-radius: 100px;
  padding: 8px 16px;
}
.reg-form .ok {
  display: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--viridian);
  margin: 4px 0 0;
}
.reg-form.sent .ok {
  display: block;
}
.reg-form.err .ok {
  color: #c0392b;
}
.reg-form .ok a {
  color: inherit;
  text-decoration: underline;
}
.reg-form .btn-cta {
  font-size: 1.2rem;
}

/* raise-your-hand grid */
.hands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .hands {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 580px) {
  .hands {
    grid-template-columns: 1fr;
  }
}
.hand {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-rest);
  background: url(img/light-card.webp);
  background-size: cover;
  background-position: top;
}
.hands {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
}

.hands > * {
  grid-column: span 2;
}

/* Last two */
.hands > :nth-child(4) {
  grid-column: 2 / span 2;
}

.hands > :nth-child(5) {
  grid-column: 4 / span 2;
}
.hand .hi {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}
.hand .hi img {
    width: 100px;
}
.hand p {
    font-size: 1.1rem;
    color: var(--slate);
    margin: 0;
}
.hand.seat {
    background: var(--ink);
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    max-width: 670px;
    text-align: center;
    align-items: center;
    margin: 40px auto 0px;
}
.hand.seat p {
  color: #d7dce3;
}
.hand.seat strong {
  color: var(--gold);
}
.hand.seat .btn-cta {
  font-size: 1.05rem;
  padding: 13px 26px;
}

/* what this isn't vs what it is */
.admit {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 860px) {
  .admit {
    grid-template-columns: 1fr;
  }
}
.admit .isnt {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admit .ai {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: 18px;
  padding: 18px 20px;
      background: linear-gradient(95deg, rgba(76, 51, 229, 0.40) 0.11%, rgba(212, 74, 99, 0.40) 100.11%);
    border: 1px solid var(--orange);
}
.admit .ai span {
  font-size: 1.3rem;
  line-height: 1.3;
  flex-shrink:0;
}
.admit .ai img{
  width:32px;
}
.admit .ai p {
  margin: 0;
  font-size: 1.1rem;
}
.admit .is {
  /* background: linear-gradient(
    160deg,
    rgba(96, 193, 77, 0.16),
    rgba(255, 255, 255, 0.03)
  ); */
  background:#fff;
  border: 1px solid rgba(96, 193, 77, 0.45);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.admit .is .big {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 12px;
}
.admit .is .big img{
  height: 48px;
}
.admit .is p {
  font-size: 1.05rem;
  color:var(--text);
}
.admit .is p strong {
  color: var(--text);
  font-weight: 700;
}
.admit .is .anyway {
  font-family: "Bubblegum Sans", sans-serif;
  font-size: 1.8rem;
  color: var(--orange);
  margin: 6px 0 0;
}

/* early-registration gifts */
.gifts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 1000px) {
  .gifts {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 580px) {
  .gifts {
    grid-template-columns: 1fr;
  }
}
.gift {
    background: #fff;
    border: 1px solid rgba(245, 123, 24, 0.3);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-rest);
    display: flex;
    align-items: center;
    gap: 20px;
}
.gift .gi {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.7rem;
    background: var(--grad-cta);
    flex-shrink: 0;
}
.gift:nth-child(2) .gi {
  background: linear-gradient(135deg, var(--pine), var(--teal));
}
.gift:nth-child(3) .gi {
  background: linear-gradient(135deg, var(--viridian), var(--mantis));
}
.gift:nth-child(4) .gi {
  background: linear-gradient(135deg, #7a5cf5, #f57b18);
}
.gift h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.gift p {
  font-size: 0.97rem;
  margin: 0;
  color: var(--slate);
}

/* teaser script — opens the final registration section and lands on its heading */
.teaser {
  max-width: 860px;
  margin: 0 auto 56px;
  text-align: center;
}
.teaser p {
  color: #c9d0da;
  font-size: 1.08rem;
}
.teaser .t-open {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  color: #fff;
  line-height: 1.3;
}
.teaser .t-open em {
  color: var(--orange-2);
}
.teaser .t-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 26px;
}
.teaser .t-tabs span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px 12px 4px 4px;
  padding: 9px 16px;
}
.teaser .t-tabs span i {
  color: var(--orange-2);
}
.teaser .t-tabs span.cry {
  border-color: rgba(229, 72, 77, 0.5);
  background: rgba(229, 72, 77, 0.12);
}
.teaser .t-tabs span.cry i {
  color: #ff9a9d;
}
.teaser .t-fixed {
  font-family: "Bubblegum Sans", sans-serif;
  font-size: clamp(2rem, 4.6vw, 2.8rem) !important;
  color: #fff !important;
  line-height: 1.1;
  margin: 0 0 16px;
}
.teaser .t-live {
  color: #fff;
  font-weight: 600;
  margin: 0;
}

/* ---- Mobile fixes (2026-10-15) ----
   The 6-column .hands layout above sits after the 900px/580px queries and won at every width, so the
   five "raise your hand" cards stayed three across on phones (one word per line). These come last
   so they win. Also: a compact top bar, and the four hero stats as a 2x2 grid. */
@media (max-width: 900px) {
  .hands {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .hands > *,
  .hands > :nth-child(4),
  .hands > :nth-child(5) {
    grid-column: auto;
  }
  .hands > :nth-child(5) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 580px) {
  .hands {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hands > :nth-child(5) {
    grid-column: auto;
  }
  .hand {
    padding: 20px;
  }
  .hand .hi img {
    width: 64px;
  }
  .hand p {
    font-size: 1rem;
  }

  .topbar {
    padding: 6px 10px;
    gap: 6px 10px;
  }
  .topbar .tb-more,
  .topbar .timer-lbl {
    display: none;
  }
  .topbar .lbl {
    flex-basis: 100%;
    font-size: 12px;
  }
  .topbar .tchip {
    min-width: 0;
    padding: 2px 6px;
    font-size: 0.8rem;
  }
  .topbar .lockbtn {
    padding: 5px 12px;
    font-size: 0.8rem;
  }

  .stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 12px 10px;
  }
  .stat-row .t {
    padding: 6px 4px;
    border-right: 0;
  }
}
/* Tablet widths too: the compact top bar (phones got it above), and the early-registration gift cards one per row. */
@media (max-width: 900px) {
  .topbar { padding: 6px 10px; gap: 6px 10px; }
  .topbar .timer-lbl { display: none; }
  .topbar .tchip { min-width: 0; padding: 2px 6px; font-size: 0.8rem; }
  .topbar .lockbtn { padding: 5px 12px; font-size: 0.8rem; }
}
@media (max-width: 700px) {
  .gifts { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .topbar .tb-more { display: none; }
  .topbar .lbl { flex-basis: 100%; font-size: 12px; }
}