/* Home page "Facility Floor Plan" section — a schematic echo of the real
   rack-system-placement drawing from the facility deck (racking zone /
   distribution zone / loading bay with numbered docks), plus real facility
   photography. Stays on the site's classic amber brand accent (unlike the
   experimental .bv2/.ffp booking-page views, which are deliberately scoped
   to blue) since this lives on the public home page. */

.hfp-section { position: relative; }

.hfp-schematic {
  display: flex; align-items: stretch; gap: 0; border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-1);
  background-image: linear-gradient(var(--border-1) 1px, transparent 1px), linear-gradient(90deg, var(--border-1) 1px, transparent 1px);
  background-size: 26px 26px;
  min-height: 300px;
}

.hfp-zone {
  flex: 1.3; padding: 24px 26px; display: flex; flex-direction: column;
  border-right: 1px dashed var(--border-2);
}
.hfp-zone-distribution { flex: 1; }

.hfp-zone-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-0); letter-spacing: 0.02em; margin-bottom: 16px; }
.hfp-zone-tag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--bg-0); background: var(--accent); padding: 2px 7px; border-radius: 4px;
}

.hfp-rack-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: auto; }
.hfp-rack-grid-sparse { grid-template-columns: repeat(4, 1fr); }
.hfp-pallet {
  aspect-ratio: 1; border-radius: 3px; background: var(--accent);
  animation: hfp-pallet-fill 3.2s ease-in-out infinite;
}

@keyframes hfp-pallet-fill {
  0% { opacity: 0.12; transform: scale(0.7); }
  20% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.12; transform: scale(0.7); }
}

.hfp-zone-foot { margin-top: 16px; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }

/* Forklift "at work" cycle: drive to the pallet, dip down to fork it,
   lift + carry it back across the aisle, dip again to place it, then
   return empty — rather than a flat back-and-forth slide. A companion
   .hfp-forklift-load chip (the "pallet on the forks") fades in only
   while it's being carried, timed to the same keyframe percentages. */
.hfp-forklift-track { position: relative; height: 30px; margin: 14px 0 6px; }
.hfp-forklift {
  position: absolute; left: 0; top: 4px; color: var(--accent-strong);
  animation: hfp-forklift-work 6.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes hfp-forklift-work {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  16%  { transform: translate(58px, 0) rotate(0deg) scale(1); }
  21%  { transform: translate(60px, -3px) rotate(-6deg) scale(1.08); }
  27%  { transform: translate(58px, 0) rotate(0deg) scale(1); }
  45%  { transform: translate(58px, 0) rotate(180deg) scale(1); }
  70%  { transform: translate(4px, 0) rotate(180deg) scale(1); }
  75%  { transform: translate(2px, -3px) rotate(174deg) scale(1.08); }
  81%  { transform: translate(4px, 0) rotate(180deg) scale(1); }
  95%  { transform: translate(2px, 0) rotate(360deg) scale(1); }
  100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
.hfp-forklift-load {
  position: absolute; left: 0; top: 4px; width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent); opacity: 0; pointer-events: none;
  animation: hfp-forklift-load-carry 6.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes hfp-forklift-load-carry {
  0%, 20% { opacity: 0; transform: translate(58px, 3px); }
  27% { opacity: 1; transform: translate(58px, 3px); }
  45%, 70% { opacity: 1; transform: translate(4px, 3px); }
  76%, 100% { opacity: 0; transform: translate(4px, 3px); }
}

.hfp-loading-bay {
  flex: 0 0 150px; background: var(--surface-1); padding: 22px 18px; display: flex; flex-direction: column; align-items: center;
}
.hfp-loading-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); margin-bottom: 14px; }
.hfp-docks { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.hfp-door {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 20px; border: 1px solid var(--border-2); border-radius: 3px; background: var(--bg-1);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
}
/* Backs into the dock, dwells while "loading", then pulls forward and out
   onto the yard with a slight turning rotation — a clear departure, not a
   symmetric peek-in/peek-out. */
.hfp-truck {
  position: absolute; right: -8px; top: 50%; transform: translate(26px, -50%) rotate(0deg);
  color: var(--accent-strong); opacity: 0; transform-origin: left center;
  animation: hfp-truck-depart 9s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.hfp-truck-1 { animation-delay: 0s; }
.hfp-truck-4 { animation-delay: 2.2s; }
.hfp-truck-6 { animation-delay: 4.6s; }
.hfp-truck-9 { animation-delay: 6.8s; }
@keyframes hfp-truck-depart {
  0%   { transform: translate(26px, -50%) rotate(0deg); opacity: 0; }
  10%  { transform: translate(4px, -50%) rotate(0deg); opacity: 1; }
  45%  { transform: translate(4px, -50%) rotate(0deg); opacity: 1; }
  60%  { transform: translate(14px, -50%) rotate(4deg); opacity: 1; }
  80%  { transform: translate(60px, -46%) rotate(9deg); opacity: 0.75; }
  100% { transform: translate(120px, -40%) rotate(9deg); opacity: 0; }
}
.hfp-loading-foot { margin-top: 14px; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }

/* Second forklift lane in the racking zone + small packing chips in the
   distribution zone's forklift track — a busier, more "always-moving" feel
   without cluttering the pallet grid itself. */
.hfp-forklift-track-alt .hfp-forklift { animation-duration: 5.4s; animation-delay: 1.1s; color: var(--accent); }
.hfp-forklift-track-alt .hfp-forklift-load { animation-duration: 5.4s; animation-delay: 1.1s; background: var(--accent-strong); }
.hfp-pack-chip {
  position: absolute; top: 2px; color: var(--accent-strong); opacity: 0;
  animation: hfp-pack-chip-move 6.5s ease-in-out infinite;
}
.hfp-pack-chip-1 { left: 0; animation-delay: 0.6s; }
.hfp-pack-chip-2 { left: 0; animation-delay: 3.4s; }
@keyframes hfp-pack-chip-move {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; transform: translateX(48px); }
  100% { transform: translateX(56px); opacity: 0; }
}
.hfp-dock-forklift {
  position: absolute; left: -6px; top: 50%; transform: translate(-100%, -50%);
  color: var(--accent); opacity: 0; animation: hfp-dock-forklift-move 7s ease-in-out infinite;
}
.hfp-dock-forklift-8 { animation-delay: 2.4s; }
@keyframes hfp-dock-forklift-move {
  0%, 100% { opacity: 0; transform: translate(-100%, -50%); }
  20% { opacity: 1; transform: translate(-40%, -50%); }
  50% { opacity: 1; transform: translate(10%, -50%); }
  80% { opacity: 1; transform: translate(-40%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hfp-pallet, .hfp-forklift, .hfp-truck, .hfp-pack-chip, .hfp-dock-forklift { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hfp-forklift-load { animation: none !important; opacity: 0 !important; }
}

/* ---- Photo gallery ---- */
.hfp-gallery { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin: 40px 0; }
.hfp-photo { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-1); display: block; }
.hfp-photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.45s ease; }
.hfp-photo:hover img { transform: scale(1.06); }
.hfp-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; font-size: 12.5px; color: var(--brand-light-gray);
  background: linear-gradient(to top, var(--scrim), transparent);
}

/* ---- Stat strip (mirrors .hero-stats look) ---- */
.hfp-stats { display: flex; gap: var(--sp-7); flex-wrap: wrap; justify-content: center; padding-top: var(--sp-6); border-top: 1px solid var(--border-1); }
.hfp-stats .stat-num { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--accent-strong); text-align: center; }
.hfp-stats .stat-label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; text-align: center; }

