/* ==========================================================================
   #usecases · CONTENT.md §4 Use-case discovery. Every rule is scoped under
   #usecases. Layout rhythm follows the reference carousel: two-tone 96px
   heading, numbered tab strip with a 3px progress indicator, a full-bleed
   stage with an overlapping accent card + dark icon tile in a stepped
   composition, clip-path wipes on change.
   Stage illustrations are sized in "design px": inside .uc-art, --k = one
   design px (art = 600 x 480), so each scene scales as one picture.
   Palette: apricot accent, violet = working, gold (--ok) = done. No green/teal.
   ========================================================================== */
#usecases{
  --uc-line:#3a3936;
  --uc-body:#b5aca5;
  --uc-stage:#1c1b1a;
  --uc-win:#222120;
  --uc-bar:#272523;
  --uc-panel:#1b1a19;
  --uc-raise:#262422;
  --uc-raise-2:#2e2b29;
  --uc-skel:#363330;
  --uc-dim:#4a4643;
  --uc-ease:cubic-bezier(.165,.84,.44,1);
  --uc-card:470px;
  --uc-tile:140px;
  --uc-pad:56px;
  --uc-vh:clamp(540px, calc(100vh - 220px), 700px);
  --uc-ph:calc(var(--uc-vh) + 70px);
  --uc-lm:max(var(--gutter), calc((100% - var(--container))/2));
  --uc-aw:min(820px, calc(100% - 2*var(--uc-lm) - var(--uc-card) - 48px), calc((var(--uc-vh) - 48px)*1.25));
  position:relative;
  overflow:hidden;
  padding-bottom:clamp(96px,10vw,152px);
  background:var(--bg);
  color:var(--fg);
}
@supports (height:100svh){#usecases{--uc-vh:clamp(540px, calc(100svh - 220px), 700px)}}

/* ---------- heading ---------- */
#usecases .uc-head{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-top:clamp(96px,10vw,152px);
}
#usecases .uc-title{padding-left:calc((100% - 11*24px)/12 + 24px)}
#usecases .uc-line{display:block;text-wrap:balance}

#usecases .uc-play{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  height:32px;padding:0 12px;margin-bottom:6px;border-radius:99px;
  font-size:12px;line-height:1;color:var(--taupe);
  box-shadow:inset 0 0 0 1px var(--uc-line);
  transition:color .2s var(--ease),box-shadow .2s var(--ease);
}
#usecases .uc-play[hidden]{display:none}
#usecases .uc-play:hover{color:var(--fg);box-shadow:inset 0 0 0 1px #5a5550}
#usecases .uc-play__play{display:none}
#usecases .uc-play.is-paused .uc-play__play{display:block}
#usecases .uc-play.is-paused .uc-play__pause{display:none}

/* ---------- tab strip ---------- */
#usecases .uc-strip{margin-top:72px;border-top:1px solid var(--uc-line)}
#usecases .uc-tabs{
  position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0 calc((100% - 11*24px)/12 + 24px);
}
#usecases .uc-tab{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:12px;
  min-height:120px;padding:22px 24px 20px;
  border-left:1px solid var(--uc-line);
  text-align:left;color:#b9b0a9;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
#usecases .uc-tab:last-child{border-right:1px solid var(--uc-line)}
#usecases .uc-tab:hover{background:rgba(255,255,255,.04);color:var(--fg)}
#usecases .uc-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:0}
#usecases .uc-tab[aria-selected="true"]{color:var(--fg)}
#usecases .uc-tab__bar{position:absolute;top:-1px;left:0;width:100%;height:3px;background:var(--uc-line);opacity:0;transition:opacity .2s var(--ease)}
#usecases .uc-tab__fill{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left center}
#usecases .uc-tab[aria-selected="true"] .uc-tab__bar{opacity:1}
#usecases.uc-static .uc-tab[aria-selected="true"] .uc-tab__fill{transform:none}
#usecases .uc-tab__num{font-size:12px;line-height:1;color:var(--taupe);transition:color .2s var(--ease)}
#usecases .uc-tab[aria-selected="true"] .uc-tab__num{color:var(--accent)}
#usecases .uc-tab__t{display:block;font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.01em;text-wrap:balance}

/* ---------- panel / stage ---------- */
#usecases .uc-panel{
  position:relative;container-type:inline-size;
  width:100%;max-width:2000px;height:var(--uc-ph);margin:0 auto;
  touch-action:pan-y pinch-zoom;
}
#usecases .uc-stage{
  position:relative;height:var(--uc-vh);overflow:hidden;
  background:
    radial-gradient(60% 70% at 20% 0%,rgba(255,143,90,.06),transparent 70%),
    linear-gradient(180deg,#1f1e1d,var(--uc-stage));
}
#usecases .uc-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#usecases .uc-stage__grid{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(234,227,221,.075) 1px,transparent 1.3px);
  background-size:24px 24px;background-position:12px 12px;
  -webkit-mask-image:radial-gradient(75% 85% at 65% 50%,#000 30%,transparent 100%);
          mask-image:radial-gradient(75% 85% at 65% 50%,#000 30%,transparent 100%);
}
/* caption label: rides in an art-sized wrapper so it sits in the empty band above the app window (art top-left) and moves with the art */
#usecases .uc-art--label{z-index:5;pointer-events:none}
#usecases .uc-illus{
  position:absolute;left:0;top:calc(4*var(--k));
  padding:7px 11px;border-radius:99px;background:rgba(24,24,24,.72);box-shadow:inset 0 0 0 1px var(--uc-line);
  font-size:12px;line-height:1;color:var(--taupe);
}
#usecases .uc-layer{position:absolute;left:0;right:0;top:-24px;bottom:-24px;will-change:transform}

