/* split.css: the half-and-half split video (ADDED REQUIREMENT 9).
   Tall cards stack: graphic on top, presenter below. Square frames sit side by side: graphic left, presenter right.
   No .sp-run class = the resting final frame (paused, reduced motion, no script). split.js adds .sp-run while the clip plays. */

.sp{--seam:rgba(242,84,91,.85)}
.sp .sp-g{position:absolute;z-index:1;left:0;right:0;top:0;height:50%;overflow:hidden;
  background:radial-gradient(120% 90% at 88% 0%,rgba(242,84,91,.14),transparent 62%),#121215;
  border-bottom:2px solid var(--seam);color:#EDEDF0}
.smp.sp>video{top:50%;bottom:auto;height:50%}
.smp.sp::after{inset:72% 0 0}
.smp.sp .smp-tag{z-index:3}

/* side by side (square) */
.sp-side .sp-g{right:auto;width:50%;height:100%;border-bottom:0;border-right:2px solid var(--seam);
  background:radial-gradient(130% 70% at 0% 100%,rgba(242,84,91,.16),transparent 65%),#121215}
.ff-box.sp-side video{left:auto;right:0;width:50%}
.sp-side .ff-tag{z-index:3;font-size:9.5px;padding:2px 4px;letter-spacing:0}

/* 1. checklist (Consulting card) */
.sp-check{display:flex;flex-direction:column;justify-content:flex-end;padding:0 16px 16px}
.sp-check b{display:block;font:500 12px/1.3 'Geist Mono',monospace;color:#A9A9B3;margin-bottom:10px}
.sp-check ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sp-check li{display:flex;align-items:center;gap:10px;font:700 clamp(15px,1.2vw,17px)/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em;color:#EDEDF0}
.sp-check li i{flex:none;position:relative;width:20px;height:20px;border-radius:6px;background:#F2545B;border:1.5px solid #F2545B}
.sp-check li i::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;border:solid #141416;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
@media (max-width:640px){.sp-check{padding:0 14px 14px}.sp-check b{margin-bottom:8px}.sp-check ul{gap:8px}.sp-check li{font-size:15px;gap:9px}.sp-check li i{width:18px;height:18px}.sp-check li i::after{left:4.8px;top:1.5px}.sp-kin{font-size:25px}}
.sp-run .sp-check li{animation:spFade .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.2s + var(--n)*.9s)}
.sp-run .sp-check li i{animation:spBox .28s ease-out both;animation-delay:calc(.75s + var(--n)*.9s)}
.sp-run .sp-check li i::after{animation:spTick .28s ease-out both;animation-delay:calc(.8s + var(--n)*.9s)}
@keyframes spFade{from{opacity:.0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spBox{from{background:transparent;border-color:#6B6B75}to{background:#F2545B;border-color:#F2545B}}
@keyframes spTick{from{opacity:0;transform:rotate(45deg) scale(.4)}to{opacity:1;transform:rotate(45deg)}}

/* 2. kinetic words (Online courses card) */
.sp-kin{display:flex;flex-direction:column;justify-content:flex-end;padding:0 16px 16px;font:800 clamp(25px,2.05vw,30px)/1.06 'Bricolage Grotesque',sans-serif;letter-spacing:-.025em}
.sp-kin span{display:block}
.sp-kin i{font-style:normal;display:inline-block}
.sp-kin i.c{background:#F2545B;color:#141416;padding:0 .16em;border-radius:.16em;transform:rotate(-1.5deg)}
.sp-run .sp-kin i{animation:spPop .34s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.25s + var(--n)*.36s)}
.sp-run .sp-kin i.c{animation-name:spPopC}
@keyframes spPop{from{opacity:0;transform:translateY(40%) scale(.86)}to{opacity:1;transform:none}}
@keyframes spPopC{from{opacity:0;transform:translateY(40%) scale(.86) rotate(0)}to{opacity:1;transform:rotate(-1.5deg)}}

/* 3. bar chart (Talking head + graphics tile) */
.sp-bars{display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:58px 22px 46px}
.sp-bar{position:relative;flex:1;max-width:44px;height:100%;display:flex;align-items:flex-end}
.sp-bar i{display:block;width:100%;height:var(--h);border-radius:6px 6px 2px 2px;background:#3A3A44;transform-origin:50% 100%}
.sp-bar.c i{background:#F2545B}
.sp-bar em{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font:500 11px/1 'Geist Mono',monospace;font-style:normal;color:#A9A9B3}
.sp-run .sp-bar i{animation:spGrow .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.3s + var(--n)*.38s)}
@keyframes spGrow{from{transform:scaleY(0)}to{transform:none}}
/* the caption line sits on the seam */
.k-grid .smp.sp .smp-cap{z-index:2;left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 20px);
  padding:5px 10px;border-radius:10px;background:rgba(12,12,14,.92);border:1px solid rgba(255,255,255,.14);
  font-size:15px;line-height:1.2;text-align:center;white-space:nowrap;text-shadow:none}

/* 4. big number (fan, square) */
.sp-num{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 9%}
.sp-num b{display:block;font:600 clamp(30px,3.1vw,44px)/1 'Geist Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#F2545B}
.sp-num em{display:block;margin-top:5px;font:600 clamp(11px,.8vw,13px)/1.2 'Geist',sans-serif;font-style:normal;white-space:nowrap;color:#EDEDF0}
.sp-run.sp-num em,.sp-run .sp-num em{animation:spFade .45s ease-out both;animation-delay:1.1s}
@media (max-width:640px){.sp-num b{font-size:46px}.sp-num em{font-size:13px}}

@media (prefers-reduced-motion:reduce){.sp *,.sp *::after{animation:none!important}}

/* any-AI line above the AI chips, and logos in AI app labels */
.any-ai{max-width:640px;margin:28px auto 14px;text-align:center;font-size:17px;line-height:1.5;color:var(--tx2)}
.fa-bar .fa-lg{width:calc(var(--u)*20);height:calc(var(--u)*20);margin-left:calc(var(--u)*7)}
.fa-bar .fa-lg+span{margin-left:calc(var(--u)*5)}
.lc-lgs{display:flex;gap:4px}.lc-lgs img{width:22px;height:22px}