/* ============================================================
   HUMN minds: demo showcase mocks
   ".ws-mock" (Claude project workspace) + ".chat-mock" (ask -> brief)
   Reuses site.css tokens (--ink/--muted/--surface/--line/--r/--display/--serif).
   No external resources. Fictional data only.
   ============================================================ */

.ws-mock, .chat-mock{
  background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--r) + 4px);
  box-shadow:var(--card-shadow); overflow:hidden; max-width:100%;
}

/* ---------- product strip (THE label of the card, above the chrome) ---------- */
.ws-product-strip{
  display:flex; align-items:baseline; justify-content:space-between; gap:6px 18px; flex-wrap:wrap;
  padding:13px 20px; border-bottom:1px solid var(--line-soft);
  font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.ws-product-strip .ws-product-price{
  font-weight:600; letter-spacing:.1em; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.ws-product-strip.sales{
  color:var(--human); background:rgba(201,123,74,.08); border-bottom-color:rgba(201,123,74,.25);
}
.ws-product-strip.coaching{
  color:var(--sky); background:rgba(29,127,209,.07); border-bottom-color:rgba(29,127,209,.25);
}

/* ---------- shared "app window" chrome ---------- */
.ws-chrome, .chat-chrome{
  display:flex; align-items:center; gap:8px;
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
  background:var(--surface-2);
}
.ws-chrome .dot, .chat-chrome .dot{
  width:9px; height:9px; border-radius:50%; background:rgba(16,42,80,.16); flex:0 0 auto;
}
.ws-chrome .chrome-label, .chat-chrome .chrome-label{
  margin-left:8px; font-size:.78rem; color:var(--faint); font-weight:500;
}

/* ---------- shared caption ---------- */
.illustrative-caption{
  display:block; padding:14px 20px 20px; font-size:.8rem; color:var(--faint);
  font-style:italic; border-top:1px solid var(--line-soft); background:var(--surface-2);
}

/* =========================================================
   Component 1: .ws-mock (project workspace)
   ========================================================= */
.ws-body{
  display:grid; gap:0; grid-template-columns:1fr;
}
@media(min-width:701px){
  .ws-body{ grid-template-columns:1.5fr 1fr; }
}

.ws-main{ padding:28px 26px 30px; border-bottom:1px solid var(--line-soft); }
@media(min-width:701px){
  .ws-main{ border-bottom:none; border-right:1px solid var(--line-soft); }
}

.ws-title{
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.9rem;
  letter-spacing:0; color:var(--ink); line-height:1.15;
}
.ws-desc{
  margin-top:12px; color:var(--muted); font-size:.94rem; line-height:1.55; max-width:52ch;
}

/* prompt box */
.ws-prompt{
  margin-top:22px; display:flex; align-items:center; gap:2px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px 16px; font-size:.94rem; color:var(--faint);
}
.ws-cursor{
  display:inline-block; width:2px; height:1.05em; background:var(--sky);
  margin-left:2px; animation:wsBlink 1.1s step-end infinite; vertical-align:middle;
}
@keyframes wsBlink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* recent conversations */
.ws-convos{ margin-top:22px; }
.ws-convo-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:.92rem;
}
.ws-convo-row:last-child{ border-bottom:none; }
.ws-convo-title{ color:var(--ink); font-weight:500; }
.ws-convo-meta{ color:var(--faint); font-size:.82rem; white-space:nowrap; flex:0 0 auto; }

/* the wow command: user message -> artifact checklist result */
.ws-demo{ margin-top:22px; display:grid; gap:14px; }
.ws-cmd{
  justify-self:end; max-width:88%;
  background:var(--grad); color:#fff;
  border-radius:16px 16px 4px 16px; padding:11px 16px;
  font-size:.93rem; line-height:1.45;
}
.ws-result{
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:16px 16px 16px 4px; padding:16px 18px;
}
.ws-result-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ws-result-list li{
  position:relative; padding-left:24px;
  font-size:.88rem; line-height:1.5; color:var(--muted);
}
.ws-result-list li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--human); font-weight:700;
}
.ws-result-list li strong{ color:var(--ink); font-weight:600; }
.ws-result-time{
  margin-top:12px; font-size:.84rem; font-style:italic; color:var(--faint);
}

