/* =====================================================================
   METROLOGIC LAB – STYLE SHEET
   Part 1 is how the page looks, part 2 is everything that moves by itself.
   Section numbers match the ===== comments in index.html.

   PART 1 – LOOKS
     QUICK SETTINGS  colours, font, sizes, shadows
     0.  Base
     1.  Shared pieces (labels, section headings, buttons, icons)
     2.  Header and menu
     3.  Hero (first screen) and "Choose your pressure point"
     4.  Smartpack247 (app demo, operations, comparison, hardware)
     5.  Rental (with "Buy fuel cells and cartridges")
     6.  Applications
     7.  What we combine
     8.  Field services
     9.  Fuel cells (EFOY) and fuel cartridges
     10. Call-to-action band
     11. Contact
     12. Footer
     13. Floating "Get in touch" button
     14. EFOY highlight
     15. Phone adjustments

   PART 2 – ANIMATIONS (A1–A10, same page order)
   ===================================================================== */

/* ---------------------------------------------------------------------
   QUICK SETTINGS
   Change a value here and it updates everywhere on the page.
   --------------------------------------------------------------------- */
:root {
  /* Main colour (Metlab red) */
  --red: #e5251e; /* buttons, highlights */
  --red-600: #c81d17; /* buttons on hover */
  --red-50: #fef1f0; /* very light red backgrounds */

  /* Second colour (green, also the EFOY partner colour) */
  --green: #5aa02c;
  --green-ink: #3a8020; /* green text (darker, easier to read) */
  --green-600: #4b8a24;
  --green-50: #f1f7ec; /* very light green backgrounds */

  /* Text and neutral colours */
  --ink: #16191d; /* headings and main text */
  --steel: #535b66; /* paragraph text */
  --muted: #7d8591; /* small, quiet text */
  --mist: #f6f7f9; /* light grey backgrounds */
  --line: #e7e9ee; /* thin borders */
  --line-2: #d6dae1; /* slightly darker borders */
  --warn: #e39b1b; /* "needs attention" orange in the dashboard */

  /* Fonts */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* numbers and data */

  /* Layout */
  --container: 1240px; /* maximum content width */
  --header-h: 76px; /* height of the top bar */

  /* Shadows */
  --shadow:
    0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -14px rgba(16, 24, 40, 0.16); /* cards */
  --shadow-lg:
    0 2px 4px rgba(16, 24, 40, 0.04), 0 28px 60px -24px rgba(16, 24, 40, 0.24); /* big panels */

  /* Motion curve used by animations and hovers */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   0. BASE
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
p {
  margin: 0;
}
button {
  font: inherit;
}
.container {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}
main section[id] {
  scroll-margin-top: calc(var(--header-h) - 1px);
}
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  background: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.skip:focus {
  left: 16px;
}
.ic-sprite {
  display: none;
}
.i {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.r {
  color: var(--red);
}
.g {
  color: var(--green-ink);
} /* red / green words inside headings */

/* ---------------------------------------------------------------------
   1. SHARED PIECES
   --------------------------------------------------------------------- */
/* Big headings */
.display {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Small label above headings ("Our platform", "Applications"…) */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  background: var(--red-50);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--red);
}
.kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.kicker.gr {
  background: var(--green-50);
  color: var(--green-ink);
}

/* Sections */
.sec {
  padding: clamp(80px, 9vw, 120px) 0;
}
.sec-tint {
  background: linear-gradient(180deg, #f5f8f3, #fff 70%);
}
.sec-mist {
  background: var(--mist);
}
.sec h2 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
  max-width: 20ch;
}
.sec-lead {
  margin-top: 18px;
  max-width: 56ch;
  font-size: clamp(1.06rem, 1rem + 0.25vw, 1.16rem);
  color: var(--steel);
}
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 52px;
}
.sec-head .sec-lead {
  margin: 0;
}
@media (max-width: 860px) {
  .sec-head {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 36px;
  }
  .sec-head .sec-lead {
    margin-top: 16px;
  }
}

.policy-main {
  min-height: calc(100vh - var(--header-h));
  padding: calc(var(--header-h) + clamp(40px, 7vw, 84px)) 0
    clamp(64px, 8vw, 104px);
  background: linear-gradient(180deg, var(--mist), #fff 360px);
}
.policy-sheet {
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
.policy-title {
  margin-top: 16px;
}
.policy-home-link {
  margin-left: auto;
}
.policy-updated {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
}
.policy-copy {
  margin-top: 40px;
  color: var(--steel);
}
.policy-copy h2 {
  margin: 36px 0 12px;
  color: var(--ink);
  font-size: clamp(1.35rem, 1.15rem + 0.55vw, 1.75rem);
}
.policy-copy p {
  margin-bottom: 18px;
}
.policy-copy ul {
  margin: 0 0 20px;
  padding-left: 1.4em;
}
.policy-copy li + li {
  margin-top: 6px;
}
.policy-copy a {
  color: var(--red-600);
  overflow-wrap: anywhere;
}
.policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.policy-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.policy-links a:hover {
  color: var(--red-600);
}
@media (max-width: 640px) {
  .policy-main {
    padding-top: calc(var(--header-h) + 32px);
  }
  .policy-links {
    width: 100%;
  }
}

/* Icon tiles */
.ic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--red-50);
  color: var(--red);
  flex: none;
}
.ic.gr {
  background: var(--green-50);
  color: var(--green-ink);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 15.5px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s,
    box-shadow 0.3s,
    transform 0.25s var(--ease);
}
.btn .i {
  width: 18px;
  height: 18px;
  transition: transform 0.35s var(--ease);
}
.btn:hover .i {
  transform: translateX(3px);
}
.btn:active {
  transform: scale(0.98);
}
.btn-red {
  background: var(--red);
  color: #fff;
}
.btn-red:hover {
  background: var(--red-600);
  box-shadow: 0 12px 26px -12px rgba(229, 37, 30, 0.7);
  transform: translateY(-1px);
}
.btn-green {
  background: var(--green-ink);
  color: #fff;
}
.btn-green:hover {
  background: #2f6b19;
  box-shadow: 0 12px 26px -12px rgba(58, 128, 32, 0.7);
  transform: translateY(-1px);
}
.btn-line {
  background: #fff;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-line:hover {
  background: var(--mist);
}
.btn-ink {
  background: var(--ink);
  color: #fff;
}
.btn-ink:hover {
  background: #2b3038;
  box-shadow: 0 12px 26px -12px rgba(22, 25, 29, 0.6);
  transform: translateY(-1px);
}
.btn-app img {
  height: 24px;
  width: auto;
} /* Smartpack247 logo inside the app log-in button */
.btn-app .i {
  width: 16px;
  height: 16px;
}
.btn-sm {
  height: 42px;
  padding: 0 18px;
  font-size: 14.5px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* ---------------------------------------------------------------------
   2. HEADER AND MENU
   --------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: box-shadow 0.3s;
}
.site-header.scrolled {
  box-shadow:
    0 1px 0 var(--line),
    0 10px 30px -20px rgba(16, 24, 40, 0.25);
}
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
} /* reading progress line */
.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--red));
  transform-origin: 0 50%;
  transform: scaleX(var(--sp, 0));
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand img {
  width: 54px;
  height: auto;
  border-radius: 3px;
  transition: transform 0.4s var(--ease);
}
.brand:hover img {
  transform: scale(1.04);
}

/* EFOY partner badge next to the logo */
.partner {
  display: flex;
  align-items: center;
  flex: none;
  height: 42px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.partner-txt {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.partner-txt b {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--green-ink);
  transition: color 0.2s;
}
.partner-txt small {
  margin-top: 5px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}
.partner:hover .partner-txt b {
  color: var(--green-600);
}

/* Menu links */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav a {
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--steel);
  text-decoration: none;
  transition:
    color 0.2s,
    background-color 0.2s;
}
.nav a:not(.btn):hover,
.nav a.active {
  background: var(--mist);
  color: var(--ink);
}
.nav a[href="#efoy"] {
  color: var(--green-ink);
}
.nav .nav-cta,
.nav .nav-contact {
  display: none;
}
.menu-btn {
  display: none;
}
@media (max-width: 1280px) {
  .header-cta {
    padding: 0 14px;
  }
  .header-cta span {
    display: none;
  } /* app log-in shrinks to logo and arrow */
  .nav .nav-contact {
    display: block;
  }
}
@media (max-width: 1200px) {
  .header-cta {
    display: none;
  }
} /* in the burger menu from here */
/* Phone and tablet menu (burger button) */
@media (max-width: 1200px) {
  .menu-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: auto;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
  }
  .menu-btn span {
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s var(--ease);
  }
  .menu-btn[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }
  .menu-btn[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    padding: 8px 24px 24px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 50px -30px rgba(22, 25, 29, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 0.3s,
      transform 0.35s var(--ease),
      visibility 0.3s;
  }
  .nav.open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav a {
    font-size: 17px;
    color: var(--ink);
    padding: 15px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav a:not(.btn):hover,
  .nav a.active {
    background: none;
  }
  .nav a.active {
    color: var(--red);
  }
  .nav .nav-cta {
    display: inline-flex;
    margin-top: 18px;
    height: 54px;
    border-bottom: 0;
    border-radius: 999px;
    font-size: 15.5px;
    color: #fff;
  }
  .nav .nav-cta img {
    height: 28px;
  }
}
@media (max-width: 520px) {
  .header-inner {
    gap: 10px;
  }
  .brand img {
    width: 44px;
  }
  .partner {
    height: 36px;
    padding-left: 10px;
  }
  .partner-txt b {
    font-size: 16px;
  }
  .partner-txt small {
    margin-top: 4px;
    font-size: 8px;
    letter-spacing: 0.04em;
  }
  .menu-btn {
    width: 42px;
    height: 42px;
  }
}

/* ---------------------------------------------------------------------
   3. HERO (first screen)
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(36px, 5vw, 64px)) 0
    clamp(48px, 6vw, 72px);
  overflow: hidden;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr);
  gap: clamp(36px, 4.5vw, 64px);
  align-items: center;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color 0.25s,
    transform 0.3s var(--ease);
}
.hero-chip:hover {
  border-color: var(--line-2);
  transform: translateY(-1px);
}
.tag-new {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
}
.hero h1 {
  font-size: clamp(2.6rem, 1.2rem + 3.6vw, 4.4rem);
  letter-spacing: -0.045em;
  margin: 26px 0 24px;
}
.hero h1 span {
  display: block;
}
.lead {
  font-size: clamp(1.08rem, 1rem + 0.3vw, 1.24rem);
  color: var(--steel);
  max-width: 46ch;
}

/* Illustration card */
.hero-visual {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(22, 25, 29, 0.05),
    0 40px 80px -44px rgba(22, 25, 29, 0.45);
}
.scene-wrap {
  position: relative;
  aspect-ratio: 640/500;
  background: linear-gradient(180deg, #e6eff6 0%, #f3f7fa 55%, #fff 100%);
}
.scene {
  width: 100%;
  height: 100%;
}
.hv-chip {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 20px -14px rgba(22, 25, 29, 0.4);
}
.hv-chip span {
  color: var(--steel);
  font-weight: 500;
}
.hv-foot {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--steel);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  padding: 3px 8px;
}
.dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  color: var(--green);
  flex: none;
} /* "Online" dot */
/* Live-reading labels on the illustration */
.callout {
  position: absolute;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 12px 8px;
  box-shadow: 0 10px 24px -14px rgba(22, 25, 29, 0.45);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--steel);
  white-space: nowrap;
}
.callout strong {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.co-l {
  transform: translate(calc(-100% - 2px), -50%);
}
.co-t {
  transform: translate(-76%, calc(-100% - 2px));
}

/* "Choose your pressure point" cards */
.pp-label {
  position: relative;
  z-index: 2;
  margin: clamp(40px, 5vw, 60px) 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--steel);
}
.features {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.feat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.feat > a {
  display: flex;
  gap: 14px;
  align-items: center;
  height: 100%;
  padding: 20px 22px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.25s;
}
.feat > a:hover {
  background: var(--mist);
}
.feat .ic {
  width: 48px;
  height: 48px;
  transition: transform 0.5s var(--ease);
}
.feat:nth-child(odd) .ic {
  background: var(--green-50);
  color: var(--green-ink);
}
.feat:hover .ic {
  transform: rotate(-8deg) scale(1.06);
}
.feat b {
  display: block;
  font-size: 16px;
  line-height: 1.3;
}
.feat small {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--red);
}
.feat:first-child small {
  color: var(--green-ink);
}
.feat small .i {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 3px;
  vertical-align: -2px;
  stroke-width: 2.2;
  transition: transform 0.3s var(--ease);
}
.feat > a:hover small .i {
  transform: translateX(3px);
}
@media (max-width: 1000px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .callout {
    font-size: 10px;
    padding: 4px 7px 5px;
    border-radius: 7px;
  }
  .callout strong {
    font-size: 11.5px;
  }
  .hv-foot {
    display: none;
  }
  .features {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   4. Smartpack247
   --------------------------------------------------------------------- */
/* Light grey stage so the platform stands out from the white sections */
.sec-product {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f4f5 0%, #f9f9fa 45%, #fff 100%);
}
.sec-product::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      900px 520px at 10% 0%,
      rgba(90, 160, 44, 0.08),
      transparent 70%
    ),
    radial-gradient(
      800px 560px at 95% 15%,
      rgba(229, 37, 30, 0.06),
      transparent 70%
    );
}
.sec-product :is(.timeline, .fam, .ops) {
  box-shadow: var(--shadow-lg);
}