@media (max-width: 860px) {
  .hfp-schematic { flex-direction: column; }
  .hfp-zone { border-right: none; border-bottom: 1px dashed var(--border-2); }
  .hfp-loading-bay { flex: none; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .hfp-docks { flex-direction: row; flex-wrap: wrap; width: auto; }
  .hfp-door { width: 30px; }
  .hfp-gallery { grid-template-columns: 1fr; }
  .hfp-stats { gap: var(--sp-5); }
}

/* ---- Interactive stat cards (replaces the plain stat strip) ---- */
.hfp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hfp-stat-card {
  border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface-1);
  padding: 20px 18px; text-align: center; color: var(--accent); transition: border-color 0.15s ease, transform 0.15s ease;
  cursor: default;
}
.hfp-stat-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.hfp-stat-card .stat-num { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--accent-strong); margin: 10px 0 2px; }
.hfp-stat-card .stat-label { font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.hfp-stat-hover {
  font-size: 11px; color: var(--text-2); margin-top: 8px; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}
.hfp-stat-card:hover .hfp-stat-hover { max-height: 40px; opacity: 1; margin-top: 8px; }
@media (max-width: 720px) { .hfp-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Products (Air / Ocean freight) ---- */
.hfp-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hfp-product-card {
  border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--surface-1);
  padding: 28px 26px; display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.hfp-product-anim { position: absolute; top: 0; left: 0; right: 0; height: 26px; overflow: hidden; pointer-events: none; }
.hfp-plane, .hfp-ship { position: absolute; top: 4px; left: -30px; opacity: 0.55; }
.hfp-plane { animation: hfp-fly-across 9s linear infinite; }
.hfp-ship { animation: hfp-sail-across 11s linear infinite; }
/* Freight-mode identity color per card — Air Blue for the Air Freight
   card's corner glyph, Ocean Blue (lightened for dark-mode legibility via
   --mode-ocean-fg) for Ocean Freight's — instead of both defaulting to the
   generic accent blue, so the two products read as distinct modes at a
   glance, matching the same mode language used below in .hfp-lanes. */
.hfp-product-card-air .hfp-plane { color: var(--mode-air); }
.hfp-product-card-ocean .hfp-ship { color: var(--mode-ocean-fg); }
@keyframes hfp-fly-across { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(calc(100% + 60px)) translateY(-6px); } }
@keyframes hfp-sail-across { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100% + 60px)); } }

/* ---- Multimodal transport strip ---- */
.hfp-multimodal { position: relative; height: 40px; margin-top: 28px; }
.hfp-multimodal-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border-2); }
.hfp-mm-icon {
  position: absolute; top: 50%; transform: translate(-50%, -50%); color: var(--accent);
  background: var(--bg-1); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
}
.hfp-mm-plane { animation: hfp-mm-move 8s ease-in-out infinite; }
.hfp-mm-ship { animation: hfp-mm-move 8s ease-in-out infinite 2s; }
.hfp-mm-train { animation: hfp-mm-move 8s ease-in-out infinite 4s; }
.hfp-mm-truck { animation: hfp-mm-move 8s ease-in-out infinite 6s; }
@keyframes hfp-mm-move {
  0% { left: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hfp-plane, .hfp-ship, .hfp-mm-icon { animation: none !important; opacity: 0.7 !important; }
}
.hfp-product-card .icon-badge { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--accent); margin-bottom: var(--sp-3); }
.hfp-product-card-air .icon-badge { color: var(--mode-air); }
.hfp-product-card-ocean .icon-badge { color: var(--mode-ocean-fg); }
.hfp-product-card h3 { margin: 0 0 6px; font-family: var(--font-display); }
/* Pin the CTA to the bottom of both cards regardless of how many tier rows
   each has — grid items already stretch to equal height, so margin-top:auto
   on the last flex child does the rest. */
