/* ============================================================================
   Use-case tiles. Each card carries a looping miniature of its own journey,
   so the hub shows six mechanics rather than six paragraphs. Everything is
   CSS keyframes on a handful of elements: no JS timers to stall, no images.
   Mobile-first; the stage keeps a fixed aspect so nothing reflows mid-loop.
   ========================================================================== */

.ucs{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.ucs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.ucs{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}

.uct{display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border-1);
  border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-xs);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),border-color var(--t-base)}
.uct:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--c)}

/* ---- the stage ---- */
.ucst{position:relative;aspect-ratio:16/9;background:var(--cs);overflow:hidden;
  border-bottom:1px solid var(--border-1)}
.ucst::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0,transparent 55%,rgba(0,0,0,.035))}
.ucst>*{position:absolute}

/* shared atoms */
.ua-card{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:8px;
  box-shadow:0 2px 8px -3px rgba(16,16,18,.16)}
.ua-bub{border-radius:9px;padding:.25rem .45rem;font-size:.6875rem;font-weight:var(--fw-bold);
  white-space:nowrap;line-height:1.3}
.ua-out{background:var(--ink);color:#fff}
.ua-in{background:var(--bg-surface);border:1px solid var(--border-2);color:var(--fg-2)}
.ua-chip{padding:.2rem .5rem;display:inline-flex;align-items:center;gap:.2rem;border-radius:99px;padding:.16rem .4rem;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:var(--fw-bold);white-space:nowrap}
.ua-ok{background:var(--grass-soft);color:var(--grass-deep)}
.ua-stop{background:var(--coral-soft);color:var(--coral-text)}
.ua-dot{width:6px;height:6px;border-radius:50%;background:var(--border-3)}

/* ---- 01 lead capture: a form fills, then a slot is held ---- */
.uc-lead .fw{left:8%;right:38%;top:14%;bottom:14%;padding:.4rem;display:flex;flex-direction:column;gap:.28rem;justify-content:center}
.uc-lead .fr{height:7px;border-radius:3px;background:var(--neutral-200);position:relative;overflow:hidden}
.uc-lead .fr::after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;
  background:var(--c);border-radius:3px;animation:ucFill 5s var(--ease-out) infinite}
.uc-lead .fr:nth-child(2)::after{animation-delay:.55s}
.uc-lead .fr:nth-child(3)::after{animation-delay:1.1s}
.uc-lead .slot{right:6%;top:50%;transform:translateY(-50%);padding:.35rem .45rem;text-align:center;
  animation:ucPop 5s var(--ease-snap) 1.75s infinite}
.uc-lead .slot b{display:block;font-size:.6875rem;color:var(--fg-1);line-height:1.15}
.uc-lead .slot small{display:block;font-family:var(--font-mono);font-size:.625rem;color:var(--fg-3)}
.uc-lead .slot i{display:block;margin-top:.2rem;height:3px;border-radius:2px;background:var(--c)}
@keyframes ucFill{0%,4%{transform:scaleX(0)}18%,86%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes ucPop{0%,32%{opacity:0;transform:translateY(-50%) scale(.9)}
  42%,86%{opacity:1;transform:translateY(-50%) scale(1)}96%,100%{opacity:0;transform:translateY(-50%) scale(.9)}}

/* ---- 02 cart recovery: a nudge goes out, a reply stops it ---- */
.uc-cart .cart{left:7%;top:16%;padding:.3rem .4rem;display:flex;align-items:center;gap:.25rem}
.uc-cart .cart svg{width:11px;height:11px;stroke:var(--cd);stroke-width:2.2;fill:none}
.uc-cart .cart span{font-size:.625rem;font-weight:var(--fw-bold);color:var(--fg-1)}
.uc-cart .msg{left:24%;top:44%;animation:ucFly 5.4s var(--ease-out) .5s infinite}
.uc-cart .rep{right:8%;top:66%;animation:ucIn 5.4s var(--ease-out) 2.5s infinite}
.uc-cart .halt{left:50%;bottom:8%;transform:translateX(-50%);animation:ucPopC 5.4s var(--ease-snap) 3.4s infinite}
@keyframes ucFly{0%,6%{opacity:0;transform:translateX(-8px)}14%,84%{opacity:1;transform:translateX(0)}
  94%,100%{opacity:0;transform:translateX(-8px)}}
@keyframes ucIn{0%,4%{opacity:0;transform:translateX(10px)}12%,72%{opacity:1;transform:translateX(0)}
  84%,100%{opacity:0;transform:translateX(10px)}}
@keyframes ucPopC{0%,4%{opacity:0;transform:translateX(-50%) scale(.86)}
  14%,64%{opacity:1;transform:translateX(-50%) scale(1)}76%,100%{opacity:0;transform:translateX(-50%) scale(.86)}}

/* ---- 03 review generation: stars fill, a reply is drafted ---- */
.uc-rev .stars{left:50%;top:26%;transform:translateX(-50%);display:flex;gap:3px}
.uc-rev .stars i{width:13px;height:13px;color:var(--border-3);font-style:normal;font-size:12px;line-height:1;
  animation:ucStar 5s steps(1) infinite}
.uc-rev .stars i:nth-child(2){animation-delay:.22s}
.uc-rev .stars i:nth-child(3){animation-delay:.44s}
.uc-rev .stars i:nth-child(4){animation-delay:.66s}
.uc-rev .stars i:nth-child(5){animation-delay:.88s}
.uc-rev .draft{left:8%;right:8%;bottom:12%;padding:.35rem .45rem;
  animation:ucRise 5s var(--ease-out) 1.5s infinite}
.uc-rev .draft b{display:block;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--violet-deep)}
.uc-rev .draft span{display:block;font-size:.6875rem;color:var(--fg-2);line-height:1.35;margin-top:.1rem}
@keyframes ucStar{0%,8%{color:var(--border-3)}16%,88%{color:var(--sun-star)}96%,100%{color:var(--border-3)}}
@keyframes ucRise{0%,26%{opacity:0;transform:translateY(8px)}36%,86%{opacity:1;transform:translateY(0)}
  96%,100%{opacity:0;transform:translateY(8px)}}