/* 4a. Intro: logo, heading, checklist */
.sp-logo {
  width: clamp(210px, 24vw, 270px);
  height: auto;
  margin-bottom: 22px;
}
.sp-grid {
  display: grid;
  grid-template-columns: minmax(0, 4.3fr) minmax(0, 6fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  padding-bottom: 40px;
}
.sp-grid h2 {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  max-width: none;
  letter-spacing: -0.025em;
}
.checks {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 12px;
}
.checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.45;
}
.checks .i {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--green);
  color: var(--green-ink);
  stroke-width: 2.6;
}

/* 4b. Smartpack247 app demo: a phone running a clickable copy of the app,
       with a short guide next to it. Screens are drawn by script.js (section 3).
       Colours, sizes and shadows are measured from the app's own screenshots (Google Play), font is Roboto like on Android.
       One blue (--blue) is used for maintenance, links and work in progress. */
.spa {
  --bg: #ebebeb;
  --txt: #212832;
  --txt2: #6b727c;
  --txt3: #99a0a8;
  --line-a: #e3e6eb;
  --panel: #f0f1f3;
  --green-a: #57a859;
  --ok: #54b685;
  --gen: #5bc560;
  --bat: #68ad5c;
  --amber: #f8c643;
  --amber-t: #88441d;
  --err: #c73329;
  --blue: #2a5ef2;
  --nav-red: #d73d35;
  --slate: #677389;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.09);
  display: grid;
  grid-template-columns: minmax(0, 372px) minmax(0, 1fr);
  grid-template-areas: "devs ." "stage tour";
  gap: 22px clamp(20px, 3vw, 36px);
  align-items: center;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.spa-stage {
  grid-area: stage;
  position: relative;
  justify-self: center;
  width: min(372px, 100%);
}
.spa-stage::before {
  content: "";
  position: absolute;
  inset: 8% -18% 4%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(90, 160, 44, 0.18), transparent),
    radial-gradient(
      closest-side at 70% 70%,
      rgba(229, 37, 30, 0.12),
      transparent
    );
  filter: blur(18px);
}

/* the phone */
.spa-phone {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 760px;
  height: clamp(560px, calc(100svh - var(--header-h) - 40px), 780px);
  overflow: hidden;
  border: 10px solid #111316;
  border-radius: 50px;
  background: var(--bg);
  box-shadow:
    inset 0 0 0 1.5px #3a3f45,
    var(--shadow-lg),
    0 50px 80px -50px rgba(16, 24, 40, 0.55);
  color: var(--txt);
  font:
    400 14px/1.35 "Roboto",
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
.spa-phone::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 7;
  width: 88px;
  height: 24px;
  margin-left: -44px;
  border-radius: 13px;
  background: #111316;
}
.spa-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  padding: 4px 24px 0;
  font-size: 13px;
  font-weight: 500;
  flex: none;
  color: var(--txt);
}
.spa-status svg {
  width: 40px;
  height: 12px;
}
.spa-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  container-type: size;
} /* lets the sign-in screen size itself to the phone height (cqh) */
.spa-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 0 14px 22px;
  scrollbar-width: none;
}
.spa-view::-webkit-scrollbar {
  display: none;
}
.spa-phone :where(button) {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.spa-phone .i {
  width: 20px;
  height: 20px;
}

/* bottom menu */
.spa-nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: none;
  padding: 6px 2px 18px;
  background: var(--bg);
  border-top: 1px solid #dcdfe4;
}
.spa-nav::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 100px;
  height: 4px;
  margin-left: -50px;
  border-radius: 4px;
  background: #111316;
  opacity: 0.8;
}
.spa-nav button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 4px 0 2px;
  border: 0;
  background: none;
  font-size: 10px;
  color: #010302;
}
.spa-nav .i {
  width: 24px;
  height: 24px;
  stroke-width: 1.7;
}
.spa-nav button[aria-current="page"] {
  color: var(--nav-red);
}
.spa-badge {
  position: absolute;
  top: 0;
  left: calc(50% + 3px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #c9403a;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.spa[data-screen="login"] .spa-nav {
  display: none;
}
.spa[data-screen="login"] .spa-phone {
  background: #fff;
}
.spa[data-screen="login"] .spa-view {
  padding-bottom: 0;
}

/* shared pieces */
.spa-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 24px;
}
.spa-hic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--ok);
  color: #fff;
  flex: none;
}
.spa-hic .i {
  width: 18px;
  height: 18px;
}
.spa-head > div {
  flex: 1;
  min-width: 0;
}
.spa-head h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: #232730;
  letter-spacing: 0;
}
.spa-head small {
  display: block;
  font-size: 12px;
  color: #6c727e;
}
.spa-mini {
  border: 0;
  background: none;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
  white-space: nowrap;
}
.spa-link {
  border: 0;
  background: none;
  padding: 0;
  font-size: inherit;
  font-weight: 500;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.spa-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
.spa-tag .i {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}
.spa-tag.rep {
  background: #fce7ef;
  color: #92254e;
}
.spa-tag.ref,
.spa-tag.planned {
  background: #fbf3cc;
  color: var(--amber-t);
}
.spa-tag.done {
  background: #e2fbe8;
  color: #3d7e46;
}
.spa-tag.ongoing {
  background: #e3ebfe;
  color: var(--blue);
}
.spa-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
}
.spa-btn::after {
  content: "";
  position: absolute;
  inset: -8px -3px;
} /* bigger tap area than it looks */
.spa-btn .i {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
.spa-btn.g {
  background: var(--ok);
}
.spa-btn.s {
  background: var(--blue);
}
.spa-btn.k {
  background: var(--slate);
}
.spa-btn.ghost {
  background: var(--panel);
  color: var(--txt);
}
.spa-btn:hover {
  filter: brightness(0.94);
}
.spa-empty {
  padding: 30px 0;
  text-align: center;
  color: var(--txt3);
}

/* dashboard */
.spa-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -14px;
  padding: 6px 14px 12px 16px;
  border-bottom: 1px solid #dfe2e8;
}
.spa-logo {
  height: 38px;
  width: auto;
}
.spa-gear {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #111;
}
.spa-gear .i {
  width: 25px;
  height: 25px;
  stroke-width: 1.9;
}
.spa-gear i {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #db3a32;
  border-radius: 50%;
}
.spa-circles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 18px 0 26px;
}
.spa-circle {
  --c: var(--green-a);
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 4px solid var(--c);
  border-radius: 50%;
  background: transparent;
  color: var(--c);
  transition: background-color 0.25s ease;
}
.spa-circle .i {
  width: 34px;
  height: 34px;
  stroke-width: 2;
  transition: color 0.25s ease;
}
.spa-circle span {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border: 1.5px solid var(--c);
  border-radius: 12px;
  background: var(--bg);
  font-size: 13px;
  line-height: 21px;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.spa-circle.warn {
  --c: var(--amber);
}
.spa-circle.err {
  --c: var(--err);
}
.spa-circle.maint {
  --c: var(--blue);
}
/* the chosen status: only the background changes, it fills with its own colour */
.spa-circle[aria-pressed="true"] {
  background: var(--c);
}
.spa-circle[aria-pressed="true"] .i {
  color: #fff;
}
.spa-circle[aria-pressed="true"] span {
  background: var(--c);
  border: 2px solid var(--bg);
  color: #fff;
  line-height: 20px;
}
.spa-circle.ok[aria-pressed="true"] :is(.i, span),
.spa-circle.warn[aria-pressed="true"] :is(.i, span) {
  color: #000;
}
.spa-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -14px 2px 10px;
  font-size: 12.5px;
  color: var(--txt2);
}

/* device card */
.spa-card {
  position: relative;
  margin-bottom: 12px;
  padding: 14px 13px 9px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.spa-card:hover {
  transform: translateY(-2px);
}
.spa-card-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.spa-card-top > div {
  flex: 1;
  min-width: 0;
}
.spa-card-top b {
  display: block;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--txt);
}
.spa-card-top small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--txt2);
  white-space: nowrap;
}
.spa-star {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #000;
}
.spa-star .i {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}
.spa-star.on .i {
  fill: currentColor;
}
.spa-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
.spa-pill.ok {
  background: var(--ok);
  color: #000;
}
.spa-pill.warn {
  background: var(--amber);
  color: #000;
}
.spa-pill.err {
  background: var(--err);
  color: #fff;
}
.spa-pill.maint {
  background: var(--blue);
  color: #fff;
}
.spa-gen {
  margin-top: 14px;
  padding: 3px;
  border-radius: 11px;
  background: var(--panel);
}
.spa-gen p {
  height: 16px;
  border-radius: 8px;
  background: #b8bdc4;
  color: #fff;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-align: center;
}
.spa-gen p.on {
  background: var(--gen);
}
.spa-gen div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 3px;
}
.spa-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 500;
  color: #131720;
  white-space: nowrap;
}
.spa-tile.on {
  box-shadow: inset 0 0 0 1.5px #a9e2b5;
}
.spa-tile svg {
  flex: none;
}
.spa-tile .tfc {
  width: 38px;
  height: 28px;
}
.spa-tile .tsol {
  width: 26px;
  height: 24px;
}
.spa-batt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.spa-batt-row small {
  display: block;
  font-size: 14.5px;
  color: #202833;
}
.spa-batt-row b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.spa-batt {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 43px;
  padding: 5px 7px;
  margin-right: 6px;
  border: 1.5px solid #dadde2;
  border-radius: 10px;
  background: #f5f5f7;
}
.spa-batt::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 5px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 0 3px 3px 0;
  background: #dadde2;
}
.spa-batt i {
  width: 3px;
  border-radius: 2px;
  background: #e3e5e9;
}
.spa-batt.hi i.on {
  background: var(--bat);
}
.spa-batt.mid i.on {
  background: var(--amber);
}
.spa-batt.lo i.on {
  background: var(--err);
}
b.hi,
.spa-pct.hi {
  color: var(--bat);
}
b.mid,
.spa-pct.mid {
  color: #edb72e;
}
b.lo,
.spa-pct.lo {
  color: var(--err);
}

