/* ============================================================
   Hero mockup video — Perceptive Console
   Compact 4:3.2 mockup, 5 industry scenes auto-cycling
   ============================================================ */

.mockup-frame{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  background:#15171a;
  border-radius:0;
  overflow:hidden;
  font-family:var(--sans);
}

/* ---------- Window chrome ---------- */
.mockup-bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  background:#1c1f23;
  border-bottom:1px solid rgba(253,246,226,.06);
  color:rgba(253,246,226,.6);
  font-size:11.5px;
  flex:0 0 auto;
}
.mockup-bar .dots{display:flex;gap:5px}
.mockup-bar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(253,246,226,.16);display:block}
.mockup-bar .dots i:nth-child(1){background:#e07a6d}
.mockup-bar .dots i:nth-child(2){background:#e0c26d}
.mockup-bar .dots i:nth-child(3){background:#7dc88a}
.mockup-bar .url{
  flex:1;display:flex;align-items:center;gap:8px;justify-content:center;
  padding:5px 12px;border-radius:0;
  background:rgba(253,246,226,.05);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.01em;
  max-width:360px;margin:0 auto;
}
.mockup-bar .url .live{
  width:6px;height:6px;border-radius:50%;background:#9be3a2;
  box-shadow:0 0 0 3px rgba(155,227,162,.18);
  animation:pulse-live 1.6s ease-in-out infinite;
  flex:0 0 auto;
}
.mockup-bar .url .industry-name{color:var(--cream);font-weight:500}
.mockup-bar .right{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(253,246,226,.35);flex:0 0 auto}
@keyframes pulse-live{
  0%,100%{box-shadow:0 0 0 3px rgba(155,227,162,.16)}
  50%{box-shadow:0 0 0 6px rgba(155,227,162,.02)}
}

/* ---------- Console layout: sidebar + stage ---------- */
.mockup-body{
  flex:1;display:grid;grid-template-columns:144px 1fr;
  background:#15171a;color:var(--cream);
  min-height:0;
}
@media (max-width:560px){ .mockup-body{grid-template-columns:88px 1fr} }

.mockup-side{
  background:#181b1e;border-right:1px solid rgba(253,246,226,.06);
  padding:16px 10px;display:flex;flex-direction:column;gap:14px;
  min-width:0;
}
.side-h{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(253,246,226,.4);
  padding:0 6px;
}
.side-list{display:flex;flex-direction:column;gap:3px}
.side-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:0;
  font-size:12.5px;color:rgba(253,246,226,.65);
  transition:background .25s, color .25s;
  cursor:default;
}
.side-item .ic{
  width:22px;height:22px;border-radius:0;background:rgba(253,246,226,.06);
  display:grid;place-items:center;font-family:var(--display);font-size:11px;color:rgba(253,246,226,.75);
  flex:0 0 auto;
  transition:background .25s, color .25s;
}
.side-item.active{background:rgba(253,246,226,.08);color:var(--cream)}
.side-item.active .ic{background:var(--cream);color:#15171a}
.side-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-item .pulse{
  width:6px;height:6px;border-radius:50%;background:#9be3a2;
  box-shadow:0 0 0 3px rgba(155,227,162,.18);
  animation:pulse-live 1.6s ease-in-out infinite;
  flex:0 0 auto;
  opacity:0;
}
.side-item.active .pulse{opacity:1}
.side-foot{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:0;background:rgba(253,246,226,.04);
  font-size:11px;color:rgba(253,246,226,.5);
}
.side-foot .av{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#d6a86a,#a87a44)}
@media (max-width:560px){
  .side-item .lbl{display:none}
  .side-foot .nm{display:none}
}

/* ---------- Stage (where scenes live) ---------- */
.mockup-stage{
  position:relative;overflow:hidden;
  background:#15171a;
  min-width:0;min-height:0;
}
.scene{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .55s ease;
  pointer-events:none;
  display:flex;flex-direction:column;
}
.scene.is-active{opacity:1;pointer-events:auto}

/* Scene header (industry context) */
.scene-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px 10px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(253,246,226,.5);
  flex:0 0 auto;
}
.scene-head .l{display:flex;align-items:center;gap:8px}
.scene-head .l .num{font-family:var(--display);color:rgba(253,246,226,.4)}
.scene-head .r{font-size:10.5px;color:rgba(253,246,226,.4)}
.scene-body{flex:1;padding:6px 18px 18px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:hidden}

/* Universal "thinking" indicator */
.thinking{display:inline-flex;align-items:center;gap:6px;color:rgba(253,246,226,.55);font-size:11.5px}
.thinking i{width:4px;height:4px;border-radius:50%;background:rgba(253,246,226,.55);animation:dot 1.2s ease-in-out infinite}
.thinking i:nth-child(2){animation-delay:.15s}
.thinking i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

/* ============================================================
   SCENE 1 — LOGISTICS · Lane quote
   ============================================================ */
.s-logistics .map{
  position:relative;flex:0 0 44%;border-radius:0;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 40%, #1f2227 0%, #131517 75%);
  border:1px solid rgba(253,246,226,.06);
}
.s-logistics .map::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(253,246,226,.08) 1px, transparent 1.2px);
  background-size:18px 18px;
  mask-image:radial-gradient(80% 70% at 50% 50%, #000 40%, transparent 100%);
}
.s-logistics .map svg{position:absolute;inset:0;width:100%;height:100%}
.s-logistics .route-path{
  stroke:#fdf6e2;stroke-width:1.4;fill:none;
  stroke-dasharray:600;stroke-dashoffset:600;
  filter:drop-shadow(0 0 5px rgba(253,246,226,.45));
}
.is-active .s-logistics .route-path{animation:draw 1.8s 0.6s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.s-logistics .pin{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--cream);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  opacity:0;
}
.s-logistics .pin .dot{
  width:10px;height:10px;border-radius:50%;background:#fdf6e2;
  box-shadow:0 0 0 3px rgba(253,246,226,.2),0 0 0 9px rgba(253,246,226,.06);
}
.s-logistics .pin.lax{left:14%;top:64%}
.s-logistics .pin.chi{right:14%;top:24%}
.is-active .s-logistics .pin.lax{animation:fade-in .5s .2s ease-out forwards}
.is-active .s-logistics .pin.chi{animation:fade-in .5s .4s ease-out forwards}

.s-logistics .truck{
  position:absolute;left:0;top:0;
  width:22px;height:22px;border-radius:0;background:#fdf6e2;color:#15171a;
  display:grid;place-items:center;
  font-family:var(--display);font-size:11px;font-weight:600;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5);
  opacity:0;
}
.is-active .s-logistics .truck{
  animation:truck-go 2.8s 1.6s cubic-bezier(.5,.05,.5,1) forwards;
}
@keyframes truck-go{
  0%{opacity:0;offset-distance:0%}
  10%{opacity:1}
  100%{opacity:1;offset-distance:100%}
}
.s-logistics .map-tag{
  position:absolute;left:12px;top:12px;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);
  padding:5px 9px;border-radius:0;
  font-size:10px;color:rgba(253,246,226,.65);letter-spacing:.14em;text-transform:uppercase;
}
.s-logistics .map-tag .d{width:5px;height:5px;border-radius:50%;background:#9be3a2;box-shadow:0 0 0 3px rgba(155,227,162,.16)}

/* Quote card */
.s-logistics .quote{
  background:linear-gradient(180deg, rgba(253,246,226,.03), rgba(253,246,226,.01));
  border:1px solid rgba(253,246,226,.08);border-radius:0;
  padding:14px;display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(8px);
}
.is-active .s-logistics .quote{animation:fade-up .5s 2.4s ease-out forwards}
.s-logistics .quote-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.s-logistics .quote-h .t{font-family:var(--display);font-size:15px;letter-spacing:-.01em;color:var(--cream)}
.s-logistics .quote-h .p{font-family:var(--display);font-size:22px;letter-spacing:-.02em;color:var(--cream);font-feature-settings:"tnum"}
.s-logistics .quote-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.s-logistics .quote-grid .c{display:flex;flex-direction:column;gap:3px}
.s-logistics .quote-grid .l{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(253,246,226,.4)}
.s-logistics .quote-grid .v{font-size:12px;color:var(--cream)}
.s-logistics .book{
  margin-top:2px;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px;border-radius:0;background:var(--cream);color:#15171a;
  font-weight:500;font-size:12.5px;
  opacity:0;transform:translateY(8px);
}
.is-active .s-logistics .book{animation:fade-up .4s 3.4s ease-out forwards}

/* ============================================================
   SCENE 2 — RETAIL · Basket substitution
   ============================================================ */
.s-retail .basket-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.s-retail .basket-h h4{font-family:var(--display);font-size:17px;letter-spacing:-.02em;color:var(--cream);margin:0}
.s-retail .basket-h .total{font-family:var(--display);font-size:17px;color:var(--cream);font-feature-settings:"tnum"}

.s-retail .rows{display:flex;flex-direction:column;gap:6px;position:relative;flex:0 0 auto}
.s-retail .row{
  display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:0;background:rgba(253,246,226,.04);
  border:1px solid rgba(253,246,226,.06);font-size:12px;color:var(--cream);
  opacity:0;transform:translateY(6px);
}
.s-retail .row .sw{width:28px;height:28px;border-radius:0}
.s-retail .row .sw.a{background:linear-gradient(135deg,#d6a86a,#a87a44)}
.s-retail .row .sw.b{background:linear-gradient(135deg,#5f7d4a,#3e5630)}
.s-retail .row .sw.c{background:linear-gradient(135deg,#c75d63,#8a3942)}
.s-retail .row .sw.d{background:linear-gradient(135deg,#e8e1c8,#bbb39a)}
.s-retail .row .price{font-feature-settings:"tnum"}
.s-retail .row .oos{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(199,93,99,.18);color:#f0a8ac;padding:3px 7px;border-radius:0;
  opacity:0;
}
.is-active .s-retail .row.r1{animation:fade-up .35s .3s ease-out forwards}
.is-active .s-retail .row.r2{animation:fade-up .35s .5s ease-out forwards}
.is-active .s-retail .row.r3{animation:fade-up .35s .7s ease-out forwards}
.is-active .s-retail .row.r4{animation:fade-up .35s .9s ease-out forwards}
.is-active .s-retail .row.r3 .price{animation:fade-out .25s 1.6s ease-out forwards}
.is-active .s-retail .row.r3 .oos{animation:fade-in .35s 1.7s ease-out forwards}
.is-active .s-retail .row.r3{
  animation:fade-up .35s .7s ease-out forwards, row-flag .4s 1.7s ease-out forwards;
}
@keyframes row-flag{to{background:rgba(199,93,99,.10);border-color:rgba(199,93,99,.3)}}

/* AI popup (substitution suggestion) */
.s-retail .ai-pop{
  margin-top:auto;
  background:linear-gradient(180deg, #fdf6e2, #f4ecd5);
  color:#15171a;border-radius:0;padding:12px 14px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.5);
  opacity:0;transform:translateY(20px);
}
.is-active .s-retail .ai-pop{animation:fade-up .5s 2.4s ease-out forwards, fade-out .35s 4.2s ease-out forwards}
.s-retail .ai-pop .sparkle{
  width:26px;height:26px;border-radius:0;background:#15171a;color:var(--cream);
  display:grid;place-items:center;font-family:var(--display);font-size:13px;flex:0 0 auto;
}
.s-retail .ai-pop .copy{flex:1;line-height:1.35;min-width:0}
.s-retail .ai-pop .copy .lbl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(35,38,40,.55);display:block;margin-bottom:2px}
.s-retail .ai-pop .copy .t{font-size:12.5px;color:#15171a}
.s-retail .ai-pop .copy .t b{font-weight:500}
.s-retail .ai-pop .actions{display:flex;gap:6px;flex:0 0 auto}
.s-retail .ai-pop .actions .btn{
  padding:7px 10px;border-radius:0;font-size:11.5px;font-weight:500;
  background:#15171a;color:var(--cream);border:0;cursor:pointer;
}
.s-retail .ai-pop .actions .btn.gh{background:transparent;color:rgba(35,38,40,.6);border:1px solid rgba(35,38,40,.18)}

.s-retail .ai-done{
  position:absolute;left:18px;right:18px;bottom:18px;
  background:#1e3a2a;color:#cbeed1;border-radius:0;
  padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:12.5px;
  opacity:0;transform:translateY(20px);
  border:1px solid rgba(155,227,162,.2);
}
.is-active .s-retail .ai-done{animation:fade-up .5s 4.5s ease-out forwards}
.s-retail .ai-done .check{width:22px;height:22px;border-radius:50%;background:#9be3a2;color:#1e3a2a;display:grid;place-items:center;font-size:12px;font-weight:600;flex:0 0 auto}
.s-retail .ai-done b{color:var(--cream);font-weight:500}

/* ============================================================
   SCENE 3 — TELECOM · Plan picker
   ============================================================ */
.s-telecom .ask{
  align-self:flex-end;max-width:78%;
  background:#fdf6e2;color:#15171a;padding:9px 14px;border-radius:0;
  font-size:12.5px;line-height:1.4;
  opacity:0;transform:translateY(8px);
}
.is-active .s-telecom .ask{animation:fade-up .45s .3s ease-out forwards}

.s-telecom .searching{
  display:flex;align-items:center;gap:9px;color:rgba(253,246,226,.55);font-size:11px;
  opacity:0;
}
.s-telecom .searching .bar{flex:1;max-width:180px;height:3px;border-radius:0;background:rgba(253,246,226,.1);overflow:hidden;position:relative}
.s-telecom .searching .bar::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--cream),transparent);animation:shimmer 1.4s ease-in-out infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.is-active .s-telecom .searching{animation:fade-in .3s 1s ease-out forwards, fade-out .3s 2.1s ease-out forwards}

.s-telecom .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1;min-height:0}
.s-telecom .plan{
  background:rgba(253,246,226,.04);border:1px solid rgba(253,246,226,.10);
  border-radius:0;padding:14px 12px 14px;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(14px);
  position:relative;
  min-width:0;
}
.s-telecom .plan .name{font-family:var(--display);font-size:13px;letter-spacing:-.01em;color:var(--cream)}
.s-telecom .plan .price{font-family:var(--display);font-size:24px;letter-spacing:-.02em;line-height:1;color:var(--cream)}
.s-telecom .plan .price em{font-family:var(--sans);font-style:normal;font-size:10.5px;color:rgba(253,246,226,.5);margin-left:3px}
.s-telecom .plan ul{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:3px;font-size:11px;color:rgba(253,246,226,.6)}
.s-telecom .plan ul li::before{content:"·  ";color:rgba(253,246,226,.4)}
.s-telecom .plan.best{
  background:linear-gradient(180deg,rgba(253,246,226,.14),rgba(253,246,226,.05));
  border-color:rgba(253,246,226,.42);
}
.s-telecom .plan .badge{
  position:absolute;top:-9px;left:12px;
  background:var(--cream);color:#15171a;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 7px;border-radius:0;font-weight:500;
  opacity:0;transform:translateY(-3px);
}
.is-active .s-telecom .plan.p1{animation:fade-up .5s 2.2s ease-out forwards}
.is-active .s-telecom .plan.p2{animation:fade-up .5s 2.4s ease-out forwards}
.is-active .s-telecom .plan.p3{animation:fade-up .5s 2.6s ease-out forwards}
.is-active .s-telecom .plan.best .badge{animation:fade-up .4s 3.4s ease-out forwards}

.s-telecom .foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;flex:0 0 auto;
}
.s-telecom .cover{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:0;
  background:rgba(155,227,162,.10);border:1px solid rgba(155,227,162,.22);
  color:#cbeed1;font-size:11px;
  opacity:0;
}
.s-telecom .cover .d{width:5px;height:5px;border-radius:50%;background:#9be3a2}
.is-active .s-telecom .cover{animation:fade-in .4s 3.8s ease-out forwards}
.s-telecom .port{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:0;background:var(--cream);color:#15171a;
  font-weight:500;font-size:12px;
  opacity:0;transform:translateY(10px);
}
.is-active .s-telecom .port{animation:fade-up .5s 4.2s ease-out forwards}

/* ============================================================
   SCENE 4 — INSURANCE · FNOL triage
   ============================================================ */
.s-insurance .body{
  flex:1;display:grid;grid-template-columns:.8fr 1.2fr;gap:14px;min-height:0;
}
.s-insurance .photo{
  border-radius:0;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#3a3f45,#1d2024);
  border:1px solid rgba(253,246,226,.08);
  opacity:0;transform:translateY(8px);
}
.is-active .s-insurance .photo{animation:fade-up .5s .3s ease-out forwards}
.s-insurance .photo svg{position:absolute;inset:0;width:100%;height:100%}
.s-insurance .scan{
  position:absolute;left:0;right:0;height:50%;top:-50%;
  background:linear-gradient(180deg,transparent,rgba(155,227,162,.32) 80%,transparent);
  mix-blend-mode:screen;
}
.is-active .s-insurance .scan{animation:scan 1.8s 1.2s ease-in-out forwards}
@keyframes scan{0%{top:-50%}100%{top:100%}}
.s-insurance .bbox{
  position:absolute;left:42%;top:48%;width:46%;height:32%;
  border:1.5px solid #9be3a2;border-radius:0;
  box-shadow:0 0 0 4px rgba(155,227,162,.12);
  opacity:0;
}
.s-insurance .bbox::after{
  content:"Rear bumper · 0.96";
  position:absolute;left:0;top:-20px;
  background:#9be3a2;color:#15171a;font-size:9.5px;letter-spacing:.04em;padding:3px 6px;border-radius:0;font-weight:500;
}
.is-active .s-insurance .bbox{animation:fade-in .4s 2.8s ease-out forwards}
.s-insurance .photo-tag{
  position:absolute;left:10px;top:10px;
  font-size:10px;color:rgba(253,246,226,.6);letter-spacing:.14em;text-transform:uppercase;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:4px 8px;border-radius:0;
}

.s-insurance .info{
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.s-insurance .info h4{font-family:var(--display);font-size:17px;letter-spacing:-.02em;color:var(--cream);margin:0;line-height:1.15}
.s-insurance .grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.s-insurance .cell{
  background:rgba(253,246,226,.04);border:1px solid rgba(253,246,226,.08);border-radius:0;padding:8px 10px;
  opacity:0;transform:translateY(8px);min-width:0;
}
.s-insurance .cell .l{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(253,246,226,.45)}
.s-insurance .cell .v{font-family:var(--display);font-size:13.5px;letter-spacing:-.01em;margin-top:2px;color:var(--cream)}
.is-active .s-insurance .cell:nth-child(1){animation:fade-up .35s 3.2s ease-out forwards}
.is-active .s-insurance .cell:nth-child(2){animation:fade-up .35s 3.4s ease-out forwards}
.is-active .s-insurance .cell:nth-child(3){animation:fade-up .35s 3.6s ease-out forwards}
.is-active .s-insurance .cell:nth-child(4){animation:fade-up .35s 3.8s ease-out forwards}

.s-insurance .steps{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}
.s-insurance .step{
  display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:0;
  background:rgba(253,246,226,.04);border:1px solid rgba(253,246,226,.1);color:rgba(253,246,226,.6);
  font-size:10.5px;
  opacity:0;
}
.s-insurance .step .c{width:12px;height:12px;border-radius:50%;background:rgba(253,246,226,.14);display:grid;place-items:center;font-size:8px;color:rgba(253,246,226,.6)}
.s-insurance .step.done{background:rgba(155,227,162,.10);border-color:rgba(155,227,162,.32);color:#cbeed1}
.s-insurance .step.done .c{background:#9be3a2;color:#1e3a2a}
.is-active .s-insurance .step:nth-child(1){animation:fade-in .3s 4.2s ease-out forwards}
.is-active .s-insurance .step:nth-child(2){animation:fade-in .3s 4.4s ease-out forwards}
.is-active .s-insurance .step:nth-child(3){animation:fade-in .3s 4.6s ease-out forwards}

/* ============================================================
   SCENE 5 — HEALTH · Booking
   ============================================================ */
.s-health .search{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:0;
  background:rgba(253,246,226,.04);border:1px solid rgba(253,246,226,.08);font-size:12.5px;color:var(--cream);
  flex:0 0 auto;
}
.s-health .search .ico{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(253,246,226,.5);flex:0 0 auto}
.s-health .search .typed::after{content:"▍";color:rgba(253,246,226,.4);margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.s-health .docs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s-health .doc{
  background:rgba(253,246,226,.04);border:1px solid rgba(253,246,226,.08);border-radius:0;padding:10px;
  display:flex;flex-direction:column;gap:5px;
  opacity:0;transform:translateY(12px);
  transition:border-color .3s, transform .3s, box-shadow .3s;
  min-width:0;
}
.s-health .doc .av{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#8a96a3,#4f5963);
  display:grid;place-items:center;color:var(--cream);font-family:var(--display);font-size:13px;
}
.s-health .doc .name{font-family:var(--display);font-size:13px;letter-spacing:-.01em;color:var(--cream)}
.s-health .doc .sub{font-size:10.5px;color:rgba(253,246,226,.55)}
.s-health .doc .meta{display:flex;align-items:center;gap:5px;font-size:10.5px;color:rgba(253,246,226,.7)}
.s-health .doc .meta .star{color:#e0c26d}
.is-active .s-health .doc.d1{animation:fade-up .4s .9s ease-out forwards}
.is-active .s-health .doc.d2{animation:fade-up .4s 1.1s ease-out forwards, doc-pick .4s 2.4s ease-out forwards}
.is-active .s-health .doc.d3{animation:fade-up .4s 1.3s ease-out forwards}
@keyframes doc-pick{to{border-color:var(--cream);box-shadow:0 0 0 1.5px var(--cream);transform:translateY(-2px)}}

.s-health .slots{display:flex;gap:6px;flex-wrap:wrap}
.s-health .slot{
  font-size:11px;padding:6px 10px;border-radius:0;background:rgba(253,246,226,.04);
  border:1px solid rgba(253,246,226,.08);color:var(--cream);font-feature-settings:"tnum";
  opacity:0;transform:translateY(6px);
}
.is-active .s-health .slot:nth-child(1){animation:fade-up .3s 2.8s ease-out forwards}
.is-active .s-health .slot:nth-child(2){animation:fade-up .3s 2.95s ease-out forwards}
.is-active .s-health .slot:nth-child(3){animation:fade-up .3s 3.1s ease-out forwards, slot-pick .4s 3.8s ease-out forwards}
.is-active .s-health .slot:nth-child(4){animation:fade-up .3s 3.25s ease-out forwards}
.is-active .s-health .slot:nth-child(5){animation:fade-up .3s 3.4s ease-out forwards}
@keyframes slot-pick{to{background:var(--cream);color:#15171a;border-color:var(--cream)}}

.s-health .confirm{
  margin-top:auto;display:flex;align-items:center;gap:10px;
  background:#1e3a2a;color:#cbeed1;border-radius:0;padding:11px 13px;font-size:12.5px;
  opacity:0;transform:translateY(10px);
  border:1px solid rgba(155,227,162,.2);
}
.s-health .confirm .check{width:20px;height:20px;border-radius:50%;background:#9be3a2;color:#1e3a2a;display:grid;place-items:center;font-size:11px;font-weight:600;flex:0 0 auto}
.s-health .confirm b{color:var(--cream);font-weight:500}
.is-active .s-health .confirm{animation:fade-up .5s 4.4s ease-out forwards}

/* ============================================================
   Shared keyframes
   ============================================================ */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}