/* right rail */
.ws-rail{ padding:26px 24px 28px; display:grid; gap:22px; align-content:start; }

.ws-panel .ws-panel-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.ws-lock{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.72rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--human); background:rgba(201,123,74,.1); border:1px solid rgba(201,123,74,.28);
  border-radius:999px; padding:3px 10px 3px 8px;
}
.ws-lock svg{ width:10px; height:10px; stroke:var(--human); fill:none; stroke-width:2; }
.ws-panel p{
  color:var(--muted); font-size:.88rem; line-height:1.55;
}

.ws-memory, .ws-instructions{
  padding-bottom:20px; border-bottom:1px solid var(--line-soft);
}

/* capacity bar */
.ws-capacity{
  margin-top:2px; height:6px; border-radius:999px; background:rgba(16,42,80,.09); overflow:hidden;
}
.ws-capacity-fill{
  height:100%; border-radius:999px; background:var(--gold-grad); width:3%;
}
.ws-capacity-label{
  display:block; margin-top:8px; font-size:.78rem; color:var(--faint);
}

/* file grid */
.ws-file-grid{
  margin-top:14px; display:grid; gap:10px; grid-template-columns:repeat(2,1fr);
}
@media(min-width:701px){
  .ws-file-grid{ grid-template-columns:1fr; }
}
.ws-file-card{
  display:flex; flex-direction:column; gap:6px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-sm);
  padding:10px 12px; min-width:0;
}
.ws-file-chip{
  align-self:flex-start; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  color:var(--human); background:rgba(201,123,74,.12); border-radius:5px; padding:2px 6px;
}
.ws-file-name{
  font-size:.82rem; color:var(--ink); font-weight:500; word-break:break-word;
}
.ws-file-lines{ font-size:.76rem; color:var(--faint); }

/* =========================================================
   Component 2: .chat-mock (ask -> brief)
   ========================================================= */
/* Flex column so the caption hugs the card bottom when a grid stretches the mock */
.chat-mock{ display:flex; flex-direction:column; }
.chat-mock .illustrative-caption{ margin-top:auto; }

.chat-body{ padding:26px 24px 22px; display:grid; gap:18px; align-content:start; }

.chat-msg{ max-width:86%; }
.chat-msg.user{
  justify-self:end; background:var(--grad); color:#fff; border-radius:16px 16px 4px 16px;
  padding:12px 18px; font-size:.95rem; line-height:1.5;
}
.chat-msg.user p{ margin:0; }

.chat-msg.assistant{
  justify-self:start; max-width:100%; width:100%;
  background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:16px 16px 16px 4px; padding:20px 22px;
}
.chat-typed{ color:var(--ink); font-size:.95rem; line-height:1.6; }
.chat-typed p{ margin-top:12px; }
.chat-typed p:first-child{ margin-top:0; }
.chat-typed strong{ font-weight:700; color:var(--ink); }

.chat-footer{
  padding:0 24px 22px;
}
.chat-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; color:var(--muted); background:var(--surface);
  border:1px solid var(--line-soft); border-radius:999px; padding:7px 14px;
}
.chat-chip::before{
  content:""; width:7px; height:7px; border-radius:2px; background:var(--human); flex:0 0 auto;
}

