/* ── hero v2: the night shift, performed ─────────────────────
   Left: what the worker is. Right: tonight's shift board, filling in one
   job at a time while Cal acts each job out (js/hero2.js, js/cal.js).
   The live desk opens in a sheet from "Try it on your business". */
.hv2.door-copy.hero5{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:center;gap:clamp(6rem,11vw,11rem)}
.hv2 .h5-say{max-width:35rem}
.hv2-k{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lamp);margin-bottom:1.1rem}
.hv2 .h5{font-size:clamp(2.9rem,5vw,4.7rem)}
.hv2 .h5 .lamp em{font-style:normal;color:var(--lamp)}
.hv2 .h5-sub{max-width:34rem}
.hv2 .sub-phone{display:none}
.hv2-acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;align-items:center}
.hv2-try{display:inline-flex;align-items:center;gap:.7rem;padding:1.05rem 1.6rem;border-radius:999px;background:var(--lamp);color:#15110A;
  font-weight:600;font-size:1.05rem;text-decoration:none;box-shadow:0 10px 30px rgba(243,195,106,.25);
  transition:transform .5s cubic-bezier(.32,.72,0,1),background .3s,box-shadow .5s}
.hv2-try svg{width:18px;height:18px;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.hv2-try:hover{background:var(--lamp-hi);box-shadow:0 14px 40px rgba(243,195,106,.35)}
.hv2-try:hover svg{transform:translateX(4px)}
.hv2-try:active{transform:scale(.98)}
.hv2-call{display:inline-flex;align-items:center;gap:.7rem;padding:.95rem 1.4rem;border-radius:999px;border:1px solid rgba(243,195,106,.45);
  color:var(--paper);text-decoration:none;font-weight:500;transition:border-color .3s,background .3s}
.hv2-call:hover{border-color:var(--lamp);background:rgba(243,195,106,.06)}
.hv2-try:focus-visible,.hv2-call:focus-visible,.hv2-talk:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.hv2-note{margin-top:1rem;font-size:.88rem;color:var(--dim)}
.hv2-talk{font:inherit;background:none;border:0;padding:0;color:var(--fog);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hv2-talk:hover{color:var(--lamp)}
.hv2-more{margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.08);font-size:.88rem;color:var(--dim);max-width:34rem}
.hv2-more a{color:#C9CDCB;text-decoration:none}.hv2-more a:hover{color:var(--paper)}
.hv2-more .go{color:var(--teal);margin-left:.2rem}

/* the shift board */
.hv2-stage{position:relative;justify-self:end;width:min(34rem,100%)}
.shiftboard{position:relative;z-index:3;border-radius:22px;background:rgba(23,27,31,.88);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px rgba(0,0,0,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden}
.sb-head{display:flex;justify-content:space-between;align-items:center;padding:1.15rem 1.4rem;border-bottom:1px solid var(--line)}
.sb-head b{display:block;font-family:var(--hero);font-weight:600;font-size:1.08rem;color:var(--paper)}
.sb-head i{font-style:normal;font-size:.8rem;color:var(--dim)}
.sb-live{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.sb-rows{list-style:none;margin:0;padding:.4rem 0;min-height:23rem}
.sb-row{display:grid;grid-template-columns:4.2rem 2.5rem minmax(0,1fr) auto;gap:.85rem;align-items:center;padding:.8rem 1.4rem;
  border-left:3px solid transparent;transition:background .6s cubic-bezier(.32,.72,0,1),border-color .6s}
.sb-t{font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums}
.sb-n{width:2.5rem;height:2.5rem;border-radius:12px;display:grid;place-items:center;background:rgba(243,195,106,.12);color:var(--lamp);
  font-family:var(--hero);font-weight:700;font-size:.92rem}
.sb-x{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.sb-x b{font-weight:500;color:var(--paper);font-size:.98rem}
.sb-x i{font-style:normal;font-size:.8rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-c{font-size:.74rem;font-weight:600;padding:.38rem .7rem;border-radius:999px;color:var(--teal);background:rgba(95,191,168,.12);white-space:nowrap}
.sb-foot{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.4rem;border-top:1px solid var(--line);
  background:rgba(243,195,106,.06);font-size:.86rem;color:var(--fog)}
.sb-foot b{color:var(--paper);font-weight:600}
.sb-paid{color:var(--lamp);font-weight:600;white-space:nowrap}
/* states driven by hero2.js; with no script the board simply shows the finished night */
.shiftboard.live .sb-row{opacity:0;transform:translateY(12px);filter:blur(4px);
  transition:opacity .8s cubic-bezier(.33,1,.68,1),transform 1s cubic-bezier(.16,1,.3,1),filter .8s,background .6s,border-color .6s}
.shiftboard.live .sb-row.on,.shiftboard.live .sb-row.done{opacity:1;transform:none;filter:none}
.sb-row.on{background:rgba(243,195,106,.07);border-left-color:var(--lamp)}
.sb-row.on .sb-c{color:var(--lamp);background:rgba(243,195,106,.13)}
.sb-row.on .sb-c::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.4rem;border-radius:50%;background:currentColor;
  vertical-align:1px;animation:sbblink 1s steps(2) infinite}
@keyframes sbblink{50%{opacity:.2}}
.sb-paid.pending{color:var(--dim);font-weight:400}

/* Cal runs along the bottom of the hero, the way a broadcast mascot crosses the screen */
.cal-track{position:absolute;left:0;right:0;bottom:0;height:min(40vh,26rem);z-index:5;pointer-events:none;overflow:hidden}
.cal-runner{position:absolute;bottom:.6rem;left:0;width:min(40vh,26rem);height:min(40vh,26rem);will-change:transform;
  transform:translate3d(var(--x,-120%),0,0);filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
.cal-runner canvas,.cal-runner .cal-still{position:absolute;inset:0;width:100%;height:100%}
.cal-runner .cal-still{object-fit:contain;opacity:0;transition:opacity .4s}
.cal-runner.still .cal-still{opacity:1}
.cal-runner.still canvas{opacity:0}
.cal-runner.moving{transition:transform var(--dur,1.7s) cubic-bezier(.45,.05,.55,.95)}
/* his shadow on the "floor" so he reads as standing, not floating */
.cal-runner::after{content:"";position:absolute;left:24%;right:24%;bottom:9%;height:7%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:-1}

/* the desk, in a sheet */
.desk-sheet{position:fixed;inset:0;z-index:120;display:grid;place-items:center}
.desk-sheet[hidden]{display:none}
.ds-scrim{position:absolute;inset:0;background:rgba(6,8,10,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:dsfade .4s cubic-bezier(.33,1,.68,1) both}
.ds-card{position:relative;width:min(30rem,calc(100% - 2rem));max-height:calc(100svh - 3rem);display:flex;flex-direction:column;gap:.8rem;
  animation:dsup .7s cubic-bezier(.16,1,.3,1) both}
@keyframes dsfade{from{opacity:0}}
@keyframes dsup{from{opacity:0;transform:translateY(28px) scale(.985);filter:blur(6px)}}
.ds-top{display:flex;justify-content:space-between;align-items:center;color:var(--paper)}
.ds-top p{font-family:var(--hero);font-weight:600;font-size:1.15rem}
.ds-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(23,27,31,.9);color:var(--fog);display:grid;place-items:center;cursor:pointer}
.ds-close svg{width:18px;height:18px}
.ds-close:hover{color:var(--paper);border-color:var(--dim)}
.desk-sheet .hero-desk{display:none}
.desk-sheet .hd-note{display:none}
.desk-sheet .w-desk{width:100%;flex:1 1 auto;min-height:0;align-self:stretch;animation:none;opacity:1}
.desk-sheet .wd-body{height:min(24rem,50svh)!important;min-height:0!important;max-height:none!important}
.desk-sheet .wd-foot{display:flex}
body.sheet-open{overflow:hidden}

@media(max-width:900px){
  .hv2.door-copy.hero5{grid-template-columns:minmax(0,1fr)}
  .hv2-k{font-size:.68rem;margin-bottom:.7rem}
  .hv2 .sub-wide{display:none}.hv2 .sub-phone{display:inline}
  .hv2 .h5-sub{font-size:1rem}
  .hv2-stage{justify-self:stretch;width:100%;order:2}
  .sb-head{padding:.85rem 1rem}
  .sb-rows{min-height:0;height:13.4rem;padding:.2rem 0;overflow:hidden;display:flex;flex-direction:column-reverse;justify-content:flex-end}
  .sb-row{grid-template-columns:3.6rem minmax(0,1fr) auto;gap:.6rem;padding:.6rem 1rem}
  .sb-n{display:none}
  .sb-x b{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sb-x i{font-size:.74rem}
  .sb-row.gone{display:none}
  .sb-foot{padding:.75rem 1rem;font-size:.76rem}
  .hv2-acts{flex-direction:column;align-items:stretch;gap:.6rem;margin-top:1rem}
  .hv2-try,.hv2-call{justify-content:center;min-height:52px}
  .hv2-note{text-align:center;font-size:.8rem}
  .hv2-more{margin-top:1.2rem;padding-top:.8rem;font-size:.78rem;text-align:center}
  .h5-say{display:contents}
  .h5-say>*{order:0}
  .hv2-acts,.hv2-note,.hv2-more{order:3}
  .hv2-stage{margin-top:4.6rem}
  .shiftboard.live .sb-row:not(.on):not(.done){display:none}
  .cal-track.perched{top:-7.4rem;bottom:auto;left:-.4rem;right:-.4rem;height:8rem;z-index:4}
  .cal-track.perched .cal-runner{width:8rem;height:8rem;bottom:-1.15rem}
  .sb-rows{height:10.9rem}
  /* the hero has its own call button, so the pinned call bar waits until you scroll past it */
  body.in-hero:not(.voice-live):not(.voice-connecting) .line-bar{transform:translateY(160%);opacity:0;pointer-events:none}
  .hv2 .h5-say{max-width:none}
  .desk-sheet{place-items:end center}
  .ds-card{width:100%;max-height:100svh;height:100svh;padding:max(.8rem,env(safe-area-inset-top)) .8rem .8rem;background:var(--night);gap:.6rem}
  .desk-sheet .w-desk{display:flex}
  .desk-sheet .wd-body{height:auto!important;flex:1 1 auto}
  .desk-sheet .hero-desk{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ds-scrim,.ds-card{animation:none}
  .cal-runner.moving{transition:none}
}

/* ── v2.1: Cal works between the words and the board ──────
   Small, at mid height, in the gap between the two columns (sized and placed
   by hero2.js). He runs in from the words' side and out past the board's edge,
   clipped to the gap, so he never covers either. Phones keep him on the board. */
.cal-track.gap{position:absolute;bottom:auto;overflow:visible;z-index:1;pointer-events:none}
@media(min-width:901px){.hv2 .h5-say{position:relative;z-index:3}.hv2-stage{z-index:3}}
.cal-track.gap .cal-runner{bottom:0;filter:none}
.cal-runner{filter:none}
.cal-track.gap .cal-runner::after{bottom:4%}
.sb-rows{min-height:0}
@media(min-width:901px){.hv2.door-copy.hero5{gap:clamp(9rem,14vw,15rem)}.hv2 .h5-say{max-width:33rem}.hv2-stage{width:min(32rem,100%)}}
@media(min-width:901px){.hv2-acts{flex-wrap:nowrap}.hv2-try{padding:1rem 1.35rem;font-size:1rem;white-space:nowrap}.hv2-call{padding:.9rem 1.15rem;font-size:.95rem;white-space:nowrap}}

/* The corner assistant used to hide on the opening screen because the old hero
   had the desk in it. The desk now lives in a sheet, so the assistant shows from
   the first screen, and steps aside only while the sheet is open. */
@media(min-width:901px){body.in-hero .guide-launch:not(.hidden){visibility:visible;pointer-events:auto}}
/* on a phone it would sit on top of the hero's own buttons, so it arrives as soon as you scroll */
body.sheet-open .guide-launch{visibility:hidden;pointer-events:none}

/* ── v2.2: rows that haven't run yet show as a faint queue instead of empty space ── */
@media(min-width:901px){
  .shiftboard.live .sb-row{opacity:.22;transform:none;filter:none}
  .shiftboard.live .sb-row:not(.on):not(.done) .sb-c{visibility:hidden}
}
.hv2-more .go{margin-left:0;display:inline-block;margin-top:.3rem}