/* ============================================================
   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: 350px 1fr;
    gap: 26px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-rest);
}
.reason img{
  border-radius:20px;
}
.reason h3 {
    font-size: clamp(1.2rem, 2.4vw, 2rem);
}
@media (max-width: 700px) {
    .reason {
        grid-template-columns: 1fr;
    }
    
}
.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(2, 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: 1px 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.5rem;
    margin-bottom: 10px;
    line-height: 1.4;
}
.why-card p {
    font-size: 1.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 {
    
}
@media (max-width: 800px) {
    .steps4 {
        grid-template-columns: 1fr;
    }
}
.step4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    border-bottom: 1px dashed var(--border);
    background: rgb(243, 242, 252);
    padding: 60px;
    margin-bottom: 70px;
    border-radius: 50px;
}

.step4 .fig img {
    display: block;
    width: 100%;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}
.step4 .body {
    /* padding: 22px 24px 26px; */
}
.step4 .sn {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(160deg, var(--orange), var(--honey));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.step4 h3 {
    margin: 6px 0 8px;
    font-size: 1.6rem;
}
.step4 p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--slate);
}
.step4:nth-child(even) .fig{
  order: 1;
}
/* ---------- 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: 1.15rem;
    color: var(--slate);
}
.feature .jv-list li img {
    width: 30px;
    margin-top: 5px;
}
/* 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;
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 40px;
}

.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 {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange);
    font-family: "Bubblegum Sans", sans-serif;
    font-weight: 300;
    font-size: 16px;
}
.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.12rem;
    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);
    height: calc(100% - 30px);
    margin-bottom: 30px;
}
.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.5rem;
    margin-bottom: 8px;
}
.pb p {
    font-size: 1.1rem;
    color: var(--slate);
    margin: 0px;
}
.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.25rem;
    color: var(--ink);
    margin: 6px 0 10px;
    text-align:center;
}
.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) */



/* ==== Mobile fixes (2026-10-15) — last in the cascade on purpose, so they win over the rules above. ==== */
/* Sticky top bar: about 100-145px on phones and tablets, a fifth of the screen on every scroll. Compact it. */
@media (max-width: 900px) {
  .topbar { padding: 6px 10px; gap: 6px 10px; }
  .topbar .timer-lbl { display: none; }
  .topbar .lbl { flex-basis: 100%; font-size: 11.5px; line-height: 1.35; text-align: center; }
  .topbar .tchip { min-width: 0; padding: 2px 6px; font-size: 0.8rem; }
  .topbar .lockbtn { padding: 5px 12px; font-size: 0.8rem; }
}
/* "How it works" steps: image + text stayed side by side on phones (text ~99px wide). */
@media (max-width: 800px) {
  .step4 { grid-template-columns: 1fr; gap: 22px; padding: 26px 20px; border-radius: 28px; margin-bottom: 26px; }
  .step4:nth-child(even) .fig { order: 0; }
}
/* "Five people" stories: the fixed 350px image left ~95px for the text between 701 and 900px. */
@media (max-width: 900px) {
  .reason { grid-template-columns: 1fr; }
}
/* Personas: the desktop placements (span 2, nth-child 4/5) broke the 2-column tablet grid (text 6px wide). */
@media (max-width: 960px) {
  .personas > *, .personas > *:nth-child(4), .personas > *:nth-child(5) { grid-column: auto !important; }
  .personas > *:nth-child(5) { grid-column: 1 / -1 !important; }
}
/* "The alternatives" cards: two Bootstrap halves at 768px left ~128px for the text. */
@media (max-width: 900px) {
  .opt-card .col-md-6 { flex: 0 0 100%; max-width: 100%; width: 100%; }
}
/* Feature checklists: two columns on small phones made each item ~130px. */
@media (max-width: 480px) {
  .feature .jv-list { grid-template-columns: 1fr; }
}
/* The five agency jobs: five columns at 1001-1100px are too tight; three there. */
@media (min-width: 1001px) and (max-width: 1100px) {
  .jobs { grid-template-columns: repeat(3, 1fr); }
}
/* Proof strip under the demo video. The shared .stat-row is inline-flex, which ignores auto margins, so it sat
   left of the video's centre: make it a centred block-level flex row. On phones, a tidy 2x2 instead of 1 / 1 / 2. */
#demo .stat-row { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
@media (max-width: 580px) {
  #demo .stat-row { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 14px 6px; }
  #demo .stat-row .t { padding: 4px 6px; border-right: 0; }
}