/* =========================================================================
   Yellowdesk v3 — the desktop product tour. Only /v3 loads this file.

   Two layers:
     .yt   the tour: the four-step bar and the stage.
     .ya   a replica of the app window, at the app's own sizes and tokens
           (saint-app src/app/globals.css): IBM Plex Sans 14px, ink on white,
           #e5e5e5 rules, zero radius, 48px pane heads, 56px pane feet,
           11px/500/.06em captions. It is drawn at 1216 x 660 and scaled to fit
           (assets/v3-tour.js sets --s), so the replica never reflows.

   MOTION, taken from the live demo on yellowdesk.ai (assets/site.css, measured frame by
   frame): rows fade in and rise 7px over .4s ease, 40ms apart, so a list lands in about
   .7s; the side pane slides in over .5s on cubic-bezier(.2,.7,.2,1) with its contents
   already in place; screens crossfade in .45s. No blur filter: the softness is the motion
   itself. Only opacity and transform animate, nothing reflows while it moves.

   State lives in classes on .yt__canvas, set by the script per chapter:
     p-jobs | p-saved | p-feed   which page is showing
     j-*      the job-search page's flow (typed, list, detail, dm...)
     s-*      saved searches: the alert going from Off to Daily
     f-*      the Leadfeed page's flow (cards arriving)
   ========================================================================= */

/* ---------- the step bar ----------
   The step the window is on is the one box in solid brand orange, white type, its
   progress running along the bottom in gold. Each step leads with the app's own icon
   for that surface. Step 4, the one that runs without you, is marked even when it is
   not the current one: a gold icon tile and a "Hands-free" tag. */
.yt__steps{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;margin-bottom:22px;
  box-shadow:0 18px 40px -22px rgba(60,20,5,.45)}
.yt__step{position:relative;display:flex;gap:14px;align-items:flex-start;text-align:left;padding:17px 20px 19px;
  border-right:1px solid var(--border);background:#fff;transition:background-color .45s cubic-bezier(.19,1,.22,1)}
.yt__step:last-child{border-right:none}
.yt__step:hover{background:var(--paper)}
.yt__ic{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);color:var(--muted-text);transition:background-color .45s ease,border-color .45s ease,color .45s ease}
.yt__ic .ic{display:inline-flex}
.yt__ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.yt__tx{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:1px}
.yt__tx b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);transition:color .45s ease}
.yt__tx>span{font-size:13px;line-height:1.4;color:var(--muted-text);transition:color .45s ease}
.yt__prog{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent-soft);
  transform:scaleX(0);transform-origin:0 50%}