/* ---- 04 reminders: a dial sweeps, consent clears, it sends ---- */
.uc-rem .dial{left:11%;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:conic-gradient(var(--c) var(--a,0deg),var(--border-2) 0);
  animation:ucSweep 5s linear infinite;display:grid;place-items:center}
.uc-rem .dial::after{content:"";width:32px;height:32px;border-radius:50%;background:var(--cs)}
.uc-rem .steps{left:36%;right:7%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.28rem}
.uc-rem .steps span{opacity:0;animation:ucStep 5s var(--ease-out) infinite}
.uc-rem .steps span:nth-child(1){animation-delay:1.3s}
.uc-rem .steps span:nth-child(2){animation-delay:2.1s}
.uc-rem .steps span:nth-child(3){animation-delay:2.9s}
@keyframes ucSweep{0%{--a:0deg}70%{--a:360deg}100%{--a:360deg}}
@keyframes ucStep{0%,2%{opacity:0;transform:translateX(-6px)}10%,82%{opacity:1;transform:translateX(0)}
  94%,100%{opacity:0;transform:translateX(-6px)}}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---- 05 delivery: a parcel moves through three states ---- */
.uc-ord .track{left:10%;right:10%;top:56%;height:2px;background:var(--border-2);border-radius:2px}
.uc-ord .track i{position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--border-2);
  animation:ucLight 5s steps(1) infinite}
.uc-ord .track i:nth-child(1){left:-2px}
.uc-ord .track i:nth-child(2){left:calc(50% - 4px);animation-delay:1.4s}
.uc-ord .track i:nth-child(3){right:-2px;animation-delay:2.8s}
.uc-ord .box{top:26%;left:10%;padding:.28rem .42rem;display:flex;align-items:center;gap:.25rem;
  animation:ucMove 5s var(--ease-out) infinite}
.uc-ord .box svg{width:11px;height:11px;stroke:var(--cd);stroke-width:2.2;fill:none}
.uc-ord .box span{font-size:.625rem;font-weight:var(--fw-bold);color:var(--fg-1)}
.uc-ord .lbl{left:10%;right:10%;bottom:9%;display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4)}
@keyframes ucLight{0%,6%{background:var(--border-2)}14%,90%{background:var(--c)}98%,100%{background:var(--border-2)}}
@keyframes ucMove{0%,10%{transform:translateX(0)}
  36%,44%{transform:translateX(calc(50% + 22px))}70%,88%{transform:translateX(calc(100% + 46px))}
  97%,100%{transform:translateX(0)}}

/* ---- 06 re-engagement: two channels try, a reply ends it ---- */
.uc-eng .who{left:8%;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.3rem}
.uc-eng .who .av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#8B5CF6,#3A36C9);
  color:#fff;display:grid;place-items:center;font-size:0.6875rem;font-weight:var(--fw-bold);
  animation:ucDim 6s ease-in-out infinite}
.uc-eng .who small{font-family:var(--font-mono);font-size:.625rem;color:var(--fg-3)}
.uc-eng .lane{right:7%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.3rem;align-items:flex-end}
.uc-eng .lane span{opacity:.25;animation:ucTry 6s var(--ease-out) infinite}
.uc-eng .lane span:nth-child(1){animation-delay:.6s}
.uc-eng .lane span:nth-child(2){animation-delay:2.1s}
.uc-eng .lane span:nth-child(3){animation-delay:3.6s}
@keyframes ucDim{0%,20%{opacity:.4;filter:grayscale(1)}62%,100%{opacity:1;filter:none}}
@keyframes ucTry{0%,4%{opacity:.22;transform:translateX(6px)}12%,26%{opacity:1;transform:translateX(0)}
  40%,100%{opacity:.35;transform:translateX(0)}}

/* ---- card body ---- */
.uct-b{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.1rem 1.1rem;flex:1}
.uct-b h2{font-size:var(--fs-lg);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.015em;line-height:1.2}
.uct-b p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.5}
.uct-trig{display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;
  font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cd);background:var(--cs);border-radius:99px;padding:.22rem .55rem;font-weight:var(--fw-bold)}
.uct-b .go{margin-top:auto;padding-top:.35rem;display:inline-flex;align-items:center;gap:.35rem;
  min-height:44px;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--link);align-self:flex-start}
.uct-b .go svg,.uct-b .go i{width:15px;height:15px;transition:transform var(--t-base) var(--ease-out)}
.uct:hover .go svg,.uct:hover .go i{transform:translateX(3px)}

