/* fleet.css v3 - the homepage fleet section (#fleet, section 2). Loads after app.css; every colour, face and radius is
   a token from app.css or the block below (fleet/UI-SPEC.md, amendments v2-v4). Everything is fx- prefixed and scoped
   under the section's .fleet class, so nothing here can touch the rest of the homepage. */

/* ── tokens: photographs do not change with the theme, so anything sitting on them is fixed ── */
.fleet{
  --fx-open:min(62vw,980px); --fx-slim:112px; --fx-gap:8px; --fx-r:22px;
  --f-on-photo:#d9d7d4;
  --f-on-photo-dim:rgba(217,215,212,.72);
  --f-live-photo:#7ea887;
  --f-scrim:rgba(10,8,1,.78);
  --f-scrim-0:rgba(10,8,1,0);
  --f-glass:rgba(10,8,1,.5);
  --f-hair-photo:rgba(217,215,212,.22);
  --f-handset:#0b0b0c;
  --f-handset-rim:#3b3a38;
}

/* anything the script hides with [hidden] stays hidden, whatever display its class sets */
.fleet [hidden]{display:none!important}

/* ── the stage: one screen, pinned while the page scrolls through one step per card (height set by fleet.js) ── */
.fx-stage{position:relative}
/* on the homepage the section joins the stacking pattern: it scrolls through, holds by its bottom, the next section slides over */
@media (min-width:761px){.home main>.fleet{position:sticky;background:var(--ground)}
  /* the homepage's floating "Try the agent" pill is fixed 22px from the right and ~134px wide: keep the bar clear of it */
  .home .fx-bar{padding-right:max(var(--gut),172px)}}
.fx-pin{position:sticky;top:0;height:100svh;min-height:600px;padding-top:76px;display:flex;flex-direction:column}
.fx-viewport{flex:1;min-height:0;overflow:hidden;padding-top:12px;outline:none;cursor:grab;touch-action:pan-y}
.fx-viewport.is-drag{cursor:grabbing;user-select:none}
.fx-viewport:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.fx-strip{list-style:none;margin:0;padding:0;display:flex;column-gap:var(--fx-gap);height:100%;
  transition:transform .9s var(--ease);will-change:transform}
.fx-card{position:relative;flex:0 0 var(--fx-slim);height:100%;border-radius:var(--fx-r);overflow:hidden;isolation:isolate;
  background:var(--panel);transition:flex-basis .9s var(--ease)}
.fx-card.is-open{flex-basis:var(--fx-open)}
.fx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%;
  transform:scale(1.06);filter:brightness(.55) saturate(.9);transition:transform 1.2s var(--ease),filter .7s var(--ease)}
.fx-card:not(.is-open):hover .fx-img{filter:brightness(.8) saturate(1)}
.fx-card.is-open .fx-img{transform:none;filter:brightness(.94)}
.fx-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;transition:opacity .7s var(--ease);
  background:linear-gradient(90deg,var(--f-scrim) 0%,var(--f-scrim-0) 48%),linear-gradient(0deg,var(--f-scrim) 0%,var(--f-scrim-0) 40%),
    linear-gradient(180deg,var(--f-scrim) 0%,var(--f-scrim-0) 26%)}
