/* ============================================================
   AI Search Rankings — Workshop Experience Styles
   Brand: teal #003737 / sea-green #2E8B57. No purple. White-dominant.
   Scoped with .wsx- / .wsp- prefixes to avoid clashing with styles.css.
   ============================================================ */
:root{
  --wsx-primary:#003737; --wsx-deep:#004545; --wsx-accent:#2E8B57;
  --wsx-teal:#14919B; --wsx-ink:#1f2d2d; --wsx-soft:#f0f8f8;
  --wsx-line:#dbe7e2; --wsx-gold:#B8860B; --wsx-muted:#5b6b6b;
}

/* ---- Shared building blocks ---- */
.wsx-section{padding:64px 0;background:#fff;}
.wsx-section--soft{background:var(--wsx-soft);}
.wsx-container{max-width:1180px;margin:0 auto;padding:0 20px;}
.wsx-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wsx-primary);background:rgba(0,55,55,.07);border:1px solid rgba(0,55,55,.16);padding:6px 12px;border-radius:999px;margin-bottom:14px;}
.wsx-h1{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:clamp(30px,4.4vw,50px);line-height:1.08;letter-spacing:-.02em;color:var(--wsx-primary);margin:0 0 14px;}
.wsx-h2{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.15;color:var(--wsx-primary);margin:0 0 12px;}
.wsx-lead{font-size:1.1rem;line-height:1.6;color:#334; max-width:760px;}
.wsx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:12px;padding:14px 22px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;min-height:48px;}
.wsx-btn--primary{background:var(--wsx-primary);color:#fff;}
.wsx-btn--primary:hover{background:var(--wsx-deep);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,55,55,.22);}
.wsx-btn--ghost{background:#fff;color:var(--wsx-primary);border-color:var(--wsx-primary);}
.wsx-btn--ghost:hover{background:var(--wsx-soft);}
.wsx-btn--gold{background:var(--wsx-gold);color:#fff;}
.wsx-btn--lg{padding:16px 30px;font-size:1.05rem;}
.wsx-card{background:#fff;border:1px solid var(--wsx-line);border-radius:16px;padding:24px;}
.wsx-img{width:100%;height:auto;border-radius:16px;display:block;border:1px solid var(--wsx-line);}
.wsx-grid{display:grid;gap:20px;}
.wsx-grid--2{grid-template-columns:repeat(2,1fr);}
.wsx-grid--3{grid-template-columns:repeat(3,1fr);}
.wsx-grid--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.wsx-grid--2,.wsx-grid--3,.wsx-grid--4{grid-template-columns:1fr;}}

/* ---- Sales hero ---- */
.wsx-hero{background:#fff;padding:56px 0 28px;}
.wsx-hero__split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
@media(max-width:900px){.wsx-hero__split{grid-template-columns:1fr;}}
.wsx-tw{border-right:2px solid var(--wsx-accent);padding-right:3px;}
.wsx-answer{background:var(--wsx-soft);border-left:4px solid var(--wsx-accent);border-radius:0 12px 12px 0;padding:18px 20px;margin:18px 0;font-size:1.02rem;line-height:1.6;color:#243;}
.wsx-meta-row{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0;color:var(--wsx-muted);font-size:.92rem;}
.wsx-meta-row b{color:var(--wsx-primary);}
.wsx-pricebar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px;}
.wsx-price{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;color:var(--wsx-primary);}
.wsx-price small{display:block;font-size:.8rem;color:var(--wsx-muted);font-weight:400;}

/* ---- Outcome / takeaway chips ---- */
.wsx-out{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--wsx-line);border-radius:12px;padding:16px;}
.wsx-out i{color:var(--wsx-accent);margin-top:2px;}
.wsx-pill{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--wsx-soft);color:var(--wsx-primary);border:1px solid var(--wsx-line);}

/* ---- Module preview cards ---- */
.wsx-modcard{display:flex;gap:16px;background:#fff;border:1px solid var(--wsx-line);border-radius:14px;padding:18px;}
.wsx-modcard__no{flex:none;width:42px;height:42px;border-radius:11px;background:var(--wsx-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Space Grotesk',sans-serif;}
.wsx-modcard__win{color:var(--wsx-accent);font-size:.85rem;margin-top:6px;}
.wsx-itype{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--wsx-teal);border-radius:6px;padding:3px 8px;}

/* ---- Methodology strip ---- */
.wsx-method{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
@media(max-width:900px){.wsx-method{grid-template-columns:repeat(2,1fr);}}
.wsx-method__step{background:#fff;border:1px solid var(--wsx-line);border-top:3px solid var(--wsx-accent);border-radius:12px;padding:14px;}
.wsx-method__step h4{font-size:.82rem;color:var(--wsx-primary);margin:0 0 6px;text-transform:uppercase;letter-spacing:.04em;}
.wsx-method__step p{font-size:.82rem;color:#445;margin:0;line-height:1.45;}

/* ============================================================
   PLAYER
   ============================================================ */
.wsp-body{background:var(--wsx-soft);}
.wsp-topbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--wsx-line);}
.wsp-topbar__in{max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px;}
.wsp-topbar__title{font-weight:700;color:var(--wsx-primary);font-family:'Space Grotesk',sans-serif;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wsp-progresswrap{flex:1;max-width:360px;}
.wsp-progress{height:10px;border-radius:999px;background:#e3efeb;overflow:hidden;}
.wsp-progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--wsx-primary),var(--wsx-accent));border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.wsp-progress__label{font-size:.72rem;color:var(--wsx-muted);margin-top:3px;}

.wsp-shell{max-width:1240px;margin:0 auto;padding:24px 20px 80px;display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;}
@media(max-width:980px){.wsp-shell{grid-template-columns:1fr;}}

/* Rail */
.wsp-rail{position:sticky;top:78px;background:#fff;border:1px solid var(--wsx-line);border-radius:16px;padding:14px;}
@media(max-width:980px){.wsp-rail{position:static;}}
.wsp-rail__head{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--wsx-muted);font-weight:700;padding:6px 8px;}
.wsp-step{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:none;background:transparent;padding:11px 10px;border-radius:10px;cursor:pointer;color:var(--wsx-ink);font-size:.9rem;}
.wsp-step:hover{background:var(--wsx-soft);}
.wsp-step.active{background:var(--wsx-soft);box-shadow:inset 3px 0 0 var(--wsx-accent);}
.wsp-step__dot{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--wsx-line);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--wsx-muted);}
.wsp-step.done .wsp-step__dot{background:var(--wsx-accent);border-color:var(--wsx-accent);color:#fff;}
.wsp-step.locked{opacity:.55;}
.wsp-step__t{flex:1;min-width:0;line-height:1.25;}
.wsp-step__lock{color:var(--wsx-muted);font-size:.8rem;}

/* Stage */
.wsp-stage{background:#fff;border:1px solid var(--wsx-line);border-radius:18px;padding:clamp(20px,3vw,36px);min-height:60vh;}
.wsp-eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--wsx-muted);font-size:.8rem;margin-bottom:8px;}
.wsp-stage h2{font-family:'Space Grotesk',sans-serif;color:var(--wsx-primary);font-size:clamp(22px,2.6vw,30px);line-height:1.15;margin:0 0 8px;}
.wsp-why{color:#3a4a4a;font-size:1.02rem;line-height:1.6;margin:0 0 18px;}
.wsp-hero-img{width:100%;max-height:300px;object-fit:cover;border-radius:14px;border:1px solid var(--wsx-line);margin:0 0 16px;display:block;}
.wsp-audio{display:flex;flex-direction:column;gap:8px;background:var(--wsx-soft);border:1px solid var(--wsx-line);border-radius:12px;padding:12px 14px;margin:0 0 18px;}
.wsp-audio__label{font-size:.82rem;font-weight:700;color:var(--wsx-primary);}
.wsp-audio audio{width:100%;}
.wsp-block{margin:18px 0;}
.wsp-block h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--wsx-primary);margin:0 0 8px;display:flex;align-items:center;gap:8px;}
.wsp-learn{display:grid;gap:8px;}
.wsp-learn li{list-style:none;background:var(--wsx-soft);border-radius:10px;padding:10px 14px;font-size:.95rem;line-height:1.5;}
.wsp-evidence{margin:10px 0 0;font-size:.85rem;color:var(--wsx-accent);font-style:italic;}
.wsp-evidence i{margin-right:4px;}
.wsp-mistake{margin:0 0 18px;background:#fdf6e9;border:1px solid #e8d6a8;border-left:4px solid var(--wsx-gold);border-radius:0 12px 12px 0;padding:12px 16px;font-size:.92rem;color:#5c4a1a;line-height:1.5;}
.wsp-mistake__h{display:block;font-weight:700;color:#8a6d1a;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}

/* Interaction panel */
.wsp-lab{border:1.5px solid var(--wsx-accent);border-radius:16px;padding:20px;background:linear-gradient(180deg,#fff, var(--wsx-soft));margin:20px 0;}
.wsp-lab__head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.wsp-lab__badge{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--wsx-accent);padding:4px 9px;border-radius:6px;}
.wsp-lab__title{font-weight:700;color:var(--wsx-primary);font-size:1.05rem;}
.wsp-lab__prompt{color:#3a4a4a;margin:6px 0 14px;line-height:1.55;}

.wsp-opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:1.5px solid var(--wsx-line);background:#fff;border-radius:12px;padding:14px 16px;cursor:pointer;margin-bottom:10px;transition:border-color .15s,background .15s;font-size:.97rem;}
.wsp-opt:hover{border-color:var(--wsx-accent);}
.wsp-opt.selected{border-color:var(--wsx-primary);background:var(--wsx-soft);}
.wsp-opt.correct{border-color:var(--wsx-accent);background:rgba(46,139,87,.10);}
.wsp-opt.incorrect{border-color:#c0563b;background:rgba(192,86,59,.08);}
.wsp-opt__mark{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--wsx-line);display:flex;align-items:center;justify-content:center;font-size:.7rem;}
.wsp-opt.selected .wsp-opt__mark{border-color:var(--wsx-primary);background:var(--wsx-primary);color:#fff;}

.wsp-rankitem{display:flex;align-items:center;gap:12px;border:1px solid var(--wsx-line);border-radius:12px;background:#fff;padding:12px 14px;margin-bottom:10px;}
.wsp-rankitem__no{flex:none;width:28px;height:28px;border-radius:8px;background:var(--wsx-primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.85rem;}
.wsp-rankitem__t{flex:1;}
.wsp-rankitem__btns{display:flex;gap:6px;}
.wsp-iconbtn{border:1px solid var(--wsx-line);background:#fff;border-radius:8px;width:34px;height:34px;cursor:pointer;color:var(--wsx-primary);}
.wsp-iconbtn:hover{background:var(--wsx-soft);}
.wsp-iconbtn:disabled{opacity:.35;cursor:not-allowed;}

.wsp-matrix{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;}
.wsp-quad{border:1px dashed var(--wsx-line);border-radius:12px;padding:12px;min-height:90px;background:#fff;}
.wsp-quad h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--wsx-muted);margin:0 0 8px;}
.wsp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--wsx-soft);border:1px solid var(--wsx-line);border-radius:999px;padding:5px 10px;margin:0 6px 6px 0;font-size:.82rem;}

.wsp-field{margin-bottom:14px;}
.wsp-field label{display:block;font-weight:600;color:var(--wsx-primary);font-size:.9rem;margin-bottom:6px;}
.wsp-input,.wsp-textarea,.wsp-select{width:100%;border:1.5px solid var(--wsx-line);border-radius:10px;padding:12px 14px;font-size:.97rem;font-family:inherit;background:#fff;color:var(--wsx-ink);}
.wsp-input:focus,.wsp-textarea:focus,.wsp-select:focus{outline:none;border-color:var(--wsx-accent);box-shadow:0 0 0 3px rgba(46,139,87,.18);}
.wsp-textarea{min-height:96px;resize:vertical;}

.wsp-slider{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.wsp-slider label{flex:1;font-size:.92rem;color:var(--wsx-ink);}
.wsp-slider input[type=range]{flex:1;accent-color:var(--wsx-accent);}
.wsp-slider output{width:40px;text-align:right;font-weight:700;color:var(--wsx-primary);}
.wsp-score{display:flex;align-items:center;gap:16px;background:var(--wsx-primary);color:#fff;border-radius:14px;padding:16px 20px;margin-top:12px;}
.wsp-score__num{font-family:'Space Grotesk',sans-serif;font-size:2.2rem;font-weight:700;line-height:1;}

/* Final assessment */
.wsp-q{border:1px solid var(--wsx-line);border-radius:14px;padding:16px;margin-bottom:14px;}
.wsp-q__t{font-weight:700;color:var(--wsx-primary);margin-bottom:10px;line-height:1.4;}
.wsp-q__exp{margin-top:8px;font-size:.85rem;color:#475569;background:var(--wsx-soft);border-radius:8px;padding:8px 12px;}
.wsp-q__exp i{color:var(--wsx-accent);margin-right:4px;}
.wsp-result{display:flex;align-items:center;gap:16px;border-radius:14px;padding:16px 20px;margin:0 0 18px;color:#fff;}
.wsp-result.pass{background:var(--wsx-primary);}
.wsp-result.fail{background:#8a6d1a;}
.wsp-result__score{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:800;line-height:1;}

.wsp-insight{display:none;margin-top:16px;border:1px solid var(--wsx-accent);background:rgba(46,139,87,.08);border-radius:12px;padding:16px;}
.wsp-insight.show{display:block;animation:wspFade .4s ease;}
.wsp-insight h4{color:var(--wsx-primary);font-size:.95rem;margin:0 0 6px;}
@keyframes wspFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.wsp-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--wsx-line);}
.wsp-savehint{font-size:.8rem;color:var(--wsx-muted);}
.wsp-savehint .ok{color:var(--wsx-accent);}

/* Locked / sample */
.wsp-locked{text-align:center;padding:40px 20px;}
.wsp-locked i{font-size:2rem;color:var(--wsx-gold);}

/* Milestone toast */
.wsp-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--wsx-primary);color:#fff;border-radius:14px;padding:14px 22px;box-shadow:0 16px 40px rgba(0,55,55,.3);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.4,0,.2,1);z-index:60;display:flex;align-items:center;gap:12px;font-weight:600;}
.wsp-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.wsp-toast i{color:#ffd76a;font-size:1.2rem;}

/* Completion celebrate */
.wsp-complete{text-align:center;padding:30px;}
.wsp-complete .ring{width:96px;height:96px;border-radius:50%;background:var(--wsx-soft);border:3px solid var(--wsx-accent);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--wsx-accent);font-size:2.4rem;}

/* ---- Recursive content renderer (resources page) ---- */
.wsx-rlist{padding-left:20px;margin:0;}
.wsx-rlist li{margin-bottom:6px;line-height:1.55;}
.wsx-rstack{display:flex;flex-direction:column;gap:10px;}
.wsx-rcard{background:var(--wsx-soft);border:1px solid var(--wsx-line);border-radius:10px;padding:12px 14px;}
.wsx-rkv{display:flex;flex-direction:column;gap:10px;}
.wsx-rkv-row{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start;}
.wsx-rkv-k{font-weight:700;font-size:.82rem;color:var(--wsx-primary);text-transform:capitalize;}
.wsx-rkv-v{font-size:.92rem;color:#334;line-height:1.55;}
@media(max-width:640px){.wsx-rkv-row{grid-template-columns:1fr;gap:3px;}}

/* ---- Resources page ---- */
.wsx-subnav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--wsx-line);display:flex;gap:8px;flex-wrap:wrap;padding:12px 0;margin-bottom:24px;}
.wsx-subnav a{font-size:.85rem;font-weight:600;color:var(--wsx-primary);text-decoration:none;padding:6px 12px;border-radius:8px;border:1px solid var(--wsx-line);background:#fff;}
.wsx-subnav a:hover{background:var(--wsx-soft);}
.wsx-worksheet{border:1px solid var(--wsx-line);border-radius:14px;padding:20px;margin-bottom:16px;background:#fff;page-break-inside:avoid;}
.wsx-worksheet h3{margin:0 0 4px;color:var(--wsx-primary);font-family:'Space Grotesk',sans-serif;}
.wsx-prompt{border:1px solid var(--wsx-line);border-radius:14px;padding:18px;margin-bottom:14px;background:#fff;}
.wsx-prompt pre{background:#0f2e2e;color:#d7f0ec;border-radius:10px;padding:14px;overflow:auto;font-size:.85rem;white-space:pre-wrap;margin:10px 0;}
.wsx-copy{border:1px solid var(--wsx-primary);background:#fff;color:var(--wsx-primary);border-radius:8px;padding:6px 12px;font-size:.8rem;font-weight:600;cursor:pointer;}
.wsx-copy:hover{background:var(--wsx-soft);}
.wsx-copy.ok{background:var(--wsx-accent);border-color:var(--wsx-accent);color:#fff;}
@media print{.wsx-subnav,.wsx-btn,.wsx-copy,header,footer,nav{display:none!important;} .wsx-section{padding:0;} body{background:#fff;}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .wsx-tw{border-right:none;}
}
:focus-visible{outline:3px solid rgba(0,55,55,.35);outline-offset:2px;}