/* repliai.co v3: everything the home page adds on top of the One Ticket concept
   (css/home.css). Tokens come from home.css (--ot-*). Light sections sit on white
   or the faint lavender #f9f8fe; dark bands reuse .ot-panel. */

/* ---------- the AI agent's mark: never a face, always the sparkle ---------- */
.ot-aiav{position:relative;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#6d5ef0,#a18aff);color:#fff;font-style:normal;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px var(--ot-line)}
.ot-aiav svg{width:55%;height:55%}
.ot-auto .ot-asg .ot-aiav{width:20px;height:20px}
.ot-rh-sent .ot-aiav,.ot-toast .ot-aiav{width:24px;height:24px;box-shadow:none}
.ot-asg-ai small{font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--ot-vtext);background:var(--ot-vchip);border-radius:999px;padding:1px 7px;margin-left:2px}
.ot-auto .ot-asg-ai small,.ot-ptrace .ot-asg-ai small{display:none}
@media (max-width:899px){
  .ot-brep .ot-aiav,.ot-pt-ok .ot-aiav{width:16px;height:16px;box-shadow:none}
  .ot-ptrace .ot-asg .ot-aiav{width:18px;height:18px}
}

/* ---------- How it works: five steps ---------- */
.v3-h2-5{font-size:clamp(44px,4.6vw,68px)}


/* the timeline (5 Oct): five steps down the left, the audit's plan beside them */
.ot-how .ot-panel{padding:96px 0 104px}
.v3-tl{position:relative;max-width:1280px;margin:56px auto 0;padding:0 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:56px;align-items:start}
.v3-tl-steps{list-style:none}
.v3-tl-steps li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:18px;padding-bottom:28px}
.v3-tl-steps li:last-child{padding-bottom:0}
.v3-tl-steps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;border-radius:2px;background:#2e3342}
.v3-tl-n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#6d5ef0;color:#fff;font-size:15px;font-weight:800}
.v3-tl-on .v3-tl-n{box-shadow:0 0 0 5px rgba(143,123,255,.25)}
.v3-tl-w{margin-top:2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a18aff}
.v3-tl-steps h3{margin-top:4px;font-size:21px;font-weight:800;letter-spacing:-.01em;color:#fff}
.v3-tl-steps li p:not(.v3-tl-w){margin-top:6px;max-width:560px;font-size:15.5px;line-height:1.6;color:#b9bccb}
.v3-tl-fig{margin:0}
.v3-tl-ph{margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8f93a3}
.v3-tl-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:18px;background:#fbfbfd}
.v3-tl-body .ot-carry{margin-top:0;align-self:start}
.v3-tl-body .v3-aplan{display:grid;align-content:start}
@media (max-width:1100px){
  .v3-tl{grid-template-columns:minmax(0,1fr);gap:40px}
  .v3-tl-fig{max-width:640px}
}
@media (max-width:899px){
  .ot-how .ot-panel{padding:64px 0 72px}
  .v3-tl{margin-top:36px;padding:0 16px;gap:32px}
  .v3-tl-steps li{grid-template-columns:34px minmax(0,1fr);gap:14px;padding-bottom:22px}
  .v3-tl-steps li:not(:last-child)::before{left:16px;top:38px}
  .v3-tl-n{width:34px;height:34px;font-size:14px}
  .v3-tl-steps h3{font-size:19px}
  .v3-tl-steps li p:not(.v3-tl-w){font-size:15px}
  .v3-tl-body{grid-template-columns:minmax(0,1fr);padding:14px}
}

/* step 2: the plan rail */
.v3-aplan{gap:8px}
.v3-ap-h{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ot-muted);margin-bottom:2px}
.v3-aplan ul{list-style:none;display:grid;gap:8px}
.v3-aplan li{background:#fff;border:1px solid var(--ot-line);border-radius:10px;padding:9px 11px;display:grid;gap:5px;transition:opacity .35s calc(var(--i) * 90ms),transform .35s calc(var(--i) * 90ms)}
.v3-aplan li b{font-size:13px;color:var(--ot-ink)}
.v3-ap-ai,.v3-ap-team{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600}
.v3-ap-ai{color:var(--ot-vtext)}
.v3-ap-ai .ot-aiav{width:16px;height:16px;box-shadow:none}
.v3-ap-team{color:var(--ot-am)}
.v3-ap-team svg{width:14px;height:14px}
.ot-pre .v3-aplan li{opacity:0;transform:translateX(10px)}

/* step 4: exam and training */

/* =====================================================================
   SHARED SECTION FRAME
   ===================================================================== */
.v3-sec{padding:96px 0}
.v3-wrap{max-width:1280px;margin:0 auto;padding:0 64px}
.v3-head{max-width:860px}
.v3-head-c{margin:0 auto;text-align:center}
.v3-head-c .ot-h2{margin-left:auto;margin-right:auto}
.v3-lede{margin-top:22px;font-size:20px;line-height:1.6;color:var(--ot-body);max-width:680px}
.v3-head-c .v3-lede{margin-left:auto;margin-right:auto}
.v3-small{margin-top:22px;font-size:14px;line-height:1.55;color:var(--ot-muted);max-width:520px}

/* ---------- 2 the problem ---------- */
.v3-problem{background:var(--ot-tint);border-top:1px solid var(--ot-soft)}
.v3-pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:64px}
.v3-pain h3{margin-top:24px;font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.015em;color:var(--ot-ink)}
.v3-pain>p{margin-top:12px;font-size:17px;line-height:1.6;color:var(--ot-body)}
.v3-mini{height:190px;border:1px solid var(--ot-line);border-radius:18px;background:#fcfcfe;padding:18px 20px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.v3-lede-2{margin-top:14px}
.v3-problem .v3-mini{height:auto;min-height:252px}
.v3-lede b{color:var(--ot-ink)}
/* a job done by hand, step by step: ticked steps, one still to do */
.v3-steps{list-style:none;display:grid;gap:7px}
.v3-steps li{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ot-ink);background:#fff;border:1px solid var(--ot-line);border-radius:10px;padding:7px 10px}
.v3-steps img{width:16px;height:16px;flex:none}
.v3-steps li::after{content:"";margin-left:auto;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ot-line);flex:none}
.v3-steps li.v3-done::after{border-color:var(--ot-g2);background:var(--ot-g2) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M2.6 6.3 5 8.6 9.6 3.6%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/10px no-repeat}
.v3-note-t{font-size:12px;font-weight:700;color:var(--ot-muted);margin-bottom:10px}
.v3-note{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--ot-line);border-radius:12px;padding:10px 12px;box-shadow:0 10px 22px -18px rgba(26,29,38,.4)}
.v3-note+.v3-note{margin-top:8px}
.v3-note img{width:18px;height:18px;margin-top:1px}
.v3-note p{min-width:0;line-height:1.35}
.v3-note b{display:block;font-size:13px;color:var(--ot-ink)}
.v3-note span{display:block;font-size:12px;color:var(--ot-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-mini-q{gap:10px;align-items:flex-start}
.v3-q{font-size:13.5px;font-weight:600;color:var(--ot-ink);background:#fff;border:1px solid var(--ot-line);border-radius:14px 14px 14px 4px;padding:8px 13px}
.v3-q2{margin-left:28px;color:var(--ot-vtext);border-color:#ddd6fb;background:var(--ot-vchip)}
.v3-q3{margin-left:10px}
.v3-kicker{margin-top:56px;padding-top:28px;border-top:1px solid var(--ot-line);font-size:18px;line-height:1.6;color:var(--ot-body);max-width:900px}
.v3-kicker b{color:var(--ot-ink)}
.v3-kicker a{color:var(--ot-vtext);font-weight:700;margin-left:4px;white-space:nowrap}

/* ---------- 3 what you get ---------- */
.v3-system{background:var(--ot-tint)}
.v3-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:64px}
.v3-part{background:#fff;border:1px solid var(--ot-line);border-radius:24px;padding:28px 28px 32px;box-shadow:0 30px 60px -44px rgba(26,29,38,.35)}
.v3-part-hot{border:1.5px solid #cfc6ff}
.v3-pnum{margin-top:24px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ot-vtext)}
.v3-part h3{margin-top:8px;font-size:26px;line-height:1.18;font-weight:700;letter-spacing:-.02em;color:var(--ot-ink)}
.v3-part>p:last-child{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--ot-body)}
.v3-part a{color:var(--ot-vtext);font-weight:700}
.v3-pv{height:224px;border-radius:16px;background:#fafbfc;border:1px solid #edeef2;padding:16px;overflow:hidden}
.v3-pv-chs{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.v3-pv-chs img{width:22px;height:22px;background:#fff;border-radius:7px;padding:3px;box-shadow:0 0 0 1px var(--ot-line)}
.v3-lc{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ot-g);background:var(--ot-gbg);border-radius:999px;padding:3px 9px}
.v3-pv ul{list-style:none;display:grid;gap:7px}
.v3-pv-inbox li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ot-line);border-radius:10px;padding:8px 10px}
.v3-pv-inbox li p{flex:1;min-width:0;line-height:1.3}
.v3-pv-inbox li b{display:block;font-size:12.5px;color:var(--ot-ink)}
.v3-pv-inbox li p span{display:block;font-size:12px;color:var(--ot-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-shopchip{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:11px;font-weight:700;color:var(--ot-g);background:var(--ot-gbg);border-radius:999px;padding:2px 8px;white-space:nowrap}
.v3-shopchip img{width:11px;height:11px}
.v3-pv-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.v3-pv-h b{font-size:14px;color:var(--ot-ink)}
.v3-pv-h span{font-size:12px;color:var(--ot-muted)}
.v3-pv-acts li{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--ot-line);border-radius:10px;padding:8px 10px;font-size:12.5px;color:var(--ot-body)}
.v3-pv-acts li img{width:14px;height:14px}
.v3-pv-acts li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-ok,.v3-wait{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.v3-ok{color:var(--ot-g);background:var(--ot-gbg)}
.v3-wait{color:var(--ot-am);background:var(--ot-ambg)}
.v3-wait svg{width:11px;height:11px}
/* card 04, the AI Integration Lead: a person, so an amber person mark (as for every human on the page) */
.v3-pv-who{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ot-ambg);color:var(--ot-am);flex:none}
.v3-pv-who svg{width:14px;height:14px}
.v3-pv-lead li>svg{width:14px;height:14px;color:var(--ot-v);flex:none}
.v3-cpic{width:18px;height:18px;color:var(--ot-v)}
.v3-cp-t{background:#fff;border:1px solid #e4defd;border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.55;color:var(--ot-body)}
.v3-cp-next{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;background:#fcf6ea;border:1px solid #f3e2bf;border-radius:12px;padding:9px 12px;font-size:12.5px;color:var(--ot-ink)}
.v3-cp-next b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ot-am)}
.v3-cp-next em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--ot-muted)}
/* the name only, in plain text: no lookalike of Anthropic's mark */


/* ---------- 5 run it from Claude ---------- */
.v3-claude{background:#fff}

/* ---------- 7 AI CX Specialist ---------- */
.v3-spec{background:var(--ot-tint)}
.v3-spec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:72px;align-items:center}
.v3-spec-l{list-style:none;margin-top:30px;display:grid;gap:14px;max-width:620px}
.v3-spec-l li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font-size:17px;line-height:1.55;color:var(--ot-body)}
.v3-spec-l svg{width:20px;height:20px;margin-top:3px;color:var(--ot-g);background:var(--ot-gbg);border-radius:50%;padding:3px}
.v3-spec-l b{color:var(--ot-ink)}
.v3-ladder{margin:0;background:#fff;border:1px solid var(--ot-line);border-radius:24px;padding:26px 26px 22px;box-shadow:0 30px 60px -44px rgba(26,29,38,.35)}
.v3-ld-h{font-size:13px;font-weight:700;color:var(--ot-muted);margin-bottom:16px}
.v3-ladder ol{list-style:none;display:grid;gap:10px}
.v3-ladder li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px;border-radius:14px;border:1px dashed #d9d5ea;transition:opacity .4s calc(var(--i) * 220ms),transform .4s calc(var(--i) * 220ms)}
.v3-ladder li.v3-ld-on{border-style:solid;border-color:var(--ot-line);background:#fcfcfe}
.v3-ld-m{font-size:12.5px;font-weight:800;color:var(--ot-ink)}
.v3-ladder li:not(.v3-ld-on) .v3-ld-m{color:var(--ot-muted)}
.v3-ladder p{display:flex;flex-wrap:wrap;gap:6px}
.v3-ladder em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ot-vtext);background:var(--ot-vchip);border-radius:999px;padding:3px 10px}
.v3-ladder em.v3-ld-next{color:var(--ot-muted);background:#f3f4f7}
.v3-ladder.v3-pre li{opacity:0;transform:translateY(10px);transition:none}
.v3-ladder .ot-figcap{margin-top:14px}

/* ---------- 3 Meet Chloe (the concept's why layout, no diagram) ---------- */
.v3-chloe{padding:96px 0 104px;background:#fff;border-top:1px solid var(--ot-soft)}
/* the CX Blueprint, under Chloe's bio */
.v3-bp{margin-top:32px;padding-top:28px;border-top:1px solid var(--ot-line);max-width:640px}
.v3-bp h3{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ot-ink)}
.v3-bp>p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--ot-body)}
.v3-bp ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin-top:16px}
.v3-bp li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.45;color:var(--ot-ink)}
.v3-bp li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--ot-warm)}
.v3-bp .v3-bp-end{margin-top:20px}
.v3-bp .v3-bp-end b{color:var(--ot-ink)}
@media (max-width:899px){.v3-bp{margin-top:28px;padding-top:0;border-top:0}.v3-bp ul{grid-template-columns:minmax(0,1fr)}}
/* the text runs longer than the photo: the photo and its spine stay in view beside it */
.v3-chloe{overflow:clip}
@media (min-width:900px){.v3-chloe .ot-photo,.v3-chloe .ot-spine{position:sticky;top:104px}}