/* device screen */
.spa-dhead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 0;
}
.spa-back {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.8px solid #111;
  border-radius: 50%;
  background: none;
  flex: none;
}
.spa-back .i {
  width: 16px;
  height: 16px;
  color: #ce3e35;
  stroke-width: 2.4;
}
.spa-dhead > div {
  flex: 1;
  min-width: 0;
}
.spa-dhead b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: #343434;
}
.spa-dhead small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: #343434;
  letter-spacing: 0.02em;
}
.spa-sn {
  font-size: 11px;
  color: #343434;
  white-space: nowrap;
}
.spa-dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  color: #fff;
}
.spa-dot .i {
  width: 16px;
  height: 16px;
}
.spa-dot.ok {
  background: var(--green-a);
}
.spa-dot.warn {
  background: var(--amber);
  color: #000;
}
.spa-dot.err {
  background: var(--err);
}
.spa-dot.maint {
  background: var(--blue);
}
.spa-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  margin: 16px 0 16px;
  border-radius: 7px;
  background: var(--panel);
}
.spa-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 5px;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt3);
  transition:
    background-color 0.25s,
    color 0.25s;
}
.spa-tabs button[aria-selected="true"] {
  background: #fff;
  color: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.spa-box {
  margin-bottom: 15px;
  padding: 17px 15px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.spa-box-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.spa-box-head h4 {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  color: #000;
  white-space: nowrap;
}
.spa-box-head small {
  font-size: 10.5px;
  color: var(--txt3);
  text-align: right;
}
.spa-big {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  color: #000;
}
.spa-big .i {
  width: 26px;
  height: 26px;
  stroke-width: 1.8;
}
.spa-fc {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 10px;
  align-items: start;
}
.spa-fcimg {
  display: block;
  width: 100%;
  max-width: 112px;
  margin-bottom: 8px;
}
.spa-fc ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.spa-fc li {
  position: relative;
  display: grid;
  grid-template-columns: 23px 1fr auto;
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  padding: 10px 7px 7px;
  border-radius: 5px;
  font-size: 12.5px;
  color: #343434;
}
.spa-fc li b {
  font-size: 15.5px;
  font-weight: 700;
  color: #000;
}
.spa-fc li.use {
  background: #e8e8e8;
}
.spa-fc li.use b {
  color: #5ac660;
} /* the port in use is always green in the app */
.spa-fc li em {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 8.5px;
  font-style: normal;
  color: #5ca35f;
}
.spa-port {
  display: grid;
  place-items: center;
  width: 23px;
  height: 15px;
  border-radius: 3px;
  background: var(--green-a);
  color: #fff;
}
.spa-port .i {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}
.spa-port.off {
  width: auto;
  height: auto;
  background: none;
  color: #000;
}
.spa-port.off .i {
  width: 15px;
  height: 19px;
  stroke-width: 2;
}
.spa-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 30px;
  margin-top: 16px;
  padding: 12px 0 10px;
  border-top: 1px solid #f1f1f3;
  font-size: 12px;
  color: #9ba0a6;
}
.spa-issues span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.spa-issues .i {
  width: 14px;
  height: 14px;
}
.spa-issues .w {
  color: var(--amber-t);
}
.spa-issues .e {
  color: var(--err);
}
.spa-solar {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 10px;
  align-items: end;
}
.spa-sunimg {
  display: block;
  width: 86px;
  margin: 4px 0 10px;
}
.spa-bolt-d {
  color: var(--blue);
  stroke-dasharray: 2.5 2.5;
}
.spa-solar dl,
.spa-rows {
  margin: 0;
  display: grid;
  gap: 2px;
}
.spa-solar dl div {
  padding: 4px 8px 5px;
  border-radius: 6px;
}
.spa-solar dl div.hl {
  background: var(--panel);
}
.spa-solar dt {
  font-size: 11.5px;
  color: var(--txt3);
}
.spa-solar dd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2px 0 0;
  font-size: 15px;
  color: #000;
}
.spa-solar dd .i {
  width: 21px;
  height: 21px;
  stroke-width: 1.7;
}
.spa-solar .hl dd {
  font-weight: 700;
}
.spa-pct {
  font-size: 17px;
  font-weight: 700;
}
.spa-rows {
  margin: 14px -15px 0;
  padding: 12px 15px 0;
  border-top: 1px solid #f1f1f3;
  gap: 8px;
}
.spa-rows div {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: #000;
}
.spa-rows dd {
  margin: 0;
  font-weight: 700;
}
.spa-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #343434;
}
.spa-divider::before,
.spa-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #aeb4bd;
}
.spa-load h4 {
  font-size: 14px;
  font-weight: 700;
  color: #000;
}
.spa-load > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.spa-loadimg {
  width: 70px;
}
.spa-load .i.big {
  width: 56px;
  height: 56px;
  color: #1e3a6e;
  stroke-width: 1.4;
}
.spa-load p {
  text-align: right;
}
.spa-load small {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #9aa1ab;
}
.spa-load p b {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--blue);
}

/* notifications */
.spa-note {
  position: relative;
  margin-bottom: 13px;
  padding: 13px 13px 11px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.spa-note.pinned {
  background: #fff9e6;
  box-shadow: inset 0 0 0 1px #f6e3a6;
}
.spa-note-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.spa-note-top > span:nth-child(2) {
  font-weight: 600;
  color: #4c545f;
}
.spa-cellic {
  width: 18px;
  height: 24px;
  color: #000;
  stroke-width: 2.2;
  flex: none;
}
.spa-info {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  margin-left: auto;
  padding: 0 9px 0 5px;
  border-radius: 10px;
  background: var(--txt3);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
}
.spa-info .i {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}
.spa-info.warn {
  background: #f2b705;
}
.spa-info.err {
  background: var(--err);
}
.spa-pinbtn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 27px;
  border: 0;
  border-radius: 6px;
  background: #f3f4f6;
  color: #9aa2af;
  flex: none;
}
.spa-note-top .spa-pinbtn {
  margin-left: auto;
}
.spa-note-top .spa-info ~ .spa-pinbtn {
  margin-left: 0;
}
.spa-pinbtn .i {
  width: 14px;
  height: 14px;
}
.spa-pinbtn.on {
  background: #fce7a6;
  color: #8a5a00;
}
.spa-note > p {
  margin: 10px 0 11px;
  font-size: 13.5px;
  line-height: 1.38;
  color: #232730;
}
.spa-note-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #9ea1a6;
}
.spa-note-foot span:nth-child(2) {
  font-weight: 500;
  color: #6a727f;
  text-align: center;
}
.spa-read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  background: #effcf5;
  color: var(--ok);
  font-weight: 500;
}
.spa-read.nw {
  background: #fdecec;
  color: var(--nav-red);
}
.spa-read .i {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

/* AI insights */
.spa-ins {
  margin-bottom: 13px;
  padding: 13px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--lv, var(--ok));
}
.spa-ins.warn {
  --lv: var(--amber);
}
.spa-ins.err {
  --lv: var(--err);
}
.spa-ins.info {
  --lv: var(--txt3);
}
.spa-ins-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4c545f;
}
.spa-ins-top .spa-link {
  margin-left: auto;
}
.spa-ins-top .i {
  width: 16px;
  height: 16px;
  color: var(--ok);
}
.spa-ins h4 {
  margin: 8px 0 4px;
  font-size: 14.5px;
  font-weight: 500;
  color: #232730;
}
.spa-ins > p {
  font-size: 13px;
  line-height: 1.4;
  color: #4c545f;
}
.spa-fuel {
  height: 8px;
  margin-top: 10px;
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
.spa-fuel span {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 8px;
  background: var(--amber);
}
.spa-fuel-l {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #9ea1a6;
}
.spa-ins-act {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* visits */
.spa-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -14px;
  padding: 0 14px 10px;
  border-bottom: 1px solid #dcdfe4;
  scrollbar-width: none;
}
.spa-chips::-webkit-scrollbar {
  display: none;
}
.spa-chips button {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border: 1.5px solid var(--line-a);
  border-radius: 16px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #4c545f;
}
.spa-chips button[aria-pressed="true"] {
  background: #232730;
  border-color: #232730;
  color: #fff;
}
.spa-list {
  padding-top: 4px;
}
.spa-visit {
  margin: 4px 0 12px;
  padding: 12px 13px 12px 14px;
  border-radius: 11px;
  border-left: 3px solid var(--vc, var(--amber));
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.spa-visit.planned {
  --vc: #f5d566;
}
.spa-visit.done {
  --vc: #9eecb0;
}
.spa-visit.ongoing {
  --vc: #9db7fa;
}
.spa-visit-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.spa-visit-top > .i {
  width: 16px;
  height: 16px;
  color: #4c545f;
  stroke-width: 1.7;
}
.spa-visit-top > span:nth-child(2) {
  font-weight: 600;
  color: #212733;
}
.spa-visit-top .spa-tag:first-of-type {
  margin-left: auto;
}
.spa-visit-sub {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: #23282e;
}
.spa-time {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 5px;
  background: #f9fafc;
  font-size: 13px;
}
.spa-time p {
  display: flex;
  align-items: center;
  gap: 7px;
}
.spa-time p:first-child {
  font-weight: 500;
  color: #212733;
}
.spa-time p:last-child {
  color: #757c8f;
}
.spa-time .i {
  width: 15px;
  height: 15px;
  color: #757c8f;
  stroke-width: 1.8;
}
.spa-time .arr {
  color: #9aa1ab;
  font-weight: 400;
}
.spa-visit-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: #6a727f;
}
.spa-visit-foot div {
  display: flex;
  gap: 6px;
}
.spa-fab {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.3);
}
.spa-fab .i {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
}

/* login (white screen) */
.spa-login {
  --g: 18px;
  --g2: 12px;
  --img: 190px;
  --in: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: var(--g2) 0;
  text-align: center;
}
@supports (height: 1cqh) {
  .spa-login {
    --g: clamp(5px, calc(6.6cqh - 27.6px), 18px);
    --g2: clamp(4px, calc(3.95cqh - 15.3px), 12px);
    --img: clamp(100px, calc(46cqh - 128px), 190px);
    --in: clamp(44px, calc(7.9cqh + 3.3px), 58px);
  }
}
.spa-login img {
  width: var(--img);
  height: auto;
  margin: 0 auto var(--g);
}
.spa-login h3 {
  font-size: 22px;
  font-weight: 700;
  color: #202833;
}
.spa-login > p {
  margin: 6px 6px var(--g);
  font-size: 13.5px;
  line-height: 1.4;
  color: #6a727f;
}
.spa-in {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--in);
  margin-bottom: var(--g);
  padding: 0 16px;
  border: 1.5px solid var(--line-a);
  border-radius: 29px;
  background: #fff;
  color: #9ba2aa;
}
.spa-in input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--txt);
  outline: none;
}
.spa-in input::placeholder {
  color: #9ba2aa;
}
.spa-in:focus-within {
  border-color: #b8bec7;
}
.spa-in button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: -6px;
  border: 0;
  background: none;
  color: #9ba2aa;
}
.spa-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 21px;
  font-size: 15px;
  font-weight: 500;
}
.spa-wide .i {
  width: 20px;
  height: 20px;
}
.spa-wide svg.gg {
  width: 19px;
  height: 19px;
}
.spa-wide.red {
  background: #dd524b;
  color: #fff;
  margin-top: 4px;
}
.spa-wide.line {
  background: #fff;
  border: 1.5px solid var(--line-a);
  color: #202833;
}
.spa-wide.soft {
  background: #fdf4f5;
  border: 1.5px solid #f7d4d4;
  color: #dc534d;
  margin-top: var(--g2);
}
.spa-txtbtn {
  border: 0;
  background: none;
  padding: 4px 6px;
  font-size: 13.5px;
  color: #dc534d;
}
.spa-forgot {
  margin: var(--g2) auto calc(var(--g2) * 0.6);
}
.spa-login .spa-or {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 var(--g2);
  font-size: 14px;
  color: #9ba2aa;
}
.spa-or::before,
.spa-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e4e7ec;
}
.spa-login small {
  display: block;
  margin-top: var(--g);
  padding-top: var(--g2);
  border-top: 1px solid #e4e7ec;
  font-size: 13.5px;
  color: #6a727f;
}
.spa-login small .spa-txtbtn {
  display: block;
  margin: 0 auto;
  padding: 2px 6px;
  font-weight: 500;
}
.spa-login.busy .spa-wide.red {
  opacity: 0.75;
  pointer-events: none;
}
.spa-scan {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}
.spa-scan .i {
  width: 72px;
  height: 72px;
  color: #dc534d;
  stroke-width: 1.4;
}