@media(max-width:480px){
  .chat-msg{ max-width:94%; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ws-cursor{ animation:none; opacity:1; }
}

/* ---------- Living demo: play states (driven by demo-mocks.js) ----------
   Default markup is the finished state, so no-JS and reduced motion are
   already complete. JS resets, types the command, then streams these in. */
.ws-cmd.ws-typing::after{content:"|"; margin-left:1px; animation:wsBlink .9s step-end infinite}
@keyframes wsBlink{50%{opacity:0}}
.ws-mock .ws-result-list li{transition:opacity .4s ease, transform .4s ease}
.ws-mock.ws-armed .ws-result-list li:not(.ws-on){opacity:0; transform:translateY(7px)}
@media (prefers-reduced-motion: reduce){
  .ws-mock .ws-result-list li{opacity:1 !important; transform:none !important}
}

/* ---------- Film bookend: two short loops above the live demos ---------- */
.film-pair{display:grid; gap:22px; margin:34px 0 44px}
@media(min-width:860px){.film-pair{grid-template-columns:1fr 1fr}}
.film-pair figure{margin:0}
.film-pair video{
  display:block; width:100%; height:auto; border-radius:calc(var(--r) + 4px);
  box-shadow:var(--card-shadow);
}
.film-pair figcaption{
  margin-top:12px; font-family:var(--serif); font-style:italic;
  color:var(--muted); font-size:1.04rem; text-align:center;
}

/* ---------- Output-first mocks (v3 redesign): the deliverable IS the demo.
   Single column, no workspace anatomy; the drafted email is the money shot. */
.ws-body.ws-out{display:block}
.ws-body.ws-out .ws-main{max-width:640px; margin:0 auto}
.ws-email{
  margin-top:14px; background:#fff; border:1px solid var(--line);
  border-left:3px solid var(--human); border-radius:12px; padding:16px 18px;
  transition:opacity .5s ease, transform .5s ease;
}
.ws-mock.ws-armed .ws-email:not(.ws-on){opacity:0; transform:translateY(8px)}
.ws-email-chip{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--human); background:rgba(201,123,74,.09);
  border-radius:999px; padding:4px 11px; margin-bottom:10px;
}
.ws-email-subject{font-weight:600; color:var(--ink); margin-bottom:6px}
.ws-email-body{color:var(--muted); line-height:1.6; font-size:.95rem}
.ws-email-actions{display:flex; gap:10px; margin-top:12px}
.ws-email-actions span{
  font-size:.82rem; font-weight:600; border-radius:999px; padding:6px 16px;
  background:var(--grad); color:#fff;
}
.ws-email-actions span + span{background:transparent; color:var(--muted); border:1px solid var(--line)}
@media (prefers-reduced-motion: reduce){ .ws-email{opacity:1 !important; transform:none !important} }

/* ---------- v3.1: the email looks like a real Gmail draft, and findings carry
   skill labels so each line reads as a different part of the system working. */
.ws-result-list li b{color:var(--ink); font-weight:600}
.ws-email-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.ws-email-chips .chip{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; border-radius:999px; padding:4px 11px;
}
.ws-email-chips .chip.draft{color:var(--muted); background:rgba(11,21,38,.05); border:1px solid var(--line)}
.ws-email-chips .chip.voice{color:var(--human); background:rgba(201,123,74,.09)}
.ws-email-meta{font-size:.88rem; color:var(--muted); border-bottom:1px solid var(--line-soft); padding-bottom:8px; margin-bottom:10px}
.ws-email-meta b{color:var(--ink); font-weight:600}
.ws-email-sig{margin-top:10px; color:var(--ink); font-weight:600}

/* ---------- v3.2: thinking-partner beat (second ask + grounded answer) */
.ws-cmd.ws-cmd-2{margin-top:16px}
.ws-mock.ws-armed .ws-cmd-2:not(.ws-on){opacity:0; transform:translateY(8px)}
.ws-cmd-2{transition:opacity .45s ease, transform .45s ease}
.ws-think{
  margin-top:12px; background:#fff; border:1px solid var(--line);
  border-left:3px solid var(--sky); border-radius:12px; padding:16px 18px;
  transition:opacity .5s ease, transform .5s ease;
}
.ws-mock.ws-armed .ws-think:not(.ws-on){opacity:0; transform:translateY(8px)}
.ws-think-chip{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sky); background:rgba(29,127,209,.08);
  border-radius:999px; padding:4px 11px; margin-bottom:10px;
}
.ws-think p{color:var(--muted); line-height:1.6; font-size:.95rem}
.ws-think p b{color:var(--ink); font-weight:600}
@media (prefers-reduced-motion: reduce){ .ws-cmd-2,.ws-think{opacity:1 !important; transform:none !important} }

/* ---------- v4: "One day with your OS" chaptered demo ----------
   No-JS/reduced-motion: every chapter visible, finished. JS adds .os-play,
   which switches to one-chapter-at-a-time and plays the day like a film. */