.yt__step.run .yt__prog{animation:ytProg var(--dur,7000ms) linear forwards}
@keyframes ytProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* the current step */
.yt__step[aria-selected="true"],.yt__step[aria-selected="true"]:hover{background:var(--accent-deep);border-right-color:var(--accent-deep)}
.yt__step[aria-selected="true"] .yt__ic{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.1)}
.yt__step[aria-selected="true"] .yt__tx b{color:#fff}
.yt__step[aria-selected="true"] .yt__tx>span{color:rgba(255,255,255,.85)}

/* the autopilot step */
.yt__step--auto .yt__ic{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--ink)}
.yt__step--auto[aria-selected="true"] .yt__ic{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--ink)}
/* the tag rides the box's top edge, so the four boxes stay the same height */
.yt__tag{position:absolute;top:-10px;right:14px;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  padding:5px 7px;background:var(--accent-soft);color:var(--ink);box-shadow:0 4px 10px -6px rgba(60,20,5,.5)}
.yt__step--auto[aria-selected="true"] .yt__tag{background:#fff;color:var(--accent-deep)}

/* ---------- the stage: a 1216 x 660 canvas, scaled to the column ---------- */
.yt__stage{position:relative;aspect-ratio:1216/660}
.yt__canvas{position:absolute;left:0;top:0;width:1216px;height:660px;transform:scale(var(--s,1));transform-origin:0 0;
  --ya-ease:cubic-bezier(.2,.7,.2,1);--ya-dur:.58s}

/* the gesture, as a keyframe for things that build in when they appear */
@keyframes yaRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes yaFade{from{opacity:0}to{opacity:1}}

/* ======================= the app window ======================= */
.ya{position:absolute;inset:0;display:flex;overflow:hidden;background:#fff;color:#000;
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:14px;line-height:1.4;text-align:left;
  box-shadow:0 30px 70px -40px rgba(60,20,5,.45),0 0 0 1px rgba(0,0,0,.06);
  cursor:default;-webkit-user-select:none;user-select:none}
.ya .ic{display:inline-flex;flex:none}
.ya .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ya .tnum{font-variant-numeric:tabular-nums}
.ya__cap{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#6e6e6e}
.ya__vsep{display:inline-block;width:1px;height:12px;background:#e5e5e5;margin:0 10px;vertical-align:-1px}

/* ---- menu: the collapsed 56px rail. It never moves: the app around it does ---- */
.ya__rail{position:relative;z-index:3;width:56px;flex:none;display:flex;flex-direction:column;border-right:1px solid #e5e5e5;background:#fff}
.ya__brand{height:48px;flex:none;display:flex;align-items:center;justify-content:center;gap:6px;background:#b04a28;color:#fff}
.ya__mark{width:20px;height:20px}
.ya__brand .ic svg{width:14px;height:14px;opacity:.85}
.ya__nav{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0}
.ya__ni{position:relative;width:40px;height:36px;display:flex;align-items:center;justify-content:center;color:#6e6e6e;transition:color .3s ease,background-color .3s ease}
.ya__ni::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#cf5c36;transform:scaleY(0);transition:transform .5s var(--ya-ease)}
.p-jobs .ya__ni[data-nav="jobs"],.p-saved .ya__ni[data-nav="saved"],.p-feed .ya__ni[data-nav="feed"]{background:#f5f5f5;color:#b04a28}
.p-jobs .ya__ni[data-nav="jobs"]::before,.p-saved .ya__ni[data-nav="saved"]::before,.p-feed .ya__ni[data-nav="feed"]::before{transform:none}
.ya__sep{width:32px;height:1px;background:#e5e5e5;margin:6px 0}

/* ---- pages ----
   The page going out fades in a quarter second. The page coming in is there at once and
   assembles from its blocks (.ya-b), top to bottom, like spott's content area after a tab. */
.ya__page{position:absolute;top:0;bottom:0;left:56px;right:0;display:flex;background:#fff;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.p-jobs .ya__page--jobs,.p-saved .ya__page--saved,.p-feed .ya__page--feed{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s;z-index:1}
.ya__page--feed,.ya__page--saved{flex-direction:column}


/* ---- the loading bar: a thin orange line across the top of the content area, the way
   the app shows a page or a search loading. It runs on .is-loading and finishes, then
   fades, when the class comes off. ---- */
.ya__load{position:absolute;left:56px;right:0;top:0;height:3px;z-index:6;pointer-events:none;
  background:var(--accent,#cf5c36);transform:scaleX(0);transform-origin:0 50%;opacity:0;
  transition:transform .25s ease,opacity .3s ease .2s}
.is-loading .ya__load{opacity:1;transform:scaleX(.85);transition:transform .9s cubic-bezier(.1,.6,.2,1),opacity .05s}
.is-loaded .ya__load{opacity:0;transform:scaleX(1);transition:transform .2s ease,opacity .25s ease .2s}

/* ---- pane heads and feet ---- */
.ya__phead{height:48px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border-bottom:1px solid #e5e5e5}
.ya__ptitle{display:flex;align-items:center;gap:10px;font-weight:500}
.ya__ptitle .ic{color:#7c7c7c}
.ya__ghost{font-weight:500}
.ya__phead--page{padding:0 16px 0 20px}
.ya__h1{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.ya__h1 .ic{color:#7c7c7c}
.ya__h1 .ic svg{width:18px;height:18px}
.ya__pfoot{height:56px;flex:none;display:flex;align-items:center;border-top:1px solid #e5e5e5;padding:0 12px}

/* ---- buttons, inputs ---- */
.ya__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;font-size:14px;font-weight:500;white-space:nowrap;
  transition:transform .15s ease,background-color .15s ease}
.ya__btn--accent{background:#b04a28;color:#fff}
.ya__btn--secondary{border:1px solid #000;height:32px;font-size:13px;padding:0 12px}
.ya__btn--block{width:100%}
.ya__lbl{display:block;font-size:13px;font-weight:500;margin:12px 0 6px}
.ya__input{height:36px;border:1px solid #e5e5e5;padding:0 12px;display:flex;align-items:center;transition:border-color .25s ease}
.ya__input.is-focus{border-color:#000}
.ya__ph{color:#9a9a9a}
.ya__caret{display:none;width:1.5px;height:17px;background:#000;margin-left:1px;animation:yaBlink 1s steps(1) infinite}
.j-typing .ya__input--on .ya__caret,.j-typing2 .ya__input--loc .ya__caret{display:inline-block}
/* the location field: the placeholder gives way to the typed word, a suggestion drops
   under it, and once picked the word clears and the chip lands below */
.ya__input--loc{position:relative}
.ya__typed--loc:empty{display:none}
.ya__typed--loc:not(:empty)~.ya__ph,.ya__input--loc:has(.ya__typed--loc:not(:empty)) .ya__ph{display:none}
.ya__sug{position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);z-index:3;display:flex;justify-content:space-between;align-items:baseline;padding:9px 12px;
  background:#fff;border:1px solid #e5e5e5;box-shadow:0 14px 30px -14px rgba(0,0,0,.35);font-size:13.5px;
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s ease,transform .3s ease,background-color .15s ease}
.ya__sug span{font-size:12px;color:#6e6e6e}
.j-sug .ya__sug{opacity:1;transform:none}
.ya__sug.is-down{background:#f5f5f5;color:#b04a28}
@keyframes yaBlink{50%{opacity:0}}

/* ---- filters pane ---- */
.ya__filters{width:280px;flex:none;display:flex;flex-direction:column;border-right:1px solid #e5e5e5}
.ya__fbody{flex:1;overflow:hidden;padding:4px 16px 0}
.ya__grp{display:flex;align-items:center;gap:6px;margin:14px 0 2px;padding-top:14px;border-top:1px solid #e5e5e5;
  font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#6e6e6e}
.ya__grp:first-child{border-top:none;padding-top:6px}
.ya__grp .ic svg{width:13px;height:13px}
.ya__fchip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;margin-top:8px;border:1px solid #e5e5e5;font-size:13px;color:#6e6e6e}
.ya__fbody .ya__fchip--loc{animation:none!important;opacity:0;transform:translateY(7px);transition:opacity .46s ease,transform .46s ease}
.ya__fchip .ic svg{width:13px;height:13px}
.j-loc .ya__fbody .ya__fchip--loc{opacity:1;transform:none}

/* ---- results ----
   The list's right edge (Save search, the pager) moves under the job pane in one step, at
   the moment the pane starts to cover it; they then rise in at their new place. */
.ya__content{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.j-detail .ya__content{margin-right:440px}
.j-detail .ya__content .ya__btn--secondary,.j-detail .ya__content .ya__page-n{animation:yaRise .46s ease both .25s}
.ya__chips{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid #e5e5e5;height:49px;flex:none;overflow:hidden;
  opacity:0;transform:translateY(7px);transition:opacity .46s ease,transform .46s ease}
.j-list .ya__chips{opacity:1;transform:none}
.ya__chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid #e5e5e5;font-size:13px;color:#6e6e6e;white-space:nowrap;min-width:0;flex:none}
.ya__chip:first-child{flex:0 1 auto}
.ya__chip b{font-weight:400;color:#000;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ya__chip .ic{flex:none}
.ya__chip .ic svg{width:13px;height:13px}
.ya__tablewrap{position:relative;flex:1;overflow:hidden}
/* separate, not collapsed: collapsed borders belong to the table, and would stay drawn
   while the rows are still invisible */
.ya__table{width:1110px;border-collapse:separate;border-spacing:0;table-layout:fixed}
.ya__table th{height:36px;padding:0 12px;text-align:left;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#6e6e6e;border-bottom:1px solid #e5e5e5;
  opacity:0;transform:translateY(7px);transition:opacity .46s ease,transform .46s ease;transition-delay:.06s}
.j-list .ya__table th{opacity:1;transform:none}
.ya__table th:nth-child(1){width:270px}.ya__table th:nth-child(2){width:260px}.ya__table th:nth-child(3){width:130px}
.ya__table th:nth-child(4){width:200px}.ya__table th:nth-child(5){width:120px}
.ya__table td{height:40px;padding:0 12px;border-bottom:1px solid #e5e5e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ya__t{font-weight:500;transition:color .4s ease}
.ya__m{color:#6e6e6e}
.ya__co{display:inline-flex;align-items:center;gap:8px;color:#b04a28}
.ya__logo{width:20px;height:20px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e5e5e5;background:#fafafa;
  font-size:11px;font-weight:600;color:#7c7c7c}
.ya__logo--md{width:40px;height:40px;font-size:15px}
.ya__logo--lg{width:48px;height:48px;font-size:17px}
.ya__sb{display:inline-flex;align-items:center;gap:10px}
.ya__sb b{font-weight:500;min-width:18px;text-align:right}
.ya__sbt{width:72px;height:4px;background:#e5e5e5;position:relative;overflow:hidden}
.ya__sbt span{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v)*1%);background:#000;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ya-ease);transition-delay:calc(var(--i)*40ms + .2s)}
.j-list .ya__sbt span{transform:none}
/* rows come into focus one by one, 60ms apart */
.ya__row{opacity:0;transform:translateY(7px);
  transition:opacity .46s ease,transform .46s ease,background-color .3s ease;transition-delay:calc(var(--i)*46ms + .03s)}
.j-list .ya__row{opacity:1;transform:none}
/* the opened row: accent-soft at 25% and the inset bar, as data-grid.tsx draws it */
.ya__row--lead td:first-child{box-shadow:inset 0 0 0 #cf5c36;transition:box-shadow .3s ease}
.j-sel .ya__row--lead{background:rgba(239,200,139,.25);transition-delay:0s}
.j-sel .ya__row--lead td:first-child{box-shadow:inset 3px 0 0 #cf5c36}
.j-seen .ya__row--lead .ya__t{color:#6e6e6e}
.ya__empty{position:absolute;left:0;right:0;top:64px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#6e6e6e;font-size:13px;
  transition:opacity .3s ease}
.ya__empty .ic{color:#c9c9c9;margin-bottom:6px}
.ya__empty .ic svg{width:28px;height:28px}
.ya__empty b{color:#000;font-size:15px;font-weight:600}
.j-list .ya__empty{opacity:0}
.ya__pager{justify-content:space-between;padding:0 20px;font-size:13px;color:#6e6e6e;opacity:0;transition:opacity .4s ease .4s}
.ya__page-n{display:inline-flex;align-items:center;gap:10px;color:#000}
.j-list .ya__pager{opacity:1}

/* ---- the details pane: slides in over the list ---- */
.ya__detail{position:absolute;top:0;right:0;bottom:0;width:440px;z-index:2;display:flex;flex-direction:column;background:#fff;border-left:1px solid #e5e5e5;
  box-shadow:-24px 0 40px -36px rgba(0,0,0,.35);
  transform:translateX(101%);transition:transform var(--ya-dur) var(--ya-ease);will-change:transform}
.j-detail .ya__detail{transform:none}
.ya__dhead{justify-content:flex-start;gap:10px;color:#7c7c7c}
.ya__navarrows{display:flex;gap:10px;padding-right:12px;border-right:1px solid #e5e5e5;color:#c9c9c9}
.ya__kind{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.ya__dtitle{flex:1;min-width:0;color:#000;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ya__share{display:flex;align-items:center;gap:6px;color:#000;font-weight:500}
.ya__dscroll{flex:1;overflow:hidden;position:relative}
/* the pane "scrolls" by moving its body: first to the button, then on to the hiring manager */
.ya__dbody{padding:22px 22px 40px;transition:transform .98s cubic-bezier(.2,.7,.2,1);will-change:transform}
.j-dm .ya__dbody{transform:translateY(calc(var(--dm-scroll,300) * -1px))}
.j-dm2 .ya__dbody{transform:translateY(calc(var(--dm-scroll2,500) * -1px))}
/* what's in the pane comes into focus behind it, line by line, as it lands */
.ya__jhead{display:flex;gap:14px;align-items:flex-start}
.ya__jtitle{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.ya__jmeta{margin-top:6px;font-size:13.5px;color:#6e6e6e;line-height:1.5}
.ya__jmeta b{color:#000;font-weight:600}
.ya__gauge{margin-top:20px;border:1px solid #e5e5e5;padding:16px}
.ya__gnum{font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1.05;margin-top:4px}
.ya__gtrack{position:relative;display:grid;grid-template-columns:repeat(4,1fr);height:10px;margin-top:12px}
.ya__gtrack .z1,.ya__mtrack .z1{background:#c9c9c9}.ya__gtrack .z2,.ya__mtrack .z2{background:#efc88b}
.ya__gtrack .z3,.ya__mtrack .z3{background:#e09a5f}.ya__gtrack .z4,.ya__mtrack .z4{background:#cf5c36}
.ya__gmark{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#000;left:calc(var(--v)*1%)}
/* the detail gauge's marker rides a full-width layer that translates: transform, not left */
.ya__gmarkw{position:absolute;inset:0;transform:translateX(0);transition:transform .8s var(--ya-ease);will-change:transform}
.ya__gmarkw .ya__gmark{left:0}
.j-gauge .ya__gmarkw{transform:translateX(calc(var(--v)*1%))}
.ya__gscale{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:#6e6e6e}
.ya__brk{display:grid;grid-template-columns:repeat(3,1fr);column-gap:18px;margin-top:14px}
.ya__brk div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #e5e5e5;font-size:13px;color:#6e6e6e;
  opacity:0;transform:translateY(7px);transition:opacity .46s ease,transform .46s ease;transition-delay:calc(var(--i)*40ms)}
.ya__brk b{color:#000;font-weight:600}
.j-brk .ya__brk div{opacity:1;transform:none}
.ya__dmbtn{margin-top:20px}
.ya__chev{transition:transform .5s var(--ya-ease)}
.j-dm .ya__chev{transform:rotate(180deg)}

/* ---- under the button: attributes, with decision makers laid over them ---- */
.ya__below{position:relative}
.ya__attrs{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.ya__attrs div:first-child{grid-column:1/-1}
.ya__attrs div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #e5e5e5;font-size:13px}
.ya__attrs dt{color:#6e6e6e}
.ya__sec{margin-top:22px}
.ya__sec p{margin-top:6px;font-size:13.5px;color:#6e6e6e}
.ya__attrs,.ya__sec{transition:opacity .3s ease}
.j-dm .ya__attrs,.j-dm .ya__sec{opacity:0}
.ya__dfoot{gap:8px;padding:0 22px;color:#b04a28;font-weight:500}

/* ---- decision makers ---- */
.ya__dm{position:absolute;left:0;right:0;top:0;padding-top:4px;pointer-events:none}
.ya__dmgrp{margin-top:18px;padding-bottom:6px;border-bottom:1px solid #000;font-weight:600}
.ya__dmcap{margin-top:6px;font-size:12.5px;color:#6e6e6e}
.ya__person{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #e5e5e5}
.ya__dm>*{opacity:0;transform:translateY(7px);transition:opacity .46s ease,transform .46s ease}
.j-dm .ya__dm>*{opacity:1;transform:none;transition-delay:calc(var(--l,0)*45ms + .1s)}
.ya__pmain{min-width:0;flex:1}
.ya__pname{font-weight:500}
.ya__sur-r{display:none}
.ya__ptitle2{font-size:13px;color:#6e6e6e}
/* the "available" icons and the revealed details share one cell: revealing swaps them */
.ya__swap{display:grid;margin-top:6px;min-height:46px}
.ya__swap>*{grid-area:1/1}
.ya__has{display:flex;gap:10px;color:#7c7c7c;transition:opacity .3s ease,filter .3s ease}
.ya__has .ic svg{width:14px;height:14px}
.ya__open{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:13px}
.ya__open>*{opacity:0;transform:translateY(7px);transition:opacity .46s ease,transform .46s ease}
.ya__open>:nth-child(2){transition-delay:.08s}
.ya__copy{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ya__copy .ic svg{width:13px;height:13px}
.ya__cp{color:#7c7c7c}
.ya__li{display:inline-flex;align-items:center;gap:8px;color:#b04a28}
.ya__li svg{width:14px;height:14px}
.ya__li u{text-underline-offset:2px}
.ya__pbtns{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.ya__cbtn{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid #000;background:#fff;font-size:12.5px;font-weight:500;white-space:nowrap;
  transition:transform var(--ya-dur) var(--ya-ease),background-color .15s ease,color .15s ease,opacity .3s ease}
/* once revealed: the e-mail button fades, the mobile button glides up into its place */
.j-revealed .ya__cbtn--email{opacity:0}
.j-revealed .ya__person--hero .ya__cbtn--email+.ya__cbtn{transform:translateY(-34px)}
.j-revealed .ya__person--hero .ya__has{opacity:0}
.j-revealed .ya__person--hero .ya__open>*{opacity:1;transform:none}
.j-revealed .ya__person--hero .ya__sur-o{display:none}
.j-revealed .ya__person--hero .ya__sur-r{display:inline;animation:yaRise .46s ease both}
.j-revealed .ya__person--hero{animation:yaGlow 1.4s ease both}
@keyframes yaGlow{0%{background:rgba(239,200,139,0)}20%{background:rgba(239,200,139,.3)}100%{background:rgba(239,200,139,0)}}

/* ---- Leadfeed ---- */
.ya__feedwrap{flex:1;display:flex;gap:24px;padding:24px;overflow:hidden;align-items:flex-start}
.ya__feed{width:744px;flex:none;display:flex;flex-direction:column;gap:12px}
/* cards rise in one after another, the way the live demo's rows do */
.ya__card{border:1px solid #e5e5e5;padding:20px;background:#fff;
  opacity:0;transform:translateY(7px);transition:opacity .46s ease,transform .46s ease;transition-delay:calc(var(--i)*70ms)}
.f-cards .ya__card{opacity:1;transform:none}
.ya__chead{display:flex;justify-content:space-between;align-items:baseline}
.ya__age{font-size:13px;color:#6e6e6e}
.ya__jhead--card{margin-top:12px;align-items:center}
.ya__ctitle{font-size:17px;font-weight:600;letter-spacing:-.01em}
.ya__csub{font-size:13px;color:#6e6e6e}
.ya__excerpt{margin-top:12px;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ya__kv{display:flex;gap:28px;margin-top:14px}
.ya__kv>div{display:flex;flex-direction:column;gap:3px}
.ya__kv .ya__kv-r{margin-left:auto}
.ya__mini{display:inline-flex;align-items:center;gap:8px}
.ya__mini b{font-weight:600}
.ya__mtrack{position:relative;display:grid;grid-template-columns:repeat(4,1fr);width:120px;height:4px}
.ya__mtrack .ya__gmark{top:-4px;bottom:-4px}
.ya__band{font-size:11px;font-weight:600;padding:1px 6px;background:#b04a28;color:#fff}
.ya__cfoot{margin-top:14px;padding-top:12px;border-top:1px solid #e5e5e5;font-size:13px;color:#6e6e6e}
.ya__rolesh{margin-top:14px}
.ya__roles{margin-top:6px}
.ya__roles div{display:flex;gap:16px;padding:8px 4px;border-top:1px solid #e5e5e5;font-size:13.5px}
.ya__roles b{flex:1;font-weight:500}
.ya__roles span{color:#6e6e6e;font-size:13px}
.ya__about{width:320px;flex:none;border:1px solid #e5e5e5;padding:20px}
.ya__abt{margin-top:4px;font-size:15px;font-weight:600}
.ya__arow{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #e5e5e5;font-size:13px;color:#6e6e6e}
.ya__arow:nth-of-type(3){border-top:1px solid #e5e5e5;margin-top:14px}
.ya__arow .ic{color:#7c7c7c;padding-top:1px}
.ya__about .ya__btn{margin-top:16px}

/* ======================= saved searches + the alert ======================= */
.ya__alertcount{font-size:13px;font-weight:500;color:#b04a28;padding-right:4px}
.ya__ac-on,.s-alert .ya__ac-off{display:none}
.s-alert .ya__ac-on{display:inline-block;animation:yaRise .46s ease both}
.ya__table--saved{width:1160px}
.ya__table--saved th{opacity:1;transform:none}
.ya__table--saved th:nth-child(1){width:300px}.ya__table--saved th:nth-child(2){width:170px}.ya__table--saved th:nth-child(3){width:190px}
.ya__table--saved th:nth-child(4){width:150px}.ya__table--saved th:nth-child(5){width:150px}
.ya__table--saved td{height:52px;overflow:visible}
.ya__sname{font-weight:500}
.ya__srow{transition:background-color .3s ease}
/* backwards, not both: a row that keeps its finished transform keeps its own stacking
   context, and the open Alerts menu would then slide under the row below it */
.p-saved .ya__srow{animation:yaRise .46s ease backwards;animation-delay:calc(var(--i)*40ms + .1s)}
.s-hover .ya__srow--hero{background:#f5f5f5}
/* every row is its own compositor layer (will-change, below), so a later row paints over
   an earlier one: the row that owns the open Alerts menu has to sit above its neighbours */
.ya__srow--hero{position:relative;z-index:2}
.ya__acts{display:flex;gap:16px;font-size:13px;font-weight:500}
/* the native select (components/ui/select.tsx): a 36px control with a chevron at the right */
.ya__sel{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:120px;height:36px;padding:0 10px 0 12px;
  border:1px solid #e5e5e5;background:#fff;transition:border-color .2s ease}
.ya__sel .ic{color:#7c7c7c}
.ya__sel .ic svg{width:14px;height:14px}
.ya__sel-on,.s-alert .ya__sel-off{display:none}
.s-alert .ya__sel-on{display:inline;animation:yaFade .35s ease both}
.s-open .ya__sel--hero{border-color:#000}
.ya__menu{position:absolute;left:-1px;top:calc(100% + 4px);width:calc(100% + 2px);z-index:4;display:flex;flex-direction:column;padding:4px 0;
  background:#fff;border:1px solid #e5e5e5;box-shadow:0 14px 30px -14px rgba(0,0,0,.35);
  pointer-events:none;
  /* it unrolls from the top fully opaque: a fading menu lets the rows behind it show through */
  visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .3s var(--ya-ease),visibility 0s linear .3s}
.s-open .ya__menu{visibility:visible;clip-path:inset(0 0 -40px 0);transition:clip-path .3s var(--ya-ease),visibility 0s}
.ya__opt{padding:7px 12px;transition:background-color .15s ease}
.ya__opt--cur{font-weight:500}
.s-pick .ya__opt--pick{background:#f5f5f5;color:#b04a28}
.ya__nm-on,.s-alert .ya__nm-off{display:none}
.s-alert .ya__nm-on{display:inline;animation:yaFade .5s ease both}
.ya__nm-off{color:#6e6e6e}
.s-alert .ya__srow--hero{background:rgba(239,200,139,.18)}

/* ---- what a click looks like on the thing clicked ---- */
.ya__btn--accent.is-down{background:#963e20;transform:scale(.97)}
.ya__cbtn.is-down{background:#000;color:#fff}
.ya__ni.is-down{background:#f5f5f5;color:#b04a28}
.ya__sel.is-down{border-color:#000}
.ya__t.is-down{color:#b04a28}

/* ======================= the cursor ======================= */
/* It travels on an ease-in-out, the way a hand does, and lands with a soft ring at its tip. */
.yt__cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:10;pointer-events:none;opacity:0;will-change:transform;
  transform:translate(var(--cx,760px),var(--cy,420px));transition:transform .52s cubic-bezier(.65,0,.35,1),opacity .3s ease}
.yt__cur.is-on{opacity:1}
.yt__cur svg{position:relative;width:22px;height:22px;fill:#cf5c36;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));transform-origin:5px 3px;transition:transform .16s ease}
.yt__cur.is-down svg{transform:scale(.84)}
.yt__cur::before{content:"";position:absolute;left:-13px;top:-15px;width:36px;height:36px;border-radius:50%;
  background:rgba(207,92,54,.3);transform:scale(0);opacity:0}
.yt__cur.is-tap::before{animation:ytRipple .5s ease-out}
@keyframes ytRipple{0%{transform:scale(.15);opacity:1}100%{transform:scale(1.25);opacity:0}}

/* a jump (a click on a step) lands on the step's starting state without replaying the way there */
.yt__canvas.is-instant *{transition:none!important;animation-duration:0s!important;animation-delay:0s!important}


/* each moving line on its own compositor layer, so nothing repaints while it moves */
.ya__row,.ya__chips,.ya__table th,.ya__brk div,.ya__dm>*,.ya__open>*,.ya__card,.ya__srow{will-change:opacity,transform}