:root[data-theme="dark"] .ucst::after{background:radial-gradient(120% 90% at 50% 0,transparent 55%,rgba(0,0,0,.22))}
:root[data-theme="dark"] .ua-out{background:#F2F5F8;color:#101012}

@media (prefers-reduced-motion:reduce){
  .ucst *,.ucst *::after{animation:none !important}
  .uc-lead .fr::after{transform:scaleX(1)}
  .uc-lead .slot,.uc-cart .msg,.uc-cart .rep,.uc-cart .halt,.uc-rev .draft{opacity:1;transform:none}
  .uc-lead .slot{transform:translateY(-50%)}
  .uc-cart .halt{transform:translateX(-50%)}
  .uc-rev .stars i{color:var(--sun-star)}
  .uc-rem .steps span,.uc-eng .lane span{opacity:1;transform:none}
  .uc-rem .dial{background:conic-gradient(var(--c) 300deg,var(--border-2) 0)}
  .uc-ord .track i{background:var(--c)}
  .uct:hover{transform:none}
}

/* ============================================================================
   THE REAL OBJECT.
   Each mechanic now happens TO something: the studio being booked, the jacket
   left in the cart, the meal being reviewed. The photo is the subject and the
   motion is what uxjo does to it, so the tiles stop reading as abstract chips.
   Existing transforms are preserved; only the anchors move.
   ========================================================================== */
.ua-shot{border-radius:10px;overflow:hidden;border:2px solid #fff;background:var(--neutral-200);
  box-shadow:0 8px 20px -10px rgba(16,16,18,.45);animation:ucShot 5s var(--ease-out) infinite}
.ua-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ua-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(16,16,18,.06)}
@keyframes ucShot{0%,3%{opacity:0;transform:scale(.97)}10%,92%{opacity:1;transform:scale(1)}
  99%,100%{opacity:0;transform:scale(.97)}}

/* 01 lead: studio left, form and slot right */
.sh-l{left:6%;top:13%;width:30%;bottom:13%}
.uc-lead .fw{left:41%;right:36%;top:15%;bottom:15%}
.uc-lead .slot{right:5%;max-width:30%}

/* 02 cart: the abandoned item left, the nudge and the stop right */
.sh-c{left:6%;top:11%;width:29%;bottom:31%}
.uc-cart .cart{left:6%;top:auto;bottom:11%}
.uc-cart .msg{left:41%;top:24%}
.uc-cart .rep{right:6%;top:50%}
.uc-cart .halt{left:66%;bottom:9%}

/* 03 review: the meal left, stars and draft right */
.sh-r{left:6%;top:13%;width:29%;bottom:13%}
.uc-rev .stars{left:68%;top:20%}
.uc-rev .draft{left:40%;right:6%;bottom:13%}
.uc-rev .draft b{font-size:.625rem}

/* 04 reminders: dial left, steps centre, the room right */
.sh-m{right:6%;top:13%;width:27%;bottom:13%}
.uc-rem .dial{left:7%}
.uc-rem .steps{left:29%;right:37%}

/* 05 delivery: the parcel contents left, the track right.
   The box now animates 'left' along the track instead of a percentage of its
   own width, so it lands on each node at any stage size. */
.sh-o{left:5%;top:14%;width:23%;bottom:14%}
.uc-ord .track{left:33%;right:7%}
.uc-ord .lbl{left:33%;right:7%}
.uc-ord .box{left:33%;top:22%;animation-name:ucMoveL}
@keyframes ucMoveL{0%,10%{left:33%}36%,44%{left:55%}70%,88%{left:77%}97%,100%{left:33%}}

/* 06 re-engagement: what she browsed left, the sequence right */
.sh-e{left:6%;top:14%;width:26%;bottom:14%}
.uc-eng .who{left:34%}
.uc-eng .lane{right:6%}

@media (prefers-reduced-motion:reduce){
  .ua-shot{opacity:1;transform:none}
  .uc-ord .box{left:77%}
}

/* ============================================================================
   SCENARIO LIBRARY. Thirty-two named jobs across the eight industries, each
   with the event that starts it and the channels it runs on.
   ========================================================================== */
.scn-filt{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem;
  margin-bottom:1.1rem;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.scn-filt::-webkit-scrollbar{display:none}
.scn-filt button{flex:none;min-height:44px;display:inline-flex;align-items:center;gap:.4rem;
  border:1.5px solid var(--border-2);background:var(--bg-surface);border-radius:99px;
  padding:.5rem .85rem;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-2);
  white-space:nowrap;cursor:pointer;transition:all var(--t-fast)}
.scn-filt button:hover{border-color:var(--border-3);color:var(--fg-1)}
.scn-filt button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.scn-filt button .n{font-family:var(--font-mono);font-size:.625rem;opacity:.6}
@media (min-width:900px){.scn-filt{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none}}

:root{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E")}
.scns{display:grid;gap:.6rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:620px){.scns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.scns{grid-template-columns:repeat(4,minmax(0,1fr))}}
.scn{display:flex;flex-direction:column;gap:.3rem;background:var(--bg-surface);
  border:1px solid var(--border-1);border-radius:var(--r-lg);padding:.85rem .9rem;
  border-top:3px solid var(--c);transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base)}
.scn:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}
.scn[hidden]{display:none}
.scn .scn-ind{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fg-4)}
.scn b{font-size:var(--fs-base);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.01em;line-height:1.25}
.scn p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.45}
.scn .trg{display:inline-flex;align-self:flex-start;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.05em;text-transform:uppercase;font-weight:var(--fw-bold);
  color:var(--cd);background:var(--cs);border-radius:99px;padding:.2rem .5rem;margin-top:.1rem}