.hfp-product-card > a.btn { margin-top: auto; align-self: flex-start; }
.hfp-tier-list { margin: 16px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.hfp-tier { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-1); border-radius: var(--radius-sm); background: var(--surface-2); }
.hfp-tier-name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent-strong); flex-shrink: 0; }
.hfp-tier-desc { font-size: 12.5px; color: var(--text-2); text-align: right; }
@media (max-width: 720px) {
  .hfp-product-grid { grid-template-columns: 1fr; }
  .hfp-tier { flex-direction: column; gap: 2px; }
  .hfp-tier-desc { text-align: left; }
}

/* ---- Global Network (animated multimodal route lanes) ---- */
.hfp-lanes {
  display: flex; flex-direction: column; gap: 26px; border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); background: var(--bg-1); padding: 40px 44px;
  background-image: linear-gradient(var(--border-1) 1px, transparent 1px), linear-gradient(90deg, var(--border-1) 1px, transparent 1px);
  background-size: 30px 30px;
}
.hfp-lane { display: flex; align-items: center; gap: 22px; }
.hfp-lane-label {
  display: flex; align-items: center; gap: 9px; width: 168px; flex-shrink: 0;
  font-size: 13.5px; font-weight: 700; color: var(--text-1); text-transform: uppercase; letter-spacing: 0.03em;
}
.hfp-lane-label svg { color: var(--accent); }
/* Each lane's own freight-mode identity color — Air/Ocean/Land(rail)/Road
   — instead of every lane defaulting to the same accent blue, so the
   "every mode, one platform" strip actually reads as four distinct modes
   rather than four identical rows. Rail runs on the Sand/Land token
   (guideline: "Land / Ground / Terrain / Movement") since the palette has
   no separate rail color and rail is fundamentally a ground network,
   distinct from Road's own dedicated gray. */
