/* ==========================================================================
   MTN SME Hub, version-specific components (V2 marketplace-led, V3 personalised)
   Loaded only by index-v2.html and index-v3.html. V1 keeps styles.css alone.
   ========================================================================== */

/* ===== Version switcher (shown on every version page) ===== */
.ver-bar{ background:var(--ink); color:#fff; }
.ver-bar .wrap{ display:flex; align-items:center; gap:16px; padding:10px 32px; flex-wrap:wrap; }
.ver-bar .lbl{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); }
.ver-bar .opts{ display:flex; gap:6px; flex-wrap:wrap; }
.ver-bar a{ font-size:12px; font-weight:700; padding:6px 13px; border-radius:999px; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.18); }
.ver-bar a:hover{ color:#fff; border-color:rgba(255,255,255,.5); }
.ver-bar a.on{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.ver-bar .note{ font-size:11.5px; color:rgba(255,255,255,.45); margin-left:auto; }
@media(max-width:720px){ .ver-bar .note{ display:none; } }


/* ===== Advice layer (doc: guide by business need BEFORE presenting products) ===== */
.advice-band{ background:var(--yellow-tint); border-top:1px solid var(--yellow-tint-2); border-bottom:1px solid var(--yellow-tint-2); }
.need-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.need{ background:#fff; border:1px solid var(--yellow-tint-2); border-radius:var(--radius-sm); padding:18px 18px 16px; transition:border-color .15s, transform .15s, box-shadow .15s; }
.need:hover{ border-color:var(--yellow); transform:translateY(-2px); box-shadow:var(--shadow); }
.need .ic{ width:34px; height:34px; border-radius:9px; background:var(--yellow); color:var(--ink); display:grid; place-items:center; margin-bottom:12px; }
.need h4{ font-size:14px; margin-bottom:5px; }
.need p{ font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
.need .go{ font-size:11.5px; font-weight:800; color:var(--yellow-shade); display:inline-flex; align-items:center; gap:5px; }
@media(max-width:900px){ .need-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== Five value propositions (doc: "Learn, fund, connect, buy and scale") ===== */
.vp-rail{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.vp{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px 18px; background:#fff; position:relative; overflow:hidden; transition:transform .15s, box-shadow .15s, border-color .15s; }
.vp:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--yellow); }
.vp::after{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--yellow); }
.vp .n{ font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--muted-2); margin-bottom:12px; }
.vp h4{ font-size:15px; margin-bottom:6px; }
.vp p{ font-size:12px; color:var(--muted); line-height:1.5; }
@media(max-width:1000px){ .vp-rail{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px){ .vp-rail{ grid-template-columns:1fr; } }

/* ===== Shop by job (doc: "Organise Shop around common jobs") ===== */
.job-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.job{ border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; background:#fff; box-shadow:var(--shadow); }
.job .top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.job .ic{ width:40px; height:40px; border-radius:10px; background:var(--ink); color:var(--yellow); display:grid; place-items:center; flex-shrink:0; }
.job h4{ font-size:16px; }
.job .sub{ font-size:12px; color:var(--muted); }
.job-items{ display:flex; flex-direction:column; gap:0; margin-bottom:16px; }
.job-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.job-item:last-child{ border-bottom:none; }
.job-item .nm{ font-size:13px; font-weight:600; }
.job-item .pr{ font-size:12px; color:var(--muted); }
.cta-tag{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:5px; white-space:nowrap; }
.cta-tag.buy{ background:var(--yellow); color:var(--ink); }
.cta-tag.quote{ background:var(--ink); color:#fff; }
.cta-tag.advice{ background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }
@media(max-width:900px){ .job-grid{ grid-template-columns:1fr; } }

/* ===== Funding (doc lists funding first under SMEHub Marketplace) ===== */
.fund-band{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.fund-band::before{ content:""; position:absolute; top:-120px; left:-80px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,197,2,.18) 0%, transparent 70%); }
.fund-band .wrap{ position:relative; z-index:1; }
.fund-band .sec-title{ color:#fff; }
.fund-band .sec-desc{ color:rgba(255,255,255,.6); }
.fund-band .eyebrow-label{ color:var(--yellow); }
.fund-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); overflow:hidden; margin-bottom:22px; }
.fund-step{ padding:22px 20px; border-right:1px solid rgba(255,255,255,.14); }
.fund-step:last-child{ border-right:none; }
.fund-step .n{ width:26px; height:26px; border-radius:7px; background:var(--yellow); color:var(--ink); display:grid; place-items:center; font-weight:800; font-size:12px; margin-bottom:12px; }
.fund-step h4{ color:#fff; font-size:14px; margin-bottom:5px; }
.fund-step p{ font-size:12px; color:rgba(255,255,255,.55); line-height:1.5; }
.fund-partners{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fund-partners span{ font-size:12px; font-weight:700; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); padding:7px 14px; border-radius:999px; color:rgba(255,255,255,.85); }
@media(max-width:900px){ .fund-steps{ grid-template-columns:repeat(2,1fr); } .fund-step{ border-bottom:1px solid rgba(255,255,255,.14); } }
@media(max-width:640px){ .fund-steps{ grid-template-columns:1fr; } .fund-step{ border-right:none; } }

/* ==========================================================================
   V3 Personalised: single evergreen hero, no accounts, no toggle. A visitor's
   two inputs build an action plan on the spot (doc: anonymous, device-only
   context, no account or checkout).
   ========================================================================== */
.plan-hero{ display:grid; grid-template-columns:1.15fr 1fr; gap:36px; align-items:center; }
.plan-hero h1{ font-size:clamp(28px,3.8vw,40px); margin-bottom:14px; }
.plan-hero .lead{ font-size:15.5px; color:var(--muted); margin-bottom:22px; max-width:44ch; }
.plan-checks{ display:flex; flex-direction:column; gap:10px; list-style:none; margin-bottom:0; }
.plan-checks li{ display:flex; gap:9px; font-size:13px; align-items:flex-start; }
.plan-checks li svg{ color:var(--yellow-shade); flex-shrink:0; margin-top:2px; }
.plan-card{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 28px; background:#fff; }
.plan-card h4{ font-size:15px; margin-bottom:14px; }
.plan-card .field{ margin-bottom:12px; }
.plan-card label{ display:block; font-size:12px; font-weight:700; margin-bottom:6px; }
.plan-card input{ width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:8px; font-size:13.5px; font-family:inherit; outline:none; background:var(--surface); }
.plan-card input:focus{ border-color:var(--yellow); background:#fff; }
.plan-card .fine{ font-size:10.5px; color:var(--muted-2); text-align:center; margin-top:11px; line-height:1.5; }
@media(max-width:900px){ .plan-hero{ grid-template-columns:1fr; } }