/* ==========================================================
   FleetHive Homepage — premium build
   Fonts: Plus Jakarta Sans only (per brief)
   Navy-dominant, controlled blue accents
   ========================================================== */

:root{
  --navy:#0D2137;
  --navy-deep:#081826;
  --navy-soft:#122a44;
  --blue:#3B7DDD;
  --sky:#6FA3F0;
  --deep:#1B4F8A;
  --charcoal:#334155;
  --slate:#64748B;
  --silver:#94A3B8;
  --ice:#E8F1FC;
  --success:#10B981;
  --warning:#F59E0B;
  --danger:#EF4444;
  /* Bree's new tri-color liquid-ring identity (own tokens, deliberately
     separate from --success/--warning so future alert-color changes never
     accidentally recolor Bree, and vice versa). */
  --emerald:#22C58B;
  --emerald-deep:#0E7A55;
  --gold:#E8B646;
  /* FleetHive brand green used for the glossy app-header gradient sheen
     (kept separate from --emerald/--emerald-deep above so Bree's identity
     colors can change independently of the header treatment, even though
     they currently share the same hue). */
  --fh-green:#22C58B;
  --fh-green-deep:#0E7A55;
  --grad:linear-gradient(135deg, #6FA3F0 0%, #3B7DDD 55%, #1B4F8A 100%);
  --border:rgba(111,163,240,0.16);
  --card-bg:rgba(255,255,255,0.03);
  --card-bg-solid:#132A44;
  --max:1240px;
  --shadow: 0 24px 60px -24px rgba(0,0,0,0.55);
  --glow: 0 0 0 1px rgba(111,163,240,0.25), 0 12px 40px -12px rgba(59,125,221,0.35);

  /* semantic theme tokens — dark (default) */
  --page-bg:var(--navy);
  --page-bg-deep:var(--navy-deep);
  --page-bg-soft:var(--navy-soft);
  --text-primary:#DCE6F5;
  --text-secondary:#B7C4DA;
  --heading:#FFFFFF;
  /* Expanded (top of page): a visibly lighter FleetHive blue tint.
     Compact (scrolled): a near-opaque deep FleetHive navy. Plain rgba (not
     gradients) so background-color can cross-fade smoothly between them —
     the two are deliberately far apart in hue and opacity so the
     transition reads clearly, not just as a subtle alpha shift. */
  --nav-bg-t:rgba(63,131,224,0.32);
  --nav-bg-compact:rgba(4,12,20,0.95);
}

[data-theme="light"]{
  --page-bg:#F6F9FE;
  --page-bg-deep:#EDF3FC;
  --page-bg-soft:#FFFFFF;
  --text-primary:#1B2A3D;
  --text-secondary:#4B5C73;
  --heading:#0D2137;
  --border:rgba(13,33,55,0.12);
  --card-bg:rgba(13,33,55,0.03);
  --card-bg-solid:#FFFFFF;
  /* --silver is used sitewide for "muted" text (helper text, "(optional)"
     labels, table sub-text, footer links). Its only definition (in :root)
     is #94A3B8, tuned for dark backgrounds — against light-mode's white/
     near-white surfaces that comes out around 2.3:1 contrast, well under
     WCAG AA's 4.5:1 for normal text. This override keeps the same "more
     muted than --text-secondary" role while actually staying readable. */
  --silver:#5B6B80;
  /* Light mode keeps dark heading text, so the compact state stays light
     rather than inverting to navy — but expanded still reads as a
     noticeably softer, bluer tint than the crisper, more opaque compact
     state, echoing the same relationship as dark mode. */
  --nav-bg-t:rgba(111,163,240,0.22);
  --nav-bg-compact:rgba(255,255,255,0.94);
  --shadow: 0 24px 60px -30px rgba(13,33,55,0.25);
  --glow: 0 0 0 1px rgba(59,125,221,0.18), 0 12px 40px -16px rgba(59,125,221,0.22);
}
[data-theme="light"] .hero-bg-tracking,
[data-theme="light"] .bg-dots,
[data-theme="light"] .bg-grid{ opacity:0.35; }
[data-theme="light"] .hc-glow,
[data-theme="light"] .hiw-glow{ opacity:0.5; }

/* ==========================================================
   FleetHive CLIENT PORTAL — design token system (Phase 1 of the
   client-portal rebuild spec). Scoped under .app-shell so it only
   affects the authenticated portal pages (portal.html etc.), never
   the public marketing site above, which keeps its own established
   spacing/radius conventions untouched.
   ========================================================== */
.app-shell{
  /* spacing scale — §38: 4/8/12/16/20/24/32/40/48/64 only */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* radius scale — §27/§47 */
  --r-control:8px;      /* small controls */
  --r-btn:10px;         /* buttons */
  --r-card:16px;        /* cards */
  --r-container:20px;   /* large containers */

  /* typography scale — §21 */
  --fs-page-title:30px;   --fw-page-title:700;
  --fs-section:19px;      --fw-section:600;
  --fs-card-title:15.5px; --fw-card-title:600;
  --fs-body:14.5px;       --fw-body:500;
  --fs-secondary:12.5px;  --fw-secondary:500;

  /* control sizing — §33/§35 */
  --h-control:46px;
  --h-header:76px;

  /* motion — §44 */
  --mo-page:220ms cubic-bezier(.22,.61,.36,1);
  --mo-nav:180ms ease;
  --mo-btn:180ms ease;
  --mo-modal:200ms cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  .app-shell{ --mo-page:1ms linear; --mo-nav:1ms linear; --mo-btn:1ms linear; --mo-modal:1ms linear; }
}

/* §44.1 page entry: content fades in and settles ~8-12px upward */
.app-page-enter{ animation:appPageEnter var(--mo-page) both; }
@keyframes appPageEnter{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* §44.2 section reveal — applied once via IntersectionObserver, see site.js */
.app-reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--mo-page), transform var(--mo-page); }
.app-reveal.is-visible{ opacity:1; transform:translateY(0); }

*{box-sizing:border-box; margin:0; padding:0;}
html{
  scroll-behavior:smooth;
  /* Matches body's own background (same var, so it re-syncs with the
     light/dark toggle automatically). Without this the <html> canvas
     defaults to plain white — invisible normally, but momentarily
     exposed during iOS/Android elastic overscroll (the "rubber-band"
     bounce past the top/bottom of the page), which is what made the
     app's fixed bottom nav look like it wasn't actually touching the
     bottom edge: the bounce revealed a flash of that white canvas
     underneath it, not an actual gap in the nav's own CSS. */
  background:var(--page-bg);
  /* Belt-and-suspenders: stop the bounce itself so there's nothing left
     to reveal that flash in the first place. */
  overscroll-behavior-y:none;
}
body{
  font-family:'Plus Jakarta Sans', sans-serif;
  background:var(--page-bg);
  color:var(--text-primary);
  line-height:1.65;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  font-weight:400;
  transition:background .3s ease, color .3s ease;
  /* Sticky footer, every page, desktop and mobile: on short pages the
     footer used to end wherever the content stopped, leaving bare page
     background between it and the bottom of the screen. Stacking body's
     own children in a full-height column and letting the footer's
     margin-top:auto (below) absorb that leftover space pushes the footer
     flush to the bottom instead — with zero space after it — while tall
     pages that already overflow the viewport scroll exactly as before. */
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
}
/* ---------- Atmospheric glossy blue glow ----------
   A very subtle, fixed backdrop glow behind the page content. Shows through
   on sections that don't set their own solid background-color; sections that
   do (e.g. .section-deep) simply sit on top of it, so this never competes
   with text or turns any surface visibly blue — it's a soft light source,
   not a tint. Light mode uses the FleetHive sky blue (#6FA3F0); dark mode
   uses a much softer ice-blue accent (#E8F1FC) so the UI stays dark. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 38% at 50% -6%, rgba(232,241,252,0.05), transparent 62%),
    radial-gradient(ellipse 46% 30% at 100% 22%, rgba(232,241,252,0.03), transparent 66%),
    radial-gradient(ellipse 46% 30% at 0% 78%, rgba(232,241,252,0.025), transparent 66%);
  transition:opacity .3s ease;
}
[data-theme="light"] body::before{
  background:
    radial-gradient(ellipse 62% 38% at 50% -6%, rgba(111,163,240,0.10), transparent 62%),
    radial-gradient(ellipse 46% 30% at 100% 22%, rgba(111,163,240,0.05), transparent 66%),
    radial-gradient(ellipse 46% 30% at 0% 78%, rgba(111,163,240,0.045), transparent 66%);
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;}

h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--heading);
  letter-spacing:-0.02em;
  font-weight:800;
}
h1{font-size:clamp(2.1rem,4.4vw,3.6rem); line-height:1.08; letter-spacing:-0.03em;}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.15;}
h3{font-size:1.25rem; font-weight:700;}
p{color:var(--text-secondary); font-weight:400;}
.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--sky); margin-bottom:14px;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px; position:relative; z-index:2;}

/* ---------- BACKGROUND PATTERNS ---------- */
.bg-pattern{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.5;}
.bg-dots{
  background-image:radial-gradient(rgba(111,163,240,0.18) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 40%, transparent 80%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 40%, transparent 80%);
}
.bg-grid{
  background-image:
    linear-gradient(rgba(111,163,240,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,163,240,0.08) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
}
.bg-lines svg{width:100%; height:100%; opacity:0.35;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13.5px;
  letter-spacing:0.09em; text-transform:uppercase;
  padding:17px 30px; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:normal; text-align:center; line-height:1.3; position:relative; overflow:hidden;
}
.btn-primary{background:#fff; color:var(--navy-deep); box-shadow:0 14px 30px -10px rgba(255,255,255,0.25);}
.btn-primary:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 18px 40px -10px rgba(255,255,255,0.35);}
.btn-glow-blue{background:linear-gradient(135deg,#3E7BFA,#6FA3F0) !important; color:#fff !important; box-shadow:0 0 0 rgba(111,163,240,0.5), 0 14px 34px -8px rgba(62,123,250,0.55); animation:btnGlowPulse 2.6s ease-in-out infinite;}
.btn-glow-blue:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 0 0 rgba(111,163,240,0.5), 0 20px 44px -8px rgba(62,123,250,0.7);}
@keyframes btnGlowPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(111,163,240,0.45), 0 14px 34px -8px rgba(62,123,250,0.55); }
  50%{ box-shadow:0 0 0 10px rgba(111,163,240,0), 0 14px 34px -8px rgba(62,123,250,0.55); }
}
[data-theme="light"] .btn-primary{background:var(--navy); color:#fff; box-shadow:0 14px 30px -10px rgba(13,33,55,0.3);}
[data-theme="light"] .btn-primary:hover{box-shadow:0 18px 40px -10px rgba(13,33,55,0.4);}
.btn-outline{border-color:var(--border); color:var(--heading); background:rgba(111,163,240,0.04);}
.btn-outline:hover{border-color:var(--sky); background:rgba(111,163,240,0.12); transform:translateY(-2px);}
.btn:active{transform:scale(0.97);}
.btn:focus-visible{outline:2px solid var(--sky); outline-offset:3px;}
.btn .arrow{transition:transform .2s ease;}
.btn:hover .arrow{transform:translateX(4px);}

/* click bloom */
.btn-bloom{
  position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(111,163,240,0.55), rgba(111,163,240,0) 70%);
  transform:translate(-50%,-50%) scale(0); pointer-events:none; width:180px; height:180px;
  animation:bloom .65s ease-out forwards;
}
@keyframes bloom{
  0%{transform:translate(-50%,-50%) scale(0); opacity:0.9;}
  100%{transform:translate(-50%,-50%) scale(1.3); opacity:0;}
}
@media (max-width:520px){
  .hero-actions, .final-cta .hero-actions{flex-direction:column; width:100%;}
  .hero-actions .btn, .final-cta .hero-actions .btn{width:100%;}
}

/* ---------- HEADER ----------
   Floating pill shell: <header> is the sticky positioning context and
   supplies the outer gap from the viewport edge; .header-inner is the
   actual navy card that grows/shrinks + lightens/deepens as the page
   scrolls. JS (site.js) toggles header.is-compact past a small scroll
   threshold — everything else here is a pure CSS transition so it still
   works (instantly) under prefers-reduced-motion. */
header{
  position:sticky; top:0; z-index:500;
  padding:18px 24px 0;
  width:100%; box-sizing:border-box;
  transition:padding .45s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1);
}
/* Hide-on-scroll-down / reveal-on-scroll-up (all pages — site.js toggles
   this once the user has scrolled past the top and is moving downward;
   scrolling up or returning to the top always brings it straight back). */
header.is-hidden{ transform:translateY(-100%); }
.header-inner{
  max-width:var(--max); margin:0 auto;
  background:var(--nav-bg-t); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 24px 50px -28px rgba(0,0,0,0.45);
  transition:background-color .5s ease, border-color .3s ease, border-radius .45s cubic-bezier(.4,0,.2,1), box-shadow .45s ease;
}
header.is-compact{ padding:10px 16px 0; }
header.is-compact .header-inner{
  background:var(--nav-bg-compact);
  border-radius:16px;
  box-shadow:0 14px 32px -20px rgba(0,0,0,0.55);
}
/* .navbar carries the redundant .wrap class from markup for legacy reasons —
   neutralize .wrap's own max-width/padding here since .header-inner now owns
   the outer width + gutter, and .navbar supplies its own internal padding. */
.header-inner .wrap.navbar{max-width:none; padding:0; margin:0;}
/* Expanded (top-of-page, default): slightly taller, more breathing room
   around the logo. Compact (once scrolled): slightly shorter/tighter. The
   two paddings are kept clearly apart so the size change reads as
   intentional rather than incidental. */
.navbar{display:flex; align-items:center; justify-content:space-between; padding:23px 26px; transition:padding .45s cubic-bezier(.4,0,.2,1);}
header.is-compact .navbar{ padding:10px 20px; }
.logo{display:flex; align-items:center; gap:10px;}
.logo-icon-img{width:30px; height:30px; object-fit:contain; transition:width .35s ease, height .35s ease;}
header.is-compact .logo-icon-img{ width:24px; height:24px; }
.logo-text{font-weight:800; font-size:18px; color:var(--heading); letter-spacing:-0.01em; transition:font-size .35s ease;}
header.is-compact .logo-text{ font-size:15.5px; }
.logo-text .hive{color:var(--sky);}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-links a{font-size:14px; font-weight:600; color:var(--text-secondary); padding:9px 14px; border-radius:8px;}
.nav-links a:hover{color:var(--heading); background:rgba(111,163,240,0.1);}
.nav-links a.active-link{color:var(--sky); background:rgba(111,163,240,0.1);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.mobile-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.mobile-toggle span{display:block; width:22px; height:2px; background:var(--heading); margin:4px 0; border-radius:2px; transition:.2s;}
.mobile-panel{display:none;}
.mobile-panel.open{
  display:flex; flex-direction:column; gap:2px;
  position:fixed; inset:90px 0 0 0; background:var(--page-bg-deep); z-index:480; padding:26px 24px; overflow-y:auto;
  /* Bree (left) and WhatsApp (right) float above this menu (z-index 600) and are
     never hidden, so the menu keeps extra bottom padding to scroll its last links
     (incl. mp-actions/Login) clear of those two fixed icons instead of being
     covered by them. */
  padding-bottom:104px;
}
.mobile-panel a{
  padding:16px 8px; font-weight:700; font-size:16px; color:var(--heading); border-bottom:1px solid var(--border);
  opacity:0; transform:translateX(-14px); transition:opacity .35s ease, transform .35s ease;
}
.mobile-panel.open a{opacity:1; transform:translateX(0);}
.mobile-panel.open a:nth-child(1){transition-delay:.05s;}
.mobile-panel.open a:nth-child(2){transition-delay:.10s;}
.mobile-panel.open a:nth-child(3){transition-delay:.15s;}
.mobile-panel.open a:nth-child(4){transition-delay:.20s;}
.mobile-panel.open a:nth-child(5){transition-delay:.25s;}
.mobile-panel.open a:nth-child(6){transition-delay:.30s;}
.mobile-panel.open a:nth-child(7){transition-delay:.35s;}
.mobile-panel.open a:nth-child(8){transition-delay:.40s;}
.mobile-panel.open a:nth-child(9){transition-delay:.45s;}
.mobile-panel .mp-actions{display:flex; gap:10px; margin-top:20px;}
.mobile-panel .mp-actions .btn-primary{ opacity:1; transform:none; color:var(--navy-deep); background:#fff; }
[data-theme="light"] .mobile-panel .mp-actions .btn-primary{ color:#fff; background:var(--navy); }
@media (max-width:1180px) and (min-width:961px){
  .nav-links{gap:2px;}
  .nav-links a{padding:9px 10px; font-size:13px;}
}
/* GET STARTED is intentionally NOT shown in the top bar on mobile — it
   already lives in the hamburger/mobile menu (.mp-actions .btn-primary),
   so the header only needs the logo + theme toggle + hamburger. */
.nav-get-started{ display:none; }
@media (max-width:960px){
  .nav-links{display:none;}
  .mobile-toggle{display:block;}
  .nav-actions{ gap:8px; }
  .nav-actions .btn{display:none;}
}
@media (max-width:400px){
  .nav-actions{ gap:6px; }
  .logo-text{ font-size:15px; }
  header{ padding:12px 12px 0; }
  header.is-compact{ padding:8px 8px 0; }
}

/* ---------- SIDE SECTION INDICATOR ---------- */
.side-indicator{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:400;
  display:flex; flex-direction:column; gap:14px;
}
.side-indicator .si-item{
  display:flex; align-items:center; gap:10px; cursor:pointer; justify-content:flex-end;
}
.si-dot{width:7px; height:7px; border-radius:50%; background:var(--text-secondary); opacity:0.45; transition:.25s;}
.si-label{
  font-size:10.5px; font-weight:700; letter-spacing:0.06em; color:var(--text-secondary);
  opacity:0; transform:translateX(6px); transition:.25s; white-space:nowrap;
}
.si-item:hover .si-label{opacity:1; transform:translateX(0);}
.si-item.active .si-dot{background:var(--sky); opacity:1; box-shadow:0 0 10px 2px rgba(111,163,240,0.7); transform:scale(1.3);}
.si-item.active .si-label{opacity:1; transform:translateX(0); color:var(--sky);}
@media (max-width:960px){ .side-indicator{display:none;} }

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(24px); filter:blur(4px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;}
.reveal.in{opacity:1; transform:translateY(0); filter:blur(0);}
.reveal-stagger > *{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.33s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.40s;}

section{padding:100px 0; position:relative;}
.sec-head{max-width:600px; margin-bottom:48px;}
.sec-head p{margin-top:14px; font-size:16px;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- HERO ---------- */
.hero{padding:56px 0 64px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;}
.hero p.lead{font-size:17px; max-width:480px; margin:18px 0 30px;}
.hero-audience{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap;}
.aud-pill{
  font-size:12px; font-weight:700; padding:7px 14px; border-radius:20px;
  background:rgba(111,163,240,0.1); border:1px solid var(--border); color:var(--sky);
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.hero-carousel{position:relative; width:100%; max-width:300px; margin:0 auto; aspect-ratio:941/1672; border-radius:26px; overflow:hidden; box-shadow:var(--glow), var(--shadow); border:1px solid var(--border);}
.hc-track{position:relative; width:100%; height:100%;}
.hc-slide{
  position:absolute; inset:0; opacity:0; transform:scale(1.04) translateX(30px); filter:blur(6px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1s ease;
}
.hc-slide img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.hero-carousel:hover .hc-slide.active img{transform:scale(1.045);}
.hc-slide.active{opacity:1; transform:scale(1) translateX(0); filter:blur(0); z-index:2;}
.hc-slide.prev{transform:scale(0.98) translateX(-30px); filter:blur(6px);}
.hc-glow{position:absolute; inset:-40%; background:radial-gradient(circle, rgba(59,125,221,0.35), transparent 60%); z-index:-1; filter:blur(40px);}
.hc-dots{display:flex; justify-content:center; gap:8px; margin-top:18px;}
.hc-dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.25); cursor:pointer; transition:.2s;}
.hc-dot.active{background:var(--sky); width:22px; border-radius:4px;}
.hc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:36px; height:36px; border-radius:50%; background:rgba(8,24,38,0.6); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; backdrop-filter:blur(6px);
}
.hc-arrow.left{left:-16px;} .hc-arrow.right{right:-16px;}
@media (max-width:520px){ .hc-arrow{display:none;} }

/* ---------- INTELLIGENCE STRIP — continuous diagonal marquee ---------- */
.strip{
  padding:0; background:var(--page-bg-deep); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  overflow:hidden; position:relative; height:96px; display:flex; align-items:center; transition:background .3s ease;
}
.section-deep{background:var(--page-bg-deep); transition:background .3s ease;}
.strip-diag{
  position:absolute; left:-5%; right:-5%; white-space:nowrap;
}
.strip-marquee{display:flex; width:max-content; animation:marquee-ltr 18s linear infinite; text-transform:uppercase; letter-spacing:0.12em; font-weight:600;}
.strip-marquee span.item{
  display:inline-flex; align-items:center; gap:12px;
  font-weight:700; font-size:clamp(1.1rem,2.2vw,1.5rem); letter-spacing:0.12em;
  color:var(--sky); -webkit-text-stroke:0;
  padding:0 34px;
}
.strip-marquee span.item.filled{color:var(--heading); text-shadow:0 0 18px rgba(111,163,240,0.45);}
.strip-marquee span.item .sep{width:6px; height:6px; border-radius:50%; background:var(--sky); box-shadow:0 0 12px 3px rgba(111,163,240,0.7); -webkit-text-stroke:0;}
/* left -> right continuous flow: content starts shifted left by 50% and animates back to 0 */
@keyframes marquee-ltr{ 0%{transform:translateX(-50%);} 100%{transform:translateX(0);} }
.strip:hover .strip-marquee{animation-play-state:paused;}
@media (max-width:700px){ .strip{height:76px;} .strip-marquee{animation-duration:14s;} }

/* live left->right scanning light sweeping across the strip */
.strip-scan{
  position:absolute; top:0; bottom:0; left:-20%; width:20%; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(111,163,240,0.16) 45%, rgba(111,163,240,0.28) 50%, rgba(111,163,240,0.16) 55%, transparent);
  animation:strip-scan-move 5.5s linear infinite;
  mix-blend-mode:screen;
}
@keyframes strip-scan-move{ 0%{left:-20%;} 100%{left:100%;} }

/* ---------- PROBLEM — stacked cards w/ liquid wave hover ---------- */
.problem-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:820px; margin:0 auto;}
.problem-card{
  position:relative; background:var(--card-bg); border:1px solid var(--border); border-radius:18px;
  padding:24px; overflow:hidden; min-height:168px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.problem-card:hover, .problem-card.touched{
  transform:translateY(-5px); border-color:rgba(111,163,240,0.45); box-shadow:0 22px 50px -22px rgba(59,125,221,0.4);
}
.problem-top{display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:3;}
.problem-icon{
  width:40px; height:40px; border-radius:11px; background:rgba(239,68,68,0.14);
  display:flex; align-items:center; justify-content:center;
}
.problem-idx{font-size:11px; font-weight:800; color:rgba(255,255,255,0.25); letter-spacing:0.06em;}
.problem-card h4{color:var(--heading); font-size:15px; margin:16px 0 6px; position:relative; z-index:3;}
.problem-card p{font-size:13px; position:relative; z-index:3;}
.problem-wave{
  position:absolute; left:-10%; right:-10%; bottom:-46px; height:70px; z-index:1;
  fill:rgba(59,125,221,0.16); transition:bottom .55s cubic-bezier(.2,.8,.3,1);
}
.problem-wave.w2{fill:rgba(111,163,240,0.1); bottom:-58px; transition-delay:.05s;}
.problem-card:hover .problem-wave, .problem-card.touched .problem-wave{bottom:-4px;}
.problem-card:hover .problem-wave.w2, .problem-card.touched .problem-wave.w2{bottom:-14px;}
@media (max-width:640px){ .problem-grid{grid-template-columns:1fr;} }

/* ---------- SOLUTIONS ---------- */
.sol-section{position:relative;}
.sol-bg-installer{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(180deg, var(--page-bg-deep) 0%, rgba(8,24,38,0.72) 55%, var(--page-bg-deep) 100%), url('assets/is-bg.png');
  background-size:cover; background-position:80% 30%;
  opacity:0.16;
  transition:opacity .3s ease;
}
/* Light mode used to sit at 0.55 opacity here, which let the photo
   overshadow the card text above it. Brought down to the same subtle
   baseline as dark mode so the image reads as background texture in
   both themes, not as a competing visual. The card-surface overlay
   below (.sol-card::before) is what actually protects text contrast —
   this section-wide layer only needs to stay "slightly visible". */
[data-theme="light"] .sol-bg-installer{
  background-image:linear-gradient(180deg, var(--page-bg-deep) 0%, rgba(237,243,252,0.4) 55%, var(--page-bg-deep) 100%), url('assets/is-bg.png');
  opacity:0.16;
}
@media (max-width:760px){ .sol-bg-installer{ opacity:0.14; background-position:70% 20%; } }
@media (max-width:760px){ [data-theme="light"] .sol-bg-installer{ opacity:0.14; } }
.sol-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; z-index:2;}
.sol-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:28px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; position:relative; overflow:hidden;
}
/* Card-surface overlay: sits between the section background image and
   the card's text/icon content (see z-index on the child rule below).
   Uses the existing --card-bg-solid token (already used by price-card,
   numbers-panel, mock-panel etc.) at high opacity so each card reads as
   a near-solid FleetHive surface — text/icons stay clearly dominant —
   while the photo is still faintly recognizable through it and fully
   visible in the gaps around/between cards. rgba fallback first for
   browsers without color-mix() support. */