.os-day-nav{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 22px}
.os-pill{
  font:inherit; cursor:pointer; border:1px solid var(--line); background:#fff;
  border-radius:999px; padding:8px 16px; display:inline-flex; gap:8px; align-items:baseline;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.os-pill b{font-weight:700; font-size:.85rem; color:var(--ink)}
.os-pill span{font-size:.85rem; color:var(--muted)}
.os-pill.done b{color:var(--human)}
.os-pill.active{border-color:rgba(33,118,212,.55); background:#EEF5FC; box-shadow:0 2px 10px rgba(33,118,212,.12)}
[data-osday].os-play .os-chapter{display:none; scroll-margin-top:96px}
[data-osday].os-play .os-chapter.active,
[data-osday].os-play .os-chapter.played{display:block}
.os-chapter + .os-chapter{margin-top:34px}
[data-osday].os-play .os-chapter.active:first-child{margin-top:0}
[data-osday].os-play .os-chapter.played ~ .os-chapter.active,
[data-osday].os-play .os-chapter.played + .os-chapter.played{padding-top:26px; border-top:1px dashed rgba(16,42,80,.14)}
/* continue affordance at the bottom of the thread */
.os-next{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px; cursor:pointer;
  font:inherit; font-weight:700; font-size:.9rem; color:var(--sky);
  background:#EEF5FC; border:1px solid rgba(33,118,212,.4); border-radius:999px; padding:10px 20px;
  transition:box-shadow .25s, transform .25s;
}
.os-next:hover{box-shadow:0 4px 16px rgba(33,118,212,.18); transform:translateY(-1px)}
.os-next small{font-weight:600; color:var(--faint); font-size:.78rem}
.os-finale{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line-soft);
  font-family:var(--serif); font-style:italic; color:var(--human); font-size:1.05rem;
}
/* streaming hide-states scoped per armed chapter (mirrors .ws-mock.ws-armed) */
.os-chapter.armed .ws-result-list li:not(.ws-on){opacity:0; transform:translateY(7px)}
.os-chapter.armed .ws-email:not(.ws-on){opacity:0; transform:translateY(8px)}
.os-chapter.armed .ws-think:not(.ws-on){opacity:0; transform:translateY(8px)}
.os-chapter.armed .ws-result-time{transition:opacity .4s ease}
.os-chapter.armed .ws-result-time:not(.ws-on){opacity:0}
@media (prefers-reduced-motion: reduce){
  .os-chapter .ws-result-list li,.os-chapter .ws-email,.os-chapter .ws-think{opacity:1 !important; transform:none !important}
}

/* ---------- v4: index audience toggle ---------- */
.aud-toggle{display:flex; gap:12px; margin:26px 0 30px}
.aud-btn{
  font:inherit; font-weight:600; cursor:pointer; border:1px solid var(--line);
  background:#fff; color:var(--muted); border-radius:999px; padding:12px 26px;
  transition:all .25s;
}
.aud-btn.active{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(33,118,212,.25)}
.aud-panel{display:none}
.aud-panel.active{display:block}
.aud-panel .film-solo{margin:0 0 26px}
.aud-panel .film-solo video{display:block; width:100%; height:auto; border-radius:calc(var(--r) + 4px); box-shadow:var(--card-shadow)}
.aud-panel .film-solo figcaption{margin-top:12px; font-family:var(--serif); font-style:italic; color:var(--muted); text-align:center}

/* ---------- v5: conversational demos — proactive offers, replies, team notes,
   and the walk-in mind map. Generic [data-step] streaming. */
.os-chapter.armed [data-step]:not(.ws-on){opacity:0; transform:translateY(7px)}
.os-chapter [data-step]{transition:opacity .45s ease, transform .45s ease}
.ws-offer{
  display:inline-flex; align-items:baseline; gap:8px; margin-top:14px;
  background:rgba(29,127,209,.06); border:1px dashed rgba(29,127,209,.4);
  border-radius:14px; padding:10px 16px; color:var(--ink); font-size:.95rem;
}
.ws-offer::before{content:"\2726"; color:var(--sky); font-size:.85rem}
.ws-yes{
  display:table; margin:12px 0 0 auto;
  background:var(--grad); color:#fff; font-weight:600; font-size:.92rem;
  border-radius:14px 14px 4px 14px; padding:9px 18px;
}
.ws-note{
  margin-top:14px; background:#fff; border:1px solid var(--line);
  border-left:3px solid var(--sky); border-radius:12px; padding:16px 18px;
}
.ws-note .ws-note-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.ws-note .chip{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; padding:4px 11px; color:var(--sky); background:rgba(29,127,209,.08)}
.ws-note p{color:var(--muted); line-height:1.6; font-size:.95rem}
.ws-note p b{color:var(--ink)}
.ws-exec{margin-top:14px; background:linear-gradient(160deg,#FFFFFF,#F4F8FD); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.ws-exec .chip{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; padding:4px 11px; color:#7A4DB8; background:rgba(122,77,184,.08); margin-bottom:10px}
.ws-exec ul{margin:0; padding-left:18px; color:var(--muted); font-size:.95rem}
.ws-exec ul li{margin-top:6px}
.ws-exec ul li b{color:var(--ink)}
.ws-map{margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.ws-map .chip{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; padding:4px 11px; color:var(--human); background:rgba(201,123,74,.09); margin-bottom:12px}
.ws-map-hub{display:table; font-weight:700; color:var(--ink); background:rgba(201,123,74,.1); border:1px solid rgba(201,123,74,.35); border-radius:999px; padding:8px 18px; margin-bottom:12px}
.ws-map-branches{border-left:2px solid rgba(201,123,74,.3); margin-left:18px; padding-left:16px; display:grid; gap:8px}
.ws-map-branches span{position:relative; color:var(--muted); font-size:.93rem}
.ws-map-branches span::before{content:""; position:absolute; left:-16px; top:.7em; width:10px; height:2px; background:rgba(201,123,74,.3)}
.ws-map-branches span b{color:var(--ink)}
@media (prefers-reduced-motion: reduce){ .os-chapter [data-step]{opacity:1 !important; transform:none !important} }

/* ---------- v5.1: offer/yes beats inside plain (non-chaptered) mocks ---------- */
.ws-mock.ws-armed [data-step]:not(.ws-on){opacity:0; transform:translateY(7px)}
.ws-offer,.ws-yes{transition:opacity .45s ease, transform .45s ease}
@media (prefers-reduced-motion: reduce){
  .ws-mock [data-step]{opacity:1 !important; transform:none !important}
}

/* ---------- v6: cycle demos (work steps, artifact panes, deck, cycle map) ---------- */

/* working steps: the "how it got there" log */
.ws-work{list-style:none; margin:14px 0 4px; padding:0 0 0 14px; border-left:2px solid var(--line-soft)}
.ws-work li{position:relative; padding:3px 0 3px 22px; font-size:.83rem; color:var(--faint); line-height:1.5}
.ws-work li::before{content:"\2713"; position:absolute; left:0; top:3px; color:var(--cobalt); font-weight:700; font-size:.8rem}
.ws-work li{transition:opacity .4s ease, transform .4s ease}

/* artifact pane: a real document opens inside the mock */
.ws-artifact{
  margin:16px 0 4px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--card-shadow); overflow:hidden;
  transition:opacity .5s ease, transform .5s ease;
}
.ws-art-head{
  padding:12px 18px 10px; border-bottom:1px solid var(--line-soft); background:rgba(33,118,212,.03);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
}
.ws-art-title{font-weight:700; font-size:.92rem; color:var(--ink)}
.ws-art-chips{display:flex; flex-wrap:wrap; gap:6px}
.ws-art-chips .chip{font-size:.68rem; padding:3px 9px; border-radius:999px; background:rgba(33,118,212,.08); color:var(--sky); font-weight:600; letter-spacing:.02em}
.ws-art-chips .chip.scroll-hint{background:rgba(201,123,74,.1); color:var(--human)}
.ws-art-body{max-height:380px; overflow-y:auto; padding:16px 20px 20px; overscroll-behavior:contain}
.ws-art-body::-webkit-scrollbar{width:8px}
.ws-art-body::-webkit-scrollbar-thumb{background:rgba(16,42,80,.16); border-radius:8px}
.ws-art-body h5{font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color:var(--sky); margin:18px 0 6px; font-weight:700}
.ws-art-body h5:first-child{margin-top:0}
.ws-art-body p{font-size:.86rem; line-height:1.6; color:var(--muted); margin:0 0 8px}
.ws-art-body ul{margin:0 0 8px; padding-left:18px}
.ws-art-body ul li{font-size:.85rem; line-height:1.55; color:var(--muted); margin:3px 0}
.ws-art-body b{color:var(--ink)}
.ws-art-body table{width:100%; border-collapse:collapse; font-size:.8rem; margin:4px 0 10px}
.ws-art-body th{text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); padding:4px 10px 4px 0; border-bottom:1px solid var(--line-soft)}
.ws-art-body td{padding:6px 10px 6px 0; border-bottom:1px solid var(--line-soft); color:var(--muted); vertical-align:top; line-height:1.45}
.ws-artifact.ws-art-sm .ws-art-body{max-height:250px}

/* deck: slide thumbnails in the prospect's branding */
.ws-deck{margin:16px 0 4px; transition:opacity .5s ease, transform .5s ease}
.ws-deck-chips{display:flex; gap:6px; margin-bottom:10px}
.ws-deck-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.ws-slide{
  aspect-ratio:16/10; border-radius:8px; padding:9px 10px; position:relative; overflow:hidden;
  background:linear-gradient(140deg,#0E3A4A 0%,#155E63 70%,#1B7A74 100%); box-shadow:0 4px 14px rgba(14,58,74,.28);
}
.ws-slide.alt{background:linear-gradient(140deg,#F4F9F9 0%,#E8F2F1 100%); box-shadow:0 4px 14px rgba(14,58,74,.12)}
.ws-slide b{display:block; font-size:.6rem; line-height:1.25; color:#fff; font-weight:700; letter-spacing:.01em}
.ws-slide.alt b{color:#0E3A4A}
.ws-slide i{display:block; height:3px; border-radius:2px; background:rgba(255,255,255,.35); margin-top:5px}
.ws-slide.alt i{background:rgba(14,58,74,.22)}
.ws-slide i:nth-of-type(2){width:70%}
.ws-slide i:nth-of-type(3){width:52%}
.ws-slide .dotmark{position:absolute; right:8px; bottom:7px; width:9px; height:9px; border-radius:50%; background:#D9A05B}
@media (max-width:560px){.ws-deck-grid{grid-template-columns:repeat(2,1fr)}}

/* progress scorecard bars (coach journey) */
.ws-score{margin:14px 0 4px; display:grid; gap:8px}
.ws-score .row{display:grid; grid-template-columns:150px 1fr 44px; gap:10px; align-items:center; font-size:.82rem; color:var(--muted)}
.ws-score .bar{height:7px; border-radius:99px; background:rgba(16,42,80,.07); overflow:hidden}
.ws-score .bar span{display:block; height:100%; border-radius:99px; background:var(--grad)}
.ws-score .row b{color:var(--ink); font-weight:600}
.ws-score .row .val{text-align:right; font-weight:700; color:var(--sky); font-size:.8rem}
@media (max-width:560px){.ws-score .row{grid-template-columns:104px 1fr 40px}}

/* cycle map: stages around a memory core */
.cycle-map{max-width:660px; margin:34px auto 6px}
.cycle-map svg{width:100%; height:auto; display:block}
.cycle-map text{font-family:var(--body)}
.cm-thread{stroke:rgba(201,123,74,.0); stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .9s var(--ease), stroke .5s ease}
.cm-thread.lit{stroke:rgba(201,123,74,.75); stroke-dashoffset:0}
.cm-thread.visited{stroke:rgba(201,123,74,.28); stroke-dashoffset:0}
.cm-stage rect{fill:var(--surface); stroke:var(--line); stroke-width:1.2; transition:fill .5s ease, stroke .5s ease}
.cm-stage text{fill:var(--muted); font-size:13px; font-weight:600; transition:fill .5s ease}
.cm-stage.visited rect{fill:#EAF3FD; stroke:rgba(33,118,212,.35)}
.cm-stage.visited text{fill:var(--sky)}
.cm-stage.lit rect{fill:var(--cobalt); stroke:var(--cobalt)}
.cm-stage.lit text{fill:#fff}
.cm-core circle{fill:#FFF8F1; stroke:rgba(201,123,74,.55); stroke-width:1.5}
.cm-core .cm-core-title{fill:var(--human); font-size:14.5px; font-weight:700}
.cm-core .cm-core-sub{fill:var(--faint); font-size:10.5px; font-weight:500}
.cycle-map figcaption{text-align:center; font-size:.82rem; color:var(--faint); margin-top:10px}

/* index miniature map + link */
.cm-mini{display:flex; align-items:center; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft)}
.cm-mini svg{width:132px; flex:none; height:auto}
.cm-mini .cm-stage rect{fill:#EAF3FD; stroke:rgba(33,118,212,.3)}
.cm-mini .cm-core circle{fill:#FFF8F1; stroke:rgba(201,123,74,.5)}
.cm-mini .cm-thread{stroke:rgba(201,123,74,.3); stroke-dashoffset:0}
.cm-mini p{font-size:.88rem; color:var(--muted); margin:0}
.cm-mini a{font-weight:700; color:var(--sky); text-decoration:none; white-space:nowrap}
.cm-mini a:hover{text-decoration:underline}

@media (prefers-reduced-motion: reduce){
  .cm-thread{transition:none}
  .ws-work li,.ws-artifact,.ws-deck{opacity:1 !important; transform:none !important}
}
.cm-mini .cm-stage circle{fill:#EAF3FD; stroke:rgba(33,118,212,.35); stroke-width:1.2}
.cm-mini .cm-core circle{stroke-dasharray:none}

/* big elements collapse while hidden (no ghost whitespace), then pop in */
.os-chapter.armed .ws-artifact:not(.ws-on),
.os-chapter.armed .ws-deck:not(.ws-on),
.ws-mock.ws-armed .ws-artifact:not(.ws-on),
.ws-mock.ws-armed .ws-deck:not(.ws-on){display:none}
@keyframes ws-art-in{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.ws-artifact.ws-on,.ws-deck.ws-on{animation:ws-art-in .55s var(--ease)}
@media (prefers-reduced-motion: reduce){
  .os-chapter .ws-artifact,.os-chapter .ws-deck,.ws-mock .ws-artifact,.ws-mock .ws-deck{display:block !important; animation:none !important}
}
.ws-deck-chips .chip{font-size:.68rem; padding:3px 9px; border-radius:999px; background:rgba(33,118,212,.08); color:var(--sky); font-weight:600; letter-spacing:.02em}

/* ---------- v6.1: professional email rendering ---------- */
.ws-email{padding:18px 22px 16px; box-shadow:var(--card-shadow)}
.ws-email-subject{font-size:1.02rem; margin:2px 0 10px}
.ws-email-body p{color:var(--muted); line-height:1.65; font-size:.93rem; margin:0 0 12px}
.ws-email-body p:last-child{margin-bottom:0}
.ws-email-sig{margin-top:12px}
.ws-email-chips .chip.clean{color:#2E7D4F; background:rgba(46,125,79,.08)}

/* v7.1: notes read like real documents, not blurbs */
.ws-note{padding:16px 20px 14px; box-shadow:var(--card-shadow)}
.ws-note .ws-note-chips{margin-bottom:12px}
.ws-note p{font-size:.93rem; line-height:1.65; margin:0 0 12px}
.ws-note p:last-child{margin-bottom:0}
.ws-note .ws-note-sig{color:var(--ink); font-weight:600; margin-top:2px}

/* demo-finale book CTA */
a.os-next.os-book{background:var(--grad); color:#fff; border:none; text-decoration:none}
a.os-next.os-book:hover{box-shadow:0 8px 22px rgba(33,118,212,.32)}

/* v9: film captions are headlines, not footnotes (Daniel 7/7) */
.aud-panel .film-solo figcaption,
.film-pair figcaption{
  margin-top:18px;
  font-family:var(--display); font-style:normal; font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.35rem, 2.6vw, 1.9rem); line-height:1.25; color:var(--ink);
}
.aud-panel .film-solo figcaption .human-voice,
.film-pair figcaption .human-voice{font-family:var(--serif); font-style:italic; font-weight:400}