.scn .chs{display:flex;gap:.3rem;margin-top:auto;padding-top:.5rem;align-items:center}
.scn .chs svg{width:14px;height:14px;flex:none}
.scn .chs .lucide{width:13px;height:13px;color:var(--fg-4)}
.scn-empty{grid-column:1/-1;padding:2rem 0;text-align:center;color:var(--fg-3);font-size:var(--fs-sm)}

/* ============================================================================
   INDUSTRY DIRECTORY. The eight cards were a rule, a name and a link in one
   shared blue: no way to tell them apart and nothing to read. Each now carries
   its own hue, its job count, the channels that trade actually runs on, and
   the shape of its pattern in a line.
   ========================================================================== */
.indcs{display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.indcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.indcs{grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}}
.indc{position:relative;display:grid;gap:.4rem;align-content:start;background:var(--bg-surface);
  border:1px solid var(--border-1);border-radius:var(--r-xl);padding:1rem 1.05rem 1.05rem;
  overflow:hidden;transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),border-color var(--t-base)}
.indc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.indc:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--c)}
.indc .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--cs);color:var(--cd);margin-bottom:.15rem}
.indc .ic i,.indc .ic svg{width:17px;height:17px}
.indc .n{position:absolute;right:1rem;top:1rem;font-family:var(--font-mono);font-size:1.125rem;
  font-weight:var(--fw-extra);color:var(--c);line-height:1;letter-spacing:-.02em}
.indc .n small{display:block;font-size:.625rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fg-4);font-weight:var(--fw-regular);margin-top:.15rem;text-align:right}
.indc b{font-size:var(--fs-base);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.01em;line-height:1.25}
.indc p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.45}
.indc .ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-top:.35rem;padding-top:.6rem;border-top:1px solid var(--border-1);min-height:38px}
.indc .chs{display:flex;gap:.3rem}
.indc .chs svg{width:15px;height:15px;flex:none}
.indc .go{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-xs);
  font-weight:var(--fw-bold);color:var(--link);white-space:nowrap}
.indc .go i,.indc .go svg{width:13px;height:13px;transition:transform var(--t-base) var(--ease-out)}
.indc:hover .go i,.indc:hover .go svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.indc:hover{transform:none}}

/* ============================================================================
   CUSTOM JOURNEY CTA. Sitewide. The offer is "tell us the job", so the proof
   is a real WhatsApp thread doing exactly that, not a stock illustration.
   ========================================================================== */
.jcta{display:grid;gap:1.5rem;background:var(--ink);border-radius:var(--r-2xl);
  padding:clamp(1.5rem,4vw,2.75rem);position:relative;overflow:hidden}
.jcta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% 12%,rgba(37,211,102,.16),transparent 62%)}
.jcta>*{position:relative}
@media (min-width:900px){.jcta{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:2.5rem;align-items:center}}
.jcta .eyebrow{color:var(--ch-wa)}
.jcta .eyebrow::before{background:var(--ch-wa)}
.jcta h2{color:#fff;font-size:clamp(1.5rem,1rem + 2.2vw,2.25rem);line-height:1.1;
  letter-spacing:-.03em;margin-top:.5rem}
.jcta p{color:var(--fg-on-ink-2);font-size:var(--fs-lg);line-height:1.55;margin-top:.8rem;max-width:46ch}
.jcta .cta-row{margin-top:1.35rem}
.jcta .btn-wa{background:var(--ch-wa);color:#04361C;border:0}
.jcta .btn-wa:hover{background:#1FC55D}
.jcta .btn-wa svg{width:18px;height:18px;fill:currentColor}
.jcta .btn-ghost{color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.26) inset}
.jcta .btn-ghost:hover{box-shadow:0 0 0 1.5px rgba(255,255,255,.6) inset}

/* the thread: a real request, typed, answered */
.jth{background-color:var(--wa-bg);background-image:var(--wa-paper);background-size:240px 240px;background-repeat:repeat;border-radius:var(--r-xl);padding:.9rem;display:grid;gap:.5rem;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9);border:1px solid rgba(255,255,255,.07)}
.jth-h{display:flex;align-items:center;gap:.55rem;padding-bottom:.6rem;
  border-bottom:1px solid rgba(255,255,255,.08)}
.jth-h .av{width:28px;height:28px;border-radius:50%;background:var(--ch-wa);color:#04361C;
  display:grid;place-items:center;font-size:.6875rem;font-weight:var(--fw-extra);flex:none}