/* full-screen windows (visit details, check in, check out, new visit) */
.spa-sheet {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.48);
}
.spa-sheet[hidden] {
  display: none;
}
.spa-sheet::before {
  content: "";
  height: 38px;
  flex: none;
}
.spa-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: #f6f7f9;
  outline: none;
}
.spa-sh-head {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  padding: 26px 14px 14px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  font-size: 16.5px;
  font-weight: 700;
  color: #232730;
  text-align: center;
}
.spa-sh-head button,
.spa-sh-head > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #eef2f6;
  color: #4c545f;
}
.spa-sh-head .i {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
.spa-sh-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  scrollbar-width: none;
}
.spa-sh-body::-webkit-scrollbar {
  display: none;
}
.spa-sh-foot {
  padding: 14px 14px 18px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}
.spa-sh-foot .spa-wide {
  height: 48px;
  margin: 0;
  border-radius: 12px;
  background: #1a1717;
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
}
.spa-sh-foot .spa-wide.go {
  background: var(--ok);
}
.spa-lbl {
  display: block;
  margin: 20px 0 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4c545f;
}
.spa-lbl.g {
  color: #6b7280;
}
.spa-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 41px;
  padding: 8px 13px;
  border: 1.5px solid var(--line-a);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--txt);
}
.spa-field .i {
  width: 17px;
  height: 17px;
  color: #4c545f;
}
textarea.spa-field {
  min-height: 92px;
  resize: none;
  align-items: flex-start;
}
.spa-field::placeholder {
  color: #9ba2aa;
}
.spa-field:focus {
  outline: none;
  border-color: #b8bec7;
}
.spa-card-lite {
  padding: 14px;
  border: 1.5px solid var(--line-a);
  border-radius: 13px;
  background: #fff;
}
.spa-card-lite p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}
.spa-card-lite p + p {
  margin-top: 10px;
}
.spa-card-lite .i {
  width: 17px;
  height: 17px;
  color: #4c545f;
}
.spa-date {
  font-size: 15px;
  font-weight: 600;
  color: #000;
}
.spa-tags-big .spa-tag {
  height: 26px;
  padding: 0 12px;
  border-radius: 13px;
  font-size: 12.5px;
  font-weight: 600;
}
.spa-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.spa-people div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #000;
}
.spa-people small {
  display: block;
  font-size: 11.5px;
  color: var(--txt3);
}
.spa-ava {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ede1d3;
  color: #8a6a3e;
  font-size: 12px;
  flex: none;
}
.spa-ava.g {
  background: #dcefe0;
  color: #3d7e46;
}
.spa-tt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.spa-tt-head .spa-lbl {
  margin: 0;
}
.spa-dur {
  padding: 4px 10px;
  border: 1.5px solid var(--line-a);
  border-radius: 8px;
  background: #f6f7f9;
  font-size: 13.5px;
  font-weight: 500;
}
.spa-tt-val {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #000;
}
.spa-tt-val .i {
  width: 18px;
  height: 18px;
  color: #4c545f;
}
.spa-track {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #6b7280;
}
.spa-track::before,
.spa-track::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #cbd2dc;
}
.spa-track i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3f4a5c;
  flex: none;
}
.spa-track i:last-child {
  background: #fff;
  border: 2px solid #8c97a8;
}
.spa-dt {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 4px 10px;
}
.spa-dt + .spa-dt {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef0f3;
}
.spa-dt .i {
  width: 17px;
  height: 17px;
  color: #4c545f;
  margin-top: 1px;
}
.spa-dt b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4c545f;
}
.spa-dt p {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.38;
  color: #000;
}
.spa-photos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.spa-photos span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1.5px dashed #cbd2dc;
  border-radius: 8px;
  color: #aeb6c2;
}
.spa-photos .i {
  width: 18px;
  height: 18px;
}
.spa-soon {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 5px;
  background: #fdf3c7;
  color: var(--amber-t);
  font-size: 12.5px;
  font-weight: 500;
}
.spa-seg {
  display: flex;
  gap: 6px;
}
.spa-seg label {
  flex: 1;
}
.spa-seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.spa-seg span {
  display: grid;
  place-items: center;
  min-height: 40px;
  border: 1.5px solid var(--line-a);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.spa-seg input:checked + span {
  background: #232730;
  border-color: #232730;
  color: #fff;
}
.spa-seg input:focus-visible + span {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.spa-toast {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 86px;
  z-index: 8;
  margin: 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: #232730;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.spa-toast.show {
  opacity: 1;
  transform: none;
}
.spa[data-screen="login"] .spa-toast {
  bottom: 24px;
}

/* Device tabs (Mobile / Desktop): the same app on a phone or in a desktop browser.
   The page keeps its layout (text left, demo right): the desktop frame stays in the demo column;
   when the demo column is narrower than the frame, script.js scales the frame down to fit (transform) and sets the space it takes. */
.spa-devs {
  grid-area: devs;
  justify-self: center;
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
}
.spa-devs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 600 14px/1 var(--font);
  color: var(--steel);
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s;
}
.spa-devs .i {
  width: 17px;
  height: 17px;
}
.spa-devs button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}
.spa-devs button:not([aria-pressed="true"]):hover {
  color: var(--ink);
}
.spa:not([data-device="mobile"]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "devs" "tour" "stage";
  max-width: none;
}
.spa:not([data-device="mobile"]) .spa-stage {
  width: 100%;
}
.spa:not([data-device="mobile"]) .spa-phone {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
}
.spa-browser,
.spa-nav-logo,
.spa-nav-user {
  display: none;
}
.spa:not([data-device="mobile"]) .spa-tour {
  text-align: center;
}
.spa:not([data-device="mobile"]) .spa-tour ol {
  justify-content: safe center;
}

/* desktop: browser window, menu on the left, cards in a grid, windows open as dialogs */
.spa[data-device="desktop"] .spa-phone {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-rows: 42px minmax(0, 1fr);
  width: 1180px;
  height: 720px;
  height: clamp(560px, calc(100svh - var(--header-h) - 130px), 760px);
  border: 1px solid #d5d9df;
  border-radius: 14px;
  box-shadow:
    var(--shadow-lg),
    0 50px 80px -50px rgba(16, 24, 40, 0.45);
}
.spa[data-device="desktop"] .spa-phone::before,
.spa[data-device="desktop"] .spa-status,
.spa[data-device="desktop"] .spa-nav::after {
  display: none;
}
.spa[data-device="desktop"] .spa-browser {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  background: #f3f4f6;
  border-bottom: 1px solid #e1e4e8;
}
.spa-browser i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}
.spa-browser i:nth-child(2) {
  background: #febc2e;
}
.spa-browser i:nth-child(3) {
  background: #28c840;
}
.spa-browser span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(420px, 60%);
  height: 26px;
  margin: 0 auto;
  border: 1px solid #e1e4e8;
  border-radius: 7px;
  background: #fff;
  font: 500 12.5px/1 var(--font);
  color: var(--steel);
}
.spa-browser .i {
  width: 12px;
  height: 12px;
}
.spa[data-device="desktop"] .spa-screen {
  grid-column: 2;
  grid-row: 2;
}
.spa[data-device="desktop"][data-screen="login"] .spa-screen {
  grid-column: 1/-1;
}
.spa[data-device="desktop"][data-screen="login"] .spa-nav {
  display: none;
}
.spa[data-device="desktop"] .spa-nav {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  background: #fff;
  border-top: 0;
  border-right: 1px solid #e1e4e8;
}
.spa[data-device="desktop"] .spa-nav-logo {
  display: block;
  width: auto;
  height: 44px;
  margin: 2px 8px 20px;
  align-self: flex-start;
}
.spa[data-device="desktop"] .spa-nav button {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}
.spa[data-device="desktop"] .spa-nav button:hover {
  background: #f3f4f6;
}
.spa[data-device="desktop"] .spa-nav button[aria-current="page"] {
  background: #fdecec;
}
.spa[data-device="desktop"] .spa-nav .i {
  width: 20px;
  height: 20px;
}
.spa[data-device="desktop"] .spa-badge {
  position: static;
  margin-left: auto;
}
.spa[data-device="desktop"] .spa-nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 6px 0;
  border-top: 1px solid #eef0f3;
  font-size: 13px;
  font-weight: 500;
}
.spa[data-device="desktop"] .spa-view {
  padding: 22px 28px 40px;
}
.spa[data-device="desktop"] .spa-top {
  margin: 0;
  padding: 0 0 4px;
  border: 0;
}
.spa[data-device="desktop"] .spa-top::before {
  content: "Dashboard";
  font-size: 22px;
  font-weight: 700;
  color: #232730;
}
.spa[data-device="desktop"] .spa-logo {
  display: none;
}
.spa[data-device="desktop"] .spa-circles {
  max-width: 420px;
  padding: 12px 0 22px;
}
.spa[data-device="desktop"] .spa-tabs {
  max-width: 480px;
}
.spa[data-device="desktop"] .spa-head {
  padding-top: 2px;
}
.spa[data-device="desktop"] .spa-chips {
  margin: 0;
  padding: 0 0 12px;
}
.spa[data-device="desktop"]
  :is(.spa-cards, .spa-ov, .spa-notes, .spa-list, .spa-inss) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.spa[data-device="desktop"] .spa-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.spa[data-device="desktop"]
  :is(.spa-card, .spa-box, .spa-note, .spa-visit, .spa-ins) {
  margin: 0;
}
.spa[data-device="desktop"] .spa-list {
  padding-top: 16px;
}
.spa[data-device="desktop"] .spa-loads .spa-divider {
  margin-top: 0;
}
.spa[data-device="desktop"] .spa-sheet {
  align-items: center;
  justify-content: center;
}
.spa[data-device="desktop"] .spa-sheet::before {
  display: none;
}
.spa[data-device="desktop"] .spa-panel {
  flex: none;
  width: 520px;
  max-height: 88%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4);
}
.spa[data-device="desktop"] .spa-sh-head {
  padding-top: 16px;
}
.spa[data-device="desktop"] .spa-toast {
  left: auto;
  right: 24px;
  bottom: 24px;
  width: 340px;
}
.spa[data-device="desktop"] .spa-login {
  max-width: 380px;
  margin: 0 auto;
}

/* desktop screens drawn by script.js (dDash, dNotifs, dVisits, dAnalytics), styled after the Smartpack247 web app */
.spa[data-device="desktop"]:not([data-screen="login"]) .spa-phone {
  background: #f4f4f2;
}
.spa:not([data-device="desktop"])
  :is(.spa-nav [data-k="analytics"], .spa-nav-set),
