/* ======================================================================
   Market-entry playbook - interactive region × vertical planner
   ====================================================================== */

.planner{ margin:22px 0 26px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 1px 2px rgba(8,39,57,.05), 0 30px 60px -46px rgba(8,39,57,.3); overflow:hidden; }
.planner-controls{ padding:clamp(20px,3vw,28px); border-bottom:1px solid var(--line); background:var(--bg-soft); display:grid; gap:18px; }
.pl-row .pl-label{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--green-deep); margin-bottom:10px; }
.pl-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pl-chip{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:.9rem; font-weight:600; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:9px 15px; cursor:pointer; transition:border-color .2s, background .2s, color .2s, box-shadow .2s; }
.pl-chip:hover{ border-color:#CFE6D7; }
.pl-chip img{ width:22px; height:16px; object-fit:cover; border-radius:3px; box-shadow:0 0 0 1px rgba(8,39,57,.12); }
.pl-chip svg{ width:17px; height:17px; color:var(--ink-soft); }
.pl-chip.active{ background:var(--green-deep); border-color:transparent; color:#fff; box-shadow:0 12px 24px -14px rgba(7,44,40,.6); }
.pl-chip.active svg{ color:#fff; }

.planner-out{ padding:clamp(20px,3vw,30px); }
.po-head{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:6px; }
.po-head h3{ margin:0; font-size:clamp(1.25rem,2.2vw,1.5rem); }
.po-badge{ display:inline-flex; align-items:center; gap:7px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:6px 13px; }
.po-badge svg{ width:14px; height:14px; }
.po-sub{ color:var(--ink-soft); line-height:1.6; margin:0 0 20px; }

.po-steps{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:13px; counter-reset:po; }
.po-steps li{ display:flex; gap:14px; align-items:flex-start; }
.po-steps li .po-n{ counter-increment:po; flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--grad-bright); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.92rem; box-shadow:0 8px 16px -9px rgba(28,101,71,.6); }
.po-steps li .po-n::before{ content:counter(po); }
.po-steps li .po-txt{ line-height:1.58; color:var(--ink); padding-top:3px; }
.po-steps li .po-txt strong{ font-weight:700; }

.po-vert{ display:flex; gap:13px; align-items:flex-start; background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:13px; padding:16px 18px; }
.po-vert .pov-ic{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); color:var(--green-deep); }
.po-vert .pov-ic svg{ width:18px; height:18px; }
.po-vert .pov-b .pov-label{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); margin-bottom:4px; }
.po-vert .pov-b p{ margin:0; color:var(--ink); line-height:1.58; }
.planner-out.swap{ animation:plFade .32s ease; }
@keyframes plFade{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }

/* Engagement steps (how Sales Source helps) */
.engage{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0 8px; counter-reset:eng; }
@media(max-width:820px){ .engage{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .engage{ grid-template-columns:1fr; } }
.engage-step{ position:relative; border:1px solid var(--line); border-radius:16px; padding:22px 20px; background:#fff; }
.engage-step .es-n{ counter-increment:eng; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.8rem; color:var(--green-deep); display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.engage-step .es-n::before{ content:counter(eng); width:26px; height:26px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--line); display:grid; place-items:center; }
.engage-step .es-ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--grad-bright); color:#fff; margin-bottom:13px; box-shadow:0 10px 20px -12px rgba(28,101,71,.6); }
.engage-step .es-ic svg{ width:19px; height:19px; }
.engage-step h4{ margin:0 0 6px; font-size:1.05rem; }
.engage-step p{ margin:0; color:var(--ink-soft); line-height:1.55; font-size:.9rem; }

/* Sign-up CTA panel - matches the site CTA band for a premium, on-brand look */
.signup-cta{ margin:26px 0; border-radius:20px; overflow:hidden; background:var(--grad); color:#fff; padding:clamp(28px,4.5vw,46px); text-align:center; position:relative; box-shadow:0 34px 64px -40px rgba(7,44,40,.62); }
.signup-cta h3{ color:#fff; font-size:clamp(1.4rem,2.8vw,1.9rem); margin:0 0 10px; }
.signup-cta h3 .cta-flag{ display:inline-block; width:1.32em; height:.92em; object-fit:cover; border-radius:4px; vertical-align:-2px; margin-left:10px; border:1.5px solid rgba(255,255,255,.92); box-shadow:0 4px 12px -3px rgba(7,44,40,.5); }
.signup-cta p{ color:rgba(255,255,255,.9); max-width:52ch; margin:0 auto 22px; line-height:1.6; }
.signup-cta .btn-row{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; }
.signup-cta .btn.on-dark{ background:linear-gradient(135deg,#1E8F5C 0%,#15786E 100%); color:#fff; border:1px solid rgba(255,255,255,.18); box-shadow:0 16px 38px -14px rgba(7,44,40,.55); }
.signup-cta .btn.on-dark:hover{ background:linear-gradient(135deg,#23A066 0%,#18867A 100%); color:#fff; }
.signup-cta .btn.ghost{ background:rgba(143,227,180,.12); border:1.5px solid rgba(143,227,180,.5); color:#EAFBF1; box-shadow:none; }
.signup-cta .btn.ghost:hover{ background:rgba(143,227,180,.2); border-color:rgba(143,227,180,.85); color:#fff; }