.jth-h b{font-size:var(--fs-sm);color:#fff;font-weight:var(--fw-bold);display:block;line-height:1.2}
.jth-h small{font-size:var(--fs-xs);color:#8FA0AB;display:flex;align-items:center;gap:.3rem}
.jth-h small i{width:6px;height:6px;border-radius:50%;background:var(--ch-wa);display:block}
.jb{max-width:88%;border-radius:12px;padding:.55rem .7rem;font-size:var(--fs-sm);line-height:1.45;
  opacity:0;animation:jbIn .45s var(--ease-out) forwards}
.jb.in{background:#1F2C33;color:#E7EEF3;justify-self:start;border-bottom-left-radius:4px}
.jb.out{background:#075E54;color:#E9FBEF;justify-self:end;border-bottom-right-radius:4px}
.jb time{display:block;font-family:var(--font-mono);font-size:.625rem;color:#8FA0AB;margin-top:.25rem}
.jb.out time{color:#9ED8B6}
.jb:nth-of-type(1){animation-delay:.3s}
.jb:nth-of-type(2){animation-delay:1.5s}
.jb:nth-of-type(3){animation-delay:3.1s}
@keyframes jbIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.jtyping{display:flex;gap:3px;align-self:flex-end;background:#075E54;border-radius:12px;
  padding:.5rem .65rem;opacity:0;animation:jbIn .3s var(--ease-out) 2.3s forwards,jbOut .3s ease 3.1s forwards}
@keyframes jbOut{to{opacity:0;transform:scale(.9)}}
.jtyping i{width:5px;height:5px;border-radius:50%;background:#9ED8B6;display:block;
  animation:jDot 1.1s ease-in-out infinite}
.jtyping i:nth-child(2){animation-delay:.15s}
.jtyping i:nth-child(3){animation-delay:.3s}
@keyframes jDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .jb{opacity:1;animation:none}
  .jtyping{display:none}
  .jtyping i{animation:none}
}

/* ---- scenario card: tinted head + white body, same two-zone shape as the
        tiles above. The three-node track is the journey: trigger, step,
        outcome, which is what every one of these actually is. ---- */
.scn{display:flex;flex-direction:column;background:var(--bg-surface);
  border:1px solid var(--border-1);border-radius:var(--r-xl);overflow:hidden;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),border-color var(--t-base)}
.scn:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--c)}
.scn[hidden]{display:none}
.scn-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:var(--bg-surface);padding:.6rem .75rem;border-bottom:1px solid var(--border-1)}
.scn-ind{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);
  font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4);
  font-weight:var(--fw-bold);min-width:0}
.scn-ind i,.scn-ind svg{width:13px;height:13px;flex:none}
.scn-fl{display:flex;align-items:center;gap:3px;flex:none}
.scn-fl i{width:6px;height:6px;border-radius:50%;background:var(--c);opacity:.32;display:block;
  transition:opacity var(--t-base),transform var(--t-base)}
.scn:hover .scn-fl i{animation:scnRun 1.5s ease-in-out infinite}
.scn:hover .scn-fl i:nth-child(2){animation-delay:.18s}
.scn:hover .scn-fl i:nth-child(3){animation-delay:.36s}
@keyframes scnRun{0%,100%{opacity:.32;transform:scale(1)}45%{opacity:1;transform:scale(1.35)}}
.scn-b{display:flex;flex-direction:column;gap:.35rem;padding:.85rem .9rem .9rem;flex:1}
.scn b{font-size:var(--fs-base);font-weight:var(--fw-extra);color:var(--fg-1);
  letter-spacing:-.01em;line-height:1.25}
.scn p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.45}
.scn-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  flex-wrap:wrap;margin-top:auto;padding-top:.7rem}
.scn .trg{align-self:flex-start;display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;font-weight:var(--fw-bold);
  background:var(--cs);color:var(--cd);border-radius:var(--r-pill);padding:.22rem .55rem;line-height:1.2}
.scn .chs{display:flex;align-items:center;gap:.3rem;flex:none}
.scn .chs svg.bi{width:15px;height:15px;flex:none}
.scn .chs i{width:14px;height:14px;color:var(--fg-4);flex:none;transition:transform var(--t-base)}
.scn:hover .chs i{transform:translateX(3px);color:var(--c)}
@media (prefers-reduced-motion:reduce){
  .scn:hover{transform:none}
  .scn:hover .scn-fl i{animation:none;opacity:1}
}

/* ============================================================================
   USE-CASE DETAIL HERO. Stage on the left, copy on the right, with the copy
   first in source so the h1 leads on mobile and for screen readers.
   ========================================================================== */
.phero-in.uch{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
.uch .bcrumb{grid-column:1/-1}
.uch-copy{display:grid;gap:1rem;align-content:start;min-width:0}
.uch-stage{min-width:0;width:100%;justify-self:stretch}
.uch-stage .ucst{border-radius:var(--r-2xl);box-shadow:var(--sh-md)}
@media (min-width:940px){
  .phero-in.uch{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:2.5rem;align-items:center}
  .uch-stage{grid-column:1;grid-row:2}
  .uch-copy{grid-column:2;grid-row:2}
}

/* ============================================================================
   SCENARIO COVERS. Thirty-two cards cannot each carry a bespoke film, and they
   should not: the page's own argument is that all of them are one of the six
   shapes. Each cover plays its parent shape in miniature, in the industry hue,
   with no images so the grid stays light.
   ========================================================================== */
.scn-cov{position:relative;height:144px;overflow:hidden;background:var(--bg-subtle);
  border-bottom:1px solid var(--border-1)}
.scn-cov>*{position:absolute}
.scn-cov .lbl{left:.6rem;top:.55rem;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cd);font-weight:var(--fw-bold);z-index:3}
.scn-cov .lbl svg,.scn-cov .lbl i{width:11px;height:11px}
.mv{position:absolute;background:var(--bg-surface);border:1px solid var(--border-2);
  border-radius:7px;box-shadow:var(--sh-xs)}