.sol-card::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(19,42,68,0.86);
  background:color-mix(in srgb, var(--card-bg-solid) 86%, transparent);
  transition:background .3s ease;
}
[data-theme="light"] .sol-card::before{
  background:rgba(255,255,255,0.92);
  background:color-mix(in srgb, var(--card-bg-solid) 92%, transparent);
}
.sol-card > *{ position:relative; z-index:1; }
.sol-bg-tag{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('assets/ft-bg.png'); background-size:cover; background-position:center;
  opacity:0.22;
}
[data-theme="light"] .sol-bg-tag{ opacity:0.14; }
.sol-card-tag > *:not(.sol-bg-tag){ position:relative; z-index:2; }
.sol-card:hover{transform:translateY(-5px); border-color:rgba(111,163,240,0.45); box-shadow:0 20px 50px -20px rgba(59,125,221,0.35);}
.sol-num{font-size:12px; font-weight:800; color:var(--sky); letter-spacing:0.08em; margin-bottom:14px; display:block;}
.sol-icon{width:44px; height:44px; border-radius:12px; background:rgba(59,125,221,0.12); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.sol-card h3{font-size:17px; margin-bottom:8px;}
.sol-card p{font-size:13.5px;}

/* ---------- NUMBERS ---------- */
.numbers-panel{
  background:linear-gradient(160deg, var(--page-bg-soft), var(--page-bg-deep));
  border:1px solid var(--border); border-radius:24px; padding:56px 40px; position:relative; overflow:hidden;
  transition:background .3s ease;
}
.numbers-panel::before{
  content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(111,163,240,0.15), transparent 55%); pointer-events:none;
}
.numbers-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative; z-index:2;}
.num-item{text-align:center;}
.num-icon{width:46px; height:46px; border-radius:12px; background:rgba(59,125,221,0.15); display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.num-value{font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:var(--heading); letter-spacing:-0.02em;}
.num-value .plus{color:var(--sky);}
.num-label{font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--silver); margin-top:8px;}
@media (max-width:800px){ .numbers-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- HOW IT WORKS ---------- */
.hiw-visual{
  border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow);
  position:relative;
}
.hiw-visual img{width:100%; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.hiw-visual.in img{transform:scale(1);}
.hiw-visual img{transform:scale(1.06);}
.hiw-glow{position:absolute; inset:-10%; background:radial-gradient(circle at 50% 0%, rgba(59,125,221,0.28), transparent 60%); z-index:-1; filter:blur(30px);}
.hiw-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px;}
.hiw-step{text-align:center;}
.hiw-num{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--sky); color:var(--sky);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; margin:0 auto 12px;
}
.hiw-step h4{color:var(--heading); font-size:14px; margin-bottom:5px;}
.hiw-step p{font-size:12.5px;}
@media (max-width:700px){ .hiw-steps{grid-template-columns:1fr 1fr;} }

/* ---------- PLATFORM CAROUSEL ---------- */
.platform-carousel{position:relative; max-width:980px; margin:0 auto;}
.pc-stage{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--glow), var(--shadow); aspect-ratio:1536/1024; background:var(--navy-deep);}
.pc-slide{position:absolute; inset:0; opacity:0; transform:scale(0.94) translateX(40px); filter:blur(8px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .95s cubic-bezier(.2,.7,.2,1), filter .9s ease;}
.pc-slide img{width:100%; height:100%; object-fit:contain; background:var(--navy-deep); transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;}
.pc-stage:hover .pc-slide.active img{transform:scale(1.03); filter:drop-shadow(0 0 24px rgba(111,163,240,0.25));}
.pc-slide.active{opacity:1; transform:scale(1) translateX(0); filter:blur(0); z-index:2;}
.pc-caption{text-align:center; margin-top:26px;}
.pc-caption .pcc-num{font-size:12px; font-weight:800; color:var(--sky); letter-spacing:0.1em;}
.pc-caption h3{
  font-size:clamp(1.3rem,2.4vw,1.8rem); margin-top:8px; color:var(--heading); text-shadow:0 0 24px rgba(59,125,221,0.35);
  transition:opacity .4s ease, transform .4s ease;
}
.pc-dots{display:flex; justify-content:center; gap:9px; margin-top:20px;}
.pc-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.22); cursor:pointer; transition:.2s;}
.pc-dot.active{background:var(--sky); width:26px; border-radius:5px; box-shadow:0 0 10px 2px rgba(111,163,240,0.5);}
.pc-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:42px; height:42px; border-radius:50%; background:rgba(8,24,38,0.65); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; backdrop-filter:blur(8px);}
.pc-arrow.left{left:-20px;} .pc-arrow.right{right:-20px;}
@media (max-width:760px){ .pc-arrow{display:none;} }

/* ---------- WHY — liquid hover ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.why-card{
  position:relative; padding:22px; border-radius:16px; overflow:hidden; border:1px solid transparent;
  transition:transform .3s ease, border-color .3s ease;
}
.why-card:hover, .why-card.touched{transform:translateY(-5px); border-color:rgba(111,163,240,0.35);}
.why-icon{width:48px; height:48px; border-radius:13px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:18px; transition:.25s; position:relative; z-index:3; background:var(--navy);}
.why-card:hover .why-icon, .why-card.touched .why-icon{border-color:var(--sky); box-shadow:0 0 20px -4px rgba(111,163,240,0.6);}
.why-card h4{color:var(--heading); font-size:15.5px; margin-bottom:8px; position:relative; z-index:3;}
.why-card p{font-size:13.5px; position:relative; z-index:3;}
.why-card .problem-wave{opacity:0.7;}

/* ---------- PRICING ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.price-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:20px; padding:32px 28px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; position:relative;
}
.price-card:hover{transform:translateY(-6px); box-shadow:0 24px 60px -24px rgba(59,125,221,0.4);}
.price-card.feat{border:1.5px solid var(--blue); background:linear-gradient(160deg, rgba(59,125,221,0.12), rgba(19,42,68,0.4));}
.price-badge{position:absolute; top:-13px; left:26px; background:var(--grad); color:#fff; font-size:11px; font-weight:800; padding:5px 13px; border-radius:20px;}
.price-name{font-size:12px; font-weight:800; letter-spacing:0.08em; color:var(--sky); text-transform:uppercase;}
.price-amt{font-size:30px; font-weight:800; color:var(--heading); margin:12px 0 2px;}
.price-amt span{font-size:14px; color:var(--silver); font-weight:600;}
.price-yr{font-size:12.5px; color:var(--silver); margin-bottom:22px;}
.price-feats li{display:flex; gap:9px; font-size:13.5px; padding:7px 0; color:var(--text-secondary); border-top:1px solid var(--border);}
.price-feats li:first-child{border-top:none;}
.price-feats li::before{content:'✓'; color:var(--success); font-weight:800;}
.price-card .btn{width:100%; justify-content:center; margin-top:22px;}

/* ---------- STORIES ---------- */
.stories-carousel{position:relative;}
.sc-track{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none;}
.sc-track::-webkit-scrollbar{display:none;}
.story-card{
  scroll-snap-align:start; flex:0 0 auto; width:340px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:26px;
  transition:transform .25s ease, border-color .25s ease;
}
.story-card:hover{transform:translateY(-4px); border-color:rgba(111,163,240,0.4);}
.story-quote{font-size:14px; color:var(--text-primary); line-height:1.65;}
.story-quote::before{content:'"'; color:var(--sky); font-size:26px; font-weight:800; display:block; line-height:0.6; margin-bottom:10px;}
.story-who{display:flex; align-items:center; gap:12px; margin-top:22px;}
.story-avatar{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; flex-shrink:0;}
.story-name{font-weight:700; font-size:13.5px; color:var(--heading);}
.story-role{font-size:12px; color:var(--silver);}
.sc-tabs{display:flex; gap:10px; margin-bottom:28px;}
.sc-tab{padding:9px 18px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--silver); font-weight:700; font-size:13px; cursor:pointer;}
.sc-tab.active{background:var(--blue); border-color:var(--blue); color:#fff;}
.sc-arrows{display:flex; gap:10px; justify-content:center; margin-top:20px;}
.sc-arrow{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--card-bg); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--heading);}
@media (max-width:600px){ .story-card{width:82vw;} }

/* ---------- FINAL CTA ---------- */
.final-cta{
  --heading:#FFFFFF; --text-primary:#DCE6F5; --text-secondary:#B7C4DA;
  background:radial-gradient(ellipse 80% 100% at 50% 0%, rgba(59,125,221,0.18), transparent 60%), var(--navy-deep);
  text-align:center; position:relative; overflow:hidden;
}
.final-cta h2{font-size:clamp(1.9rem,4vw,2.9rem);}
.final-cta p.lead{max-width:520px; margin:18px auto 32px; font-size:16.5px;}
.final-cta .hero-actions{justify-content:center;}

/* ---------- FOOTER ---------- */
footer{
  --heading:#FFFFFF; --text-primary:#DCE6F5; --text-secondary:#B7C4DA;
  background:var(--navy-deep); border-top:1px solid var(--border); padding:56px 0 28px;
  /* Pairs with body's flex column above: this pulls the footer down to
     the bottom of the viewport on short pages instead of leaving a gap
     under it, and never adds space of its own on tall pages. */
  margin-top:auto; flex-shrink:0;
  /* Belt-and-suspenders: footer is a flex child of body (display:flex;
     flex-direction:column) and should already stretch to the container's
     full width by default (align-items isn't overridden anywhere), but a
     reported live-device bug had the footer rendering at roughly half
     viewport width on a narrow phone (not reproducible in headless
     Chromium at the same CSS width — see PAUSED-PROGRESS-NOTES-73.md).
     Pinning width explicitly removes any dependency on flex "stretch"
     being computed correctly by every mobile browser. */
  width:100%; box-sizing:border-box; align-self:stretch;
}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px; margin-bottom:36px;}
.foot-brand p{font-size:13.5px; margin-top:12px; max-width:270px; color:var(--text-secondary);}
.foot-cols{display:flex; gap:56px; flex-wrap:wrap;}
.foot-col h4{color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:14px;}
.foot-col a{display:block; font-size:13.5px; color:var(--silver); margin-bottom:10px;}
.foot-col a:hover{color:var(--sky);}
.foot-social{display:flex; gap:10px; margin-top:16px;}
.foot-social a{width:34px; height:34px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--silver);}
.foot-social a:hover{color:var(--sky); border-color:var(--sky);}
.foot-bottom{border-top:1px solid var(--border); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--silver);}

/* NOTE: Global floating actions (Bree + WhatsApp) now live in one consolidated
   block — see "GLOBAL FLOATING ACTIONS" below — so there's a single source of
   truth for their fixed viewport position. */

/* ---------- RESPONSIVE ---------- */
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-carousel{max-width:280px;}
  .problem-grid, .sol-grid, .why-grid, .price-grid{grid-template-columns:repeat(2,1fr);}
  .numbers-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  section{padding:66px 0;}
  .problem-grid, .sol-grid, .why-grid, .price-grid, .hiw-steps{grid-template-columns:1fr;}
  .numbers-panel{padding:36px 22px;}
  .sc-tabs{flex-wrap:wrap;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important; filter:none !important;}
}

/* ==========================================================
   NEW COMPONENTS — corrections pass
   ========================================================== */

/* ---------- HERO truck background (TH.png) ---------- */
.hero-truck-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(100deg, var(--page-bg) 18%, rgba(13,33,55,0.55) 46%, rgba(13,33,55,0.25) 100%), url('assets/th-bg.png');
  background-size:cover; background-position:center right;
  opacity:0.18;
}
[data-theme="light"] .hero-truck-bg{
  background-image:linear-gradient(100deg, var(--page-bg) 15%, rgba(246,249,254,0.42) 42%, rgba(246,249,254,0.1) 100%), url('assets/th-bg.png');
  opacity:0.55;
}
@media (max-width:880px){ .hero-truck-bg{ opacity:0.16; background-position:center 30%; } }
@media (max-width:880px){ [data-theme="light"] .hero-truck-bg{ opacity:0.34; } }

/* ---------- HERO tracking environment background ---------- */
.hero-bg-tracking{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.hero-bg-tracking svg{width:100%; height:100%;}
.hbt-route{fill:none; stroke:rgba(111,163,240,0.35); stroke-width:1.4; stroke-dasharray:6 6;}
.hbt-route-glow{fill:none; stroke:var(--sky); stroke-width:2; stroke-dasharray:260; stroke-dashoffset:260; animation:hbt-draw 6s ease-in-out infinite;}
@keyframes hbt-draw{ 0%{stroke-dashoffset:260;} 45%{stroke-dashoffset:0;} 100%{stroke-dashoffset:0;} }
.hbt-node{fill:rgba(111,163,240,0.5);}
.hbt-node-pulse{fill:var(--sky); animation:hbt-pulse 2.4s ease-in-out infinite;}
@keyframes hbt-pulse{0%,100%{opacity:0.5; r:3;} 50%{opacity:1; r:5;}}

/* ---------- HOW IT WORKS carousel (image + step list) ---------- */
.hiw-layout{display:grid; grid-template-columns:0.9fr 1.1fr; gap:52px; align-items:center;}
.hiw-steplist{display:flex; flex-direction:column; gap:4px;}
.hiw-li{
  display:flex; gap:16px; padding:16px 14px; border-radius:12px; cursor:pointer;
  border:1px solid transparent; transition:background .25s ease, border-color .25s ease;
}
.hiw-li.active{background:rgba(111,163,240,0.08); border-color:var(--border);}
.hiw-li .hiw-num{flex-shrink:0;}
.hiw-li.active .hiw-num{border-color:var(--sky); background:var(--sky); color:var(--navy-deep);}
.hiw-li h4{color:var(--heading); font-size:15px; margin-bottom:4px;}
.hiw-li p{font-size:13px;}
.hiw-connector{width:2px; background:var(--border); margin-left:33px; height:14px;}
.hiw-visual2{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:1/1; background:var(--navy-deep);}
.hiw-visual2 .hiw-slide{position:absolute; inset:0; opacity:0; transition:opacity .7s ease; clip-path:inset(0 0 0 0);}
.hiw-visual2 .hiw-slide.active{opacity:1;}
.hiw-visual2 img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.hiw-visual2:hover img{transform:scale(1.04);}
.hiw-scanline{position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--sky), transparent); opacity:0; z-index:5;}
.hiw-visual2.scanning .hiw-scanline{opacity:0.9; animation:hiw-scan 1.1s ease-in-out;}
@keyframes hiw-scan{0%{top:0;} 100%{top:100%;}}
@media (max-width:900px){ .hiw-layout{grid-template-columns:1fr;} .hiw-visual2{order:-1;} }

/* ---------- PLATFORM scan glow (dashboard intelligence) ---------- */
.pc-stage{position:relative;}
.pc-stage::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, rgba(111,163,240,0.08), transparent 30%, transparent 70%, rgba(111,163,240,0.08));
}
.pc-scanline{position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--sky), transparent); z-index:6; opacity:0;}
.pc-stage.scanning .pc-scanline{opacity:1; animation:hiw-scan 0.9s ease-in-out;}

/* ---------- PRICING toggle ---------- */
.price-toggle{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:40px;}
.pt-label{font-size:13.5px; font-weight:700; color:var(--silver); transition:color .2s ease;}
.pt-label.active{color:var(--heading);}
.pt-switch{width:52px; height:28px; border-radius:20px; background:rgba(255,255,255,0.1); border:1px solid var(--border); position:relative; cursor:pointer; flex-shrink:0;}
.pt-knob{position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:var(--sky); transition:transform .25s cubic-bezier(.4,1.4,.6,1); box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.pt-switch.annual .pt-knob{transform:translateX(24px);}
.pt-save{font-size:11px; font-weight:700; color:var(--success); background:rgba(16,185,129,0.12); padding:3px 9px; border-radius:10px;}
.price-amt-wrap{position:relative; min-height:44px; overflow:hidden;}
.price-amt{transition:opacity .3s ease, transform .3s ease;}
.price-amt.swap{opacity:0; transform:translateY(8px);}

/* ---------- STORIES depth carousel ---------- */
.sc-track{position:relative;}
.story-card{transition:transform .4s ease, opacity .4s ease, filter .4s ease;}
.story-card.sc-side{transform:scale(0.92); opacity:0.55; filter:blur(0.5px);}
.story-card.sc-center{transform:scale(1); opacity:1;}

/* ==========================================================
   GLOBAL FLOATING ACTIONS — Bree (LEFT) + WhatsApp (RIGHT)
   Single source of truth for position. Both are position:fixed
   to the viewport (never document flow) and their left/right +
   bottom offsets must not be touched by any other rule, script,
   or the idle animations below. The idle animations only ever
   animate `transform` / `box-shadow` — never left/right/bottom —
   so the anchor point never actually moves.
   ========================================================== */

/* ---------- WHATSAPP (right region) ---------- */
.wa-float{
  position:fixed !important; right:20px; bottom:24px; z-index:600;
  display:flex; align-items:center; gap:8px;
  background:rgba(13,33,55,0.85); backdrop-filter:blur(10px);
  border:1px solid rgba(111,163,240,0.3); border-radius:100px;
  padding:9px 15px 9px 10px; cursor:pointer;
  box-shadow:0 0 0 1px rgba(111,163,240,0.25), 0 14px 30px -12px rgba(59,125,221,0.4);
  animation:wa-breathe 3.6s ease-in-out infinite;
}
.wa-float:hover{border-color:var(--sky);}
.wa-float:active{transform:scale(0.94);}
.wa-online{width:9px; height:9px; border-radius:50%; background:var(--sky); box-shadow:0 0 8px 2px rgba(111,163,240,0.6); flex-shrink:0;}
.wa-float svg.wa-icon{width:16px; height:16px; flex-shrink:0; filter:drop-shadow(0 0 4px rgba(111,163,240,0.7));}
.wa-float .wa-text{font-size:12px; font-weight:700; color:#fff; white-space:nowrap;}
.wa-halo{ position:absolute; inset:-6px; border-radius:100px; border:1px solid rgba(111,163,240,0.35); animation:wa-halo-pulse 2.6s ease-out infinite; pointer-events:none; }
@keyframes wa-halo-pulse{ 0%{ transform:scale(0.96); opacity:0.8; } 100%{ transform:scale(1.06); opacity:0; } }
@keyframes wa-breathe{0%,100%{transform:scale(1);} 50%{transform:scale(1.03);}}
@media (prefers-reduced-motion: reduce){ .wa-float{ animation:none; } .wa-halo{ animation:none; } }
@media (max-width:600px){
  .wa-float{right:16px; bottom:18px; padding:11px 16px 11px 12px;}
  .wa-float .wa-text{display:none;}
}

/* Hide/peek for WhatsApp — same pattern as Bree's .bree-hidden/.bree-peek
   above, mirrored to the right edge since WhatsApp lives in the right
   region while Bree lives on the left. */
.wa-hide-btn{
  position:absolute; top:-8px; right:-8px; width:20px; height:20px; border-radius:50%;
  background:var(--navy); border:1px solid rgba(111,163,240,0.4); color:var(--text-secondary);
  font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.wa-hide-btn:hover{border-color:var(--sky);}
.wa-hide-btn:focus-visible,
.wa-peek:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
.wa-float.wa-hidden{
  animation:none;
  transform:translateX(130%); opacity:0; pointer-events:none;
}
.wa-float{ transition:transform .28s ease, opacity .28s ease; }
.wa-peek{
  position:fixed !important; right:0; bottom:24px; z-index:600;
  width:26px; height:46px; padding:0; cursor:pointer;
  border:1px solid rgba(111,163,240,0.35); border-right:none;
  border-radius:14px 0 0 14px;
  background:rgba(13,33,55,0.9);
  box-shadow:0 10px 22px -10px rgba(59,125,221,0.65);
  display:flex; align-items:center; justify-content:center;
}
.wa-peek::after{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--sky);
  box-shadow:0 0 6px 2px rgba(111,163,240,0.7);
}
.wa-peek[hidden]{display:none;}
@media (prefers-reduced-motion: reduce){
  .wa-float{ transition:none; }
}
@media (max-width:600px){ .wa-peek{right:0; bottom:18px;} }

/* ---------- BREE AI ASSISTANT (left region) ----------
   Always the compact circular identity — never a wider pill/bar with a
   text label. Padding/border-radius sized around the orb itself
   (previously sized for the "Ask Bree" text label, which produced an
   elongated bar shape on wider viewports; the markup no longer
   includes that label at all, on any page). */
.bree-launcher{
  position:fixed !important; left:20px; bottom:24px; z-index:600;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(27,79,138,0.9), rgba(59,125,221,0.9));
  border-radius:50%; padding:7px; cursor:pointer;
  box-shadow:0 0 0 1px rgba(111,163,240,0.35), 0 12px 28px -10px rgba(59,125,221,0.65);
  animation:bree-breathe 3.4s ease-in-out infinite, bree-hover 4.8s ease-in-out infinite;
}
.bree-launcher:active{transform:scale(0.94);}
.bree-launcher .bree-avatar{width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; color:#fff; position:relative;}
.bree-ai-ring{
  position:absolute; inset:-6px; border-radius:50%; border:1.5px solid rgba(111,163,240,0.6);
  border-top-color:transparent; animation:bree-spin 3s linear infinite;
}
.bree-dot{ position:absolute; width:5px; height:5px; border-radius:50%; background:var(--sky); box-shadow:0 0 6px 2px rgba(111,163,240,0.7); }
.bree-launcher .bree-ai-badge{
  position:absolute; top:-3px; right:-3px; width:12px; height:12px; border-radius:50%;
  background:var(--sky); border:2px solid var(--navy-deep); animation:pulse-dot 1.8s infinite;
}
@keyframes bree-breathe{
  0%,100%{ box-shadow:0 0 0 1px rgba(111,163,240,0.35), 0 14px 34px -10px rgba(59,125,221,0.65); }
  50%{ box-shadow:0 0 0 4px rgba(111,163,240,0.18), 0 14px 40px -8px rgba(59,125,221,0.8); }
}
/* Extremely subtle idle drift (~4px / ~0.1cm), transform-only — the fixed
   left/bottom anchor above never changes. Removed entirely for users who
   prefer reduced motion. */
@keyframes bree-hover{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
@keyframes bree-spin{ 100%{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .bree-launcher{ animation:none; }
  .bree-ai-ring{ animation:none; }
}
@media (max-width:600px){ .bree-launcher{left:16px; bottom:18px;} }

/* Hide/reveal — the chevron tucks the whole pill off toward the left
   edge; the slim peek tab left behind is a separate fixed element (not
   a collapsed state of the pill itself) so it never competes with the
   pill's own "open the panel" click target. */
.bree-hide-btn{
  position:absolute; top:50%; right:-7px; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; padding:0; line-height:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-deep); color:#fff; font-size:12px;
  border:1px solid rgba(111,163,240,0.45); cursor:pointer;
}
.bree-hide-btn:hover{border-color:var(--sky);}
.bree-hide-btn:focus-visible,
.bree-peek:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
.bree-launcher.bree-hidden{
  /* bree-hover (idle drift) animates `transform` on every frame, which
     would otherwise keep fighting the translateX below and the pill
     would never actually finish sliding off — turn the idle animations
     off for as long as it's tucked away. */
  animation:none;
  transform:translateX(-130%); opacity:0; pointer-events:none;
}
.bree-launcher{ transition:transform .28s ease, opacity .28s ease; }
.bree-peek{
  position:fixed !important; left:0; bottom:24px; z-index:600;
  width:26px; height:46px; padding:0; cursor:pointer;
  border:1px solid rgba(111,163,240,0.35); border-left:none;
  border-radius:0 14px 14px 0;
  background:linear-gradient(135deg, rgba(27,79,138,0.9), rgba(59,125,221,0.9));
  box-shadow:0 10px 22px -10px rgba(59,125,221,0.65);
  display:flex; align-items:center; justify-content:center;
}
.bree-peek::after{
  content:''; width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 6px 2px rgba(111,163,240,0.7);
}
.bree-peek[hidden]{display:none;}
@media (prefers-reduced-motion: reduce){
  .bree-launcher{ transition:none; }
}
@media (max-width:600px){ .bree-peek{left:0; bottom:18px;} }

.bree-panel{
  position:fixed !important; left:20px; bottom:84px; z-index:650; width:340px; max-width:calc(100vw - 32px);
  height:440px; max-height:70vh; background:var(--navy); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow); display:none; flex-direction:column; overflow:hidden;
}
.bree-panel.open{display:flex;}
@media (max-width:600px){ .bree-panel{ left:16px; bottom:70px; } }

/* Portal Support panel (Section 3B UI) — same fixed/left/open mechanics
   as .bree-panel above, just taller/wider and internally scrollable
   since its content (category grid + conversation + history) doesn't
   fit the site-wide widget's fixed 440px body. */
.bree-portal-panel{
  width:380px; height:600px; max-height:80vh; padding:20px;
  overflow-y:auto; overflow-x:hidden;
}
.bree-portal-panel .bree-panel-head{ align-items:flex-start; justify-content:space-between; }
.bree-portal-panel .bree-panel-head > div{ flex:1; min-width:0; }
.bree-portal-panel .bree-panel-head .bree-close{ flex-shrink:0; margin-left:8px; }
@media (max-width:600px){
  .bree-portal-panel{ width:calc(100vw - 32px); height:74vh; max-height:74vh; }
}
.bree-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); background:var(--navy-deep);}
.bree-head-info{display:flex; align-items:center; gap:10px;}
.bree-head .bree-avatar{width:32px; height:32px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff;}
.bree-head-name{font-size:14px; font-weight:800; color:#fff;}
.bree-head-status{font-size:11px; color:var(--success);}
.bree-close{background:none; border:none; color:var(--silver); cursor:pointer; font-size:20px; line-height:1;}
.bree-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;}
.bree-msg{max-width:85%; padding:10px 14px; border-radius:14px; font-size:13.5px; line-height:1.5;}
.bree-msg.bot{background:rgba(255,255,255,0.06); color:#DCE6F5; align-self:flex-start; border-bottom-left-radius:4px;}
.bree-msg.bot.bree-typing{opacity:0.6; font-style:italic;}
.bree-msg.user{background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
.bree-quick{display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px;}
.bree-quick button{font-size:11.5px; padding:7px 12px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--sky); cursor:pointer;}
.bree-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border);}
.bree-input-row input{flex:1; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:20px; padding:10px 14px; color:#fff; font-size:13px; font-family:'Plus Jakarta Sans',sans-serif;}
.bree-input-row input:focus{outline:none; border-color:var(--sky);}
.bree-send{width:38px; height:38px; border-radius:50%; background:var(--blue); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;}

.placeholder-note{
  background:rgba(245,158,11,0.08); border:1px dashed rgba(245,158,11,0.4); color:#F5C77E;
  border-radius:8px; padding:12px 16px; font-size:12.5px; font-style:italic;
}

/* ---------- CTA-specific button variants (visually distinct from Hero) ---------- */
.btn-cta-primary{
  background:var(--grad); color:#fff; border-color:transparent;
  box-shadow:0 16px 40px -12px rgba(59,125,221,0.6);
}
.btn-cta-primary:hover{ box-shadow:0 20px 48px -10px rgba(59,125,221,0.75); transform:translateY(-2px) scale(1.02); }
.btn-cta-outline{
  background:rgba(111,163,240,0.08); border-color:rgba(111,163,240,0.4); color:#fff;
}
.btn-cta-outline:hover{ background:rgba(111,163,240,0.16); border-color:var(--sky); }

/* ---------- Interaction reset guarantee ---------- */
.problem-card, .why-card{ transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.problem-card:not(:hover):not(.touched), .why-card:not(:hover):not(.touched){
  transform:none; border-color:transparent; box-shadow:none;
}

/* ---------- Mobile section indicator (compact) ---------- */
.side-indicator-mobile{
  display:none; position:fixed; right:10px; top:50%; transform:translateY(-50%); z-index:400;
  flex-direction:column; gap:8px; background:rgba(13,33,55,0.55); backdrop-filter:blur(8px);
  padding:10px 6px; border-radius:20px; border:1px solid var(--border);
}
.side-indicator-mobile .sim-dot{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.3); transition:.2s; }
.side-indicator-mobile .sim-dot.active{ background:var(--sky); box-shadow:0 0 8px 2px rgba(111,163,240,0.7); transform:scale(1.4); }
@media (max-width:960px){
  .side-indicator-mobile{ display:flex; }
}
@media (max-width:420px){
  .side-indicator-mobile{ right:6px; padding:8px 5px; gap:6px; }
}

/* ---------- Theme toggle button ---------- */
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--card-bg-solid);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--sky); flex-shrink:0;
  transition:border-color .2s ease, background .3s ease;
}
.theme-toggle:hover{ border-color:var(--sky); }
.theme-toggle svg{ width:16px; height:16px; }