.hfp-lane-air .hfp-lane-label svg { color: var(--mode-air); }
.hfp-lane-ocean .hfp-lane-label svg { color: var(--mode-ocean-fg); }
.hfp-lane-rail .hfp-lane-label svg { color: var(--mode-land); }
.hfp-lane-road .hfp-lane-label svg { color: var(--mode-road-fg); }
.hfp-lane-track { position: relative; flex: 1; height: 116px; overflow: hidden; }
.hfp-lane-track-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-2) 0 10px, transparent 10px 20px);
}
@media (max-width: 720px) { .hfp-lane-track { height: 76px; } }
.hfp-lane-vehicle { position: absolute; top: 50%; left: -20%; transform: translate(0, -50%); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }
.hfp-lane-vehicle-plane { animation: hfp-lane-travel 9s linear infinite; }
.hfp-lane-vehicle-ship { animation: hfp-lane-travel 14s linear infinite; }
.hfp-lane-vehicle-train { animation: hfp-lane-travel 12s linear infinite; }
.hfp-lane-vehicle-truck { animation: hfp-lane-travel 10s linear infinite; }
@keyframes hfp-lane-travel {
  0% { left: -20%; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}
@media (max-width: 720px) {
  .hfp-lane { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hfp-lane-track { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hfp-lane-vehicle { animation: none !important; left: 6% !important; opacity: 1 !important; }
}

/* ---- Packing & Handling — large-scale looping animation ---- */
.hfp-pack-scene {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); background: var(--bg-1); overflow: hidden; min-height: 260px;
}
.hfp-pack-conveyor {
  position: relative; padding: 40px 24px; display: flex; align-items: center;
  border-right: 1px dashed var(--border-2);
  background-image: linear-gradient(var(--border-1) 1px, transparent 1px), linear-gradient(90deg, var(--border-1) 1px, transparent 1px);
  background-size: 26px 26px;
}
.hfp-pack-belt { position: absolute; left: 0; right: 0; bottom: 54px; height: 4px; background: var(--surface-3); border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
.hfp-pack-box {
  position: absolute; bottom: 40px; left: -60px; width: 46px; height: 46px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: var(--on-accent-dark);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  animation: hfp-pack-box-travel 7.8s linear infinite;
}
@keyframes hfp-pack-box-travel {
  0% { left: -60px; opacity: 0; transform: scale(0.85); }
  8% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(1); left: calc(100% - 30px); }
  82% { opacity: 1; transform: scale(0.5); left: calc(100% - 20px); }
  100% { opacity: 0; transform: scale(0.3); left: calc(100% - 10px); }
}
.hfp-pack-station {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 32px 24px; background: var(--surface-1);
}
.hfp-pack-pallet { position: relative; width: 120px; height: 96px; display: flex; align-items: center; justify-content: center; }
.hfp-pack-stack { position: relative; width: 84px; height: 84px; }
.hfp-pack-crate {
  position: absolute; left: 50%; width: 68px; height: 26px; border-radius: 4px;
  transform: translateX(-50%) scale(0.6); opacity: 0; border: 1px solid rgba(0,0,0,0.25);
  animation: hfp-pack-crate-stack 7.8s ease-in-out infinite;
}
.hfp-pack-crate-1 { bottom: 0; background: var(--accent); animation-delay: 0.2s; }
.hfp-pack-crate-2 { bottom: 24px; background: var(--accent-strong); animation-delay: 1s; }
.hfp-pack-crate-3 { bottom: 48px; background: var(--illustration-neutral); animation-delay: 1.8s; }
@keyframes hfp-pack-crate-stack {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.6); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  75% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  90% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(1); }
}
.hfp-pack-wrap {
  position: absolute; inset: 8px 18px; border: 3px solid transparent; border-radius: 10px;
  /* Accent-derived (Cargoer Blue) at one-off opacities stronger than any
     shared --accent-glow-* step — kept literal rather than adding two more
     single-use tokens. */
  border-top-color: rgba(37, 99, 235, 0.7); border-right-color: rgba(37, 99, 235, 0.35);
  opacity: 0; animation: hfp-pack-wrap-spin 7.8s ease-in-out infinite;
}
@keyframes hfp-pack-wrap-spin {
  0%, 55% { opacity: 0; transform: rotate(0deg); }
  60% { opacity: 1; }
  85% { opacity: 1; transform: rotate(320deg); }
  92%, 100% { opacity: 0; transform: rotate(320deg); }
}
.hfp-pack-forklift {
  position: absolute; left: -60px; bottom: 26px; color: var(--accent-strong);
  animation: hfp-pack-forklift-cycle 7.8s ease-in-out infinite;
}
@keyframes hfp-pack-forklift-cycle {
  0%, 78% { left: -60px; opacity: 0; }
  84% { left: 30px; opacity: 1; }
  92% { left: 30px; opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.hfp-pack-label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 860px) {
  .hfp-pack-scene { grid-template-columns: 1fr; }
  .hfp-pack-conveyor { border-right: none; border-bottom: 1px dashed var(--border-2); min-height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .hfp-pack-box, .hfp-pack-crate, .hfp-pack-wrap, .hfp-pack-forklift { animation: none !important; }
  .hfp-pack-crate { opacity: 1 !important; transform: translateX(-50%) !important; }
  .hfp-pack-box { opacity: 1 !important; left: 40% !important; }
}

/* ---- Animated floor plan reused as a clickable zone picker (booking wizard's
   "Visual Floor Plan" view) — same schematic, just wrapped in <button>s with
   a hover/active affordance layered on top. ---- */
.hfp-schematic-picker .hfp-zone.hfp-zone-pickable {
  cursor: pointer; border: none; text-align: left; font-family: inherit; position: relative;
  transition: background 0.15s ease;
  /* Buttons need explicit resets a <div> gets for free: the UA stylesheet
     paints an opaque button face (masking the dark schematic background)
     and gives form elements an implicit min-width/min-height of "auto"
     inside a flex row, which refuses to shrink and overlaps neighboring
     zones once there are 3+ of them instead of the original hardcoded 2. */
  background: transparent; color: inherit; appearance: none; -webkit-appearance: none;
  min-width: 0; min-height: 0;
}
.hfp-schematic-picker .hfp-zone.hfp-zone-pickable:hover { background: var(--accent-glow-soft); }
.hfp-schematic-picker .hfp-zone.hfp-zone-pickable.active { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.hfp-zone-selected-tag {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent); color: var(--on-accent-dark); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 3px 9px; border-radius: 10px; z-index: 2;
}

/* ---- Documentation & Customs Clearance ---- */
.hfp-customs-scene {
  border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--bg-1);
  padding: 56px 40px 44px; position: relative; overflow: hidden;
}
.hfp-customs-track { position: relative; height: 90px; }
.hfp-customs-line { position: absolute; left: 3%; right: 3%; top: 24px; height: 2px; background: var(--border-2); }
/* Nodes used to be absolutely positioned at fixed left:X% offsets with a
   translateX(-50%) centering transform (see the architecture plan §35's
   sibling fix in WarehouseLifecycle.tsx/.hfp-lifecycle-* for the identical
   bug this was modeled on, in reverse: that component was built FROM this
   one's node/line/traveling-marker idiom, §34, but only it got fixed at the
   time). On a narrow mobile viewport, left:4% + translateX(-50%) on a
   130px-wide node pushes roughly a third of the first node off the left
   edge of the container — exactly the "OKING DOCS" clipped-label bug a
   live screenshot caught. Fixed the same way §34 fixed it for the
   lifecycle timeline: a flex row with justify-content:space-between (which
   can never push a child past its own container's edge) instead of
   percentage math that has to be re-tuned by hand for every width. */
.hfp-customs-nodes { display: flex; justify-content: space-between; gap: 8px; position: relative; z-index: 2; }
.hfp-customs-node { position: relative; text-align: center; width: 130px; flex-shrink: 0; }
.hfp-customs-nodes > .hfp-customs-node:first-child { text-align: left; }
.hfp-customs-nodes > .hfp-customs-node:first-child .hfp-customs-node-icon { margin-left: 0; }
.hfp-customs-nodes > .hfp-customs-node:last-child { text-align: right; }
.hfp-customs-nodes > .hfp-customs-node:last-child .hfp-customs-node-icon { margin-right: 0; }
.hfp-customs-node-icon {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface-1);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: var(--text-3);
  position: relative; z-index: 2; animation: hfp-customs-node-pulse 8s ease-in-out infinite;
}
.hfp-customs-nodes .hfp-customs-node:nth-child(2) .hfp-customs-node-icon { animation-delay: 1.6s; }
.hfp-customs-nodes .hfp-customs-node:nth-child(3) .hfp-customs-node-icon { animation-delay: 3.4s; }
.hfp-customs-nodes .hfp-customs-node:nth-child(4) .hfp-customs-node-icon { animation-delay: 5.2s; }
@keyframes hfp-customs-node-pulse {
  0%, 14% { color: var(--text-3); border-color: var(--border-2); background: var(--surface-1); }
  20%, 92% { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-bg); }
  98%, 100% { color: var(--text-3); border-color: var(--border-2); background: var(--surface-1); }
}
.hfp-customs-node-label { font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.03em; }
.hfp-customs-doc {
  position: absolute; top: 3px; width: 42px; height: 42px; border-radius: 8px; background: var(--accent);
  color: var(--on-accent-dark); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  z-index: 3; animation: hfp-customs-doc-travel 8s ease-in-out infinite;
}
@keyframes hfp-customs-doc-travel {
  0%, 12% { left: 2%; opacity: 1; }
  38% { left: 32%; }
  62% { left: 62%; }
  84%, 90% { left: 92%; opacity: 1; }
  96%, 100% { left: 92%; opacity: 0; }
}
.hfp-customs-stamp {
  position: absolute; right: 1%; top: -6px; border: 3px solid var(--status-available); color: var(--status-available);
  padding: 7px 16px; border-radius: 8px; font-family: var(--font-mono); font-weight: 800; font-size: 13px;
  letter-spacing: 0.08em; transform: rotate(-12deg) scale(0.5); opacity: 0; z-index: 4;
  animation: hfp-customs-stamp-hit 8s ease-in-out infinite;
}
@keyframes hfp-customs-stamp-hit {
  0%, 80% { opacity: 0; transform: rotate(-12deg) scale(0.5); }
  86% { opacity: 1; transform: rotate(-12deg) scale(1.15); }
  90% { transform: rotate(-12deg) scale(1); }
  97%, 100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}