.spa[data-device="mobile"] li:has([data-tour="analytics"]) {
  display: none;
}
.spa[data-device="desktop"] .spa-nav {
  padding: 0 12px 0;
  gap: 6px;
}
.spa[data-device="desktop"] .spa-nav-logo {
  height: 40px;
  margin: 0 -12px 12px;
  padding: 10px 0 10px 20px;
  width: calc(100% + 24px);
  object-fit: contain;
  object-position: 20px 50%;
  box-sizing: content-box;
  border-bottom: 1px solid #e6e7ea;
  align-self: stretch;
}
.spa[data-device="desktop"] .spa-nav button {
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #16191d;
}
.spa[data-device="desktop"] .spa-nav button[aria-current="page"] {
  color: var(--nav-red);
}
.spa[data-device="desktop"] .spa-badge {
  position: absolute;
  top: 4px;
  left: 22px;
  min-width: 15px;
  height: 15px;
  margin: 0;
  padding: 0 3px;
  font-size: 9px;
  line-height: 15px;
}
.spa[data-device="desktop"] .spa-nav-set {
  margin-top: auto;
  margin-inline: -12px;
  padding-inline: 24px;
  border-top: 1px solid #e6e7ea;
  border-radius: 0;
}
.spa[data-device="desktop"] .spa-view.dkv {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.spa[data-device="desktop"][data-screen="dash"] .spa-view.dkv {
  overflow: hidden;
}
.dk-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #e6e7ea;
}
.dk-head h3 {
  font-size: 17px;
  font-weight: 700;
  color: #232730;
}
.dk-head small {
  font-size: 12px;
  color: #6c727e;
}
.dk-head > button {
  margin-left: auto;
  align-self: center;
}
.spa[data-device="desktop"] .dk-bar {
  margin: 0;
  padding: 10px 24px;
  background: #fff;
  border-bottom: 1px solid #e6e7ea;
}
.dk-body {
  padding: 18px 24px 30px;
}
.dk-table {
  border: 1px solid #e6e7ea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.dk-tr {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 12px;
  align-items: center;
  min-height: 50px;
  padding: 6px 16px;
  border-top: 1px solid #eeeff1;
  font-size: 12px;
  color: #232730;
}
.dk-th {
  min-height: 38px;
  border-top: 0;
  background: #fafafa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4c545f;
}
.dk-dev {
  display: grid;
  justify-items: start;
  line-height: 1.3;
}
.dk-dev small,
.dk-date small {
  display: block;
  font-size: 10px;
  color: #8a919b;
}
.dk-msg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dk-act {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.dk-notes {
  --cols: 120px 110px 82px 80px minmax(0, 1fr) 150px;
}
.dk-notes .dk-tr:not(.dk-th) {
  border-left: 3px solid #2a5ef2;
}
.dk-notes .dk-tr.warn {
  border-left-color: #f2b705;
}
.dk-notes .dk-tr.err {
  border-left-color: var(--err);
}
.dk-notes .dk-tr.pinned {
  background: #fff9e6;
}
.dk-notes .unread .dk-msg {
  font-weight: 600;
}
.dk-type {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dk-type svg {
  width: 22px;
  height: 17px;
  flex: none;
}
.dk-sev {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding: 0 8px 0 5px;
  border-radius: 10px;
  background: #99a0a8;
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
}
.dk-sev .i {
  width: 12px;
  height: 12px;
}
.dk-sev.warn {
  background: #f5b800;
}
.dk-sev.err {
  background: var(--err);
}
.dk-mark,
.dk-view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #e6e7ea;
  border-radius: 5px;
  background: #f7f8fa;
  font-size: 11px;
  color: #2a5ef2;
}
.dk-view {
  color: #4c545f;
}
.dk-mark .i,
.dk-view .i {
  width: 13px;
  height: 13px;
}
.dk-visits {
  --cols: 92px 120px 82px 86px 116px minmax(0, 1fr) 170px;
}
.dk-visits .spa-btn {
  height: 26px;
  font-size: 11.5px;
}
.dk-tr.late {
  background: #fdf0f0;
}
.dk-tr.late .dk-date {
  color: var(--err);
}
.dk-tr.late .dk-date small {
  font-weight: 700;
  color: var(--err);
}
.dk-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: #22a06b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.dk-add .i {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

/* dashboard: status pills, map with device pins, device list */
.dk-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-rows: 46px minmax(0, 1fr);
  height: 100%;
}
.dk-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid #e6e7ea;
}
.dk-pill {
  --c: #22b07d;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1.5px solid var(--c);
  border-radius: 13px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 500;
  color: #232730;
  cursor: pointer;
}
.dk-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}
.dk-pill.warn {
  --c: #f2b705;
}
.dk-pill.err {
  --c: var(--err);
}
.dk-pill.maint {
  --c: var(--blue);
}
.dk-pill[aria-pressed="true"] {
  background: var(--c);
  color: #fff;
}
.dk-pill[aria-pressed="true"]::before {
  background: #fff;
}
.dk-map {
  position: relative;
  overflow: hidden;
  background: #aad3df;
  container-type: size;
}
.dk-map-in {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 125cqh);
  aspect-ratio: 1280/1024;
  transform: translate(-50%, -50%) scale(var(--z, 1));
  transform-origin: 58% 52%;
  transition: transform 0.4s var(--ease);
} /* the map always covers the panel */
.dk-map-in img {
  display: block;
  width: 100%;
  height: 100%;
}
.dk-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font:
    700 10.5px/1 "Roboto",
    sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%) scale(calc(1 / var(--z, 1)));
  cursor: pointer;
  transition: filter 0.2s;
}
.dk-pin:hover {
  filter: brightness(1.08);
}
.dk-pin em {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -3px;
  padding: 1px 4px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-style: normal;
  font-size: 8.5px;
  color: #111;
  white-space: nowrap;
  transform: translateX(-50%);
}
.dk-pin .sun {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1.5px solid #f2a31b;
  border-radius: 50%;
  background: #fff;
  color: #f2a31b;
}
.dk-pin .sun .i {
  width: 9px;
  height: 9px;
}
.dk-zoom {
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.dk-zoom button {
  width: 28px;
  height: 28px;
  border: 0;
  background: #fff;
  font-size: 17px;
  line-height: 1;
}
.dk-zoom button + button {
  border-top: 1px solid #ddd;
}
.dk-attr {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 9.5px;
  color: #333;
}
.dk-list {
  grid-column: 2;
  grid-row: 1/-1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid #e6e7ea;
  background: #f4f4f2;
}
.dk-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: none;
  height: 46px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid #e6e7ea;
  font-size: 13px;
}
.dk-list-body {
  flex: 1;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px;
  scrollbar-width: thin;
}
.dk-list-body .spa-card {
  margin: 0;
}
/* device side panel (opens from a map pin or a device card) */
.dk-side {
  animation: dkSide 0.35s var(--ease);
}
@keyframes dkSide {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
}
.dk-side-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid #e6e7ea;
}
.dk-side-head > div {
  flex: 1;
  min-width: 0;
}
.dk-side-head b {
  display: block;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  color: #232730;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dk-side-head small {
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: #6c727e;
}
.dk-side .spa-tabs {
  flex: none;
  margin: 10px 10px 0;
}
.dk-side .spa-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 12px;
}
.dk-side-body {
  display: block;
}
.spa[data-device="desktop"] .dk-side :is(.spa-ov, .spa-notes, .spa-list) {
  display: block;
  padding: 0;
}
.spa[data-device="desktop"] .dk-side :is(.spa-box, .spa-note, .spa-visit) {
  margin: 0 0 12px;
}
.spa[data-device="desktop"] .dk-side .spa-loads .spa-divider {
  margin-top: 6px;
}
.dk-side-new {
  margin-bottom: 10px;
}
.dk-tabn {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--err);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
}
.dk-pin.sel {
  box-shadow:
    0 0 0 3px #16191d,
    0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* analytics */
.dk-an {
  width: calc(100% - 48px);
  margin: 18px auto 30px;
  padding: 16px 18px 20px;
  border: 1px solid #e6e7ea;
  border-radius: 14px;
  background: #fff;
  font-size: 12px;
}
.dk-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.dk-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 8px;
  background: #f1f2f4;
}
.dk-seg button {
  height: 26px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 12px;
  color: #4c545f;
}
.dk-seg button[aria-pressed="true"] {
  background: #fff;
  color: #16191d;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.dk-right {
  margin-left: auto;
}
.dk-sel {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e1e4e8;
  border-radius: 7px;
  font-size: 12px;
  line-height: 28px;
}
.dk-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  background: #1f8a4c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.dk-export .i {
  width: 14px;
  height: 14px;
}
.dk-devchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 1px solid #e1e4e8;
  border-radius: 14px;
}
.dk-devchip i {
  width: 34px;
  height: 2px;
  background: #16191d;
}
.dk-devchip select {
  border: 0;
  background: none;
  font:
    700 12px "Roboto",
    sans-serif;
  color: #16191d;
  cursor: pointer;
}
.dk-loc {
  font-size: 11.5px;
  color: #8a919b;
}
.dk-ser {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid #e1e4e8;
  border-radius: 14px;
  background: #fff;
  font-size: 12px;
  color: #8a919b;
}
.dk-ser::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}
.dk-ser[aria-pressed="true"] {
  border-color: #1b2433;
  background: #1b2433;
  color: #fff;
  font-weight: 600;
}
.dk-period {
  margin: 4px 0 4px;
}
.dk-period b {
  display: block;
  font-size: 12px;
}
.dk-period small {
  font-size: 10.5px;
  color: #8a919b;
}
.dk-chart {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  font:
    10px "Roboto",
    sans-serif;
  fill: #6b727c;
}
.dk-read {
  margin: 6px 0 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f7f7f8;
}
.dk-read p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 2px 0;
}
.dk-read span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dk-read span i {
  width: 16px;
  height: 2px;
}
.dk-audit {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eeeff1;
}
.dk-audit h4,
.dk-values h4 {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}
.dk-audit h4 b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 10px;
  background: #16191d;
  color: #fff;
  font-size: 10.5px;
}
.dk-arow {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid #f3f4f6;
}
.dk-arow span {
  font-size: 12px;
  font-weight: 600;
}
.dk-arow span i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
}
.dk-arow small {
  display: block;
  margin-left: 13px;
  font-size: 10px;
  font-weight: 400;
  color: #8a919b;
}
.dk-atrack {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #f1f2f4;
}
.dk-atrack i {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 4px;
}
.dk-arow > b {
  text-align: right;
}
.dk-values {
  margin-top: 14px;
}
.dk-vtable {
  display: grid;
  grid-template-columns: 130px repeat(4, 70px);
  gap: 7px 12px;
  font-size: 11.5px;
}
.dk-vtable > span:nth-child(-n + 5) {
  font-size: 10px;
  font-weight: 700;
  color: #8a919b;
}
.dk-vtable > span {
  text-align: right;
}
.dk-vtable > span:first-child {
  text-align: left;
}

/* guide next to the phone */
.spa-tour {
  grid-area: tour;
}
.spa-tour-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-ink);
}
.spa-tour-lead {
  margin: 8px 0 18px;
  font-size: 15.5px;
  color: var(--steel);
  max-width: 34ch;
}
.spa-tour ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.spa-tour ol button {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 0.25s,
    box-shadow 0.3s,
    transform 0.3s var(--ease);
}
.spa-tour ol button .i {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  background: var(--mist);
  color: var(--steel);
  transition:
    background-color 0.25s,
    color 0.25s;
}
.spa-tour ol button:hover {
  border-color: var(--line-2);
  transform: translateX(3px);
}
.spa-tour ol button[aria-current="step"] {
  border-color: var(--ink);
  box-shadow: var(--shadow);
}
.spa-tour ol button[aria-current="step"] .i {
  background: var(--red);
  color: #fff;
}
.spa-tour b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}
.spa-tour small {
  display: block;
  font-size: 13px;
  color: var(--steel);
  line-height: 1.35;
}
.spa-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--steel);
  cursor: pointer;
}
.spa-reset .i {
  width: 16px;
  height: 16px;
}
.spa-reset:hover {
  color: var(--ink);
}