/* ---------- Mobile spacing improvements ---------- */
@media (max-width:640px){
  .navbar{ padding:16px 14px; }
  header.is-compact .navbar{ padding:9px 12px; }
  .wrap{ padding:0 22px; }
  .logo-icon-img{ width:32px; height:32px; }
  header.is-compact .logo-icon-img{ width:24px; height:24px; }
  .logo-text{ font-size:17px; }
  section{ padding:64px 0; }
  .sec-head{ margin-bottom:36px; }
  .hero{ padding:48px 0 52px; }
  .problem-grid, .price-grid{ gap:16px; }
  .card, .problem-card, .why-card{ padding:22px; }
  .price-card{ padding:28px 24px; }
  .mobile-toggle{ padding:10px; }
}
@media (max-width:380px){
  .wrap{ padding:0 18px; }
}

/* ---------- Hamburger → close morph ---------- */
.mobile-toggle span{ transition:transform .3s ease, opacity .3s ease; transform-origin:center; }
.mobile-toggle.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2){ opacity:0; }
.mobile-toggle.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================
   GLOSSY FLEET BLUE TREATMENT — v4
   ========================================================== */
.price-card, .sol-card, .card, .mock-panel, .numbers-panel, .price-card.feat,
.btn-primary, .btn-cta-primary, .hiw-visual2, .pc-stage{
  position:relative; overflow:hidden;
}
.price-card::before, .sol-card::before, .numbers-panel::before, .mock-panel::before,
.hiw-visual2::before, .pc-stage::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, rgba(111,163,240,0.10) 0%, transparent 22%, transparent 78%, rgba(59,125,221,0.07) 100%);
}
.price-card.feat{
  background:linear-gradient(160deg, rgba(59,125,221,0.14), rgba(19,42,68,0.5));
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow:visible;
}
.btn-primary::after, .btn-cta-primary::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-primary:hover::after, .btn-cta-primary:hover::after{ left:130%; }
.numbers-panel{ box-shadow:var(--glow), inset 0 1px 0 rgba(111,163,240,0.12); }
[data-theme="light"] .price-card.feat{
  background:linear-gradient(160deg, rgba(59,125,221,0.06), #FFFFFF);
}
[data-theme="light"] .price-card::before, [data-theme="light"] .sol-card::before,
[data-theme="light"] .numbers-panel::before, [data-theme="light"] .mock-panel::before{
  background:linear-gradient(115deg, rgba(111,163,240,0.06) 0%, transparent 22%, transparent 78%, rgba(59,125,221,0.04) 100%);
}
.strip{ box-shadow:inset 0 1px 0 rgba(111,163,240,0.15), inset 0 -1px 0 rgba(111,163,240,0.15); }
.hero-carousel, .pc-stage, .hiw-visual2{ box-shadow:var(--glow), var(--shadow), inset 0 1px 0 rgba(111,163,240,0.2); }

/* ==========================================================
   INNER PAGES — Solutions / How It Works / About / Blog
   ========================================================== */

/* ---------- Page hero (shorter than homepage hero) ---------- */
.page-hero{ padding:64px 0 40px; position:relative; overflow:hidden; }
.page-hero .wrap{ max-width:760px; text-align:center; }
.page-hero p.lead{ font-size:17px; max-width:620px; margin:16px auto 0; }
.page-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.4; }

/* ===================== CLIENT PORTAL — DASHBOARD HERO =====================
   Matches the FleetHive dashboard mockup: the header and the "Welcome
   back"/greeting hero share one continuous band — no visible seam or gap
   under the nav bar — and the dashboard content directly below sits on
   its own surface with rounded top corners, layered over the hero.
   This band now follows the SAME per-theme fill as .app-header .header-inner
   (navy in dark mode, white in light mode) rather than being hardcoded
   navy — a hardcoded-navy band under a light-mode white header was
   exactly the visible seam being fixed here. Only the content sheet
   below it follows the page's own light/dark surface token, so the
   toggle still does something meaningful further down the page. */
#portalWelcome.page-hero{
  background:var(--navy-deep);
  padding:36px 0 56px;
}
#portalWelcome h1,
#portalWelcome .lead{ color:#fff; }
#portalWelcome .lead{ color:rgba(255,255,255,0.72); }
[data-theme="light"] #portalWelcome.page-hero{
  background:
    linear-gradient(115deg, transparent 40%, rgba(59,125,221,0.14) 72%, rgba(27,79,138,0.22) 100%),
    radial-gradient(120% 220% at 100% -40%, rgba(59,125,221,0.10), transparent 60%),
    #FFFFFF;
}
[data-theme="light"] #portalWelcome h1,
[data-theme="light"] #portalWelcome .lead{ color:var(--heading); }
[data-theme="light"] #portalWelcome .lead{ color:rgba(13,33,55,0.65); }

/* ===================== DASHBOARD HERO — decorative network/location art =====================
   Sits behind the greeting text, upper-right of the navy hero band —
   a faint route/node network with a location pin, echoing the same
   "map/route" visual language the header's .bg-dots texture already
   uses elsewhere, just as its own bigger illustration here instead of
   a repeating pattern. Purely decorative (aria-hidden in the markup),
   low-opacity so it never competes with the greeting text sitting at
   .wrap's z-index:2 above it. */
.portal-hero-art{
  position:absolute; top:2px; right:0; z-index:1;
  width:150px; height:auto; opacity:0.55; pointer-events:none;
}
@media (min-width:640px){
  .portal-hero-art{ width:210px; top:-6px; right:26px; opacity:0.7; }
}
[data-theme="light"] .portal-hero-art{ opacity:0.4; }
#portalBody{
  background:var(--page-bg-soft);
  border-radius:24px 24px 0 0;
  /* Pulls this sheet up 24px to overlap the greeting hero directly above
     it (padding-top grows by the same 24px so the actual content position
     is unchanged). Without this, the rounded top corners had nothing but
     the plain page background behind them — a slightly different navy
     than the hero's own background — which showed as a mismatched patch
     right at the rounded corner. Now the hero's own background is what's
     always revealed there, so the corner reads as a clean continuous cut
     into the hero rather than a seam. */
  margin-top:-24px;
  padding-top:52px;
  position:relative; z-index:1;
}

/* ---------- Solution detail blocks ---------- */
.solution-block{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center;
  padding:56px 0; border-bottom:1px solid var(--border);
}
.solution-block:last-of-type{ border-bottom:none; }
.solution-block.reverse .sb-panel{ order:2; }
.sb-panel{
  border-radius:20px; border:1px solid var(--border); background:var(--card-bg); padding:36px;
  position:relative; overflow:hidden; min-height:220px; display:flex; flex-direction:column; justify-content:center;
}
.sb-panel .sol-icon{ width:52px; height:52px; border-radius:14px; margin-bottom:0; }
.sb-eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:0.08em; color:var(--sky); text-transform:uppercase; }
.sb-content h3{ font-size:1.5rem; margin:10px 0 14px; }
.sb-row{ margin-bottom:14px; }
.sb-row .sb-label{
  font-size:10.5px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--sky); display:inline-block; margin-bottom:6px; padding:3px 10px;
  border-radius:20px; background:rgba(111,163,240,0.13);
}
.sb-row p{ font-size:14.5px; margin:0; }
/* "Why it matters" is always the 3rd sb-row in each solution block — give it a
   slightly more prominent treatment than "In simple terms" / "Real life example". */
.sb-content > div.sb-row:nth-of-type(3) .sb-label{
  color:#fff; font-size:12px; background:var(--grad);
}
.sb-cta{ margin-top:18px; }
@media (max-width:400px){
  .sb-cta .btn{ white-space:normal; text-align:center; line-height:1.35; }
}
@media (max-width:860px){
  .solution-block{ grid-template-columns:1fr; gap:26px; padding:40px 0; }
  .solution-block.reverse .sb-panel{ order:0; }
}

/* backgrounds for solutions detail page */
.sol-page-bg-installer{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(180deg, var(--page-bg) 0%, rgba(8,24,38,0.7) 50%, var(--page-bg) 100%), url('assets/is-bg.png');
  background-size:cover; background-position:75% 25%; opacity:0.22;
}
[data-theme="light"] .sol-page-bg-installer{
  background-image:linear-gradient(180deg, var(--page-bg) 0%, rgba(237,243,252,0.6) 50%, var(--page-bg) 100%), url('assets/is-bg.png');
  opacity:0.24;
}
.sol-page-bg-tag{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(180deg, var(--page-bg) 0%, rgba(8,24,38,0.7) 50%, var(--page-bg) 100%), url('assets/ft-bg.png');
  background-size:cover; background-position:65% 30%; opacity:0.22;
}
[data-theme="light"] .sol-page-bg-tag{
  background-image:linear-gradient(180deg, var(--page-bg) 0%, rgba(237,243,252,0.82) 50%, var(--page-bg) 100%), url('assets/ft-bg.png');
  opacity:0.16;
}

/* ---------- How It Works — detailed timeline ---------- */
.timeline{ max-width:760px; margin:0 auto; position:relative; }
.timeline::before{ content:''; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:var(--border); }
.tl-item{ position:relative; padding:0 0 40px 56px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-num{
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--sky); color:var(--sky); background:var(--page-bg);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; z-index:2;
}
.tl-item h4{ color:var(--heading); font-size:16px; margin-bottom:6px; }
.tl-item p{ font-size:14px; max-width:560px; }

/* ---------- About — values grid ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.value-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:24px;
  transition:transform .25s ease, border-color .25s ease;
}
.value-card:hover{ transform:translateY(-4px); border-color:rgba(111,163,240,0.4); }
.value-card h4{ color:var(--heading); font-size:15px; margin-bottom:8px; }
.value-card p{ font-size:13.5px; }
@media (max-width:760px){ .value-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .value-grid{ grid-template-columns:1fr; } }

.mv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:8px; }
.mv-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:26px; }
.mv-card .eyebrow{ margin-bottom:10px; }
.mv-card p{ font-size:14.5px; }
@media (max-width:860px){ .mv-grid{ grid-template-columns:1fr; } }

/* Vision / Mission — 2-up variant. Desktop/tablet: two cards side by side.
   Mobile: cards stay wide and compact by switching each card to a horizontal
   row (label on the left, copy on the right) instead of a tall vertical
   block with a full-width eyebrow stacked above the paragraph. This keeps
   the section short even on narrow phones without cramming full paragraphs
   into two skinny side-by-side columns, which would hurt readability. */
.mv-grid.mv-grid-2col{ grid-template-columns:repeat(2,1fr); max-width:820px; margin:0 auto; }
@media (max-width:700px){
  .mv-grid.mv-grid-2col{ grid-template-columns:1fr; max-width:560px; gap:12px; }
  .mv-grid.mv-grid-2col .mv-card{
    display:flex; flex-direction:row; align-items:flex-start; gap:14px;
    padding:16px 18px;
  }
  .mv-grid.mv-grid-2col .mv-card .eyebrow{
    flex:0 0 auto; width:64px; margin-bottom:0; line-height:1.35;
    padding-right:12px; border-right:1px solid var(--border);
  }
  .mv-grid.mv-grid-2col .mv-card p{ margin:0; font-size:13px; line-height:1.5; }
}
@media (max-width:400px){
  .mv-grid.mv-grid-2col .mv-card{ padding:14px 14px; gap:10px; }
  .mv-grid.mv-grid-2col .mv-card .eyebrow{ width:56px; font-size:11px; padding-right:10px; }
  .mv-grid.mv-grid-2col .mv-card p{ font-size:12.5px; }
}

/* ---------- About — Founder story ("From the Horse's Mouth") ---------- */
.founder-block{display:grid; grid-template-columns:0.85fr 1.35fr; gap:48px; align-items:center;}
.founder-block > *{ min-width:0; }
.founder-photo-wrap{border-radius:20px; overflow:hidden; border:1px solid var(--border); background:var(--card-bg); position:relative;}
.founder-photo-wrap img{width:100%; display:block;}
.founder-content h3{font-size:1.6rem; margin:10px 0 16px;}
.founder-content p{font-size:14.5px; margin-bottom:14px; color:var(--text-primary); line-height:1.75;}
.founder-content .founder-line{font-weight:700; color:var(--heading);}
.founder-signoff{margin-top:20px; font-size:13px; color:var(--silver);}
.founder-signoff strong{display:block; color:var(--heading); font-size:14.5px; margin-bottom:2px;}
@media (max-width:860px){ .founder-block{grid-template-columns:1fr; gap:26px;} }

/* ---------- About — Meet the Team ----------
   Horizontally-scrollable row of cards. The photo fills the whole card;
   the name/role/toggle bar is a translucent panel pinned to the card's
   bottom edge and always visible. Clicking "+" reveals a short bio that
   grows UPWARD from behind that bottom bar: the description lives inside
   the same panel but is placed visually above the name/role bar using
   flex `order` (DOM order stays name-first for screen readers/tab order;
   only the visual stacking flips). Because the panel is bottom-anchored
   and the card itself clips overflow, opening a card only grows the
   panel within the fixed-height photo — it never resizes the card or
   pushes page content. Each card's .is-open state is independent, set by
   site.js with no shared accordion. The panel's color inverts against the
   page (light page -> deep navy glass; dark page -> light glass, see the
   [data-theme="light"] overrides below) so it always reads clearly, and
   stays translucent enough that the photo shows through behind it. */