.fx-card.is-open::after{opacity:1}
.fx-hit{position:absolute;inset:0;z-index:3;width:100%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;border-radius:var(--fx-r)}
.fx-hit:focus-visible{outline:2px solid var(--f-on-photo);outline-offset:-4px}
.fx-card.is-open .fx-hit{pointer-events:none}
.fx-tab{position:absolute;left:50%;top:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--f-on-photo);transition:opacity .35s var(--ease)}
.fx-vname{writing-mode:vertical-rl;font:500 15px/1 var(--fd);letter-spacing:-.01em;white-space:nowrap}
.fx-card.is-open .fx-tab{opacity:0}
.fx-tab .f-dot.is-live,.fx-copy .f-dot.is-live{background:var(--f-live-photo)}
/* a sliver whose inbox is busy right now: a quiet ring at its foot, like a phone lighting up in the dark */
.fx-pulse{position:absolute;left:50%;bottom:22px;width:8px;height:8px;margin-left:-4px;border-radius:999px;background:var(--f-on-photo);
  opacity:0;transform:scale(.6);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.fx-card.is-busy .fx-pulse{opacity:.95;transform:none;animation:fxpulse 2.2s var(--ease) infinite}
@keyframes fxpulse{0%{box-shadow:0 0 0 0 var(--f-hair-photo)}70%{box-shadow:0 0 0 10px var(--f-scrim-0)}100%{box-shadow:0 0 0 0 var(--f-scrim-0)}}

/* the open card: copy on the left, the inbox on the right; the body keeps the open width so nothing reflows as it opens */
.fx-body{position:absolute;inset:0 auto 0 0;width:var(--fx-open);z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;padding:26px 26px 22px 30px;
  container-type:size;color:var(--f-on-photo);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.fx-card.is-open .fx-body{opacity:1;pointer-events:auto;transition-delay:.3s}
.fx-copy{display:flex;flex-direction:column;min-width:0;text-shadow:0 1px 16px var(--f-scrim);transform:translateY(12px);transition:transform .9s var(--ease)}
.fx-card.is-open .fx-copy{transform:none;transition-delay:.32s}
.fx-status{display:flex;align-items:center;gap:10px;margin:0;font:400 13px/1 var(--fs);color:var(--f-on-photo-dim)}
.fx-clock{margin:28px 0 0;display:flex;flex-direction:column;gap:8px}
.fx-clock b{font:400 64px/1 var(--fd);letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums}
.fx-clock span{font:400 13px/1.3 var(--fs);color:var(--f-on-photo-dim)}
.fx-clock.is-ago b{font-size:44px}
.fx-id{margin-top:auto}
.fx-name{margin:0;font:500 56px/1 var(--fd);letter-spacing:-.035em}
.fx-biz{margin:10px 0 0;font:400 15px/1.4 var(--fs);color:var(--f-on-photo-dim)}
.fx-figs{margin-top:18px}
.fx-period{margin:0 0 8px;font:400 12px/1.4 var(--fs);color:var(--f-live-photo)}
.fx-figs > div{display:flex;flex-wrap:wrap;gap:6px 30px}
.fx-fig{margin:0;display:flex;flex-direction:column;gap:3px}
.fx-fig b{font:500 28px/1 var(--fd);letter-spacing:-.03em;font-variant-numeric:lining-nums proportional-nums}
.fx-fig span{font:400 13px/1.3 var(--fs);color:var(--f-on-photo-dim)}

/* the phone is drawn as a real handset, measured off an iPhone 15 Pro (body 70.6 x 146.6 mm, screen 9:19.5, 393 x 852 pt):
   every part is a fraction of the body height --fx-ph, which is as tall as the card allows (capped at 640px). The body is
   0.4816 of its height wide, the bezel 0.0187, so the screen inside is exactly 9:19.5. The column takes the body's width,
   read off the card height through the body's size container. Registered so it computes to px once, at .fx-device:
   the phone is itself a container and would otherwise re-resolve the cq units against its own width. */
@property --fx-ph{syntax:"<length>";inherits:true;initial-value:0px}
.fx-device{--fx-ph:min(100cqh - 44px,640px,100cqw * .9);width:calc(var(--fx-ph) * .4816);display:flex;flex-direction:column;justify-content:flex-end;
  min-height:0;transform:translateY(26px);transition:transform 1s var(--ease)}
.fx-card.is-open .fx-device{transform:none;transition-delay:.38s}
.fleet .fx-phone{grid-column:auto;justify-self:auto;width:100%;flex:0 0 auto;height:var(--fx-ph);min-height:0;padding:calc(var(--fx-ph) * .0187);
  border:0;border-radius:calc(var(--fx-ph) * .081);background:var(--f-handset);box-shadow:inset 0 0 0 1.5px var(--f-handset-rim),0 30px 60px -24px var(--f-scrim)}
.fleet .fx-phone .screen{position:relative;height:100%;border-radius:calc(var(--fx-ph) * .062)}
/* the handset's own chrome: status bar (the city's time, signal, battery), the camera island, the home indicator */
.fx-sys{position:absolute;z-index:3;inset:0 0 auto;height:calc(var(--fx-ph) * .061);display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--fx-ph) * .052);pointer-events:none;color:var(--f-on-photo);font:600 max(9px,calc(var(--fx-ph) * .0192))/1 var(--fs);font-variant-numeric:tabular-nums}
.fx-sys::before{content:"";position:absolute;left:50%;top:calc(var(--fx-ph) * .0124);width:calc(var(--fx-ph) * .1424);height:calc(var(--fx-ph) * .0418);
  margin-left:calc(var(--fx-ph) * -.0712);border-radius:999px;background:var(--f-handset)}
