/* The hero phone and its trailer (Section 1). js/trailer.js plays it.
   Trailer durations and delays are 0.8 of their previous values: 25% faster playback.
   The phone itself (hardware, island, glass, status bar, chat chrome) is unchanged —
   Kaiya: "the phone design itself is perfect". What is new: the WhatsApp form sheet,
   the template message, the in-app browser with the fleet portal's sign-in, outro 2. */

/* ── the phone ────────────────────────────────────────────────────────────── */
.phone-stage{display:flex;justify-content:center;position:relative;perspective:1150px;perspective-origin:50% 44%;
  text-align:left /* the hero centres its text on phones; the chat must not inherit it */}
/* (no blur filter on the glow: the gradient is already this soft, the 8px blur changed no pixel,
   and animating it re-blurred the whole glow on every message) */
.phone-glow{position:absolute;inset:-40px -60px;background:radial-gradient(45% 42% at 50% 48%,rgba(59,155,255,.22),transparent 70%);z-index:0;pointer-events:none}
.phone{width:264px;border-radius:48px;padding:13px;position:relative;z-index:1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(150deg,#323d4d 0%,#1b2230 24%,#0a0e15 54%,#10151f 76%,#283242 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 72px 120px -40px rgba(0,0,0,.92),0 26px 54px -28px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.6),0 0 54px -18px rgba(95,224,255,.20),inset 0 2px 1px rgba(255,255,255,.34),inset 0 -2px 1px rgba(255,255,255,.05),inset 2.5px 0 1px rgba(255,255,255,.10),inset -2.5px 0 1px rgba(255,255,255,.10)}
.sbtn{position:absolute;right:-3px;width:3px;border-radius:2px;background:linear-gradient(180deg,#3d4957,#222b36);box-shadow:1px 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.4)}
.sb1{top:108px;height:54px}.sb2{left:-3px;right:auto;top:96px;height:30px}.sb3{left:-3px;right:auto;top:134px;height:30px}
.screen{background:#0a131d;border-radius:36px;height:486px;overflow:hidden;position:relative;transform:translateZ(0);-webkit-transform:translateZ(0);border:1px solid rgba(0,0,0,.7);box-shadow:0 0 0 2.5px #05080d,inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 10px rgba(0,0,0,.36);backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;font-family:var(--body)}
/* Scrolled well away from the hero, the browser skips the phone screen's contents (the trailer
   is paused there anyway); the screen clips to its own fixed-size box, so nothing looks different. */
.screen{content-visibility:auto}
.statusbar{position:absolute;top:0;left:0;right:0;height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:6;font-family:var(--mono);font-size:9.5px;font-weight:500;color:#cfe0f2;letter-spacing:.02em}
.st-ico{display:flex;gap:4px;align-items:center}
.st-ico i{display:inline-block;background:#cfe0f2}
.st-ico .sig{width:10px;height:7px;clip-path:polygon(0 100%,100% 0,100% 100%)}
.st-ico .wif{width:10px;height:7px;border-radius:50% 50% 0 0;clip-path:polygon(0 100%,50% 0,100% 100%)}
.st-ico .bat{width:15px;height:7px;border-radius:2px;opacity:.9}
.island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:84px;height:23px;background:#000;border-radius:13px;z-index:9;box-shadow:inset 0 0 3px rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.5)}
.island::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#26384a,#04070c);box-shadow:inset 0 0 2px rgba(120,190,255,.5)}
.glass-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:7;background:linear-gradient(132deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 16%,transparent 40%)}
.screen-spec{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;background:radial-gradient(150px 190px at var(--sx,42%) var(--sy,16%),rgba(255,255,255,.08),rgba(255,255,255,.025) 34%,transparent 62%)}
/* The sweep moves with transform (400% of its own 45% width = the old left:-45% → 135%), so it
   runs on the compositor: no layout or repaint of the screen every frame, and no layout shifts. */
.glass-sweep{position:absolute;top:-60%;left:-45%;width:45%;height:220%;pointer-events:none;z-index:8;transform:rotate(16deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:sweep 6.4s ease-in-out 1.6s infinite}
@keyframes sweep{0%{transform:translateX(0) rotate(16deg)}16%{transform:translateX(400%) rotate(16deg)}100%{transform:translateX(400%) rotate(16deg)}}
.home-ind{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:98px;height:4px;border-radius:3px;background:rgba(255,255,255,.45);z-index:9;pointer-events:none}

/* ── the WhatsApp chat ────────────────────────────────────────────────────── */
.chat-top{position:absolute;top:24px;left:0;right:0;height:46px;background:rgba(13,26,38,.96);display:flex;align-items:center;gap:9px;padding:0 13px;border-bottom:1px solid rgba(120,170,255,.14);z-index:4}
.chat-top .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-bright));display:grid;place-items:center;color:#04101e;font-family:var(--display);font-weight:800;font-size:11px;box-shadow:0 0 10px -2px rgba(95,224,255,.6)}
.ct-id{flex:1}.chat-top b{font-size:13px}.chat-top small{color:var(--blue-bright);font-size:10px;display:block;line-height:1.2}
.ct-ic{font-size:11px;color:#7d93ab;letter-spacing:3px}
.av-wrap{position:relative;width:28px;height:28px;flex:none}
/* The green glow breathes by cross-fading two fixed glows (opacity runs on the compositor) instead
   of animating box-shadow, which repainted on the main thread every frame the hero was on screen. */
.online-dot{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#25d366;border:2px solid #0a131d}
.online-dot::before,.online-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none}
.online-dot::before{box-shadow:0 0 6px rgba(37,211,102,.6);animation:onlinepulseA 1.92s ease-in-out infinite}
.online-dot::after{box-shadow:0 0 12px rgba(37,211,102,.95);opacity:0;animation:onlinepulseB 1.92s ease-in-out infinite}
@keyframes onlinepulseA{0%,100%{opacity:1}50%{opacity:0}}
@keyframes onlinepulseB{0%,100%{opacity:0}50%{opacity:1}}
/* The top 14px fade out, so a message pushed up past the header softens away instead of
   being sliced through the middle of a line. */
.chat-body{position:absolute;top:70px;bottom:40px;left:0;right:0;padding:12px 11px;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(120% 60% at 80% 0%,rgba(59,155,255,.05),transparent 60%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px);mask-image:linear-gradient(to bottom,transparent 0,#000 16px)}
/* Every message is 8px from the next; a message's own reply buttons sit 3px under it. */
.chat-track{display:flex;flex-direction:column;gap:8px;flex:none;transition:transform 0.44s cubic-bezier(.2,.8,.25,1);will-change:transform}
.chat-track.snap,.chat-track.snap>*{transition:none!important}
.day-chip{align-self:center;margin:0 0 2px;padding:3px 9px;border-radius:7px;background:rgba(22,36,47,.92);color:#8fa3b8;font-size:9px;font-weight:600;letter-spacing:.02em;box-shadow:0 1px 1px rgba(0,0,0,.3)}

.bubble{position:relative;max-width:88%;padding:6px 11px 7px;border-radius:13px;font-size:12px;line-height:1.5;color:#e9f1fa;overflow-wrap:break-word;opacity:0;transform:translateY(14px) scale(.96);transition:opacity 0.36s ease,transform 0.36s cubic-bezier(.2,.8,.25,1)}
.b-in{background:#16242f;border-top-left-radius:4px;align-self:flex-start;box-shadow:0 1px 1px rgba(0,0,0,.35)}
.b-in::before{content:"";position:absolute;left:-6px;top:0;border:7px solid transparent;border-top-color:#16242f;border-right-color:#16242f}
.b-out{background:#144b6d;border-top-right-radius:4px;align-self:flex-end;box-shadow:0 1px 1px rgba(0,0,0,.35)}
.b-out::before{content:"";position:absolute;right:-6px;top:0;border:7px solid transparent;border-top-color:#144b6d;border-left-color:#144b6d}
.bubble.show{opacity:1;transform:none}
/* The time, as WhatsApp does it: the text ends with an invisible copy of the time
   (.t-sp) that holds its room, and the real time (.t) sits over that room in the
   bottom-right corner. A short message ("Yes") grows wide enough for both on one line;
   a long one wraps and keeps the time on its last line, or drops it onto a line of its
   own. The two can never touch, whatever the font or the width. */
.bubble .t,.bubble .t-sp{font-size:8.5px;font-weight:500;letter-spacing:.02em;line-height:1;white-space:nowrap}
.bubble .t{position:absolute;right:9px;bottom:8px;color:#8fa3b8}
.bubble .t-sp{display:inline-block;visibility:hidden;padding-left:4px}
.bubble .dt{font-style:normal}
.bubble .t .dt{color:#53bdeb}
.bubble b{font-weight:700;color:#fff}

/* A message with a button inside it: a WhatsApp form ("Select") or a template's URL
   button ("Open Secure Portal") — the text, a hairline the full width of the bubble,
   then the button: centred, the size of the message text, WhatsApp's link blue. */
.bubble.has-cta{padding:0;min-width:64%}
.b-main{position:relative;padding:6px 11px 7px}
.tr-cta{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;margin:0;padding:9px 12px;border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--body);font-size:12px;font-weight:600;line-height:1.25;letter-spacing:0;color:#53bdeb;text-align:center;border-radius:0 0 13px 13px;transition:background 0.16s ease}
.tr-cta svg{width:13px;height:13px;flex:none}
.tr-cta.tap{background:rgba(83,189,235,.2)}
/* the new_notification template: header, body, grey footer (the time shares the
   footer's line when there is room, as on WhatsApp) */
.b-tpl{max-width:90%}
.tpl-h{font-weight:800;font-size:12.5px;color:#fff;margin-bottom:3px;letter-spacing:-.005em}
.tpl-f{margin-top:4px;font-size:9px;color:#8fa3b8;line-height:1.35}
.tpl-fx{white-space:nowrap}

/* reply buttons under a message */
.tr-btns{align-self:flex-start;width:84%;margin-top:-5px;display:flex;flex-direction:column;border-radius:11px;overflow:hidden;background:rgba(20,33,44,.92);box-shadow:0 1px 2px rgba(0,0,0,.3);opacity:0;transform:translateY(8px);transition:opacity 0.256s ease,transform 0.256s ease}
.tr-btns.show{opacity:1;transform:none}
.tr-btn{padding:9px 8px;text-align:center;font-size:12px;font-weight:600;line-height:1.5;color:#53bdeb;border-top:1px solid rgba(255,255,255,.06);transition:background 0.16s ease}
.tr-btn:first-child{border-top:none}
.tr-btn.tap{background:rgba(83,189,235,.2)}

/* the live-location bubble (a step js/trailer.js keeps ready; not in the current sequence) */
.b-loc{padding:4px!important;max-width:72%!important}
.loc-map{position:relative;width:100%;height:84px;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.loc-map svg{display:block;width:100%;height:100%}
.loc-acc{animation:locpulse 1.92s ease-in-out infinite}
@keyframes locpulse{0%,100%{opacity:.45}50%{opacity:.85}}
.loc-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;padding:7px 5px 2px}
.loc-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.loc-tx b{font-size:11px;color:#eaf2fb;font-weight:600}
.loc-co{font-family:var(--mono);font-size:9.5px;color:#bcd2e6;letter-spacing:.01em;margin-top:1px}
.loc-time{font-size:8.5px;color:#9fb6cb;white-space:nowrap;flex:none}

.typing{align-self:flex-start;background:#16242f;border-radius:13px;border-top-left-radius:4px;padding:11px 13px;display:inline-flex;gap:4px;align-items:center;box-shadow:0 1px 1px rgba(0,0,0,.35);position:relative;opacity:0;transform:translateY(8px);transition:opacity 0.24s ease,transform 0.24s ease}
.typing.show{opacity:1;transform:none}
.typing::before{content:"";position:absolute;left:-6px;top:0;border:7px solid transparent;border-top-color:#16242f;border-right-color:#16242f}
.typing span{width:6px;height:6px;border-radius:50%;background:#8fa3b8;animation:typedot 1s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:0.128s}.typing span:nth-child(3){animation-delay:0.256s}
@keyframes typedot{0%,62%,100%{transform:translateY(0);opacity:.45}28%{transform:translateY(-4px);opacity:1}}

/* the message bar; while the user types, the mic becomes the send button */
.inputbar{position:absolute;left:0;right:0;bottom:0;height:40px;display:flex;align-items:center;gap:8px;padding:0 11px;background:rgba(13,26,38,.96);border-top:1px solid rgba(120,170,255,.1);z-index:4}
.ip-plus{color:#7d93ab;font-size:16px;font-weight:600}
.ip-field{flex:1;min-width:0;overflow:hidden;white-space:nowrap;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:100px;padding:5px 12px;font-size:10.5px;color:#71849a}
.ip-mic{font-size:12px;width:20px;text-align:center}
.ip-send{display:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-bright));color:#04101e;place-items:center;flex:none;box-shadow:0 0 10px -2px rgba(95,224,255,.6)}
.ip-send svg{width:11px;height:11px;margin-left:1px}
.inputbar.typing-on .ip-field{color:#e9f1fa}
.inputbar.typing-on .ip-field::after{content:"";display:inline-block;width:1px;height:11px;margin-left:1px;vertical-align:-2px;background:var(--blue-bright);animation:caret 0.8s steps(1) infinite}
.inputbar.typing-on .ip-mic{display:none}
.inputbar.typing-on .ip-send{display:grid}
@keyframes caret{50%{opacity:0}}

/* ── the WhatsApp form sheet ("Who was involved") ─────────────────────────── */
/* This screen's transitions run another 2x faster; chat/bot transitions are unchanged. */
/* (tr- names: the Our System section has its own .wa-sheet and .wa-cta) */
.tr-sheet{position:absolute;inset:0;z-index:5;pointer-events:none;visibility:hidden;transition:visibility 0s linear 0.2s}
.tr-sheet.show{visibility:visible;transition:none}
.ws-scrim{position:absolute;inset:0;background:rgba(2,6,12,.62);opacity:0;transition:opacity 0.16s ease}
.tr-sheet.show .ws-scrim{opacity:1}
.ws-panel{position:absolute;left:0;right:0;top:32px;bottom:0;display:flex;flex-direction:column;background:#0e1820;border-radius:14px 14px 0 0;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -14px 30px -12px rgba(0,0,0,.7);transform:translateY(104%);transition:transform 0.2s cubic-bezier(.2,.8,.25,1)}
.tr-sheet.show .ws-panel{transform:none}
.tr-sheet.snap,.tr-sheet.snap .ws-scrim,.tr-sheet.snap .ws-panel{transition:none}
.ws-head{flex:none;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.07)}
.ws-head b{font-size:12px;font-weight:700;color:#eef4fa}
.ws-x,.ws-more{width:16px;color:#8fa3b8;font-size:11px;text-align:center}
.ws-body{flex:1;padding:10px 13px 0;overflow:hidden}
.ws-label{font-size:9.5px;font-weight:600;color:#8fa3b8;margin-bottom:5px}
.ws-opts{list-style:none;margin:0;padding:0}
.ws-opts li{display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px;font-size:11px;color:#e3ecf5;border-bottom:1px solid rgba(255,255,255,.045);border-radius:6px;transition:background 0.1s ease}
.ws-opts li:last-child{border-bottom:none}
.ws-opts li.press{background:rgba(83,189,235,.1)}
.ws-cb{width:14px;height:14px;flex:none;border-radius:3.5px;border:1.5px solid #6f8396;display:grid;place-items:center;transition:background 0.08s ease,border-color 0.08s ease}
.ws-cb svg{width:11px;height:11px;fill:none;stroke:#04101e;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 0.12s ease 0.02s}
.ws-opts li.on .ws-cb{background:var(--blue-bright);border-color:var(--blue-bright);box-shadow:0 0 10px -2px rgba(95,224,255,.7)}
.ws-opts li.on .ws-cb svg{stroke-dashoffset:0}
.ws-foot{flex:none;padding:8px 13px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;border-top:1px solid rgba(255,255,255,.06)}
.ws-submit{width:100%;height:30px;border-radius:100px;display:grid;place-items:center;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.08);color:#6f8396;transition:background 0.12s ease,color 0.12s ease,box-shadow 0.12s ease}
.ws-submit.ready{background:linear-gradient(135deg,var(--blue),var(--blue-bright));color:#04101e;box-shadow:0 6px 16px -8px rgba(95,224,255,.8)}
.ws-foot small{font-size:8px;color:#71849a}
.ws-foot u{color:#53bdeb;text-decoration:none}

/* ── the in-app browser and the fleet portal's sign-in page ───────────────────
   Copied from the real page (portal/views.js login + portal/design/login.css),
   scaled to the phone: the navy page, the wordmark, the card with its FLEET PORTAL
   eyebrow, "Sign in" rolling to "CrashBot", the cyan pill button, the truck. */
.tb-browser{position:absolute;top:24px;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;background:#080D13;
  transform:translateY(103%);transition:transform 0.4s cubic-bezier(.2,.8,.25,1);box-shadow:0 -14px 30px -12px rgba(0,0,0,.7)}
.tb-browser.show{transform:none}
.tb-browser.snap{transition:none}
.tb-bar{flex:none;position:relative;height:38px;display:flex;align-items:center;gap:7px;padding:0 10px;background:#101820;border-bottom:1px solid rgba(255,255,255,.07)}
.tb-x,.tb-more{width:14px;color:#9fb0c2;font-size:11px;text-align:center}
/* the bar names the page ("Fleet Login"), never a web address (Kaiya) */
.tb-url{flex:1;height:24px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;background:rgba(255,255,255,.07);font-size:10.5px;font-weight:700;color:#dfe8f2;letter-spacing:.01em}
.tb-url svg{width:9px;height:9px;color:#9fb0c2;flex:none}
.tb-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-bright));box-shadow:0 0 8px rgba(95,224,255,.7);opacity:0}
.tb-browser.loading .tb-progress{opacity:1;width:100%;transition:width 0.68s cubic-bezier(.3,.7,.3,1)}
.tb-browser.loaded .tb-progress{opacity:0;width:100%;transition:opacity 0.24s ease}
.tb-page{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:11px 12px 20px;color:#EAF2FA;
  background:radial-gradient(70% 42% at 50% 30%,rgba(34,84,124,.22),transparent 70%),radial-gradient(60% 40% at 38% 70%,rgba(20,72,110,.14),transparent 72%),#080D13;
  opacity:0;transition:opacity 0.28s ease}
.tb-browser.loaded .tb-page{opacity:1}
.pl-brand{align-self:flex-start;display:flex;align-items:center;gap:6px;font-weight:700;font-size:10.5px;letter-spacing:-.1px}
.pl-dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(160deg,#7FEAFF,#3FC6E8);box-shadow:0 0 8px -1px rgba(95,224,255,.85)}
.pl-card{width:100%;margin-top:13px;padding:15px 13px 13px;border-radius:12px;border:1px solid rgba(95,224,255,.14);display:flex;flex-direction:column;
  background:linear-gradient(158deg,rgba(42,88,126,.22),rgba(20,34,48,.24) 48%,rgba(14,24,35,.22)),#111C27;box-shadow:0 22px 44px -22px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.07)}
.pl-kicker{font-size:7.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#5FE0FF;text-align:center;line-height:1.4}
.pl-h1{margin-top:5px;text-align:center;font-family:var(--display);font-weight:700;font-size:19px;line-height:25px;letter-spacing:-.4px;height:25px}
.pl-roll{display:inline-block;height:25px;overflow:hidden;vertical-align:top}
.pl-roll-in{display:flex;flex-direction:column;align-items:center;transition:transform 0.44s cubic-bezier(.32,1.28,.5,1)}
.pl-roll-in span{display:block;height:25px;overflow:hidden} /* each word clipped to its own line, so a descender never peeks into the next */
.pl-roll.alt .pl-roll-in{transform:translateY(-25px)}
.pl-brandword{color:#5FE0FF}
.pl-lead{margin-top:5px;font-size:9.5px;line-height:1.5;color:#AEC2D6;text-align:center;text-wrap:balance}
.pl-lbl{margin:10px 0 4px;font-size:7px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#7B90A6;line-height:1}
.pl-in{position:relative;height:30px;display:flex;align-items:center;padding:0 9px;border-radius:8px;border:1px solid #22323F;background:rgba(0,0,0,.30);font-size:9.6px;color:#EAF2FA;white-space:nowrap;overflow:hidden;transition:border-color 0.128s,box-shadow 0.128s,background 0.128s}
.pl-in.focus{border-color:rgba(95,224,255,.75);background:rgba(0,0,0,.34);box-shadow:0 0 0 2.5px rgba(95,224,255,.16)}
.pl-ph{color:#7B90A6}
.pl-in.filled .pl-ph{display:none}
.pl-pw .pl-val{letter-spacing:1.5px;font-size:11px}
.pl-caret{display:none;width:1px;height:12px;margin-left:1px;background:#5FE0FF;animation:caret 0.8s steps(1) infinite}
.pl-in.focus .pl-caret{display:inline-block}
.pl-in.focus:not(.filled) .pl-caret{position:absolute;left:9px}
.pl-btn{margin-top:13px;height:32px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#04222E;border:1px solid rgba(4,30,42,.72);
  background:linear-gradient(96deg,#39C6F0,#7FEAFF 52%,#57D8FF);box-shadow:0 10px 22px -10px rgba(63,198,232,.95),inset 0 1px 0 rgba(255,255,255,.45);transition:transform 0.096s ease,opacity 0.2s ease,filter 0.096s ease}
.pl-btn.press{transform:scale(.96);filter:brightness(1.08)}
.pl-btn.working{opacity:.65}
.pl-muted{margin-top:10px;font-size:8.5px;font-weight:500;color:#5FE0FF;text-align:center}
.pl-truck{position:relative;width:100%;height:46px;margin-top:16px;overflow:hidden;opacity:.9}
.pl-truck-body{position:absolute;left:50%;bottom:9px;width:62px;margin-left:-31px;animation:truckbob 1.08s linear infinite}
.pl-truck-body svg{display:block;width:100%;height:auto}
.pl-truck-tyres{position:absolute;left:50%;bottom:1px;width:62px;margin-left:-31px;display:flex;justify-content:space-between;padding:0 5px 0 7px}
.pl-truck-tyres svg{width:11px;height:11px}
.pl-road{position:absolute;left:0;right:0;bottom:0;height:1px;background:#1A2836}
.pl-lamp{position:absolute;bottom:0;right:-14px;width:2px;height:34px;background:#4A5D6E;border-radius:1px;animation:lamppass 1.512s linear infinite}
.pl-lamp::before{content:"";position:absolute;top:0;left:-9px;width:11px;height:7px;border:2px solid #4A5D6E;border-right:0;border-bottom:0;border-radius:7px 0 0 0}
.pl-lamp::after{content:"";position:absolute;top:5px;left:-13px;width:8px;height:5px;border-radius:5px 5px 2px 2px;background:#4A5D6E}
.tb-browser:not(.show) .pl-truck-body,.tb-browser:not(.show) .pl-lamp{animation-play-state:paused}
@keyframes truckbob{50%{transform:translateY(1.5px)}}
@keyframes lamppass{from{transform:translateX(0)}to{transform:translateX(-260px)}}
.pl-foot{margin-top:9px;font-size:7.5px;color:#7B90A6;text-align:center;white-space:nowrap}

/* ── a tap ────────────────────────────────────────────────────────────────── */
.touch{position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,.18) 60%,transparent 72%);box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.touch.go{animation:touch 0.48s ease-out}
@keyframes touch{0%{opacity:0;transform:scale(.45)}22%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}

/* ── the outros ───────────────────────────────────────────────────────────── */
.trailer-end{position:absolute;top:24px;left:0;right:0;bottom:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;background:radial-gradient(120% 85% at 50% 38%,#0d1b2c 0%,#070d16 72%);opacity:0;visibility:hidden;transition:opacity 0.4s ease,visibility 0s linear 0.4s}
/* in: a quick cut (Kaiya: "cut quickly to the outro screen") */
.trailer-end.show{opacity:1;visibility:visible;transition:opacity 0.24s ease}
.te-logo{width:62px;height:62px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--blue-bright));box-shadow:0 12px 32px -8px rgba(95,224,255,.7),inset 0 1px 0 rgba(255,255,255,.45);transform:scale(.6);opacity:0;transition:transform 0.56s cubic-bezier(.2,.9,.25,1),opacity 0.36s ease}
.te-logo svg{width:33px;height:33px;filter:drop-shadow(0 0 8px rgba(95,224,255,.75))}
.te-name{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.02em;color:#fff;opacity:0;transform:translateY(9px);transition:opacity 0.36s ease,transform 0.36s ease}
.te-tag{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-bright);opacity:0;transition:opacity 0.36s ease}
.te-points{list-style:none;margin:3px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.te-points li{display:flex;align-items:center;gap:7px;font-family:var(--body);font-size:10.5px;font-weight:600;color:#d4e2f2;letter-spacing:.01em;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity 0.32s ease,transform 0.32s ease}
.te-points li svg{width:12px;height:12px;color:var(--good);flex:none}
.te-sub{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:-.005em;color:var(--blue-bright);text-shadow:0 0 18px rgba(95,224,255,.45);opacity:0;transform:translateY(6px);transition:opacity 0.36s ease,transform 0.36s ease}
.te-brand{gap:12px}
.te-brand .te-logo{width:70px;height:70px;border-radius:21px}
.te-brand .te-logo svg{width:37px;height:37px}
.te-brand .te-name{font-size:26px}
.trailer-end.show .te-logo{transform:scale(1);opacity:1}
.trailer-end.show .te-name{opacity:1;transform:none;transition-delay:0.096s}
.trailer-end.show .te-tag{opacity:1;transition-delay:0.192s}
.trailer-end.show .te-sub{opacity:1;transform:none;transition-delay:0.24s}
.trailer-end.show .te-points li{opacity:1;transform:none}
.trailer-end.show .te-points li:nth-child(1){transition-delay:0.272s}
.trailer-end.show .te-points li:nth-child(2){transition-delay:0.352s}
.trailer-end.show .te-points li:nth-child(3){transition-delay:0.432s}
.trailer-end.show .te-points li:nth-child(4){transition-delay:0.512s}
.trailer-end.show .te-points li:nth-child(5){transition-delay:0.592s}

/* ── glow, scroll float, pause ────────────────────────────────────────────── */
.phone-glow{transition:opacity 0.72s ease;opacity:.85}
.phone.msg-pulse + .phone-glow{animation:bloom 0.88s ease-out}
@keyframes bloom{0%{opacity:.85}30%{opacity:1}100%{opacity:.85}}
.phone{transition:translate 0.24s ease-out}
/* Off-screen or in a background tab, the trailer waits where it is (js/trailer.js) and so
   do the little loops inside the phone. */
.phone.tr-paused *,.phone.tr-paused *::before,.phone.tr-paused *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.phone{translate:none!important}.online-dot{box-shadow:0 0 6px rgba(37,211,102,.85)}.online-dot::before,.online-dot::after{display:none}.glass-sweep{animation:none;opacity:.5}}