/* ============================================================
   Ventra Sciences — Affiliate page (/affiliate/)
   Scoped under .vsc-aff. Background gradient + fonts come from the
   dark theme (html.vsc-dark ::before in vsc-dark.css). Loaded only
   on the affiliate page (functions.php is_page('affiliate')).
   ============================================================ */
.vsc-aff{
  --acc:#0EA5E9; --acc2:#38BDF8; --surface:rgba(38,46,61,0.50);
  --txt:#FFFFFF; --body:rgb(201,216,232); --muted:rgba(206,222,238,0.5);
  --line:rgba(255,255,255,0.10); --line2:rgba(255,255,255,0.14);
  --grad:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 100%);
  --glow-btn:0 4px 20px rgba(14,165,233,.40);
  --glow-card:0 18px 40px rgba(14,165,233,.14),0 0 0 1px rgba(14,165,233,.10);
  --glow-icon:drop-shadow(0 0 12px rgba(14,165,233,.45));
  --display:'Space Grotesk',Inter,sans-serif;
  color:var(--body); font-family:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.vsc-aff *{box-sizing:border-box}
.vsc-aff h1,.vsc-aff h2,.vsc-aff h3{font-family:var(--display); color:var(--txt); margin:0; letter-spacing:-0.5px}
.vsc-aff .wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.vsc-aff .vaff-accent{color:var(--acc) !important}
.vsc-aff .eyebrow{display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.vsc-aff .sec{padding:56px 0}

/* buttons */
.vsc-aff .vaff-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; text-decoration:none; border:none; font-family:inherit; transition:.18s}
.vsc-aff .vaff-btn-primary{background:var(--grad); color:#fff; border-radius:50px; padding:15px 30px; font-size:15px; font-weight:700}
.vsc-aff .vaff-btn-primary:hover{transform:translateY(-2px); box-shadow:var(--glow-btn)}
.vsc-aff .vaff-btn-outline{background:rgba(255,255,255,.04); color:#fff; border:1px solid var(--line2); border-radius:50px; padding:15px 28px; font-size:14px; font-weight:600}
.vsc-aff .vaff-btn-outline:hover{background:rgba(255,255,255,.09)}
.vsc-aff .vaff-btn svg{width:18px;height:18px}

/* hero */
.vsc-aff .vaff-hero{text-align:center; padding:62px 0 44px}
.vsc-aff .vaff-hero h1{font-size:50px; line-height:1.08; font-weight:800; margin-bottom:18px}
.vsc-aff .vaff-hero .lead{font-size:18px; line-height:1.65; color:var(--body); max-width:600px; margin:0 auto 30px}
.vsc-aff .vaff-hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.vsc-aff .vaff-hero-note{font-size:13.5px; color:var(--muted); margin-top:16px}
.vsc-aff .vaff-hero-note a{color:var(--acc2); text-decoration:none; font-weight:600}
.vsc-aff .hstats{display:flex; justify-content:center; gap:48px; flex-wrap:wrap; margin-top:40px; padding-top:34px; border-top:1px solid var(--line)}
.vsc-aff .hstat{text-align:center}
.vsc-aff .hstat .v{font-family:var(--display); font-size:28px; font-weight:700; color:#fff}
.vsc-aff .hstat .l{font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:4px}

/* section heading */
.vsc-aff .shead{text-align:center; max-width:600px; margin:0 auto 44px}
.vsc-aff .shead h2{font-size:32px; font-weight:700; line-height:1.18; margin-bottom:13px}
.vsc-aff .shead p{font-size:16.5px; line-height:1.6; color:var(--body); margin:0}

/* calculator */
.vsc-aff .calc{max-width:880px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:42px; display:grid; grid-template-columns:1.05fr .95fr; gap:42px; align-items:center}
.vsc-aff .calc-label{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px}
.vsc-aff .calc-label span:first-child{font-size:14px; color:var(--body); font-weight:600}
.vsc-aff .calc-label .num{font-family:var(--display); font-size:24px; font-weight:700; color:#fff}
.vsc-aff input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:100px; background:rgba(255,255,255,.12); outline:none; margin-bottom:26px}
.vsc-aff input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--grad); cursor:pointer; box-shadow:0 2px 12px rgba(14,165,233,.6)}
.vsc-aff input[type=range]::-moz-range-thumb{width:24px; height:24px; border:none; border-radius:50%; background:#0EA5E9; cursor:pointer}
.vsc-aff .aov-chip{display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:14px 18px}
.vsc-aff .aov-chip .k{font-size:13.5px; color:var(--muted)} .vsc-aff .aov-chip .v{font-family:var(--display); font-size:20px; font-weight:700; color:#fff}
.vsc-aff .aov-foot{font-size:12px; color:var(--muted); margin-top:10px}
.vsc-aff .calc-out{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:32px; text-align:center}
.vsc-aff .calc-out .smol{font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.vsc-aff .calc-out .sales{font-family:var(--display); font-size:20px; font-weight:600; color:var(--body); margin:5px 0 18px}
.vsc-aff .calc-out .pl{font-size:12.5px; color:var(--acc2); text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.vsc-aff .calc-out .payout{font-family:var(--display); font-size:56px; font-weight:800; line-height:1; margin-top:4px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.vsc-aff .calc-out .rate{font-size:12.5px; color:var(--muted); margin-top:12px}
.vsc-aff .calc-note{text-align:center; color:var(--muted); font-size:12.5px; margin-top:22px}

/* steps + benefits */
.vsc-aff .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.vsc-aff .step{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:28px 24px; transition:.25s}
.vsc-aff .step:hover{transform:translateY(-4px); box-shadow:var(--glow-card); border-color:rgba(14,165,233,.25)}
.vsc-aff .chip{width:42px; height:42px; display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.vsc-aff .chip svg{width:30px; height:30px; stroke:var(--acc); fill:none; stroke-width:1.5; filter:var(--glow-icon)}
.vsc-aff .step .n{font-family:var(--display); font-size:12px; font-weight:700; color:var(--acc); letter-spacing:.12em; margin-bottom:6px}
.vsc-aff .step h3{font-size:17px; font-weight:700; margin-bottom:9px}
.vsc-aff .step p,.vsc-aff .ben p{font-size:13.5px; line-height:1.55; color:var(--body); margin:0}
.vsc-aff .benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.vsc-aff .ben{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:30px; transition:.25s}
.vsc-aff .ben:hover{transform:translateY(-4px); box-shadow:var(--glow-card); border-color:rgba(14,165,233,.25)}
.vsc-aff .ben h3{font-size:17px; font-weight:700; margin-bottom:9px}

/* inner circle / discord */
.vsc-aff .circle{max-width:760px; margin:0 auto; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:56px 48px}
.vsc-aff .dmark{width:60px; height:60px; border-radius:16px; background:rgba(14,165,233,.10); display:inline-flex; align-items:center; justify-content:center; margin-bottom:22px}
.vsc-aff .dmark svg{width:34px; height:34px; fill:var(--acc2); filter:var(--glow-icon)}
.vsc-aff .circle h2{font-size:32px; font-weight:700; margin-bottom:16px}
.vsc-aff .circle p{font-size:16.5px; line-height:1.65; color:var(--body); max-width:560px; margin:0 auto 24px}
.vsc-aff .circle .pills{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:30px}
.vsc-aff .circle .pills span{font-size:12.5px; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:7px 15px}
.vsc-aff .vaff-btn-discord{background:var(--grad); color:#fff; border-radius:50px; padding:15px 32px; font-size:15px; font-weight:700}
.vsc-aff .vaff-btn-discord:hover{transform:translateY(-2px); box-shadow:var(--glow-btn)}
.vsc-aff .vaff-btn-discord svg{width:22px; height:22px; fill:#fff}

/* join CTA + band */
.vsc-aff .join{max-width:720px; margin:0 auto; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:54px 40px}
.vsc-aff .join h2{font-size:32px; font-weight:700; margin-bottom:14px}
.vsc-aff .join p{font-size:16.5px; color:var(--body); margin:0 auto 28px; max-width:520px; line-height:1.6}
.vsc-aff .join .vaff-btn-primary{font-size:16px; padding:17px 40px}
.vsc-aff .join .fine{font-size:12.5px; color:var(--muted); margin-top:18px; max-width:560px; margin-left:auto; margin-right:auto; line-height:1.5}
.vsc-aff .band{max-width:900px; margin:0 auto; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:16px; padding:26px 32px; display:flex; align-items:center; justify-content:space-between; gap:22px}
.vsc-aff .band p{margin:0; font-size:15px; color:var(--body); line-height:1.5} .vsc-aff .band b{color:#fff}

@media(max-width:900px){
  .vsc-aff .vaff-hero{padding:48px 0 38px} .vsc-aff .vaff-hero h1{font-size:38px} .vsc-aff .vaff-hero .lead{font-size:16.5px}
  .vsc-aff .hstats{gap:26px; margin-top:34px}
  .vsc-aff .sec{padding:48px 0} .vsc-aff .shead h2{font-size:27px}
  .vsc-aff .calc{grid-template-columns:1fr; gap:28px; padding:28px}
  .vsc-aff .steps{grid-template-columns:1fr 1fr; gap:14px}
  .vsc-aff .benefits{grid-template-columns:1fr; gap:14px}
  .vsc-aff .circle{padding:40px 26px} .vsc-aff .circle h2{font-size:26px}
  .vsc-aff .join{padding:40px 24px} .vsc-aff .join h2{font-size:26px}
  .vsc-aff .band{flex-direction:column; text-align:center}
}


/* ============================================================
   Ventra Affiliate - CLEANED / CONDENSED layout (2026-06-10)
   New components for the rebuilt page-affiliate.php:
     concise hero, live earnings tracker (.aff-dash with rising
     bars + count-up), numbered steps (.aff-steps), two panels
     (.aff-split), slim RUO close.
   All scoped under .vsc-aff so the dark gate + tokens apply and
   nothing leaks to other pages. Older .vaff-*/.calc/.steps rules
   above are now unused by this template but kept for rollback.
   ============================================================ */
.vsc-aff{--green:#34D399}

/* generic buttons used by the cleaned layout */
.vsc-aff .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:none;font-family:inherit;font-weight:600;transition:.18s;white-space:nowrap;text-decoration:none}
.vsc-aff .btn-primary{background:var(--grad);color:#fff;border-radius:50px;padding:13px 26px;font-size:14.5px}
.vsc-aff .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(14,165,233,.34)}
.vsc-aff .btn-ghost{background:rgba(255,255,255,.045);color:#fff;border:1px solid var(--line2);border-radius:50px;padding:11px 22px;font-size:14px}
.vsc-aff .btn-ghost:hover{background:rgba(255,255,255,.09)}
.vsc-aff .btn-block{width:100%}
.vsc-aff .btn svg{width:17px;height:17px}

/* concise hero */
.vsc-aff .aff-hero{text-align:center;padding:64px 0 40px}
.vsc-aff .aff-hero .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--acc2)}
.vsc-aff .aff-hero h1{font-size:44px;font-weight:800;line-height:1.08;margin-bottom:16px}
.vsc-aff .aff-hero p{font-size:17px;color:var(--body);max-width:560px;margin:0 auto 28px;line-height:1.6}
.vsc-aff .aff-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* live earnings tracker */
.vsc-aff .aff-dash-sec{padding:0 24px}
.vsc-aff .aff-dash{max-width:840px;margin:6px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 30px}
.vsc-aff .aff-dash-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}
.vsc-aff .aff-dash-head .ttl{font-family:var(--display);font-size:15px;font-weight:700;color:#fff}
.vsc-aff .aff-live{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--green);font-weight:600}
.vsc-aff .aff-live .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:vscAffPulse 2.2s infinite}
@keyframes vscAffPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.vsc-aff .aff-dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.vsc-aff .aff-chart-label{font-size:12px;color:var(--muted);margin-bottom:14px}
.vsc-aff .aff-bars{display:flex;align-items:flex-end;gap:9px;height:118px}
.vsc-aff .aff-bars span{flex:1;background:var(--grad);border-radius:6px 6px 0 0;height:6px;min-height:6px;transition:height 1.2s cubic-bezier(.2,.85,.25,1);opacity:.92}
.vsc-aff .aff-chart-x{display:flex;justify-content:space-between;margin-top:10px;font-size:10.5px;color:var(--muted)}
.vsc-aff .aff-stat-big .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--acc2);font-weight:700}
.vsc-aff .aff-stat-big .v{font-family:var(--display);font-size:46px;font-weight:800;line-height:1;margin:7px 0 4px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vsc-aff .aff-stat-big .s{font-size:12.5px;color:var(--muted)}
.vsc-aff .aff-stat-row{display:flex;gap:26px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.vsc-aff .aff-stat .v{font-family:var(--display);font-size:21px;font-weight:700;color:#fff}
.vsc-aff .aff-stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.vsc-aff .aff-dash-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);text-align:center}
.vsc-aff .aff-dash-foot b{color:#fff;font-weight:600}

/* numbered how-it-works steps */
.vsc-aff .aff-how{max-width:760px;margin:10px auto 40px;padding:0 24px}
.vsc-aff .aff-steps{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:2px}
.vsc-aff .aff-step{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.vsc-aff .aff-step:last-child{border-bottom:none}
.vsc-aff .aff-step .n{font-family:var(--display);font-size:14px;font-weight:700;color:var(--acc);width:34px;flex-shrink:0;padding-top:1px}
.vsc-aff .aff-step h3{font-size:16px;font-weight:700;margin-bottom:4px}
.vsc-aff .aff-step p{font-size:14px;color:var(--body);line-height:1.55;margin:0}

/* two panels (Discord + useadz) */
.vsc-aff .aff-split-sec{padding:0 24px 30px}
.vsc-aff .aff-split{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vsc-aff .aff-panel{border:1px solid var(--line);border-radius:16px;padding:32px 30px;background:var(--surface);display:flex;flex-direction:column}
.vsc-aff .aff-panel .btn{margin-top:auto}
.vsc-aff .aff-panel .mk{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.vsc-aff .aff-panel .mk.discord{background:rgba(88,101,242,.14)}
.vsc-aff .aff-panel .mk.discord svg{width:26px;height:26px;fill:#8b9bff}
.vsc-aff .aff-panel .mk.adz{background:rgba(14,165,233,.12)}
.vsc-aff .aff-panel .mk.adz svg{width:24px;height:24px;stroke:var(--acc2);fill:none;stroke-width:1.8}
.vsc-aff .aff-panel h3{font-size:19px;font-weight:700;margin-bottom:9px}
.vsc-aff .aff-panel p{font-size:14px;color:var(--body);line-height:1.6;margin-bottom:20px}

/* slim RUO close */
.vsc-aff .aff-close{padding:18px 24px 60px}
.vsc-aff .aff-close p{text-align:center;max-width:640px;margin:0 auto;font-size:13px;color:var(--muted);line-height:1.6}
.vsc-aff .aff-close a{color:var(--acc2);font-weight:600}

/* responsive (matches mockup @media 760 / 680, plus a small-phone hero step) */
@media(max-width:760px){
  .vsc-aff .aff-split{grid-template-columns:1fr}
}
@media(max-width:680px){
  .vsc-aff .aff-dash-grid{grid-template-columns:1fr;gap:26px}
  .vsc-aff .aff-bars{height:96px}
  .vsc-aff .aff-stat-big .v{font-size:38px}
  .vsc-aff .aff-dash{padding:24px 20px}
}
@media(max-width:560px){
  .vsc-aff .aff-hero{padding:48px 0 32px}
  .vsc-aff .aff-hero h1{font-size:32px}
  .vsc-aff .aff-hero p{font-size:15.5px}
  .vsc-aff .aff-panel{padding:26px 22px}
}