@media (max-width: 720px) {
  .hfp-customs-scene { padding: 30px 16px 24px; }
  /* Same collapse as .hfp-lifecycle-track at its own mobile breakpoint
     (§34): the horizontal line + traveling document + "CLEARED" stamp are
     all positioned relative to the desktop track's fixed pixel/percent
     edges and have nothing meaningful to travel along once the nodes stack
     vertically, so they're dropped in favor of a clean static step list
     rather than trying to keep a shrunk horizontal animation legible on a
     390px screen. */
  .hfp-customs-track { height: auto; }
  .hfp-customs-line, .hfp-customs-doc, .hfp-customs-stamp { display: none; }
  .hfp-customs-nodes { flex-direction: column; gap: 0; }
  .hfp-customs-nodes > .hfp-customs-node,
  .hfp-customs-nodes > .hfp-customs-node:first-child,
  .hfp-customs-nodes > .hfp-customs-node:last-child {
    width: 100%; text-align: left; display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  }
  .hfp-customs-node-icon,
  .hfp-customs-nodes > .hfp-customs-node:first-child .hfp-customs-node-icon,
  .hfp-customs-nodes > .hfp-customs-node:last-child .hfp-customs-node-icon { margin: 0; flex-shrink: 0; }
  .hfp-customs-node-label { text-align: left; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hfp-customs-doc, .hfp-customs-stamp, .hfp-customs-node-icon { animation: none !important; opacity: 1 !important; }
  .hfp-customs-doc { left: 2%; } .hfp-customs-stamp { transform: rotate(-12deg) scale(1); }
}

/* ---- Platform Technology (portal mockup) ---- */
.hfp-tech-scene { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: stretch; }
.hfp-tech-window {
  border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--surface-1);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.hfp-tech-titlebar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg-1); border-bottom: 1px solid var(--border-1); }
.hfp-tech-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.hfp-tech-url {
  margin-left: 12px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border-1); border-radius: 12px; padding: 3px 12px;
}
.hfp-tech-body { display: grid; grid-template-columns: 130px 1fr; min-height: 260px; }
.hfp-tech-sidebar { border-right: 1px solid var(--border-1); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.hfp-tech-nav-item {
  display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-2); padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.hfp-tech-nav-item.active { background: var(--accent-bg); color: var(--accent-strong); font-weight: 700; }
.hfp-tech-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.hfp-tech-ticker-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hfp-tech-ticker {
  border: 1px solid var(--border-1); border-radius: var(--radius-sm); background: var(--surface-2);
  padding: 10px 16px; min-width: 100px; animation: hfp-tech-ticker-pulse 3.4s ease-in-out infinite;
}
.hfp-tech-ticker:nth-child(2) { animation-delay: 0.5s; }
.hfp-tech-ticker-num { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--accent-strong); }
.hfp-tech-ticker-label { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
@keyframes hfp-tech-ticker-pulse { 0%, 100% { border-color: var(--border-1); } 50% { border-color: var(--accent); } }
.hfp-tech-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--accent-strong);
  background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 14px; padding: 5px 12px;
  animation: hfp-tech-badge-pop 3.4s ease-in-out infinite;
}
@keyframes hfp-tech-badge-pop { 0%, 60% { transform: scale(1); } 68% { transform: scale(1.06); } 76%, 100% { transform: scale(1); } }
.hfp-tech-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; }
.hfp-tech-bar {
  flex: 1; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); border-radius: 3px 3px 0 0;
  height: 20%; animation: hfp-tech-bar-grow 3.5s ease-in-out infinite alternate;
}
@keyframes hfp-tech-bar-grow { 0% { height: 18%; opacity: 0.65; } 100% { height: 92%; opacity: 1; } }
.hfp-tech-map { position: relative; flex: 1; min-height: 40px; border-top: 1px dashed var(--border-2); padding-top: 12px; }
.hfp-tech-map-pin { position: absolute; left: 30%; top: 14px; color: var(--accent); animation: hfp-tech-pin-bob 2.2s ease-in-out infinite; }
@keyframes hfp-tech-pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hfp-tech-features { display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.hfp-tech-feature { display: flex; gap: 14px; align-items: flex-start; }
.hfp-tech-feature-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--border-2);
  background: var(--surface-1); color: var(--accent); display: flex; align-items: center; justify-content: center;
}
.hfp-tech-feature h4 { margin: 0 0 3px; font-family: var(--font-display); font-size: 14.5px; }
.hfp-tech-feature p { margin: 0; font-size: 12.5px; color: var(--text-2); }
@media (max-width: 860px) {
  .hfp-tech-scene { grid-template-columns: 1fr; }
  .hfp-tech-body { grid-template-columns: 1fr; }
  .hfp-tech-sidebar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hfp-tech-ticker, .hfp-tech-badge, .hfp-tech-bar, .hfp-tech-map-pin { animation: none !important; }
}