.mv.sq{border-radius:50%}
.mv.fill{background:var(--c);border-color:transparent}
.mchip{position:absolute;display:inline-flex;align-items:center;gap:.25rem;background:var(--bg-surface);
  border:1px solid var(--border-2);border-radius:99px;padding:.18rem .45rem;font-size:0.6875rem;
  font-weight:var(--fw-bold);color:var(--fg-1);box-shadow:var(--sh-xs);white-space:nowrap;opacity:0}
.mchip.ink{background:var(--ink);color:#fff;border-color:transparent}
.mchip.c{background:var(--c);color:#fff;border-color:transparent}

@keyframes mPop{0%,8%{opacity:0;transform:translateY(5px) scale(.94)}
  16%,74%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(-3px) scale(.98)}}
@keyframes mBar{0%,10%{transform:scaleX(0)}30%,100%{transform:scaleX(1)}}
@keyframes mDot{0%,12%{opacity:.25;transform:scale(.8)}22%,100%{opacity:1;transform:scale(1)}}
@keyframes mRun{0%,10%{left:16%}45%{left:47%}80%,100%{left:78%}}
@keyframes mRing{0%,10%{--a:0deg}70%,100%{--a:360deg}}
@keyframes mStar{0%,15%{clip-path:inset(0 100% 0 0)}55%,100%{clip-path:inset(0 0 0 0)}}

/* form: three fields fill, then a confirmation */
.mi-form .fl{left:.6rem;height:7px;border-radius:99px;background:var(--bg-surface);
  border:1px solid var(--border-2);width:44%}
.mi-form .fl i{position:absolute;inset:1px;border-radius:99px;background:var(--c);
  transform-origin:left;animation:mBar 4s var(--ease-out) infinite}
.mi-form .f1{top:34px}.mi-form .f2{top:48px}.mi-form .f3{top:62px;width:30%}
.mi-form .f2 i{animation-delay:.35s}.mi-form .f3 i{animation-delay:.7s}
.mi-form .ok{right:.6rem;top:44px;animation:mPop 4s var(--ease-out) 1.5s infinite}

/* nudge: message out, reply in, sequence stops */
.mi-nudge .o{right:.6rem;top:30px;animation:mPop 4.4s var(--ease-out) .4s infinite}
.mi-nudge .i{left:.6rem;top:54px;animation:mPop 4.4s var(--ease-out) 1.7s infinite}
.mi-nudge .st{right:.6rem;bottom:.55rem;animation:mPop 4.4s var(--ease-out) 2.8s infinite}

/* stars: five fill, then the draft */
.mi-star .sr{left:.6rem;top:38px;display:flex;gap:2px}
.mi-star .sr b{width:13px;height:13px;position:relative;background:var(--border-2);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.mi-star .sr b::after{content:"";position:absolute;inset:0;background:var(--sun-star);
  animation:mStar 4s var(--ease-out) infinite}
.mi-star .sr b:nth-child(2)::after{animation-delay:.12s}
.mi-star .sr b:nth-child(3)::after{animation-delay:.24s}
.mi-star .sr b:nth-child(4)::after{animation-delay:.36s}
.mi-star .sr b:nth-child(5)::after{animation-delay:.48s}
.mi-star .dr{left:.6rem;bottom:.55rem;animation:mPop 4s var(--ease-out) 1.4s infinite}

/* dial: a ring sweeps, then the send */
.mi-dial .ring{left:.7rem;top:30px;width:44px;height:44px;border-radius:50%;
  background:conic-gradient(var(--c) var(--a,0deg),var(--border-2) 0);
  animation:mRing 4s var(--ease-out) infinite;position:absolute}
.mi-dial .ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--cs)}
.mi-dial .s1{left:64px;top:34px;animation:mPop 4s var(--ease-out) 1.1s infinite}
.mi-dial .s2{left:64px;top:58px;animation:mPop 4s var(--ease-out) 2.1s infinite}

/* track: a parcel moves through three nodes */
.mi-track .rail{left:16%;right:22%;top:52px;height:2px;background:var(--border-2);border-radius:2px}
.mi-track .nd{top:47px;width:12px;height:12px;border-radius:50%;background:var(--bg-surface);
  border:2px solid var(--border-2);margin-left:-6px;animation:mDot 4s var(--ease-out) infinite}
.mi-track .n1{left:16%}.mi-track .n2{left:47%;animation-delay:.9s}.mi-track .n3{left:78%;animation-delay:1.8s}
.mi-track .nd.on{border-color:var(--c);background:var(--c)}
.mi-track .box{top:34px;left:16%;width:15px;height:15px;border-radius:4px;background:var(--c);
  margin-left:-7px;animation:mRun 4s var(--ease-out) infinite}
.mi-track .cap{left:0;right:0;bottom:.5rem;text-align:center;font-family:var(--font-mono);
  font-size:0.6875rem;letter-spacing:.07em;text-transform:uppercase;color:var(--cd);
  animation:mPop 4s var(--ease-out) 2.2s infinite;position:absolute;opacity:0}

/* fan: two channels try, one answer comes back */
.mi-fan .a{left:.6rem;top:32px;width:26px;height:26px;border-radius:50%;background:var(--c);
  opacity:.35;animation:mDot 4.4s var(--ease-out) 2.4s infinite}
.mi-fan .c1{left:44px;top:32px;animation:mPop 4.4s var(--ease-out) .3s infinite}
.mi-fan .c2{left:44px;top:56px;animation:mPop 4.4s var(--ease-out) 1.3s infinite}
.mi-fan .rp{right:.6rem;bottom:.55rem;animation:mPop 4.4s var(--ease-out) 2.5s infinite}