#usecases .uc-scene{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transform:translate3d(56px,0,0);
  transition:opacity .45s var(--ease),transform .9s var(--uc-ease),visibility 0s linear .9s;
}
#usecases .uc-scene::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(42% 50% at 70% 52%,var(--glow,rgba(255,143,90,.14)),transparent 72%);
}
#usecases .uc-scene.is-active{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .8s var(--uc-ease) .2s,transform 1.1s var(--uc-ease) .2s,visibility 0s;
}
#usecases .uc-scene.is-prev{
  opacity:0;visibility:visible;transform:translate3d(-56px,0,0);
  transition:opacity .45s var(--ease),transform .8s var(--uc-ease),visibility 0s;
}

/* the illustration itself */
#usecases .uc-art{
  position:absolute;top:50%;left:calc(var(--uc-lm) + var(--uc-card) + (100% - 2*var(--uc-lm) - var(--uc-card) - var(--uc-aw))/2);
  width:var(--uc-aw);aspect-ratio:600 / 480;transform:translateY(-50%);
  container-type:inline-size;
}
#usecases .uc-art > *{--k:calc(100cqw / 600)}


/* ---------- tile + card ---------- */
#usecases .uc-tile{
  position:absolute;z-index:30;
  left:var(--uc-lm);top:max(0px, calc(var(--uc-ph) - var(--uc-card) - var(--uc-tile)));
  width:var(--uc-tile);height:var(--uc-tile);border-radius:8px;background:#000;
}
#usecases .uc-ico{
  position:absolute;inset:0;margin:auto;width:46%;height:46%;visibility:hidden;
  fill:none;stroke:var(--cream);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
#usecases .uc-ico .uc-ico__a{stroke:var(--accent)}
#usecases .uc-ico.is-active{visibility:visible}

#usecases .uc-card{
  position:absolute;z-index:40;left:var(--uc-lm);top:calc(var(--uc-ph) - var(--uc-card));
  width:var(--uc-card);height:var(--uc-card);
  display:grid;padding:var(--uc-pad);border-radius:8px;
  background:var(--accent);color:var(--accent-ink);
}
#usecases .uc-slide{
  grid-area:1/1;min-height:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  visibility:hidden;
}
#usecases .uc-slide.is-active{visibility:visible}
/* the card stays put; its copy and the tile icon crossfade (old fades out while new fades in) */
#usecases.uc-anim .uc-slide{opacity:0;transform:translate3d(0,14px,0);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
#usecases.uc-anim .uc-slide.is-active{opacity:1;transform:none;transition:opacity .6s var(--uc-ease) .08s,transform .9s var(--uc-ease) .08s,visibility 0s}
#usecases.uc-anim .uc-ico{opacity:0;transform:scale(.9);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
#usecases.uc-anim .uc-ico.is-active{opacity:1;transform:none;transition:opacity .55s var(--uc-ease) .08s,transform .8s var(--uc-ease) .08s,visibility 0s}
#usecases .uc-slide__t{margin-top:0;font-size:40px;line-height:1.02;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
#usecases .uc-slide__d{margin-top:18px;max-width:30ch;font-size:18px;line-height:1.45;font-weight:400}
#usecases .uc-link{
  align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:6px 0;
  font-family:var(--font-mono);font-weight:500;font-size:13px;line-height:1;text-transform:uppercase;
  color:var(--accent-ink);white-space:nowrap;
}
#usecases .uc-link:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
#usecases .uc-link__ico{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--accent-ink);color:var(--accent);
  transition:background-color .4s var(--ease-out),color .4s var(--ease-out);
}
#usecases .uc-link__ico svg{width:8px;height:6px;transition:transform .35s var(--ease-out)}
#usecases .uc-link:hover .uc-link__ico{background:var(--cream);color:var(--accent-ink)}
#usecases .uc-link:hover .uc-link__ico svg{transform:translateX(2px)}
#usecases .uc-link > span:first-child{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .35s var(--ease-out)}
#usecases .uc-link:hover > span:first-child{background-size:100% 1px}

/* ==========================================================================
   Illustration parts (design px via --k)
   ========================================================================== */
#usecases .uc-win{
  position:absolute;left:0;top:calc(52*var(--k));width:calc(300*var(--k));height:calc(392*var(--k));
  overflow:hidden;border-radius:calc(12*var(--k));background:var(--uc-win);
  box-shadow:inset 0 0 0 1px rgba(234,227,221,.06),0 calc(24*var(--k)) calc(60*var(--k)) rgba(0,0,0,.45);
  font-size:calc(12*var(--k));line-height:1.4;color:var(--fg);
}
#usecases .uc-win__bar{display:flex;align-items:center;gap:calc(10*var(--k));height:calc(30*var(--k));padding:0 calc(12*var(--k));background:var(--uc-bar);box-shadow:inset 0 -1px 0 rgba(234,227,221,.05)}
#usecases .uc-dots{display:flex;gap:calc(5*var(--k))}
#usecases .uc-dots i{width:calc(7*var(--k));height:calc(7*var(--k));border-radius:50%;background:#3e3b38}
#usecases .uc-win__name{font-size:max(11px,calc(11*var(--k)));color:var(--taupe);white-space:nowrap}

