/* ch-copilot: the live sales copilot. One section that looks like a chapter card (an index line, a big name, a hook, a lede) but is not a
   chapter: its index line says "Next", and it says it is being put together. Every rule sits under .cp or a .cp-* class. Inside the film
   (a 1280 by 720 canvas in design pixels, scaled by the kit) each card wears the look of the engine it comes from: the sales department's
   light window (.dk-app, chapter-kit.css), Simulator's dark panel (.pn, clips.css), Atlas's paper and indigo (below).
   Needs ../base/base.css, ../motion/motion.css, ../clips/clips.css, ../chapter-kit/chapter-kit.css, ../outcome/outcome.css.
   Rule 3 of the landing kit: only transform and opacity move; nothing frosted. */

/* ---------- the section ---------- */
.cp{position:relative;padding-block:clamp(72px,8vw,128px) clamp(64px,8vw,120px);margin-top:var(--sez);color:var(--ink);scroll-margin-top:calc(var(--barra-h) + 8px)}
.cp-head{--nm:min(8.6vw,17vh);--nm:min(8.6vw,17svh);width:min(var(--largo),100% - 2 * var(--gutter));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,2.6vh,32px)}
.cp-eyebrow{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 clamp(28px,6vh,72px);padding-top:calc(16 * var(--px));font-size:calc(14 * var(--px));font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cp-n{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.cp-g{text-align:right}
.cp-rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink-3);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.7s var(--e-esce)}
.cp-rule.vis{transform:none}
.cp-title{margin:0;min-width:0;font-family:var(--serif);font-weight:300;font-size:var(--nm);line-height:.94;letter-spacing:-.05em;text-wrap:balance}
.cp-title .w{display:inline-block;overflow:clip;vertical-align:top;padding:.1em .06em .2em;margin:-.1em -.06em -.2em}
.cp-title .w>span{display:inline-block;transform:translateY(112%);transition:transform 1.5s var(--e-esce) calc(.12s + var(--i,0) * .09s)}
.cp-title.vis .w>span{transform:none}
/* the name with its icon beside it, as the chapters' cards (.ch-name, .ch-icon) */
.cp-name{display:flex;align-items:center;gap:calc(var(--nm) * .16)}
.cp-icon{flex:none;width:calc(var(--nm) * .74);height:calc(var(--nm) * .74);border-radius:22.37%;object-fit:cover;outline:1px solid oklch(100% 0 0/.16);outline-offset:-1px;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.14),0 calc(var(--nm) * .08) calc(var(--nm) * .22) calc(var(--nm) * -.08) oklch(0% 0 0/.55)}
/* the name is not a block that fades: only its words move */
.cp-head :is(.cp-title,.cp-rule):is(.rv,.vis,.via){opacity:1;animation:none;filter:none}
.cp-hook{margin:0;max-width:22em;font-family:var(--serif);font-weight:300;font-size:calc(46 * var(--px));line-height:1.1;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.cp-hook em,.cp-lede em{font-style:normal}
.cp-hook em{font-family:var(--accent);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:1.04em;line-height:.9}
.cp-lede{margin:0;font-size:var(--t-lead);line-height:1.32;letter-spacing:-.014em;color:var(--ink-2);max-width:34ch;text-wrap:pretty}
.cp-lede em{color:var(--ink)}
@media (min-width:900px){
  .cp-head{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(32px,6vw,96px)}
  .cp-eyebrow,.cp-name{grid-column:1/-1}
  .cp-hook{grid-column:1}
  .cp-lede{grid-column:2;align-self:end;padding-bottom:.5em}
}
@media (max-width:899px){
  .cp-head{--nm:12.4vw}
  .cp-hook{font-size:clamp(25px,6.9vw,36px);line-height:1.12}
  .cp-eyebrow{font-size:12.5px}
}

/* the film */
.cp-open{width:min(1280px,100% - 2 * var(--gutter));margin:clamp(48px,6vw,88px) auto 0}
.cp-open .cl-film{width:100%}
.cp .cl-film .cl-frame{background:var(--piano);box-shadow:inset 0 0 0 1px var(--riga)}

/* the three things it is made of, as a plain list under the film: each with the chip that names it */
.cp-parts{list-style:none;padding:0;width:min(var(--largo),100% - 2 * var(--gutter));margin:clamp(40px,5vw,72px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(20px,3vw,44px)}
.cp-parts li{display:grid;align-content:start;justify-items:start;gap:10px;padding-top:20px;border-top:1px solid var(--riga-2);font-size:var(--t-lista);line-height:1.35;letter-spacing:-.01em;color:var(--ink-2);text-wrap:pretty}
.cp-pill{display:inline-flex;align-items:center;gap:calc(8 * var(--px));height:calc(28 * var(--px));padding:0 calc(12 * var(--px)) 0 calc(10 * var(--px));border-radius:999px;background:oklch(100% 0 0/.1);color:var(--ink);font-size:calc(13.5 * var(--px));font-weight:500;letter-spacing:-.003em;white-space:nowrap}
.cp-pill::before{content:"";width:calc(7 * var(--px));height:calc(7 * var(--px));border-radius:50%;background:var(--ink)}
.cp-foot{width:min(var(--largo),100% - 2 * var(--gutter));margin:clamp(40px,5vw,64px) auto 0;font-family:var(--serif);font-weight:300;font-size:calc(30 * var(--px));line-height:1.15;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.cp-foot em{font-style:normal;font-family:var(--accent);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:1.04em;line-height:.9}
@media (max-width:899px){.cp-parts{grid-template-columns:minmax(0,1fr)}.cp-foot{font-size:clamp(22px,6vw,28px)}}
@media (prefers-reduced-motion:reduce){.cp-rule{transform:none;transition:none}.cp-title .w>span{transform:none;transition:none}}

/* ---------- inside the film (design pixels) ---------- */
/* the chip that names the engine, on each card, in that engine's own colours */
.cp-chip{display:inline-flex;align-items:center;gap:7px;flex:none;height:24px;padding:0 10px 0 9px;margin-left:auto;border-radius:999px;font-size:12.5px;font-weight:560;white-space:nowrap}
.cp-chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.cp-a .cp-chip{background:var(--p-ink);color:oklch(100% 0 0)}
.cp-b .cp-chip{margin-left:10px;background:oklch(100% 0 0/.14);color:oklch(100% 0 0/.9)}
.cp-c .cp-chip{background:var(--c-soft);color:var(--c-brand2)}

/* the call: an example person, a still picture (no video, no frosted glass) */
.cp-callw{left:40px;top:66px;width:560px;height:470px;transform-origin:0 0}
.cp-call{position:absolute;inset:0;overflow:hidden;border-radius:18px;background:#000;box-shadow:0 0 0 1px oklch(100% 0 0/.1),0 50px 90px -40px #000}
.cp-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.cp-call::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(transparent,oklch(0% 0 0/.78));pointer-events:none}
.cp-tag{position:absolute;left:14px;top:14px;padding:5px 10px;border-radius:8px;background:oklch(0% 0 0/.62);font-size:13px;font-weight:560;color:#fff}
.cp-me{position:absolute;right:14px;top:14px;width:84px;height:84px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1.5px oklch(100% 0 0/.35)}
.cp-me img{width:100%;height:100%;object-fit:cover;display:block}
.cp-live{position:absolute;left:50%;top:14px;translate:-50% 0;z-index:2;display:flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border-radius:14px;background:oklch(0% 0 0/.62);font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap}
.cp-eq{display:inline-flex;align-items:center;gap:2px;height:14px}
.cp-eq i{display:block;width:3px;height:14px;border-radius:2px;background:currentColor;opacity:.9;animation:cl-wave .8s ease-in-out infinite alternate}
.cp-eq i:nth-child(2){animation-delay:-.25s}.cp-eq i:nth-child(3){animation-delay:-.5s}.cp-eq i:nth-child(4){animation-delay:-.7s}
.cp-cc{position:absolute;z-index:2;left:50%;bottom:16px;translate:-50% 0;width:max-content;max-width:88%;margin:0;padding:8px 14px;border-radius:10px;background:oklch(0% 0 0/.7);font-size:16px;line-height:1.35;text-align:center;color:#fff}
.cp-cc small{display:block;font-size:11.5px;font-weight:600;color:oklch(100% 0 0/.6)}

/* the clip's own caption, under the call */
.cp-cap{left:40px;top:548px;width:520px;height:72px;font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.03em;color:#fff;pointer-events:none}
.cp-cap>span{position:absolute;left:0;top:0;width:100%}
.cp-cap em{font-style:normal;color:oklch(100% 0 0/.55)}

/* act 1: the mess */
.cp-strip{left:40px;top:12px;width:1200px;height:40px;display:flex;gap:2px;padding:6px 6px 0;border-radius:12px 12px 0 0;background:oklch(7% 0 0);box-shadow:inset 0 -1px 0 oklch(100% 0 0/.06)}
.cp-tab{position:relative;flex:1;height:34px;border-radius:9px 9px 0 0;background:oklch(20% 0 0)}
.cp-tab:nth-child(7){background:oklch(30% 0 0)}
.cp-tab i{position:absolute;left:7px;top:12px;width:9px;height:9px;border-radius:3px}
.cp-tab b{position:absolute;left:21px;right:6px;top:15px;height:3px;border-radius:2px;background:oklch(40% 0 0)}
.cp-crm,.cp-sheet{background:#f1f1f4;color:#2a2a33;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -24px rgb(0 0 0/.8),0 0 0 1px rgb(255 255 255/.08)}
.cp-crm{left:770px;top:100px;width:400px;height:330px;rotate:2.5deg}
.cp-crm header,.cp-sheet header{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;color:#fff;font-size:14px;font-weight:620}
.cp-crm header{background:#e8743b}
.cp-sheet header{background:#22a45a}
.cp-crm header svg,.cp-sheet header svg{width:15px;height:15px}
.cp-crm header em{margin-left:auto;display:grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:#fff;color:#e8743b;font-style:normal;font-size:12px;font-weight:700}
.cp-crm .bd{display:grid;gap:12px;padding:16px}
.cp-crm .r{display:flex;align-items:center;gap:12px}
.cp-crm .dot{width:26px;height:26px;border-radius:50%;background:#d6d6de;flex:none}
.cp-crm .col{display:grid;gap:6px;flex:1}
.cp-crm .col i{display:block;height:8px;border-radius:4px;background:#c4c4ce}
.cp-crm .col i.s{height:6px;background:#dadae2}
.cp-crm .nx{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px 12px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px #e5484d}
.cp-crm .nx small{font-size:12.5px;color:#74747f}
.cp-crm .nx span{margin-left:auto;font-size:15px;font-weight:700;color:#e5484d}
.cp-sheet{left:880px;top:410px;width:300px;height:190px;rotate:-2.5deg}
.cp-sheet .g{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:8px}
.cp-sheet .g i{display:block;height:20px;background:#e4e4ea}
.cp-pad{left:150px;top:236px;width:250px;height:280px;rotate:-4deg;background:#f6efc9;color:#4a432a;border-radius:6px;box-shadow:0 30px 50px -24px rgb(0 0 0/.8)}
.cp-pad svg{position:absolute;inset:0;width:250px;height:280px;fill:none;stroke:#8d825a;stroke-width:2;stroke-linecap:round;opacity:.55}
.cp-pad span{position:absolute;font:600 22px/1 "Bradley Hand","Segoe Print","Marker Felt",cursive;color:#b03a2e}
.cp-pad .w1{left:26px;top:222px;rotate:-3deg}
.cp-pad .w2{left:136px;top:238px;rotate:4deg;color:#4a432a}
.cp-bub{left:330px;top:506px;display:flex;align-items:center;gap:10px;height:42px;padding:0 16px 0 7px;border-radius:21px;background:#fff;color:rgb(23 23 28);font-size:15px;font-weight:560;box-shadow:0 12px 28px -12px #000}
.cp-bub i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgb(23 23 28);color:#fff;font-style:normal;font-weight:700}
.cp-sil{left:668px;top:513px;display:flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border-radius:14px;background:oklch(63% .2 25/.2);color:oklch(80% .13 25);font-size:13px;font-weight:560}
.cp-sil i{width:7px;height:7px;border-radius:50%;background:currentColor}
.cp-sil b{font-weight:600;font-variant-numeric:tabular-nums}

/* act 2, the panel: three cards, each in its engine's look */
.cp-a{left:680px;top:66px;width:560px;height:232px;border-radius:16px}
.cp-b{left:680px;top:310px;width:560px;height:150px;border-radius:16px}
.cp-c{left:680px;top:472px;width:560px;height:180px}

/* the sales department's: the company, each fact with its source, a search */
.cp-hd{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border-bottom:1px solid var(--p-line)}
.cp-hd .dk-tile{width:30px;height:30px;border-radius:9px}
.cp-hd .dk-tile svg{width:16px;height:16px}
.cp-hd .nm{line-height:1.2}
.cp-hd .nm b{font-size:14.5px}
.cp-hd .nm small{font-size:12px}
.cp-fr{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;column-gap:12px;height:36px;padding:0 14px;border-bottom:1px solid var(--p-line);font-size:13.5px}
.cp-fr .src{display:flex;align-items:center;gap:8px;color:var(--p-ink2);font-weight:560;font-size:13px}
.cp-fr .src svg{width:14px;height:14px}
.cp-fr .fact{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-ask{position:absolute;left:14px;right:14px;top:164px;display:flex;align-items:center;gap:9px;height:32px;padding:0 12px;border-radius:16px;background:var(--p-bg2);box-shadow:inset 0 0 0 1px var(--p-line2);font-size:13.5px}
.cp-ask svg{width:14px;height:14px;color:var(--p-ink3)}
.cp-ask .t{white-space:nowrap}
.cp-ask .cl-caret{background:var(--p-ink)}
.cp-ans{position:absolute;left:14px;right:14px;top:200px;height:28px;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:560}
.cp-ans>svg{width:15px;height:15px;color:var(--p-ink)}
.cp-ans .txt{min-width:0;white-space:nowrap}
.cp-src{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:7px;background:var(--p-bg3);color:var(--p-ink2);font-size:12px;font-weight:540;white-space:nowrap}
.cp-src svg{width:12px;height:12px;color:var(--p-ink3)}

/* Simulator's: the coach on the dark panel */
.cp-b .cl-hd{height:44px;padding:0 14px}
.cp-b .cl-hd .cl-face{width:28px;height:28px}
.cp-b .cl-hd small{margin-left:auto;font-size:12.5px}
.cp-bb{position:relative;height:106px}
.cp-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--ink-3);font-size:14px}
.cp-obj{position:absolute;left:14px;top:12px;display:flex;align-items:center;gap:10px}
.cp-obj small{font-size:12px;color:var(--ink-3)}
.cp-b .pill{height:26px;font-size:13px}
.cp-best{position:absolute;left:14px;right:14px;top:48px;margin:0;font-size:14.5px;line-height:1.42;color:oklch(100% 0 0/.92)}
.cp-best mark{color:inherit;border-radius:3px;padding:1px 2px;margin:0 -2px;background:linear-gradient(oklch(100% 0 0/.16),oklch(100% 0 0/.16)) no-repeat 0 100%/100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Atlas's: white paper, indigo, "Atlas proposes" and a person's yes */
.cp-c{--c-brand:#4c59e6;--c-brand2:#3a46c4;--c-soft:oklch(93.5% .05 288);--c-ink:oklch(21% .012 280);--c-ink2:oklch(37% .012 280);--c-ink3:oklch(50% .014 280);--c-hair:oklch(28% .03 292/.09);--c-ok:oklch(60% .15 155);--c-ok-soft:oklch(94.5% .04 155);--c-ok-ink:rgb(23 114 69);
  border-radius:16px;background:oklch(98.2% .006 290);color:var(--c-ink);box-shadow:0 0 0 1px oklch(32% .06 292/.07),0 40px 70px -34px #000;font-size:13.5px;overflow:hidden}
.cp-c svg{width:14px;height:14px;flex:none}
.cp-chd{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-bottom:1px solid var(--c-hair)}
.cp-chd b{font-weight:620;font-size:14px}
.cp-chd small{font-size:12.5px;color:var(--c-ink3)}
.cp-ci{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--c-soft);color:var(--c-brand2)}
.cp-nl{padding:6px 14px 0}
.cp-nt{display:flex;align-items:center;gap:9px;height:27px}
.cp-nt i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--c-ok-soft);color:var(--c-ok-ink);flex:none}
.cp-nt i svg{width:11px;height:11px;stroke-width:3}
.cp-nt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-prop{position:absolute;left:10px;right:10px;bottom:10px;height:40px;border-radius:10px;background:oklch(95.4% .012 290);box-shadow:inset 0 0 0 1px oklch(32% .06 292/.07)}
.cp-pin{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 8px 0 12px}
.cp-cart{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-brand2);white-space:nowrap}
.cp-pt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.cp-pb{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.cp-go,.cp-ed{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 12px;border-radius:8px;font-size:12.5px;font-weight:600;transition:background-color .15s,transform .12s}
.cp-go{background:var(--c-brand);color:#fff;box-shadow:0 1px 2px oklch(30% .15 280/.4)}
.cp-go.hover{background:var(--c-brand2)}
.cp-go.press{transform:scale(.94)}
.cp-ed{background:#fff;color:var(--c-ink);box-shadow:0 0 0 1px oklch(32% .06 292/.12)}
.cp-ok{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--c-ok);color:#fff;flex:none}
.cp-ok svg{width:12px;height:12px;stroke-width:3}
.cp-pt b{font-weight:620}

@media (prefers-reduced-motion:reduce){.cp-eq i{animation:none}}