@media (prefers-reduced-motion:reduce){
  .scn-cov *{animation:none!important;opacity:1!important;transform:none!important;
    clip-path:none!important;--a:360deg!important}
  .mi-form .fl i{transform:scaleX(1)!important}
}


/* ============================================================================
   SCENARIO COVERS, second pass. Six shared shapes meant two different jobs
   played the same film. The mechanics still repeat, but every string, count
   and object below belongs to one scenario only.
   ========================================================================== */
.scn-cov.sc2{--k:1;position:relative;overflow:hidden;display:block;padding:2.1rem .7rem .7rem}
.sc2>*{position:absolute}
.sc2 .s-lbl{top:.55rem;left:.7rem;display:inline-flex;align-items:center;gap:.32rem;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cd);font-weight:var(--fw-bold);max-width:calc(100% - 1.4rem);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc2 .s-lbl i,.sc2 .s-lbl svg{width:11px;height:11px;flex:none}
@keyframes scIn{0%,4%{opacity:0;transform:translateY(6px)}12%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-4px)}}
.sc2 .s-card,.sc2 .s-bub,.sc2 .s-chip,.sc2 .s-row,.sc2 .s-btn,.sc2 .s-try,.sc2 .s-note,.sc2 .s-dial{
  animation:scIn 5.5s var(--ease-out) infinite;animation-delay:calc(var(--d,0) * 620ms)}

/* object card */
.sc2 .s-card{max-width:58%;left:.7rem;right:.7rem;top:2.1rem;display:flex;align-items:center;gap:.5rem;
  background:var(--bg-surface);border:1px solid var(--border-1);border-radius:10px;padding:.4rem .5rem;
  box-shadow:0 1px 3px rgba(16,16,18,.06)}
.sc2 .s-card .th{width:26px;height:26px;border-radius:6px;background:var(--neutral-200);flex:none;
  border:1px solid var(--border-2)}
.sc2 .s-card .tx{min-width:0}
.sc2 .s-card b{display:block;font-size:.625rem;font-weight:var(--fw-extra);color:var(--fg-1);
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc2 .s-card small{display:block;font-family:var(--font-mono);font-size:.625rem;color:var(--fg-4);margin-top:1px}

/* chat */
.sc2 .s-bub{max-width:78%;border-radius:10px;padding:.32rem .5rem;font-size:.625rem;line-height:1.35;
  box-shadow:0 1px 2px rgba(16,16,18,.05)}
.sc2 .s-bub.in{left:.7rem;top:2.202rem;background:var(--bg-surface);border:1px solid var(--border-1);color:var(--fg-2)}
.sc2 .s-bub.out{right:.7rem;top:4.302rem;background:var(--ch-wa-soft);color:#0B3B22;
  border:1px solid color-mix(in oklab,var(--ch-wa) 28%,transparent)}
.k-nudge .s-bub.out{top:2.202rem;right:.7rem}

/* an inline button, for the yes-no scenarios */
.sc2 .s-btn{left:.7rem;top:4.35rem;background:var(--bg-surface);border:1px solid var(--ch-wa);
  color:var(--ch-wa-deep);border-radius:8px;padding:.26rem .55rem;font-size:.625rem;
  font-weight:var(--fw-extra)}

/* form rows */
.sc2 .s-row{left:.7rem;right:.7rem;display:flex;align-items:center;gap:.4rem;
  background:var(--bg-surface);border:1px solid var(--border-1);border-radius:8px;padding:.3rem .45rem}
.sc2 .s-row:nth-of-type(1){top:2.148rem}
.sc2 .s-row:nth-of-type(2){top:4.002rem}
.sc2 .s-row i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none;opacity:.55}
.sc2 .s-row b{font-size:.625rem;font-weight:var(--fw-bold);color:var(--fg-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* stars, filling to the rating this scenario actually earns */
.sc2 .s-stars{left:.7rem;top:2.298rem;display:flex;gap:2px}
.sc2 .s-stars i{width:13px;height:13px;background:var(--border-3);flex:none;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* only the stars this scenario actually earns light up */
.sc2 .s-stars i.on{animation:scStar 5.5s steps(1) infinite;animation-delay:calc(var(--k) * 260ms + 200ms)}
@keyframes scStar{0%,3%{background:var(--border-3)}8%,86%{background:#FBBC04}94%,100%{background:var(--border-3)}}

/* dial */
.sc2 .s-dial{left:.7rem;top:1.998rem;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--c) var(--a,30deg),var(--border-3) 0);
  animation:scIn 5.5s var(--ease-out) infinite,scSweep 5.5s var(--ease-out) infinite}
@keyframes scSweep{0%,6%{--a:30deg}54%,100%{--a:360deg}}
.sc2 .s-dial::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg-surface)}
.sc2 .s-dial b{position:relative;z-index:1;font-family:var(--font-mono);font-size:.625rem;
  font-weight:var(--fw-bold);color:var(--fg-1);text-align:center;line-height:1.1;letter-spacing:-.03em;
  max-width:42px;overflow-wrap:anywhere}
.sc2 .s-note{left:4.593rem;top:2.7rem;font-size:.625rem;color:var(--fg-2);font-weight:var(--fw-semibold)}

/* channel attempts */
.sc2 .s-try{left:.7rem;display:inline-flex;align-items:center;gap:.3rem;background:var(--bg-surface);
  border:1px solid var(--border-2);border-radius:99px;padding:.24rem .55rem;font-size:.625rem;
  font-weight:var(--fw-bold);color:var(--fg-2)}
.sc2 .s-try:nth-of-type(1){top:2.202rem}
.sc2 .s-try:nth-of-type(2){top:3.75rem;left:1.609rem}

/* the outcome pill, bottom right on every kind */
.sc2 .s-chip{right:.7rem;bottom:.7rem;display:inline-flex;align-items:center;gap:.3rem;
  border-radius:99px;padding:.28rem .6rem .28rem .5rem;font-size:.625rem;line-height:1.1;
  font-weight:var(--fw-bold);white-space:nowrap;max-width:calc(100% - 1.4rem);
  overflow:hidden;text-overflow:ellipsis}
.sc2 .s-chip.ok{background:var(--grass-soft);color:var(--grass-deep)}
.sc2 .s-chip.ok::before{content:"";width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--grass-deep);
  -webkit-mask:var(--tick) center/8px 8px no-repeat;mask:var(--tick) center/8px 8px no-repeat}