.team-scroll{
  display:flex; gap:20px; overflow-x:auto; padding:4px 4px 10px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.team-scroll::-webkit-scrollbar{ display:none; }
.team-card{
  position:relative; flex:0 0 78%; scroll-snap-align:start;
  aspect-ratio:4/5; border-radius:22px; overflow:hidden;
  background:var(--navy-deep); border:1px solid var(--border); box-shadow:var(--shadow);
}
.team-card-media{ position:absolute; inset:0; }
.team-card-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.team-card-panel{
  position:absolute; left:0; right:0; bottom:0; max-height:82%;
  display:flex; flex-direction:column; overflow:hidden;
  padding:14px 18px; border-radius:0 0 22px 22px;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:background-color .3s ease;
}
.team-card-top{ order:2; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.team-card-name{ font-weight:800; color:#0D2137; font-size:15.5px; letter-spacing:-0.01em; }
.team-card-role{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#2F6FCB; margin-top:2px; }
.team-card-toggle{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:rgba(13,33,55,0.08); border:1px solid rgba(13,33,55,0.16);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.team-card-toggle:hover{ background:rgba(13,33,55,0.14); border-color:rgba(13,33,55,0.3); }
.team-toggle-icon{ position:relative; width:13px; height:13px; }
.team-toggle-icon::before, .team-toggle-icon::after{
  content:""; position:absolute; background:#0D2137; border-radius:2px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.team-toggle-icon::before{ width:13px; height:2px; top:5.5px; left:0; }
.team-toggle-icon::after{ width:2px; height:13px; top:0; left:5.5px; }
.team-card.is-open .team-toggle-icon::after{ transform:scaleY(0); }
/* order:1 puts this ABOVE the name/role bar visually, so growing it from
   0fr->1fr makes the whole bottom-anchored panel's top edge rise — the
   "slides up" reveal — while the name/role bar underneath never moves. */
.team-card-desc{
  order:1; display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.team-card-desc-inner{ overflow:hidden; }
.team-card-desc-inner p{
  padding-bottom:12px; margin:0; font-size:13px; line-height:1.6; color:#334155;
  opacity:0; transform:translateY(8px); transition:opacity .3s ease .05s, transform .35s ease .05s;
}
.team-card.is-open .team-card-desc{ grid-template-rows:1fr; }
.team-card.is-open .team-card-desc-inner p{ opacity:1; transform:translateY(0); }

/* Light page -> deep navy glass panel with light text (inverted so the
   panel always contrasts with the page behind the card, not just the
   photo). */
[data-theme="light"] .team-card-panel{ background:rgba(13,33,55,0.86); }
[data-theme="light"] .team-card-name{ color:#FFFFFF; }
[data-theme="light"] .team-card-role{ color:#9FC3F5; }
[data-theme="light"] .team-card-desc-inner p{ color:#DCE6F5; }
[data-theme="light"] .team-card-toggle{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.32); }
[data-theme="light"] .team-card-toggle:hover{ background:rgba(255,255,255,0.22); }
[data-theme="light"] .team-toggle-icon::before,
[data-theme="light"] .team-toggle-icon::after{ background:#FFFFFF; }

@media (min-width:700px){
  .team-card{ flex:0 0 calc(33.333% - 14px); scroll-snap-align:none; }
  .team-scroll{ overflow-x:visible; padding:4px 0 10px; }
}
@media (max-width:520px){
  .team-card{ flex-basis:84%; }
  .team-card-panel{ padding:12px 16px 14px; }
}

/* ---------- About — Testimonials grid ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.testi-grid .story-card{width:auto;}
.testi-tag{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--sky); background:rgba(111,163,240,0.12); border-radius:20px; padding:4px 10px; margin-bottom:12px;}
@media (max-width:760px){ .testi-grid{grid-template-columns:1fr;} }

/* ---------- Blog placeholder (legacy, kept for safety) ---------- */
.blog-empty{
  max-width:560px; margin:0 auto; text-align:center; padding:60px 32px;
  border:1px dashed var(--border); border-radius:20px; background:var(--card-bg);
}
.blog-empty h3{ color:var(--heading); margin-bottom:10px; }

/* ==========================================================
   BLOG — hub, categories, cards, article page
   ========================================================== */
.blog-cats{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:26px 0 48px; }
.blog-cat-pill{
  padding:8px 16px; border-radius:20px; border:1px solid var(--border); background:transparent;
  font-size:12.5px; font-weight:700; color:var(--text-secondary); cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease; text-decoration:none; line-height:1.4;
}
.blog-cat-pill:hover{ border-color:rgba(111,163,240,0.5); color:var(--heading); }
.blog-cat-pill.active{ color:#fff; background:var(--grad); border-color:transparent; }

.blog-meta{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--silver); margin:12px 0 14px; flex-wrap:wrap; }
.blog-cat-badge{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--sky); background:rgba(111,163,240,0.12); padding:4px 10px; border-radius:20px;
}
.blog-dot{ width:3px; height:3px; border-radius:50%; background:var(--silver); flex-shrink:0; }

.blog-featured{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:0 40px; align-items:center;
  background:var(--card-bg); border:1px solid var(--border); border-radius:24px; overflow:hidden; margin-bottom:60px;
}
.blog-featured-img{ aspect-ratio:16/11; overflow:hidden; }
.blog-featured-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-featured-body{ padding:34px 40px 34px 0; }
.blog-featured-body h2{ font-size:1.55rem; color:var(--heading); margin:0 0 12px; line-height:1.3; }
.blog-featured-body p{ font-size:14.5px; color:var(--text-secondary); margin-bottom:18px; }
@media (max-width:860px){
  .blog-featured{ grid-template-columns:1fr; }
  .blog-featured-body{ padding:0 26px 32px; }
  .blog-featured-img{ order:-1; }
}

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.blog-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .25s ease, border-color .25s ease;
}
.blog-card:hover{ transform:translateY(-4px); border-color:rgba(111,163,240,0.4); }
.blog-card-img{ aspect-ratio:16/10; overflow:hidden; }
.blog-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-body{ padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.blog-card-body h3{ font-size:15.5px; color:var(--heading); margin:0 0 10px; line-height:1.42; }
.blog-card-body p{ font-size:12.5px; color:var(--text-secondary); flex:1; margin-bottom:16px; line-height:1.65; }
.blog-card-link{ font-size:12px; font-weight:800; color:var(--sky); }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .blog-grid{ grid-template-columns:1fr; } }

/* ---------- Blog article page ---------- */
.article-hero-img{ max-width:880px; margin:0 auto; border-radius:20px; overflow:hidden; border:1px solid var(--border); aspect-ratio:16/9; }
.article-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-meta{ display:flex; align-items:center; justify-content:center; gap:9px; font-size:12.5px; color:var(--silver); margin:14px 0 4px; flex-wrap:wrap; }
.article-body{ max-width:700px; margin:44px auto 0; font-size:15.5px; line-height:1.85; color:var(--text-primary); }
.article-body h2{ font-size:1.35rem; color:var(--heading); margin:38px 0 14px; line-height:1.35; }
.article-body h3{ font-size:1.08rem; color:var(--heading); margin:26px 0 10px; }
.article-body p{ margin-bottom:16px; }
.article-body ul{ margin:0 0 18px 20px; }
.article-body li{ margin-bottom:8px; }
.article-body strong{ color:var(--heading); }
.article-lead{ max-width:700px; margin:18px auto 0; font-size:17px; color:var(--text-secondary); text-align:center; line-height:1.6; }
.article-cta-box{ max-width:700px; margin:38px auto; padding:28px; border-radius:18px; background:var(--card-bg); border:1px solid var(--border); text-align:center; }
.article-cta-box p{ margin-bottom:16px; font-size:14px; color:var(--text-secondary); }
.article-sources{ max-width:700px; margin:0 auto 44px; padding-top:22px; border-top:1px solid var(--border); }
.article-sources h4{ font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--silver); margin-bottom:10px; }
.article-sources ol{ margin:0; padding-left:18px; }
.article-sources li{ font-size:12.5px; color:var(--text-secondary); margin-bottom:6px; }
.article-sources a{ color:var(--sky); word-break:break-word; }
.article-related{ max-width:920px; margin:0 auto; }
.article-related h4{ text-align:center; font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--silver); margin-bottom:22px; }
@media (max-width:520px){
  .article-body{ font-size:14.5px; }
  .article-lead{ font-size:15.5px; }
}

/* ---------- generic page footer CTA spacing reuse ---------- */
.page-final-cta{ padding-top:80px; }

/* Secondary navigation CTA — "Explore FleetHive →" */
.explore-fh-wrap{ display:flex; justify-content:center; padding:8px 0 6px; }
.explore-fh-wrap.left{ justify-content:flex-start; }
.explore-fh{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:0.02em;
  color:var(--sky); text-decoration:none; padding:6px 2px;
  border-bottom:1px solid transparent; transition:border-color .2s ease, gap .2s ease;
}
.explore-fh:hover{ gap:12px; border-bottom-color:var(--sky); }
.explore-fh .arrow{ transition:transform .2s ease; }
.explore-fh:hover .arrow{ transform:translateX(3px); }

/* ==========================================================
   ORDER / FORM SYSTEM — pricing.html, contact.html, partners.html
   ========================================================== */

/* ---------- Pricing grid: 4-up (Lite / Pro / Prime / Tag Plan) ---------- */
.price-grid.cols-4{ grid-template-columns:repeat(4,1fr); align-items:start; }
.price-grid > .price-card,
.price-grid.cols-4 > .price-card{ min-width:0; }
.price-card.tag-card{ border-style:dashed; border-color:var(--border); }
.price-card.tag-card:hover{ border-color:var(--sky); border-style:solid; }
.price-card .price-note{ font-size:12px; color:var(--silver); margin-top:4px; }
.tag-card-desc{ font-size:12.5px; color:var(--text-secondary); margin:6px 0 0; line-height:1.5; }
.price-save-note{ display:inline-block; font-size:11px; font-weight:700; color:var(--success); background:rgba(16,185,129,0.12); padding:3px 9px; border-radius:10px; margin-top:6px; }

.tag-price-breakdown{ border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-top:14px; }
.tpb-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-top:1px solid var(--border); }
.tpb-row:first-child{ border-top:none; }
.tpb-label{ font-size:13px; font-weight:700; color:var(--heading); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tpb-amt{ font-size:14.5px; font-weight:800; color:var(--heading); text-align:right; white-space:nowrap; }
.tpb-amt span{ display:block; font-size:11px; font-weight:600; color:var(--silver); }
.tpb-tag{ font-size:10px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; padding:3px 8px; border-radius:8px; background:var(--grad); color:#fff; }
.tpb-tag-later{ background:rgba(255,255,255,0.08); color:var(--text-secondary); }
.tpb-now{ background:rgba(59,125,221,0.08); }
.tpb-free-amt{ color:var(--success); }
.tpb-free{ background:rgba(16,185,129,0.06); }
@media (max-width:480px){
  .tpb-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .tpb-amt{ text-align:left; }
}
@media (max-width:900px){
  .price-grid, .price-grid.cols-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .price-grid, .price-grid.cols-4{ grid-template-columns:1fr; }
}

/* Badges must never clip — cards need visible overflow, sheen keeps its own radius */
.price-card{ overflow:visible; margin-top:14px; }
.price-card::before{ border-radius:inherit; }
.price-card .price-badge{ white-space:nowrap; z-index:3; }

/* Active/selected plan — the blue border glides between cards on selection */
.price-card{
  border-color:var(--border);
  transition:transform .25s ease, border-color .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1);
}
.price-card.is-selected{
  border-color:var(--blue) !important;
  box-shadow:0 0 0 1.5px rgba(59,125,221,0.55), 0 24px 60px -24px rgba(59,125,221,0.45);
}
.price-card.is-selected .price-name{ color:var(--sky); }

/* ---------- Vehicle / installation / add-on form blocks (pricing.html order flow) ---------- */
.addon-box{
  border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:10px; background:var(--card-bg);
}
.addon-box h4{ font-size:12.5px; font-weight:800; letter-spacing:.03em; color:var(--heading); margin-bottom:10px; text-transform:uppercase; }
.addon-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--border); }
.addon-row:first-of-type{ border-top:none; }
.addon-row label{ font-size:13.5px; color:var(--text-secondary); cursor:pointer; flex:1; }
.addon-row input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--sky); flex-shrink:0; }
.vehicle-note{ font-size:12px; color:var(--silver); margin-top:6px; }
.warn-box{
  background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.35); color:#f87171;
  border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600; margin-top:10px;
}
.added-plan-card{
  border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--card-bg);
}
.added-plan-card .ap-name{ font-weight:800; color:var(--heading); font-size:13.5px; }
.added-plan-card .ap-sub{ font-size:12px; color:var(--silver); }
.ap-remove{ background:none; border:1px solid var(--border); color:var(--silver); border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer; }
.ap-remove:hover{ color:#f87171; border-color:#f87171; }
.addplan-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.addplan-row select{ flex:1; min-width:180px; }
.ap-detail{
  border:1px solid var(--border); border-radius:14px; padding:18px 18px 14px; margin-top:14px;
  background:var(--card-bg);
}
.ap-detail .form-grid{ margin-bottom:0; }
.ap-detail .choice-row .choice-pill{ font-size:11.5px; padding:8px 12px; }

/* ---------- Plan chip (readonly selected-plan summary) ---------- */
.plan-chip{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:linear-gradient(160deg, rgba(59,125,221,0.14), rgba(19,42,68,0.35));
  border:1px solid var(--blue); border-radius:16px; padding:18px 22px; margin-bottom:28px;
}
.plan-chip .pc-name{ font-size:18px; font-weight:800; color:var(--heading); }
.plan-chip .pc-sub{ font-size:12.5px; color:var(--text-secondary); margin-top:2px; }
.plan-chip .pc-amt{ font-size:20px; font-weight:800; color:var(--sky); white-space:nowrap; }
.plan-chip .pc-change{ font-size:12px; color:var(--sky); text-decoration:underline; cursor:pointer; background:none; border:none; margin-top:4px; }

/* ---------- Form system ---------- */
.form-section{
  position:relative; overflow:hidden;
  background:var(--card-bg); border:1px solid var(--border); border-radius:18px;
  padding:28px 26px; margin-bottom:22px;
}
/* Faint glass sheen across the top of every dashboard/payment card —
   a diagonal highlight rather than a flat tint, so cards read as a
   layered glossy surface instead of plain flat panels. Kept very low
   opacity so it never competes with card content or blocks text
   contrast; ::before sits behind everything else in the card (z-index
   0) while the card's own children stay in normal flow above it. */
.form-section::before{
  /* z-index:-1 (not 0 + reordering children) so this sheen sits behind
     everything already inside the card without touching any existing
     child's own position/z-index — several cards nest their own
     absolutely-positioned controls (e.g. .reco-dismiss) that depend on
     being positioned straight against the card itself. */
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(125deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 32%);
}
.form-section h3{ font-size:15.5px; color:var(--heading); margin-bottom:4px; }
.form-page-title{ font-size:24px; color:var(--heading); font-weight:800; margin-bottom:6px; }
.form-section .form-intro{ font-size:13px; color:var(--text-secondary); margin-bottom:20px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* Payment page "Current Plan" / "Add-on Cart" columns: don't stretch the
   shorter card to match its taller sibling's height (default grid
   align-items:stretch was leaving a large empty gap under the "View
   Plans"/"Try Again" button on desktop, disproportionate to the small
   top margin above the heading). */
#ppBody .form-grid{ align-items:start; }
.form-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
.form-group{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-group.full{ grid-column:1 / -1; }
.form-label{ font-size:12.5px; font-weight:700; color:var(--text-secondary); }
.form-label .opt{ font-weight:500; color:var(--silver); }
.form-input, .form-select, .form-textarea{
  font-family:inherit; font-size:14px; padding:12px 14px; border-radius:11px;
  border:1px solid var(--border); background:var(--card-bg-solid); color:var(--heading);
  transition:border-color .2s ease, box-shadow .2s ease; width:100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus{
  outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(111,163,240,0.18);
}
.form-textarea{ resize:vertical; min-height:96px; }
.form-help{ font-size:12px; color:var(--silver); margin-top:2px; }

/* ---------- Password field show/hide toggle ---------- */
.password-field{ position:relative; }
.password-field .form-input{ padding-right:44px; }
.password-toggle-btn{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  color:var(--text-secondary); border-radius:8px;
}
.password-toggle-btn:hover{ color:var(--heading); background:rgba(111,163,240,0.1); }
.password-toggle-btn svg{ width:19px; height:19px; }
.password-toggle-btn .eye-off-icon{ display:none; }
.password-toggle-btn.is-visible .eye-icon{ display:none; }
.password-toggle-btn.is-visible .eye-off-icon{ display:block; }
.form-check{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--text-secondary); padding:8px 0; }
.form-check input{ margin-top:3px; width:16px; height:16px; accent-color:var(--blue); flex-shrink:0; }
.form-check a{ color:var(--sky); }
@media (max-width:700px){
  .form-grid, .form-grid.cols-3{ grid-template-columns:1fr; }
}

/* Payment page desktop layout: Hive Wallet must start immediately after
   Current Plan, with no gap, regardless of how tall the Add-on Cart in
   the other column is. CSS Grid's row auto-sizing algorithm distributes
   extra height from a row-spanning item (Add-on Cart) across every row
   it spans — including the "plan" row — even when that row's own content
   is short, which is exactly what caused the gap. Flexbox avoids this:
   each column's height is driven only by its own content. */
.pp-payment-grid{ display:flex; align-items:flex-start; gap:16px; }
.pp-payment-grid .pp-col-left,
.pp-payment-grid .pp-col-right{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.pp-payment-grid .pp-col-left{ flex:1 1 0; }
.pp-payment-grid .pp-col-right{ flex:1 1 0; }
@media (max-width:700px){
  .pp-payment-grid{ flex-direction:column; }
}

/* ---------- Segmented choice buttons (tag count, use-of-tag, plan tabs) ---------- */
.choice-row{ display:flex; flex-wrap:wrap; gap:10px; }
.choice-pill{
  padding:10px 16px; border-radius:30px; border:1px solid var(--border); background:var(--card-bg-solid);
  color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; transition:.2s ease;
}
.choice-pill.active{ border-color:var(--blue); color:#fff; background:var(--grad); }

/* ---------- Hive Credits ---------- */
.credit-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:16px 0; }
.credit-chip{
  padding:14px 8px; text-align:center; border-radius:12px; border:1px solid var(--border);
  background:var(--card-bg-solid); color:var(--heading); font-weight:700; font-size:13.5px; cursor:pointer; transition:.2s ease;
}
.credit-chip.active{ border-color:var(--blue); background:linear-gradient(160deg, rgba(59,125,221,0.18), rgba(19,42,68,0.4)); color:var(--sky); }
@media (max-width:640px){ .credit-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Order summary ---------- */
.order-summary{ background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:24px 26px; }
.order-summary h3{ font-size:15.5px; color:var(--heading); margin-bottom:14px; }
.order-line{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--text-secondary); padding:9px 0; border-top:1px solid var(--border); }
.order-line:first-of-type{ border-top:none; }
.order-line span:last-child{ color:var(--heading); font-weight:600; text-align:right; }
.order-total{ display:flex; justify-content:space-between; align-items:center; padding-top:16px; margin-top:6px; border-top:1.5px solid var(--border); }
.order-total .ot-label{ font-size:14px; font-weight:700; color:var(--heading); }
.order-total .ot-amt{ font-size:22px; font-weight:800; color:var(--sky); }
.order-note{ font-size:12px; color:var(--silver); margin-top:14px; line-height:1.6; }

/* ---------- Flexible payment ---------- */
.flexi-box{ border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin-top:16px; background:var(--card-bg-solid); }
.flexi-box .flexi-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.flexi-box .flexi-title{ font-size:13.5px; font-weight:700; color:var(--heading); }
.flexi-box p{ font-size:12px; color:var(--text-secondary); margin-top:8px; line-height:1.6; }

/* ---------- Toggle switch (generic, reused for flexible payment / hive credits yes-no) ---------- */
.fh-switch{ position:relative; width:44px; height:24px; border-radius:20px; background:var(--border); cursor:pointer; flex-shrink:0; transition:.2s ease; }
.fh-switch::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.2s ease; }
.fh-switch.on{ background:var(--grad); }
.fh-switch.on::after{ left:23px; }

/* ---------- Payment method tabs ---------- */
.pay-tabs{ display:flex; gap:10px; margin-bottom:18px; }
.pay-tab{
  flex:1; text-align:center; padding:14px; border-radius:14px; border:1px solid var(--border);
  background:var(--card-bg-solid); color:var(--text-secondary); font-weight:700; font-size:13.5px; cursor:pointer; transition:.2s ease;
}
.pay-tab.active{ border-color:var(--blue); color:#fff; background:var(--grad); }
.pay-panel{ display:none; }
.pay-panel.active{ display:block; }

/* ---------- Bank transfer box ---------- */
.bank-box{ background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:22px; }
.bank-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--border); font-size:14px; }
.bank-row:first-child{ border-top:none; }
.bank-row .br-label{ color:var(--text-secondary); font-size:12.5px; }
.bank-row .br-val{ color:var(--heading); font-weight:700; }
.copy-btn{
  border:1px solid var(--border); background:var(--card-bg-solid); color:var(--sky); font-size:11.5px; font-weight:700;
  padding:6px 12px; border-radius:20px; cursor:pointer; transition:.2s ease;
}
.copy-btn:hover{ border-color:var(--sky); }
.copy-btn.copied{ background:var(--success); color:#fff; border-color:var(--success); }

/* ---------- Result panels (success / pending) ---------- */
.result-panel{ text-align:center; padding:48px 28px; border-radius:20px; border:1px solid var(--border); background:var(--card-bg); max-width:560px; margin:0 auto; }
.result-panel .rp-icon{ font-size:44px; margin-bottom:14px; }
.result-panel h2{ font-size:22px; color:var(--heading); margin-bottom:10px; }
.result-panel p{ font-size:14px; color:var(--text-secondary); margin-bottom:4px; }
.result-panel.pending{ border-color:var(--warning); }
.result-panel .rp-details{ text-align:left; margin-top:22px; background:var(--card-bg-solid); border-radius:14px; padding:18px 20px; }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:28px; align-items:start; }
.contact-info-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:26px; }
.contact-info-card .ci-row{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--border); }
.contact-info-card .ci-row:first-child{ border-top:none; }
.contact-info-card .ci-label{ font-size:11.5px; color:var(--silver); text-transform:uppercase; letter-spacing:.06em; }
.contact-info-card .ci-val{ font-size:14px; color:var(--heading); font-weight:600; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Step indicator (Tag Plan multi-section flow) ---------- */
.form-steps{ display:flex; align-items:center; gap:8px; margin-bottom:26px; flex-wrap:wrap; }
.form-steps .fs-item{ font-size:11.5px; font-weight:700; color:var(--silver); padding:6px 12px; border-radius:20px; border:1px solid var(--border); }
.form-steps .fs-item.done{ color:var(--success); border-color:var(--success); }

/* ---------- Exit-intent newsletter popup ("Stay in the FleetHive Network") ---------- */
.exit-popup-overlay{
  position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center;
  background:rgba(5,14,24,0.62); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
  padding:20px;
}
.exit-popup-overlay.show{ opacity:1; pointer-events:auto; }
.exit-popup{
  position:relative; width:100%; max-width:360px;
  background:var(--card-bg-solid); border:1px solid var(--border); border-radius:20px;
  padding:28px 26px 24px; box-shadow:var(--glow), var(--shadow);
  transform:translateY(16px) scale(0.98); transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.exit-popup-overlay.show .exit-popup{ transform:translateY(0) scale(1); }
.exit-popup-close{
  position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border); background:var(--card-bg); color:var(--text-secondary);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1;
  transition:.2s ease;
}
.exit-popup-close:hover{ color:var(--heading); border-color:var(--sky); }
.exit-popup h4{ font-size:17px; color:var(--heading); margin-bottom:8px; padding-right:20px; }
.exit-popup p{ font-size:13px; color:var(--text-secondary); margin-bottom:18px; }
.exit-popup input{
  width:100%; padding:12px 14px; margin-bottom:10px; border-radius:10px; border:1px solid var(--border);
  background:var(--page-bg); color:var(--heading); font-family:inherit; font-size:13.5px; outline:none;
  transition:border-color .2s ease;
}
.exit-popup input:focus{ border-color:var(--sky); }
.exit-popup .btn{ width:100%; margin-top:4px; padding:13px 20px; font-size:12.5px; }
/* Secondary "I've already subscribed" action — deliberately plain-text so it
   never competes visually with the primary Subscribe button above it. */
.exit-popup-secondary{
  display:block; width:100%; margin-top:12px; padding:4px; background:none; border:none;
  font-family:inherit; font-size:12px; font-weight:600; color:var(--text-secondary);
  text-decoration:underline; text-underline-offset:3px; text-align:center; cursor:pointer;
  transition:color .2s ease;
}
.exit-popup-secondary:hover, .exit-popup-secondary:focus-visible{ color:var(--sky); }
.exit-popup-success{ display:none; text-align:center; padding:8px 0 4px; }
.exit-popup.submitted .exit-popup-form{ display:none; }
.exit-popup.submitted .exit-popup-success{ display:block; }
.exit-popup-success h4{ padding-right:0; }
.exit-popup-dismiss-success{ display:none; text-align:center; padding:18px 0 4px; }
.exit-popup-dismiss-success h4{ padding-right:0; margin-bottom:0; }
.exit-popup.dismissed .exit-popup-form{ display:none; }
.exit-popup.dismissed .exit-popup-dismiss-success{ display:block; }
@media (max-width:480px){ .exit-popup{ padding:24px 20px 20px; } }

/* ==========================================================
   PROMPT 3A ADDITIONS — plan glow indicator, journey gallery,
   plan comparison table, pricing FAQ accordion
   ========================================================== */

/* ---------- Single animated plan-selection indicator ---------- */
.price-grid{ position:relative; }
.plan-glow{
  position:absolute; top:0; left:0; width:0; height:0; opacity:0;
  border-radius:20px; border:1.5px solid var(--blue); pointer-events:none; z-index:0;
  box-shadow:0 0 0 1.5px rgba(59,125,221,0.55), 0 24px 60px -24px rgba(59,125,221,0.45);
  transition:transform .45s cubic-bezier(.4,0,.2,1), width .45s cubic-bezier(.4,0,.2,1),
             height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.price-card{ z-index:1; }

/* ---------- "What to expect" journey gallery (Lite/Pro/Prime only) ---------- */
.journey-wrap{ margin-bottom:28px; }
.journey-wrap h4{
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sky);
  margin-bottom:12px; font-weight:800;
}
.journey-strip{
  display:flex; gap:14px; overflow-x:auto; padding:4px 2px 14px;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.journey-strip::-webkit-scrollbar{ display:none; }
.journey-card{
  flex:0 0 auto; width:104px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center;
}
.journey-icon{
  width:100%; aspect-ratio:1/1; border-radius:14px; border:1px solid var(--border); background:var(--card-bg);
  display:flex; align-items:center; justify-content:center; color:var(--sky);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.journey-icon svg{ width:34%; height:34%; }
.journey-card:hover .journey-icon{ border-color:var(--sky); transform:translateY(-3px); background:rgba(111,163,240,0.1); }
.journey-card span{
  display:block; margin-top:8px; font-size:11px; font-weight:700; color:var(--silver);
  text-align:center; letter-spacing:.02em;
}
@media (max-width:640px){ .journey-card{ width:84px; } }

/* ---------- Plan comparison table ---------- */
.compare-wrap{
  overflow-x:auto; border:1px solid var(--border); border-radius:20px;
  background:var(--card-bg); -webkit-overflow-scrolling:touch;
}
.compare-table{ width:100%; border-collapse:collapse; min-width:680px; }
.compare-table th, .compare-table td{
  padding:15px 18px; text-align:center; font-size:13px; color:var(--text-secondary);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.compare-table th{
  color:var(--heading); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  background:rgba(111,163,240,0.06); font-weight:800;
}
.compare-table td:first-child, .compare-table th:first-child{
  text-align:left; color:var(--text-secondary); font-weight:600; white-space:normal; min-width:220px;
}
.compare-table tr:last-child td{ border-bottom:none; }
.compare-yes{ color:var(--success); font-weight:800; font-size:15px; }
.compare-no{ color:var(--silver); opacity:.4; }
.compare-table td.hl, .compare-table th.hl{ background:rgba(59,125,221,0.08); }

/* ---------- Pricing FAQ accordion ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:820px; margin:0 auto; }
.faq-item{
  border:1px solid var(--border); border-radius:14px; background:var(--card-bg);
  overflow:hidden; transition:border-color .2s ease;
}
.faq-item.open{ border-color:var(--sky); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; cursor:pointer; font-weight:700; color:var(--heading); font-size:14.5px;
}
.faq-q .faq-icon{
  font-size:19px; color:var(--sky); transition:transform .3s ease; flex-shrink:0; line-height:1;
}
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p{ padding:0 20px 18px; font-size:13.5px; color:var(--text-secondary); }

@media (max-width:640px){
  .compare-table th, .compare-table td{ padding:12px 14px; font-size:12.5px; }
}

/* ==========================================================
   CUSTOMER PORTAL — Prompt 2A.1
   Reuses existing tokens (--card-bg, --card-bg-solid, --border,
   --heading, --text-secondary, --sky, --grad) and the existing
   .form-section/.btn/.page-hero system. No independent theme.
   ========================================================== */

.portal-stat-row{ display:flex; flex-wrap:wrap; gap:14px; margin:18px 0; }
.portal-stat{
  position:relative; overflow:hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%),
    var(--card-bg-solid);
  border:1px solid var(--border); border-radius:14px;
  padding:16px 20px; min-width:120px; text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px -16px rgba(8,24,38,0.5);
}
.portal-stat-num{ display:block; font-size:26px; font-weight:800; color:var(--sky); }
.portal-stat-label{ display:block; font-size:12px; color:var(--text-secondary); margin-top:4px; }

/* ===================== DASHBOARD: Quick Access =====================
   Circular icon buttons + label, in place of the old row of wide outline
   pill buttons — same links/targets, just presented as a compact grid. */
.qa-section .qa-head{ margin-bottom:16px; }
.qa-section .qa-head h3{ margin:0; }
/* Flex + justify-content:center (not a grid stretched to full width) so
   4 items (Vehicles/Alerts/Payment/Support) always sit centered as a
   group instead of left-packed with a dangling gap — same on mobile and
   desktop, and still wraps cleanly if a 5th item is ever added. */
.qa-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px 16px;
}
.qa-item{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  color:var(--heading); text-decoration:none; width:76px;
}
.qa-icon{
  position:relative; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  /* No overflow:hidden here — .qa-pulse::after (tap glow, below) blooms
     outward past this circle's own bounds on purpose; clipping it here
     would kill that effect. Backgrounds/box-shadow already respect the
     border-radius on their own without needing overflow hidden. */
  /* Glossy glass bubble: a solid tinted base (so page gradients never
     bleed through unevenly) plus a bright highlight near the top-left
     and a soft inner shadow at the base — the two together read as a
     rounded glass/chrome surface catching light, rather than a flat
     tinted disc. */
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.55), rgba(255,255,255,0) 42%),
    linear-gradient(160deg, rgba(111,163,240,0.4), rgba(27,79,138,0.28) 70%),
    var(--navy-soft);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -8px 12px -4px rgba(0,0,0,0.35),
    0 8px 16px -8px rgba(8,24,38,0.6);
  border:1px solid rgba(255,255,255,0.16); color:var(--sky);
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
[data-theme="light"] .qa-icon{
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.8), rgba(255,255,255,0) 45%),
    linear-gradient(160deg, rgba(111,163,240,0.32), rgba(59,125,221,0.16) 70%),
    rgba(111,163,240,0.14);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.7),
    inset 0 -8px 12px -4px rgba(13,33,55,0.1),
    0 8px 16px -10px rgba(13,33,55,0.3);
  border:1px solid rgba(255,255,255,0.5);
}
.qa-icon svg{ width:22px; height:22px; position:relative; z-index:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.qa-item:hover .qa-icon{ transform:translateY(-2px) scale(1.03); box-shadow:inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -8px 12px -4px rgba(0,0,0,0.3), 0 12px 22px -8px rgba(8,24,38,0.65); }
.qa-label{ font-size:12.5px; font-weight:600; color:var(--text-secondary); }

/* Tap glow (§ voice feedback) — a short blue glow bloom behind the icon
   on click, cleared automatically when the animation finishes. */
.qa-icon.qa-pulse::after{
  content:''; position:absolute; inset:-14px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(111,163,240,0.6), rgba(111,163,240,0) 72%);
  animation:qaGlowPulse .7s ease-out;
  pointer-events:none;
}
@keyframes qaGlowPulse{
  0%{ opacity:0.95; transform:scale(0.55); }
  100%{ opacity:0; transform:scale(1.7); }
}

/* Dashboard section-title icons (Vehicle Controls / Alerts / Fleet
   Analytics) — replaces plain emoji characters with real FleetHive-brand
   SVG icons, same accent color as the Quick Access icons above (var(--sky))
   so the whole dashboard reads as one consistent icon system rather than
   emoji mixed with SVG. */
.fh-h3-icon{ display:inline-flex; vertical-align:-4px; margin-right:8px; color:var(--sky); }
.fh-h3-icon svg{ width:20px; height:20px; }

/* "Welcome back" wave — a real SVG instead of the 👋 emoji, so it always
   renders in FleetHive sky-blue rather than the emoji font's own fixed
   skin-tone color, in both light and dark mode. */
.wave-icon{ display:inline-flex; vertical-align:-6px; color:var(--sky); margin-left:2px; }
.wave-icon svg{ width:28px; height:28px; }
.wave-icon img{ width:28px; height:28px; object-fit:contain; }

.portal-vehicle-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; margin-top:16px;
}
.portal-vehicle-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:20px;
  transition:transform .25s ease, border-color .25s ease;
}
.portal-vehicle-card:hover{ transform:translateY(-3px); border-color:rgba(111,163,240,0.4); }
.portal-vehicle-card:active{ transform:translateY(-1px); }
.portal-vehicle-card h4{ font-size:15.5px; color:var(--heading); margin-bottom:4px; }
.portal-vehicle-plate{ font-size:12.5px; color:var(--sky); font-weight:700; letter-spacing:0.03em; margin-bottom:8px; }
.portal-vehicle-status{ font-size:12px; color:var(--text-secondary); line-height:1.5; }
.portal-vehicle-status-row{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--heading); margin-bottom:6px; }
.portal-vehicle-meta{ font-size:11.5px; color:var(--text-secondary); display:flex; flex-wrap:wrap; gap:8px 10px; margin-bottom:10px; }
.portal-vehicle-meta span{ white-space:nowrap; }
.portal-vehicle-meta.portal-vehicle-location{ margin-top:-6px; font-weight:600; color:var(--sky); }
.portal-vehicle-link{ font-size:12px; font-weight:700; color:var(--sky); text-decoration:none; display:inline-flex; align-items:center; gap:4px; transition:gap .2s ease; }
.portal-vehicle-link:hover{ gap:7px; }
@media (prefers-reduced-motion: reduce){
  .portal-vehicle-card{ transition:none; }
  .portal-vehicle-card:hover{ transform:none; }
}

.portal-empty{
  border:1px dashed var(--border); border-radius:16px; padding:32px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.portal-empty p{ font-size:14px; color:var(--text-secondary); max-width:360px; }

/* Skeleton loading state — plain CSS opacity pulse, no animation library */
.portal-skel-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; }
.portal-skel-card{
  flex:1 1 220px; height:96px; border-radius:16px; background:var(--card-bg-solid);
  border:1px solid var(--border); animation:portalPulse 1.4s ease-in-out infinite;
}
@keyframes portalPulse{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }

/* Subscription panel (Prompt 2B.1 §1/§13) — current plan / status /
   billing facts + recent payment history. Reuses .fi-badge/.fi-dot for
   status (defined in the Fleet Intelligence block below) rather than a
   second badge system. */
.portal-sub-facts{ display:flex; flex-direction:column; gap:10px; margin:14px 0 4px; }
.portal-sub-fact{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:10px; border-bottom:1px solid var(--border); font-size:13px;
}
.portal-sub-fact:last-child{ border-bottom:none; padding-bottom:0; }
.portal-sub-fact span{ color:var(--text-secondary); }
.portal-sub-fact strong{ color:var(--heading); font-size:13.5px; text-align:right; }

.portal-pay-history{ display:flex; flex-direction:column; gap:8px; }
.portal-pay-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid var(--border); border-radius:11px;
  background:var(--card-bg); font-size:12.5px;
}
.portal-pay-row-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.portal-pay-row-plan{ color:var(--heading); font-weight:700; }
.portal-pay-row-date{ color:var(--text-secondary); font-size:11.5px; }
.portal-pay-row-amt{ font-weight:800; color:var(--sky); white-space:nowrap; }
.portal-pay-row-amt.failed{ color:var(--danger); }

/* Subscription "add more to your plan" cart (§subscriptionCard) — a
   compact checklist reusing the same row/border language as
   .portal-pay-row above, just checkbox-driven instead of read-only. */
.portal-addons{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.portal-addon-group-title{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-secondary); opacity:.75; margin:12px 0 6px;
}
.portal-addon-group-title:first-child{ margin-top:0; }
.portal-addon-row{
  display:flex; align-items:center; gap:10px; padding:9px 10px; margin-bottom:6px;
  border:1px solid var(--border); border-radius:10px; background:var(--card-bg);
  font-size:12.5px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.portal-addon-row:hover{ border-color:var(--sky); }
.portal-addon-row input{ width:16px; height:16px; flex-shrink:0; accent-color:var(--sky); }
.portal-addon-name{ flex:1 1 auto; color:var(--heading); }
.portal-addon-price{ color:var(--text-secondary); white-space:nowrap; font-weight:600; }
.portal-addon-total-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:8px; padding-top:10px; border-top:1px solid var(--border);
  font-size:13.5px; font-weight:700; color:var(--heading);
}