/* ---- Floating chat widget ---- */
.chatw { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.chatw-launcher {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: var(--bg-0); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); transition: transform 0.15s ease, background 0.15s ease;
}
.chatw-launcher:hover { transform: scale(1.06); background: var(--accent-strong); }

.chatw-panel {
  width: 340px; max-width: calc(100vw - 44px); height: 460px; max-height: calc(100vh - 120px);
  background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45); display: flex; flex-direction: column; overflow: hidden;
  animation: chatw-pop 0.18s ease-out;
}
@keyframes chatw-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.chatw-header {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  background: var(--bg-1); border-bottom: 1px solid var(--border-1); flex-shrink: 0;
}
.chatw-title { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--text-0); }
.chatw-sub { font-size: 11.5px; color: var(--status-available); margin-top: 2px; }
.chatw-close { background: none; border: none; color: var(--text-2); cursor: pointer; padding: 4px; }

.chatw-body { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.chatw-msg { display: flex; }
.chatw-msg.user { justify-content: flex-end; }
.chatw-bubble {
  max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45;
  background: var(--surface-2); color: var(--text-1); border: 1px solid var(--border-1);
}
.chatw-msg.user .chatw-bubble { background: var(--accent); color: var(--bg-0); border-color: var(--accent); }

.chatw-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.chatw-chip {
  font-size: 11.5px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text-1); cursor: pointer; transition: border-color 0.12s ease;
}
.chatw-chip:hover { border-color: var(--accent); color: var(--accent-strong); }