/* the rail: a parcel through three named states */
.sc2 .s-rail{left:.9rem;right:.9rem;top:2.898rem;height:2px;background:var(--border-2);border-radius:2px}
.sc2 .s-rail .n{position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--border-3)}
.sc2 .s-rail .n1{left:0}.sc2 .s-rail .n2{left:calc(50% - 4px)}.sc2 .s-rail .n3{right:0}
.sc2 .s-rail .n{animation:scNode 5.5s steps(1) infinite}
.sc2 .s-rail .n2{animation-delay:1.5s}.sc2 .s-rail .n3{animation-delay:3s}
@keyframes scNode{0%,2%{background:var(--border-3)}6%,92%{background:var(--c)}96%,100%{background:var(--border-3)}}
.sc2 .s-rail .pk{position:absolute;top:-7px;left:0;width:14px;height:14px;border-radius:4px;
  background:var(--c);margin-left:-7px;animation:scRun 5.5s var(--ease-out) infinite}
@keyframes scRun{0%,8%{left:0}44%{left:50%}80%,100%{left:100%}}
.sc2 .s-ticks{left:.7rem;right:.7rem;top:3.6rem;display:flex;justify-content:space-between;gap:.3rem}
.sc2 .s-ticks b{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-4);font-weight:var(--fw-bold)}
.sc2 .s-ticks b:nth-child(2){text-align:center}.sc2 .s-ticks b:nth-child(3){text-align:right}
.k-rail .s-chip{display:none}

@media (prefers-reduced-motion:reduce){
  .sc2 *{animation-duration:1ms !important;animation-iteration-count:1 !important;
    animation-fill-mode:forwards !important}
  .sc2 .s-rail .pk{left:23.313rem}
  .sc2 .s-dial{--a:320deg}
}

/* the strip's icon carries the hue; its label stays neutral so eight in a row
   do not compete */
.scn-ind i[data-lucide],.scn-ind svg{color:var(--c)}
.scn-ind .dots i{background:var(--border-3)}
/* the trigger pill is a fact, not a category: neutral, like every other mono
   metadata line on the site. The hue survives once per card, on the icon. */
.scn-ft .trg{background:var(--bg-subtle);color:var(--fg-3);border:1px solid var(--border-2)}

/* The hero cover is a bigger box of the same composition, so it scales from one
   multiplier rather than 15 bespoke overrides tuned to a vocabulary that no
   longer exists. Every offset and type size in .sc2 is calc(Nrem * var(--k)). */
/* the hero shows the same composition at the size it was drawn for, framed so
   it still reads as a deliberate object beside a large headline */
.scn-hero .scn-cov{width:100%;max-width:26rem;height:auto;aspect-ratio:373/144;
  border-radius:var(--r-2xl);border:1px solid var(--border-1);box-shadow:var(--sh-md)}

/* ============================================================================
   COLOUR DISCIPLINE.
   Eight industries were each carrying their own hue in three places at once,
   so a row of cards read as a swatch chart. Industry is not a state and not a
   brand, so it gets no hue: the icon already tells them apart. Colour now
   means one of two things on this site, a channel's real brand mark, or a
   state (grass for done, coral for attention).
   ========================================================================== */
.indc,.scn{--c:var(--coral);--cs:var(--bg-subtle);--cd:var(--fg-2)}
.indc::before{background:var(--border-2)}
.indc:hover::before{background:var(--coral)}
.indc .ic{background:var(--bg-subtle);color:var(--fg-2)}
.indc .n{color:var(--fg-1)}
.indc:hover{border-color:var(--border-3)}
.scn-ind .i,.scn-ind svg{color:var(--fg-3)}

/* Capability hub cards. The scenario card carries a cover film; a capability
   card leads with its category and its verb instead, so the grid reads as an
   index rather than a second gallery. */
.scn-ind{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);
  font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-4)}
.scn-ind svg,.scn-ind i{width:13px;height:13px;flex:none;color:var(--c)}
.scn-go{display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;padding-top:.5rem;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-2)}
.scn-go svg,.scn-go i{width:14px;height:14px;transition:transform var(--t-base)}
.scn:hover .scn-go{color:var(--fg-1)}
.scn:hover .scn-go svg,.scn:hover .scn-go i{transform:translateX(3px)}