#usecases .uc-pn{
  position:absolute;left:calc(236*var(--k));top:calc(4*var(--k));width:calc(356*var(--k));height:calc(472*var(--k));
  display:flex;flex-direction:column;padding:calc(16*var(--k));
  border-radius:calc(14*var(--k));background:var(--uc-panel);
  box-shadow:inset 0 0 0 1px var(--uc-line),0 calc(30*var(--k)) calc(70*var(--k)) rgba(0,0,0,.55);
  font-size:calc(12.5*var(--k));line-height:1.4;color:var(--fg);
}
#usecases .uc-pn__head{display:flex;align-items:center;gap:calc(8*var(--k));height:calc(24*var(--k));flex:none}
#usecases .uc-mark{width:calc(22*var(--k));height:calc(22*var(--k));flex:none}
#usecases .uc-mark__bg{fill:var(--accent)}
#usecases .uc-mark__l{fill:none;stroke:var(--accent-ink);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
#usecases .uc-mark__o{fill:var(--accent-ink)}
#usecases .uc-pn__name{font-size:calc(14*var(--k));font-weight:600}
#usecases .uc-pill{
  position:relative;display:inline-flex;align-items:center;gap:calc(6*var(--k));margin-left:auto;
  height:calc(22*var(--k));padding:0 calc(9*var(--k));border-radius:99px;
  font-size:max(11px,calc(9.5*var(--k)));line-height:1;white-space:nowrap;
  background:rgba(255,210,138,.14);color:var(--ok);
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
#usecases .uc-pill .status-sq{--status-c:currentColor} /* status symbol: working = violet, ready for review = gold */
#usecases .uc-pill__a{display:none}

#usecases .uc-ask{display:flex;gap:calc(9*var(--k));margin-top:calc(14*var(--k));padding:calc(10*var(--k)) calc(12*var(--k));border-radius:calc(9*var(--k));background:var(--uc-raise);font-size:calc(13*var(--k));line-height:1.45;flex:none}
#usecases .uc-ask__k{flex:none;padding-top:calc(3*var(--k));font-size:max(11px,calc(9*var(--k)));line-height:1;color:var(--taupe)}
#usecases .uc-tw__a::after{content:"";display:none;width:calc(1.6*var(--k));height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--accent);border-radius:1px}
#usecases .uc-tw.is-typing .uc-tw__a::after{display:inline-block}

#usecases .uc-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6*var(--k));margin-top:calc(10*var(--k));flex:none}
#usecases .uc-ctx__k{font-size:max(11px,calc(9*var(--k)));line-height:1;color:var(--taupe);margin-right:calc(2*var(--k))}
#usecases .uc-chip{
  display:inline-flex;align-items:center;gap:calc(5*var(--k));height:calc(22*var(--k));padding:0 calc(8*var(--k)) 0 calc(6*var(--k));
  border-radius:calc(6*var(--k));background:var(--uc-raise);box-shadow:inset 0 0 0 1px rgba(234,227,221,.06);
  font-size:max(11px,calc(11*var(--k)));white-space:nowrap;
}
#usecases .uc-chip svg{width:calc(12*var(--k));height:calc(12*var(--k));fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

#usecases .uc-steps{margin-top:calc(12*var(--k));flex:none}
#usecases .uc-step{display:flex;align-items:center;gap:calc(9*var(--k));height:calc(24*var(--k));font-size:calc(12*var(--k));color:#d6cec7}
#usecases .uc-step__ic{flex:none;width:calc(14*var(--k));height:calc(14*var(--k))}
#usecases .uc-step__ic svg{width:100%;height:100%;overflow:visible}
#usecases .uc-ring{fill:var(--ok);stroke:var(--ok);stroke-width:1.4;transition:fill .35s var(--ease),stroke .35s var(--ease)}
#usecases .uc-spin{fill:none;stroke:var(--violet);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:9 29;opacity:0;transform-box:fill-box;transform-origin:center}
#usecases .uc-tick{fill:none;stroke:var(--accent-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10;stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease-out) .1s}

#usecases .uc-res{
  display:flex;flex-direction:column;flex:1;min-height:0;margin-top:calc(12*var(--k));padding:calc(12*var(--k));
  border-radius:calc(10*var(--k));background:#22201f;box-shadow:inset 0 0 0 1px rgba(234,227,221,.06);
}
#usecases .uc-res__head{display:flex;align-items:baseline;gap:calc(8*var(--k))}
#usecases .uc-res__head .mono{font-size:max(11px,calc(9*var(--k)));line-height:1;color:var(--accent)}
#usecases .uc-res__head b{font-size:calc(12.5*var(--k));font-weight:600}

#usecases .uc-acts{display:flex;align-items:center;justify-content:flex-end;gap:calc(7*var(--k));margin-top:auto;padding-top:calc(10*var(--k))}
#usecases .uc-acts__note{margin-right:auto;font-size:max(11.5px,calc(8.5*var(--k)));line-height:1.2;color:var(--taupe)}
#usecases .uc-btn{
  position:relative;display:inline-flex;align-items:center;gap:calc(5*var(--k));height:calc(28*var(--k));padding:0 calc(12*var(--k));
  border-radius:calc(6*var(--k));font-size:max(11px,calc(11.5*var(--k)));font-weight:600;line-height:1;white-space:nowrap;
}
#usecases .uc-btn svg{width:calc(11*var(--k));height:calc(11*var(--k));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
#usecases .uc-btn--alt{background:var(--uc-raise-2);color:var(--fg)}
#usecases .uc-btn--go{background:var(--accent);color:var(--accent-ink)}