/* Flexible Payment Plan (Phase 1 §3) — instalment rows, reusing the same
   card/row visual language as .portal-pay-row rather than a third style. */
.portal-flex-instalments{ display:flex; flex-direction:column; gap:8px; }
.portal-flex-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid var(--border); border-radius:11px;
  background:var(--card-bg); font-size:12.5px;
}
.portal-flex-item-main{ display:flex; align-items:center; gap:10px; min-width:0; }
.portal-flex-mark{
  width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800;
  border:1.5px solid var(--border); color:var(--text-secondary);
}
.portal-flex-item.paid .portal-flex-mark{ background:var(--success); border-color:var(--success); color:#fff; }
.portal-flex-item-label{ color:var(--heading); font-weight:700; }
.portal-flex-item-due{ color:var(--text-secondary); font-size:11.5px; }
.portal-flex-item-amt{ font-weight:800; color:var(--sky); white-space:nowrap; }
.portal-flex-item.paid .portal-flex-item-amt{ color:var(--success); }

/* Alerts (Prompt 2C §7) */
.portal-alert-row{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.portal-alert-row:last-child{ border-bottom:none; padding-bottom:0; }
.portal-alert-row .fi-dot{ margin-top:5px; flex-shrink:0; }
.portal-alert-row-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }

/* Alerts-by-type summary grid — real provider alert names/counts only,
   never a fixed/invented alert list (see _alerts.js summarizeByType). */
.portal-alert-type-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px;
}
.portal-alert-type{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px;
  background:rgba(111,163,240,0.06); border:1px solid var(--border);
}
.portal-alert-type.critical{ background:rgba(240,111,111,0.08); border-color:rgba(240,111,111,0.35); }
.portal-alert-type-icon{ font-size:16px; line-height:1; flex-shrink:0; display:inline-flex; color:var(--blue); }
.portal-alert-type-icon svg{ width:16px; height:16px; }
.portal-alert-type-name{
  font-size:12.5px; color:var(--heading); flex:1 1 auto; min-width:0;
  white-space:normal; word-break:break-word;
}
.portal-alert-type-count{
  font-size:13px; font-weight:700; color:var(--heading); background:var(--card-bg-solid);
  border-radius:999px; min-width:22px; height:22px; padding:0 6px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
@media (max-width:480px){
  .portal-alert-type-grid{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
}
/* Fleet Analytics card is narrower than the full Alerts section below —
   smaller minimum column width so 2 chips still fit side-by-side there. */
.fa-alert-type-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
.fa-alert-type-grid .portal-alert-type{ padding:8px 10px; }
.portal-alert-name{ font-size:13.5px; font-weight:700; color:var(--heading); }
.portal-alert-meta{ font-size:12px; color:var(--text-secondary); }

/* Bree (Prompt 2C §8-§11) */
.bree-panel-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.bree-avatar{
  width:44px; height:44px; border-radius:50%; background:var(--grad); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.bree-log{
  display:flex; flex-direction:column; gap:10px; max-height:280px; overflow-y:auto;
  padding:4px 2px; margin-bottom:14px;
}
.bree-msg{
  max-width:86%; padding:11px 15px; border-radius:14px; font-size:13.5px; line-height:1.55;
  opacity:0; transform:translateY(6px); animation:breeIn .35s ease forwards;
}
@keyframes breeIn{ to{ opacity:1; transform:translateY(0); } }
.bree-msg-bot{ align-self:flex-start; background:var(--card-bg-solid); border:1px solid var(--border); color:var(--text-primary); border-bottom-left-radius:4px; }
.bree-msg-user{ align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:4px; }
.bree-typing{ font-style:italic; color:var(--text-secondary); }
.bree-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
/* Quick Q&A now shares the header Bree panel with the ticket/support flow
   (§ "no separate dashboard card") — a shorter log keeps both sections
   visible without the panel feeling like two stacked apps. */
#breeQuickAsk .bree-log{ max-height:180px; }
.bree-chip{
  font-size:12px; font-weight:600; padding:8px 14px; border-radius:100px; border:1px solid var(--border);
  background:var(--card-bg); color:var(--sky); cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.bree-chip:hover{ background:rgba(111,163,240,0.12); }
.bree-chip:active{ transform:scale(0.97); }
.bree-form{ display:flex; gap:10px; }
.bree-form .form-input{ flex:1; }
@media (prefers-reduced-motion: reduce){
  .bree-msg{ animation:none; opacity:1; transform:none; }
  .bree-chip:active{ transform:none; }
}

/* Recommendations (Prompt 2C §14-§16) */
.reco-card{
  position:relative; border:1px solid var(--border); border-radius:16px; padding:22px 24px;
  background:linear-gradient(135deg, rgba(111,163,240,0.10), rgba(111,163,240,0.02));
}
.reco-dismiss{
  position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; border:none;
  background:var(--card-bg-solid); color:var(--text-secondary); font-size:18px; line-height:1; cursor:pointer;
}
.reco-dismiss:hover{ color:var(--heading); }

/* Premium Analytics (Prompt 2C-2 §17) — plain SVG bars, no chart library.
   Every chart carries role="img" + a full-sentence aria-label, and every
   value is repeated as visible text below it (§29 — never color alone). */
.fa-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:16px; }
.fa-card{ background:var(--card-bg-solid); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.fa-card-title{ font-size:12.5px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:12px; }
.fa-bar{ width:100%; height:14px; border-radius:4px; overflow:hidden; display:block; }
.fa-bar rect{ transition:width .5s ease; }
.fa-legend{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:10px; }
.fa-legend-item{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.fa-legend-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
/* Subscription Countdown card: white title, sky-blue glowing day count.
   White is dark-theme only (a white title would vanish on the light card),
   so light theme keeps the standard heading colour. */
.fa-countdown-card .fa-card-title{ color:#fff; }
[data-theme="light"] .fa-countdown-card .fa-card-title{ color:var(--heading); }
.fa-countdown-days{ color:var(--sky); font-weight:700; text-shadow:0 0 10px rgba(111,163,240,0.55); }
[data-theme="light"] .fa-countdown-days{ text-shadow:0 0 8px rgba(111,163,240,0.35); }
.fa-caption{ font-size:12px; color:var(--text-secondary); margin-top:10px; line-height:1.5; }
.fa-empty{ font-size:12.5px; color:var(--text-secondary); padding:6px 0; }
@media (prefers-reduced-motion: reduce){ .fa-bar rect{ transition:none; } }
@media (max-width:900px){ .fa-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .fa-grid{ grid-template-columns:1fr; } }

/* Trip Activity histogram (§ client-dashboard voice bug report) — a real
   day-by-day bar chart built only from vehicle-trip-history.js's own
   points (odometer deltas, or a point-count fallback when odometer isn't
   reported); never a fabricated shape. Max span is 7 days, matching the
   quick-select options and the custom-range date inputs below. */
.fa-trip-card{ margin-top:16px; }
.fa-trip-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.fa-trip-days-row{ display:flex; gap:6px; flex-wrap:wrap; }
.fa-trip-day-btn{
  background:var(--card-bg); border:1px solid var(--border); border-radius:999px;
  padding:6px 14px; font-size:12.5px; font-weight:600; color:var(--text-secondary);
  cursor:pointer; font-family:inherit; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.fa-trip-day-btn:hover{ border-color:var(--blue); color:var(--heading); }
.fa-trip-day-btn.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.fa-trip-custom-toggle{ background:none; border:none; color:var(--blue); font-weight:600; font-size:12.5px; cursor:pointer; padding:4px 0; font-family:inherit; }
.fa-trip-custom-row{ display:none; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-bottom:14px; }
.fa-trip-custom-row.is-open{ display:flex; }
.fa-trip-field{ display:flex; flex-direction:column; gap:4px; }
.fa-trip-field label{ font-size:11.5px; font-weight:600; color:var(--text-secondary); }
.fa-trip-field input{ font-family:inherit; font-size:13px; }
.fa-hist{ display:flex; align-items:flex-end; gap:10px; height:150px; padding-top:10px; }
.fa-hist-col{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; min-width:0; }
.fa-hist-bar-wrap{ flex:1 1 auto; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.fa-hist-bar{ width:60%; min-width:14px; background:var(--blue); border-radius:5px 5px 0 0; transition:height .4s ease; }
.fa-hist-bar.fa-hist-bar-empty{ background:var(--border); }
.fa-hist-value{ font-size:11px; font-weight:700; color:var(--heading); }
.fa-hist-label{ font-size:11px; color:var(--text-secondary); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .fa-hist-bar{ transition:none; } }
@media (max-width:480px){ .fa-hist{ height:120px; } .fa-hist-label{ font-size:9.5px; } }

@media (max-width:640px){
  .portal-vehicle-grid{ grid-template-columns:1fr; }
  .portal-stat-row{ gap:10px; }
  .portal-stat{ min-width:0; flex:1 1 calc(50% - 10px); padding:14px; }
  .portal-sub-fact{ flex-direction:column; align-items:flex-start; gap:2px; }
  .portal-sub-fact strong{ text-align:left; }
  .portal-pay-row{ flex-wrap:wrap; }
  .bree-msg{ max-width:94%; }
  .bree-form{ flex-direction:column; }
  .bree-form .btn{ width:100%; justify-content:center; }
  /* The icon type-bar (attach icon + input + paper-plane send icon) must
     stay a single row even on small phones — the generic .bree-form
     column-stack above was breaking it into a stacked mess. */
  .bree-form.sup-typebar{ flex-direction:row; }
  .bree-form.sup-typebar .form-input{ width:auto; }
}

/* ==========================================================
   FLEET INTELLIGENCE — Prompt 2A.2
   Reuses the same tokens/system as the Customer Portal section
   above (--card-bg, --card-bg-solid, --border, --heading,
   --text-secondary, --sky, --success, --warning, --danger).
   ========================================================== */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Skip link (Prompt 2C-2 accessibility pass) — visually hidden until
   keyboard-focused, standard pattern, added to the dashboard pages
   (Portal / Fleet Intelligence / Account) which previously had no
   <main> landmark or way to bypass the repeated header nav. */
.skip-link{
  position:absolute; top:-48px; left:12px; z-index:200;
  background:var(--sky); color:#04121f; font-weight:700; font-size:13px;
  padding:10px 16px; border-radius:10px; text-decoration:none; transition:top .2s ease;
}
.skip-link:focus{ top:12px; }
@media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } }

.fi-dash{ padding:32px 0 80px; }
.fi-wrap{ max-width:1400px; }

.fi-topbar{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px;
  margin-bottom:24px;
}
.fi-topbar h1{ font-size:26px; margin:2px 0 0; }
.fi-topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.fi-search{
  display:flex; align-items:center; gap:8px; background:var(--card-bg-solid);
  border:1px solid var(--border); border-radius:12px; padding:9px 14px;
}
.fi-search svg{ width:16px; height:16px; color:var(--text-secondary); flex-shrink:0; }
.fi-search input{
  border:0; background:transparent; outline:none; color:var(--heading); font-size:13.5px; width:180px;
  font-family:inherit;
}
.fi-refresh-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; font-size:12.5px; }
.fi-refresh-btn svg{ width:14px; height:14px; }

/* ---- Layout grid: map | detail ----
   Was list | top(status+location) | map | detail — client asked for
   this page (reached only via the Dashboard's "View Intelligence"
   link, not a nav tab) to be stripped down to just the map + the
   Overview/Device/Trip History detail panel. The vehicle list and the
   duplicate quick-status panel are hidden below rather than removed
   from the DOM, so fleet-intelligence.js's vehicle-select logic (which
   still populates them) keeps working untouched. */
.fi-layout{
  display:grid; gap:18px;
  grid-template-columns:1fr;
  grid-template-areas:"map" "detail";
}
.fi-panel{
  background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:20px;
}
.fi-area-list, .fi-area-top, .fi-topbar-actions .fi-search, .fi-refresh-btn{ display:none; }
.fi-area-map{ grid-area:map; padding:0; overflow:hidden; }
.fi-area-detail{ grid-area:detail; }

.fi-panel-title{
  font-size:14px; color:var(--heading); display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.fi-count-pill{
  font-size:11.5px; font-weight:700; color:var(--sky); background:rgba(111,163,240,0.12);
  border-radius:999px; padding:2px 9px;
}

/* ---- Vehicle list ---- */
.fi-vehicle-list{ display:flex; flex-direction:column; gap:10px; max-height:520px; overflow-y:auto; }
.fi-vehicle-item{
  display:block; width:100%; text-align:left; background:var(--card-bg-solid); border:1px solid var(--border);
  border-radius:14px; padding:13px 15px; cursor:pointer; transition:border-color .2s ease, transform .2s ease;
  font-family:inherit;
}
.fi-vehicle-item:hover{ border-color:rgba(111,163,240,0.4); }
.fi-vehicle-item.is-selected{ border-color:var(--sky); box-shadow:0 0 0 1px var(--sky) inset; }
.fi-vehicle-item:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
.fi-vehicle-item-main{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.fi-vehicle-name{ font-size:14px; font-weight:700; color:var(--heading); }
.fi-vehicle-plate{ font-size:11.5px; font-weight:700; color:var(--sky); letter-spacing:0.02em; white-space:nowrap; }
.fi-vehicle-item-status{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-secondary); margin-bottom:6px; }
.fi-vehicle-item-meta{ display:flex; gap:14px; font-size:11.5px; color:var(--text-secondary); flex-wrap:wrap; }
.fi-muted-note{ font-size:12.5px; color:var(--text-secondary); text-align:center; padding:12px 0 0; }

/* ---- Status dots / badges (color is never the only indicator — always
   paired with text, per §20) ---- */
.fi-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block; }
.fi-dot-success{ background:var(--success); }
.fi-dot-danger{ background:var(--danger); }
.fi-dot-warning{ background:var(--warning); }
.fi-dot-info{ background:var(--sky); }
.fi-dot-muted{ background:var(--text-secondary); opacity:0.6; }

/* Subtle "live" pulse — only ever applied to a dot representing a
   confirmed online status (never a loading/unknown/offline state), so it
   never implies live data that isn't actually live. */
.fi-dot-pulse{ position:relative; }
.fi-dot-pulse::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:var(--success); opacity:0.5; animation:fiDotPulse 2.2s ease-out infinite;
}
@keyframes fiDotPulse{ 0%{ transform:scale(0.6); opacity:0.55; } 100%{ transform:scale(1.9); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .fi-dot-pulse::after{ animation:none; display:none; } }

/* Payment History dashboard shortcut (Plan/Service Expiry/Payment
   History prompt §15/§34-§35) — a small, clearly-identifiable card/icon
   linking off the dashboard to the dedicated Payment History page. */
.portal-ph-shortcut{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease; }
.portal-ph-shortcut:hover{ border-color:var(--sky); transform:translateY(-1px); }
.portal-ph-shortcut-icon{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(111,163,240,0.12); color:var(--sky); }
.portal-ph-shortcut-icon svg{ width:22px; height:22px; }
.portal-ph-shortcut-text{ flex:1 1 auto; min-width:0; }
.portal-ph-shortcut-arrow{ flex:0 0 auto; font-size:18px; color:var(--text-secondary); }

/* Subscription countdown pill (Plan/Service Expiry/Payment History
   prompt §23-§24) — calm, six-band tone using the existing fi-badge
   colour system, never aggressive debt-collection styling. */
.portal-countdown-row{ margin:10px 0 0; }
.portal-countdown-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600; border:1px solid transparent; }

.fi-badge-row{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; }
.fi-badge{
  display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:0.02em;
  padding:5px 11px; border-radius:999px; border:1px solid var(--border);
}
.fi-badge-success{ color:var(--success); background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.3); }
.fi-badge-danger{ color:var(--danger); background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.3); }
.fi-badge-warning{ color:var(--warning); background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.3); }
.fi-badge-info{ color:var(--sky); background:rgba(111,163,240,0.12); border-color:rgba(111,163,240,0.3); }
.fi-badge-muted{ color:var(--text-secondary); background:rgba(148,163,184,0.1); }

/* ---- Top panel (status + location) ---- */
.fi-detail-empty{ display:flex; align-items:center; justify-content:center; min-height:80px; text-align:center; }
.fi-detail-empty p{ font-size:13px; color:var(--text-secondary); max-width:320px; }
.fi-area-top h3{ font-size:16px; margin-bottom:8px; }
.fi-location{ font-size:13px; color:var(--text-secondary); }
.fi-note{ font-size:12.5px; color:var(--text-secondary); margin-top:8px; }
.fi-note-error{ color:var(--danger); }
.fi-unavailable{ color:var(--text-secondary); font-style:italic; }

/* ---- Map ---- */
.fi-map{ width:100%; height:280px; }
.fi-map-marker-wrap{ background:transparent; border:none; }
.fi-map-marker{
  display:block; width:16px; height:16px; border-radius:50%; border:3px solid #fff;
  box-shadow:0 1px 6px rgba(0,0,0,0.5);
}
.fi-map-marker.fi-badge-success, .fi-map-marker.fi-dot-success{ background:var(--success); }
.fi-map-marker.fi-badge-danger, .fi-map-marker.fi-dot-danger{ background:var(--danger); }
.fi-map-marker.fi-dot-info{ background:var(--sky); }
.fi-map-marker.fi-dot-muted{ background:var(--text-secondary); }

/* ---- Detail panel: tabs, fact grid, history ---- */
.fi-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.fi-tab{
  background:transparent; border:0; border-bottom:2px solid transparent; padding:9px 4px; margin-right:14px;
  font-size:12.5px; font-weight:700; color:var(--text-secondary); cursor:pointer; font-family:inherit;
}
.fi-tab:hover{ color:var(--heading); }
.fi-tab.is-active{ color:var(--sky); border-bottom-color:var(--sky); }
.fi-tab:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

.fi-fact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.fi-fact-grid dt{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-secondary); margin-bottom:3px; }
.fi-fact-grid dd{ font-size:14px; color:var(--heading); font-weight:600; }

.fi-history-form{ margin-bottom:14px; }
.fi-history-fields{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.fi-history-fields label{ font-size:11.5px; color:var(--text-secondary); display:flex; flex-direction:column; gap:5px; flex:1 1 160px; }
.fi-history-fields input{
  background:var(--card-bg-solid); border:1px solid var(--border); border-radius:10px; padding:9px 10px;
  color:var(--heading); font-family:inherit; font-size:13px;
}
.fi-history-results{ margin-top:10px; }
.fi-history-list{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; }
.fi-history-list li{
  display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--text-secondary);
  border-bottom:1px solid var(--border); padding-bottom:8px; flex-wrap:wrap;
}
.fi-history-time{ font-weight:700; color:var(--heading); }

/* ---- Responsive: 320 / 360 / 375 / 390 / 414 / 430 all covered by this
   single-column stacked layout; tablet/desktop switch to the 3-column
   grid below. Order matches §18: Vehicle, Status, Location, Map,
   Ignition, Speed, Last update. ---- */
@media (min-width: 900px){
  .fi-layout{
    grid-template-columns:1fr 380px;
    grid-template-rows:auto;
    grid-template-areas:"map detail";
  }
  .fi-area-detail{ max-height:none; }
  .fi-map{ height:100%; min-height:420px; }
}

@media (max-width:480px){
  .fi-topbar h1{ font-size:21px; }
  .fi-search input{ width:120px; }
  .fi-panel{ padding:16px; }
  .fi-fact-grid{ grid-template-columns:1fr 1fr; gap:10px 14px; }
}

@media (prefers-reduced-motion: reduce){
  .fi-vehicle-item{ transition:none; }
}

/* ===================== Admin — Device Management (Prompt 2B.2) ===================== */
.admin-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; margin-top:14px; border:1px solid var(--border); border-radius:14px; }

/* Client Payment page — Renew/Upgrade Subscription side by side (Current
   Plan card). Both buttons show together now instead of one-or-the-other;
   wraps to a stacked column only once there's genuinely not enough room
   for two comfortable tap targets side by side. */
#ppPlanActionsRow{ display:flex; }
@media (max-width:380px){
  #ppPlanActionsRow{ flex-direction:column; }
}
/* .btn is white-space:nowrap globally (correct for a normal full-width
   or inline button), but that's wrong for exactly two of them sitting
   side by side in a narrow flex row: neither can shrink below its own
   full nowrap text width, so the pair forces the row — and the whole
   Current Plan card above it in the flex column — wider than its
   container, overflowing the page horizontally on mobile. Letting these
   two specifically wrap to a second line (min-width:0 so they can
   actually shrink) keeps them side by side at every width instead. */
#ppPlanActionsRow > .btn{
  white-space:normal; text-align:center; min-width:0; flex:1 1 0;
  padding:14px 14px; line-height:1.25;
}
/* Belt-and-suspenders for the Payment page's two-column layout generally:
   a flex item's default min-width is "auto" (content-based), which only
   gets overridden one level deep by the .pp-col-left/.pp-col-right rule
   above — their OWN children (the .form-section cards) are still flex
   items with no min-width override of their own, so any long unbroken
   content inside a card (a nowrap button row, a long value) can still
   force that one card wider than the column, same mechanism as above.
   This closes that off for every card in either column, not just the
   Current Plan one. */
.pp-payment-grid .pp-col-left > *,
.pp-payment-grid .pp-col-right > *{ min-width:0; }
.admin-table{ width:100%; border-collapse:collapse; min-width:640px; font-size:13.5px; }
.admin-table th{
  text-align:left; padding:12px 14px; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-secondary); border-bottom:1px solid var(--border); background:rgba(111,163,240,0.04);
}
.admin-table td{ padding:12px 14px; border-bottom:1px solid var(--border); color:var(--heading); vertical-align:middle; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-row-btn{ padding:7px 14px; font-size:12px; height:32px; line-height:1; box-sizing:border-box; white-space:nowrap; }
.admin-row-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
@media (max-width:640px){
  .admin-row-actions{ gap:8px; }
  .admin-row-btn{ flex:0 0 auto; }
}

.admin-autocomplete{
  position:absolute; top:100%; left:0; right:0; margin-top:4px; z-index:20;
  background:var(--card-bg-solid); border:1px solid var(--border); border-radius:11px;
  box-shadow:var(--shadow); max-height:220px; overflow-y:auto;
}
.admin-autocomplete-item{
  padding:10px 14px; font-size:13.5px; color:var(--heading); cursor:pointer;
  border-bottom:1px solid var(--border);
}
.admin-autocomplete-item:last-child{ border-bottom:none; }
.admin-autocomplete-item:hover{ background:rgba(111,163,240,0.08); }
.admin-autocomplete-empty{ color:var(--text-secondary); cursor:default; }
.admin-autocomplete-empty:hover{ background:none; }

.admin-audit-list{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.admin-audit-row{
  padding:10px 14px; border:1px solid var(--border); border-radius:10px; font-size:13px; color:var(--heading);
  background:rgba(111,163,240,0.03);
}

.admin-modal-overlay{
  position:fixed; inset:0; background:rgba(6,14,24,0.6); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:999; padding:18px;
}
.admin-modal{
  /* Was var(--card-bg), a near-transparent tint (3% opacity) meant for
     large panels that sit on the page background. On a floating modal
     over a blurred backdrop that made the whole dialog read as
     translucent/washed-out, dragging every label's contrast down with it.
     --card-bg-solid is the same token used by other solid floating
     surfaces (price-card, theme-toggle, etc.) and renders a real opaque
     card in both themes. */
  background:var(--card-bg-solid); border:1px solid var(--border); border-radius:18px; padding:26px;
  max-width:440px; width:100%; box-shadow:var(--shadow); max-height:86vh; overflow-y:auto;
}
.admin-modal h4{ font-size:16px; line-height:1.35; color:var(--heading); margin-bottom:14px; word-wrap:break-word; }

/* Labels inside the admin modal were hard to read against the modal
   background (low-contrast --text-secondary on a light card). Give them a
   clear blue accent, a left bar, and breathing room so each field reads as
   its own labeled block instead of blending together. */
.admin-modal .form-label{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--blue); margin:16px 0 6px;
}
.admin-modal .form-label:first-child{ margin-top:0; }
.admin-modal .form-label::before{
  content:''; display:inline-block; width:4px; height:14px; border-radius:2px;
  background:var(--grad);
}
.admin-modal .form-label .opt{ font-weight:500; color:var(--text-secondary); text-transform:none; letter-spacing:normal; }
.admin-modal .form-input,
.admin-modal .form-select{
  background:var(--card-bg-solid); border:1.5px solid var(--border);
  box-shadow:inset 0 1px 3px rgba(13,33,55,0.06);
}
.admin-modal .form-input:focus,
.admin-modal .form-select:focus{ border-color:var(--sky); box-shadow:0 0 0 3px rgba(111,163,240,0.18); }

.admin-modal-actions{ display:flex; gap:10px; margin-top:22px; justify-content:flex-end; }
.admin-modal-actions .btn{ padding:10px 20px; font-size:13px; }
/* The confirm action is the whole point of the modal — give it real
   visual weight instead of a same-size-as-Cancel outline button. */
.admin-modal-actions #modalConfirmBtn{
  flex:2; justify-content:center; padding:15px 26px; font-size:14.5px; font-weight:700;
  background:var(--grad); color:#fff; border:none;
  box-shadow:0 14px 34px -10px rgba(62,123,250,0.55);
}
.admin-modal-actions #modalConfirmBtn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 18px 40px -10px rgba(62,123,250,0.7); }
.admin-modal-actions #modalCancelBtn{ flex:1; justify-content:center; }

/* Confirm Assignment review card (§7): plain, scannable Client/Vehicle/
   Device/IMEI rows shown before any of the editable controls. word-break
   protects against a long opaque provider ID (e.g. "RGzs8A==" is short,
   but IMEIs and some asset names are not) blowing out the 440px modal on
   a 320px screen. */
.admin-review-card{
  border:1px solid var(--border); border-radius:12px; padding:14px 16px;
  background:rgba(111,163,240,0.05); margin-bottom:18px;
}
.admin-review-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--border);
}
.admin-review-row:last-child{ border-bottom:none; }
/* Was var(--text-secondary) — on the now-opaque modal card that read as
   low-contrast, muted grey against navy/white. var(--blue) is the same
   accent already used for the field labels below (.admin-modal
   .form-label) so CLIENT / VEHICLE / DEVICE / IMEI / ASSIGNMENT DETAILS
   stay clearly legible and consistent in both light and dark mode. */