/* ---------- 5 meet your AI team: the six agents in Repli staging, as the app draws them ---------- */
.v3-team{background:var(--ot-tint)}
.tm-grid{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:56px}
.tm-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid var(--ot-line);border-radius:22px;padding:12px 12px 20px;box-shadow:0 24px 50px -40px rgba(26,29,38,.4)}
.tm-tile{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;aspect-ratio:1/.86;border-radius:16px;background:var(--tmt);overflow:hidden}
.tm-fig{width:auto;height:84%;image-rendering:pixelated}
.tm-prop{position:absolute;bottom:0;right:8%;height:42%;width:auto;image-rendering:pixelated}
.tm-prop.tm-left{right:auto;left:6%}
.tm-prop.tm-short{height:20%}
.tm-card h3{margin-top:14px;font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--ot-ink)}
.tm-chip{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--tmc);background:var(--tmt);border-radius:999px;padding:4px 11px}
.tm-card p{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ot-body)}
@media (max-width:1180px){.tm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.tm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}.tm-card{padding:10px 10px 16px}.tm-card h3{font-size:18px}.tm-card p{font-size:13.5px}}

/* ---------- 9 how pricing works: five parts, each with how it's charged ---------- */
.v3-price{background:#fff}
.pz-list{list-style:none;margin-top:48px;border-top:1px solid var(--ot-line)}
.pz-list li{display:grid;grid-template-columns:44px minmax(0,1fr) 230px;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--ot-line)}
.pz-n{width:32px;height:32px;border-radius:50%;background:var(--ot-night);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800}
.pz-list h3{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ot-ink)}
.pz-list p{margin-top:4px;font-size:16px;line-height:1.55;color:var(--ot-body);max-width:640px}
.pz-p{justify-self:end;text-align:right;font-size:15px;font-weight:700;color:var(--ot-ink)}
.pz-p.pz-free{color:var(--ot-g)}
.pz-p a{color:var(--ot-vtext)}
.pz-end{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.pz-end p{font-size:18px;color:var(--ot-ink)}
.pz-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.pz-ctas .r-btn{height:52px;padding:0 24px;font-size:16px;font-weight:700;border-radius:12px}
.pz-link{font-weight:700;color:var(--ot-vtext);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
@media (max-width:899px){
  .pz-list{margin-top:32px}
  .pz-list li{grid-template-columns:32px minmax(0,1fr);gap:4px 14px;align-items:start;padding:18px 0}
  .pz-p{grid-column:2;justify-self:start;text-align:left;margin-top:6px}
  .pz-list h3{font-size:18px}
  .pz-list p{font-size:15px}
}

/* ---------- 10 close: a longer line under the headline */
.ot-close>p{max-width:640px;margin-left:auto;margin-right:auto}

/* ---------- 4 the Repli difference: understand, build, improve ---------- */
.v3-diff{background:#fff}
.v3-trio{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px}
.v3-trio li{border-top:2px solid var(--ot-ink);padding-top:20px}
.v3-trio-n{display:block;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--ot-warm-text)}
.v3-trio h3{margin-top:8px;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--ot-ink)}
.v3-trio p{margin-top:10px;font-size:17px;line-height:1.6;color:var(--ot-body)}
@media (max-width:899px){.v3-trio{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:36px}.v3-trio h3{font-size:22px}}

/* ---------- ink sections (26 Oct): the dark beats in the page's rhythm (Meet Chloe, Claude) ----------
   The text colours flip by redefining the palette for the section; the light product screens and
   the photo inside it get the light palette back. */
.v3-ink{background:var(--ot-night);border-top:0;color:#c9ccd8;
  --ot-ink:#fff;--ot-body:#c9ccd8;--ot-muted:#a3a8b8;--ot-faint:#7d8294;--ot-line:#2e3342;--ot-soft:#262a35}
.v3-ink .ot-shim{background:none;color:var(--ot-warm-on-dark)}
.v3-ink :is(.ot-photo,.rm-chat,.rm-app,.r-btn){
  --ot-ink:#1a1d26;--ot-body:#363b47;--ot-muted:#5f6475;--ot-faint:#8d92a0;--ot-line:#e6e8ee;--ot-soft:#eef0f4}

/* ---------- 10 questions ---------- */
.v3-qa{background:var(--ot-tint)}
.v3-qa-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:56px}
.v3-qcol h3{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ot-vtext);padding-bottom:12px;border-bottom:1px solid var(--ot-line)}
.v3-qcol details{border-bottom:1px solid var(--ot-line)}
.v3-qcol summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 0;font-size:16.5px;font-weight:700;line-height:1.4;color:var(--ot-ink)}
.v3-qcol summary::-webkit-details-marker{display:none}
.v3-qcol summary::after{content:"+";flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:600;color:var(--ot-vtext);background:var(--ot-vchip);transition:transform .2s}
.v3-qcol details[open] summary::after{transform:rotate(45deg)}
.v3-qcol details p{padding:0 0 18px;font-size:15.5px;line-height:1.65;color:var(--ot-body)}