@media (max-width: 1140px) {
  .sp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .spa {
    max-width: 800px;
    width: 100%;
    justify-self: center;
  }
}
@media (max-width: 720px) {
  .spa {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "devs" "tour" "stage";
    gap: 18px;
  }
}
/* the guide turns into a row of chips on phones and next to the desktop frame (script.js sets .tour-chips) */
.spa.tour-chips .spa-tour-lead {
  margin-bottom: 12px;
  max-width: none;
}
.spa.tour-chips .spa-tour ol {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.spa.tour-chips .spa-tour ol::-webkit-scrollbar {
  display: none;
}
.spa.tour-chips .spa-tour li {
  flex: none;
  scroll-snap-align: start;
}
.spa.tour-chips .spa-tour ol button {
  grid-template-columns: auto auto;
  gap: 8px;
  min-height: 46px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
}
.spa.tour-chips .spa-tour ol button .i {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
}
.spa.tour-chips .spa-tour ol button:hover {
  transform: none;
}
.spa.tour-chips .spa-tour small {
  display: none;
}
.spa.tour-chips .spa-tour b {
  font-size: 14px;
  white-space: nowrap;
}
.spa.tour-chips .spa-reset {
  margin-top: 4px;
}
/* 4c. Operations module (Systems / Mobile app / Dashboard) */
.ops {
  margin-top: clamp(80px, 9vw, 112px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
}
.ops-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 32px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.ops-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--green-ink);
}
.ops h3 {
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.95rem);
  max-width: 28ch;
  letter-spacing: -0.02em;
}
.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ops-item {
  padding: 28px 28px 4px 0;
}
.ops-item + .ops-item {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.ops-item .i {
  width: 26px;
  height: 26px;
  margin-bottom: 16px;
  color: var(--green-ink);
}
.ops-item h4 {
  margin-bottom: 6px;
  font-size: 1.15rem;
}
.ops-item p {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--steel);
}
.ops-quote {
  margin-top: 28px;
  padding-left: 14px;
  border-left: 3px solid var(--red);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .ops-grid {
    grid-template-columns: 1fr;
  }
  .ops-item,
  .ops-item + .ops-item {
    padding: 22px 0 18px;
    border-left: 0;
  }
  .ops-item + .ops-item {
    border-top: 1px solid var(--line);
  }
}

/* 4d. Standard setup vs Smartpack247 (30-day comparison) */
.compare {
  margin-top: clamp(88px, 10vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.compare h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  max-width: 18ch;
}
.compare .sec-lead {
  font-size: 1.06rem;
}
.seg {
  position: relative;
  display: inline-flex;
  margin-top: 28px;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.seg button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 12px 18px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--steel);
  cursor: pointer;
  transition: color 0.3s;
}
.seg button[aria-pressed="true"] {
  color: #fff;
}
.seg-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  border-radius: 9px;
  background: var(--ink);
  transition:
    transform 0.5s var(--ease),
    width 0.5s var(--ease),
    background-color 0.4s;
}
.seg[data-mode="smartpack"] .seg-thumb {
  background: var(--green-ink);
}
.note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
  max-width: 44ch;
}
.timeline {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(18px, 2.4vw, 26px);
}
.tl-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  margin-bottom: 18px;
  font-size: 14.5px;
  color: var(--steel);
}
.tl-head b {
  font-weight: 600;
  color: var(--ink);
}
.cells {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 4px;
  padding-bottom: 12px;
}
.cell {
  position: relative;
  height: 60px;
  border-radius: 4px;
  background: #dcefd0;
} /* one day */
.cell.off {
  background: var(--red);
} /* offline day */
.cell::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%) scale(0);
}
.cell.visit::after {
  transform: translateX(-50%) scale(1);
} /* site visit dot */
.cell::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 6px;
  border: 2px solid var(--warn);
  opacity: 0;
}
.cell.alert::before {
  opacity: 1;
} /* early warning frame */
.tl-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}
.tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--steel);
}
.tl-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tl-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #dcefd0;
}
.tl-legend i.off {
  background: var(--red);
}
.tl-legend i.v {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
.tl-legend i.a {
  background: transparent;
  border: 2px solid var(--warn);
}
.tl-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.tl-stats > div + div {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
.tl-stats strong {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tl-stats small {
  font-size: 13.5px;
  color: var(--steel);
  line-height: 1.35;
  display: block;
}
@media (max-width: 960px) {
  .compare {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .cells {
    gap: 2px;
  }
  .cell {
    height: 42px;
    border-radius: 2px;
  }
  .cell::after {
    width: 4px;
    height: 4px;
  }
  .tl-stats > div + div {
    padding-left: 12px;
  }
}

/* 4e. Hardware cards ("One platform, four ways to deploy") */
.family {
  margin-top: clamp(84px, 10vw, 120px);
}
.family-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 14px 32px;
  margin-bottom: 28px;
}
.family-head h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
}
.family-head p {
  color: var(--steel);
  max-width: 46ch;
  font-size: 16.5px;
}
.fam-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.fam {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 22px;
  transition: transform 0.35s var(--ease);
}
.fam figure {
  margin: 0 0 18px;
  aspect-ratio: 240/170;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(#f3f5f2, #fbfcfb);
}
.fam figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
} /* drawing or photo */
.fam:hover {
  transform: translateY(-4px);
}
.fam:hover figure img {
  transform: scale(1.05);
}
.fam-body {
  padding: 0 6px;
}
.fam-body > small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fam h4 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin: 2px 0 6px;
}
.fam p {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--steel);
}
.fam-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.fam-spec > span {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mist);
  font-size: 12.5px;
}
@media (max-width: 980px) {
  .fam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .fam-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   5. RENTAL
   --------------------------------------------------------------------- */
.cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.cat {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition:
    border-color 0.3s,
    box-shadow 0.35s,
    transform 0.35s var(--ease);
}
.cat:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.cat .ic {
  width: 52px;
  height: 52px;
  background: #fff;
  border: 1.5px solid var(--red);
}
.cat b {
  display: block;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.cat small {
  display: block;
  font-size: 14.5px;
  color: var(--steel);
}
/* Service level picker (01–04) and the panel it controls */
.rent {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.steps {
  display: grid;
  gap: 10px;
  align-content: start;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
  width: 100%;
  padding: 17px 18px;
  text-align: left;
  background: #fff;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition:
    border-color 0.3s,
    box-shadow 0.35s,
    transform 0.3s var(--ease);
}
.step:hover {
  border-color: var(--line-2);
}
.step .n {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--steel);
  transition:
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.step b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.step small {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--steel);
}
.step[aria-selected="true"] {
  border-color: var(--ink);
  box-shadow: var(--shadow);
}
.step[aria-selected="true"] .n {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.rent-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 26px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
}
.rent-art {
  aspect-ratio: 560/320;
  border-radius: 14px;
  background: linear-gradient(#eef3f7, #fafbfc);
}
.rent-art svg {
  width: 100%;
  height: 100%;
}
.layer {
  opacity: 0;
} /* parts of the drawing that appear per service level */
.layer.on {
  opacity: 1;
}
.rent-panel h3 {
  font-size: 1.35rem;
  letter-spacing: -0.012em;
}
.rent-desc {
  margin-top: 6px;
  font-size: 16px;
  color: var(--steel);
  min-height: 3.2em;
}
.incl {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}
.incl li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--muted);
  transition: color 0.35s;
}
.incl .box {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: grid;
  place-items: center;
  flex: none;
  transition:
    background-color 0.35s,
    border-color 0.35s;
}
.incl .box .i {
  width: 12px;
  height: 12px;
  color: #fff;
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.3s,
    transform 0.35s var(--ease);
}
.incl li.on {
  color: var(--ink);
}
.incl li.on .box {
  background: var(--green);
  border-color: var(--green);
}
.incl li.on .box .i {
  opacity: 1;
  transform: none;
}
.rent-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 36px;
}
.perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.perks > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
}
.perks .i {
  width: 17px;
  height: 17px;
  color: var(--green-ink);
  stroke-width: 2.4;
}
@media (max-width: 1180px) {
  .cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .rent {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .cats {
    grid-template-columns: 1fr;
  }
}
.ops-buy {
  box-shadow: var(--shadow-lg);
} /* "Buy fuel cells and cartridges": same block as the operations module (section 4c) */
@media (max-width: 520px) {
  .incl {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   6. APPLICATIONS
   On hover a card turns dark and the kit list swaps for a "continuous load" meter.
   --------------------------------------------------------------------- */
.apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 30px 30px;
  transition: background-color 0.4s ease;
}
.app::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid #f2665f;
  border-right: 1.5px solid #f2665f;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition:
    opacity 0.35s,
    transform 0.45s var(--ease);
}
.app .ic {
  width: 50px;
  height: 50px;
  background: var(--mist);
  color: var(--ink);
  margin-bottom: 24px;
  transition:
    background-color 0.35s,
    color 0.35s;
}
.app h3 {
  font-size: 1.32rem;
  letter-spacing: -0.012em;
  margin-bottom: 10px;
  transition: color 0.35s;
}
.app p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--steel);
  transition: color 0.35s;
}
.app-mid {
  display: grid;
  margin: 22px 0 26px;
}
.kit,
.load {
  grid-area: 1/1;
}
.kit {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
  font-size: 14.5px;
  transition:
    opacity 0.35s,
    transform 0.4s var(--ease);
}
.kit li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kit li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--green);
  flex: none;
}
.load {
  align-self: center;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s,
    transform 0.45s var(--ease);
}
.load-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #aeb7c2;
  margin-bottom: 10px;
}
.load-top b {
  font-family: var(--mono);
  font-weight: 500;
  color: #9bd27a;
}
.load .track-bar {
  height: 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.load .fill {
  width: 0;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--green), #f2665f);
  transition: width 0.8s var(--ease);
}
.app-link {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--red);
  cursor: pointer;
  transition: color 0.35s;
}
.app-link .i {
  width: 17px;
  height: 17px;
  transition: transform 0.35s var(--ease);
}
.app-link:hover .i {
  transform: translateX(4px);
}
@media (hover: hover) {
  .app:hover,
  .app:focus-within {
    background: var(--ink);
  }
  .app:hover::before,
  .app:focus-within::before {
    opacity: 1;
    transform: none;
  }
  .app:hover .ic,
  .app:focus-within .ic {
    background: var(--red);
    color: #fff;
  }
  .app:hover h3,
  .app:focus-within h3 {
    color: #fff;
  }
  .app:hover p,
  .app:focus-within p {
    color: #aeb7c2;
  }
  .app:hover .kit,
  .app:focus-within .kit {
    opacity: 0;
    transform: translateY(-8px);
  }
  .app:hover .load,
  .app:focus-within .load {
    opacity: 1;
    transform: none;
  }
  .app:hover .load .fill,
  .app:focus-within .load .fill {
    width: var(--w);
  }
  .app:hover .app-link,
  .app:focus-within .app-link {
    color: #f2665f;
  }
}
@media (max-width: 980px) {
  .apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .apps {
    grid-template-columns: 1fr;
  }
  .app {
    padding: 28px 24px;
  }
}

/* ---------------------------------------------------------------------
   7. WHAT WE COMBINE
   --------------------------------------------------------------------- */
.mix-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.mix-card {
  --c: var(--green-ink);
  display: flex;
  flex-direction: column;
  min-height: 236px;
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition:
    box-shadow 0.35s,
    transform 0.35s var(--ease);
}
.mix-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.mix-card small {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--green-50);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--c);
}
.mix-card h3 {
  margin: 14px 0 8px;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.mix-card p {
  margin-bottom: 22px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--steel);
}
.mix-go {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: auto;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  transition:
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.mix-go .i {
  width: 17px;
  height: 17px;
}
.mix-card.m2 {
  --c: var(--steel);
} /* Rental card */
.mix-card.m2 small {
  background: var(--mist);
}
.mix-card.m3 {
  --c: var(--red);
} /* Service card */
.mix-card.m3 small {
  background: var(--red-50);
}
.mix-card.m4 {
  --c: var(--red);
  background: linear-gradient(180deg, var(--red-50), #fff 70%);
  border-color: #f4d6d4;
} /* SmartPack card */
.mix-card.m4 small {
  background: #fff;
}
.mix-card:hover .mix-go {
  background: var(--c);
  border-color: var(--c);
  color: #fff;
}
/* "What we work with" tags */
.mix-work {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px 32px;
  align-items: baseline;
  margin-top: 44px;
}
.mix-work h4 {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}
.mix-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mix-tags > span {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--mist);
  font-size: 14px;
}
@media (max-width: 1000px) {
  .mix-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .mix-grid {
    grid-template-columns: 1fr;
  }
  .mix-card {
    min-height: 0;
  }
  .mix-work {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   8. FIELD SERVICES: text and video on top, six stages on a line below
   The stage animation is in part 2 (A6).
   --------------------------------------------------------------------- */
.svc-sec {
  padding: clamp(96px, 11vw, 150px) 0;
}
.svc-top {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(56px, 7vw, 88px);
}
.svc-top .sec-lead {
  margin-top: 20px;
}
/* Video (img/field-services.mp4). The "coming soon" panel sits behind it and shows until the file exists. */
.svc-video {
  position: relative;
  margin: 0;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef3ea, #f8f9fa);
  box-shadow: var(--shadow-lg);
}
.svc-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-video-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--steel);
}
.svc-play {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--red);
  box-shadow: var(--shadow);
}
.svc-play .i {
  width: 28px;
  height: 28px;
  margin-left: 4px;
  fill: currentColor;
  stroke: none;
}
@media (max-width: 980px) {
  .svc-top {
    grid-template-columns: 1fr;
  }
}