/* scene 1 · calendar + brief */
#usecases .uc-cal{position:relative;padding:calc(6*var(--k)) 0 0}
#usecases .uc-cal__row{height:calc(70*var(--k));border-top:1px solid rgba(234,227,221,.06);padding:calc(5*var(--k)) calc(10*var(--k))}
#usecases .uc-cal__row:first-child{border-top:0}
#usecases .uc-cal__h{font-size:max(11px,calc(8.5*var(--k)));line-height:1;color:#a39891}
#usecases .uc-ev{
  position:absolute;left:calc(52*var(--k));right:calc(12*var(--k));top:calc((var(--y) + 6)*var(--k));height:calc(var(--h)*var(--k));
  display:flex;flex-direction:column;justify-content:center;padding:0 calc(10*var(--k));
  border-radius:calc(7*var(--k));background:#2b2927;color:#a69d96;
}
#usecases .uc-ev b{font-size:max(11px,calc(11.5*var(--k)));font-weight:600;line-height:1.25}
#usecases .uc-ev i{font-style:normal;font-size:max(11px,calc(10*var(--k)));line-height:1.3;opacity:.85}
#usecases .uc-ev--key{background:rgba(155,156,255,.16);color:var(--fg);box-shadow:inset calc(3*var(--k)) 0 0 var(--violet),0 0 0 calc(1.5*var(--k)) var(--accent),0 0 calc(24*var(--k)) rgba(255,143,90,.25);transition:box-shadow .5s var(--ease)}
#usecases .uc-now{position:absolute;left:calc(46*var(--k));right:0;top:calc((var(--y) + 6)*var(--k));height:1px;background:var(--accent)}
#usecases .uc-now::before{content:"";position:absolute;left:calc(-3*var(--k));top:calc(-3*var(--k));width:calc(7*var(--k));height:calc(7*var(--k));border-radius:50%;background:var(--accent)}
#usecases .uc-now i{position:absolute;left:calc(-40*var(--k));top:calc(-5*var(--k));font-style:normal;font-size:max(11px,calc(8.5*var(--k)));line-height:1;color:var(--accent)}

#usecases .uc-brief{margin-top:calc(6*var(--k))}
#usecases .uc-brief > div{padding:calc(6*var(--k)) 0;border-top:1px solid rgba(234,227,221,.07)}
#usecases .uc-brief > div:first-child{border-top:0}
#usecases .uc-brief dt{font-size:max(11px,calc(8.5*var(--k)));line-height:1;color:var(--taupe)}
#usecases .uc-brief dd{margin-top:calc(3*var(--k));font-size:calc(12*var(--k));line-height:1.3}

/* scene 2 · inbox + draft */
#usecases .uc-mail li{position:relative;display:flex;align-items:center;gap:calc(9*var(--k));height:calc(46*var(--k));padding:0 calc(12*var(--k));border-bottom:1px solid rgba(234,227,221,.05);transition:background-color .4s var(--ease)}
#usecases .uc-av{display:grid;place-items:center;flex:none;width:calc(24*var(--k));height:calc(24*var(--k));border-radius:50%;background:var(--c);color:var(--ink);font-size:max(11px,calc(10*var(--k)));font-weight:600}
#usecases .uc-mail__tx{display:flex;flex-direction:column;min-width:0;flex:1}
#usecases .uc-mail__tx b{font-size:max(11px,calc(11.5*var(--k)));font-weight:600;line-height:1.25}
#usecases .uc-mail__tx em{font-style:normal;font-size:max(11px,calc(10.5*var(--k)));color:var(--uc-body);white-space:nowrap}
#usecases .uc-mail__tx i,#usecases .uc-src__tx i{display:block;width:var(--w);height:calc(5*var(--k));margin-top:calc(5*var(--k));border-radius:99px;background:var(--uc-skel)}
#usecases .uc-mail__key{background:rgba(255,143,90,.1);box-shadow:inset calc(2*var(--k)) 0 0 var(--accent)}
#usecases .uc-tag{display:inline-block;margin-left:calc(4*var(--k));vertical-align:calc(1*var(--k));padding:calc(3*var(--k)) calc(5*var(--k));border-radius:calc(4*var(--k));font-size:max(11px,calc(7.5*var(--k)));line-height:1;background:var(--accent-soft);color:var(--accent);transition:opacity .4s var(--ease),transform .5s var(--ease-out)}
#usecases .uc-mail__open{padding:calc(14*var(--k)) calc(14*var(--k))}
#usecases .uc-mail__subj{font-size:calc(12.5*var(--k));font-weight:600;margin-bottom:calc(4*var(--k))}
#usecases .uc-ln{position:relative;display:block;width:var(--w);height:calc(5*var(--k));margin-top:calc(9*var(--k));border-radius:99px;background:var(--uc-skel);overflow:hidden}
#usecases .uc-ln--hl::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:.7;transform-origin:left;transition:transform .9s var(--uc-ease)}

#usecases .uc-draft{margin-top:calc(8*var(--k));font-size:calc(12*var(--k));line-height:1.5;color:#ddd5ce}
#usecases .uc-verify{display:flex;align-items:center;gap:calc(8*var(--k));margin-top:calc(10*var(--k))}
#usecases .uc-verify .mono{font-size:max(11px,calc(8.5*var(--k)));line-height:1;color:var(--taupe)}
#usecases .uc-flag{padding:calc(3*var(--k)) calc(8*var(--k));border-radius:calc(5*var(--k));border:1px dashed var(--accent);font-size:max(11px,calc(10.5*var(--k)));line-height:1.3;color:var(--accent)}

