/* AI agent workshop (Building Agents 101), three application-page concepts: workshop/concept-a|b|c.html.
   Bruno's concepts (2026-10-13), levelled up the same day: generated by scripts/workshop/gen_workshop.py, on the
   real site CSS (site, nav, agents, agent-detail, agents-v2) instead of inlined copies. Prefix ws- (shared),
   wa- / wb- / wc- (one per concept). The grammar is /agents': one framed object per section, thin ink rule
   on a warm ground shadow, lavender where a person decides, green for done, dashed for "not yet". Every base
   style is the finished frame; nothing rests at opacity 0. */
:root{--ws-lav:#f4f0ff;--ws-lav-2:#ddd4ff;--ws-lav-ink:#4a3a99;--ws-violet:#6b52c9;--ws-ground:#e8e4d8;--ws-green:#2f5a1f;--ws-green-bg:#caf0be;--ws-ease:cubic-bezier(.16,1,.3,1)}
body.ws{background:#fdfcf8}
.ws main{display:block}

/* ---- review chrome: not part of the page ---- */
.ws-review{position:fixed;z-index:200;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:#111;color:#fff;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.18);max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}
.ws-review::-webkit-scrollbar{display:none}
.ws-review span{padding:0 10px;color:#bbb;white-space:nowrap}
.ws-review a,.ws-review button{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:0;background:transparent;color:#fff;font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer}
.ws-review a:hover,.ws-review button:hover{background:#2a2a2a}
.ws-review a[aria-current]{background:#fff;color:#000}

/* ---- shared bits ---- */
.ws-facts{list-style:none;display:flex;flex-wrap:wrap;gap:12px 0;margin:28px 0 0;padding:0}
.ws-facts li{padding:0 22px;border-left:1px solid var(--line)}
.ws-facts li:first-child{padding-left:0;border-left:0}
.ws-facts b{display:block;font:500 18px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap}
.ws-facts span{display:block;margin-top:5px;font:400 14px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}

.ws-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:32px 0 0}
.ws-go .btn{height:48px;padding:0 32px}
.ws-go small{font:400 14px/1.35 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.ws-frame{background:#fff;border:1.25px solid #000;border-radius:18px;box-shadow:6px 6px 0 var(--ws-ground)}
.ws-sec{padding:120px 0}
.ws-sec--cream{background:var(--cream);border-top:1.5px solid #000;border-bottom:1.5px solid #000}

/* ---- the video: a window with a play button and chapters. The film doesn't exist yet,
   so play opens its script in place. ---- */
.ws-video{position:relative;overflow:hidden}
.ws-video__bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);font:500 14.5px/1 "Neue Montreal",system-ui,sans-serif}
.ws-video__bar em{margin-left:auto;font-style:normal;font-weight:400;color:var(--muted);font-size:13.5px}
.ws-video__bar .ag-glyph{width:26px;height:26px;flex-basis:26px;border-width:1.1px;border-radius:7px}
.ws-video__bar .ag-glyph svg{width:13px;height:13px}
.ws-video__screen{position:relative;aspect-ratio:16/9;background:#f7f4e8;border-radius:0 0 17px 17px;overflow:hidden}
.ws-video__poster{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;align-items:end}
.ws-video__poster img{grid-column:2;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.9)}
.ws-video__cap{grid-column:1;grid-row:1;align-self:center;padding:0 8% 0 9%;font:500 clamp(20px,2.3vw,32px)/1.08 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.ws-video__cap small{display:block;margin-top:12px;font:400 clamp(12px,1.1vw,15px)/1.35 "Neue Montreal",system-ui,sans-serif;letter-spacing:0;color:var(--muted)}
.ws-video__play{position:absolute;left:50%;top:50%;z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1.25px solid #000;background:#fff;box-shadow:4px 4px 0 var(--ws-ground);cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--ws-ease)}
.ws-video__play:hover{transform:scale(1.06)}
.ws-video__play svg{width:24px;height:24px;margin-left:4px}
.ws-video__play::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.2px solid rgba(0,0,0,.18);animation:ws-ring 2.8s ease-out infinite}
@keyframes ws-ring{0%{transform:scale(.86);opacity:1}70%,100%{transform:scale(1.18);opacity:0}}
.ws-video.is-paused .ws-video__play::after{animation:none}

.ws-chapters{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.ws-chapters li{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 6px;border-radius:999px;border:1px solid var(--line);background:#fff;font:400 13.5px/1 "Neue Montreal",system-ui,sans-serif}
.ws-chapters b{display:grid;place-items:center;min-width:42px;height:22px;padding:0 6px;border-radius:999px;background:#f7f4e8;font:500 12px/1 "Neue Montreal",system-ui,sans-serif;font-variant-numeric:tabular-nums}

/* ---- what you leave with: three framed modules, each with a small drawing in HTML ---- */
.ws-leave{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:64px 0 0}
.ws-leave__c{display:flex;flex-direction:column;padding:26px 26px 28px}
.ws-leave__k{font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ws-leave__c h3{margin:12px 0 0;font:500 23px/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.ws-leave__c p{margin:10px 0 0;font:400 16px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}
.ws-ill{height:150px;margin:0 0 22px;border-radius:12px;background:#f7f4e8;position:relative;overflow:hidden}
/* agent: a mini window with three ticks and one ask */
.ws-ill--agent .w{position:absolute;left:18%;right:18%;top:20px;bottom:-6px;background:#fff;border:1.2px solid #000;border-radius:10px;padding:12px 12px 0}
.ws-ill--agent .r{display:flex;align-items:center;gap:7px;height:20px;font:400 11.5px/1 "Neue Montreal",system-ui,sans-serif;color:#333}
.ws-ill--agent .r + .r{margin-top:7px}
.ws-ill--agent .r i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--ws-green-bg);border:1px solid #000}
.ws-ill--agent .r.ask i{background:var(--ws-lav-2)}
.ws-ill--agent .r.ask{color:#000;font-weight:500}
.ws-ill--agent .r.ask em{margin-left:auto;padding:3px 7px;border-radius:999px;background:#e9e2ff;color:var(--ws-lav-ink);font-style:normal;font-size:10.5px;animation:ws-blink 2.4s ease-in-out infinite}
@keyframes ws-blink{50%{background:#d6cbff}}
/* skills: a fan of skill files */
.ws-ill--skills .f{position:absolute;top:26px;width:92px;height:112px;background:#fff;border:1.2px solid #000;border-radius:8px;padding:10px;font:500 10.5px/1.2 "Neue Montreal",system-ui,sans-serif;transition:transform .6s var(--ws-ease)}
.ws-ill--skills .f::before{content:"";display:block;width:20px;height:20px;margin-bottom:8px;border-radius:6px;background:var(--ws-lav-2);border:1px solid #000}
.ws-ill--skills .f::after{content:"";display:block;margin-top:8px;height:28px;background:repeating-linear-gradient(#e4e0d4 0 1.2px,transparent 1.2px 7px)}
.ws-ill--skills .f:nth-child(1){left:calc(50% - 120px);transform:rotate(-8deg)}
.ws-ill--skills .f:nth-child(2){left:calc(50% - 46px);top:18px;z-index:1}
.ws-ill--skills .f:nth-child(3){left:calc(50% + 28px);transform:rotate(8deg)}
.ws-ill--skills:hover .f:nth-child(1){transform:rotate(-12deg) translateX(-6px)}
.ws-ill--skills:hover .f:nth-child(3){transform:rotate(12deg) translateX(6px)}

@keyframes ws-dash{to{stroke-dashoffset:-42}}

/* ---- the 90 minutes: one bar, three parts ---- */
.ws-run{margin:64px auto 0;max-width:1080px;padding:30px 30px 32px}
.ws-run__bar{display:grid;grid-template-columns:22fr 23fr 45fr;gap:6px}
.ws-run__seg{position:relative;height:14px;border-radius:999px;border:1.2px solid #000}
.ws-run__seg:nth-child(1){background:#c6dbff}
.ws-run__seg:nth-child(2){background:#ffdff4}
.ws-run__seg:nth-child(3){background:var(--ws-green-bg)}
.ws-run__scale{display:grid;grid-template-columns:22fr 23fr 45fr;gap:6px;margin:10px 2px 0;font:400 12.5px/1 "Neue Montreal",system-ui,sans-serif;color:var(--muted);font-variant-numeric:tabular-nums}
.ws-run__scale span:first-child{display:flex;justify-content:space-between}
.ws-run__scale span:last-child{text-align:right}
.ws-run__parts{display:grid;grid-template-columns:22fr 23fr 45fr;gap:22px;margin:26px 0 0}
.ws-run__p b{display:block;font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ws-run__p h3{margin:10px 0 0;font:500 20px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ws-run__p p{margin:8px 0 0;font:400 15.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}

/* ---- fit: made for / not for ---- */
.ws-fit{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1080px;margin:64px auto 0}
.ws-fit__c{padding:28px 30px 30px}
.ws-fit__c--no{background:transparent;border:1.25px dashed rgba(0,0,0,.45);box-shadow:none}
.ws-fit__c h3{margin:0;font:500 22px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ws-fit__c ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.ws-fit__c li{display:grid;grid-template-columns:22px 1fr;gap:12px;font:400 16px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.ws-fit__c li::before{content:"";width:20px;height:20px;margin-top:1px;border-radius:50%;border:1.1px solid #000;background:var(--ws-green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ws-fit__c--no li::before{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat;border-style:dashed}
.ws-fit__c small{display:block;margin-top:18px;font:400 14px/1.45 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}

/* ---- hosts ---- */
.ws-hosts{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1080px;margin:64px auto 0}
.ws-host{display:grid;grid-template-columns:96px 1fr;gap:22px;padding:26px}
.ws-host__face{width:96px;height:96px;border-radius:50%;overflow:hidden;border:1.2px solid #000;background:var(--ws-lav-2);display:grid;place-items:center;font:500 26px/1 "Neue Montreal",system-ui,sans-serif}
.ws-host__face img{width:100%;height:100%;object-fit:cover}
.ws-host h3{margin:4px 0 0;font:500 21px/1.2 "Neue Montreal",system-ui,sans-serif}
.ws-host__role{display:block;margin-top:5px;font:400 14.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.ws-host p{margin:12px 0 0;font:400 15.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}

/* ---- the application form ---- */
.ws-form{display:grid;gap:16px}
.ws-field{display:grid;gap:7px}
.ws-field label,.ws-field legend{font:500 14.5px/1.3 "Neue Montreal",system-ui,sans-serif}
.ws-field label small,.ws-field legend small{font-weight:400;color:var(--muted)}
.ws-field input,.ws-field select,.ws-field textarea{width:100%;min-height:46px;padding:11px 14px;border:1.2px solid rgba(0,0,0,.28);border-radius:10px;background:#fff;font:400 16px/1.35 "Neue Montreal",system-ui,sans-serif;color:#000;transition:border-color .2s,box-shadow .2s}
.ws-field textarea{min-height:88px;resize:vertical}
.ws-field input:focus,.ws-field select:focus,.ws-field textarea:focus{outline:0;border-color:#000;box-shadow:0 0 0 3px rgba(57,122,231,.18)}
.ws-field .ws-hint{font:400 13px/1.35 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.ws-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ws-form .btn{height:50px;width:100%}
.ws-form__fine{margin:0;font:400 13px/1.45 "Neue Montreal",system-ui,sans-serif;color:var(--muted);text-align:center}
.ws-done{display:none;text-align:center;padding:24px 8px}
.ws-done i{display:grid;place-items:center;width:52px;height:52px;margin:0 auto;border-radius:50%;background:var(--ws-green-bg);border:1.2px solid #000}
.ws-done h3{margin:16px 0 0;font:500 23px/1.2 "Neue Montreal",system-ui,sans-serif}
.ws-done p{margin:10px auto 0;max-width:380px;font:400 15.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}
.is-sent .ws-form{display:none}
.is-sent .ws-done{display:block}

/* after you apply: three steps */
.ws-next{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ws-next li{display:grid;grid-template-columns:30px 1fr;gap:12px;font:400 15.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.ws-next li > i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.1px solid #000;background:#fff;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal}
.ws-next li b{color:#000;font-weight:500}

/* ---- FAQ reuses .ag-faq; quote reuses .bac-say ---- */
.ws .bac-say{max-width:760px;margin:0 auto}

/* ================= Concept A: the invitation ================= */

.wa-apply{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:72px;align-items:start;max-width:1160px;margin:0 auto}
.wa-apply h2{margin:16px 0 0}
.wa-apply .lead{margin-top:18px}
.wa-apply .ws-next{margin-top:30px}
.wa-card{padding:0;overflow:hidden}
.wa-card__bar{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.wa-card__faces{display:flex;flex:none}
.wa-card__faces > span{color:#000}
.wa-card__faces > *{width:40px;height:40px;border-radius:50%;border:1.2px solid #000;overflow:hidden;background:var(--ws-lav-2);display:grid;place-items:center;font:500 13px/1 "Neue Montreal",system-ui,sans-serif}
.wa-card__faces > * + *{margin-left:-10px}
.wa-card__faces img{object-fit:cover}
.wa-card__bar b{display:block;font:500 16px/1.2 "Neue Montreal",system-ui,sans-serif}
.wa-card__bar div > span{display:block;margin-top:3px;font:400 13.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.wa-card__body{padding:22px 22px 24px}

/* ================= Concept B: the build ================= */
.wb .av-hx__stage{padding-top:20px}
.wb .av-hx__count b{color:var(--ws-green)}

/* exploration: the application drawn as an agent window. Fields on the left; on the right the
   status column ticks each answer off, then hands the application to two people, in lavender. */
.wb-app{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);max-width:1080px;margin:64px auto 0;overflow:visible}
.wb-app__bar{grid-column:1 / -1;display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.wb-app__bar b{font:500 17px/1.2 "Neue Montreal",system-ui,sans-serif}
.wb-app__bar .ag-glyph{width:30px;height:30px;flex-basis:30px;border-width:1.2px;border-radius:8px}
.wb-app__bar .ag-glyph svg{width:15px;height:15px}
.wb-app__bar em{margin-left:auto;font:400 13.5px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal;color:var(--muted)}
.wb-app__form{padding:26px 26px 28px;border-right:1px solid var(--line)}
.wb-app__side{padding:26px 24px 28px;background:#f7f4e8;border-radius:0 0 17px 0;display:flex;flex-direction:column}
.wb-app__side > b{font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wb-check{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.wb-check li{display:flex;align-items:center;gap:11px;font:400 15px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted);transition:color .3s}
.wb-check li i{flex:none;width:20px;height:20px;border-radius:50%;border:1.3px dashed rgba(0,0,0,.35);background:transparent;transition:background .3s var(--ws-ease),border .3s}
.wb-check li.is-ok{color:#000}
.wb-check li.is-ok i{border:1.1px solid #000;background:var(--ws-green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;animation:av-hx-pop .55s var(--ws-ease)}
.wb-hand{margin-top:auto;padding-top:22px}
.wb-hand__ask{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:14px;background:var(--ws-lav);border:1.25px dashed rgba(74,58,153,.55);transition:border .3s,box-shadow .4s}
.wb-hand__ask .wa-card__faces > *{width:34px;height:34px;font-size:12px}
.wb-hand__ask b{display:block;font:500 14px/1.2 "Neue Montreal",system-ui,sans-serif}
.wb-hand__ask div > span{display:block;margin-top:3px;font:400 12.5px/1.35 "Neue Montreal",system-ui,sans-serif;color:#3b2f73}
.wb-app.is-ready .wb-hand__ask{border:1.25px solid #000;box-shadow:5px 5px 0 var(--ws-ground)}
.wb-app.is-sent .wb-hand__ask{border:1.25px solid #000;box-shadow:5px 5px 0 var(--ws-ground)}
.wb-app__progress{height:6px;margin:18px 0 0;border-radius:999px;background:#e9e5d8;overflow:hidden}
.wb-app__progress i{display:block;height:100%;width:0;background:var(--ws-green);border-radius:inherit;transition:width .5s var(--ws-ease)}
.wb-app .ws-done{padding:8px 0}

/* ================= Concept C: the syllabus ================= */
.wc-top{padding:56px 0 0}
.wc-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start;max-width:1240px;margin:0 auto}
.wc-crumb{font:500 13px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wc-grid h1{margin:16px 0 0;font:500 clamp(42px,4.6vw,64px)/1.03 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.03em;text-wrap:balance}
.wc-sub{margin:20px 0 0;max-width:640px;font:400 19.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}
.wc-by{display:flex;align-items:center;gap:12px;margin:24px 0 0;font:400 15px/1.35 "Neue Montreal",system-ui,sans-serif;color:#333}
.wc-by b{font-weight:500;color:#000}
.wc-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:36px 0 0;border:1.25px solid #000;border-radius:16px;background:#fff;box-shadow:6px 6px 0 var(--ws-ground)}
.wc-meta li{list-style:none;padding:18px 18px 20px;border-left:1px solid var(--line)}
.wc-meta li:first-child{border-left:0}
.wc-meta b{display:block;font:500 17px/1.2 "Neue Montreal",system-ui,sans-serif}
.wc-meta span{display:block;margin-top:5px;font:400 13.5px/1.35 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.wc-meta{padding:0}
.wc-block{margin:72px 0 0}
.wc-block > h2{margin:0;font:500 32px/1.12 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.wc-block > p.lead{margin:12px 0 0;font-size:17.5px}
.wc-learn{display:grid;grid-template-columns:1fr 1fr;gap:16px 36px;margin:26px 0 0;padding:26px 28px;list-style:none}
.wc-learn li{display:grid;grid-template-columns:22px 1fr;gap:12px;font:400 16px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.wc-learn li::before{content:"";width:20px;height:20px;margin-top:1px;border-radius:50%;border:1.1px solid #000;background:var(--ws-green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.wc-learn b{color:#000;font-weight:500}

.wc-mods{margin:26px 0 0;border-top:1.5px solid #000}
.wc-mod{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.wc-mod__t b{display:block;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wc-mod__t span{display:inline-block;margin-top:10px;padding:5px 10px;border-radius:999px;border:1px solid #000;font:500 13px/1 "Neue Montreal",system-ui,sans-serif}
.wc-mod:nth-child(1) .wc-mod__t span{background:#c6dbff}
.wc-mod:nth-child(2) .wc-mod__t span{background:#ffdff4}
.wc-mod:nth-child(3) .wc-mod__t span{background:var(--ws-green-bg)}
.wc-mod h3{margin:0;font:500 21px/1.2 "Neue Montreal",system-ui,sans-serif}
.wc-mod p{margin:8px 0 0;font:400 16px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}

.wc-fit{grid-template-columns:1fr 1fr;max-width:none;margin:26px 0 0;gap:16px}
.wc-fit .ws-fit__c{padding:22px 24px}
.wc-side{position:sticky;top:96px}
.wc-card{overflow:hidden}
.wc-card .ws-video__screen{border-radius:0;aspect-ratio:16/10}
.wc-card .ws-video__play{width:58px;height:58px;margin:-29px 0 0 -29px}
.wc-card .ws-video__play svg{width:18px;height:18px}
.wc-card .ws-video__cap{font-size:19px;padding-left:20px}
.wc-card .ws-video__cap small{font-size:12px}
.wc-card__body{padding:20px 22px 22px;border-top:1px solid var(--line)}
.wc-card__price{display:flex;align-items:baseline;gap:10px}
.wc-card__price b{font:500 30px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.wc-card__price span{font:400 14.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.wc-card__list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.wc-card__list li{display:grid;grid-template-columns:20px 1fr;gap:10px;font:400 14.5px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333}
.wc-card__list li svg{width:18px;height:18px;margin-top:1px;fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wc-card__list b{color:#000;font-weight:500}
.wc-card .btn{width:100%;height:50px;margin-top:20px}

.wc-bottom{display:none}
/* the application dialog (Concept C) */
.wc-dlg{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 32px);padding:0;border:1.25px solid #000;border-radius:18px;box-shadow:6px 6px 0 var(--ws-ground);background:#fff}
.wc-dlg::backdrop{background:rgba(253,252,248,.82);backdrop-filter:blur(3px)}
.wc-dlg__bar{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.wc-dlg__bar b{font:500 16px/1.2 "Neue Montreal",system-ui,sans-serif}
.wc-dlg__bar span{font:400 13.5px/1 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.wc-dlg__x{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font:400 18px/1 "Neue Montreal",system-ui,sans-serif}
.wc-dlg__body{padding:20px 22px 24px}

/* ================= responsive ================= */
@media (max-width:1100px){
  .ws-leave{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .wa-apply{grid-template-columns:1fr;gap:44px;max-width:620px}

  .wc-grid{grid-template-columns:1fr;max-width:760px}
  .wc-side{position:static;order:-1}
  .wc-side{display:none}
  .wc-bottom{display:block;position:fixed;z-index:90;left:0;right:0;bottom:0;padding:10px 16px 12px;background:#fdfcf8;border-top:1.25px solid #000}
  .wc-bottom__in{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto}
  .wc-bottom__in div{min-width:0;font:400 13.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
  .wc-bottom__in b{display:block;color:#000;font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif}
  .wc-bottom .btn{margin-left:auto;height:44px;padding:0 20px;flex:none}
  .wc-mobilecard{display:block !important}
  body.wc .ws-review{bottom:84px}
}
.wc-mobilecard{display:none;margin:32px 0 0}
@media (max-width:900px){
  .ws-sec{padding:88px 0}
  .ws-fit,.ws-hosts{grid-template-columns:1fr;max-width:620px}
  .ws-run__scale span:first-child{display:flex;justify-content:space-between}
.ws-run__scale span:last-child{text-align:right}
.ws-run__parts{grid-template-columns:1fr;gap:20px}

  .wb-app{grid-template-columns:1fr}
  .wb-app__form{border-right:0;border-bottom:1px solid var(--line)}
  .wb-app__side{border-radius:0 0 17px 17px}
  .wc-meta{grid-template-columns:1fr 1fr}
  .wc-meta li:nth-child(3){border-left:0}
  .wc-meta li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .ws-facts li{padding:0 14px}
  .ws-facts b{font-size:16px}
  .ws-row2{grid-template-columns:1fr}

  .ws-video__poster{grid-template-columns:1fr 1fr}
  .ws-video__cap{font-size:17px;padding:0 0 0 16px}
  .ws-video__cap small{display:none}
  .ws-video__play{width:58px;height:58px;margin:-29px 0 0 -29px}
  .ws-run{padding:22px 18px 24px}

  .ws-host{grid-template-columns:64px 1fr;gap:16px;padding:20px}
  .ws-host__face{width:64px;height:64px;font-size:19px}

  .wc-mod{grid-template-columns:1fr;gap:12px}
  .wc-block > h2{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  .ws-video__play::after,.ws-ill--agent .r.ask em{animation:none}
}

.ws-run__scale i{font-style:normal}

/* B's poster: the job in plain words, and the skill it becomes */
.ws-shot{grid-column:2;grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px 18px 18px 0}

.ws-shot__skill{position:relative;padding:12px 14px;border-radius:12px;background:#fff;border:1.2px solid #000;box-shadow:4px 4px 0 var(--ws-ground);font:400 clamp(10.5px,.95vw,13px)/1.35 "Neue Montreal",system-ui,sans-serif}
.ws-shot__skill b{font-weight:500}
.ws-shot__skill > span{position:absolute;right:12px;top:11px;padding:3px 8px;border-radius:999px;background:var(--ws-lav-2);color:var(--ws-lav-ink);font-size:11px}
.ws-shot__skill ol{margin:8px 0 0;padding-left:18px;color:#333}
@media (max-width:640px){.ws-shot{padding:10px 10px 10px 0}}
.ws-video--screen .ws-video__play{left:calc(9% + 38px);top:auto;bottom:16%}
@media (max-width:640px){.ws-video--screen .ws-video__play{left:calc(16px + 29px);bottom:10%}}
.wc-card .ws-video__poster{grid-template-columns:1fr}
.wc-card .ws-video__poster img{grid-column:1;grid-row:1}
.wc-card .ws-video__cap{display:none}
@media (max-width:640px){
  .ws-video:not(.ws-video--screen) .ws-video__poster{grid-template-columns:1fr}
  .ws-video:not(.ws-video--screen) .ws-video__poster img{grid-column:1;grid-row:1}
  .ws-video:not(.ws-video--screen) .ws-video__cap{display:none}
  .ws-video--screen .ws-video__cap{align-self:start;padding-top:16px;font-size:15px}

}
@media (max-width:640px){
  .ws-facts{flex-direction:column;gap:10px}
  .ws-facts li{display:flex;align-items:baseline;gap:8px;padding:0;border-left:0}
  .ws-facts span{margin-top:0}
}
.ws-embed .ws-review,.ws-embed .wc-bottom{display:none !important}
/* what you need: replaces the brief's fit block, which was internal */
.ws-need{max-width:1080px;margin:28px auto 0;padding:28px 30px 30px}
.ws-need h3{margin:0;font:500 22px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ws-need ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:20px 0 0;padding:0}
.ws-need li{display:grid;grid-template-columns:22px 1fr;gap:4px 12px;font:400 15.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.ws-need li::before{content:"";grid-row:1 / 3;width:20px;height:20px;margin-top:1px;border-radius:50%;border:1.1px solid #000;background:var(--ws-green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ws-need li b{color:#000;font-weight:500}

.wb .ws-need{margin-top:64px}
.wc-need{max-width:none;margin-top:0}
.wc-need ul{grid-template-columns:1fr}
@media (max-width:900px){.ws-need ul{grid-template-columns:1fr}}
@media (max-width:640px){.ws-need{padding:22px 20px 24px}}
.ws-learnbox{max-width:1080px;margin:56px auto 0}
/* one host */
.ws-hosts{grid-template-columns:minmax(0,640px);justify-content:center}
/* the sidebar card shows the same film poster, the skill card alone */
.wc-card .ws-shot{grid-column:1;grid-row:1;padding:18px 22px}

.wc-card .ws-video--screen .ws-video__play{left:auto;right:14px;top:auto;bottom:12px;margin:0}

/* the real film: hidden behind the drawn poster until play */
.ws-video__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fdfcf8;visibility:hidden}
.ws-video.is-playing .ws-video__film{visibility:visible;z-index:4}
.ws-video.is-playing .ws-video__poster,.ws-video.is-playing .ws-video__play{visibility:hidden}
.ws-chapters button{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 6px;border-radius:999px;border:1px solid var(--line);background:#fff;font:400 13.5px/1 "Neue Montreal",system-ui,sans-serif;color:#000;cursor:pointer;transition:border-color .2s}
.ws-chapters button:hover{border-color:#000}
.ws-chapters li{display:contents}
.wc-card .ws-video__screen{aspect-ratio:16/9}
/* review chrome moves to the top left, out of the bottom bar's way */
.ws-review{left:16px;right:auto;bottom:auto;top:88px;transform:none;padding:4px;font-size:12px;opacity:.92}
.ws-review span{display:none}
.ws-review a,.ws-review button{height:26px;padding:0 10px}
@media (max-width:640px){.ws-review{top:auto;bottom:auto;display:none}}
/* B's hero no longer hands over to the results ribbon (it overlapped on /agents), so it needs its own floor */
.wb .av-hx{padding-bottom:104px}
@media (max-width:1180px){.wb .av-hx{padding-bottom:88px}}
@media (max-width:700px){.wb .av-hx{padding-bottom:64px}}
/* the poster carries one line and one object; the skill's steps are drawn as lines, not text (Bruno: the thumb competed) */
.ws-video--screen .ws-video__cap{align-self:center;padding-bottom:120px}
.ws-shot{justify-content:center;padding:28px 9% 28px 0}
.ws-shot__skill{padding:16px 18px 18px}
.ws-shot__skill ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.ws-shot__skill li{height:9px;border-radius:999px;background:#ece8dc}
.ws-shot__skill li:nth-child(1){width:78%}
.ws-shot__skill li:nth-child(2){width:92%}
.ws-shot__skill li:nth-child(3){width:64%}
.ws-shot__skill li:nth-child(4){width:84%;background:#e9e2ff}
@media (max-width:640px){.ws-video--screen .ws-video__cap{padding-bottom:70px}.ws-shot__skill li{height:6px}.ws-shot__skill ol{gap:7px;margin-top:10px}}
.wc-card .ws-video--screen .ws-video__cap{display:none}

/* ================= Level-up pass (2026-10-13) ================= */
/* Micro labels in sentence case at a readable size (the slop check: no tiny tracked capitals). */
.ws-run__p b{font-variant-numeric:tabular-nums}


/* hero CTA line */
.ws-go small b{font-weight:500;color:#000}

/* form: the optional phone, the later-date box, sending and error states */
.ws-field label small{font-weight:400;color:var(--muted)}
.ws-check{display:flex;align-items:flex-start;gap:10px;font:400 14.5px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333;cursor:pointer}
.ws-check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:#000}
.ws-form .ws-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* after you apply: hold the time, and one quiet way to the service */
.ws-done__cal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0 0}
.ws-done__cal a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1.2px solid #000;border-radius:999px;background:#fff;color:#000;font:500 14px/1 "Neue Montreal",system-ui,sans-serif;text-decoration:none;transition:background .2s}
.ws-done__cal a:hover{background:var(--ws-green-bg)}
.ws-done__cal svg{width:15px;height:15px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round}
.ws-done__more{margin:22px auto 0;padding-top:18px;border-top:1px solid var(--line);max-width:400px;font:400 14.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:#555}
.ws-done__more a{color:#000;font-weight:500}

/* the host, with the team's results under him (the /agents ribbon, reused as is) */
.ws-cred{max-width:1240px;margin:56px auto 0}
.ws-cred .ws-hosts{margin-top:0}
.ws-cred .av-ribbon__list{margin-top:40px}
.ws-cred .av-quote{margin-top:44px}
.ws-cred__more{margin:28px 0 0;text-align:center;font:400 15px/1.4 "Neue Montreal",system-ui,sans-serif;color:#555}
.ws-cred__more a{color:#000;font-weight:500}
@media (max-width:1100px){.ws-cred .av-ribbon__list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ws-cred .av-ribbon__list{grid-template-columns:1fr}.ws-cred .av-ribbon__list b{font-size:28px}}

/* who it's for: two framed lists (Bruno's .ws-fit, now in use) */
.ws-fit__c h3{font-size:21px}

/* B: the recipe, three objects in a row: what you say, the skill it becomes, what the agent hands back */
.wb-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1160px;margin:64px auto 0;padding:0;list-style:none;counter-reset:wb}
.wb-step{position:relative;display:flex;flex-direction:column;padding:22px 22px 24px}
.wb-step h3{margin:0;font:500 20px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.wb-step > p{margin:8px 0 0;font:400 15.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}
.wb-step__art{margin:0 0 20px;padding:16px;border-radius:12px;background:#f7f4e8;min-height:176px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.wb-step + .wb-step::before{content:"";position:absolute;left:-17px;top:96px;width:14px;height:14px;border-top:1.4px solid #000;border-right:1.4px solid #000;transform:rotate(45deg)}
.wb-say{margin:0;padding:12px 14px;border-radius:14px 14px 3px 14px;background:#fff;border:1px solid rgba(0,0,0,.16);font:400 14px/1.45 "Neue Montreal",system-ui,sans-serif;color:#222}
.wb-say__who{align-self:flex-end;font:400 12.5px/1 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.wb-skill{padding:12px 14px;border-radius:12px;background:#fff;border:1.2px solid #000;box-shadow:4px 4px 0 var(--ws-ground)}
.wb-skill__h{display:flex;align-items:center;justify-content:space-between;font:500 13.5px/1 "Neue Montreal",system-ui,sans-serif}
.wb-skill__h span{padding:3px 8px;border-radius:999px;background:var(--ws-lav-2);color:var(--ws-lav-ink);font-size:11.5px;font-weight:500}
.wb-skill ol{margin:10px 0 0;padding:0 0 0 18px;font:400 13px/1.55 "Neue Montreal",system-ui,sans-serif;color:#333}
.wb-skill ol li:last-child{color:var(--ws-lav-ink)}
.wb-out{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.16);font:400 13.5px/1.35 "Neue Montreal",system-ui,sans-serif;color:#222}
.wb-out i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid #000;background:var(--ws-green-bg)}
.wb-out--ask i{background:var(--ws-lav-2)}
.wb-out b{font-weight:500}
.wb-out small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}

@media (max-width:980px){.wb-steps{grid-template-columns:1fr;max-width:560px}.wb-step + .wb-step::before{left:50%;top:-15px;transform:translateX(-50%) rotate(135deg)}}

/* C: the glossary (replaces the chip cloud) */
.wc-gloss{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;margin:22px 0 0;padding:0;list-style:none;border-top:1.5px solid #000}
.wc-gloss li{padding:14px 0 15px;border-bottom:1px solid var(--line);font:400 15.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.wc-gloss b{display:block;margin-bottom:3px;font-weight:500;color:#000}
.wc-gloss a{color:#000;text-underline-offset:2px}
@media (max-width:900px){.wc-gloss{grid-template-columns:1fr}}

/* the review index page */
.wr{padding:72px 0 120px}
.wr .container{max-width:1080px}
.wr h1{margin:16px 0 0;font:500 clamp(38px,4.4vw,56px)/1.05 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.03em;text-wrap:balance}
.wr__lead{margin:18px 0 0;max-width:720px;font:400 19px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}
.wr__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:48px 0 0}
.wr__card{display:flex;flex-direction:column;padding:24px 24px 26px;color:#000;text-decoration:none;transition:border-color .2s}
.wr__card:hover{border-color:var(--ws-violet)}
.wr h3{margin:72px 0 0;font:500 30px/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.wr__list{margin:20px 0 0;padding:0;list-style:none;counter-reset:wr;border-top:1.5px solid #000}
.wr__list li{counter-increment:wr;display:grid;grid-template-columns:40px 1fr;gap:4px 14px;padding:18px 0 19px;border-bottom:1px solid var(--line);font:400 16px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}
.wr__list li::before{content:counter(wr);grid-row:1 / 3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.1px solid #000;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;color:#000;background:#fff}
.wr__list b{color:#000;font-weight:500}
.wr__list--plain li::before{content:"";width:10px;height:10px;margin:8px 0 0 10px;border:0;background:#000}
@media (max-width:900px){.wr__cards{grid-template-columns:1fr}}

/* ================= Scroll motion (Justin, 2026-10-13: subtle, delightful, no scroll-jacking) =================
   Armed by workshop.js only when IntersectionObserver exists and motion isn't reduced (html.ws-motion), and only
   for things below the fold at load, so nothing above the fold flashes and no-JS reads the finished page.
   Each thing plays once as it arrives: a 14px rise and fade on expo-out, siblings 90ms apart. Then the agenda bar
   fills left to right, and Concept B's skill writes itself in a line at a time. */
.ws-motion [data-ws-rise]{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ws-ease),transform 1.1s var(--ws-ease);transition-delay:calc(var(--d,0) * 90ms)}
.ws-motion [data-ws-rise].is-in{opacity:1;transform:none}
.ws-motion .ws-run[data-ws-rise] .ws-run__seg{transform-origin:left center;transform:scaleX(0);transition:transform 1s var(--ws-ease)}
.ws-motion .ws-run[data-ws-rise].is-in .ws-run__seg{transform:none}
.ws-motion .ws-run[data-ws-rise].is-in .ws-run__seg:nth-child(1){transition-delay:.25s}
.ws-motion .ws-run[data-ws-rise].is-in .ws-run__seg:nth-child(2){transition-delay:.6s}
.ws-motion .ws-run[data-ws-rise].is-in .ws-run__seg:nth-child(3){transition-delay:.95s}
.ws-motion .wb-step[data-ws-rise] .wb-skill li,.ws-motion .wb-step[data-ws-rise] .wb-out{opacity:0;transform:translateX(-6px);transition:opacity .6s var(--ws-ease),transform .8s var(--ws-ease)}
.ws-motion .wb-step[data-ws-rise].is-in .wb-skill li,.ws-motion .wb-step[data-ws-rise].is-in .wb-out{opacity:1;transform:none}
.ws-motion .wb-step.is-in .wb-skill li:nth-child(1){transition-delay:.45s}
.ws-motion .wb-step.is-in .wb-skill li:nth-child(2){transition-delay:.7s}
.ws-motion .wb-step.is-in .wb-skill li:nth-child(3){transition-delay:.95s}
.ws-motion .wb-step.is-in .wb-skill li:nth-child(4){transition-delay:1.2s}
.ws-motion .wb-step.is-in .wb-out:nth-child(1){transition-delay:.55s}
.ws-motion .wb-step.is-in .wb-out:nth-child(2){transition-delay:.95s}
.ws-motion .wb-out.wb-out--ask i{transition:transform .5s var(--ws-ease) 1.3s}
.ws-motion .wb-step:not(.is-in) .wb-out--ask i{transform:scale(.6)}
@media (prefers-reduced-motion:reduce){.ws-motion [data-ws-rise],.ws-motion [data-ws-rise] *{opacity:1 !important;transform:none !important;transition:none !important}}

/* C: the take-homes sit in a narrow column, so each card runs sideways: the drawing left, the words right */
.wc .ws-leave{grid-template-columns:1fr;gap:16px;margin:26px 0 0}
.wc .ws-leave__c{display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:24px;padding:18px 22px 18px 18px;align-items:start}
.wc .ws-ill{grid-row:1 / 4;height:132px;margin:0}
.wc .ws-leave__k{margin-top:10px}
.wc .ws-leave__c h3{margin-top:8px;font-size:20px}
.wc .ws-leave__c p{font-size:15px}
@media (max-width:640px){.wc .ws-leave__c{grid-template-columns:1fr}.wc .ws-ill{grid-row:auto;margin-bottom:16px}}

/* review chrome: bottom left, clear of every headline and of the centred bottom bar; gone below 900 */
.ws-review{top:auto;bottom:20px;left:20px}
@media (max-width:900px){.ws-review{display:none}}

/* ================= Rev 2 (2026-10-13) ================= */
/* Concept A: the brief. Copy left; right, the inbox with the one-page brief the agent sends at 7 am. */
.wa2-hero{padding:64px 0 96px}
.wa2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:72px;align-items:center;max-width:1240px}
.wa2 h1{margin:22px 0 0;font:500 clamp(42px,4.4vw,62px)/1.04 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.03em;text-wrap:balance}
.wa2__sub{margin:22px 0 0;max-width:560px;font:400 19px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.wa2 .ws-go{margin-top:30px}
.wa2 .ws-go small{display:block;max-width:300px}
.wa2 .wc-by{margin-top:30px}
.wa2__fig{margin:0;position:relative}
.wa2-mail{overflow:hidden}
.wa2-mail__bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font:500 14px/1 "Neue Montreal",system-ui,sans-serif}
.wa2-mail__bar em{margin-left:auto;font-style:normal;font-weight:400;font-size:13px;color:var(--muted)}
.wa2-dots{display:flex;gap:5px}
.wa2-dots i{width:9px;height:9px;border-radius:50%;border:1px solid rgba(0,0,0,.3)}
.wa2-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f7f4e8;border-bottom:1px solid var(--line)}
.wa2-row div{min-width:0}
.wa2-row b{display:block;font:500 14px/1.2 "Neue Montreal",system-ui,sans-serif}
.wa2-row span{display:block;margin-top:3px;font:400 13.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:#333}
.wa2-row em{margin-left:auto;align-self:flex-start;font:400 12.5px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal;color:var(--muted)}
.wa2-av{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.1px solid #000;background:#c6dbff;font:600 10.5px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal}
.wa2-brief{padding:20px 22px 22px;display:grid;gap:16px}
.wa2-head b{display:block;font:500 22px/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.wa2-head span{display:block;margin-top:5px;font:400 14px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.wa2-sec{padding-top:14px;border-top:1px solid var(--line)}
.wa2-k{margin:0;font:500 13px/1.2 "Neue Montreal",system-ui,sans-serif;color:#555}
.wa2-who{display:flex;flex-wrap:wrap;gap:8px 18px;margin:9px 0 0;font:400 14.5px/1.3 "Neue Montreal",system-ui,sans-serif}
.wa2-who span{display:inline-flex;align-items:center;gap:8px}
.wa2-who i{width:20px;height:20px;border-radius:50%;border:1px solid #000;background:var(--c)}
.wa2-sec ul{margin:8px 0 0;padding:0 0 0 18px;font:400 14.5px/1.55 "Neue Montreal",system-ui,sans-serif;color:#222}
.wa2-open{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:8px 0 0;font:500 14.5px/1.3 "Neue Montreal",system-ui,sans-serif}
.wa2-open span{padding:4px 10px;border-radius:999px;background:var(--ws-lav);border:1px solid rgba(74,58,153,.35);color:var(--ws-lav-ink);font-size:12.5px;font-weight:500}
.wa2-ask{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--ws-lav);border:1.2px solid rgba(74,58,153,.4)}
.wa2-pp{flex:none;display:block;width:32px;height:32px;border-radius:50%;overflow:hidden;border:1.1px solid #000;background:var(--ws-lav-2)}
.wa2-pp svg{display:block;width:100%;height:100%}
.wa2-ask div{min-width:0}
.wa2-ask b{display:block;font:500 14px/1.2 "Neue Montreal",system-ui,sans-serif}
.wa2-ask div span{display:block;margin-top:3px;font:400 13.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:#3b2f73}
.wa2-btns{margin-left:auto;display:flex;gap:6px;flex:none}
.wa2-btns em{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(0,0,0,.3);background:#fff;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal}
.wa2-btns em.is-yes{background:#000;color:#fff;border-color:#000}
.wa2-src{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0 4px;font:400 13.5px/1 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.wa2-src span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 8px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#000}
.wa2-src svg{width:15px;height:15px;fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the entrance: the email arrives, then the brief writes itself section by section, then the ask settles in.
   Plays once on load; the base style is the finished brief, so reduced motion and no JS read it whole. */
@media (prefers-reduced-motion:no-preference){
  .ws-js .wa2-row{animation:wa2-in .8s var(--ws-ease) .35s backwards}
  .ws-js .wa2-x{animation:wa2-in .8s var(--ws-ease) backwards;animation-delay:calc(.9s + var(--t) * .32s)}
  .ws-js .wa2-src span{animation:wa2-in .7s var(--ws-ease) backwards}
  .ws-js .wa2-src span:nth-child(1){animation-delay:.5s}
  .ws-js .wa2-src span:nth-child(2){animation-delay:.6s}
  .ws-js .wa2-src span:nth-child(3){animation-delay:.7s}
  .ws-js .wa2-btns .is-yes{animation:wa2-press 1.2s var(--ws-ease) 3.2s backwards}
}
@keyframes wa2-in{from{opacity:0;transform:translateY(8px)}}
@keyframes wa2-press{0%{background:#fff;color:#000;border-color:rgba(0,0,0,.3)}60%{transform:scale(.94)}100%{transform:none}}
@media (max-width:1100px){.wa2{grid-template-columns:1fr;gap:48px;max-width:640px}.wa2-hero{padding-bottom:72px}}
@media (max-width:640px){.wa2-hero{padding-top:40px}.wa2 h1{font-size:40px}.wa2__sub{font-size:18px}.wa2-brief{padding:16px}.wa2-ask{flex-wrap:wrap}.wa2-btns{margin-left:44px}}

/* the take-homes: a week of jobs, some an agent's, some yours (replaces circles labelled A to D) */
.ws-ill--week .wk{position:absolute;left:50%;top:16px;bottom:40px;width:min(230px,84%);transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ws-ill--week .d{display:flex;flex-direction:column;gap:5px}
.ws-ill--week .d b{font:500 10.5px/1 "Neue Montreal",system-ui,sans-serif;color:#555;text-align:center;margin-bottom:2px}
.ws-ill--week .d i{display:block;height:var(--h,16px);border-radius:5px;border:1px solid #000;background:#fff}
.ws-ill--week i.ai{background:#c6dbff}
.ws-ill--week i.you{background:var(--ws-lav-2)}
.ws-ill--week .lg{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:14px;margin:0;font:400 11.5px/1 "Neue Montreal",system-ui,sans-serif;color:#333}
.ws-ill--week .lg span{display:inline-flex;align-items:center;gap:5px}
.ws-ill--week .lg span::before{content:"";width:10px;height:10px;border-radius:3px;border:1px solid #000;background:#c6dbff}
.ws-ill--week .lg .you::before{background:var(--ws-lav-2)}

/* the agent drawing: a fixed-width window so its rows never wrap into each other */
.ws-ill--agent .w{left:50%;right:auto;width:min(236px,88%);transform:translateX(-50%)}
.ws-ill--agent .r{white-space:nowrap}
/* the skill fan: the right-hand card's label sat under the middle card; it now reads from its own edge */
.ws-ill--skills .f:nth-child(3){text-align:right}
.ws-ill--skills .f:nth-child(3)::before{margin-left:auto}
.wc .ws-ill--skills .f{width:80px;height:100px;top:20px}
.wc .ws-ill--skills .f:nth-child(1){left:calc(50% - 104px)}
.wc .ws-ill--skills .f:nth-child(2){left:calc(50% - 40px);top:14px}
.wc .ws-ill--skills .f:nth-child(3){left:calc(50% + 24px)}

/* the bottom bar fades out once the application is on screen (it covered the form fields) */
.ws .agd-bar{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .35s}
.ws .agd-bar.is-away{opacity:0;pointer-events:none}
/* C's sidebar film: the play button had landed on the skill card's corner */
.wc-card .ws-shot{padding:18px 88px 18px 22px}
/* C: the results run two across in the narrow column */
.wc .ws-cred .av-ribbon__list{grid-template-columns:1fr 1fr}
.wc .ws-cred .av-ribbon__list b{font-size:28px}
/* the quote's attribution in sentence case, not tiny tracked capitals */
.ws .av-quote figcaption{font:400 14px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#555}
/* no lone last words in the hero subs */
.ws .av-hx__sub,.wc-sub,.wa2__sub,.ws .lead{text-wrap:pretty}
.wb-watch2{max-width:980px;margin:72px auto 0}
.wa2__copy{min-width:0}
/* A's headline holds three lines beside the brief */
@media (min-width:1181px){.wa2{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:64px}}
.wa2 h1{font-size:clamp(40px,3.7vw,54px)}
/* the five company sizes fit one row in the application card */
/* B: no invented counter under the agent window */
.wb .av-hx__count{visibility:hidden}

/* ================= Rev 3 (2026-10-13) ================= */
/* the film's poster is a real frame (Justin beside an agent window); the play button sits in its clear band */
.ws-video__poster{display:block}
.ws-video__poster img{display:block;width:100%;height:100%;object-fit:cover;filter:none}
.ws-video--screen .ws-video__play{left:50%;top:79%;bottom:auto;margin:-38px 0 0 -38px}
.wc-card .ws-video--screen .ws-video__play{left:50%;right:auto;top:79%;bottom:auto;width:44px;height:44px;margin:-22px 0 0 -22px}
.wc-card .ws-video__play svg{width:15px;height:15px;margin-left:3px}
.wc-card .ws-video__play::after{inset:-6px}
@media (max-width:640px){.ws-video--screen .ws-video__play{left:50%;bottom:auto;width:50px;height:50px;margin:-25px 0 0 -25px}}

/* the agenda: two parts, 15 and 75 minutes; the bar keeps the true proportion, the words get room */
.ws-run__bar,.ws-run__scale{grid-template-columns:15fr 75fr}
.ws-run__seg:nth-child(2){background:var(--ws-green-bg)}
.ws-run__parts{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px}
.ws-run__p{position:relative;padding-left:18px}
.ws-run__p::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:999px;background:#c6dbff;border:1px solid #000}
.ws-run__p + .ws-run__p::before{background:var(--ws-green-bg)}
.wc-mod:nth-child(2) .wc-mod__t span{background:var(--ws-green-bg)}
@media (max-width:900px){.ws-run__parts{grid-template-columns:1fr;gap:22px}}

/* B: three meetings deal through the window; the copy column takes the two-sentence headline */
@media (min-width:1181px){.wb .av-hx__title{font-size:clamp(37px,3.05vw,46px)}}

/* C: the label over the headline in sentence case, at a readable size (the slop check) */
.wc-crumb{font:500 14.5px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#555}
/* C: on load the facts and the card settle in, once */
@media (prefers-reduced-motion:no-preference){
  .ws-js .wc-meta li{animation:wa2-in .8s var(--ws-ease) backwards}
  .ws-js .wc-meta li:nth-child(1){animation-delay:.25s}
  .ws-js .wc-meta li:nth-child(2){animation-delay:.33s}
  .ws-js .wc-meta li:nth-child(3){animation-delay:.41s}
  .ws-js .wc-meta li:nth-child(4){animation-delay:.49s}
  .ws-js .wc-side .wc-card{animation:wa2-in 1s var(--ws-ease) .15s backwards}
}

/* the take-homes tell their story as they arrive (only when they arrive below the fold; finished otherwise):
   the agent's three steps tick in order, the skill cards fan out of one stack, and the week starts all yours
   until the agent's jobs turn blue one by one */
.ws-motion [data-ws-rise] .ws-ill--agent .r i{transition:background .45s ease}
.ws-motion [data-ws-rise] .ws-ill--agent .r:nth-child(1) i{transition-delay:.5s}
.ws-motion [data-ws-rise] .ws-ill--agent .r:nth-child(2) i{transition-delay:.85s}
.ws-motion [data-ws-rise] .ws-ill--agent .r:nth-child(3) i{transition-delay:1.2s}
.ws-motion [data-ws-rise] .ws-ill--agent .r.ask em{transition:opacity .5s ease 1.35s,transform .6s var(--ws-ease) 1.35s}
.ws-motion [data-ws-rise]:not(.is-in) .ws-ill--agent .r i{background:#fff}
.ws-motion [data-ws-rise]:not(.is-in) .ws-ill--agent .r.ask em{opacity:0;transform:translateX(-4px)}
.ws-motion [data-ws-rise] .ws-ill--skills .f{transition:transform .9s var(--ws-ease) .45s,left .9s var(--ws-ease) .45s}
.ws-motion [data-ws-rise]:not(.is-in) .ws-ill--skills .f:nth-child(1),.ws-motion [data-ws-rise]:not(.is-in) .ws-ill--skills .f:nth-child(3){left:calc(50% - 46px);transform:none}
.ws-motion .wc [data-ws-rise]:not(.is-in) .ws-ill--skills .f:nth-child(1),.ws-motion .wc [data-ws-rise]:not(.is-in) .ws-ill--skills .f:nth-child(3){left:calc(50% - 40px)}
.ws-motion [data-ws-rise] .ws-ill--week i.ai{transition:background .45s ease;transition-delay:calc(.6s + var(--k) * .16s)}
.ws-motion [data-ws-rise]:not(.is-in) .ws-ill--week i.ai{background:var(--ws-lav-2)}
@media (prefers-reduced-motion:reduce){.ws-ill i,.ws-ill .f,.ws-ill em{transition:none !important}}
/* review: headline options */
.wr__note{margin:12px 0 0;font:400 16px/1.5 "Neue Montreal",system-ui,sans-serif;color:#555}
.wr__h4{margin:28px 0 0;font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif;color:#555}
.wr__heads{margin:10px 0 0;padding:0;list-style:none;border-top:1.5px solid #000}
.wr__heads li{padding:14px 0;border-bottom:1px solid var(--line);font:500 20px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;color:#333}
.wr__heads li.wr__pick{color:#000}
.wr__heads li.wr__pick::after{content:"On the page";margin-left:12px;padding:3px 9px;border-radius:999px;background:var(--ws-lav);color:var(--ws-lav-ink);font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif;vertical-align:3px}
@media (min-width:1181px){.wa2 h1{font-size:clamp(40px,3.5vw,52px)}}
@media (max-width:1180px){.wa2{grid-template-columns:1fr;gap:48px;max-width:640px}}
/* review: one-line items sit on a single row, no second line under a bold title */
.wr__list--short li{grid-template-columns:40px 1fr;align-items:center;padding:14px 0}
.wr__list--short li::before{grid-row:auto;margin-top:0}

/* review: the three concepts read as things to open, a screenshot of each first screen and a real button */
.wr h3.wr__pickh{margin:56px 0 0}
.wr__cards{margin-top:20px;gap:28px}
.wr__card{padding:0;overflow:hidden;transition:border-color .25s,box-shadow .35s var(--ws-ease)}
.wr__shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1.25px solid #000;background:#f7f4e8}
.wr__shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s var(--ws-ease)}
.wr__k{display:flex;align-items:center;gap:10px;min-height:24px}
.wr__tag{padding:5px 10px;border-radius:999px;background:var(--ws-lav-2);border:1px solid #000;font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif;color:#000}
.wr__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.wr__k{font:500 13.5px/1 "Neue Montreal",system-ui,sans-serif;color:#555}
.wr__t{margin-top:8px;font:500 24px/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.wr__d{flex:1;margin-top:8px;font:400 15.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}
.wr__go{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin-top:18px;border:1.25px solid #000;border-radius:999px;background:#fff;font:500 15px/1 "Neue Montreal",system-ui,sans-serif;transition:background .25s}
.wr__go svg{width:16px;height:16px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ws-ease)}
.wr__card--pick .wr__go{background:var(--blue);border-color:var(--blue);color:#fff}
.wr__card--pick .wr__go svg{stroke:#fff}
.wr__card:hover{border-color:var(--ws-violet);box-shadow:6px 6px 0 var(--ws-lav-2)}
.wr__card:hover .wr__shot img{transform:scale(1.02)}
.wr__card:hover .wr__go{background:var(--ws-lav)}
.wr__card--pick:hover .wr__go{background:var(--blue-deep);border-color:var(--blue-deep)}
.wr__card:hover .wr__go svg{transform:translateX(3px)}
.wr__card:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@media (max-width:900px){.wr__cards{grid-template-columns:1fr;max-width:520px}}
@media (prefers-reduced-motion:reduce){.wr__shot img,.wr__go svg{transition:none}}

/* the hero label: the homepage's workshop pill (.hero2__ws in hero.css), matched value for value, so the two read as
   one thing. "Free workshop" tag, the name, then who it's for (WHO in the generator), which drops on narrow phones. */
.ws-pill{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 14px 0 5px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.14);font:400 14.5px/1 "Neue Montreal",system-ui,sans-serif;color:#000;letter-spacing:0;text-transform:none;white-space:nowrap}
.ws-pill__tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#ebe2ff;color:#4a3699;font-weight:500;font-size:13.5px}
.ws-pill b{font-weight:500}
.ws-pill__who{color:#555}
.wc-grid .ws-pill + h1{margin-top:18px}
@media (max-width:640px){
  .ws-pill{font-size:13.5px;gap:8px;padding-right:13px}
}
@media (max-width:440px){
  .ws-pill__who{display:none}
}

/* the film: a video icon in its title bar, and the play button dead centre on the poster with its
   triangle optically centred (the path already sits 1 unit right of the box centre) */
.ws-vid-ic{background:#fff}
.ws-vid-ic svg{fill:none;stroke:#000;stroke-width:1.6;stroke-linejoin:round}
.ws-video--screen .ws-video__play,.wc-card .ws-video--screen .ws-video__play{left:50%;top:50%;right:auto;bottom:auto}
.ws-video__play svg,.wc-card .ws-video__play svg{margin-left:1px}
/* a light wash over the poster so the centred play button reads as the layer on top */
.ws-video__poster::after{content:"";position:absolute;inset:0;background:rgba(253,252,248,.3)}
.ws-video__poster{position:absolute}

/* breathing room (Justin, rev 4): sections open up about a third, to /agents' 160px, and each head
   sits further from what it introduces */
.ws-sec{padding:160px 0}
.wb .av-hx{padding-bottom:136px}
.wa2-hero{padding:72px 0 128px}
.ws-leave,.ws-fit,.ws-hosts,.wb-steps{margin-top:80px}
.ws-run{margin-top:80px}
.ws-need{margin-top:36px}
.ws-learnbox{margin-top:64px}
.wb-watch2{margin-top:96px}
.ws-cred{margin-top:72px}
.ws-cred .av-ribbon__list{margin-top:56px}
.ws-cred .av-quote{margin-top:56px}
.wc-top{padding-top:72px}
.wc-block{margin-top:120px}
.wc-block > h2 + *,.wc-block > p.lead + *{margin-top:32px}
.wc-block > h2 + p.lead{margin-top:14px}
#faq.ws-sec{padding-top:160px}
@media (max-width:1180px){.wb .av-hx{padding-bottom:104px}}
@media (max-width:900px){.ws-sec,#faq.ws-sec{padding:120px 0}.wc-block{margin-top:96px}.ws-leave,.ws-fit,.ws-hosts,.wb-steps,.ws-run{margin-top:56px}.wb-watch2{margin-top:72px}}
@media (max-width:640px){.ws-sec,#faq.ws-sec{padding:96px 0}.wc-block{margin-top:80px}.wa2-hero{padding-bottom:88px}.wb .av-hx{padding-bottom:80px}}
/* C's sidebar poster is small: a slightly smaller button, nudged into the chat box's empty space below the typed line */
.wc-card .ws-video--screen .ws-video__play{top:55%;width:38px;height:38px;margin:-19px 0 0 -19px}
.wc-card .ws-video__play svg{width:13px;height:13px}
.wc-card .ws-video__play::after{inset:-4px}
.wc-block > h2{text-wrap:balance;max-width:640px}

/* the closing band after the FAQ: one line, the facts, one button */
.ws-close{text-align:center}
.ws-close .h-display{margin:0 auto;max-width:900px}
.ws-close__meta{margin:18px 0 0;font:400 16.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:#555}
.ws-close__go{margin-top:30px}
.ws-close__go .btn{height:52px;padding:0 36px}
.ws-close + .ws-sec{border-top:0}

/* more breathing room (Justin, rev 5): another ~20% between sections and between heads and content */
.ws-sec,#faq.ws-sec{padding:192px 0}
.wb .av-hx{padding-bottom:160px}
.wa2-hero{padding-bottom:152px}
.ws-leave,.ws-fit,.ws-hosts,.wb-steps,.ws-run{margin-top:96px}
.ws-need{margin-top:40px}
.ws-learnbox{margin-top:80px}
.wb-watch2{margin-top:112px}
.ws-cred{margin-top:88px}
.ws-cred .av-ribbon__list,.ws-cred .av-quote{margin-top:64px}
.wc-block{margin-top:144px}
.wc-block > h2 + *,.wc-block > p.lead + *{margin-top:40px}
.wc-block > h2 + p.lead{margin-top:16px}
#faq + .ws-close{margin-top:0}
@media (max-width:1180px){.wb .av-hx{padding-bottom:120px}}
@media (max-width:900px){.ws-sec,#faq.ws-sec{padding:136px 0}.wc-block{margin-top:112px}.ws-leave,.ws-fit,.ws-hosts,.wb-steps,.ws-run{margin-top:64px}.wb-watch2{margin-top:80px}}
@media (max-width:640px){.ws-sec,#faq.ws-sec{padding:108px 0}.wc-block{margin-top:92px}.wa2-hero{padding-bottom:100px}.wb .av-hx{padding-bottom:92px}}

/* C's glossary: a small pastel tile per term, the nav's solution chips at the same size and weight */
.wc-gloss li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 16px;align-items:start;padding:18px 0 19px}
.wc-gloss__ic{display:grid;place-items:center;width:34px;height:34px;margin-top:1px;border-radius:10px;border:1px solid rgba(0,0,0,.55);background:var(--c);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.wc-gloss__ic svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wc-gloss li:hover .wc-gloss__ic{transform:rotate(-4deg) scale(1.05)}
@media (prefers-reduced-motion:reduce){.wc-gloss__ic{transition:none}}

/* ================= The application (2026-10-14): one screen, then a thank-you toast ================= */
.wc-dlg{width:min(560px,calc(100vw - 24px))}
.wc-dlg__body{padding:20px 22px 22px;max-height:calc(100vh - 120px);overflow:auto}
.wc-dlg .ws-form{gap:15px}
.wc-dlg .ws-field textarea{min-height:76px}
.wc-dlg__bar span{display:inline-block;margin-top:4px}
.ws-toast{position:fixed;z-index:300;left:50%;bottom:28px;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 32px);padding:14px 12px 14px 16px;background:#fff;border:1.25px solid #000;border-radius:16px;box-shadow:6px 6px 0 var(--ws-ground);transform:translate(-50%,24px);opacity:0;transition:transform .55s var(--ws-ease),opacity .35s ease}
.ws-toast.is-on{transform:translate(-50%,0);opacity:1}
.ws-toast[hidden]{display:none}
.ws-toast__ok{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ws-green-bg);border:1.1px solid #000}
.ws-toast__ok svg{width:16px;height:16px}
.ws-toast p{margin:0;font:400 15.5px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333}
.ws-toast p b{font-weight:500;color:#000}
.ws-toast__x{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;font:400 18px/1 "Neue Montreal",system-ui,sans-serif;color:#000;cursor:pointer}
.ws-toast__x:hover{border-color:#000}
@media (max-width:1100px){.wc .ws-toast{bottom:88px}}
@media (max-width:640px){.ws-toast{bottom:20px;align-items:flex-start}.wc .ws-toast{bottom:84px}.ws-toast p{font-size:15px}}
@media (prefers-reduced-motion:reduce){.ws-toast{transition:none}}

/* company size: a dropdown of ranges (any size welcome), styled like the other fields with a drawn caret */
.ws-field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/12px no-repeat}
.ws-field select:invalid{color:#757575}
.ws-field select option{color:#000}