/* ============================================================
   Case-study product UI — built, not photographed.
   Each scene is a small working-looking interface for what that
   build actually does, animated on its own loop. Pure CSS so it
   stays sharp at any size and costs no image weight.
   ============================================================ */
.ui{aspect-ratio:16/10;background:#fff;display:flex;overflow:hidden;position:relative;
  font-family:'Hanken Grotesk',system-ui,sans-serif;color:#161A23;
  --u2:#F7F8FA; --uline:#E8EAF0; --udim:#6B7280; --uface:#EEF0F6}
.ui *{box-sizing:border-box}
/* the parent is the container; the scene sizes itself against it */
.browser,.cs-panel.tall{container-type:inline-size}
.ui{font-size:clamp(6px,2.1cqw,13.5px)}
/* on a narrow panel the scene reads as a product shot, so bias it larger */
@container (max-width:460px){.ui{font-size:clamp(6.5px,2.7cqw,11px)}}
.cs-slide:not(.on) .ui *{animation-play-state:paused}

/* scene classes are prefixed so page-level rules cannot reach in */
/* ── shared furniture ─────────────────────────────────────── */
.u-rail{width:23%;flex:none;background:var(--u2);border-right:1px solid var(--uline);
  padding:1.2em .8em;display:flex;flex-direction:column;gap:.35em;min-width:0}
.u-brand{display:flex;align-items:center;gap:.5em;font-weight:800;font-size:1em;
  letter-spacing:-.02em;margin-bottom:.9em;white-space:nowrap}
.u-brand i{width:1.8em;height:1.8em;border-radius:.5em;background:var(--ub);display:block;flex:none}
.u-nav{font-size:.86em;color:var(--udim);padding:.48em .55em;border-radius:.45em;font-weight:600;
  display:flex;align-items:center;gap:.45em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.u-nav b{width:.85em;height:.85em;border-radius:.22em;background:#CFD4E0;display:block;flex:none}
.u-nav.on{background:#fff;color:#161A23;box-shadow:0 1px 3px rgba(16,20,35,.09)}
.u-nav.on b{background:var(--ub)}
.u-main{flex:1;display:flex;flex-direction:column;min-width:0}
.u-top{height:3.3em;border-bottom:1px solid var(--uline);display:flex;align-items:center;
  justify-content:space-between;padding:0 1.2em;flex:none}
.u-title{font-family:Archivo;font-weight:700;font-size:1.05em;letter-spacing:-.02em}
.u-chipset{display:flex;gap:.4em}
.u-chip{font-size:.8em;font-weight:700;padding:.32em .62em;border-radius:.4em;
  background:var(--u2);color:var(--udim);border:1px solid var(--uline)}
.u-chip.live{background:var(--ub);color:#fff;border-color:transparent}
.u-body{flex:1;padding:1.2em;min-height:0;display:flex;gap:1em}
.u-avatar{width:1.9em;height:1.9em;border-radius:50%;background:var(--uface);flex:none;
  display:grid;place-items:center;font-size:.72em;font-weight:800;color:#5B6478}

/* ── 1 · BLS — appointment booking across countries ───────── */
.ui-bls{--ub:#2A4B9B}
.ui-bls .u-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:1em;width:100%}
.u-cal{border:1px solid var(--uline);border-radius:.7em;padding:.9em;display:flex;
  flex-direction:column}
.u-cal .m{display:flex;justify-content:space-between;align-items:center;font-weight:700;
  font-size:.92em;margin-bottom:.7em}
.u-cal .m span{color:var(--udim);font-weight:600;font-size:.86em}
.u-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3em}
.u-grid i{aspect-ratio:1;border-radius:.34em;background:var(--u2);display:grid;place-items:center;
  font-size:.78em;font-weight:600;color:#9AA1B2;font-style:normal}
.u-grid i.ok{background:#E8F0FF;color:#2A4B9B}
.u-grid i.sel{background:var(--ub);color:#fff;animation:pick 9s var(--ease-soft) infinite}
@keyframes pick{0%,16%{background:#E8F0FF;color:#2A4B9B;transform:scale(1)}
  22%{transform:scale(1.14)}24%,92%{background:#2A4B9B;color:#fff;transform:scale(1)}
  100%{background:#E8F0FF;color:#2A4B9B}}
.u-slots{display:flex;flex-direction:column;gap:.45em}
.u-slots .lbl{font-size:.82em;font-weight:700;color:var(--udim);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:.1em}
.u-slot{border:1px solid var(--uline);border-radius:.5em;padding:.52em .7em;font-size:.86em;
  font-weight:600;display:flex;justify-content:space-between;align-items:center}
.u-slot small{color:var(--udim);font-weight:600;font-size:.86em}
.u-slot.take{background:var(--u2);color:#9AA1B2}
.u-slot.go{border-color:var(--ub);background:#F2F6FF;color:var(--ub);
  animation:slot 9s var(--ease-soft) infinite}
@keyframes slot{0%,34%{border-color:var(--uline);background:#fff;color:#161A23}
  40%,92%{border-color:#2A4B9B;background:#F2F6FF;color:#2A4B9B}
  100%{border-color:var(--uline);background:#fff;color:#161A23}}
.u-done{margin-top:auto;border-radius:.55em;background:#0E7A4A;color:#fff;font-size:.86em;
  font-weight:700;padding:.6em .8em;display:flex;align-items:center;gap:.5em;
  opacity:0;transform:translateY(.5em);animation:done 9s var(--ease-soft) infinite}
@keyframes done{0%,54%{opacity:0;transform:translateY(.5em)}
  62%,90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(.5em)}}
.u-flag{display:inline-flex;align-items:center;gap:.4em}
.u-flag em{width:1.05em;height:.75em;border-radius:.12em;display:block;font-style:normal}

/* ── 2 · Easemyhiring — the AI runs the first interview ───── */
.ui-emh{--ub:#4F46E5}
.ui-emh .u-body{flex-direction:column;gap:.45em}
.u-row{display:grid;grid-template-columns:1.6fr .9fr .8fr .9fr;align-items:center;gap:.6em;
  border:1px solid var(--uline);border-radius:.6em;padding:.62em .8em;background:#fff}
.u-row.hrow{background:var(--u2);border-color:transparent;font-size:.8em;font-weight:700;
  color:var(--udim);text-transform:uppercase;letter-spacing:.06em;padding:.45em .8em}
.u-who{display:flex;align-items:center;gap:.6em;min-width:0}
.u-who b{font-size:.93em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-who small{display:block;color:var(--udim);font-size:.8em;font-weight:600}
.u-score{display:flex;align-items:center;gap:.5em;font-weight:800;font-size:.95em}
.u-ring{width:2em;height:2em;flex:none;display:block;transform:rotate(-90deg)}
.u-ring circle{fill:none;stroke-width:3.6;stroke-linecap:round}
.u-ring .trk{stroke:#E9EBF2}
.u-ring .arc{stroke:var(--sc);stroke-dasharray:100 100;stroke-dashoffset:100;
  animation:arc 9s var(--ease-soft) infinite}
.u-row.a{--sc:#0E7A4A}.u-row.b{--sc:#0E7A4A}.u-row.c{--sc:#C2410C}
.u-row.a .arc{--to:9;animation-delay:.2s}
.u-row.b .arc{--to:16;animation-delay:.7s}
.u-row.c .arc{--to:53;animation-delay:1.2s}
@keyframes arc{0%,6%{stroke-dashoffset:100}38%,100%{stroke-dashoffset:var(--to)}}
.u-stage{font-size:.82em;font-weight:700;padding:.3em .6em;border-radius:.35em;
  background:var(--u2);color:var(--udim);justify-self:start;white-space:nowrap}
.u-stage.good{background:#E6F6EE;color:#0E7A4A}
.u-stage.warn{background:#FDF0E6;color:#C2410C}
.u-row.a .u-stage{animation:stg 9s var(--ease-soft) infinite}
@keyframes stg{0%,36%{background:#F7F8FA;color:#6B7280}
  42%,100%{background:#E6F6EE;color:#0E7A4A}}
.u-live{display:flex;align-items:center;gap:.45em;font-size:.82em;font-weight:700;color:#0E7A4A}
.u-live i{width:.5em;height:.5em;border-radius:50%;background:#0E7A4A;display:block;
  animation:blip 1.6s var(--ease-soft) infinite}
@keyframes blip{50%{opacity:.25}}
.u-note{margin-top:.55em;border:1px solid var(--uline);border-radius:.6em;padding:.7em .85em;
  background:var(--u2);font-size:.86em;line-height:1.5;color:#39415A}
.u-note b{color:#161A23}
.u-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
  animation:type 9s steps(42) infinite}
@keyframes type{0%,8%{max-width:0}52%,100%{max-width:26em}}

/* ── 3 · Returbo — a return that approves itself ──────────── */
.ui-ret{--ub:#0F9488}
.ui-ret .u-body{flex-direction:column;gap:.75em}
.u-card{border:1px solid var(--uline);border-radius:.7em;padding:.9em 1em;background:#fff}
.u-card .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7em}
.u-card .hd b{font-size:.95em;font-weight:800}
.u-kv{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.u-kv div small{display:block;font-size:.8em;color:var(--udim);font-weight:600;margin-bottom:.2em}
.u-kv div b{font-size:.92em;font-weight:700}
.u-steps{display:flex;flex-direction:column;gap:.45em;margin-top:.75em}
.u-st{display:flex;align-items:center;gap:.6em;font-size:.88em;font-weight:600;color:#9AA1B2;
  border:1px solid var(--uline);border-radius:.55em;padding:.55em .75em;background:#fff}
.u-st i{width:1.25em;height:1.25em;border-radius:50%;background:#E9EBF2;flex:none;display:grid;
  place-items:center;font-size:.7em;color:#fff;font-style:normal;font-weight:800}
.u-st.on{color:#161A23;border-color:#BFE6E1;background:#F3FBFA}
.u-st.on i{background:#0F9488}
.u-st:nth-child(1){animation:lite 9s var(--ease-soft) infinite .4s}
.u-st:nth-child(2){animation:lite 9s var(--ease-soft) infinite 1.6s}
.u-st:nth-child(3){animation:lite 9s var(--ease-soft) infinite 2.8s}
@keyframes lite{0%,8%{border-color:#E8EAF0;background:#fff;color:#9AA1B2}
  14%,94%{border-color:#BFE6E1;background:#F3FBFA;color:#161A23}
  100%{border-color:#E8EAF0;background:#fff;color:#9AA1B2}}
.u-st:nth-child(1) i{animation:litei 9s var(--ease-soft) infinite .4s}
.u-st:nth-child(2) i{animation:litei 9s var(--ease-soft) infinite 1.6s}
.u-st:nth-child(3) i{animation:litei 9s var(--ease-soft) infinite 2.8s}
@keyframes litei{0%,8%{background:#E9EBF2}14%,94%{background:#0F9488}100%{background:#E9EBF2}}
.u-timer{font-family:Archivo;font-weight:800;font-size:1.5em;letter-spacing:-.03em;color:#0F9488}
.u-timer small{font-size:.5em;color:var(--udim);font-weight:700;margin-left:.3em}

/* ── phone frame, for the two app builds ─────────────────── */
.phone{height:100%;aspect-ratio:9/18.4;margin:0 auto;border-radius:2.2em;background:#0B0A10;
  padding:.5em;box-shadow:0 -10px 60px -14px rgba(0,0,0,.5);position:relative;
  transform:translateY(16px);transition:transform 1s var(--ease)}
.cs-slide.on .phone{transform:translateY(0)}
.phone{container-type:inline-size}
.phone .screen{height:100%;border-radius:1.8em;overflow:hidden;background:#fff;position:relative;
  display:flex;flex-direction:column;font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:clamp(6px,5.6cqw,14px);color:#161A23}
.phone .notch{position:absolute;top:.5em;left:50%;transform:translateX(-50%);width:28%;height:1.1em;
  border-radius:0 0 .7em .7em;background:#0B0A10;z-index:3}
.p-top{height:2.6em;flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 1.1em .35em;font-size:.78em;font-weight:700;color:#6B7280}
.p-hd{padding:.6em 1.1em .5em;display:flex;align-items:center;justify-content:space-between}
.p-hd b{font-family:Archivo;font-size:1.12em;font-weight:800;letter-spacing:-.025em}
.p-hd span{width:1.7em;height:1.7em;border-radius:50%;background:#EEF0F6;display:block}

/* ── 4 · Soriz — twenty companions, each with a personality ─ */
.ui-sor .screen{background:#fff}
.p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em;padding:.3em 1.1em .7em}
.p-grid i{aspect-ratio:1;border-radius:.8em;display:grid;place-items:center;font-style:normal;
  font-size:.82em;font-weight:800;color:#fff;opacity:.3;transform:scale(.88);
  animation:wake 9s var(--ease-soft) infinite}
.p-grid i:nth-child(n){animation-delay:calc(var(--i) * .09s)}
@keyframes wake{0%{opacity:.3;transform:scale(.88)}
  26%,100%{opacity:1;transform:scale(1)}}
.p-chat{flex:1;background:#F7F8FA;border-top:1px solid #E8EAF0;padding:.8em 1.1em;
  display:flex;flex-direction:column;gap:.5em;justify-content:flex-end}
.p-msg{max-width:84%;font-size:.87em;line-height:1.45;padding:.6em .75em;border-radius:1em;
  opacity:0;transform:translateY(.6em);animation:pop 9s var(--ease-soft) infinite}
.p-msg.them{background:#fff;border:1px solid #E8EAF0;border-bottom-left-radius:.3em;
  align-self:flex-start;animation-delay:1.1s}
.p-msg.me{background:#DB2777;color:#fff;border-bottom-right-radius:.3em;align-self:flex-end;
  animation-delay:2.3s}
.p-msg.them2{background:#fff;border:1px solid #E8EAF0;border-bottom-left-radius:.3em;
  align-self:flex-start;animation-delay:3.4s}
@keyframes pop{0%,10%{opacity:0;transform:translateY(.6em)}
  18%,94%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(.6em)}}
.p-who{display:flex;align-items:center;gap:.5em;padding:0 1.1em .55em}
.p-who i{width:1.9em;height:1.9em;border-radius:50%;background:#DB2777;flex:none;display:grid;
  place-items:center;color:#fff;font-size:.78em;font-weight:800;font-style:normal}
.p-who b{font-size:.92em;font-weight:700;display:block}
.p-who small{font-size:.78em;color:#6B7280;font-weight:600;display:block}

/* ── 5 · Ubique — the stylist that tells you not to buy ───── */
.ui-ubq .screen{background:#fff}
.p-shot{height:38%;flex:none;background:linear-gradient(160deg,#F3EFE9,#E4DCD2);position:relative;
  display:grid;place-items:center}
.p-shot .garment{width:44%;aspect-ratio:3/4;border-radius:.6em;background:#C2410C;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.4)}
.p-scan{position:absolute;left:0;right:0;height:2px;background:rgba(194,65,12,.85);
  box-shadow:0 0 16px 3px rgba(194,65,12,.5);top:0;
  animation:scan 9s var(--ease-soft) infinite}
@keyframes scan{0%{top:0;opacity:0}6%{opacity:1}30%{top:100%;opacity:1}36%,100%{opacity:0}}
.p-verdict{margin:.8em 1.1em 0;border-radius:.8em;padding:.8em .9em;background:#FEF2F2;
  border:1px solid #FBD5D5;opacity:0;transform:translateY(.7em);
  animation:pop 9s var(--ease-soft) infinite;animation-delay:2.4s}
.p-verdict b{display:flex;align-items:center;gap:.45em;font-family:Archivo;font-size:1.02em;
  font-weight:800;color:#B42318}
.p-verdict b i{width:1.15em;height:1.15em;border-radius:50%;background:#B42318;display:grid;
  place-items:center;color:#fff;font-size:.72em;font-style:normal;flex:none}
.p-verdict p{margin-top:.4em;font-size:.86em;line-height:1.46;color:#7A2E2A}
.p-reasons{padding:.7em 1.1em 0;display:flex;flex-direction:column;gap:.4em}
.p-reasons span{font-size:.84em;color:#39415A;display:flex;gap:.5em;align-items:flex-start;
  opacity:0;animation:pop 9s var(--ease-soft) infinite}
.p-reasons span:nth-child(1){animation-delay:3.1s}
.p-reasons span:nth-child(2){animation-delay:3.5s}
.p-reasons span:nth-child(3){animation-delay:3.9s}
.p-reasons span::before{content:"";width:.4em;height:.4em;border-radius:50%;background:#C2410C;
  flex:none;margin-top:.52em}
.p-bar{margin-top:auto;padding:.8em 1.1em 1.1em;display:flex;gap:.5em}
.p-bar b{flex:1;text-align:center;font-size:.86em;font-weight:700;padding:.65em;border-radius:.7em;
  background:#161A23;color:#fff}
.p-bar span{flex:1;text-align:center;font-size:.86em;font-weight:700;padding:.65em;
  border-radius:.7em;border:1px solid #E8EAF0;color:#6B7280}