/* scene 3 · availability grid + invite */
#usecases .uc-week{width:calc(236*var(--k));padding:calc(10*var(--k)) calc(12*var(--k)) 0}
#usecases .uc-week__days{display:grid;grid-template-columns:calc(18*var(--k)) repeat(5,minmax(0,1fr));height:calc(18*var(--k))}
#usecases .uc-week__days b{font-size:max(11px,calc(8.5*var(--k)));line-height:1;font-weight:500;color:var(--taupe);text-align:center}
#usecases .uc-week__grid{
  position:relative;height:calc(266*var(--k));
  background:
    linear-gradient(90deg,transparent calc(18*var(--k)),rgba(234,227,221,.05) 0 calc(18*var(--k) + 1px),transparent 0) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(180deg,rgba(234,227,221,.05) 0 1px,transparent 1px calc(38*var(--k)));
}
#usecases .uc-week__h{position:absolute;left:0;top:calc((var(--r)*38 + 3)*var(--k));font-size:max(11px,calc(8*var(--k)));line-height:1;color:var(--muted)}
#usecases .uc-busy,#usecases .uc-slot,#usecases .uc-scan{position:absolute;left:calc((18 + var(--c,0)*38.8 + 2.5)*var(--k));width:calc(33.8*var(--k))}
#usecases .uc-busy{
  top:calc((var(--r)*38 + 3)*var(--k));height:calc((var(--n)*38 - 6)*var(--k));
  border-radius:calc(5*var(--k));overflow:hidden;box-shadow:inset calc(2*var(--k)) 0 0 var(--p);
}
#usecases .uc-busy::before{content:"";position:absolute;inset:0;background:var(--p);opacity:.22}
#usecases .uc-slot{
  top:calc((var(--r)*38 + 3)*var(--k));height:calc(16*var(--k));
  border-radius:calc(4*var(--k));border:1px dashed var(--accent);background:rgba(255,143,90,.1);
  transition:opacity .35s var(--ease),transform .5s cubic-bezier(.3,1.5,.5,1);
}
#usecases .uc-slot--pick{border-style:solid;background:rgba(255,143,90,.3);box-shadow:0 0 calc(14*var(--k)) rgba(255,143,90,.35)}
#usecases .uc-scan{top:0;bottom:0;left:calc(20.5*var(--k));border-radius:calc(5*var(--k));background:linear-gradient(180deg,rgba(155,156,255,0),rgba(155,156,255,.2),rgba(155,156,255,0));opacity:0;pointer-events:none}
#usecases .uc-week__key{display:flex;gap:calc(14*var(--k));margin-top:calc(14*var(--k));font-family:var(--font-mono);font-weight:500;text-transform:uppercase;font-size:max(11px,calc(8.5*var(--k)));line-height:1;color:var(--taupe)}
#usecases .uc-week__key span{display:inline-flex;align-items:center;gap:calc(5*var(--k))}
#usecases .uc-week__key span::before{content:"";width:calc(7*var(--k));height:calc(7*var(--k));border-radius:calc(2*var(--k));background:var(--p)}

#usecases .uc-times{display:flex;align-items:center;gap:calc(6*var(--k))}
#usecases .uc-times .mono{font-size:max(11px,calc(8.5*var(--k)));line-height:1;color:var(--taupe);margin-right:calc(2*var(--k))}
#usecases .uc-times b{display:inline-flex;align-items:center;height:calc(24*var(--k));padding:0 calc(8*var(--k));border-radius:calc(6*var(--k));background:var(--uc-raise-2);font-size:max(11px,calc(11*var(--k)));font-weight:500;white-space:nowrap}
#usecases .uc-times b.is-pick{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
#usecases .uc-inv{margin-top:calc(10*var(--k));padding:calc(10*var(--k)) calc(12*var(--k));border-radius:calc(8*var(--k));background:var(--uc-raise)}
#usecases .uc-inv__k{font-size:max(11px,calc(8.5*var(--k)));line-height:1;color:var(--taupe)}
#usecases .uc-inv__t{margin-top:calc(6*var(--k));font-size:calc(14.5*var(--k));line-height:1.2;font-weight:600}
#usecases .uc-inv__when{margin-top:calc(2*var(--k));font-size:max(11px,calc(11*var(--k)));color:var(--uc-body)}
#usecases .uc-inv__who{display:flex;gap:calc(6*var(--k));margin-top:calc(9*var(--k))}
#usecases .uc-who{display:inline-flex;align-items:center;gap:calc(5*var(--k));height:calc(20*var(--k));padding:0 calc(8*var(--k)) 0 calc(2*var(--k));border-radius:99px;background:var(--uc-raise-2);font-size:max(11px,calc(10.5*var(--k)))}
#usecases .uc-who b{display:grid;place-items:center;width:calc(16*var(--k));height:calc(16*var(--k));border-radius:50%;background:var(--c);color:var(--ink);font-size:max(11px,calc(8.5*var(--k)));font-weight:600}

/* scene 4 · sources + comparison */
#usecases .uc-src{width:calc(236*var(--k));padding:calc(12*var(--k))}
#usecases .uc-src li{
  position:relative;display:flex;align-items:flex-start;gap:calc(10*var(--k));margin-bottom:calc(8*var(--k));padding:calc(11*var(--k)) calc(10*var(--k));
  border-radius:calc(9*var(--k));background:var(--uc-raise);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,210,138,.28);transition:box-shadow .4s var(--ease);
}
#usecases .uc-src__g{display:grid;place-items:center;flex:none;width:calc(26*var(--k));height:calc(26*var(--k));border-radius:calc(7*var(--k));background:var(--uc-raise-2)}
#usecases .uc-src__g svg{width:calc(13*var(--k));height:calc(13*var(--k));fill:var(--c)}
#usecases .uc-src__tx{display:flex;flex-direction:column;flex:1;min-width:0}
#usecases .uc-src__tx b{font-size:max(11px,calc(11*var(--k)));font-weight:600;line-height:1.3;white-space:nowrap}
#usecases .uc-src__ok{flex:none;font-size:max(11px,calc(8*var(--k)));line-height:1;color:var(--ok);padding-top:calc(3*var(--k));transition:opacity .35s var(--ease)}
#usecases .uc-src li::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(155,156,255,0),rgba(155,156,255,.18),rgba(155,156,255,0));
}