.fx-sig{height:calc(var(--fx-ph) * .0136);width:auto}
.fleet .fx-phone .screen::after{content:"";position:absolute;z-index:3;left:50%;bottom:calc(var(--fx-ph) * .009);width:calc(var(--fx-ph) * .1515);
  height:max(3px,calc(var(--fx-ph) * .0057));margin-left:calc(var(--fx-ph) * -.0757);border-radius:999px;background:var(--f-on-photo);opacity:.85;pointer-events:none}
.fleet .fx-phone .sbar{padding:calc(var(--fx-ph) * .061 + 4px) 12px 10px;gap:10px}
/* a phone shows no scrollbar; the inbox and the thread still scroll by wheel, touch and keys */
.fx-list,.fleet .fx-phone .thread{scrollbar-width:none}
.fx-list::-webkit-scrollbar,.fleet .fx-phone .thread::-webkit-scrollbar{display:none}
.fx-who{flex:1;min-width:0}
.fx-who .who,.fx-who .st{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-back,.fx-en{flex:none;display:inline-grid;place-items:center;height:28px;min-width:28px;padding:0 6px;border:0;border-radius:999px;
  background:transparent;color:inherit;font:500 12px/1 var(--fs);cursor:pointer;opacity:.85}
.fx-back svg{width:18px;height:18px}
.fx-en[aria-pressed="true"]{background:var(--f-hair-photo);opacity:1}
.fx-back:focus-visible,.fx-en:focus-visible,.fx-row:focus-visible,.fx-new:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.fleet .fx-phone .thread{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px calc(14px + var(--fx-ph) * .02);gap:8px}
.fleet .fx-phone .thread > :first-child{margin-top:auto}
.fleet .fx-phone .thread:focus-visible{outline:none}
.fleet .fx-phone .bub{font-size:13px;line-height:19px;padding:7px 11px;max-width:84%;flex:none}
.fleet .fx-phone .typing{flex:none;padding:10px 14px}
.fx-tr{display:block;margin-top:5px;font-size:12px;line-height:17px;opacity:.72;text-align:left}
.fx-media{display:block;width:150px;max-width:100%;height:96px;margin:0 0 6px;border-radius:10px;background:var(--f-hair-photo);
  font:400 12px/96px var(--fs);text-align:center;opacity:.9}
.fx-voice{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:400 12px/1 var(--fs);opacity:.9}
.fx-voice i{width:84px;height:14px;border-radius:999px;
  background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px);opacity:.55}
.fx-link{text-decoration:underline;text-underline-offset:2px;opacity:.95}
.fx-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(var(--fx-ph) * .025)}
.fx-row{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:0;
  border-bottom:1px solid var(--f-hair-photo);background:transparent;color:inherit;text-align:left;cursor:pointer}