.chatw-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-1); }
.chatw-input {
  flex: 1; background: var(--bg-1); border: 1px solid var(--border-2); border-radius: 8px;
  padding: 9px 12px; font-size: 13px; color: var(--text-0);
}
.chatw-input:focus { outline: none; border-color: var(--accent); }
.chatw-send {
  width: 36px; height: 36px; border-radius: 8px; border: none; background: var(--accent); color: var(--bg-0);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.chatw-send:hover { background: var(--accent-strong); }

@media (max-width: 480px) {
  .chatw { right: 14px; bottom: 14px; }
  .chatw-panel { width: calc(100vw - 28px); }
}

/* WhatsApp's own official brand green — intentionally NOT a CARGOER
   token. This button needs to read as "WhatsApp" at a glance, so it stays
   WhatsApp's real brand color regardless of CARGOER theme/palette
   changes, the same way a "Sign in with Google" button keeps Google's
   colors. Do not remap these to the CARGOER palette. */
.wa-float {
  position: fixed; left: 22px; bottom: 22px; z-index: 200;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); transition: transform 0.15s ease, background 0.15s ease;
}
.wa-float:hover { transform: scale(1.06); background: #20bd5a; color: #fff; }

@media (max-width: 480px) {
  .wa-float { left: 14px; bottom: 14px; width: 50px; height: 50px; }
}

/* ---- Warehouse Lifecycle (WMS tracking-event timeline) ---- */
.hfp-lifecycle-track {
  position: relative; height: 176px; margin: 0 auto; max-width: 980px;
  border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--bg-1);
  padding: 40px 32px 0;
}
.hfp-lifecycle-line { position: absolute; left: 55px; right: 55px; top: 62px; height: 2px; background: var(--border-2); }
.hfp-lifecycle-marker {
  position: absolute; top: 47px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent);
  color: var(--on-accent-dark); display: flex; align-items: center; justify-content: center; z-index: 3;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4); animation: hfp-lifecycle-marker-travel 9s linear infinite;
}
@keyframes hfp-lifecycle-marker-travel {
  0% { left: 39px; opacity: 0; }
  4% { opacity: 1; }
  92% { left: calc(100% - 87px); opacity: 1; }
  100% { left: calc(100% - 87px); opacity: 0; }
}
.hfp-lifecycle-nodes { display: flex; justify-content: space-between; gap: 8px; }
.hfp-lifecycle-node {
  position: relative; text-align: center; width: 150px; flex-shrink: 0;
  opacity: 0; translate: 0 10px;
}
.hfp-lifecycle-nodes > .hfp-lifecycle-node:first-child { text-align: left; }
.hfp-lifecycle-nodes > .hfp-lifecycle-node:first-child .hfp-lifecycle-node-icon { margin-left: 0; }
.hfp-lifecycle-nodes > .hfp-lifecycle-node:last-child { text-align: right; }
.hfp-lifecycle-nodes > .hfp-lifecycle-node:last-child .hfp-lifecycle-node-icon { margin-right: 0; }
.hfp-lifecycle-track.in-view .hfp-lifecycle-node { animation: hfp-lifecycle-node-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes hfp-lifecycle-node-in { to { opacity: 1; translate: 0 0; } }
.hfp-lifecycle-node-icon {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface-1);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: var(--text-3);
  position: relative; z-index: 2; animation: hfp-lifecycle-icon-pulse 9s ease-in-out infinite;
}
@keyframes hfp-lifecycle-icon-pulse {
  0%, 3% { color: var(--text-3); border-color: var(--border-2); background: var(--surface-1); }
  8%, 88% { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-bg); }
  96%, 100% { color: var(--text-3); border-color: var(--border-2); background: var(--surface-1); }
}
.hfp-lifecycle-node-label { font-size: 12.5px; font-weight: 700; color: var(--text-0); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.hfp-lifecycle-node-desc { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.hfp-lifecycle-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px;
  font-size: 12px; color: var(--text-3); text-align: center;
}
.hfp-lifecycle-foot svg { color: var(--accent); flex-shrink: 0; }
@media (max-width: 860px) {
  .hfp-lifecycle-track { height: auto; padding: 30px 4% 20px; }
  .hfp-lifecycle-line, .hfp-lifecycle-marker { display: none; }
  .hfp-lifecycle-nodes { flex-direction: column; gap: 0; }
  .hfp-lifecycle-node, .hfp-lifecycle-nodes > .hfp-lifecycle-node:first-child, .hfp-lifecycle-nodes > .hfp-lifecycle-node:last-child {
    width: 100%; text-align: left; display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  }
  .hfp-lifecycle-node-icon,
  .hfp-lifecycle-nodes > .hfp-lifecycle-node:first-child .hfp-lifecycle-node-icon,
  .hfp-lifecycle-nodes > .hfp-lifecycle-node:last-child .hfp-lifecycle-node-icon { margin: 0; flex-shrink: 0; }
  .hfp-lifecycle-node-label, .hfp-lifecycle-node-desc { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .hfp-lifecycle-marker, .hfp-lifecycle-node-icon { animation: none !important; }
  .hfp-lifecycle-track.in-view .hfp-lifecycle-node { opacity: 1; translate: 0 0; }
}

/* ---- MHE Fleet scene ---- */
.hfp-fleet-scene {
  display: grid; grid-template-columns: 90px 1fr 110px; gap: 20px; align-items: stretch;
  border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--bg-1);
  padding: 28px 24px; min-height: 220px;
}
.hfp-fleet-rackwall { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.hfp-fleet-slot {
  height: 16px; border-radius: 2px; background: var(--surface-2); border: 1px solid var(--border-2);
  position: relative; overflow: hidden;
}
.hfp-fleet-slot::after {
  content: ""; position: absolute; inset: 2px; border-radius: 1px; background: var(--accent);
  opacity: 0; animation: hfp-fleet-slot-fill 5s ease-in-out infinite;
}
@keyframes hfp-fleet-slot-fill { 0%, 40% { opacity: 0; } 55%, 90% { opacity: 0.5; } 100% { opacity: 0; } }
.hfp-fleet-lanes { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.hfp-fleet-lane { position: relative; height: 30px; }
.hfp-fleet-lane-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border-2); }
.hfp-fleet-truck {
  position: absolute; top: 50%; left: -5%; transform: translateY(-50%); color: var(--accent);
  display: flex; align-items: center; animation-name: hfp-fleet-truck-run; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.hfp-fleet-truck-load {
  width: 14px; height: 14px; border-radius: 2px; background: var(--accent-strong); margin-left: 4px; opacity: 0.85;
}
@keyframes hfp-fleet-truck-run {
  0% { left: -5%; }
  45% { left: 90%; }
  50% { left: 90%; }
  95% { left: -5%; }
  100% { left: -5%; }
}
.hfp-fleet-bay {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--border-2); border-radius: var(--radius-md); color: var(--text-2); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.04em; text-align: center;
}
@media (max-width: 720px) {
  .hfp-fleet-scene { grid-template-columns: 1fr; padding: 22px 16px; }
  .hfp-fleet-rackwall { flex-direction: row; flex-wrap: wrap; }
  .hfp-fleet-slot { width: 40px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hfp-fleet-truck, .hfp-fleet-slot::after { animation: none !important; }
}

/* ---- Safety & Compliance scene ---- */
.hfp-safety-scene { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; }
.hfp-safety-rack {
  display: flex; flex-direction: column-reverse; gap: 10px; border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); background: var(--bg-1); padding: 20px;
}
.hfp-safety-level { position: relative; display: flex; gap: 8px; align-items: center; padding: 8px; border-top: 1px solid var(--border-2); }
.hfp-safety-level:first-child { border-top: none; }
.hfp-safety-pallet { flex: 1; height: 22px; border-radius: 2px; background: var(--surface-2); border: 1px solid var(--border-2); }
.hfp-safety-sprinkler {
  position: absolute; right: 8px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-1); border: 1px solid var(--border-2); color: var(--text-3);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  animation: hfp-safety-sprinkler-pulse 6s ease-in-out infinite;
}
@keyframes hfp-safety-sprinkler-pulse {
  0%, 70% { color: var(--text-3); border-color: var(--border-2); box-shadow: none; }
  78% { color: var(--info); border-color: var(--info); box-shadow: 0 0 0 6px var(--info-bg); }
  90%, 100% { color: var(--text-3); border-color: var(--border-2); box-shadow: none; }
}
.hfp-safety-badges { display: flex; flex-direction: column; gap: 16px; }
.hfp-safety-badge {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--border-1);
  border-radius: var(--radius-md); background: var(--surface-1); transition: border-color 0.2s ease, transform 0.2s ease;
}
.hfp-safety-badge:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.hfp-safety-badge-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--border-2);
  background: var(--bg-1); display: flex; align-items: center; justify-content: center;
}
.hfp-safety-badge-sprinkler { color: var(--info); }
.hfp-safety-badge-door { color: var(--accent); }
.hfp-safety-badge-sensor { color: var(--danger); }
.hfp-safety-badge h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: 14.5px; }
.hfp-safety-badge p { margin: 0; font-size: 12.5px; color: var(--text-2); }
@media (max-width: 860px) {
  .hfp-safety-scene { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hfp-safety-sprinkler { animation: none !important; }
}

/* ---- Live Tracking preview (SHOW guidance teaser) ---- */
.hfp-track-scene {
  border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--bg-1);
  padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hfp-track-svg { width: 100%; max-width: 520px; height: auto; }
.hfp-track-floor { fill: var(--surface-1); stroke: var(--border-1); stroke-width: 1; }
.hfp-track-route {
  fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linecap: round;
  stroke-dashoffset: 230; transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hfp-track-entrance-dot { fill: var(--text-2); }
.hfp-track-dest-box { fill: var(--accent); stroke: var(--accent-strong); stroke-width: 1; }
.hfp-track-dest-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.5; animation: hfp-track-ring-pulse 2.2s ease-in-out infinite; }
@keyframes hfp-track-ring-pulse { 0%, 100% { r: 14; opacity: 0.5; } 50% { r: 19; opacity: 0.15; } }
.hfp-track-label { font-size: 9px; fill: var(--text-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.hfp-track-label-accent { fill: var(--accent-strong); font-weight: 700; }
.hfp-track-caption {
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); text-align: center;
}
.hfp-track-caption svg { color: var(--accent); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .hfp-track-route { transition: none; }
  .hfp-track-dest-ring { animation: none !important; }
}

/* ---- Strengths vs. Pain Points ---- */
.hfp-spp-header-row {
  display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0; max-width: 920px; margin: 0 auto 18px;
}
.hfp-spp-header-col {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; text-align: center;
  padding-bottom: 8px; border-bottom: 2px solid var(--border-2);
}
.hfp-spp-header-pain { color: var(--danger); }
.hfp-spp-header-solution { color: var(--status-available); }
.hfp-spp-rows { display: flex; flex-direction: column; gap: 14px; max-width: 920px; margin: 0 auto; }
.hfp-spp-row {
  display: grid; grid-template-columns: 1fr 40px 1fr; align-items: stretch; gap: 0;
  opacity: 0; translate: 0 14px;
}
.hfp-spp-rows.in-view .hfp-spp-row { animation: hfp-spp-row-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes hfp-spp-row-in { to { opacity: 1; translate: 0 0; } }
.hfp-spp-card {
  border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface-1);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.hfp-spp-card-pain { border-left: 3px solid var(--danger); }
.hfp-spp-card-solution { border-left: 3px solid var(--status-available); }
.hfp-spp-card h4 { margin: 0; font-family: var(--font-display); font-size: 14px; }
.hfp-spp-card p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.hfp-spp-card-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.hfp-spp-card-icon-pain { background: var(--danger-bg); color: var(--danger); }
.hfp-spp-card-icon-solution { background: var(--status-available-bg); color: var(--status-available); }
.hfp-spp-connector { position: relative; display: flex; align-items: center; justify-content: center; }
.hfp-spp-connector-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border-2); }
.hfp-spp-connector-arrow {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-1);
  border: 1px solid var(--border-2); color: var(--accent); display: flex; align-items: center; justify-content: center;
}
.hfp-spp-row:hover .hfp-spp-connector-arrow { border-color: var(--accent); background: var(--accent-bg); }
@media (max-width: 720px) {
  .hfp-spp-header-row { display: none; }
  .hfp-spp-row { grid-template-columns: 1fr; gap: 8px; }
  .hfp-spp-connector { display: none; }
  .hfp-spp-card-pain { border-left: 3px solid var(--danger); }
  .hfp-spp-card-solution { border-left: 3px solid var(--status-available); }
}
@media (prefers-reduced-motion: reduce) {
  .hfp-spp-rows.in-view .hfp-spp-row { opacity: 1; translate: 0 0; }
}

/* ---------- Home FAQ section ---------- */
.hfp-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.hfp-faq-item {
  border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface-1);
  overflow: hidden; transition: border-color 0.2s ease;
}
.hfp-faq-item.open { border-color: var(--border-2); }
.hfp-faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--text-1);
}
.hfp-faq-question:hover { color: var(--accent-strong); }
.hfp-faq-icon { color: var(--text-3); flex-shrink: 0; display: flex; transition: transform 0.25s ease, color 0.2s ease; }
.hfp-faq-item.open .hfp-faq-icon { transform: rotate(180deg); color: var(--accent); }
.hfp-faq-answer {
  padding: 0 18px 18px; font-size: 13.5px; line-height: 1.6; color: var(--text-2);
  animation: hfp-faq-answer-in 0.2s ease;
}
.hfp-faq-answer a { color: var(--accent-strong); }
@keyframes hfp-faq-answer-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .hfp-faq-answer { animation: none; }
}