#usecases .uc-cmp{display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr));align-items:center;row-gap:calc(8*var(--k));margin-top:calc(10*var(--k))}
#usecases .uc-cmp b{font-size:max(11px,calc(8.5*var(--k)));line-height:1;font-weight:500;color:var(--taupe)}
#usecases .uc-cmp__k{font-size:max(11px,calc(11.5*var(--k)))}
#usecases .uc-rate{position:relative;display:block;width:calc(30*var(--k));height:calc(6*var(--k))}
#usecases .uc-rate::before,#usecases .uc-rate::after{
  content:"";position:absolute;left:0;top:0;height:100%;
  background:radial-gradient(circle at calc(3*var(--k)) 50%,currentColor calc(2.6*var(--k)),transparent calc(3*var(--k))) 0 0/calc(10*var(--k)) 100% repeat-x;
}
#usecases .uc-rate::before{width:100%;color:var(--uc-dim)}
#usecases .uc-rate::after{width:calc(var(--v)*10*var(--k));color:var(--accent);transition:width .5s var(--uc-ease)}
#usecases .uc-find{margin-top:calc(12*var(--k));padding-top:calc(10*var(--k));border-top:1px solid rgba(234,227,221,.07);font-size:max(11px,calc(11.5*var(--k)));line-height:1.4;color:#ddd5ce}
#usecases .uc-find .mono{display:block;margin-bottom:calc(4*var(--k));font-size:max(11px,calc(8.5*var(--k)));line-height:1;color:var(--accent)}
#usecases .uc-acts--src{justify-content:flex-start;gap:calc(5*var(--k))}
#usecases .uc-acts--src .uc-acts__note{margin-right:calc(4*var(--k))}
#usecases .uc-cite{display:grid;place-items:center;width:calc(18*var(--k));height:calc(18*var(--k));border-radius:calc(5*var(--k));background:var(--uc-raise-2);font-family:var(--font-mono);font-size:max(11px,calc(9*var(--k)));color:var(--fg)}
#usecases .uc-open{margin-left:auto;font-size:max(11px,calc(8.5*var(--k)));line-height:1;color:var(--accent)}

/* scene 5 · files + action items */
#usecases .uc-files{width:calc(236*var(--k));display:flex;flex-direction:column;justify-content:flex-end;height:calc(362*var(--k));padding:calc(12*var(--k)) calc(12*var(--k)) calc(16*var(--k))}
#usecases .uc-folder{display:flex;align-items:center;gap:calc(8*var(--k));height:calc(38*var(--k));padding:0 calc(10*var(--k));border-radius:calc(8*var(--k));background:var(--uc-raise);box-shadow:inset 0 0 0 1px rgba(255,143,90,.3)}
#usecases .uc-folder svg{width:calc(20*var(--k));height:calc(17*var(--k));fill:rgba(255,143,90,.18);stroke:var(--accent);stroke-width:1.4;stroke-linejoin:round}
#usecases .uc-folder b{font-size:calc(12*var(--k));font-weight:600}
#usecases .uc-folder i{margin-left:auto;font-style:normal;font-size:max(11px,calc(8.5*var(--k)));line-height:1;color:var(--taupe)}
#usecases .uc-flist{margin:calc(4*var(--k)) 0 0 calc(18*var(--k));padding-left:calc(10*var(--k));border-left:1px solid var(--uc-line)}
#usecases .uc-flist li{
  display:flex;align-items:center;gap:calc(8*var(--k));width:max-content;height:calc(28*var(--k));margin-top:calc(6*var(--k));padding:0 calc(10*var(--k)) 0 calc(6*var(--k));
  border-radius:calc(6*var(--k));background:var(--uc-raise);font-size:max(11px,calc(11.5*var(--k)));white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(234,227,221,.05);
  transition:transform .8s cubic-bezier(.34,1.25,.5,1),box-shadow .5s var(--ease);
}
#usecases .uc-fi{display:grid;place-items:center;width:calc(28*var(--k));height:calc(17*var(--k));border-radius:calc(3*var(--k));background:var(--c);color:var(--ink);font-family:var(--font-mono);font-weight:500;font-size:max(11px,calc(7.5*var(--k)));line-height:1}

#usecases .uc-todo{margin-top:calc(6*var(--k))}
#usecases .uc-todo li{display:flex;align-items:center;gap:calc(8*var(--k));height:calc(30*var(--k));border-top:1px solid rgba(234,227,221,.07);font-size:calc(12*var(--k));white-space:nowrap}
#usecases .uc-todo li:first-child{border-top:0}
#usecases .uc-box{flex:none;width:calc(13*var(--k));height:calc(13*var(--k));border-radius:calc(4*var(--k));box-shadow:inset 0 0 0 1.4px var(--taupe)}
#usecases .uc-own{margin-left:auto;padding:calc(3*var(--k)) calc(7*var(--k));border-radius:99px;background:var(--uc-raise-2);font-size:max(11px,calc(10*var(--k)));line-height:1.2;color:var(--uc-body)}

/* ==========================================================================
   Timeline states · only when JS runs the timeline (.uc-anim). Without it
   (reduced motion / no JS) every scene shows its complete, final state.
   ========================================================================== */
#usecases.uc-anim .uc-scene.uc-reset,#usecases.uc-anim .uc-scene.uc-reset *{transition:none!important;animation:none!important}

/* simple "appear" elements */
#usecases.uc-anim :is(.uc-chip,.uc-res,.uc-brief > div,.uc-acts,.uc-times,.uc-inv,.uc-verify,.uc-find,.uc-todo li,.uc-folder){transition:opacity .5s var(--ease),transform .7s var(--uc-ease)}
#usecases.uc-anim :is(.uc-chip,.uc-res,.uc-brief > div,.uc-acts,.uc-times,.uc-inv,.uc-verify,.uc-find,.uc-todo li,.uc-folder):not(.is-on){opacity:0;transform:translate3d(0,calc(8*var(--k)),0)}
#usecases.uc-anim .uc-chip:not(.is-on){transform:scale(.85)}

/* typing */
#usecases.uc-anim .uc-tw:not(.is-typed) .uc-tw__b{visibility:hidden}