.admin-review-key{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; color:var(--blue); flex-shrink:0; }
.admin-review-val{ font-size:14px; font-weight:600; color:var(--heading); text-align:right; word-break:break-word; }
.admin-review-empty{ font-weight:500; color:var(--silver); }

.admin-modal-subhead{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--blue); margin:4px 0 12px;
}
.form-label-hint{ font-weight:500; color:var(--silver); text-transform:none; letter-spacing:normal; }

.admin-inline-note{ font-size:12.5px; color:var(--text-secondary); margin-bottom:10px; min-height:1em; }
.admin-inline-error{
  font-size:13px; font-weight:600; color:var(--danger); background:rgba(239,68,68,0.08);
  border:1px solid rgba(239,68,68,0.25); border-radius:10px; padding:10px 14px; margin-top:14px;
}
.admin-success-icon{
  width:44px; height:44px; border-radius:50%; background:var(--success); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700;
  margin:0 auto 14px;
}
.admin-success-icon svg{ width:22px; height:22px; }

@media (max-width:640px){
  .admin-modal-actions .btn{ flex:1; justify-content:center; }
  .admin-modal-actions #modalConfirmBtn{ flex:2; }
}

/* Customer Account prompt §13/§16 — Vehicle Controls card on the portal:
   command buttons and their recent-result history rows. Reuses the same
   portal-sub-fact / portal-pay-history / admin-modal-overlay patterns
   already used elsewhere on this page rather than inventing new ones. */
.vc-command-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.vc-command-btn{ padding:11px 18px; font-size:13px; }
.vc-command-btn[disabled]{ opacity:0.55; cursor:not-allowed; }
#notifPrevBtn[disabled], #notifNextBtn[disabled]{ opacity:0.4; cursor:not-allowed; }
.vc-history-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--border); font-size:13px;
}
.vc-history-row:last-child{ border-bottom:none; }
.vc-history-result-successful{ color:var(--success); font-weight:700; }
.vc-history-result-failed{ color:var(--danger); font-weight:700; }
.vc-history-result-sent,
.vc-history-result-queued{ color:var(--blue); font-weight:700; }

/* ==========================================================
   SECTION 2A — Bree visual identity: the liquid circular-flow
   orb. Single shared component (bree-identity.js) used inline
   in the floating launcher, the chat panel header, and the
   dashboard Bree panel. Idle motion is a slow (14s) counter-
   rotation of two soft ribbon arcs plus a gentle drift of the
   centre droplets — never a spinner, never fast, never bouncy.
   ========================================================== */
.bree-orb{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; flex-shrink:0;
}
.bree-orb-halo{
  position:absolute; inset:-20%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--sky), transparent 70%);
  opacity:0.7; animation:bree-halo-breathe 6s ease-in-out infinite;
}
.bree-orb-img{
  position:relative; display:block; width:100%; height:100%; border-radius:50%;
  object-fit:contain; filter:drop-shadow(0 0 10px rgba(111,163,240,0.35));
  transition:filter 0.25s ease;
  /* Gentle always-on clockwise drift while idle — deliberately slow/subtle
     so it doesn't read as "loading". .bree-orb--active below (panel open)
     overrides this with its own faster spin via higher specificity. */
  animation:bree-spin-cw 9s linear infinite;
}

@keyframes bree-spin-cw{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes bree-halo-breathe{ 0%,100%{ opacity:0.55; } 50%{ opacity:0.85; } }
@keyframes bree-ripple{ 0%{ transform:scale(0.82); opacity:0.75; } 100%{ transform:scale(1.4); opacity:0; } }

/* Thinking — halo pulses faster while Bree works on a reply */
.bree-orb[data-bree-state="thinking"] .bree-orb-halo{ animation:bree-halo-breathe 1.4s ease-in-out infinite; }

/* Responding — liquid briefly brightens, then settles */
.bree-orb[data-bree-state="responding"]{ animation:bree-respond-flash 0.9s ease-out 1; }
@keyframes bree-respond-flash{
  0%{ filter:drop-shadow(0 0 10px rgba(111,163,240,0.35)); }
  40%{ filter:drop-shadow(0 0 18px rgba(111,163,240,0.75)); }
  100%{ filter:drop-shadow(0 0 10px rgba(111,163,240,0.35)); }
}

/* Important account update — halo pulses a touch more insistently */
.bree-orb[data-bree-state="update"] .bree-orb-halo{ animation:bree-update-pulse 1.8s ease-in-out infinite; }
@keyframes bree-update-pulse{ 0%,100%{ opacity:0.45; } 50%{ opacity:0.9; } }

/* Human agent handoff — warmer accent (amber, still minority colour) */
.bree-orb[data-bree-state="human"] .bree-orb-halo{ background:radial-gradient(circle, var(--warning), transparent 70%); }

/* Error — small red accent only, no other change */
.bree-orb[data-bree-state="error"] .bree-orb-halo{ background:radial-gradient(circle, var(--danger), transparent 70%); }

/* Section 3B — "keep rotating clockwise with water effect when clicked
   on": toggled by FHBree.setActive(el, true) for as long as a Bree
   panel stays open (independent of the conversational data-bree-state
   above, which can still layer its own halo colour on top). The image
   itself spins continuously; two staggered expanding rings behind it
   read as an outward water ripple. */
.bree-orb--active .bree-orb-img{ animation:bree-spin-cw 2.4s linear infinite; }
.bree-orb--active .bree-orb-halo{
  animation:bree-halo-breathe 1.1s ease-in-out infinite;
  background:radial-gradient(circle, var(--sky), var(--success) 55%, transparent 75%);
}
.bree-orb--active::before,
.bree-orb--active::after{
  content:''; position:absolute; inset:-14%; border-radius:50%; pointer-events:none;
  border:1.5px solid var(--sky); opacity:0; animation:bree-ripple 1.8s ease-out infinite;
}
.bree-orb--active::after{ animation-delay:0.9s; border-color:var(--success); }

@media (prefers-reduced-motion: reduce){
  .bree-orb, .bree-orb *, .bree-orb::before, .bree-orb::after{ animation:none !important; }
}

/* Launcher / panel-head sizing hooks — the orb replaces the old letter
   avatar but keeps the same layout slots. */
.bree-launcher .bree-orb{ width:34px; height:34px; }
.bree-head .bree-orb{ width:34px; height:34px; }
.bree-panel-head .bree-orb{ width:48px; height:48px; }

/* ==========================================================
   SECTION 2A — Login mobility-intelligence background.
   Pure CSS/SVG: route lines, location nodes, moving beacons,
   soft grid, drifting particles. Slow, calm, GPU-cheap
   (transform/opacity only), fully mobile-safe.
   ========================================================== */
.auth-hero-anim{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.auth-hero-anim svg{ position:absolute; inset:0; width:100%; height:100%; }
.auth-hero-anim .ah-grid-line{ stroke:var(--sky); stroke-opacity:0.08; stroke-width:1; }
.auth-hero-anim .ah-route{
  fill:none; stroke:url(#authRouteGrad); stroke-width:1.4; stroke-opacity:0.5;
  stroke-dasharray:6 10; animation:ah-route-flow 26s linear infinite;
}
.auth-hero-anim .ah-route.ah-route-b{ animation-duration:34s; animation-direction:reverse; stroke-opacity:0.35; }
.auth-hero-anim .ah-node{ fill:var(--sky); opacity:0.55; animation:ah-node-pulse 4.5s ease-in-out infinite; }
.auth-hero-anim .ah-node.ah-node-2{ animation-delay:1.1s; }
.auth-hero-anim .ah-node.ah-node-3{ animation-delay:2.3s; }
.auth-hero-anim .ah-node.ah-node-4{ animation-delay:0.6s; }
.auth-hero-anim .ah-beacon{
  fill:none; stroke:var(--blue); stroke-width:1.2; opacity:0;
  transform-origin:center; animation:ah-beacon-pulse 5s ease-out infinite;
}
.auth-hero-anim .ah-beacon.ah-beacon-2{ animation-delay:1.8s; }
.auth-hero-anim .ah-beacon.ah-beacon-3{ animation-delay:3.2s; }
.auth-hero-anim .ah-particle{ fill:var(--ice); opacity:0.4; animation:ah-particle-drift 12s ease-in-out infinite; }
.auth-hero-anim .ah-particle:nth-child(odd){ animation-duration:15s; }

@keyframes ah-route-flow{ to{ stroke-dashoffset:-320; } }
@keyframes ah-node-pulse{ 0%,100%{ opacity:0.35; r:2.4; } 50%{ opacity:0.9; r:3.4; } }
@keyframes ah-beacon-pulse{
  0%{ opacity:0.6; transform:scale(0.3); }
  70%{ opacity:0; transform:scale(1); }
  100%{ opacity:0; transform:scale(1); }
}
@keyframes ah-particle-drift{
  0%,100%{ transform:translate(0,0); opacity:0.25; }
  50%{ transform:translate(6px,-10px); opacity:0.55; }
}
@media (prefers-reduced-motion: reduce){
  .auth-hero-anim *{ animation:none !important; }
  .auth-hero-anim .ah-route{ stroke-dasharray:none; }
}
.page-hero.auth-hero{ position:relative; overflow:hidden; }
.page-hero.auth-hero .wrap{ position:relative; z-index:1; }

/* ==========================================================
   SECTION 2A — Dashboard Plan Slider + Service Slider.
   Horizontally scrollable card rail (native scroll-snap, no
   dependency), reused pattern for both sliders.
   ========================================================== */
.fh-slider-wrap{ position:relative; }
.fh-slider{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:6px 2px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.fh-slider::-webkit-scrollbar{ height:6px; }
.fh-slider::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }
.fh-plan-card, .fh-service-card{
  scroll-snap-align:start; flex:0 0 260px; background:var(--card-bg-solid);
  border:1px solid var(--border); border-radius:16px; padding:20px;
  display:flex; flex-direction:column; gap:10px;
}
.fh-plan-card.is-current{ border-color:var(--sky); box-shadow:var(--glow); }
.fh-plan-card-badge{
  align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--sky); background:rgba(111,163,240,0.12); border-radius:20px; padding:4px 10px;
}
.fh-plan-card h4{ margin:0; font-size:17px; color:var(--heading); }
.fh-plan-card .fh-plan-for{ font-size:12.5px; color:var(--text-secondary); margin:0; }
.fh-plan-card .fh-plan-price{ font-size:22px; font-weight:800; color:var(--heading); margin:4px 0 0; }
.fh-plan-card .fh-plan-price span{ font-size:12px; font-weight:600; color:var(--text-secondary); }
.fh-plan-card ul{ list-style:none; padding:0; margin:4px 0 0; display:flex; flex-direction:column; gap:6px; }
.fh-plan-card li{ font-size:12.5px; color:var(--text-secondary); padding-left:16px; position:relative; }
.fh-plan-card li::before{ content:"✓"; position:absolute; left:0; color:var(--success); font-weight:800; }
.fh-plan-card .btn{ margin-top:auto; width:100%; justify-content:center; }
.fh-service-card .fh-service-icon{
  width:44px; height:44px; border-radius:12px; overflow:hidden; background:var(--navy-soft);
  display:flex; align-items:center; justify-content:center;
}
.fh-service-card .fh-service-icon img{ width:100%; height:100%; object-fit:cover; }
.fh-service-card h4{ margin:2px 0 0; font-size:15.5px; color:var(--heading); }
.fh-service-card p{ margin:0; font-size:12.5px; color:var(--text-secondary); line-height:1.5; }
.fh-service-card .btn{ margin-top:auto; align-self:flex-start; padding:9px 16px; font-size:12px; }
@media (prefers-reduced-motion: reduce){ .fh-slider{ scroll-behavior:auto; } }

/* ==========================================================
   "Get More From FleetHive" — three independent one-at-a-time
   sliders (Plans / Add-ons / Customer Reviews). Each .fh-os is its
   own self-contained unit: a head (label + prev/next), a masked
   viewport clipping a flex track that portal.js translateX()s one
   slide at a time, and a pagination-dot row. Autoplay timing and
   swipe state live entirely in JS (createFhSlider) — this file only
   handles layout/appearance, so the three never visually bleed into
   one another despite sharing the same card styling.
   ========================================================== */
.fh-os{ margin-bottom:22px; }
.fh-os:last-child{ margin-bottom:0; }
.fh-os-head{ display:flex; align-items:center; justify-content:space-between; padding:0 2px 8px; }
.fh-os-label{
  margin:0; font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-secondary);
}
.fh-os-arrows{ display:flex; gap:6px; }
.fh-os-arrow{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--card-bg-solid);
  color:var(--heading); font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background var(--mo-nav,.18s ease), border-color var(--mo-nav,.18s ease);
}
.fh-os-arrow:hover{ background:rgba(111,163,240,0.12); border-color:var(--sky); }
.fh-os-viewport{
  overflow:hidden; border-radius:16px;
}
.fh-os-track{
  display:flex; width:100%; touch-action:pan-y; transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.fh-slide{ flex:0 0 100%; display:flex; justify-content:center; padding:2px 2px 4px; }
.fh-os-dots{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
.fh-os-dot{
  width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:var(--border); transition:background var(--mo-nav,.18s ease), transform var(--mo-nav,.18s ease);
}
.fh-os-dot.is-active{ background:var(--sky); transform:scale(1.3); }
@media (prefers-reduced-motion: reduce){ .fh-os-track{ transition:none; } }

.fh-testimonial-card{
  width:100%; max-width:360px; background:var(--card-bg-solid);
  border:1px solid var(--border); border-radius:16px; padding:20px;
  display:flex; flex-direction:column; gap:12px; justify-content:center;
}
.fh-testimonial-quote{ font-size:13px; font-style:italic; color:var(--text-primary); line-height:1.55; margin:0; }
.fh-testimonial-who{ margin:0; display:flex; flex-direction:column; gap:2px; font-size:12px; }
.fh-testimonial-who strong{ color:var(--heading); font-size:12.5px; }
.fh-testimonial-who span{ color:var(--text-secondary); }

/* Add-on slider cards — clicking anywhere on the card adds that add-on
   straight to the existing Add-on Cart (portal.js activateAddonFromSlider),
   so the whole card behaves as one button; no separate "Add" control. */
.fh-addon-card{
  width:100%; max-width:360px; background:var(--card-bg-solid);
  border:1px solid var(--border); border-radius:16px; padding:20px;
  display:flex; flex-direction:column; gap:8px; text-align:left; cursor:pointer;
  font-family:inherit; transition:border-color var(--mo-nav,.18s ease), box-shadow var(--mo-nav,.18s ease);
}
.fh-addon-card:hover, .fh-addon-card:focus-visible{ border-color:var(--sky); box-shadow:var(--glow); }
.fh-addon-card h4{ margin:0; font-size:15.5px; color:var(--heading); }
.fh-addon-headline{ margin:0; font-size:13px; font-weight:700; color:var(--text-primary); }
.fh-addon-body{ margin:0; font-size:12.5px; color:var(--text-secondary); line-height:1.5; }
.fh-addon-cta{ margin-top:4px; font-size:12.5px; font-weight:700; color:var(--sky); }

/* Brief highlight on the real Add-on Cart row when a slider click ticks
   it, so the customer can see where their selection landed. */
.fh-addon-row-flash{ animation:fh-addon-row-flash 1.2s ease; }
@keyframes fh-addon-row-flash{
  0%{ background:rgba(111,163,240,0.28); }
  100%{ background:transparent; }
}

/* ==========================================================
   SECTION 2B — Intelligent Support Routing (Bree support panel,
   Admin Support Inbox). Reuses .bree-panel-head/.bree-log/.bree-msg-*/
   .bree-chip/.bree-form tokens from the Prompt 2C Bree widget above so
   the two chat surfaces feel like one family — this block only adds
   what's genuinely new: category cards, the live-agent bar, the 30s
   countdown, timeout actions, and the Admin Support Inbox 3-pane layout.
   ========================================================== */

.sup-category-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:16px; margin-bottom:16px; }
.sup-category-card{
  display:flex; flex-direction:row; align-items:center; gap:12px; text-align:left;
  padding:14px 16px; border-radius:14px; border:1px solid var(--border); background:var(--card-bg-solid);
  color:var(--text-primary); cursor:pointer; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.sup-category-card:hover{ border-color:var(--sky); transform:translateY(-1px); }
.sup-category-card:active{ transform:scale(0.98); }
/* Category icons are real SVGs (not emoji) — size/color them explicitly
   in brand sky-blue instead of the leftover font-size rule sized for a
   text glyph, so they read as sleek brand icons rather than a random
   emoji keyboard. */
.sup-category-icon{ display:inline-flex; align-items:center; justify-content:center; color:var(--sky); flex-shrink:0; }
.sup-category-icon svg{ width:20px; height:20px; }
.sup-category-label{ font-size:13px; font-weight:700; color:var(--heading); }
/* "Need something else? Start a support request" — sits collapsed under
   Bree's quick-ask box until tapped, rather than the category grid
   always being visible directly underneath it. */
.sup-start-request-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:12px 4px; margin:6px 0 4px; border:none; border-top:1px solid var(--border);
  background:transparent; color:var(--text-secondary); font-size:13px; font-weight:600;
  cursor:pointer; text-align:left;
}
.sup-start-request-toggle:hover{ color:var(--sky); }
.sup-start-request-toggle svg{ width:16px; height:16px; flex-shrink:0; }
/* Single column with generous, even vertical spacing inside the narrow
   Bree/Support panel (~340-380px) — auto-fill at this width would only
   ever fit one column anyway; being explicit here guarantees a clean,
   evenly-spaced list instead of cards reading as squeezed together. */
@media (max-width:480px){
  .sup-category-grid{ grid-template-columns:1fr; gap:12px; }
}

/* Chat top bar (back link + live-agent countdown) — was entirely
   unstyled, so the back button and countdown just stacked as default
   blocks: the countdown (full-width, centered, 34px) is what actually
   produced the oversized centered timer. Now a real row with the
   countdown pinned top-right and sized like a compact badge. */
.sup-conv-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.sup-countdown-wrap{ text-align:right; padding:0; }
.sup-countdown-num{ font-size:15px; font-weight:800; color:var(--sky); font-variant-numeric:tabular-nums; margin:0; display:inline-block; }

/* Type bar (attach icon + input + send icon) — .bree-form already lays
   these out in a row via flex/gap; this just gives the two icon
   buttons real circular chrome instead of default unstyled <button>
   boxes, and makes Send a filled brand-color icon so it reads as a
   compact icon control next to the input rather than a big pill. */
.sup-typebar{ align-items:center; }
.sup-attach-btn, .sup-send-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  background:var(--card-bg-solid); color:var(--text-secondary); cursor:pointer; padding:0;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.sup-attach-btn svg, .sup-send-btn svg{ width:17px; height:17px; }
.sup-attach-btn:hover{ border-color:var(--sky); color:var(--sky); }
.sup-send-btn{ background:var(--sky); border-color:var(--sky); color:#fff; }
.sup-send-btn:hover{ opacity:.9; }

/* Selected-file chips shown above the type bar once the attach icon has
   been used — plain text preview + remove control, no upload happens yet
   (see support-widget.js/portal.js wireAttach for why). */
.sup-attach-preview{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.sup-attach-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:5px 8px 5px 10px; border-radius:100px; border:1px solid var(--border);
  background:var(--card-bg-solid); color:var(--text-secondary); max-width:180px;
}
.sup-attach-chip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sup-attach-chip button{
  flex-shrink:0; border:none; background:transparent; color:var(--text-secondary);
  cursor:pointer; font-size:14px; line-height:1; padding:0;
}
.sup-attach-chip button:hover{ color:var(--sky); }
.sup-attach-error{ font-size:11.5px; font-weight:600; color:#e5484d; }

/* A sent/received attachment (image thumbnail or file chip), rendered as
   a real downloadable link — see the ATTACH_TAG helpers in
   support-widget.js/portal.js/admin.js. */
.sup-attach-download{
  display:flex; align-items:center; gap:8px; margin-top:6px; padding:6px 10px;
  border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.06);
  color:inherit; text-decoration:none; max-width:220px;
}
.sup-attach-download:hover{ border-color:var(--sky); }
.sup-attach-thumb{ width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.sup-attach-icon{ font-size:18px; flex-shrink:0; }
.sup-attach-label{ font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sup-msg-agent{ align-self:flex-start; background:linear-gradient(135deg, rgba(34,197,139,0.14), rgba(34,197,139,0.05)); border:1px solid rgba(34,197,139,0.35); color:var(--text-primary); border-bottom-left-radius:4px; }
.sup-msg-system{ align-self:center; background:transparent; color:var(--text-secondary); font-size:12px; font-style:italic; padding:4px 10px; }

.sup-live-agent-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 14px; padding:10px 14px; border-radius:12px; background:var(--card-bg-solid); border:1px solid var(--border); }
.sup-live-agent-row span{ font-size:12.5px; color:var(--text-secondary); }
.sup-agent-label{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--heading); }
.sup-agent-label .dot{ width:8px; height:8px; border-radius:50%; background:var(--emerald); flex-shrink:0; }

.sup-countdown-note{ font-size:12.5px; color:var(--text-secondary); }

.sup-timeout-actions{ display:flex; gap:10px; margin-top:14px; }
.sup-timeout-actions .btn{ flex:1; justify-content:center; }
@media (max-width:480px){ .sup-timeout-actions{ flex-direction:column; } }

.sup-history-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.sup-history-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  border-radius:10px; border:1px solid var(--border); background:var(--card-bg-solid); cursor:pointer;
  font-size:12.5px;
}
.sup-history-row:hover{ border-color:var(--sky); }
.sup-history-cat{ font-weight:700; color:var(--heading); }
.sup-history-meta{ color:var(--text-secondary); }
.sup-history-status{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; text-transform:capitalize; }
.sup-history-status.resolved{ background:rgba(34,197,139,0.14); color:var(--emerald-deep); }
.sup-history-status.active, .sup-history-status.waiting, .sup-history-status.new{ background:rgba(111,163,240,0.14); color:var(--sky); }

.sup-back-btn{ background:none; border:none; color:var(--sky); font-size:12.5px; font-weight:600; cursor:pointer; padding:0 0 12px; display:inline-flex; align-items:center; gap:4px; }
.sup-back-btn:hover{ text-decoration:underline; }

/* --------------------- Admin Support Inbox (§11) --------------------- */
.si-layout{ display:flex; gap:0; border:1px solid var(--border); border-radius:16px; overflow:hidden; min-height:520px; }
.si-col{ padding:16px; overflow-y:auto; max-height:720px; }
.si-col--list, .si-col--context{ flex:0 0 280px; width:280px; position:relative; padding-top:40px; }
#siCenterCol{ flex:1 1 auto; min-width:0; border-left:1px solid var(--border); }
.si-col--context{ border-left:1px solid var(--border); }

/* Desktop-only collapse for the list/context columns — see
   siInitColumnCollapse() in admin.js. Collapsing hides the column and
   swaps in a slim expand rail so the center chat pane gets the space. */
.si-col-collapse-btn{
  position:absolute; top:8px; right:8px; width:26px; height:26px; display:flex;
  align-items:center; justify-content:center; border:1px solid var(--border);
  border-radius:8px; background:var(--card-bg); color:var(--text-secondary);
  cursor:pointer; z-index:2; padding:0;
}
.si-col-collapse-btn:hover{ background:rgba(111,163,240,0.12); color:var(--sky); border-color:var(--sky); }
.si-col-collapse-btn svg{ width:14px; height:14px; }
.si-col-collapse-btn--right{ right:auto; left:8px; }
.si-col-expand-rail{
  flex:0 0 22px; width:22px; display:flex; align-items:center; justify-content:center;
  border:none; border-left:1px solid var(--border); border-right:1px solid var(--border);
  background:var(--card-bg); color:var(--text-secondary); cursor:pointer; padding:0;
}
.si-col-expand-rail:hover{ background:rgba(111,163,240,0.12); color:var(--sky); }
.si-col-expand-rail svg{ width:14px; height:14px; }
.si-col-expand-rail--right{ border-left:1px solid var(--border); border-right:none; }
.si-layout.si-list-collapsed .si-col--list{ display:none; }
.si-layout.si-context-collapsed .si-col--context{ display:none; }
.si-layout.si-context-collapsed #siCenterCol{ border-left:1px solid var(--border); }
.si-list-item{
  padding:12px; border-radius:10px; cursor:pointer; margin-bottom:8px; border:1px solid transparent;
  background:var(--card-bg-solid);
}
.si-list-item:hover{ border-color:var(--sky); }
.si-list-item.active{ border-color:var(--sky); background:rgba(111,163,240,0.08); }
.si-list-item-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px; }
.si-list-item-name{ font-size:13px; font-weight:700; color:var(--heading); }
.si-list-item-issue{ font-size:12px; color:var(--text-secondary); margin-bottom:6px; }
.si-list-item-meta{ display:flex; gap:6px; flex-wrap:wrap; }
.si-priority{ font-size:10.5px; font-weight:800; text-transform:uppercase; padding:2px 8px; border-radius:100px; letter-spacing:.02em; }
.si-priority-low{ background:rgba(111,163,240,0.14); color:var(--sky); }
.si-priority-normal{ background:rgba(232,182,70,0.16); color:var(--gold); }
.si-priority-high{ background:rgba(255,138,90,0.16); color:#FF8A5A; }
.si-priority-urgent{ background:rgba(255,90,90,0.18); color:#FF5A5A; }
.si-tabs{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.si-tab{ font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:100px; border:1px solid var(--border); background:var(--card-bg); color:var(--text-secondary); cursor:pointer; }
.si-tab.active{ background:var(--grad); color:#fff; border-color:transparent; }
.si-conv-log{ display:flex; flex-direction:column; gap:10px; min-height:320px; max-height:480px; overflow-y:auto; padding:4px; margin-bottom:12px; }
.si-context-block{ margin-bottom:16px; }
.si-context-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-secondary); margin-bottom:6px; }
.si-context-value{ font-size:13px; color:var(--heading); }
.si-agent-status-row{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.si-agent-status-select{ font-size:12.5px; padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:var(--card-bg-solid); color:var(--text-primary); }
.si-empty{ font-size:12.5px; color:var(--text-secondary); text-align:center; padding:40px 12px; }
@media (max-width:960px){
  .si-layout{ flex-direction:column; }
  .si-col{ max-height:none; }
  .si-col--list, .si-col--context{ flex-basis:auto; width:auto; padding-top:16px; }
  #siCenterCol, .si-col--context{ border-left:none; border-top:1px solid var(--border); }
  /* Collapse is a desktop-only affordance — the stacked mobile layout
     already shows every column full-width, so hide the controls and
     force both columns visible regardless of the remembered state. */
  .si-col-collapse-btn, .si-col-expand-rail{ display:none !important; }
  .si-layout.si-list-collapsed .si-col--list,
  .si-layout.si-context-collapsed .si-col--context{ display:block; }
}

/* --------------------- Activation Journey (Section 2C §1-§16, §31-§35) ---------------------
   Driven entirely by real backend state (customer-subscription /
   customer-installation) — see ActivationJourney in portal.js. Never a
   generic progress bar: a route line that illuminates stage-by-stage,
   with a single pulsing active node. Collapses to a compact "connected"
   card once every activation condition is genuinely satisfied (§16) —
   the big journey is for activation, not a permanent dashboard fixture. */
.aj-card{ position:relative; overflow:hidden; }
.aj-eyebrow{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--sky); margin-bottom:6px; }
.aj-headline{ font-size:20px; font-weight:800; color:var(--heading); margin-bottom:4px; }
.aj-sub{ font-size:13.5px; color:var(--text-secondary); margin-bottom:20px; }

.aj-track{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; padding:8px 4px 4px; margin-bottom:6px; }
.aj-route-bg, .aj-route-fill{
  position:absolute; top:23px; left:5%; right:5%; height:3px; border-radius:3px; z-index:0;
}
.aj-route-bg{ background:var(--border); }
.aj-route-fill{
  background:linear-gradient(90deg, var(--deep), var(--blue), var(--sky));
  width:var(--aj-p,0%); transition:width 1s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 0 12px 1px rgba(111,163,240,0.55);
}
.aj-stage{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; width:14.2%; }
.aj-node{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--navy); border:2px solid var(--border); color:var(--text-secondary); font-size:14px;
  margin-bottom:10px; transition:.3s; flex-shrink:0;
}
.aj-node svg{ width:16px; height:16px; flex-shrink:0; }
.aj-stage.is-done .aj-node{ background:linear-gradient(145deg, var(--blue), var(--deep)); border-color:var(--blue); color:#fff; }
.aj-stage.is-active .aj-node{
  background:linear-gradient(145deg, var(--sky), var(--blue)); border-color:var(--sky); color:#fff;
  box-shadow:0 0 0 4px rgba(111,163,240,0.18);
  animation:ajPulse 2.2s ease-in-out infinite;
}
@keyframes ajPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(111,163,240,0.18); }
  50%{ box-shadow:0 0 0 9px rgba(111,163,240,0.06); }
}
.aj-stage-title{ font-size:11.5px; font-weight:700; color:var(--text-secondary); line-height:1.3; }
.aj-stage.is-done .aj-stage-title, .aj-stage.is-active .aj-stage-title{ color:var(--heading); }
.aj-stage-date{ font-size:10px; color:var(--text-secondary); opacity:.75; margin-top:2px; }