/* Stages. Positions are measured by script.js: --a/--b first/last circle, --l1/--l2 Monitor/Refuel,
   --len how far the coloured line has reached, --dot where the travelling dot is. */
.track-box {
  --top: 52px;
  --a: 28px;
  --b: 100%;
  --l1: 0px;
  --l2: 0px;
  --len: 0px;
  --dot: 0px;
  position: relative;
}
.track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  padding: var(--top) 0 0;
  margin: 0;
}
.track::before,
.track::after {
  content: "";
  position: absolute;
  top: calc(var(--top) + 28px);
  left: var(--a);
  width: calc(var(--b) - var(--a));
  height: 2px;
  border-radius: 2px;
}
.track::before {
  background: var(--line);
} /* grey line */
.track::after {
  background: linear-gradient(90deg, var(--green), var(--red));
  clip-path: inset(0 calc(100% - var(--len)) 0 0);
} /* coloured progress line */
.svc .node {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--steel);
  display: grid;
  place-items: center;
}
.svc.on .node {
  border-color: var(--green);
  color: var(--green-ink);
  box-shadow: 0 0 0 6px var(--green-50);
} /* reached stage (1–3 green) */
.svc.on:nth-child(n + 4) .node {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 0 6px var(--red-50);
} /* reached stage (4–6 red) */
.svc.cur .node {
  background: var(--green-ink);
  border-color: var(--green-ink);
  color: #fff;
} /* current stage */
.svc.cur:nth-child(n + 4) .node {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.svc .n {
  display: block;
  margin: 20px 0 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}
.svc h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.svc p {
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--steel);
}
/* Loop arc over Monitor and Refuel ("Repeats while the site runs") */
.track-loop {
  position: absolute;
  top: 18px;
  left: var(--l1);
  width: calc(var(--l2) - var(--l1));
  height: 34px;
  border: 2px dashed #b9c0ca;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}
.track-loop span {
  position: absolute;
  left: 50%;
  top: -11px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--mist);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
}
.track-loop .i {
  width: 15px;
  height: 15px;
}
.track-box.looping .track-loop {
  border-color: var(--red);
}
.track-box.looping .track-loop span {
  color: var(--red);
}
@media (max-width: 980px) {
  .track-box {
    --top: 0px;
  }
  .track {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .track::before,
  .track::after {
    left: 27px;
    top: var(--a);
    width: 2px;
    height: calc(var(--b) - var(--a));
  }
  .track::after {
    background: linear-gradient(180deg, var(--green), var(--red));
    clip-path: inset(0 0 calc(100% - var(--len)) 0);
  }
  .svc {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 20px;
    padding-bottom: 34px;
  }
  .svc:last-child {
    padding-bottom: 0;
  }
  .svc .n {
    margin: 2px 0 2px;
  }
  .track-loop {
    top: var(--l1);
    left: -14px;
    width: 22px;
    height: calc(var(--l2) - var(--l1));
    border: 2px dashed var(--line-2);
    border-right: 0;
    border-radius: 22px 0 0 22px;
  }
  .track-loop span {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   9. FUEL CELLS (EFOY) AND FUEL CARTRIDGES
   --------------------------------------------------------------------- */
.efoy-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5.4fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
/* Model picker */
.models {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}
.models-label {
  flex-basis: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--steel);
  margin-bottom: 2px;
}
.models button {
  padding: 10px 15px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s,
    transform 0.25s var(--ease);
}
.models button:hover {
  border-color: var(--ink);
}
.models button[aria-pressed="true"] {
  background: var(--green-ink);
  border-color: var(--green-ink);
  color: #fff;
}
/* Spec table under the model picker */
.specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.specs > div {
  padding: 14px 16px;
}
.specs > div + div {
  border-left: 1px solid var(--line);
}
.specs small {
  display: block;
  font-size: 13px;
  color: var(--steel);
}
.specs strong {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.specs .wide {
  grid-column: 1/-1;
  border-left: 0 !important;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.cls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--green-50);
  color: var(--green-ink);
}
.cls.temp {
  background: var(--red-50);
  color: var(--red-600);
}
.pbar {
  flex: 1;
  min-width: 160px;
  height: 6px;
  border-radius: 6px;
  background: var(--mist);
  overflow: hidden;
}
.pbar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--green), var(--green-ink));
}
.common {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
/* Fuel cell illustration */
.efoy-art {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(180deg, #f4f7f2, #fafbf9);
  aspect-ratio: 520/400;
}
.efoy-art .grid {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(#e6ebe2 1px, transparent 1px),
    linear-gradient(90deg, #e6ebe2 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
  mask-image: linear-gradient(#000 30%, transparent);
}
.efoy-art svg {
  position: relative;
  width: 100%;
  height: 100%;
}
.seal {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--green);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--green-ink);
}
.seal::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(90, 160, 44, 0.55);
}
.efoy-mark,
.efoy-fill {
  fill: var(--green);
} /* "EFOY" wordmarks in the drawings */
/* Fuel cartridges block */
.fuel {
  margin-top: clamp(64px, 8vw, 96px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.fuel-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: 48px;
  align-items: end;
}
.fuel-head .kicker {
  grid-column: 1/-1;
  justify-self: start;
}
.fuel-head h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
}
.fuel-head p {
  max-width: 46ch;
  font-size: 16.5px;
  color: var(--steel);
}
.efoy-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}
.efoy-item .ic {
  margin-bottom: 14px;
}
.efoy-item h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.efoy-item p {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--steel);
}
@media (max-width: 980px) {
  .efoy-grid {
    grid-template-columns: 1fr;
  }
  .efoy-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .fuel-head {
    grid-template-columns: 1fr;
  }
  .fuel-head p {
    margin-top: 12px;
  }
}
@media (max-width: 520px) {
  .efoy-list {
    grid-template-columns: 1fr;
  }
  .seal {
    width: 86px;
    height: 86px;
    font-size: 9.5px;
    top: 12px;
    right: 12px;
  }
  .specs {
    grid-template-columns: 1fr 1fr;
  }
  .specs > div:nth-child(3) {
    grid-column: 1/-1;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ---------------------------------------------------------------------
   10. CALL-TO-ACTION BAND ("Ready to power your next project?")
   --------------------------------------------------------------------- */
.band {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(
    100deg,
    #3f8a22 0%,
    #5aa02c 28%,
    #b8651e 58%,
    #e5251e 88%
  );
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.band-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: clamp(48px, 6vw, 72px) 0;
}
.band h2 {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
}
.band p {
  margin-top: 10px;
  font-size: 17px;
  opacity: 0.92;
}
.band .btn-line {
  margin-top: 24px;
  border-color: #fff;
}
.band .btn-line:hover {
  background: transparent;
  color: #fff;
}
.band-links {
  display: grid;
  gap: 12px;
}
.band-links a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  text-decoration: none;
  transition:
    background-color 0.3s,
    transform 0.3s var(--ease);
}
.band-links a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}
.band-links .ic {
  background: #fff;
  color: var(--ink);
}
.band-links small {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.band-links b {
  font-size: 18px;
  font-weight: 600;
}
@media (max-width: 860px) {
  .band-inner {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   11. CONTACT
   --------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 6fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.c-list {
  display: grid;
  gap: 22px;
  margin-top: 38px;
}
.c-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
}
.c-item small {
  display: block;
  font-size: 14px;
  color: var(--steel);
}
.c-item a {
  display: block;
  width: fit-content;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.c-item a:hover {
  color: var(--red);
}
.c-addr {
  margin-top: 8px;
  font-style: normal;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}
.c-addr b {
  font-weight: 400;
}
/* Form */
.form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 36px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.field {
  display: grid;
  gap: 7px;
}
.field label,
.form legend {
  font-size: 14.5px;
  font-weight: 600;
}
.field label em {
  font-style: normal;
  color: var(--red);
}
.form input,
.form select,
.form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d3d9e0;
  border-radius: 10px;
  padding: 13px 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.25s;
}
.form textarea {
  min-height: 120px;
  resize: vertical;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(22, 25, 29, 0.08);
}
.form [aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(229, 37, 30, 0.1);
}
.form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.form legend {
  margin-bottom: 9px;
  padding: 0;
}
.choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choice label {
  position: relative;
  cursor: pointer;
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice span {
  display: inline-block;
  padding: 9px 15px;
  background: #fff;
  border: 1px solid #d3d9e0;
  border-radius: 999px;
  font-size: 15px;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.choice label:hover span {
  border-color: var(--ink);
}
.choice input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.choice input:focus-visible + span {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 4px;
}
.form-msg {
  font-size: 14.5px;
  color: var(--steel);
  flex: 1;
  min-width: 220px;
}
.form-msg.err {
  color: var(--red-600);
}
@media (max-width: 980px) {
  .contact {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .row2 {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------------- */
.site-footer {
  padding: 64px 0 30px;
  border-top: 1px solid var(--line);
}
.f-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(
      0,
      1.2fr
    );
  gap: 40px;
}
.f-brand .brand img {
  width: 64px;
}
.f-brand p {
  margin-top: 18px;
  max-width: 36ch;
  font-size: 15.5px;
  color: var(--steel);
}
.f-grid h4 {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.f-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 15.5px;
}
.f-grid a {
  text-decoration: none;
  color: var(--steel);
  transition: color 0.2s;
}
.f-grid a:is([href="#efoy"], [href="#fuel"]) {
  color: var(--green-ink);
}
.f-grid a:hover {
  color: var(--red);
}
.f-grid li small {
  display: block;
  font-size: 13px;
  color: var(--muted);
}
.f-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.socials {
  display: flex;
  gap: 10px;
}
.socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.socials a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.socials svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
@media (max-width: 900px) {
  .f-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .f-brand {
    grid-column: 1/-1;
  }
}
@media (max-width: 480px) {
  .f-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   13. FLOATING "GET IN TOUCH" BUTTON (bottom right, jumps to the contact form)
   Its slide-in and pulse are in part 2 (A9).
   --------------------------------------------------------------------- */
.cta-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 9px 0 24px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 18px 38px -12px rgba(229, 37, 30, 0.6);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s,
    background-color 0.25s,
    opacity 0.3s,
    visibility 0.3s;
}
.cta-fab-go {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--red);
}
.cta-fab-go .i {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}
.cta-fab:hover {
  background: var(--red-600);
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -12px rgba(229, 37, 30, 0.65);
}
.cta-fab-ic {
  display: none;
}
/* Phones: a compact round button with an envelope; "Get in touch" stays readable for screen readers */
@media (max-width: 600px) {
  .cta-fab {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    gap: 0;
    padding: 0;
    justify-content: center;
  }
  .cta-fab-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cta-fab-go {
    display: none;
  }
  .cta-fab-ic {
    display: block;
    width: 24px;
    height: 24px;
    stroke-width: 2;
  }
}
@media print {
  .cta-fab {
    display: none;
  }
}
/* It steps aside on the contact form, and on phones while the Smartpack247 app demo is on screen (so it does not cover the demo menu) */
.at-contact .cta-fab {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
}
@media (max-width: 720px) {
  .spa-near .cta-fab {
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
  }
}
.spa-near:has(.spa:not([data-device="mobile"])) .cta-fab {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
} /* the desktop frame reaches the right edge of the demo column */

/* ---------------------------------------------------------------------
   14. EFOY HIGHLIGHT: every "EFOY" in the text is marked <span class="efoy">EFOY</span>
   --------------------------------------------------------------------- */
.efoy {
  color: var(--green-ink);
  font-weight: 600;
}
.models button[aria-pressed="true"] .efoy {
  color: inherit;
}

/* ---------------------------------------------------------------------
   15. PHONE ADJUSTMENTS (screens up to 600px wide)
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  body {
    font-size: 17px;
  }
  .container {
    width: min(100% - 32px, var(--container));
  }
  .actions .btn {
    flex: 1 1 100%;
  }
  .btn {
    white-space: normal;
    text-align: center;
    height: auto;
    min-height: 50px;
    padding-block: 14px;
    line-height: 1.25;
  }
}

/* =====================================================================
   PART 2 – ANIMATIONS (everything that moves by itself)
   Hover effects are in part 1.

   How to change an animation
     - Speed: change the time (for example 2.4s -> 4s is slower).
     - Delay before it starts: the second time value (for example ".8s").
     - Remove one animation: delete its block.
     - Remove ALL animations: delete everything from here to the end.
       The page still works and shows everything, just without motion.
   Visitors who turn on "reduce motion" on their device get no animations (A10).

     A1. Page load: hero text and illustration appear
     A2. Scroll: blocks fade in as you scroll
     A3. Hero illustration: live dots, LiDAR beam, signal, lamps
     A4. Smartpack247: app demo, 30-day comparison
     A5. Rental: drawing parts appear per service level
     A6. Field services: stages light up in order (Monitor and Refuel loop), then repeat
     A7. Fuel cells (EFOY): seal, fan, model picker
     A8. Call-to-action band: slow colour drift
     A9. Floating "Get in touch" button: slide-in and pulse
     A10. Reduce motion (accessibility)
   ===================================================================== */

/* ---------------------------------------------------------------------
   A1. PAGE LOAD – hero text, headline lines and illustration appear
   The script adds .loaded to the page right after it opens.
   --------------------------------------------------------------------- */
.js .hero-copy > * {
  opacity: 0;
  transform: translateY(16px);
}
.loaded .hero-copy > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .hero h1 span {
  opacity: 0;
  transform: translateY(24px);
}
.loaded .hero h1 span {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: calc(120ms + var(--l, 0) * 110ms);
}
.js .hero-visual {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
}
.loaded .hero-visual {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.1s var(--ease) 0.2s,
    transform 1.1s var(--ease) 0.2s;
}
/* live-reading labels and their red pointer lines */
.js .callout {
  opacity: 0;
  scale: 0.92;
}
.loaded .callout {
  opacity: 1;
  scale: 1;
  transition:
    opacity 0.5s ease,
    scale 0.5s var(--ease);
  transition-delay: var(--cd);
}
.js .leader {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.loaded .leader {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s ease;
  transition-delay: var(--ld);
}
.js .anchor {
  opacity: 0;
}
.loaded .anchor {
  opacity: 1;
  transition: opacity 0.3s ease;
  transition-delay: var(--ld);
}

/* ---------------------------------------------------------------------
   A2. SCROLL – blocks marked .rv fade up when they come into view
   --d on an element staggers it (each step = 90ms later).
   --------------------------------------------------------------------- */
.js .rv {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .rv.in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------
   A3. HERO ILLUSTRATION – small loops that make the site look live
   --------------------------------------------------------------------- */
/* "Online" dot: soft ring that pulses outwards (also in the operations module) */
.dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0% {
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
/* LiDAR beam: dashes moving upwards */
.beam {
  stroke-dasharray: 3 7;
  animation: beam 1.8s linear infinite;
}
@keyframes beam {
  to {
    stroke-dashoffset: -20;
  }
}
/* Radio signal arcs on the mast: blink one after the other */
.sig {
  animation: sig 2.6s ease-in-out infinite;
  opacity: 0.2;
}
.sig.s2 {
  animation-delay: 0.3s;
}
@keyframes sig {
  0%,
  100% {
    opacity: 0.15;
  }
  40% {
    opacity: 1;
  }
}
/* Status lamps: gentle blink */
.led {
  animation: led 2s ease-in-out infinite;
}
@keyframes led {
  50% {
    opacity: 0.35;
  }
}

/* ---------------------------------------------------------------------
   A4. Smartpack247
   --------------------------------------------------------------------- */
/* App demo: screens slide in (forward from the right, back from the left, menu tabs fade up) */
.spa-view.in-right {
  animation: spaRight 0.4s var(--ease);
}
.spa-view.in-left {
  animation: spaLeft 0.4s var(--ease);
}
.spa-view.in-fade,
.spa-tabbody.in-fade {
  animation: spaFade 0.35s var(--ease);
}
@keyframes spaRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
}
@keyframes spaLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
}
@keyframes spaFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
/* App demo: battery bars fill from left to right when a screen opens */
.spa-batt i.on {
  animation: spaTick 0.45s ease both;
  animation-delay: calc(var(--k) * 14ms);
}
@keyframes spaTick {
  from {
    opacity: 0.12;
  }
}
/* App demo: sheets slide up, the message bar fades in, buttons press in */
.spa-sheet {
  animation: spaShade 0.3s ease;
}
.spa-panel {
  animation: spaUp 0.4s var(--ease);
}
@keyframes spaShade {
  from {
    background: rgba(22, 25, 29, 0);
  }
}
@keyframes spaUp {
  from {
    transform: translateY(100%);
  }
}
.spa[data-device="desktop"] .spa-panel {
  animation: spaPop 0.3s var(--ease);
} /* desktop: dialogs pop in */
@keyframes spaPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
.spa-toast {
  transition:
    opacity 0.3s ease,
    transform 0.35s var(--ease);
}
.spa-btn:active,
.spa-wide:active,
.spa-fab:active {
  transform: scale(0.95);
}
/* App demo: soft ring on the first device until the visitor taps something */
.spa-card.hint::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  border: 2px solid var(--red);
  opacity: 0;
  pointer-events: none;
  animation: spaHint 2.4s var(--ease) 1.2s infinite;
}
@keyframes spaHint {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}
/* App demo: fingerprint pulses while "scanning" */
.spa-scan .i {
  animation: spaScan 1s ease-in-out infinite;
}
@keyframes spaScan {
  50% {
    opacity: 0.4;
    transform: scale(0.92);
  }
}
/* 30-day comparison: days change colour one after another (16ms apart) */
.cell {
  transition: background-color 0.45s ease;
  transition-delay: calc(var(--i) * 16ms);
}
.cell::after {
  transition: transform 0.35s var(--ease);
  transition-delay: calc(var(--i) * 16ms);
}
.cell::before {
  transition: opacity 0.4s;
  transition-delay: calc(var(--i) * 16ms);
}

/* ---------------------------------------------------------------------
   A5. RENTAL – parts of the drawing (power pack, antenna…) fade in per level
   --------------------------------------------------------------------- */
.layer {
  transform: translateY(12px);
  transition:
    opacity 0.5s ease,
    transform 0.6s var(--ease);
}
.layer.on {
  transform: none;
}

/* ---------------------------------------------------------------------
   A6. FIELD SERVICES – Plan, Install, Report, Monitor, Refuel, back to Monitor
       and Refuel (the loop arc lights up), Decommission, then start over
   Order and timing are set in script.js ("7. Field services"): one step every 3 s.
   Here: how each step moves.
   --------------------------------------------------------------------- */
.track {
  --walk: 1.4s cubic-bezier(0.65, 0, 0.35, 1);
} /* how long the line and dot take to reach the next stage */
.track::after {
  transition:
    clip-path var(--walk),
    opacity 0.8s ease;
}
/* travelling dot */
.track.anim .svc:first-child::after {
  content: "";
  position: absolute;
  top: calc(var(--top) + 29px);
  left: var(--a);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--green);
  box-shadow: 0 0 0 5px rgba(90, 160, 44, 0.16);
  transform: translateX(var(--dot));
  transition:
    transform var(--walk),
    border-color 0.8s ease,
    box-shadow 0.8s ease,
    opacity 0.8s ease;
}
.track.hot .svc:first-child::after {
  border-color: var(--red);
  box-shadow: 0 0 0 5px rgba(229, 37, 30, 0.14);
} /* dot turns red from Monitor on */
@media (max-width: 980px) {
  .track.anim .svc:first-child::after {
    left: 28px;
    top: var(--a);
    transform: translateY(var(--dot));
  }
}
/* loop arc: turns red and gently blinks while Monitor and Refuel repeat */
.track-loop {
  transition: border-color 0.6s ease;
}
.track-loop span {
  transition: color 0.6s ease;
}
.track-box.looping .track-loop {
  animation: loopBlink 1.2s ease-in-out 2 alternate;
}
@keyframes loopBlink {
  to {
    opacity: 0.55;
  }
}
/* stage circles change colour softly */
.svc .node {
  transition:
    border-color 0.7s ease,
    color 0.7s ease,
    background-color 0.7s ease,
    box-shadow 0.9s var(--ease),
    transform 0.5s var(--ease);
}
.svc:hover .node {
  transform: translateY(-3px);
}
/* soft ring pulsing around the current stage */
.svc .node::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  border: 1.5px solid var(--green);
  opacity: 0;
  pointer-events: none;
}
.svc:nth-child(n + 4) .node::after {
  border-color: var(--red);
}
.svc.cur .node::after {
  animation: halo 2.8s var(--ease) 0.5s infinite;
}
@keyframes halo {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
/* upcoming stages are dimmed until reached */
.track.anim .svc > div {
  opacity: 0.45;
  transition: opacity 0.9s ease;
}
.track.anim .svc.on > div {
  opacity: 1;
}
/* between loops the line fades out, then jumps back to the start */
.track.fade::after,
.track.fade .svc:first-child::after {
  opacity: 0;
}
.track.snap::after,
.track.snap .svc:first-child::after,
.track.snap .svc .node,
.track.snap .svc > div {
  transition: none !important;
}

/* ---------------------------------------------------------------------
   A7. FUEL CELLS (EFOY)
   --------------------------------------------------------------------- */
/* "Fuel cells made in Germany" seal floats up and down */
.seal {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  50% {
    transform: translateY(-6px);
  }
}
/* Fuel cell fan spins */
.fan {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 3.2s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Model picker: the fuel cell drawing and power bar change smoothly */
#efoyBody,
#efoyFace {
  transition: fill 0.5s ease;
}
.pbar i {
  transition: width 0.7s var(--ease);
}

/* ---------------------------------------------------------------------
   A8. CALL-TO-ACTION BAND – the green-to-red background drifts slowly
   --------------------------------------------------------------------- */
.band {
  background-size: 125% 100%;
  animation: band 14s ease-in-out infinite alternate;
}
@keyframes band {
  to {
    background-position: 100% 0;
  }
}

/* ---------------------------------------------------------------------
   A9. FLOATING "GET IN TOUCH" BUTTON – invites a click
   Slides in 0.8s after the page opens; a red ring pulses out every 3.2s
   and the arrow nudges forward at the same moment.
   --------------------------------------------------------------------- */
.cta-fab {
  animation: fabIn 0.7s var(--ease) 0.8s backwards;
}
@keyframes fabIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.94);
  }
}
.cta-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(229, 37, 30, 0.6);
  opacity: 0;
  pointer-events: none;
  animation: fabPulse 3.2s var(--ease) 1.6s infinite;
}
.cta-fab:hover::before {
  animation-play-state: paused;
  opacity: 0;
}
@keyframes fabPulse {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.1, 1.4);
  }
}
.cta-fab-go .i {
  animation: fabNudge 3.2s ease-in-out 1.6s infinite;
}
@keyframes fabNudge {
  0%,
  55%,
  75%,
  100% {
    transform: none;
  }
  65%,
  85% {
    transform: translateX(3px);
  }
}

/* ---------------------------------------------------------------------
   A10. REDUCE MOTION – turns everything above off for visitors who ask for it
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}