/* status pill: Working -> Ready for review */
#usecases.uc-anim .uc-pill:not(.is-done){background:rgba(155,156,255,.14);color:var(--violet)}
#usecases.uc-anim .uc-pill:not(.is-done) .uc-pill__a{display:inline}
#usecases.uc-anim .uc-pill:not(.is-done) .uc-pill__b{display:none}
#usecases.uc-anim .uc-pill:not(.is-done) .status-sq{animation:status-sq-blink 1.6s var(--ease) infinite}

/* steps: pending -> working (spinner) -> done (gold tick) */
#usecases.uc-anim .uc-step{transition:opacity .4s var(--ease)}
#usecases.uc-anim .uc-step:not(.is-on){opacity:.4}
#usecases.uc-anim .uc-step:not(.is-done) .uc-ring{fill:none;stroke:var(--uc-dim)}
#usecases.uc-anim .uc-step:not(.is-done) .uc-tick{stroke-dashoffset:10}
#usecases.uc-anim .uc-step.is-on:not(.is-done) .uc-ring{stroke:rgba(155,156,255,.25)}
#usecases.uc-anim .uc-step.is-on:not(.is-done) .uc-spin{opacity:1;animation:uc-spin .9s linear infinite}

/* buttons that invite review: soft pulse ring once shown */
#usecases.uc-anim .uc-acts.is-on .uc-btn--glow{animation:uc-ring 2.4s var(--ease) .4s infinite}

/* scene 1 */
#usecases.uc-anim .uc-ev--key:not(.is-on){box-shadow:inset calc(3*var(--k)) 0 0 var(--violet),0 0 0 0 transparent,0 0 0 transparent}

/* scene 2 */
#usecases.uc-anim .uc-mail__key{transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
#usecases.uc-anim .uc-mail__key:not(.is-on){background:transparent;box-shadow:none}
#usecases.uc-anim .uc-mail__key:not(.is-on) .uc-tag{opacity:0;transform:translateX(calc(6*var(--k)))}
#usecases.uc-anim .uc-ln--hl:not(.is-on)::after{transform:scaleX(0)}

/* scene 3 */
#usecases.uc-anim .uc-slot:not(.is-on){opacity:0;transform:scale(.6)}
#usecases.uc-anim .uc-scan.is-on{animation:uc-scan 1s cubic-bezier(.45,0,.55,1) both}
#usecases.uc-anim .uc-times b.is-pick{transition:background-color .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease)}

/* scene 4 */
#usecases.uc-anim .uc-src li:not(.is-done){box-shadow:inset 0 0 0 1px rgba(234,227,221,.05)}
#usecases.uc-anim .uc-src li:not(.is-done) .uc-src__ok{opacity:0}
#usecases.uc-anim .uc-src li.is-on:not(.is-done)::after{animation:uc-read .6s linear infinite}
#usecases.uc-anim .uc-rate:not(.is-on)::after{width:0}

/* scene 5: files fly from a scattered desktop into the folder */
#usecases.uc-anim .uc-flist li:not(.is-on){
  transform:translate3d(calc(var(--sx)*var(--k)),calc(var(--sy)*var(--k)),0) rotate(var(--sr));
  box-shadow:inset 0 0 0 1px rgba(234,227,221,.08),0 calc(10*var(--k)) calc(22*var(--k)) rgba(0,0,0,.45);
}
#usecases.uc-anim .uc-folder:not(.is-done){box-shadow:inset 0 0 0 1px rgba(234,227,221,.06)}
#usecases.uc-anim .uc-folder:not(.is-done) i{opacity:0}
#usecases.uc-anim .uc-folder.is-done{animation:uc-bump .5s var(--ease-out)}

@keyframes uc-spin{to{transform:rotate(360deg)}}
@keyframes uc-ring{0%{box-shadow:0 0 0 0 rgba(255,143,90,.55)}60%,100%{box-shadow:0 0 0 calc(7*var(--k)) rgba(255,143,90,0)}}
@keyframes uc-scan{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(calc(4*38.8*var(--k)))}}
@keyframes uc-read{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes uc-bump{0%{transform:none}40%{transform:scale(1.04)}100%{transform:none}}

/* ---------- entrance (pre-states set only when JS + motion are on) ---------- */
#usecases.uc-pre .uc-line{clip-path:inset(-10% 100% -10% 0)}
#usecases.uc-pre .uc-title.is-in .uc-line{clip-path:inset(-10% -2% -10% 0);transition:clip-path 1.1s var(--uc-ease) var(--d,0ms)}
#usecases.uc-pre .uc-tab{opacity:0;transform:translateY(24px)}
#usecases.uc-pre .uc-tabs.is-in .uc-tab{
  opacity:1;transform:none;
  transition:opacity .8s var(--uc-ease) calc((var(--i) + 1)*.08s),transform .8s var(--uc-ease) calc((var(--i) + 1)*.08s),background-color .2s var(--ease),color .2s var(--ease);
}
#usecases.uc-pre .uc-stage,#usecases.uc-pre .uc-tile,#usecases.uc-pre .uc-card{clip-path:inset(0 100% 0 0)}
#usecases.uc-pre .uc-panel.is-in .uc-stage{clip-path:inset(0 0% 0 0);transition:clip-path 1.5s var(--uc-ease) .1s}
#usecases.uc-pre .uc-panel.is-in .uc-tile{clip-path:inset(0 0% 0 0);transition:clip-path 1.1s var(--uc-ease) .45s}
#usecases.uc-pre .uc-panel.is-in .uc-card{clip-path:inset(0 0% 0 0);transition:clip-path 1.1s var(--uc-ease) .8s}