.aj-detail{
  border-top:1px solid var(--border); margin-top:18px; padding-top:18px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
}
.aj-detail-copy{ font-size:13px; color:var(--text-secondary); max-width:52ch; }
.aj-detail-copy strong{ color:var(--heading); }
.aj-cta-row{ display:flex; gap:10px; flex-wrap:wrap; }

.aj-flex{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.aj-flex-cell{ background:var(--card-bg-solid); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.aj-flex-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); margin-bottom:4px; }
.aj-flex-value{ font-size:14px; font-weight:800; color:var(--heading); }
.aj-flex-bar-wrap{ grid-column:1/-1; height:6px; border-radius:6px; background:var(--border); overflow:hidden; margin-top:2px; }
.aj-flex-bar{ height:100%; background:linear-gradient(90deg, var(--deep), var(--sky)); transition:width .8s ease; }

.aj-connected{
  display:flex; align-items:center; gap:14px; padding:6px 4px;
}
.aj-beacon{
  position:relative; width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle, var(--sky) 0%, var(--blue) 60%, transparent 100%);
}
.aj-beacon::after{
  content:''; position:absolute; inset:-8px; border-radius:50%; border:1.5px solid rgba(111,163,240,0.45);
  animation:ajBeacon 2.6s ease-out infinite;
}
@keyframes ajBeacon{
  0%{ transform:scale(0.7); opacity:.9; }
  100%{ transform:scale(1.6); opacity:0; }
}
.aj-connected-copy{ font-size:13.5px; color:var(--text-secondary); }
.aj-connected-copy strong{ display:block; font-size:15px; color:var(--heading); margin-bottom:2px; }

.aj-note{ font-size:11.5px; color:var(--text-secondary); opacity:.8; margin-top:10px; }

@media (max-width:960px){
  .aj-track{ flex-direction:column; align-items:flex-start; gap:0; padding-left:14px; }
  .aj-route-bg, .aj-route-fill{ top:6px; bottom:6px; left:15px; right:auto; width:3px; height:auto; }
  .aj-route-fill{ width:3px; height:var(--aj-p,0%); transition:height 1s cubic-bezier(.2,.7,.2,1); }
  .aj-stage{ flex-direction:row; align-items:center; text-align:left; width:auto; padding:10px 0; gap:12px; }
  .aj-node{ margin-bottom:0; }
  .aj-flex{ grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion:reduce){
  .aj-node, .aj-route-fill, .aj-flex-bar{ transition:none; }
  .aj-stage.is-active .aj-node{ animation:none; }
  .aj-beacon::after{ animation:none; display:none; }
}

/* --------------------- Renewal Reminder banner (trimmed retention scope) ---------------------
   Only shown 3 days before renewal through the 3-day grace window after
   the due date — see RenewalReminder in portal.js. Not a rotating content
   engine: one of 7 fixed, day-accurate messages, computed from the real
   serviceExpiresAt/nextPayment field already loaded for the Subscription
   card. */
.rr-banner{
  position:relative; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 44px 16px 18px; border:1px solid rgba(232,182,70,0.35);
  background:linear-gradient(120deg, rgba(232,182,70,0.08), rgba(19,42,68,0.4));
}
.rr-banner.rr-urgent{ border-color:rgba(255,138,90,0.5); background:linear-gradient(120deg, rgba(255,138,90,0.1), rgba(19,42,68,0.4)); }
.rr-icon{ font-size:20px; flex-shrink:0; }
.rr-copy{ flex:1 1 260px; }
.rr-text{ font-size:13.5px; color:var(--heading); margin:0; }
.rr-cta{ flex-shrink:0; }
@media (max-width:600px){ .rr-banner{ flex-direction:column; align-items:flex-start; } .rr-cta{ width:100%; } }

/* --------------------- Payment History (Section 3A §16-§21) ---------------------
   Desktop: reuses .admin-table/.admin-table-wrap (already defined above)
   inside a .ph-desktop wrapper. Mobile: reuses .portal-pay-history/
   .portal-pay-row (the same card language the Subscription card's mini
   "Recent Payments" list already uses) inside a .ph-mobile wrapper — one
   visual language for "a list of payments" across the whole portal,
   never a third one invented for this section. Only one of the two
   wrappers is ever visible at a time. */
.ph-desktop{ display:block; }
.ph-mobile{ display:none; }
@media (max-width:760px){
  .ph-desktop{ display:none; }
  .ph-mobile{ display:flex; flex-direction:column; gap:8px; }
}
.ph-row-status{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; white-space:nowrap;
}
.ph-row-status.success{ background:rgba(58,201,140,0.14); color:var(--success); }
.ph-row-status.pending{ background:rgba(232,182,70,0.14); color:var(--gold); }
.ph-row-status.overdue,.ph-row-status.failed{ background:rgba(255,90,90,0.14); color:var(--danger); }
.ph-detail-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:6px;
}
@media (max-width:520px){ .ph-detail-grid{ grid-template-columns:1fr; } }
.ph-detail-fact span{ display:block; color:var(--text-secondary); font-size:11.5px; margin-bottom:2px; }
.ph-detail-fact strong{ color:var(--heading); font-size:14px; }
.ph-row-clickable{ cursor:pointer; }
.ph-row-clickable:hover{ background:var(--hover-bg,rgba(255,255,255,0.03)); }

/* ===================== APP SHELL (authenticated FleetHive customer app) =====================
   Header/nav/footer chrome specific to portal.html, account.html and
   payment-history.html — the authenticated app, not the public marketing
   site. Reuses existing header/.nav-links/.mobile-panel/footer rules above
   for layout, sizing and responsiveness; only adds what's new: the
   profile/account menu, the Bree header shortcut, the "external app"
   affordance for More Insights, and a minimal app footer. Nothing here
   touches the public site's own header/footer, which don't use these
   classes. */
.app-nav-links a.app-nav-external{display:inline-flex; align-items:center; gap:5px;}
.app-nav-external-icon{font-size:12px; opacity:.7;}

.app-header-actions{display:flex; align-items:center; gap:8px;}

/* Bree + Notifications header cluster (spec update: Bree beside the
   notification icon, upper-right — never a floating/bottom-corner widget
   or a separate dashboard card). Both are plain circular icon buttons
   using the same base as the profile button so the cluster reads as one
   consistent set, per §33's "one consistent button system". */
.app-bree-btn, .app-notif-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  background:var(--card-bg); color:var(--heading); display:flex; align-items:center;
  justify-content:center; font-size:16px; cursor:pointer; transition:border-color .2s, background .2s;
  position:relative; flex-shrink:0;
}
.app-bree-btn:hover, .app-notif-btn:hover{border-color:var(--sky); background:rgba(111,163,240,0.12);}
.app-bree-btn[aria-expanded="true"]{border-color:var(--sky); background:rgba(111,163,240,0.14);}
.app-bree-btn .bree-orb{ pointer-events:none; }
.app-notif-btn svg{width:18px; height:18px;}

/* Unread indicator — markup ships now so Phase 4's real Notification
   Center only has to toggle this class; no unread count is faked here
   (spec §49 — never invent data), so it stays hidden until real data
   wires it up. */
.app-notif-dot{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--danger, #FF5A5A); border:2px solid var(--card-bg); display:none;
}
.app-notif-btn.has-unread .app-notif-dot{display:block;}

/* Bree's support launcher (#breePortalLauncher/#breePortalPanel, shared
   markup used inline on portal.html and injected by support-widget.js on
   account/payment-history/notifications/fleet-intelligence/partner-portal)
   is back to being a fixed floating pill + panel — Bree's only entry
   point is this launcher again, not a header icon. On the mobile app
   shell it sits just above the bottom tab bar; on desktop (sidebar
   layout) it shifts clear of the sidebar instead.
   76px (not a fresh guess) matches this file's own
   `body.app-shell-has-sidebar > main{ padding-bottom:76px; }` rule a
   few lines up — the codebase's existing, presumably-tuned measurement
   of "clear of the bottom tab bar", reused here for consistency. */
@media (max-width:1023.98px){
  body.app-shell .bree-launcher,
  body.app-shell .bree-peek{ bottom:76px; }
  body.app-shell #breePortalPanel.bree-portal-panel{ bottom:138px; }
  /* WhatsApp float sat at the same 24px used everywhere else on the site,
     which put it directly over the mobile bottom tab bar on account.html /
     payment-history.html / portal-payment.html — the only app-shell pages
     that still show it. Same 76px "clear of the tab bar" measurement as
     Bree, just mirrored to the right side. */
  body.app-shell .wa-float,
  body.app-shell .wa-peek{ bottom:76px; }
}
@media (min-width:1024px){
  body.app-shell-has-sidebar .bree-launcher,
  body.app-shell-has-sidebar .bree-peek{ left:264px; }
  body.app-shell-has-sidebar #breePortalPanel.bree-portal-panel{ left:264px; }
}

.app-profile{position:relative;}
.app-profile-btn{
  display:flex; align-items:center; gap:9px; padding:6px 12px 6px 6px; border-radius:999px;
  border:1px solid var(--border); background:var(--card-bg); cursor:pointer; color:var(--heading);
}
.app-profile-btn:hover{border-color:var(--sky);}
.app-profile-avatar{
  width:26px; height:26px; border-radius:50%; background:var(--sky); color:#fff;
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
  text-transform:uppercase; flex-shrink:0;
}
.app-profile-name{font-size:13px; font-weight:600; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.app-profile-chevron{width:12px; height:12px; opacity:.6; transition:transform .2s;}
.app-profile.open .app-profile-chevron{transform:rotate(180deg);}

.app-profile-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:200px; background:var(--card-bg-solid);
  border:1px solid var(--border); border-radius:14px; padding:8px; box-shadow:0 20px 44px -14px rgba(0,0,0,0.35);
  display:none; flex-direction:column; gap:2px; z-index:120;
}
.app-profile.open .app-profile-menu{display:flex;}
.app-profile-menu a, .app-profile-menu button{
  display:block; width:100%; text-align:left; font-size:13.5px; font-weight:600; color:var(--text-secondary);
  padding:10px 12px; border-radius:9px; background:none; border:none; cursor:pointer; font-family:inherit;
}
.app-profile-menu a:hover, .app-profile-menu button:hover{background:rgba(111,163,240,0.1); color:var(--heading);}
.app-profile-menu .app-menu-divider{height:1px; background:var(--border); margin:6px 2px;}
.app-profile-menu .app-menu-logout{color:var(--red, #EF4444);}

/* Minimal authenticated-app footer (Section 10) — deliberately not the
   full public-site footer/nav; just brand, copyright and a few utility
   links. */
.app-footer{padding:28px 0; border-top:1px solid var(--border); background:transparent; margin-top:0;}
.app-footer .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;}
.app-footer .foot-brand{display:flex; align-items:center; gap:16px;}
.app-footer .logo-text{font-size:14px;}
.app-footer .logo-icon-img{width:20px; height:20px;}
.app-foot-meta{font-size:12.5px; color:var(--text-secondary);}
.app-foot-links{display:flex; gap:18px;}
.app-foot-links a{font-size:12.5px; color:var(--text-secondary);}
.app-foot-links a:hover{color:var(--sky);}

@media (max-width:860px){
  .app-footer .wrap{flex-direction:column; align-items:flex-start;}
}

/* Subtle FleetHive route/map/node visual language for the app shell
   header (§7) — reuses the same .bg-dots texture already used elsewhere
   on the site, just scoped + toned down further so it reads as a faint
   network/route texture behind the chrome rather than a decorative
   background. Scoped to .app-header only — the public marketing header
   is untouched. */
/* No overflow:hidden here (there used to be one) — .app-header-bg is
   `inset:0` (see .bg-pattern), so it never extends past this box and
   never needed clipping. The old overflow:hidden was clipping the
   .app-profile-menu dropdown, which intentionally renders just below
   this box (top:calc(100% + 10px)) — the actual bug behind "profile
   dropdown gets cut off" (Client Portal Redesign §"Header"). */
.app-header .header-inner{position:relative;}
.app-header-bg{opacity:0.35; z-index:0;}
.app-header .navbar{position:relative; z-index:1;}
/* §4: header should read as compact/premium, 72-80px, never taller */
.app-shell .app-header .navbar{ min-height:var(--h-header); padding-top:0; padding-bottom:0; }

/* Authenticated app header: a plain full-width bar rather than the
   marketing site's rounded floating pill. `header{ position:sticky; }`
   (above) already keeps it pinned to the top of the viewport at all
   times, and site.js already toggles `.is-compact` on scroll — this just
   removes the floating-pill chrome for `.app-header` specifically and
   only shows a drop shadow once the page has actually scrolled. */
.app-header,
.app-header.is-compact{ padding:0; }
/* App header chrome: deliberately its own fixed treatment, independent of
   the is-compact/scrolled state (same look pinned or scrolled) — only
   data-theme changes it. Dark mode (default) = navy fill with a soft
   green diagonal sheen. Light mode = white/near-white fill with a soft
   navy-blue diagonal sheen — same construction, brand color swapped. */
.app-header .header-inner,
.app-header.is-compact .header-inner{
  max-width:none; margin:0; border-radius:0; border-width:0;
  /* Belt-and-suspenders alongside the footer fix above — same reported
     "not full width on a real phone, can't reproduce in headless
     Chromium" symptom applies to this header. Pin width explicitly. */
  width:100%; box-sizing:border-box;
  background:
    linear-gradient(115deg, transparent 40%, rgba(111,163,240,0.22) 72%, rgba(27,79,138,0.38) 100%),
    radial-gradient(120% 220% at 100% -40%, rgba(111,163,240,0.28), transparent 60%),
    var(--navy-deep);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none; transition:box-shadow .3s ease, background .3s ease;
}
.app-header.is-compact .header-inner{
  border-radius:0; box-shadow:0 12px 28px -18px rgba(0,0,0,0.55);
}
[data-theme="light"] .app-header .header-inner,
[data-theme="light"] .app-header.is-compact .header-inner{
  background:
    linear-gradient(115deg, transparent 40%, rgba(59,125,221,0.14) 72%, rgba(27,79,138,0.22) 100%),
    radial-gradient(120% 220% at 100% -40%, rgba(59,125,221,0.10), transparent 60%),
    #FFFFFF;
  border-bottom:1px solid rgba(13,33,55,0.08);
}
/* Header icon cluster (theme toggle / notifications / Bree / profile pill).
   Dark theme header (navy) keeps the light translucent-glass treatment so
   icons/text read white against the navy fill. Light theme header (white)
   flips to a dark-navy glass treatment instead, so nothing goes
   invisible on the light fill. */
.app-header .theme-toggle,
.app-header .app-notif-btn,
.app-header .app-bree-btn,
.app-header .app-profile-btn{
  background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.28); color:#FFFFFF;
}
.app-header .theme-toggle:hover,
.app-header .app-notif-btn:hover,
.app-header .app-bree-btn:hover,
.app-header .app-profile-btn:hover{
  background:rgba(255,255,255,0.24); border-color:rgba(255,255,255,0.42);
}
.app-header .app-notif-dot{ border-color:var(--navy-deep); }
.app-header .app-profile-avatar{ background:rgba(255,255,255,0.9); color:var(--navy-deep); }
.app-header .app-profile-name{ color:#FFFFFF; }
.app-header .app-profile-chevron{ color:#FFFFFF; opacity:.85; }
/* Admin header page/context label (Master Prompt §5) — sits between the
   logo and the icon cluster, updated by admin-nav.js's showView() to name
   whichever adm-view is currently open. Scoped to .app-header so it never
   affects anything on the public marketing pages. */
.app-header-context{
  flex:1 1 auto; min-width:0; padding-left:14px; font-weight:700; font-size:15px;
  color:#FFFFFF; opacity:.92; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

[data-theme="light"] .app-header .theme-toggle,
[data-theme="light"] .app-header .app-notif-btn,
[data-theme="light"] .app-header .app-bree-btn,
[data-theme="light"] .app-header .app-profile-btn{
  background:rgba(13,33,55,0.06); border-color:rgba(13,33,55,0.14); color:var(--navy-deep);
}
[data-theme="light"] .app-header .theme-toggle:hover,
[data-theme="light"] .app-header .app-notif-btn:hover,
[data-theme="light"] .app-header .app-bree-btn:hover,
[data-theme="light"] .app-header .app-profile-btn:hover{
  background:rgba(13,33,55,0.10); border-color:rgba(13,33,55,0.22);
}
[data-theme="light"] .app-header .app-notif-dot{ border-color:#FFFFFF; }
[data-theme="light"] .app-header .app-profile-avatar{ background:var(--navy-deep); color:#FFFFFF; }
[data-theme="light"] .app-header .app-profile-name{ color:var(--navy-deep); }
[data-theme="light"] .app-header .app-profile-chevron{ color:var(--navy-deep); opacity:.7; }
[data-theme="light"] .app-header-context{ color:var(--navy-deep); opacity:.85; }

/* Dashboard mockup: header logo sized up slightly (still well inside the
   76px header height) and, from desktop width up, paired with the full
   "FleetHive" wordmark. Mobile keeps the icon-only mark. Two logo-mark
   images (navy / white) sit stacked and CSS shows only the one that's
   readable against the current header fill — dark header (default) shows
   the white mark, light header shows the navy mark. */
.app-header .logo-icon-img{ width:36px; height:36px; }
.app-header.is-compact .logo-icon-img{ width:30px; height:30px; }
.app-header-logo{ gap:11px; }
.app-header .logo-icon-light,
.app-sidebar .logo-icon-light{ display:none; }
.app-header .logo-icon-dark,
.app-sidebar .logo-icon-dark{ display:inline-block; }
[data-theme="light"] .app-header .logo-icon-light,
[data-theme="light"] .app-sidebar .logo-icon-light{ display:inline-block; }
[data-theme="light"] .app-header .logo-icon-dark,
[data-theme="light"] .app-sidebar .logo-icon-dark{ display:none; }
.app-header-logo-text{ display:none; color:#fff; }
[data-theme="light"] .app-header-logo-text{ color:var(--navy-deep); }
@media (min-width:1024px){
  .app-header-logo-text{ display:inline-flex; }
}
.app-shell .app-nav-links a{
  font-size:var(--fs-body); font-weight:600; color:var(--text-secondary);
  transition:color var(--mo-nav);
}
.app-shell .app-nav-links a:hover,
.app-shell .app-nav-links a.active-link{ color:var(--heading); }

/* Partner Portal (§8/§9/§10/§14 — authenticated Partner context, same
   app shell as the Customer Portal). Small additions only — everything
   else reuses .form-section / .portal-sub-facts / .portal-empty /
   .app-* rules already defined above. */
.app-menu-context-label{
  display:block; padding:8px 12px 2px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-secondary); opacity:.7;
}
.pp-status-chip{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700;
  letter-spacing:.02em; text-transform:capitalize; border:1px solid var(--border);
}
.pp-status-chip.is-active{ color:var(--success); border-color:var(--success); background:rgba(16,185,129,0.1); }
.pp-status-chip.is-onboarding{ color:var(--warning); border-color:var(--warning); background:rgba(245,158,11,0.1); }
.pp-status-chip.is-suspended, .pp-status-chip.is-rejected{ color:var(--danger); border-color:var(--danger); background:rgba(239,68,68,0.1); }
.pp-status-chip.is-inactive, .pp-status-chip.is-withdrawn{ color:var(--text-secondary); }
.pp-status-chip.is-pending, .pp-status-chip.is-under_review, .pp-status-chip.is-more_info_required{ color:var(--sky); border-color:var(--sky); background:rgba(111,163,240,0.1); }
.pp-status-chip.is-approved{ color:var(--success); border-color:var(--success); background:rgba(16,185,129,0.1); }
.pp-profile-card{
  border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:16px; background:var(--card-bg);
}
.pp-profile-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px;}
.pp-profile-card-head h3{margin:0;}
.pp-onboarding-steps{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px;}
.pp-onboarding-steps li{font-size:13px; color:var(--text-secondary); padding-left:20px; position:relative;}
.pp-onboarding-steps li::before{content:"○"; position:absolute; left:0; top:0; color:var(--sky);}

/* ---- Multi-vehicle Save/Saved (pricing.html — Selected Plan & Vehicle) ---- */
.btn-success-saved{background:var(--success) !important; color:#fff !important; box-shadow:none !important; cursor:default; opacity:1 !important;}
.btn-success-saved:hover{transform:none !important;}

/* ===================== APP SHELL — PRIMARY NAVIGATION REBUILD =====================
   Client Portal Frontend Transformation: dedicated left sidebar (desktop) +
   fixed bottom navigation (mobile), replacing the old horizontal
   .app-nav-links pill-links inside the header. Exactly three destinations —
   Dashboard / Intelligence / Subscription — per the authenticated app spec.
   The floating header (logo, theme toggle, Bree, notifications, profile)
   is untouched; this only adds the primary nav alongside it. Bree's own
   icon/behavior is not modified here at all. */
.app-sidebar{
  display:none;
  position:fixed; left:0; top:0; bottom:0; width:248px; z-index:600;
  flex-direction:column; gap:4px;
  background:
    linear-gradient(200deg, rgba(34,197,139,0.10) 0%, rgba(34,197,139,0) 45%),
    var(--navy-deep);
  border-right:1px solid rgba(111,163,240,0.14);
  padding:22px 14px;
  transition:width .22s ease, padding .22s ease, background .3s ease;
}
.app-sidebar-top{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 2px 26px 8px;}
.app-sidebar-logo{display:flex; align-items:center; gap:10px; min-width:0;}
.app-sidebar-logo .logo-icon-img{width:26px; height:26px; object-fit:contain; flex-shrink:0;}
.app-sidebar-logo .logo-text{font-weight:800; font-size:16.5px; color:#fff; letter-spacing:-0.01em; white-space:nowrap;}
/* Matches the FleetHive lockup as supplied — single-color wordmark (a
   weight contrast between FLEET/HIVE, not a blue accent on "HIVE"),
   scoped to the app shell only; the public site's blue "hive" accent
   elsewhere is untouched. */
.app-sidebar-logo .logo-text .hive,
.app-header-logo-text .hive{color:inherit;}
.app-sidebar-toggle{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:30px; height:30px; border-radius:8px; border:none; cursor:pointer;
  background:rgba(111,163,240,0.1); color:rgba(220,230,245,0.85);
  transition:background var(--mo-nav,.18s ease), color var(--mo-nav,.18s ease);
}
.app-sidebar-toggle:hover{background:rgba(111,163,240,0.2); color:#fff;}
.app-sidebar-toggle svg{width:17px; height:17px;}
.app-sidebar-nav{display:flex; flex-direction:column; gap:3px;}
.app-sidebar-link{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-btn,10px);
  color:rgba(220,230,245,0.72); font-weight:600; font-size:14.5px; transition:background var(--mo-nav,.18s ease), color var(--mo-nav,.18s ease);
  white-space:nowrap; overflow:hidden;
}
.app-sidebar-link svg{width:19px; height:19px; flex-shrink:0;}
.app-sidebar-link:hover{background:rgba(111,163,240,0.1); color:#fff;}
.app-sidebar-link.active-link{background:rgba(111,163,240,0.16); color:#fff;}
.app-sidebar-link.active-link svg{color:var(--sky);}
.app-sidebar-foot{margin-top:auto; padding:14px 10px 4px; font-size:11.5px; color:rgba(220,230,245,0.4); white-space:nowrap; overflow:hidden;}

/* Light theme: sidebar flips to a white fill with a soft navy-blue touch
   (same construction as the dark sidebar above, brand color swapped),
   with every icon/text/hover color re-tuned so nothing goes invisible
   on the lighter fill. */
[data-theme="light"] .app-sidebar{
  background:
    linear-gradient(200deg, rgba(13,33,55,0.05) 0%, rgba(13,33,55,0) 45%),
    #FFFFFF;
  border-right:1px solid rgba(13,33,55,0.08);
}
[data-theme="light"] .app-sidebar-logo .logo-text{ color:var(--navy-deep); }
[data-theme="light"] .app-sidebar-toggle{ background:rgba(13,33,55,0.06); color:rgba(13,33,55,0.75); }
[data-theme="light"] .app-sidebar-toggle:hover{ background:rgba(13,33,55,0.10); color:var(--navy-deep); }
[data-theme="light"] .app-sidebar-link{ color:rgba(13,33,55,0.65); }
[data-theme="light"] .app-sidebar-link:hover{ background:rgba(13,33,55,0.06); color:var(--navy-deep); }
[data-theme="light"] .app-sidebar-link.active-link{ background:rgba(13,33,55,0.08); color:var(--navy-deep); }
[data-theme="light"] .app-sidebar-link.active-link svg{ color:var(--deep); }
[data-theme="light"] .app-sidebar-foot{ color:rgba(13,33,55,0.4); }

/* Collapsed state — icon-only rail. Logo wordmark and nav labels hide;
   the toggle re-centers under the logo mark so it's always reachable.
   Persisted client-side (localStorage) via site.js. */
.app-sidebar.is-collapsed{ width:76px; padding-left:12px; padding-right:12px; }
.app-sidebar.is-collapsed .app-sidebar-top{ flex-direction:column; gap:10px; padding:6px 0 22px; }
.app-sidebar.is-collapsed .app-sidebar-logo{ justify-content:center; width:100%; }
.app-sidebar.is-collapsed .app-sidebar-logo .logo-text{ display:none; }
.app-sidebar.is-collapsed .app-sidebar-link{ justify-content:center; padding:12px; gap:0; }
.app-sidebar.is-collapsed .app-sidebar-link span{ display:none; }
.app-sidebar.is-collapsed .app-sidebar-foot{ display:none; }
.app-sidebar.is-collapsed .app-sidebar-toggle svg{ transform:rotate(180deg); }

@media (min-width:1024px){
  /* Bug fix: `header` sets width:100% + box-sizing:border-box (see its
     base rule above) so it already occupies the FULL viewport width
     before this margin-left is added — the margin then pushes the
     whole box 76-248px past the right edge instead of just shifting it
     over. That's what was carrying the toggle/notification bell/client
     dropdown off-screen on desktop (right-aligned .nav-actions content
     ends up outside the viewport). `main` has no explicit width so its
     default width:auto already subtracts margin-left correctly — only
     `header` needed the matching width:calc() below. */
  body.app-shell-has-sidebar.is-sidebar-collapsed > header{ margin-left:76px; width:calc(100% - 76px); }
  body.app-shell-has-sidebar.is-sidebar-collapsed > main{ margin-left:76px; }
  body.app-shell-has-sidebar.is-sidebar-collapsed .bree-launcher,
  body.app-shell-has-sidebar.is-sidebar-collapsed .bree-peek{ left:92px; }
  body.app-shell-has-sidebar.is-sidebar-collapsed #breePortalPanel.bree-portal-panel{ left:92px; }
}

/* Pre-paint collapse state — set by a small blocking script in <head>
   (before style.css would otherwise apply the default EXPANDED layout
   for one frame while the page waits for DOMContentLoaded to read
   localStorage and add .is-collapsed/.is-sidebar-collapsed above). That
   one frame was the "icons jump when the sidebar collapses/opens" flash
   reported on reload of a page left collapsed — this mirrors every rule
   above exactly, keyed off html.fh-collapsed-pref instead, so the
   collapsed layout (and therefore the toggle/bell/profile cluster's
   final right-aligned position) is already correct on the very first
   paint. site.js keeps this class in sync on every toggle afterward. */
html.fh-collapsed-pref .app-sidebar{ width:76px; padding-left:12px; padding-right:12px; }
html.fh-collapsed-pref .app-sidebar .app-sidebar-top{ flex-direction:column; gap:10px; padding:6px 0 22px; }
html.fh-collapsed-pref .app-sidebar .app-sidebar-logo{ justify-content:center; width:100%; }
html.fh-collapsed-pref .app-sidebar .app-sidebar-logo .logo-text{ display:none; }
html.fh-collapsed-pref .app-sidebar .app-sidebar-link{ justify-content:center; padding:12px; gap:0; }
html.fh-collapsed-pref .app-sidebar .app-sidebar-link span{ display:none; }
html.fh-collapsed-pref .app-sidebar .app-sidebar-foot{ display:none; }
html.fh-collapsed-pref .app-sidebar .app-sidebar-toggle svg{ transform:rotate(180deg); }
@media (min-width:1024px){
  html.fh-collapsed-pref body.app-shell-has-sidebar > header{ margin-left:76px; width:calc(100% - 76px); }
  html.fh-collapsed-pref body.app-shell-has-sidebar > main{ margin-left:76px; }
  html.fh-collapsed-pref body.app-shell-has-sidebar .bree-launcher,
  html.fh-collapsed-pref body.app-shell-has-sidebar .bree-peek{ left:92px; }
  html.fh-collapsed-pref body.app-shell-has-sidebar #breePortalPanel.bree-portal-panel{ left:92px; }
}

.app-bottom-nav{
  display:flex; position:fixed; left:0; right:0; bottom:0; z-index:600;
  /* Opaque, not a translucent wash — nav-bg-compact's old low alpha let
     the page's own background color/gradient show through at a
     slightly different shade, which read as a visible seam/gap under
     the bar rather than one continuous surface. */
  background:var(--page-bg-deep); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border); justify-content:space-around;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  /* Flush with the bottom/side edges (including the device's safe area)
     but with a slight rounding on the top corners only, per the
     dashboard reference — border-top-*-radius never touches the bottom
     edge, so there's still no sliver of page background visible below
     the bar. */
  border-radius:0; border-top-left-radius:18px; border-top-right-radius:18px;
  margin:0;
}
.app-bottom-nav a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  flex:1 1 0; min-width:44px; min-height:48px; padding:4px 6px; border-radius:12px;
  font-size:10.5px; font-weight:600; color:var(--text-secondary);
}
.app-bottom-nav a svg{width:21px; height:21px;}
.app-bottom-nav a.active-link{color:var(--sky);}

/* Desktop: sidebar replaces top nav-links; header + main content shift
   right to make room. Header keeps its own logo for < 1024px (mobile),
   per the mobile mockup; the sidebar supplies the logo on desktop. */
@media (min-width:1024px){
  /* Same width:100%-plus-margin overflow fixed above for the collapsed
     rail — the expanded 248px-wide sidebar needs the matching width
     reduction on `header` or its right-aligned toggle/bell/dropdown
     cluster goes off-screen again. */
  body.app-shell-has-sidebar > header{ margin-left:248px; width:calc(100% - 248px); }
  body.app-shell-has-sidebar > main{ margin-left:248px; }
  .app-sidebar{ display:flex; }
  .app-bottom-nav{ display:none !important; }
  /* Sidebar already shows the full FleetHive lockup (icon + wordmark)
     at this width — the header's own icon-only logo is a duplicate
     image right next to it and gets hidden here. Mobile (<1024px,
     no sidebar) keeps the header logo untouched.
     Bug fix: hiding .logo left .nav-actions as the ONLY flex child of
     .navbar (justify-content:space-between) — with a single child,
     space-between packs it at flex-start instead of flex-end, so the
     toggle/notification/profile cluster rendered on the LEFT edge of
     the header instead of the right (client portal desktop web view —
     matches the screenshot). Pin it to the right explicitly so it no
     longer depends on having a sibling to space against. */
  body.app-shell-has-sidebar .app-header .logo{ display:none; }
  body.app-shell-has-sidebar .app-header .nav-actions{ margin-left:auto; }
}
@media (max-width:1023.98px){
  body.app-shell-has-sidebar > main{ padding-bottom:76px; }
}

/* ===================== DASHBOARD: Fleet Summary stat chips =====================
   Unified Responsive Portal Redesign — visual polish pass only (colors,
   surfaces, motion). Markup/data untouched: same 4 chips, same IDs, same
   "—" until real data arrives. Restrained per the brief — no neon, no
   heavy gradients, just a slightly layered surface + a calm hover lift. */
.portal-stat-row.portal-stat-row--chips{ gap:12px; }
.portal-stat--chip{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:8px; flex:1 1 150px; min-width:130px;
  border:1px solid var(--border); border-radius:var(--r-card,16px);
  /* Solid base (same as before — no watery unevenness) with a thin
     glossy highlight streaked across the top edge, like light catching
     a glass panel. The streak is a separate ::before layer, not part of
     this background, so it stays crisp instead of blending into a wash. */
  background:var(--card-bg-solid);
  padding:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
  transition:transform var(--mo-nav,180ms ease), box-shadow var(--mo-nav,180ms ease), border-color var(--mo-nav,180ms ease);
}
.portal-stat--chip::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 45%);
}
.portal-stat--chip > *{ position:relative; z-index:1; }
.portal-stat--chip:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), var(--shadow); border-color:rgba(111,163,240,0.35); }
.portal-stat--chip > span{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.portal-stat-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform var(--mo-nav,180ms ease);
}
.portal-stat--chip:hover .portal-stat-icon{ transform:scale(1.06); }
.portal-stat-icon svg{width:18px; height:18px;}
/* Solid tints (not thin washes) — now that they sit on the opaque
   --card-bg-solid chip above, a low-alpha fill would still pick up the
   page's own background gradients through the chip's edges/hover states,
   which read as an uneven "watery" shading inside each round icon. */
.portal-stat--chip.is-total .portal-stat-icon{background:color-mix(in srgb, var(--sky) 22%, var(--card-bg-solid)); color:var(--sky);}
.portal-stat--chip.is-online .portal-stat-icon{background:color-mix(in srgb, var(--success) 22%, var(--card-bg-solid)); color:var(--success);}
.portal-stat--chip.is-offline .portal-stat-icon{background:color-mix(in srgb, var(--danger) 22%, var(--card-bg-solid)); color:var(--danger);}
.portal-stat--chip.is-alerts .portal-stat-icon{background:color-mix(in srgb, var(--warning) 22%, var(--card-bg-solid)); color:var(--warning);}
.portal-stat--chip .portal-stat-num{font-size:22px; text-align:center;}
.portal-stat--chip .portal-stat-label{margin-top:1px; text-align:center;}
@media (max-width:520px){
  .portal-stat--chip{flex:1 1 calc(50% - 8px); padding:12px 14px;}
}

/* ===================== DASHBOARD: Vehicle Location =====================
   Replaces the old Leaflet "Live Fleet Map" widget — no map, no
   coordinates, just the plain-language location string the WLT tracking
   provider already reports per vehicle (see DashLocation in portal.js).
   Keeps the same card shell/shadow treatment the map card used to have. */
.portal-map-card{
  border:1px solid var(--border); border-radius:var(--r-card,16px); background:var(--card-bg);
  padding:16px; margin:18px 0; position:relative; overflow:hidden;
  box-shadow:0 20px 48px -30px rgba(13,33,55,0.35);
}
.portal-map-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 60% at 100% 0%, rgba(111,163,240,0.08), transparent 60%);
}
.portal-map-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; position:relative; z-index:1;}
.portal-map-card-head h3{margin:0;}
.portal-map-card-head a{font-size:12.5px; font-weight:700; color:var(--sky); transition:opacity var(--mo-nav,180ms ease);}
.portal-map-card-head a:hover{opacity:0.75;}
.portal-location-list{ position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; }
.portal-loc-row{
  display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:calc(var(--r-card,16px) - 4px);
  background:rgba(111,163,240,0.06); border:1px solid rgba(111,163,240,0.12);
}
.portal-loc-icon{font-size:18px; line-height:1; flex-shrink:0; margin-top:1px;}
.portal-loc-body{display:flex; flex-direction:column; gap:3px; min-width:0;}
.portal-loc-title{font-size:14px; color:var(--heading);}
.portal-loc-place{font-size:13.5px; color:var(--text-secondary); overflow-wrap:anywhere;}
.portal-loc-updated{font-size:12px; color:var(--text-secondary); opacity:0.8;}
.portal-map-empty{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center; text-align:center;
  border-radius:calc(var(--r-card,16px) - 4px); background:rgba(111,163,240,0.06); color:var(--text-secondary);
  font-size:13.5px; padding:24px 16px;
}
.fi-map-marker-wrap{background:none; border:none;}