/* ---------- 11 close ---------- */
.v3-end{background:#fff;padding:0 0 16px}
.v3-end .ot-panel{padding:40px 0 128px}
.v3-end .ot-close{margin-top:80px}

/* =====================================================================
   NARROWER DESKTOPS AND PHONES
   ===================================================================== */
@media (max-width:1180px){
  .v3-wrap{padding:0 40px}
  .v3-spec-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .v3-ladder{max-width:640px}
}
@media (max-width:899px){
  .v3-sec{padding:64px 0}
  .v3-wrap{padding:0 20px}
  .v3-lede{font-size:17.5px}
  .v3-pains{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:40px}
  .v3-parts{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:40px}
  .v3-part{padding:18px 18px 24px;border-radius:20px}
  .v3-part h3{font-size:22px}
  .v3-pv{height:auto;min-height:190px}
  .v3-qa-g{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:36px}
  .v3-ladder li{grid-template-columns:minmax(0,1fr);gap:8px}
  .v3-chloe{padding:64px 0 72px}
  .v3-end .ot-panel{padding:24px 0 72px}
    }
@media (prefers-reduced-motion:reduce){
  .v3-ladder li,.v3-aplan li{transition:none}
}

/* =====================================================================
   3b THE WAREHOUSE: 3PL / in-house link, with the grab-arm animation.
   Default styles are the finished state (no JS, reduced motion); .wh-anim
   (added by js/warehouse.js) starts everything hidden and the script reveals it.
   Everything in the drawing is laid out in % of .wh-world (760 x 320 units).
   ===================================================================== */
.v3-wh{background:#fff;border-top:1px solid var(--ot-soft)}
.wh-stage{position:relative;display:grid;grid-template-columns:380px minmax(0,1fr);gap:44px;align-items:center;margin-top:56px}

/* ---- the ticket ---- */
.wh-chat{position:relative;z-index:2;background:#fff;border:1px solid var(--ot-line);border-radius:20px;padding:18px 18px 16px;box-shadow:var(--ot-card-shadow);transition:opacity .5s}
.wh-chat.out{opacity:0}
.wh-ch{display:flex;align-items:center;gap:10px}
.wh-ch p{flex:1;min-width:0;line-height:1.3}
.wh-ch b{display:block;font-size:14px;color:var(--ot-ink)}
.wh-ch p span{display:block;font-size:12px;color:var(--ot-muted)}
.wh-pill{font-size:11px;font-weight:700;color:var(--ot-g);background:var(--ot-gbg);border-radius:999px;padding:3px 10px;transition:opacity .3s}
.wh-msg{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ot-body);background:#f7f8fa;border-radius:12px;padding:10px 12px;transition:opacity .4s,transform .4s}
.wh-rows{list-style:none;margin-top:12px;border-top:1px dashed #e4e6ec;padding-top:6px}
.wh-rows li{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;color:var(--ot-body);transition:opacity .3s}
.wh-rows li>span:nth-child(2){flex:1;min-width:0}
.wh-rows li b{color:var(--ot-ink)}
.wh-rows li.wh-live b{color:var(--ot-vtext)}
.wh-rows li>svg{width:14px;height:14px;color:var(--ot-g);transition:opacity .25s}
.wh-ri{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:#f3f4f7}
.wh-ri img{width:13px;height:13px}
.wh-ri-w{position:relative;background:var(--ot-vchip);color:var(--ot-v)}
.wh-ri-w svg{width:14px;height:14px}
.wh-live .wh-ri-w::after{content:"";position:absolute;right:-2px;top:-2px;width:7px;height:7px;border-radius:50%;background:var(--ot-g2);box-shadow:0 0 0 2px #fff}
.wh-remy{margin-top:10px;border:1px solid #e4defd;border-radius:14px;padding:11px 12px 10px;background:#fcfbff;transition:opacity .4s,transform .4s}
.wh-rh{display:flex;align-items:center;gap:7px;font-size:12px}
.wh-rh b{font-size:13px;color:var(--ot-ink)}
.wh-hs{display:grid;flex:1;min-width:0}
.wh-hs em{grid-area:1/1;font-style:normal;color:var(--ot-vtext);font-weight:600;opacity:0;transition:opacity .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-hs em.on{opacity:1}
.wh-reply{position:relative;margin-top:8px;font-size:13.5px;line-height:21px;color:var(--ot-body)}
.wh-reply::before{content:"";position:absolute;left:0;right:12%;top:6px;bottom:6px;border-radius:6px;background:repeating-linear-gradient(to bottom,#efebfd 0 9px,transparent 9px 21px);opacity:0;transition:opacity .3s}
.wh-reply.pre::before{opacity:1;animation:wh-sk 1.4s ease-in-out infinite}
@keyframes wh-sk{50%{opacity:.5}}
.wh-c{opacity:0}
.wh-c.v{opacity:1}
.wh-done{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid #ece8fd;font-size:11.5px;font-weight:700;color:var(--ot-g);transition:opacity .3s}
.wh-done svg{width:13px;height:13px}
.wh-anim .wh-msg:not(.on){opacity:0;transform:translateY(6px)}
.wh-anim .wh-rows li{opacity:.28}
.wh-anim .wh-rows li>svg{opacity:0}
.wh-anim .wh-rows li.on{opacity:1}
.wh-anim .wh-rows li.on>svg{opacity:1}
.wh-anim .wh-remy:not(.on){opacity:0;transform:translateY(6px)}
.wh-anim .wh-chat:not(.done) .wh-done,.wh-anim .wh-chat:not(.done) .wh-pill{opacity:0}

/* ---- the wire from the ticket's warehouse row to the warehouse (side by side only) ---- */
.wh-wire{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3;display:none}
.wh-wire path{fill:none;stroke:var(--ot-v2);stroke-width:1.6;stroke-dasharray:var(--len,600);stroke-dashoffset:var(--off,0);stroke-linecap:round;transition:opacity .4s}
.wh-wire.out path{opacity:0}

/* ---- the warehouse ---- */
.wh-scene{position:relative;margin:0 0 30px;aspect-ratio:760/320}
.wh-scene .ot-figcap{position:absolute;left:0;top:calc(100% + 6px);margin:0;white-space:nowrap}
.wh-world{position:absolute;left:0;top:0;width:100%;height:100%;container-type:inline-size}
.wh-art{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.wh-art path,.wh-art rect,.wh-art circle{fill:none;stroke:#a796ff;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wh-art .wh-fill{fill:#faf8ff;stroke:none}
.wh-art .wh-floor{fill:#f2effd;stroke:none}
.wh-art .wh-ground{stroke:#d8d2f5;stroke-width:1.4}
.wh-art .wh-thin{stroke-width:1.1;stroke:#c3b7ff}
.wh-art .wh-lamps path:not(.wh-thin):not(.wh-glow){fill:#fff}
.wh-art .wh-glow{fill:#f6f1ff;stroke:none;opacity:.9}
.wh-art .wh-door{fill:#efeafd;stroke:#c3b7ff;transform-box:fill-box;transform-origin:50% 0;transform:scaleY(.05);transition:transform .7s cubic-bezier(.5,0,.3,1)}
.wh-art .wh-door.shut{transform:scaleY(1)}
.wh-art .wh-rack rect:not(:first-child){fill:#f7f0e2;stroke:#d9c8a4}
.wh-art .wh-scan path{stroke:#9d8bff;stroke-width:2.2}
.wh-art .wh-scanlight{fill:#e6e1fb;stroke:none;transition:fill .15s}
.wh-art .wh-scanlight.flash{fill:#4fc18f}
.wh-art .wh-belt circle{fill:#fff}
.wh-art .wh-bm{stroke:#9d8bff;stroke-width:2.2;stroke-dasharray:10 8}
.wh-art .wh-spoke{stroke-width:1.1;stroke:#c3b7ff;transform-box:fill-box;transform-origin:50% 50%}
.wh-run .wh-belt .wh-spoke{animation:wh-spin .9s linear infinite}
@keyframes wh-spin{to{transform:rotate(360deg)}}
.wh-art .wh-beam{stroke:#9d8bff;stroke-width:2.6}
.wh-art .wh-shelf{stroke:#8f7bff;stroke-width:2.6}
.wh-art .wh-prn{fill:#fff;stroke:#9d8bff}
.wh-art .wh-paper{fill:#fff;stroke:#c3b7ff;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.wh-print .wh-art .wh-paper{animation:wh-print .9s ease-out forwards}
@keyframes wh-print{0%{transform:scaleY(0)}70%{transform:scaleY(1.15)}100%{transform:scaleY(1)}}
.wh-art .wh-link{stroke:#c9bfff;stroke-dasharray:3 5}
.wh-art .wh-truck rect,.wh-art .wh-truck path:not(.wh-thin):not(.wh-spoke),.wh-art .wh-truck circle{fill:#fff}
.wh-art .wh-puffs circle{fill:#f1eefc;stroke:#d8d2f5;opacity:0}
.wh-art .wh-puff .wh-puffs circle{animation:wh-puff 1.1s ease-out forwards}
.wh-art .wh-puff .wh-puffs circle:nth-child(2){animation-delay:.15s}
.wh-art .wh-puff .wh-puffs circle:nth-child(3){animation-delay:.3s}
@keyframes wh-puff{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(-26px,-14px) scale(1.5)}}
.wh-art .wh-wheel .wh-spoke{stroke:#a796ff}
.wh-art .wh-drive .wh-wheel .wh-spoke{animation:wh-spin .45s linear infinite}
.wh-truck{transition:transform 1.3s cubic-bezier(.55,0,.8,.2)}
.wh-truck.gone{transform:translateX(230px)}
.wh-truck.back{transition:transform 1.1s cubic-bezier(.2,.8,.3,1)}

/* parcels */
.wh-p{position:absolute;top:70.3%;width:5%;aspect-ratio:1.15;border:1.5px solid #cdb994;border-radius:3px;background:#f4ead6;box-shadow:0 5px 5px -4px rgba(120,96,50,.35)}
.wh-p::before{content:"";position:absolute;left:44%;top:0;bottom:0;width:12%;background:#e5d2ac}
.wh-p::after{content:"";position:absolute;right:10%;bottom:16%;width:36%;height:26%;border-radius:1px;background:#fff;transition:background .3s,box-shadow .3s}
.wh-t{z-index:4;border-color:#6d5ef0;box-shadow:0 0 0 3px rgba(109,94,240,.2),0 5px 5px -4px rgba(120,96,50,.35);transition:top .45s cubic-bezier(.45,0,.25,1)}
.wh-t.up{top:50.9%}
.wh-t.held{animation:wh-held 1.3s ease-out infinite}
@keyframes wh-held{0%{box-shadow:0 0 0 3px rgba(229,168,59,.5)}100%{box-shadow:0 0 0 14px rgba(229,168,59,0)}}
.wh-t.fresh::after{background:#e6f5ec;box-shadow:0 0 0 1.5px #4fc18f}
.wh-tag{position:absolute;right:calc(100% + 7px);top:50%;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-style:normal;font-size:clamp(8.5px,1.5cqw,11.5px);font-weight:700;border-radius:999px;padding:2px 9px;opacity:0;transform:translateY(-50%) scale(.6);transform-origin:100% 50%;transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.wh-tag.on{opacity:1;transform:translateY(-50%) scale(1)}
.wh-tag.hold{color:var(--ot-am);background:var(--ot-ambg);border:1px solid #f1d9a8}
.wh-tag.ok{color:var(--ot-g);background:var(--ot-gbg);border:1px solid #bfe6cf}
.wh-tag svg{width:11px;height:11px}

/* the grab arm on the overhead rail (rail at 150 units = 46.875%) */
.wh-arm{position:absolute;left:50%;top:46.875%;z-index:5;width:.8%;margin-left:-.4%;height:5.6%;background:#9d8bff;border-radius:0 0 2px 2px;transition:height .45s cubic-bezier(.45,0,.25,1)}
.wh-arm[data-s="ready"]{height:21.2%}
.wh-arm[data-s="low"]{height:23.4%}
.wh-arm[data-s="up"]{height:4%}
.wh-claw{position:absolute;left:50%;bottom:0;width:7cqw;height:1.6cqw;margin-left:-3.5cqw;border:2px solid #8f7bff;border-top-width:3px;border-bottom:0;border-radius:3px 3px 0 0;transition:width .2s,margin-left .2s}
.wh-arm.grip .wh-claw{width:5.6cqw;margin-left:-2.8cqw}

/* chips and labels over the drawing */
.wh-node,.wh-status,.wh-sig,.wh-label,.wh-st{position:absolute;font-size:clamp(8.5px,1.55cqw,12.5px)}
.wh-node{left:1.2%;top:3%;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--ot-line);border-radius:999px;padding:4px 11px 4px 4px;box-shadow:0 8px 18px -14px rgba(26,29,38,.4)}
.wh-node .ot-aiav{width:20px;height:20px;box-shadow:none}
.wh-node b{color:var(--ot-ink)}
.wh-node em{font-style:normal;color:var(--ot-muted)}
.wh-sig{left:35%;top:13.5%;z-index:6;transform:translate(-50%,-50%) scale(.85);white-space:nowrap;font-weight:700;color:#fff;background:var(--ot-v);border-radius:999px;padding:3px 11px;opacity:0;transition:opacity .25s,transform .3s}
.wh-sig.on{opacity:1;transform:translate(-50%,-50%)}
.wh-sig[data-k="2"]{background:#e5a83b}
.wh-sig[data-k="4"]{background:var(--ot-g)}
.wh-dot{position:absolute;left:0;top:0;z-index:6;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--ot-v);box-shadow:0 0 0 5px rgba(109,94,240,.22);opacity:0;pointer-events:none}
.wh-status{right:1.2%;top:3%;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--ot-line);border-radius:999px;padding:5px 12px 5px 10px;white-space:nowrap;box-shadow:0 8px 18px -14px rgba(26,29,38,.4)}
.wh-status i{width:7px;height:7px;border-radius:50%;background:var(--ot-faint)}
.wh-status b{color:var(--ot-ink)}
.wh-status em{font-style:normal;font-weight:600;color:var(--ot-muted)}
.wh-status[data-k="pick"] i{background:var(--ot-v)} .wh-status[data-k="pick"] em{color:var(--ot-vtext)}
.wh-status[data-k="hold"] i{background:#e5a83b} .wh-status[data-k="hold"] em{color:var(--ot-am)}
.wh-status[data-k="ok"] i{background:var(--ot-g2)} .wh-status[data-k="ok"] em{color:var(--ot-g)}
/* the shipping label, printed at the bench */
.wh-label{left:61.5%;top:22%;z-index:5;display:grid;gap:1px;width:max-content;min-width:17cqw;background:#fff;border:1px solid #dcd6f6;border-radius:8px;padding:.9cqw 1.4cqw 1.1cqw;box-shadow:0 18px 30px -18px rgba(26,29,38,.5);line-height:1.35;opacity:0;transform:translateY(8px) rotate(-1.5deg);transition:opacity .3s,transform .4s cubic-bezier(.3,1.4,.5,1)}
.wh-label.on{opacity:1;transform:rotate(-1.5deg)}
.wh-label i{font-style:normal;font-size:.78em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ot-muted)}
.wh-label b{color:var(--ot-ink)}
.wh-label s{color:var(--ot-ink);text-decoration-color:transparent;transition:color .3s,text-decoration-color .3s}
.wh-new{font-weight:700;color:var(--ot-g);clip-path:inset(0 0 100% 0);transition:clip-path .7s steps(6)}
.wh-label.nw s{color:var(--ot-faint);text-decoration-color:#e07b7b}
.wh-label.nw .wh-new{clip-path:inset(0 0 0 0)}
.wh-bc{display:block;height:1.6cqw;margin-top:.5cqw;background:repeating-linear-gradient(90deg,#1a1d26 0 1px,transparent 1px 3px,#1a1d26 3px 5px,transparent 5px 6px,#1a1d26 6px 7px,transparent 7px 10px);opacity:.75}
.wh-st{top:87.6%;transform:translateX(-50%);white-space:nowrap;font-weight:700;color:#9d97b8;background:#fff;border:1px solid #ece9f8;border-radius:999px;padding:1px 9px;transition:color .25s,background .25s,border-color .25s}
.wh-st.on{color:var(--ot-vtext);background:var(--ot-vchip);border-color:#d9d0fd}
@container (max-width:560px){
  .wh-st:not(.on){opacity:0}
  .wh-node em{display:none}
  .wh-sig{left:42%;top:14%}
}

.wh-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:40px;padding-top:28px;border-top:1px solid var(--ot-line)}
.wh-pts b{display:block;font-size:17px;color:var(--ot-ink)}
.wh-pts p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--ot-body)}
.wh-foot{max-width:none;margin-top:28px}
@media (min-width:1181px){ .wh-wire{display:block} }
@media (max-width:1180px){
  .wh-stage{grid-template-columns:minmax(0,1fr);max-width:760px;gap:24px}
  .wh-scene{order:-1}
  .wh-chat{max-width:520px}
}
/* phones: zoom in on the action (picking to the truck), dropping the empty left end */
@media (max-width:600px){
  .wh-scene{aspect-ratio:610/320;margin:0 -20px 30px}
  .wh-scene .ot-figcap{left:20px;right:20px;white-space:normal}
  .wh-world{width:124.6%;left:-24.6%;clip-path:inset(-40px -40px -40px 19.74%)}
  .wh-node{left:21.2%}
}
@media (max-width:899px){
  .wh-stage{margin-top:36px}
  .wh-chat{padding:14px}
  .wh-pts{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (prefers-reduced-motion:reduce){
  .wh-t,.wh-tag,.wh-truck,.wh-label,.wh-new,.wh-chat,.wh-arm,.wh-art .wh-door{transition:none}
  .wh-t.held,.wh-run .wh-belt .wh-spoke{animation:none}
}

/* ---- the warehouse at night (Tom's pick, 3 Oct): the drawing carries its own colours inline;
   these cover the parts the script animates and the chips that sit on the dark ---- */
.wh-th-night .wh-scene{background:#161a2b;border-radius:18px}
.wh-th-night .wh-art .wh-door{fill:#2c3352;stroke:#4b5378}
.wh-th-night .wh-art .wh-scanlight:not(.flash){fill:#3a4060}
.wh-th-night .wh-art .wh-link{stroke:#5d6699}
.wh-th-night .wh-art .wh-paper{fill:#fff7e0;stroke:#ffd98a}
.wh-th-night .wh-art .wh-puffs circle{fill:#3a4060;stroke:#4b5378}
.wh-th-night .wh-st{background:#20253a;color:#8d88b0;border-color:#33394f}
.wh-th-night .wh-st.on{background:#efeafe;color:#5a45d8;border-color:#efeafe}
.wh-th-night .wh-p{box-shadow:0 6px 8px -5px rgba(0,0,0,.6)}
@media (max-width:600px){ .wh-th-night .wh-scene{border-radius:0} }

/* =====================================================================
   3c AI AGENT SKILLS: the gate (Tom's pick, 4 Oct). A dark stage where the request
   travels through a gate per check, then forks to the AI agent or to a person who approves.
   Default styles are the finished state (no JS, reduced motion); js/skills.js steps
   each beat in with the v-m / v-p1 / v-rp / v-press / v-p2 classes.
   ===================================================================== */
.v3-skills{background:var(--ot-tint)}
.sk-dot-a,.sk-dot-p,.sk-dot-x{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.sk-dot-a{background:var(--ot-g2)}
.sk-dot-p{background:#e5a83b}
.sk-dot-x{background:#b8bccb}
.sk-legend{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;padding-top:12px;border-top:1px solid var(--ot-soft);font-size:12.5px;color:var(--ot-muted)}
.sk-legend span{display:inline-flex;align-items:center;gap:7px}
.sk-legend small{margin-left:auto;font-size:12px}
/* the Shopify order card (used by the workshop looks) */
.sk-order{background:#fafbfc;border:1px solid #edeef2;border-radius:16px;padding:14px}
.sk-oh{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ot-muted);margin-bottom:10px}
.sk-oh img{width:14px;height:14px}
.sk-line{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--ot-line);border-radius:12px;padding:8px 10px}
.sk-im{position:relative;flex:none;width:44px;height:44px;border-radius:9px;background:#eef0f4}
.sk-im img{position:absolute;inset:0;width:44px;height:44px;object-fit:contain;transition:opacity .4s}
.sk-line p{min-width:0;line-height:1.35}
.sk-line b{display:grid;font-size:13px;color:var(--ot-ink)}
.sk-line b span{grid-area:1/1;transition:opacity .4s}
.sk-line p>span{font-size:12px;color:var(--ot-muted)}
.sk-sw .sk-im img:first-child,.sk-sw .sk-i1{opacity:0}
.sk-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 2px 9px;border-bottom:1px solid #eeeff3;font-size:12.5px}
.sk-row>span:first-child{color:var(--ot-muted);flex:none}
.sk-v{display:grid;justify-items:end;gap:2px;text-align:right;min-width:0}
.sk-v s{color:var(--ot-ink);text-decoration:none;font-weight:600}
.sk-v b{color:var(--ot-g);font-weight:700}
.sk-row-c .sk-v s{color:var(--ot-faint);font-weight:500;text-decoration:line-through}
.sk-row-3 .sk-v b:not(.sk-v3){display:none}

/* animated: each beat hidden until its moment */
.sk-row b{transition:color .3s}

/* the full list and the checks */
.sk-lists{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px}
.sk-all summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer}
.sk-all summary::-webkit-details-marker{display:none}
.sk-all summary h3{font-size:18px}
.sk-sum-n{font-size:12px;font-weight:800;color:var(--ot-vtext);background:var(--ot-vchip);border-radius:999px;padding:2px 9px}
.sk-all summary::after{content:"+";margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:600;color:var(--ot-vtext);background:var(--ot-vchip);transition:transform .2s}
.sk-all[open] summary::after{transform:rotate(45deg)}
.sk-all:not([open]){padding-bottom:26px}
.sk-all summary:focus-visible{outline:2px solid var(--ot-v);outline-offset:4px;border-radius:8px}
@media (min-width:900px){ .sk-guard ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px} }
.sk-all,.sk-guard{background:#fff;border:1px solid var(--ot-line);border-radius:24px;padding:26px 26px 22px}
.sk-lists h3{font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--ot-ink)}
.sk-lg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12.5px;color:var(--ot-muted)}
.sk-lg span{display:inline-flex;align-items:center;gap:6px}
.sk-groups{columns:3 200px;column-gap:28px;margin-top:18px}
.sk-g{break-inside:avoid;margin-bottom:18px}
.sk-g h4{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ot-vtext);margin-bottom:6px}
.sk-g ul{list-style:none}
.sk-g li{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:14.5px;color:var(--ot-body)}
.sk-g li::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.sk-g li.a::before{background:var(--ot-g2)}
.sk-g li.p::before{background:#e5a83b}
.sk-g li.x::before{background:#b8bccb}
.sk-g li.x{color:var(--ot-muted)}
.sk-guard ol{list-style:none;counter-reset:g;margin-top:14px;display:grid;gap:11px}
.sk-guard li{counter-increment:g;position:relative;padding-left:34px;font-size:14px;line-height:1.5;color:var(--ot-body)}
.sk-guard li::before{content:counter(g);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:var(--ot-vtext);background:var(--ot-vchip)}
.sk-guard li b{color:var(--ot-ink)}
.sk-undo{margin-top:16px;padding-top:14px;border-top:1px solid var(--ot-soft);font-size:13.5px;color:var(--ot-muted)}

@media (max-width:1180px){
  .sk-lists{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:899px){
  .sk-legend small{margin-left:0}
  .sk-all,.sk-guard{padding:20px 18px 16px;border-radius:20px}
  .sk-all:not([open]){padding-bottom:20px}
}

/* ---- 3c the gate: chips, then the dark stage ---- */
.sk-gate{margin-top:48px}
.sk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sk-chips button{position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 5px;border-radius:999px;border:1px solid var(--ot-line);background:#fff;font:inherit;font-size:13.5px;font-weight:600;color:var(--ot-body);cursor:pointer;overflow:hidden;transition:border-color .2s,color .2s,box-shadow .2s}
.sk-chips button:hover{border-color:#d9d0fd}
.sk-chips button>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f3f4f7;color:var(--ot-muted);transition:background .2s,color .2s}
.sk-chips button>span svg{width:15px;height:15px}
.sk-chips button em{margin-left:2px}
.sk-chips button.on{border-color:#c9bfff;color:var(--ot-ink);box-shadow:0 12px 24px -18px rgba(109,94,240,.7)}
.sk-chips button.on>span{background:var(--ot-vchip);color:var(--ot-v)}
.sk-cbar{position:absolute;left:0;right:0;bottom:0;height:2.5px}
.sk-cbar i{display:block;height:100%;background:var(--ot-v);transform-origin:0 50%;transform:scaleX(0)}
.sk-gate .sk-legend{margin-top:14px;border-top:0;padding-top:0}

.sk-gs{position:relative;background:#161a2b;border-radius:28px;padding:26px 30px 26px;color:#c9cbe0;overflow:hidden;
  background-image:radial-gradient(1.2px 1.2px at 8% 12%,rgba(255,255,255,.5) 50%,transparent 60%),radial-gradient(1px 1px at 33% 6%,rgba(255,255,255,.4) 50%,transparent 60%),radial-gradient(1.3px 1.3px at 61% 15%,rgba(255,255,255,.45) 50%,transparent 60%),radial-gradient(1px 1px at 89% 8%,rgba(255,255,255,.4) 50%,transparent 60%),radial-gradient(1.2px 1.2px at 74% 88%,rgba(255,255,255,.3) 50%,transparent 60%),radial-gradient(1px 1px at 18% 92%,rgba(255,255,255,.3) 50%,transparent 60%)}
.sk-gs .ot-aiav{flex:none}
.g-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.g-msg{display:flex;align-items:flex-start;gap:12px;max-width:560px;background:#fff;border-radius:6px 18px 18px 18px;padding:12px 16px 13px;color:var(--ot-ink);font-size:16px;line-height:1.5;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);transition:opacity .35s,transform .35s}
.g-msg b{display:block;font-size:12.5px;color:var(--ot-muted);font-weight:600;margin-bottom:2px}
.g-now{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#c9c2ff;background:rgba(255,255,255,.06);border:1px solid #2e3450;border-radius:999px;padding:7px 14px}
.g-now svg{width:15px;height:15px}
.g-track{position:relative;aspect-ratio:1000/260;margin-top:26px}
.g-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.g-rail{fill:none;stroke:#262c47;stroke-width:6;stroke-linecap:round}
.g-lit{fill:none;stroke:#8f7bff;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(143,123,255,.9))}
.g-lit-up{stroke:#4fc18f;filter:drop-shadow(0 0 6px rgba(79,193,143,.9))}
.g-lit-dn{stroke:#e5a83b;filter:drop-shadow(0 0 6px rgba(229,168,59,.9))}
.g-vline{display:none}
.g-gates{list-style:none;position:absolute;inset:0;z-index:3}
.g-gate{position:absolute;top:50%;margin-top:-25px;display:grid;justify-items:center;text-align:center}
.g-ring{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#1b2034;border:2px solid #343b5c;color:transparent;transition:background .3s,border-color .3s,color .3s,box-shadow .4s}
.g-ring svg{width:20px;height:20px}
.g-ring b{font-size:20px;font-weight:900}
.g-gate>b{margin-top:10px;font-size:13.5px;line-height:1.3;color:#7d82a2;transition:color .3s}
.g-gate small{margin-top:3px;font-size:12px;line-height:1.35;color:#9ea3c0;opacity:0;transition:opacity .4s .1s}
.g-gate.on>b{color:#fff}
.g-gate.on small{opacity:1}
.sk-anim .g-gate.on .g-ring{animation:g-pop .55s cubic-bezier(.3,1.6,.5,1)}
.g-ok.on .g-ring{background:#123526;border-color:#4fc18f;color:#4fc18f;box-shadow:0 0 0 7px rgba(79,193,143,.12),0 0 28px rgba(79,193,143,.45)}
.g-warn.on .g-ring{background:#3a2a10;border-color:#e5a83b;color:#e5a83b;box-shadow:0 0 0 7px rgba(229,168,59,.12),0 0 28px rgba(229,168,59,.45)}
.g-stop.on .g-ring{background:#3a1717;border-color:#e07b7b;color:#ff9a9a;box-shadow:0 0 0 7px rgba(224,123,123,.12),0 0 28px rgba(224,123,123,.45)}
@keyframes g-pop{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.g-token{position:absolute;z-index:2;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(143,123,255,.55),0 0 26px 8px rgba(143,123,255,.65);opacity:0;transition:opacity .3s,box-shadow .3s}
.g-token.show{opacity:1}
.g-token.warn{box-shadow:0 0 0 4px rgba(229,168,59,.6),0 0 26px 8px rgba(229,168,59,.65)}
.v-p1.g-alone .g-token{box-shadow:0 0 0 4px rgba(79,193,143,.6),0 0 26px 8px rgba(79,193,143,.7)}
.g-ends{position:absolute;inset:0;pointer-events:none}
.g-term{position:absolute;right:0;width:22.5%;min-height:34%;padding:12px 14px;border-radius:16px;background:#1b2034;border:1px solid #2c3352;opacity:.4;transition:opacity .4s,border-color .4s,box-shadow .5s,background .4s,transform .4s}
.g-term-a{top:-2%}
.g-term-p{bottom:-2%}
.v-p1.g-alone .g-term-a{opacity:1;background:#14271f;border-color:#4fc18f;box-shadow:0 0 0 1px rgba(79,193,143,.3),0 0 40px -6px rgba(79,193,143,.5);transform:scale(1.03)}
.v-p1.g-person .g-term-p{opacity:1;background:#2a2213;border-color:#e5a83b;box-shadow:0 0 0 1px rgba(229,168,59,.3),0 0 40px -6px rgba(229,168,59,.5);transform:scale(1.03)}
.v-p2.g-person .g-term-p{background:#14271f;border-color:#4fc18f;box-shadow:0 0 0 1px rgba(79,193,143,.3),0 0 40px -6px rgba(79,193,143,.5)}
.g-th{display:flex;align-items:center;gap:9px}
.g-th b{font-size:14.5px;color:#fff}
.g-ti{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#4fc18f;color:#fff;flex:none}
.g-term-p .g-ti{background:#e5a83b}
.g-ti svg{width:13px;height:13px}
.g-th img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #e5a83b;flex:none}
.g-td{margin-top:6px;font-size:12.5px;line-height:1.45;color:#a9adc8}
.g-term em{display:inline-block;margin-top:8px;font-style:normal;font-size:11.5px;font-weight:700;color:#d6f2e3;border:1px solid #2f5c49;border-radius:999px;padding:2px 9px}
.g-ap{margin-top:9px;display:flex}
.g-btn{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:8px;background:#8f7bff;color:#fff;font-size:12.5px;font-weight:700;transition:transform .15s,background .15s}
.v-press .g-btn{transform:scale(.9);background:#6d5ef0}
.g-done{display:none;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#7fe0b3}
.g-done svg{width:13px;height:13px;flex:none}
.v-p2 .g-btn{display:none}
.v-p2 .g-done{display:inline-flex}
.g-bot{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;margin-top:22px;align-items:start}
.g-reply{display:flex;align-items:flex-start;gap:10px;background:#222740;border:1px solid #343b5c;border-radius:6px 18px 18px 18px;padding:12px 15px;color:#e8e9f4;font-size:15px;line-height:1.55;transition:opacity .4s,transform .4s}
.g-order{background:#fff;border-radius:14px;padding:12px 14px;color:var(--ot-ink);transition:opacity .4s,transform .4s}
.g-oh{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ot-muted)}
.g-oh img{width:14px;height:14px}
.g-ch{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;margin-top:8px;font-size:13.5px}
.g-ch span{color:var(--ot-muted)}
.g-ch s{color:var(--ot-faint);text-decoration:line-through}
.g-new{color:var(--ot-g);font-weight:700}
.g-pend{color:var(--ot-am);font-weight:700}
.g-alone .g-pend{display:none}
.g-person:not(.v-p2) .g-new{display:none}
.g-person:not(.v-p2) .g-ch s{text-decoration:none;color:var(--ot-ink)}
.g-person.v-p2 .g-pend{display:none}
/* each beat hidden until the clock reaches it (the static page shows them all) */
.sk-gs:not(.v-m) .g-msg{opacity:0;transform:translateY(8px)}
.sk-gs:not(.v-rp) .g-reply{opacity:0;transform:translateY(8px)}
.sk-gs:not(.v-p1) .g-order{opacity:0;transform:translateY(8px)}
.sk-static .g-alone .g-lit-dn,.sk-static .g-person .g-lit-up{display:none}

/* phones: the gates stack and the token runs down a line; the endings sit side by side below */
@media (max-width:700px){
  .sk-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px 14px;padding:0 20px 4px}
  .sk-chips::-webkit-scrollbar{display:none}
  .sk-chips button{flex:none}
  .sk-gs{padding:18px 16px 18px;border-radius:22px}
  .g-top{flex-direction:column;gap:12px}
  .g-msg{font-size:15px}
  .g-now{order:-1}
  .g-track{aspect-ratio:auto;margin-top:18px}
  .g-svg{display:none}
  .g-vline{display:block;position:absolute;left:23px;top:0;width:4px;height:0;border-radius:2px;background:#262c47}
  .g-vline i{display:block;width:100%;height:100%;border-radius:2px;background:#8f7bff;box-shadow:0 0 8px rgba(143,123,255,.8);transform-origin:50% 0;transform:scaleY(0)}
  .sk-static .g-vline i{transform:scaleY(1)}
  .g-gates{position:relative;inset:auto;display:grid;gap:14px}
  .g-gate{position:relative;left:auto!important;width:auto!important;margin:0!important;top:auto;display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:14px;justify-items:start;align-items:center;text-align:left}
  .g-ring{grid-row:1/3}
  .g-gate>b{margin-top:0;font-size:14px}
  .g-gate small{margin-top:0}
  .g-ends{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .g-term{position:relative;right:auto;top:auto;bottom:auto;width:auto;min-height:0}
  .v-p1.g-alone .g-term-a,.v-p1.g-person .g-term-p{transform:none}
  .g-bot{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
  .g-reply{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .g-msg,.g-reply,.g-order,.g-term,.g-ring,.g-gate small,.g-gate>b,.g-token{transition:none}
}

/* =====================================================================
   4 THE EXAM: the test runner (Tom's pick, 4 Oct). A tile per test case;
   the finished run ships in the HTML, js/exam.js re-plays it on arrival.
   ===================================================================== */
.v3-exam{background:#fff}
.tr-stage{margin-top:48px;background:#fff;border:1px solid var(--ot-line);border-radius:24px;padding:22px 24px 20px;box-shadow:var(--ot-card-shadow)}
.tr-stage .ot-aiav{flex:none}
.tr-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.tr-title{display:flex;align-items:center;gap:10px}
.tr-title b{font-size:15px;color:var(--ot-ink)}
.tr-live{width:9px;height:9px;border-radius:50%;background:var(--ot-g2);box-shadow:0 0 0 4px rgba(79,193,143,.18);animation:tr-pulse 1.4s ease-in-out infinite}
@keyframes tr-pulse{50%{box-shadow:0 0 0 8px rgba(79,193,143,.05)}}
.tr-run{font-style:normal;white-space:nowrap;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ot-vtext);background:var(--ot-vchip);border-radius:999px;padding:3px 10px}
.tr-counts{display:flex;flex-wrap:wrap;gap:8px}
.tr-c{display:inline-flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--ot-muted);background:#f7f8fa;border-radius:10px;padding:6px 12px}
.tr-c b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.tr-cp b{color:var(--ot-g)}
.tr-cf b{color:#d14b4b}
.tr-ct b{color:var(--ot-ink)}
.tr-rows{margin-top:16px;display:grid;gap:8px}
.tr-row{display:grid;grid-template-columns:220px minmax(0,1fr) 270px;gap:18px;align-items:center;padding:11px 14px;border-radius:14px;border:1px solid #f0eff5;transition:border-color .3s,background .3s}
.tr-row.done{border-color:#d3eedf;background:#f8fdfa}
.tr-row.failed{border-color:#f5d2d2;background:#fff8f8}
.tr-name b{display:block;font-size:14px;color:var(--ot-ink)}
.tr-name span{font-size:12px;color:var(--ot-muted)}
.tr-tiles{display:flex;flex-wrap:wrap;gap:2px}
.tr-tiles i{width:6px;height:18px;border-radius:2px;background:#ebe9f3;transition:background .18s}
.tr-tiles i.on{background:#4fc18f}
.tr-tiles i.on.f{background:#e07b7b}
.tr-tiles i.on.rerun{background:#e5a83b;animation:tr-blink .5s ease-in-out infinite}
.tr-tiles i.on.ok{background:#4fc18f;animation:none}
@keyframes tr-blink{50%{opacity:.4}}
.tr-v{display:none;align-items:center;gap:7px;justify-self:end;font-size:12.5px;font-weight:700;border-radius:999px;padding:5px 12px;white-space:nowrap}
.tr-v svg{width:13px;height:13px}
.tr-v b{font-weight:900}
.tr-v-live,.tr-v-pass{color:var(--ot-g);background:var(--ot-gbg)}
.tr-v-person{color:var(--ot-am);background:var(--ot-ambg)}
.tr-v-fail{color:#c23a3a;background:#fdecec}
.tr-row.done .tr-v:not(.tr-v-fail){display:inline-flex;animation:tr-in .4s cubic-bezier(.3,1.5,.5,1)}
.tr-row.failed .tr-v-fail{display:inline-flex;animation:tr-in .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes tr-in{from{transform:scale(.7);opacity:0}}
.tr-fix{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;background:#f7f5ff;border:1px solid #e4defd;border-radius:14px;padding:12px 16px;transition:opacity .35s,transform .35s}
.tr-stage:not(.x-fix) .tr-fix{opacity:0;transform:translateY(8px)}
.tr-fh{display:flex;align-items:center;gap:8px}
.tr-fh b{font-size:14px;color:var(--ot-vtext)}
.tr-fb{grid-column:1;font-size:13.5px;line-height:1.5;color:var(--ot-body)}
.tr-fa{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.tr-fa img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.tr-fw{color:var(--ot-am)}
.tr-fok{display:none;align-items:center;gap:6px;color:var(--ot-g)}
.tr-fok svg{width:14px;height:14px}
.x-appr .tr-fw{display:none}
.x-appr .tr-fok{display:inline-flex}
.tr-fdn{display:none}
.x-fixed .tr-fre{display:none}
.x-fixed .tr-fdn{display:inline}
.tr-foot{display:flex;justify-content:space-between;align-items:center;gap:12px 14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--ot-soft);font-size:13.5px;color:var(--ot-body);transition:opacity .4s}
.tr-stage:not(.x-night) .tr-foot{opacity:0}
.tr-goes{display:inline-flex;align-items:center;gap:7px}
.tr-goes svg{width:15px;height:15px;color:var(--ot-g)}
.tr-goes b{color:var(--ot-ink)}
.tr-night{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#e8e9f4;background:#1a1d26;border-radius:999px;padding:6px 14px}
.tr-night svg{width:13px;height:13px;color:#f4eccb}
.tr-pts{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:32px}
.tr-pts li{position:relative;padding-top:14px;border-top:2px solid #e4defd;font-size:15px;line-height:1.6;color:var(--ot-body)}
.tr-pts b{display:block;color:var(--ot-ink);margin-bottom:4px}
.tr-cap{margin-top:18px;max-width:none}
@media (max-width:1180px){
  .tr-row{grid-template-columns:200px minmax(0,1fr);row-gap:8px}
  .tr-v{grid-column:1/-1;justify-self:start}
  .tr-pts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .tr-stage{margin-top:32px;padding:16px 14px;border-radius:20px}
  .tr-row{grid-template-columns:minmax(0,1fr);padding:10px 12px}
  .tr-tiles i{width:5px;height:15px}
  .tr-fix{grid-template-columns:minmax(0,1fr)}
  .tr-fa{grid-column:1;grid-row:auto}
  .tr-pts{grid-template-columns:minmax(0,1fr);gap:16px}
  .tr-goes{display:block}
  .tr-goes svg{vertical-align:-2px;margin-right:6px}
}
@media (prefers-reduced-motion:reduce){
  .tr-live,.tr-tiles i.on.rerun{animation:none}
  .tr-row.done .tr-v,.tr-row.failed .tr-v-fail{animation:none}
}

/* =====================================================================
   5 RUN IT FROM CLAUDE: the remote control (Tom's pick, 4 Oct). The chat
   on the left drives a live mini Repli on the right. "Claude" is written
   as plain text only: no lookalike logo, no copy of Claude's own app.
   ===================================================================== */
.rm-stage{position:relative;display:grid;grid-template-columns:360px 70px minmax(0,1fr);align-items:center;margin-top:48px}
.rm-stage .ot-aiav{flex:none}
.rm-chat{background:#faf9f7;border:1px solid #eceae4;border-radius:20px;height:500px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 60px -40px rgba(26,29,38,.4)}
.rm-bar{height:52px;flex:none;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid #eceae4;background:#fff}
.rm-bar b{font-size:14.5px;color:var(--ot-ink)}
.rm-conn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:11px;font-weight:700;color:var(--ot-g);background:var(--ot-gbg);border-radius:999px;padding:3px 9px}
/* the newest message always sits at the bottom, like any chat */
.rm-feed{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.rm-in{display:flex;flex-direction:column;gap:9px}
.cx-you{align-self:flex-end;max-width:84%;background:#efeee9;border-radius:16px 16px 4px 16px;padding:9px 13px;font-size:14px;line-height:1.45;color:var(--ot-ink)}
.cx-cl{align-self:flex-start;max-width:94%;font-size:14px;line-height:1.5;color:var(--ot-body)}
.cx-cl b{color:var(--ot-ink)}
.cx-tool{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ot-muted);background:#fff;border:1px solid #ecebe5;border-radius:8px;padding:4px 9px}
.cx-tool img{width:13px;height:13px}
.cx-tool svg{width:12px;height:12px;color:var(--ot-g)}
.cx-spin{width:11px;height:11px;border-radius:50%;border:2px solid #d9d0fd;border-top-color:var(--ot-v);animation:cx-spin .7s linear infinite}
@keyframes cx-spin{to{transform:rotate(360deg)}}
.cx-tl.done .cx-spin{display:none}
.cx-tl:not(.done) .cx-tool svg{display:none}
.cx-cards{display:grid;gap:7px;margin-top:7px}
.cx-card{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #ecebe5;border-radius:12px;padding:8px 10px}
.cx-card p{min-width:0;line-height:1.3}
.cx-card b{display:block;font-size:13px;color:var(--ot-ink)}
.cx-card p span{display:block;font-size:12px;color:var(--ot-body)}
.cx-btn{margin-left:auto;flex:none;font-size:11.5px;font-weight:700;color:#fff;background:var(--ot-v);border-radius:8px;padding:5px 10px;transition:transform .15s,background .15s;white-space:nowrap}
.cx-btn-g{background:#fff;color:var(--ot-body);border:1px solid var(--ot-line)}
.x-tap .cx-card:first-child .cx-btn{transform:scale(.9);background:#4a3bc9}
.cx-dots{display:none;align-self:flex-start;gap:4px;padding:6px 2px}
.cx-dots i{width:6px;height:6px;border-radius:50%;background:#b8b4cc;animation:cx-dot 1s ease-in-out infinite}
.cx-dots i:nth-child(2){animation-delay:.15s}.cx-dots i:nth-child(3){animation-delay:.3s}
@keyframes cx-dot{50%{transform:translateY(-3px);opacity:.5}}
.x-typing .cx-dots{display:inline-flex}
/* animated: messages join the chat as the morning plays */
.rm-anim .cx-m:not(.on){display:none}
.rm-anim .cx-m.on{animation:cx-in .35s ease-out}
@keyframes cx-in{from{opacity:0;transform:translateY(8px)}}
.rm-beam{position:relative;height:2px;margin:0 6px;background:repeating-linear-gradient(90deg,#d9d0fd 0 6px,transparent 6px 12px)}
.rm-beam i{position:absolute;top:50%;left:0;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ot-v);box-shadow:0 0 0 5px rgba(109,94,240,.2),0 0 16px rgba(109,94,240,.6);opacity:0}
.x-beam .rm-beam i{opacity:1;animation:rm-run .6s ease-in-out infinite}
@keyframes rm-run{from{left:0}to{left:calc(100% - 12px)}}
.rm-app{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(26,29,38,.45);border:1px solid var(--ot-line)}
.rm-abar{height:44px;display:flex;align-items:center;gap:7px;padding:0 16px;background:#fafbfc;border-bottom:1px solid #edeef2}
.rm-abar>i{width:10px;height:10px;border-radius:50%;background:var(--ot-line)}
.rm-abar span{margin-left:8px;font-size:13px;font-weight:600;color:var(--ot-muted)}
.rm-abar .ot-livechip{margin-left:auto}
.rm-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;min-height:420px}
.rm-list{list-style:none;padding:12px;display:grid;gap:6px;align-content:start}
.rm-list li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;border:1px solid #f0eff5;transition:border-color .3s,box-shadow .3s,background .3s}
.rm-list li p{flex:1;min-width:0;line-height:1.3}
.rm-list li b{display:block;font-size:13px;color:var(--ot-ink)}
.rm-list li p span{display:block;font-size:12px;color:var(--ot-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-look .rm-adam,.x-look .rm-priya{border-color:#c9bfff;box-shadow:0 0 0 3px rgba(109,94,240,.12);background:#fcfbff}
.rm-st{display:grid;font-style:normal}
.rm-st span{grid-area:1/1;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap;transition:opacity .3s}
.rm-st .a{color:var(--ot-am);background:var(--ot-ambg)}
.rm-st .b{color:var(--ot-g);background:var(--ot-gbg);opacity:0}
.rm-ai .a{color:var(--ot-vtext);background:var(--ot-vchip)}
.x-adam .rm-adam .a{opacity:0}
.x-adam .rm-adam .b{opacity:1}
.x-adam .rm-adam{border-color:#d3eedf;background:#f8fdfa;box-shadow:none}
.rm-side{background:#fafbfc;border-left:1px solid #edeef2;padding:12px;display:grid;gap:10px;align-content:start}
.rm-panel{background:#fff;border:1px dashed #dcd8ea;border-radius:12px;padding:10px 12px;transition:border-color .4s,box-shadow .5s}
.rm-ph{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ot-muted)}
.rm-ph img,.rm-ph svg{width:14px;height:14px}
.rm-ph svg{color:var(--ot-v)}
.rm-ph .ot-aiav{width:18px;height:18px;box-shadow:none}
.rm-kst{margin-left:auto;opacity:0;transition:opacity .3s}
.x-kb .rm-kst{opacity:1}
.x-pass .rm-kst .a{opacity:0}
.x-pass .rm-kst .b{opacity:1}
.rm-o,.rm-kl,.rm-bar2,.rm-ex-r{opacity:0;transition:opacity .4s}
.rm-o{display:flex;align-items:center;gap:9px;margin-top:8px}
.rm-o img{width:36px;height:36px;object-fit:contain;border-radius:8px;background:#eef0f4}
.rm-o b{display:block;font-size:12.5px;color:var(--ot-ink)}
.rm-o span{font-size:11.5px;color:var(--ot-muted)}
.rm-kl{margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--ot-body)}
.rm-kl b{display:block;color:var(--ot-g)}
.rm-kl s{color:var(--ot-faint)}
.rm-bar2{display:block;height:6px;margin-top:9px;border-radius:6px;background:#eceaf5;overflow:hidden}
.rm-bar2 i{display:block;height:100%;background:var(--ot-g2);transform-origin:0 50%;transform:scaleX(0)}
.rm-ex-r{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12.5px;font-weight:700;color:var(--ot-g)}
.rm-ex-r svg{width:13px;height:13px}
.x-order .rm-order,.x-kb .rm-kb,.x-ex .rm-ex{border-style:solid;border-color:#c9ebd7;box-shadow:0 0 0 4px rgba(79,193,143,.12)}
.x-order .rm-o,.x-kb .rm-kl,.x-ex .rm-bar2,.x-pass .rm-ex-r{opacity:1}
.rm-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;margin-top:28px}
.rm-foot .v3-small{margin-top:4px;max-width:460px}
@media (max-width:1180px){
  .rm-stage{grid-template-columns:minmax(0,1fr);gap:0}
  .rm-chat{max-width:560px;width:100%;justify-self:center}
  .rm-beam{width:2px;height:44px;margin:0 auto;background:repeating-linear-gradient(180deg,#d9d0fd 0 6px,transparent 6px 12px)}
  .rm-beam i{left:50%;top:0;margin:0 0 0 -6px}
  @keyframes rm-run-v{from{top:0}to{top:calc(100% - 12px)}}
  .x-beam .rm-beam i{animation-name:rm-run-v}
}
@media (max-width:700px){
  .rm-stage{margin-top:32px}
  .rm-chat{height:440px;border-radius:18px}
  .rm-body{grid-template-columns:minmax(0,1fr)}
  .rm-side{border-left:0;border-top:1px solid #edeef2}
  .rm-list li:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){
  .cx-spin,.cx-dots i,.x-beam .rm-beam i{animation:none}
}

/* Scroll anchoring: browsers keep your place by latching onto an element and scrolling the page
   to follow it. Inside these self-rewriting stages that made the PAGE drift upward on phones as
   each chat message landed. None of them may be used as an anchor. */
.rm-stage,.sk-gs,.tr-stage,.wh-stage{overflow-anchor:none}

/* =====================================================================
   3c THE AI AGENTS (Tom's 4 Oct workshop): the team strip at the top of the skills section,
   and their small tiles where they appear elsewhere. Each agent is a small full figure in its
   own coloured rounded tile, never a circle or a crop. The tiles ship as still pictures;
   js/agents.js swaps in the studio's live figure (the .life-* rules below, from
   ~/dev/repli-agent-life/world.html) once the strip is near the screen.
   ===================================================================== */
.ag-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;margin-top:40px}
.ag-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ag-note{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px 28px;border-radius:22px;background:#f9f8fe;border:1px solid var(--ot-line);font-size:15.5px;line-height:1.6;color:var(--ot-body)}
.ag-nh{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ot-vtext)}
.ag-card{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:9px 9px 15px;border:1px solid var(--ot-line);border-radius:22px;background:#fff;font:inherit;color:inherit;text-align:left;transition:border-color .3s,box-shadow .3s,transform .3s}
button.ag-card{cursor:pointer}
button.ag-card:hover{transform:translateY(-2px);box-shadow:0 18px 30px -24px rgba(26,29,38,.4)}
button.ag-card:focus-visible{outline:2px solid var(--ot-v);outline-offset:2px}
.ag-card.on{border-color:var(--agc);box-shadow:0 0 0 3px var(--agr),0 18px 34px -26px rgba(26,29,38,.45)}
.ag-tile{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;aspect-ratio:176/150;border-radius:15px;overflow:hidden;background:var(--agt)}
.ag-still{position:absolute;left:50%;bottom:0;height:70%;width:auto;transform:translateX(-50%);user-select:none}
.ag-tile .prop{position:absolute;bottom:0}
.ag-tile .prop svg{display:block;height:100%;width:auto}
.ag-tile .prop.left{left:5%} .ag-tile .prop.right{right:5%}
.ag-now{position:absolute;top:16px;left:16px;z-index:6;display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:999px;background:#fff;color:var(--agc);font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 4px 10px -6px rgba(26,29,38,.35);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s;pointer-events:none}
.ag-now i{width:6px;height:6px;border-radius:50%;background:var(--agc);animation:ag-pulse 1.6s ease-in-out infinite}
@keyframes ag-pulse{50%{opacity:.35}}
.ag-card.on .ag-now{opacity:1;transform:none}
.ag-n{display:flex;align-items:center;gap:8px;margin-top:12px;padding:0 5px}
.ag-n b{font-size:16.5px;font-weight:800;color:var(--ot-ink);letter-spacing:-.01em}
.ag-n em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--agc);background:var(--agt);border-radius:999px;padding:2px 9px;white-space:nowrap}
.ag-d{display:block;margin-top:6px;padding:0 5px;font-size:13px;line-height:1.45;color:var(--ot-muted)}
.ag-go{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding:10px 5px 0;font-size:12.5px;font-weight:700;color:var(--agc)}
.ag-go svg{width:12px;height:12px;transform:rotate(90deg);transition:transform .2s}
button.ag-card:hover .ag-go svg{transform:rotate(90deg) translateX(2px)}
.ag-cap{display:flex;align-items:center;gap:8px;min-height:22px;margin-top:14px;font-size:13px;color:var(--ot-muted)}
.ag-cap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ot-g2);box-shadow:0 0 0 3px rgba(79,193,143,.18);flex:none}
.ag-cap b{color:var(--ot-ink);font-weight:700}
.ag-cap span{animation:ag-in .5s ease-out}
@keyframes ag-in{from{opacity:0;transform:translateY(4px)}}
.ag-row+.ag-cap+.sk-gate{margin-top:26px}
.sk-gs{scroll-margin:84px 0 20px}

/* the live figure (studio rules) */
.ag-tile .life-figure{position:relative;height:70%;display:flex;align-items:flex-end;justify-content:center;will-change:transform}
.ag-tile .life-slot{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.ag-tile .life-bob,.ag-tile .life-turner{height:100%;transform-origin:50% 100%}
.ag-tile .life-side,.ag-tile .life-three,.ag-tile .life-side .side-frame{opacity:0}
.ag-tile .life-three .side-frame.on{opacity:1}
.ag-tile .life-breathe{position:relative;height:100%;transform-origin:50% 100%}
.ag-tile .life-layer{position:absolute;inset:0;width:100%;height:100%;user-select:none}
.ag-tile .life-layer.lid,.ag-tile .life-layer.edge{opacity:0}
.ag-tile .life-armL .arm-img{position:absolute;inset:0;width:100%;height:100%}
.ag-tile .life-cup{position:absolute;opacity:0;overflow:visible}
.ag-tile .life-cup.is-held{opacity:1}
.ag-tile .life-steam rect{fill:#c9c3d9;opacity:0}
.ag-tile .life-cup.is-held .life-steam rect{animation:ag-steam 1.8s ease-out infinite}
.ag-tile .life-cup.is-held .life-steam .w2{animation-delay:.9s}
@keyframes ag-steam{0%{opacity:0;transform:translateY(1px)}30%{opacity:.85}100%{opacity:0;transform:translateY(-2px)}}
.ag-tile .life-paper{position:absolute;opacity:0}
.ag-tile .flying-paper{position:absolute;z-index:5;pointer-events:none}
.ag-tile .flying-paper svg{display:block}

/* the small tile, where an agent turns up at a moment that matters */
.ag-mini{position:relative;flex:none;display:inline-flex;align-items:flex-end;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--agt);overflow:hidden}
/* span.ag-mini>img outranks the photo rules it sits beside (.g-th img, .ot-rh-sent img), which
   would crop the figure into a circle */
span.ag-mini>img{display:block;height:84%;width:auto;border-radius:0;box-shadow:none;object-fit:contain}
.ot-auto-h .ag-mini{display:inline-flex;margin-left:0;width:28px;height:28px;border-radius:8px}
.ot-rh{height:30px}
.ot-rh .ag-mini{width:28px;height:28px;border-radius:8px}
.ot-pt-h{height:26px}
.ot-pt-h .ag-mini{width:24px;height:24px;border-radius:7px}
.g-th .ag-mini{width:32px;height:32px;border-radius:9px;box-shadow:0 0 0 2px rgba(255,255,255,.08)}

@media (max-width:899px){
  .ag-row{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .ag-team{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,31%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:4px 20px 8px}
  .ag-note{padding:18px 20px;font-size:15px}
  .ag-team::-webkit-scrollbar{display:none}
  .ag-card{scroll-snap-align:start}
}
@media (max-width:560px){
  .ag-team{grid-auto-columns:56%;gap:10px}
  .ag-card{padding:7px 7px 13px;border-radius:19px}
  .ag-tile{border-radius:13px}
  .ag-now{top:12px;left:12px;font-size:10.5px}
  .ag-n{margin-top:10px;gap:6px;flex-wrap:wrap}
  .ag-n b{font-size:15px}
  .ag-d{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .ag-card,.ag-now,.ag-go svg{transition:none}
  .ag-now i,.ag-cap span{animation:none}
}

/* the helpdesk move, said plainly (5 Oct): a strip under What you get's four parts */
.v3-move{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px 48px;align-items:start;margin-top:28px;padding:28px 32px;border:1px solid var(--ot-line);border-radius:24px;background:#fff}
.v3-move .v3-pnum{margin-top:0}
.v3-move h3{margin-top:8px;font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--ot-ink)}
.v3-move-l{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px}
.v3-move-l li{display:grid;grid-template-columns:18px minmax(0,1fr);align-content:start;column-gap:10px;row-gap:2px}
.v3-move-l svg{grid-row:span 2;width:16px;height:16px;margin-top:3px;color:var(--ot-g)}
.v3-move-l b{font-size:15.5px;color:var(--ot-ink)}
.v3-move-l span{font-size:14.5px;line-height:1.5;color:var(--ot-body)}
@media (max-width:899px){
  .v3-move{grid-template-columns:minmax(0,1fr);margin-top:18px;padding:20px 18px 22px;border-radius:20px}
  .v3-move h3{font-size:21px}
  .v3-move-l{grid-template-columns:minmax(0,1fr);gap:14px}
}