/* ---------- narrower desktop ---------- */
@media (max-width:1279px){
  #usecases{--uc-card:400px;--uc-tile:120px;--uc-pad:40px}
  #usecases .uc-slide__t{font-size:34px}
  #usecases .uc-slide__d{font-size:17px}
}

/* ---------- tablet + mobile: stage, then card (stacked) ---------- */
@media (max-width:1024px){
  #usecases .uc-title{padding-left:0}
  #usecases .uc-tabs{margin:0}
  #usecases .uc-tab{padding:20px 20px 18px}
  #usecases .uc-tab__t{font-size:17px}
  #usecases .uc-panel{height:auto}
  #usecases .uc-stage{height:calc(min(680px, 100cqw - 2*var(--gutter)) * .8 + 112px)}
  #usecases .uc-layer{top:0;bottom:0;transform:none!important}
  #usecases .uc-art{right:auto;left:50%;top:64px;width:min(680px, 100cqw - 2*var(--gutter));transform:translateX(-50%)}
  #usecases .uc-scene::before{background:radial-gradient(50% 50% at 55% 50%,var(--glow,rgba(255,143,90,.14)),transparent 72%)}
  #usecases .uc-art--label{display:contents}
  #usecases .uc-illus{top:24px;left:auto;right:var(--gutter)}
  #usecases .uc-tile{display:none}
  #usecases .uc-card{
    position:relative;top:auto;left:auto;
    width:min(560px, calc(100% - 2*var(--gutter)));height:auto;min-height:300px;
    margin:-48px 0 0 var(--gutter);padding:40px;
  }
}
@media (max-width:820px){
  #usecases .uc-strip__in{padding:0}
  #usecases .uc-tabs{
    display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding:0 var(--gutter);padding:0 var(--gutter);scrollbar-width:none;
  }
  #usecases .uc-tabs::-webkit-scrollbar{display:none}
  #usecases .uc-tab{flex:0 0 auto;width:212px;scroll-snap-align:start}
  #usecases .uc-tab:last-child{margin-right:var(--gutter)}
}
@media (max-width:640px){
  #usecases{padding-bottom:72px}
  #usecases .uc-head{padding-top:72px;flex-direction:column;align-items:flex-start;gap:20px}
  #usecases .uc-play{margin-bottom:0}
  #usecases .uc-strip{margin-top:40px}
  #usecases .uc-tab{width:196px;min-height:104px;padding:18px 16px 16px;gap:10px}
  #usecases .uc-tab__t{font-size:16px}
  /* panel-focused: the Lexi panel fills the width; the app window peeks behind */
  #usecases .uc-stage{height:calc((100cqw - 32px) * 480 / 356 + 120px)}
  #usecases .uc-art{
    left:auto;transform:none;top:52px;
    width:calc((100cqw - 32px) * 600 / 356);
    right:calc(16px - (100cqw - 32px) * 8 / 356);
  }
  /* the panel may grow with its content (11px floors) so the result box never clips its action row */
  #usecases .uc-pn{height:auto;min-height:calc(472*var(--k))}
  #usecases .uc-res{flex:1 0 auto}
  #usecases .uc-win{opacity:.55}
  #usecases .uc-illus{top:20px;right:16px}
  #usecases .uc-card{width:auto;min-height:0;margin:-24px 16px 0;padding:28px 24px 24px}
  #usecases .uc-slide__t{margin-top:0;font-size:30px}
  #usecases .uc-slide__d{margin-top:14px;font-size:16px}
  #usecases .uc-slide{gap:28px}
}

@media (prefers-reduced-motion:reduce){
  #usecases .uc-layer{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  #usecases .uc-scene{transition:none!important}
}

/* "working" placeholder in the panel's result area while steps run */
#usecases .uc-pn::before,#usecases .uc-pn::after{
  content:"";position:absolute;left:calc(16*var(--k));right:calc(16*var(--k));bottom:calc(16*var(--k));height:calc(150*var(--k));
  border-radius:calc(10*var(--k));opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
#usecases .uc-pn::before{
  background:
    linear-gradient(var(--uc-skel),var(--uc-skel)) calc(14*var(--k)) calc(18*var(--k))/34% calc(6*var(--k)) no-repeat,
    linear-gradient(var(--uc-skel),var(--uc-skel)) calc(14*var(--k)) calc(44*var(--k))/82% calc(5*var(--k)) no-repeat,
    linear-gradient(var(--uc-skel),var(--uc-skel)) calc(14*var(--k)) calc(62*var(--k))/70% calc(5*var(--k)) no-repeat,
    linear-gradient(var(--uc-skel),var(--uc-skel)) calc(14*var(--k)) calc(80*var(--k))/76% calc(5*var(--k)) no-repeat,
    linear-gradient(var(--uc-skel),var(--uc-skel)) calc(14*var(--k)) calc(98*var(--k))/52% calc(5*var(--k)) no-repeat,
    #201f1d;
  box-shadow:inset 0 0 0 1px rgba(234,227,221,.05);
}
#usecases .uc-pn::after{background:linear-gradient(100deg,transparent 38%,rgba(234,227,221,.07) 50%,transparent 62%) 0 0/260% 100% no-repeat}
#usecases.uc-anim .uc-pn.is-on:not(.is-done)::before{opacity:.8}
#usecases.uc-anim .uc-pn.is-on:not(.is-done)::after{opacity:1;animation:uc-shimmer 1.5s linear infinite}
@keyframes uc-shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* touch targets on phones: >= 44px tall hit area without changing the visual design */
@media (max-width:767px){
  #usecases .uc-link{position:relative}
  #usecases .uc-link::after{content:"";position:absolute;inset:-5px 0}
}

/* touch target on phones (homepage QA, 8 Oct): the "Explore ..." link gets a 44px tall hit area */
@media (max-width:767px){
  #usecases .uc-link{min-height:44px}
}