/* ===================== SHARED "FH MODAL" POP-UP CHROME =====================
   Used by account.html ("Contact FleetHive" / "Apply to Become a Partner")
   and portal.html ("Contact FleetHive" from the dashboard's Quick Access ->
   Support tile) — same in-app pop-up pattern kept on one shared rule set
   instead of a per-page duplicated <style> block, so the two never drift.
   Deliberately spaced well below the app header (padding-top) so the
   header and the pop-up never overlap or crowd each other. */
.fh-modal-overlay{
  position:fixed; inset:0; z-index:900; display:none; align-items:flex-start; justify-content:center;
  background:rgba(5,14,24,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:96px 20px 40px; overflow-y:auto;
}
.fh-modal-overlay.show{ display:flex; }
.fh-modal{
  position:relative; width:100%; max-width:560px; margin-bottom:40px;
  background:var(--card-bg-solid); border:1px solid var(--border); border-radius:20px;
  padding:30px 28px 26px; box-shadow:var(--glow), var(--shadow);
}
.fh-modal.fh-modal-wide{ max-width:820px; }
.fh-modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border); background:var(--card-bg); color:var(--text-secondary);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1;
  transition:.2s ease;
}
.fh-modal-close:hover{ color:var(--heading); border-color:var(--sky); }
.fh-modal h3{ padding-right:24px; }
.fh-contact-choice{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
@media (max-width:520px){
  .fh-modal-overlay{ padding-top:76px; }
  .fh-contact-choice{ grid-template-columns:1fr; }
}

/* Trip Activity chart — alerts-based SVG with real axes */
.fa-trip-summary{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:12px; }
.fa-trip-summary div{ display:flex; flex-direction:column; }
.fa-trip-summary strong{ font-size:20px; color:var(--heading); line-height:1.1; }
.fa-trip-summary span{ font-size:11.5px; color:var(--text-secondary); }
.fa-trip-svg{ width:100%; overflow-x:auto; }
.fa-trip-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--text-secondary); }
.fa-trip-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; }

/* Settings — email alerts toggle row */
.acct-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 0; }
.acct-toggle-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.acct-toggle-text strong{ color:var(--heading); font-size:14.5px; }
.acct-toggle-text span{ font-size:12.5px; color:var(--text-secondary); }
button.fh-switch{ border:none; padding:0; }
button.fh-switch:disabled{ opacity:.55; cursor:not-allowed; }
button.fh-switch:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

/* Full-bleed header & footer on every app page: always touch left→right,
   regardless of how wide the page content is. Contents are unchanged. */
body.app-shell > header.app-header,
body.app-shell > footer{ width:100%; min-width:100%; max-width:none; align-self:stretch; box-sizing:border-box; }
html, body.app-shell{ max-width:100%; }

/* ===== Header must never leave the screen (sidebar open OR collapsed) =====
   ROOT CAUSE of the toggle / bell / client-name cluster running off the
   right edge on desktop: the rule directly above has HIGHER specificity
   (body.app-shell > header.app-header) than the sidebar rules earlier in
   this file (body.app-shell-has-sidebar > header), so its width:100% +
   min-width:100% silently overrode the width:calc(100% - 248px) fix, and
   the sidebar's margin-left then pushed a 100%-wide header 248px (or 76px
   collapsed) past the right edge. Below, the header is sized by the
   browser instead: width:auto fills exactly what is left after the
   margin, min-width:0 lets it shrink, and the specificity is high enough
   to win in every state (open, collapsed, and the pre-paint
   html.fh-collapsed-pref state). No JS involved, so it cannot drift. */
@media (min-width:1024px){
  body.app-shell.app-shell-has-sidebar > header.app-header{
    margin-left:248px; width:auto; min-width:0; max-width:none;
  }
  body.app-shell.app-shell-has-sidebar.is-sidebar-collapsed > header.app-header,
  html.fh-collapsed-pref body.app-shell.app-shell-has-sidebar > header.app-header{
    margin-left:76px; width:auto; min-width:0; max-width:none;
  }
}
/* The right-hand cluster is pinned to the right edge and can only shrink
   its own name label, never push past the viewport. */
.app-header .app-navbar{ min-width:0; }
.app-header .app-header-actions{ margin-left:auto; flex:0 1 auto; min-width:0; flex-wrap:nowrap; }
.app-header .theme-toggle,
.app-header .app-notif-btn{ flex:0 0 auto; }
.app-header .app-profile{ min-width:0; flex:0 1 auto; }
.app-header .app-profile-btn{ max-width:100%; }
.app-header .app-profile-name{ min-width:0; }
/* Dropdown opens right-aligned under the pill and can never be wider than
   the screen. */
.app-header .app-profile-menu{ right:0; left:auto; max-width:calc(100vw - 24px); }
@media (max-width:560px){
  .app-header .app-header-actions{ gap:6px; }
  .app-header .app-profile-name{ max-width:min(110px, 28vw); }
}

/* ===== Bree chat panel layout (header / scrolling conversation / pinned type bar) =====
   Panel is a flex column with no outer padding so the type bar (input +
   attach + send) sits flush against the bottom edge with no gap, the
   conversation gets all the remaining height, and the quick questions can
   be hidden to free up even more room. */
.bree-portal-panel{ padding:0; overflow:hidden; }
.bree-portal-panel.open{ display:flex; flex-direction:column; }
.bree-portal-panel .bree-panel-head{
  flex:0 0 auto; margin:0; padding:14px 14px 12px 16px; gap:12px; align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.bree-portal-panel .bree-panel-head #supOrb{ flex:0 0 auto; display:flex; align-items:center; }
.bree-portal-panel .bree-panel-head #supOrb .bree-orb{ width:44px; height:44px; }
.bree-portal-panel .bree-panel-head h3{ margin:0 0 2px; font-size:15px; font-weight:800; color:#FFFFFF; line-height:1.25; }
.bree-portal-panel .bree-panel-head .form-intro{ margin:0; font-size:12px; line-height:1.4; color:#FFFFFF; opacity:.92; }
.bree-portal-panel .bree-panel-head .bree-close{ align-self:flex-start; color:#FFFFFF; opacity:.8; }

#breeQuickAsk{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
#breeQuickAsk .bree-log{ flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; margin:0; padding:12px 16px; -webkit-overflow-scrolling:touch; }
.bree-chips-bar{ flex:0 0 auto; display:flex; justify-content:flex-end; padding:0 12px; }
.bree-chips-toggle{
  display:inline-flex; align-items:center; gap:6px; background:transparent; border:none; cursor:pointer;
  color:var(--sky); font:600 11.5px/1 'Plus Jakarta Sans',sans-serif; padding:8px 4px;
}
.bree-chips-toggle svg{ width:14px; height:14px; transition:transform .2s ease; }
.bree-chips-toggle.is-closed svg{ transform:rotate(180deg); }
#breeQuickAsk .bree-chips{ flex:0 0 auto; margin:0; padding:0 16px 10px; max-height:112px; overflow-y:auto; gap:6px; }
#breeQuickAsk .bree-chips.is-hidden{ display:none; }
#breeQuickAsk .sup-attach-preview{ flex:0 0 auto; margin:0; padding:6px 16px 0; }
#breeQuickAsk .bree-form.sup-typebar{
  flex:0 0 auto; margin:0; padding:10px 14px; gap:8px;
  background:var(--navy-deep); border-top:1px solid rgba(255,255,255,0.10);
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}
#breeQuickAsk .bree-form.sup-typebar .form-input{ min-width:0; }

/* Support-flow screens injected on other pages sit inside the same padding-free panel */
.bree-portal-panel #supEntry,
.bree-portal-panel #supConversation{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 16px 16px; }

@media (max-width:1023.98px){
  .bree-portal-panel{ height:calc(100dvh - 240px); max-height:calc(100dvh - 240px); min-height:340px; }
}

/* ---- Bree support topics: clear vertical spacing (Complaints, Enquiries, ...) ----
   Forced with higher specificity so no earlier panel rule can collapse the gap.
   Full-width cards, 14px between each, 6px extra breathing room around the list. */
.bree-portal-panel #supEntry .sup-category-grid,
#supEntry .sup-category-grid,
.sup-category-grid{
  display:flex !important; flex-direction:column !important; gap:14px !important;
  margin:6px 0 18px !important;
}
.bree-portal-panel #supEntry .sup-category-card,
#supEntry .sup-category-card,
.sup-category-grid .sup-category-card{
  width:100% !important; margin:0 !important; padding:14px 16px !important; min-height:52px;
}

/* ===== Working notification bell (bell.js) ===== */
.app-notif-count{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--danger,#FF5A5A); color:#fff; font-size:10.5px; font-weight:700;
  line-height:18px; text-align:center; border:2px solid var(--card-bg); box-sizing:content-box; display:none;
}
.app-notif-btn.has-count .app-notif-count{ display:block; }
.app-notif-btn.has-count .app-notif-dot{ display:none !important; }

.fh-bell-panel{
  position:fixed; z-index:9000; max-height:min(72vh,560px); display:flex; flex-direction:column;
  background:var(--card-bg); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.28); overflow:hidden; color:var(--heading);
}
.fh-bell-panel[hidden]{ display:none; }
.fh-bell-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); font-size:14px; }
.fh-bell-link{ background:none; border:0; color:var(--sky); font-size:12.5px; font-weight:600; cursor:pointer; padding:4px 0; }
.fh-bell-list{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.fh-bell-item{ display:flex; gap:12px; align-items:flex-start; padding:13px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; }
.fh-bell-item:hover, .fh-bell-item:focus-visible{ background:rgba(111,163,240,0.10); outline:none; }
.fh-bell-item.is-unread{ background:rgba(111,163,240,0.07); }
.fh-bell-ico{ flex:0 0 34px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(111,163,240,0.14); color:var(--sky); }
.fh-bell-ico svg{ width:17px; height:17px; }
.fh-bell-ico-billing{ background:rgba(255,176,32,0.16); color:#E59A00; }
.fh-bell-ico-message{ background:rgba(60,201,120,0.16); color:#22A861; }
.fh-bell-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.fh-bell-cat{ font-size:11.5px; color:var(--text-secondary); }
.fh-bell-title{ font-size:13.5px; line-height:1.35; font-weight:600; color:var(--heading); word-break:break-word; }
.fh-bell-item:not(.is-unread) .fh-bell-title{ font-weight:500; }
.fh-bell-body{ font-size:13px; line-height:1.5; color:var(--text-secondary); white-space:pre-wrap; word-break:break-word; margin-top:2px; }
.fh-bell-cta{ align-self:flex-start; margin-top:8px; background:var(--sky); color:#fff; border:0; border-radius:8px; padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
.fh-bell-unread{ flex:0 0 9px; width:9px; height:9px; border-radius:50%; background:var(--sky); margin-top:6px; }
.fh-bell-empty{ padding:34px 20px; text-align:center; font-size:14px; }
.fh-bell-empty span{ display:block; margin-top:6px; font-size:12.5px; color:var(--text-secondary); }
.fh-bell-foot{ display:block; text-align:center; padding:12px; font-size:13px; font-weight:600; color:var(--sky); border-top:1px solid var(--border); text-decoration:none; }
.fh-bell-foot:hover{ background:rgba(111,163,240,0.10); }

/* ===== Notifications page: filters + rows ===== */
.notif-tab{ border:1px solid var(--border); background:var(--card-bg); color:var(--text-secondary); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; }
.notif-tab.is-active{ background:var(--sky); border-color:var(--sky); color:#fff; }
.notif-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-4); padding:var(--sp-5) var(--sp-6); border:1px solid var(--border); border-radius:var(--r-card); background:var(--card-bg); margin-bottom:var(--sp-3); cursor:pointer; }
.notif-row.is-unread{ border-color:var(--sky); background:rgba(111,163,240,0.07); }
.notif-row:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

/* ===== Adaptive Bree quick questions ===== */
.bree-chips-bar{ align-items:center; justify-content:space-between; }
.bree-chips-topic{ font:600 11.5px/1 'Plus Jakarta Sans',sans-serif; color:var(--text-secondary); padding-left:4px; }
.bree-chip-in{ opacity:0; transform:translateY(6px); animation:breeChipIn .32s ease forwards; }
@keyframes breeChipIn{ to{ opacity:1; transform:translateY(0); } }
#breeQuickAsk .bree-chips.is-compact{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; max-height:none; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#breeQuickAsk .bree-chips.is-compact::-webkit-scrollbar{ display:none; }
#breeQuickAsk .bree-chips.is-compact .bree-chip{ flex:0 0 auto; white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .bree-chip-in{ animation:none; opacity:1; transform:none; } }

/* ===== Solid (never see-through) notification dropdown + readable Bree agent button ===== */
.fh-bell-panel{
  background:#132A44 !important;           /* dark mode: solid navy */
  z-index:100000 !important;               /* always above the page */
  opacity:1 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
[data-theme="light"] .fh-bell-panel{ background:#FFFFFF !important; }
.fh-bell-panel .fh-bell-list, .fh-bell-panel .fh-bell-head, .fh-bell-panel .fh-bell-foot{ background:inherit; }
.fh-bell-panel .fh-bell-title, .fh-bell-panel .fh-bell-head strong{ color:#FFFFFF; }
[data-theme="light"] .fh-bell-panel .fh-bell-title, [data-theme="light"] .fh-bell-panel .fh-bell-head strong{ color:#0D2137; }
.fh-bell-panel .fh-bell-cat, .fh-bell-panel .fh-bell-body{ color:#B7C4DA; }
[data-theme="light"] .fh-bell-panel .fh-bell-cat, [data-theme="light"] .fh-bell-panel .fh-bell-body{ color:#4B5C73; }

/* "Talk to a support agent" — full-strength text that follows the theme */
#breeAgentBtn, #breeAgentBtn:hover{
  color:#FFFFFF !important; opacity:1 !important; background:#1B4F8A; border-color:var(--sky);
  text-shadow:none; -webkit-text-fill-color:#FFFFFF;
}
[data-theme="light"] #breeAgentBtn, [data-theme="light"] #breeAgentBtn:hover{
  color:#0D2137 !important; -webkit-text-fill-color:#0D2137; background:#E8F1FC; border-color:#3B7DDD;
}
#breeQuickAsk .bree-msg-actions .btn{ opacity:1 !important; }