/* ======================================================================
   Sales Source - interactive sales-methodology articles
   ====================================================================== */

/* Letter / stage strip in the hero or intro */
.method-letters{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
.method-letters span{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); color:#fff; backdrop-filter:blur(6px); }

/* Reader note */
.method-note{ display:flex; gap:13px; align-items:flex-start; padding:15px 18px; border-radius:14px; background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--green); margin:0 0 8px; }
.method-note svg{ flex:none; width:21px; height:21px; color:var(--green-deep); margin-top:1px; }
.method-note p{ margin:0; color:var(--ink-soft); line-height:1.6; }

/* Framework explorer (interactive tabs + panel) */
.method-explorer{ margin:26px 0; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(8,39,57,.05), 0 30px 60px -46px rgba(8,39,57,.3); }
.me-tabs{ display:flex; flex-wrap:wrap; gap:6px; padding:14px; background:var(--bg-soft); border-bottom:1px solid var(--line); }
.me-tab{ flex:1 1 64px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border-radius:13px; border:1px solid transparent; background:transparent; cursor:pointer; transition:background .2s, border-color .2s; font-family:inherit; }
.me-tab .me-key{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; color:var(--ink); width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.me-tab .me-mini{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); transition:color .2s; }
.me-tab:hover .me-key{ border-color:#CFE6D7; }
.me-tab.active .me-key{ background:var(--grad-bright); color:#fff; border-color:transparent; box-shadow:0 14px 26px -12px rgba(7,44,40,.5); transform:translateY(-3px) scale(1.04); }
.me-tab .me-key .me-flag{ display:block; width:30px; height:22px; object-fit:cover; border-radius:5px; box-shadow:0 0 0 1px rgba(8,39,57,.14), 0 2px 5px rgba(8,39,57,.2); }
.me-tab .me-key svg{ width:22px; height:22px; stroke:currentColor; }
.me-tab.active .me-key svg{ color:#fff; }
.me-tab .me-key .me-step{ position:absolute; top:-5px; right:-5px; width:17px; height:17px; border-radius:50%; background:#fff; color:var(--green-deep); border:1px solid var(--line); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.62rem; display:grid; place-items:center; box-shadow:0 2px 5px rgba(8,39,57,.18); }
.me-tab .me-key{ position:relative; }
.me-tab.active .me-key .me-step{ background:#fff; color:var(--green-deep); border-color:transparent; }
.me-tab.active .me-key .me-flag{ box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 4px 10px rgba(7,44,40,.35); }

/* 2026 figure band + "what changed" shifts + insight callout */
.fig-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin:20px 0 24px; }
@media(max-width:760px){ .fig-band{ grid-template-columns:1fr 1fr; } }
.fig{ background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:18px 16px; }
.fig-num{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.8rem,3vw,2.3rem); line-height:1; letter-spacing:-.02em; background:var(--grad-bright); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fig-lbl{ display:block; margin-top:9px; font-size:.82rem; color:var(--ink-soft); line-height:1.45; }
.shift-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 22px; }
@media(max-width:760px){ .shift-list{ grid-template-columns:1fr; } }
.shift{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.shift-k{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); margin-bottom:7px; }
.shift p{ margin:0; color:var(--ink-soft); line-height:1.6; font-size:.95rem; }
.insight{ display:flex; gap:12px; align-items:flex-start; background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:13px; padding:15px 18px; margin:6px 0 8px; }
.insight svg{ flex:none; width:20px; height:20px; color:var(--green-deep); margin-top:2px; }
.insight p{ margin:0; color:var(--ink); line-height:1.6; }

/* Interactive scenario quiz - "pick the stronger close" */
.quiz{ 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); padding:clamp(20px,3vw,30px); }
.quiz-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.quiz-head h3{ margin:0; font-size:clamp(1.2rem,2.1vw,1.45rem); }
.quiz-progress{ display:flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.84rem; color:var(--ink-faint); }
.quiz-dots{ display:flex; gap:5px; }
.quiz-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .3s; }
.quiz-dots span.done{ background:var(--green); }
.quiz-dots span.current{ background:var(--green-deep); transform:scale(1.25); }
.quiz-scenario{ background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:13px; padding:15px 18px; margin-bottom:16px; }
.quiz-scenario .qs-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:6px; }
.quiz-scenario p{ margin:0; color:var(--ink); line-height:1.6; }
.quiz-options{ display:grid; gap:11px; }
.quiz-opt{ display:flex; gap:13px; align-items:flex-start; text-align:left; width:100%; box-sizing:border-box; font-family:inherit; font-size:.97rem; line-height:1.55; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:13px; padding:15px 17px; cursor:pointer; transition:border-color .2s, background .2s, box-shadow .2s; }
.quiz-opt:hover:not(:disabled){ border-color:#CFE6D7; box-shadow:0 10px 24px -18px rgba(8,39,57,.4); }
.quiz-opt .qo-key{ flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--bg-soft); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.85rem; color:var(--ink-soft); transition:background .2s, color .2s; }
.quiz-opt.correct{ border-color:var(--green); background:#EAF7EF; }
.quiz-opt.correct .qo-key{ background:var(--green); color:#fff; }
.quiz-opt.wrong{ border-color:#E6B5AC; background:#FCEEEC; }
.quiz-opt.wrong .qo-key{ background:#C2533F; color:#fff; }
.quiz-opt.dim{ opacity:.5; }
.quiz-opt:disabled{ cursor:default; }
.quiz-explain{ margin-top:14px; border-radius:13px; padding:14px 17px; line-height:1.6; display:none; }
.quiz-explain.show{ display:block; animation:quizFade .3s ease; }
.quiz-explain.good{ background:#EAF7EF; border:1px solid #BCE3CB; }
.quiz-explain.bad{ background:#FCF3EC; border:1px solid #EAD2BC; }
.quiz-explain strong{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.92rem; margin-bottom:4px; }
.quiz-explain.good strong{ color:var(--green-deep); }
.quiz-explain.bad strong{ color:#A85a2a; }
.quiz-explain p{ margin:0; color:var(--ink); }
@keyframes quizFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.quiz-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; flex-wrap:wrap; }
.quiz-next{ display:inline-flex; align-items:center; gap:8px; }
.quiz-next svg{ width:16px; height:16px; }
.quiz-next[hidden]{ display:none; }
.quiz-result{ text-align:center; padding:8px 0 4px; }
.quiz-result .qr-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.6rem; line-height:1; background:var(--grad-bright); -webkit-background-clip:text; background-clip:text; color:transparent; }
.quiz-result h3{ margin:12px 0 6px; }
.quiz-result p{ margin:0 auto 18px; color:var(--ink-soft); max-width:46ch; line-height:1.6; }
.me-tab.active .me-mini{ color:var(--green-deep); }
.me-panels{ padding:clamp(22px,3.2vw,36px); }
.me-panel{ display:none; }
.me-panel.active{ display:block; animation:mePanel .38s ease; }
@keyframes mePanel{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.me-panel .me-eyebrow{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); }
.me-panel h3{ font-size:clamp(1.3rem,2.2vw,1.55rem); margin:7px 0 12px; }
.me-panel p{ color:var(--ink-soft); line-height:1.68; margin:0 0 14px; }
.me-ask{ display:flex; gap:11px; align-items:flex-start; background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:11px; padding:13px 16px; color:var(--ink); }
.me-ask svg{ flex:none; width:18px; height:18px; color:var(--green-deep); margin-top:2px; }
.me-ask em{ font-style:italic; }
.me-src{ font-size:.82rem; color:var(--ink-faint); font-weight:600; margin:-4px 0 14px; }
.me-src strong{ color:var(--green-deep); font-weight:700; }

/* Deeper-info blocks inside framework panels */
.me-deep{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 14px; }
@media(max-width:680px){ .me-deep{ grid-template-columns:1fr; } }
.me-deep-card{ border:1px solid var(--line); border-radius:13px; padding:15px 16px; background:#fff; }
.me-deep-card.stat{ background:var(--bg-soft); }
.me-deep-card .mdc-label{ display:flex; align-items:center; gap:7px; 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:8px; }
.me-deep-card .mdc-label svg{ width:14px; height:14px; }
.me-deep-card.warn .mdc-label{ color:#A85a2a; }
.me-deep-card .mdc-fig{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.7rem; line-height:1; letter-spacing:-.02em; background:var(--grad-bright); -webkit-background-clip:text; background-clip:text; color:transparent; }
.me-deep-card p{ margin:7px 0 0; color:var(--ink-soft); line-height:1.55; font-size:.9rem; }
.me-more{ margin-top:14px; border-top:1px solid var(--line); padding-top:4px; }
.me-more summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; padding:11px 2px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.9rem; color:var(--green-deep); }
.me-more summary::-webkit-details-marker{ display:none; }
.me-more summary .md-chev{ width:17px; height:17px; transition:transform .25s; }
.me-more[open] summary .md-chev{ transform:rotate(90deg); }
.me-more .md-body{ padding:2px 2px 10px; color:var(--ink-soft); line-height:1.68; animation:quizFade .3s ease; }
.me-more .md-body strong{ color:var(--ink); }

/* Public vs private split comparison */
.compare-split{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 24px; }
@media(max-width:680px){ .compare-split{ grid-template-columns:1fr; } }
.cs-col{ border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:#fff; }
.cs-col.private{ background:var(--bg-soft); }
.cs-col .cs-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.cs-col .cs-ic{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--grad-bright); color:#fff; box-shadow:0 10px 20px -12px rgba(28,101,71,.6); }
.cs-col .cs-ic svg{ width:19px; height:19px; }
.cs-col h4{ margin:0; font-size:1.12rem; }
.cs-col .cs-tag{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); margin-top:2px; }
.cs-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.cs-list li{ display:flex; gap:10px; align-items:flex-start; line-height:1.55; color:var(--ink); font-size:.93rem; }
.cs-list li svg{ flex:none; width:17px; height:17px; color:var(--green-deep); margin-top:2px; }
.cs-list li strong{ font-weight:700; }
.me-examples{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px; }
.me-examples li{ padding:11px 15px; background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:11px; color:var(--ink); line-height:1.55; }
.me-examples li b{ display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--green-deep); font-weight:700; margin-bottom:3px; }
.me-tailor{ margin-top:4px; border-top:1px dashed var(--line); padding-top:15px; }
.me-tailor h4{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); margin:0 0 11px; font-family:'Plus Jakarta Sans',sans-serif; }
.me-tailor .mt-row{ display:flex; gap:12px; padding:8px 0; border-top:1px solid var(--line); }
.me-tailor .mt-row:first-of-type{ border-top:0; padding-top:0; }
.me-tailor .mt-who{ flex:none; width:150px; font-weight:700; color:var(--ink); font-size:.9rem; line-height:1.4; }
.me-tailor .mt-how{ color:var(--ink-soft); font-size:.92rem; line-height:1.5; }
@media(max-width:560px){ .me-tailor .mt-row{ flex-direction:column; gap:3px; } .me-tailor .mt-who{ width:auto; } }

/* Interactive scorecard */
.method-score{ margin:26px 0; border:1px solid var(--line); border-radius:20px; background:#fff; padding:clamp(22px,3vw,32px); box-shadow:0 1px 2px rgba(8,39,57,.05), 0 30px 60px -46px rgba(8,39,57,.28); }
.method-score h3{ margin:0 0 5px; font-size:1.3rem; }
.method-score .ms-sub{ color:var(--ink-soft); margin:0 0 20px; font-size:.96rem; line-height:1.55; }
.ms-items{ display:grid; gap:10px; }
.ms-item{ display:flex; align-items:flex-start; gap:13px; padding:13px 16px; border:1.5px solid var(--line); border-radius:13px; cursor:pointer; transition:border-color .18s, background .18s; }
.ms-item:hover{ border-color:#CFE6D7; background:var(--bg-soft); }
.ms-item:has(input:checked){ border-color:var(--green); background:rgba(52,163,86,.06); }
.ms-item input{ margin-top:1px; width:20px; height:20px; accent-color:var(--green); flex:none; cursor:pointer; }
.ms-item span{ color:var(--ink); font-weight:600; line-height:1.45; }
.ms-meter{ height:13px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--line); overflow:hidden; margin:22px 0 14px; }
.ms-bar{ height:100%; width:0; border-radius:999px; background:var(--grad-bright); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.ms-verdict{ display:flex; gap:14px; align-items:center; }
.ms-score-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.7rem; color:var(--green-deep); flex:none; min-width:74px; }
.ms-verdict-text{ margin:0; color:var(--ink-soft); line-height:1.5; font-weight:500; }

/* "How Sales Source trains in it" callout */
.method-train{ display:flex; gap:18px; align-items:flex-start; margin:26px 0; padding:24px 26px; border-radius:20px; color:#fff; background:linear-gradient(150deg,#103E54 0%,#11524A 52%,#176046 100%); position:relative; overflow:hidden; }
.method-train .mt-ic{ flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26); }
.method-train .mt-ic svg{ width:24px; height:24px; }
.method-train h3{ color:#fff; margin:0 0 7px; font-size:1.2rem; }
.method-train p{ color:rgba(255,255,255,.9); margin:0; line-height:1.62; }

/* Sources */
.method-sources{ margin:18px 0 0; display:grid; gap:12px; }
.method-source{ display:flex; gap:14px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--bg-soft); }
.method-source .src-n{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); font-weight:700; color:var(--green-deep); font-family:'Space Grotesk',sans-serif; font-size:.92rem; }
.method-source .src-b{ min-width:0; }
.method-source strong{ color:var(--ink); display:block; line-height:1.4; }
.method-source span{ color:var(--ink-soft); font-size:.9rem; }
.method-source a{ color:var(--green-deep); font-weight:600; word-break:break-word; }

@media(prefers-reduced-motion:reduce){ .me-panel.active, .ms-bar, .me-tab.active .me-key{ animation:none; transition:none; } }