.fx-ini{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;background:var(--f-hair-photo);font:500 15px/1 var(--fd)}
.fx-rowt{min-width:0;display:flex;flex-direction:column;gap:3px}
.fx-rowt b{font:500 13px/1.2 var(--fs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-rowt span{font:400 12px/1.3 var(--fs);opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-rowm{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:400 12px/1 var(--fs);opacity:.75}
/* a customer typing right now shows in their row, the way Telegram and WhatsApp show it; a chat whose last messages
   are still waiting for the agent carries a count */
.fx-rowt .is-typing{color:var(--f-live-photo);opacity:1;font-style:normal}
.fx-badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--f-live-photo);color:var(--ground);
  font:600 11px/18px var(--fs);text-align:center;opacity:1}
.fx-row:has(.fx-badge) .fx-rowm{opacity:1}
/* a short card makes a slim handset: below 250px the rows tighten the way a small phone's messenger does */
.fleet .fx-phone{container-type:inline-size}
@container (max-width:250px){.fx-row{grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:9px 10px}
  .fx-ini{width:30px;height:30px;font-size:13px}.fx-rowm{font-size:11px}
  .fleet .fx-phone .sbar{padding-inline:8px;gap:5px}.fleet .fx-phone .sbar .av{width:26px;height:26px}.fx-back,.fx-en{min-width:24px;padding:0 4px}}
.fx-new{position:absolute;left:50%;bottom:calc(14px + var(--fx-ph) * .02);transform:translateX(-50%);height:30px;padding:0 14px;border:0;border-radius:999px;
  background:var(--f-on-photo);color:var(--ground);font:500 12px/1 var(--fs);cursor:pointer}
:root[data-theme="light"] .fx-new{color:var(--ink-hi)}
.fx-note{margin:9px 2px 0;font:400 12px/1.35 var(--fs);color:var(--f-on-photo-dim)}

/* ── the bar under the strip: what this is, a tick per agent (where you are, click to jump), the key, the counter ── */
.fx-bar{display:flex;align-items:center;gap:24px;padding-block:12px 14px}
.fx-lede{flex:0 1 auto;min-width:0}
.fx-say{margin:0;font:400 15px/1.45 var(--fs);letter-spacing:0;color:var(--dim)}
.fx-say b{font-weight:500;color:var(--ink)}
.fx-fine{margin:3px 0 0;font:400 13px/1.4 var(--fs);color:var(--faint);max-width:62ch}
.fx-cue{display:flex;align-items:center;gap:6px;margin-right:10px;font:400 13px/1 var(--fs);color:var(--dim);white-space:nowrap;transition:opacity .6s var(--ease)}
.fx-cue svg{width:14px;height:14px;animation:fxcue 1.6s var(--ease) infinite}
@keyframes fxcue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
.fx-cue .m{display:none}
.fx-nav{display:flex;align-items:center;margin:0 auto}
.fleet.is-moved .fx-cue{opacity:0}
.fx-ticks{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.fx-tick button{display:grid;place-items:center;width:11px;height:32px;padding:0;border:0;background:transparent;cursor:pointer}
.fx-tick button::before{content:"";width:3px;height:12px;border-radius:999px;background:var(--rule);transition:height .35s var(--ease),background .35s var(--ease)}
.fx-tick.is-live button::before{background:var(--live)}
.fx-tick button:hover::before{height:20px;background:var(--dim)}
.fx-tick.is-on button::before{height:28px;background:var(--ink)}
.fx-tick button:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-radius:6px}
.fx-key{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.fx-key li{display:flex;align-items:center;gap:8px;font:400 13px/1 var(--fs);color:var(--dim);white-space:nowrap}
.f-dot{flex:none;display:inline-block;width:8px;height:8px;border-radius:999px}
.f-dot.is-live{background:var(--live)}
.f-dot.is-demo{background:transparent;border:1.5px solid currentColor;opacity:.75}
.fx-ctl{display:flex;align-items:center;gap:8px}
.fx-n{margin:0;font:400 14px/1 var(--fs);color:var(--faint);font-variant-numeric:lining-nums proportional-nums}
.fx-n b{font-weight:500;color:var(--ink)}
.fx-noscript{color:var(--dim);font:400 15px/1.5 var(--fs)}

/* ── narrower desktops and tablets ── */
@media (max-width:1300px){.fleet{--fx-open:min(66vw,860px);--fx-slim:96px}
  .fx-name{font-size:46px}.fx-clock b{font-size:54px}}
@media (max-width:1100px){
  .fleet{--fx-open:74vw;--fx-slim:80px}
  .fx-body{gap:20px;padding:22px 20px 18px 24px}
  .fx-name{font-size:38px}.fx-clock b{font-size:46px}
  .fx-lede{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* kept for screen readers */
  .fx-nav{margin-left:0}
  .fx-key{margin-left:auto}
}
/* small tablets: the bar shares its width with the floating pill, so the counter goes (the ticks show where you are) */
@media (min-width:761px) and (max-width:900px){.fx-n,.fx-cue .d{display:none}.fx-cue{margin-right:4px}}
/* ── phones: a native scroll-snap row of full cards, photo on top, inbox below ── */
@media (max-width:760px){
  .fleet{--fx-r:16px;scroll-margin-top:76px}   /* /#fleet lands below the fixed header */
  .fx-pin{position:static;height:auto;min-height:0;padding-top:24px}
  .fx-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:12px var(--gut) 0;cursor:auto;
    touch-action:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .fx-viewport::-webkit-scrollbar{display:none}
  .fx-strip{height:auto;transform:none!important;transition:none}
  .fx-card,.fx-card.is-open{flex:0 0 calc(100vw - 2 * var(--gut));height:auto;scroll-snap-align:start;display:flex;flex-direction:column;
    background:var(--lift);transition:none}
  .fx-img{position:relative;inset:auto;height:auto;aspect-ratio:4/3;transform:none;filter:brightness(.9)}
  .fx-card.is-open .fx-img{filter:brightness(.9)}
  .fx-card::after{bottom:auto;height:calc((100vw - 2 * var(--gut)) * .75);opacity:1}
  .fx-hit,.fx-tab,.fx-pulse{display:none}
  .fx-body,.fx-card.is-open .fx-body{position:static;width:auto;height:auto;display:block;padding:0;container-type:normal;opacity:1;pointer-events:auto;transition:none}
  .fx-copy,.fx-card.is-open .fx-copy{position:absolute;z-index:2;inset:0 0 auto 0;height:calc((100vw - 2 * var(--gut)) * .75);padding:16px 16px 14px;transform:none;transition:none}
  .fx-clock{margin-top:10px;gap:4px}.fx-clock b{font-size:34px}.fx-clock.is-ago b{font-size:28px}
  .fx-name{font-size:30px}.fx-biz{font-size:13px;margin-top:6px}
  .fx-figs{display:none}   /* no room on a 4:3 photo at phone width; the "N min ago" line still carries the live proof */
  .fx-device,.fx-card.is-open .fx-device{--fx-ph:490px;position:relative;width:auto;align-items:center;padding:16px 12px;transform:none;transition:none}
  .fleet .fx-phone{width:calc(var(--fx-ph) * .4816);flex:none}
  .fx-note{color:var(--dim);text-align:center}
  .fx-bar{flex-wrap:wrap;gap:12px 18px}
  .fx-lede{position:static;width:100%;height:auto;overflow:visible;clip-path:none;white-space:normal}
  .fx-cue .d{display:none}.fx-cue .m{display:inline}
  .fx-nav{order:3;width:100%;margin:0}
  .fx-key{margin-left:0}
  .fx-ctl{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  .fx-strip,.fx-card,.fx-img,.fx-body,.fx-copy,.fx-device,.fx-card::after,.fx-tab,.fx-cue{transition:none!important}
  .fx-cue svg{animation:none}
  .fx-card.is-busy .fx-pulse{animation:none}
}