/* ============================================================
   Rivikon - product vertical components (/parking/ and /building/).
   Loaded AFTER rivikon.css on vertical pages only, so where both
   define a selector (.hero, .steps) the vertical variant wins here
   and nowhere else.

   Some blocks are parking-specific (the drive scene, the dashboard
   mock, the configurator). They simply go unused on building pages.

   Extracted from the previous styles.css. It still uses the older
   token names (--gray-*, --navy-*, --orange-*, --radius-*, --shadow-*);
   those resolve through the compatibility aliases in rivikon.css, which
   is what re-themes this whole vertical to the light/blue palette.
   ============================================================ */

/* ===== Hero (parking variant: light gradient + grid overlay) ===== */
/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 2.75rem 0 3.25rem;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(59, 130, 246, 0.12), transparent 60%),
    linear-gradient(180deg, #fbfaf6 0%, #ffffff 100%);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30, 58, 95, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 95, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-inner { position: relative; text-align: center; max-width: 900px; margin: 0 auto; }

.hero h1 { margin-bottom: 1.25rem; }
.hero-tagline { font-size: 1.125rem; font-weight: 500; color: var(--gray-500); letter-spacing: 0.02em; margin-bottom: 0.75rem; }
.h1-accent { color: var(--orange-500); white-space: nowrap; }
.hero-sub { font-size: 1.125rem; color: var(--gray-600); max-width: 620px; margin: 0 auto 2rem; line-height: 1.6; }

@media (min-width: 768px) {
  .hero { padding: 3.5rem 0 4rem; }
  .hero-tagline { font-size: 1.375rem; }
  .hero-sub { font-size: 1.25rem; }
}

.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 1.75rem; }
/* tertiary hero action: the phone as a quiet text line tucked under the CTAs */
.hero-phone { font-size: 0.9rem; margin: -1.15rem 0 1.75rem; }
.hero-phone a { color: var(--orange-500); font-weight: 600; }

/* ===== Dashboard mockup ===== */
/* ---------- Dashboard mockup ---------- */

.dashboard-mock {
  margin: 0 auto;
  max-width: 980px;
  background: var(--navy-900);
  border-radius: var(--radius-xl);
  padding: 0.75rem;
  box-shadow: var(--shadow-xl);
  position: relative;
}
.dashboard-mock::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(21, 94, 239, 0.4));
  z-index: -1;
  filter: blur(24px);
  opacity: 0.5;
}
.dashboard-top {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem 0.75rem;
}
.dashboard-top .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-700); }
.dashboard-top .dot.red { background: #ff5f57; }
.dashboard-top .dot.yellow { background: #febc2e; }
.dashboard-top .dot.green { background: #28c840; }
.dashboard-status { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.8); }
.live-dot { display: inline-block; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.dashboard-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  background: #0f1b33;
  border-radius: var(--radius-lg);
  padding: 1rem;
}
@media (min-width: 700px) {
  .dashboard-body { grid-template-columns: 1.3fr 1fr; }
}

.dash-camera {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, #1a2f52 0%, #0a1428 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.dash-camera::after {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.02) 3px 4px);
  pointer-events: none;
}
.dash-plate {
  position: absolute;
  bottom: 18%; left: 50%; transform: translateX(-50%);
  background: var(--white); color: var(--navy-900);
  padding: 0.375rem 0.875rem;
  font-family: 'Geologica', monospace;
  font-weight: 700; font-size: 1.1rem; letter-spacing: 0.1em;
  border-radius: 6px;
  border: 2px solid #111;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.5), 0 10px 30px rgba(0,0,0,0.4);
  animation: plateScan 6s ease-in-out infinite;
}
@keyframes plateScan {
  0%, 10% { box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.7), 0 10px 30px rgba(0,0,0,0.4); }
  40%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.6), 0 10px 30px rgba(0,0,0,0.4); }
}
.dash-label {
  position: absolute; top: 0.75rem; left: 0.75rem;
  font-size: 0.75rem; color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.4); padding: 0.25rem 0.5rem; border-radius: 4px;
  backdrop-filter: blur(4px);
}
.dash-scanline {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,0.8), transparent);
  animation: scan 3s ease-in-out infinite;
}
@keyframes scan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.dash-events { background: #0a1428; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 0.75rem; }
/* .dash-title / .dstep-t were <h4> until 2026-08-06. They label parts of an
   animated diagram, not sections of the document, so as headings they added 9
   entries to the outline and broke it with an h1 -> h4 jump. Same visuals. */
.dash-events .dash-title { color: #fff; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem; font-family: 'Onest', sans-serif; letter-spacing: normal; }
.event-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.8125rem; color: rgba(255,255,255,0.85); }
.event-row:last-child { border-bottom: 0; }
.event-row .pill { font-family: monospace; background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; }
.event-row .ok { color: #4ade80; }
.event-row .deny { color: #f87171; }
.event-row .t { color: rgba(255,255,255,0.5); margin-left: auto; font-size: 0.75rem; }
/* opacity + transform only — no max-height, so inserting a row never changes
   the feed's height (and never pushes the stats/steps below it). */
.event-row.ev-new { animation: evIn 0.4s var(--ease); }
@keyframes evIn {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
.stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm); padding: 0.625rem; }
.stat-v { color: #fff; font-family: 'Geologica', sans-serif; font-size: 1.25rem; font-weight: 700; }
.stat-l { color: rgba(255,255,255,0.55); font-size: 0.75rem; margin-top: 2px; }
/* Brief green flash when a stat changes (car counted in / payment taken). */
.stat.flash { animation: statFlash 0.9s ease; }
@keyframes statFlash {
  0%   { background: rgba(34,197,94,0.04); box-shadow: none; }
  18%  { background: rgba(34,197,94,0.30); box-shadow: 0 0 0 1px rgba(34,197,94,0.55) inset; }
  100% { background: rgba(255,255,255,0.04); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .stat.flash { animation: none; } }

/* Combined hero scene: live camera (drive stage) + event feed in one frame */
.hero-combo-wrap { margin-top: 0.5rem; }
.hero-combo { max-width: 1040px; }
@media (min-width: 700px) { .combo-body { grid-template-columns: 1.5fr 1fr; align-items: stretch; } }
.combo-body .drive-stage { width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; margin: 0; }
.combo-body .dash-label { z-index: 3; }
.combo-side { display: flex; flex-direction: column; }
.combo-side .dash-events { flex: 1; }

/* ===== Trust strip ===== */
/* ---------- Trust ---------- */

.trust { padding: 3rem 0; background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.trust-text { text-align: center; color: var(--gray-600); font-size: 0.9375rem; margin-bottom: 1.5rem; }
.trust-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem; filter: grayscale(100%); opacity: 0.65; }
.trust-logos .tlogo {
  font-family: 'Geologica', sans-serif;
  font-weight: 700; color: var(--gray-500); font-size: 1rem;
  letter-spacing: 0.02em;
}

/* ===== Feature grid ===== */
/* ---------- Feature grid ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .feature-grid { grid-template-columns: 1fr 1fr 1fr; } }

.feature {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: all 0.25s var(--ease);
}
.feature:hover { border-color: var(--navy-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Was a dark navy gradient with the old orange accent - fine on the old dark
   theme. After the light migration the compat alias maps --orange-400 onto the
   blue, which left a blue icon on a dark tile: measured 1.28:1 at the light end
   of the gradient, against the 3:1 that WCAG 1.4.11 asks of meaningful
   graphics. Soft-blue tile + blue icon measures 4.77:1 and matches the icon
   treatment already used by .card-visual in rivikon.css. */
.feature-icon {
  width: 44px; height: 44px;
  background: var(--blue-soft, #eaf1fe);
  color: var(--blue, var(--granted));
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.feature p { font-size: 0.9375rem; color: var(--gray-600); line-height: 1.55; }

/* Software section: features beside the multi-site illustration */
.sw-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .sw-features { grid-template-columns: 1fr; } }
.sw-features .feature { padding: 1.15rem; }
.sw-features .feature-icon { width: 38px; height: 38px; margin-bottom: 0.65rem; }
.sw-features .feature-icon svg { width: 19px; height: 19px; }
.sw-features .feature h3 { font-size: 0.975rem; margin-bottom: 0.3rem; }
.sw-features .feature p { font-size: 0.85rem; line-height: 1.5; }

/* ===== How it works (dark band) ===== */
/* ---------- How it works ---------- */

.howwork { background: var(--navy-900); color: var(--white); }
.howwork h2, .howwork h3 { color: var(--white); }
.howwork .section-lede { color: rgba(255,255,255,0.7); }
.howwork .eyebrow { color: var(--orange-400); }

.steps { display: grid; grid-template-columns: 1fr; gap: 1.15rem; margin-top: 1.25rem; position: relative; }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}
.step { position: relative; padding: 1.5rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); }
.step-num { font-family: 'Geologica', sans-serif; font-size: 0.875rem; font-weight: 700; color: var(--orange-400); margin-bottom: 0.75rem; letter-spacing: 0.1em; }
.step h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; color: #fff; }
.step p { color: rgba(255,255,255,0.7); font-size: 0.9375rem; }

/* ===== Scroll-driven drive scene ===== */
/* ---------- Scroll-driven drive scene ---------- */

.scroll-hint { display: inline-block; color: var(--orange-400); font-weight: 600; }

/* The scene runs on its own time clock now, so it lives in normal flow at a
   natural height instead of needing a tall scroll track. */
.drive-track { position: relative; margin: 2rem 0; }
.drive-sticky {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.75rem;
}

.drive-stage {
  position: relative; width: 92%; max-width: 1000px;
  height: min(46vh, 360px);
  background: radial-gradient(130% 150% at 50% 0%, #16294a 0%, #0a1428 72%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  perspective: 1400px;
}

/* The animated world. Cars always travel left→right through the same gate; the
   act (entry / subscription exit / paid exit) is conveyed by the HUD, the live
   feed and the payment station rather than by flipping the lane. */
.drive-world { position: absolute; inset: 0; }

/* Mode badge */
.drive-mode {
  position: absolute; top: 8%; right: 5%;
  font-family: 'Geologica', sans-serif; font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-400); background: rgba(8,16,32,0.7);
  border: 1px solid rgba(21, 94, 239, 0.45); padding: 0.3rem 0.6rem; border-radius: 999px;
}
.mode-out { display: none; }
.drive-stage.exit .mode-in { display: none; }
.drive-stage.exit .mode-out { display: inline; }

/* Play / pause control - lets a viewer freeze a scenario to read it */
.drive-toggle {
  position: absolute; left: 14px; bottom: 14px; z-index: 4;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(8,16,32,0.72);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.drive-toggle:hover { background: var(--orange-500); border-color: var(--orange-500); transform: scale(1.06); }
.drive-toggle:focus-visible { outline: 2px solid var(--orange-400); outline-offset: 2px; }
.drive-toggle svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.drive-toggle .ico-play { display: none; }
.drive-toggle.paused .ico-pause { display: none; }
.drive-toggle.paused .ico-play { display: block; }

/* Playback-speed toggle - sits right of the play/pause button (1× ↔ 0.5×) */
.drive-speed {
  position: absolute; left: 56px; bottom: 14px; z-index: 4;
  height: 34px; min-width: 44px; padding: 0 10px; border-radius: 17px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(8,16,32,0.72);
  color: #fff; font-family: 'Geologica', sans-serif; font-weight: 700; font-size: 0.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.drive-speed:hover { background: var(--orange-500); border-color: var(--orange-500); transform: scale(1.06); }
.drive-speed:focus-visible { outline: 2px solid var(--orange-400); outline-offset: 2px; }
.drive-speed.slow { border-color: var(--orange-400); color: var(--orange-400); }

@media (prefers-reduced-motion: reduce) { .drive-toggle, .drive-speed { display: none; } }

/* Road */
.drive-road { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(180deg, #243a5e, #16263f); border-top: 2px solid rgba(255,255,255,0.12); }
.drive-road::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 28px, transparent 28px 60px); opacity: 0.45; }

/* Camera on a pole - illustration matches /components/. Sized like the barrier
   (width-based, height auto) so both poles share the same road baseline. */
.drive-cam { position: absolute; left: 54%; bottom: 32%; width: clamp(40px, 5.4vw, 56px); }
.drive-cam svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Payment station - pull-up pay point on the exit lane (toggled by main.js).
   Sits well back from the gate so the paying car clearly stops before it. */
.pay-station { position: absolute; left: 29%; bottom: 32%; width: clamp(34px, 4.6vw, 50px); opacity: 0; transition: opacity 0.4s ease; }
.pay-station.show { opacity: 1; }
.pay-station svg { width: 100%; height: auto; display: block; }

/* Scan beam - a single-apex cone whose tip sits on the camera lens (~55% across,
   ~60% up) and fans down onto the car. Height is tuned so the tip meets the lens
   rather than floating above it. */
.cam-beam {
  position: absolute; left: 31%; bottom: 29%; width: 55%; height: 33%;
  background: linear-gradient(180deg, rgba(96,165,250,0.04), rgba(96,165,250,0.30));
  clip-path: polygon(38% 0, 54% 0, 100% 100%, 0 100%);
  opacity: 0; transition: opacity 0.35s ease;
}
.cam-beam.sweeping { animation: beamPulse 1.1s ease-in-out infinite; }
@keyframes beamPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7); } }
.drive-stage.recognized .cam-beam { background: linear-gradient(180deg, rgba(34,197,94,0), rgba(34,197,94,0.30)); }

/* Barrier - illustration matches /components/ (sized down so the car reads bigger) */
.drive-barrier { position: absolute; left: 74%; bottom: 32%; width: clamp(72px, 10vw, 110px); }
.drive-barrier svg { width: 100%; height: auto; display: block; overflow: visible; }
/* The boom is an SVG group; main.js rotates it open. It pivots at the post. */
.bar-arm { transform-box: fill-box; transform-origin: left center; }

/* Car */
.drive-car { position: absolute; left: 0; bottom: 27%; width: clamp(150px, 21vw, 240px); will-change: transform; }
.drive-car svg { width: 100%; display: block; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.45)); }

/* HUD plate readout - anchored along the bottom (over the road) so the scene can
   be trimmed from the top. Centred, clear of the bottom-left playback controls. */
.drive-hud {
  position: absolute; bottom: 2%; left: 54%; transform: translate(-50%, 10px);
  display: flex; align-items: center; gap: 0.6rem; white-space: nowrap;
  background: rgba(8,16,32,0.85); border: 1px solid rgba(255,255,255,0.14);
  padding: 0.45rem 0.7rem; border-radius: 10px; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.drive-hud.show { opacity: 1; transform: translate(-50%, 0); }
.hud-plate { flex: 0 0 auto; white-space: nowrap; font-family: 'Geologica', monospace; font-weight: 700; letter-spacing: 0.08em; background: #fff; color: #0b1a30; padding: 0.12rem 0.5rem; border-radius: 4px; border: 2px solid #111; font-size: 0.95rem; }
/* Single status line; main.js sets the text and the is-* state class. */
.hud-msg { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.hud-msg.is-scan { color: #94a3b8; font-weight: 500; }
.hud-msg.is-ok { color: #4ade80; }
.hud-msg.is-ok::before { content: '✓ '; }
.hud-msg.is-pay { color: var(--orange-400); }

@media (max-width: 640px) {
  /* Long-text buttons (e.g. solution CTAs) wrap instead of overflowing on phones. */
  .btn { white-space: normal; max-width: 100%; }
  .dash-label { font-size: 0.6rem; padding: 0.15rem 0.35rem; }
  .drive-mode { font-size: 0.55rem; padding: 0.2rem 0.45rem; }
  .drive-hud { padding: 0.3rem 0.5rem; gap: 0.4rem; }
  .hud-plate { font-size: 0.7rem; padding: 0.08rem 0.35rem; }
  .hud-msg { font-size: 0.65rem; }
  .event-row { font-size: 0.7rem; gap: 0.4rem; padding: 0.35rem 0; }
  .event-row .pill { font-size: 0.62rem; padding: 1px 4px; }
  .event-row .t { font-size: 0.62rem; }
  .drive-hud { left: auto; right: 5%; transform: translateY(10px); justify-content: flex-end; }
  .drive-hud.show { transform: translateY(0); }

}

/* Step captions under the stage (entry + exit rows, one shown at a time) */
/* ------------------------------------------- "How it works": the step row --
   These used to sit inside the dark dashboard panel and were styled for it.
   They now stand above it on the page, so the look is rebuilt for light ground
   - but .entry-steps / .exit-steps / .dstep / .on stay exactly as they were,
   because those class names are the contract main.js drives. Moving the markup
   changed nothing for the script: it looks the steps up document-wide, so the
   active one still tracks the car in the panel below. Only one row shows at a
   time - entry while a car comes in, exit while one leaves. */
.how-steps { margin-top: 1.75rem; }
.drive-steps.hidden { display: none; }
.drive-steps { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }

.dstep { position: relative; text-align: center; padding: 0 0.5rem; }
.dstep .n { position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-2);
  font-family: 'Geologica', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--gray-500);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
/* Two lines are reserved whether the label needs them or not. The entry row has
   one label that wraps ("Rivikon SmartBridge проверява достъпа") while the exit
   row's are all one line, so when the two rows swap the block changed height and
   shoved the panel below it up and down. Measured across 780-1920px in both
   languages, no label ever needs a third line, so 2.7em (two lines at this
   line-height) is exactly enough to hold the height still. */
.dstep .dstep-t { margin: 0.85rem 0 0; font-size: 0.95rem; font-weight: 600; line-height: 1.35;
  min-height: 2.7em;
  color: var(--gray-500); transition: color 0.3s ease; }
.dstep.on .n { background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 0 0 6px rgba(21, 94, 239, 0.13); }
.dstep.on .dstep-t { color: var(--navy-900); }

/* The 1 -> 2 -> 3 connector: a rule between two bubbles with a chevron head.
   30px is the 22px bubble radius plus an 8px gap, so the line starts and stops
   clear of both circles. The arrow leading into the current step lights up too,
   which is what makes the row read as progress rather than as four labels. */
.dstep + .dstep::before, .dstep + .dstep::after {
  content: ""; position: absolute; transition: background 0.3s ease, border-color 0.3s ease; }
.dstep + .dstep::before { top: 21px; left: calc(-50% + 30px); right: calc(50% + 30px);
  height: 2px; background: var(--line-2); }
.dstep + .dstep::after { top: 17px; right: calc(50% + 26px); width: 8px; height: 8px;
  transform: rotate(45deg);
  border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); }
.dstep.on::before { background: var(--blue); }
.dstep.on::after { border-color: var(--blue); }

/* Four across needs about 150px a column before the labels break up; below that
   the row becomes a vertical list and the connector turns into a short drop. */
@media (max-width: 760px) {
  .drive-steps { grid-template-columns: 1fr; }
  .dstep { display: grid; grid-template-columns: 44px 1fr; align-items: center;
    gap: 0 1rem; text-align: left; padding: 0.45rem 0; }
  .dstep .dstep-t { margin: 0; min-height: 0; }
  .dstep + .dstep::before { top: -0.45rem; left: 21px; right: auto;
    width: 2px; height: 0.9rem; }
  .dstep + .dstep::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drive-track { height: auto; }
  .drive-sticky { position: static; height: auto; padding: 2rem 0; }
  .cam-beam, .bar-arm, .drive-world { transition: none; }
}

/* ===== Use cases ===== */
/* ---------- Use cases ---------- */

.usecases { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .usecases { grid-template-columns: repeat(3, 1fr); } }

.usecase {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex; flex-direction: column;
}
.usecase-tag { display: inline-block; align-self: flex-start; background: var(--navy-800); color: var(--white); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 999px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1rem; }
.usecase h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.usecase p { font-size: 0.9375rem; margin-bottom: 1.25rem; }
.usecase ul { list-style: none; margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--gray-200); }
.usecase ul li { font-size: 0.875rem; color: var(--gray-700); padding: 0.25rem 0 0.25rem 1.25rem; position: relative; }
.usecase ul li::before { content: '→'; position: absolute; left: 0; color: var(--orange-500); }

/* ===== Pricing ===== */
/* ---------- Pricing ---------- */

.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.plan {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex; flex-direction: column;
  position: relative;
}
.plan.popular { border-color: var(--navy-800); box-shadow: var(--shadow-lg); transform: scale(1.02); }
.plan .pop-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--orange-500); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.875rem; border-radius: 999px; letter-spacing: 0.05em; text-transform: uppercase; }
.plan h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.plan-desc { color: var(--gray-600); font-size: 0.875rem; margin-bottom: 1.25rem; }
.plan-price { font-family: 'Geologica', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--navy-900); }
.plan-price .per { font-size: 0.9375rem; color: var(--gray-500); font-weight: 500; }
.plan-addon { font-size: 0.8125rem; color: var(--gray-600); margin-top: 0.25rem; }
.plan ul { list-style: none; margin: 1.5rem 0; flex: 1; }
.plan ul li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; font-size: 0.9375rem; color: var(--gray-700); }
.plan ul li::before { content: '✓'; position: absolute; left: 0; color: var(--orange-500); font-weight: 700; }
.plan .btn { width: 100%; }

.plan-hw { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin: 1rem 0 0; }
.hw-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-500); display: block; margin-bottom: 0.4rem; }
.hw-list { list-style: none; margin: 0; padding: 0; }
.hw-list li { font-size: 0.8125rem; color: var(--gray-600); padding: 0.2rem 0 0.2rem 1.25rem; position: relative; }
.hw-list li::before { content: '◦'; position: absolute; left: 0; color: var(--navy-600); font-weight: 700; }

.plan-scale { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.plan-scale .scale-n { font-family: 'Geologica', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--navy-900); letter-spacing: -0.02em; }
.plan-scale .scale-u { font-size: 0.875rem; color: var(--gray-500); }
.plan-eg { font-size: 0.8125rem; color: var(--gray-500); margin-bottom: 1.25rem; }
.plan-eg strong { color: var(--gray-700); font-weight: 600; }
.plan-price .from { font-size: 0.9375rem; color: var(--gray-500); font-weight: 500; margin-right: 0.15em; }

/* ===== Modules grid ===== */
/* ---------- Modules grid ---------- */

.modules-head { text-align: center; max-width: 640px; margin: 4rem auto 2rem; }
.modules-head h3 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); margin-bottom: 0.5rem; }
.modules-head p { color: var(--gray-600); font-size: 0.9375rem; }
.modules-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .modules-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .modules-grid { grid-template-columns: repeat(4, 1fr); } }

.module { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.25rem; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; }
.module:hover { border-color: var(--navy-700); transform: translateY(-2px); }
.module-icon { width: 38px; height: 38px; background: var(--gray-100); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; color: var(--navy-700); }
.module-icon svg { width: 20px; height: 20px; }
.module h4 { font-size: 0.9375rem; margin-bottom: 0.25rem; }
.module p { font-size: 0.8125rem; color: var(--gray-600); line-height: 1.5; margin: 0; }
.modules-note { text-align: center; font-size: 0.875rem; color: var(--gray-500); margin-top: 1.5rem; }

/* ===== Configurator (plan finder) ===== */
/* ---------- Configurator (plan finder) ---------- */

.cfg-section { background: var(--navy-900); }
.cfg-section .eyebrow { color: var(--orange-400); }
.cfg-section .section-title { color: #fff; }
.cfg-section .section-lede { color: rgba(255,255,255,0.68); }

.cfg { max-width: 760px; margin: 2.5rem auto 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: clamp(1.25rem, 4vw, 2.5rem); }

.cfg-prog { height: 6px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; margin-bottom: 0.5rem; }
.cfg-prog-bar { display: block; height: 100%; background: var(--orange-500); border-radius: 999px; transition: width 0.4s var(--ease); }
.cfg-prog-label { font-size: 0.75rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; margin-bottom: 1.75rem; }

.cfg-step { display: none; animation: cfgIn 0.4s var(--ease); }
.cfg-step.is-active { display: block; }
@keyframes cfgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.cfg-q { color: #fff; font-size: clamp(1.1rem, 3vw, 1.4rem); margin-bottom: 1.25rem; }

.cfg-opts { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 560px) { .cfg-opts { grid-template-columns: 1fr 1fr; } }
.cfg-opts.cfg-trio { grid-template-columns: 1fr; }
@media (min-width: 560px) { .cfg-opts.cfg-trio { grid-template-columns: repeat(3, 1fr); } }

.cfg-opt { display: flex; align-items: center; gap: 0.7rem; text-align: left; background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.12); color: #fff; border-radius: var(--radius-md); padding: 0.9rem 1rem; font-size: 0.9375rem; font-family: inherit; cursor: pointer; transition: border-color 0.18s, background 0.18s, transform 0.18s; }
.cfg-opt:hover { border-color: var(--orange-400); transform: translateY(-2px); }
.cfg-opt.sel { border-color: var(--orange-500); background: rgba(21, 94, 239, 0.16); }
.cfg-opt svg { width: 22px; height: 22px; flex: none; stroke: var(--orange-400); }
.cfg-opt .cfg-opt-sub { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.55); margin-top: 0.1rem; }
.cfg-opt.sel .cfg-check { opacity: 1; }
.cfg-check { margin-left: auto; opacity: 0; color: var(--orange-400); font-weight: 700; transition: opacity 0.18s; }

.cfg-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.75rem; gap: 1rem; }
.cfg-back { background: none; border: none; color: rgba(255,255,255,0.6); font-family: inherit; font-size: 0.9rem; cursor: pointer; padding: 0.5rem; }
.cfg-back:hover { color: #fff; }
.cfg-back[hidden] { visibility: hidden; }
.cfg-next[hidden] { display: none; }

/* Result */
.cfg-result { text-align: center; }
.cfg-result .cfg-rec-label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-400); font-weight: 700; }
.cfg-result .cfg-rec-tier { font-family: 'Geologica', sans-serif; font-size: clamp(2rem, 7vw, 3rem); color: #fff; margin: 0.25rem 0 0.5rem; }
.cfg-result .cfg-rec-desc { color: rgba(255,255,255,0.7); font-size: 0.9375rem; max-width: 460px; margin: 0 auto 1.5rem; }

.cfg-build { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1.75rem; }
.cfg-build-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); width: 100%; margin-bottom: 0.5rem; }
.cfg-chip { font-size: 0.8125rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); border-radius: 999px; padding: 0.35rem 0.85rem; animation: cfgChip 0.4s var(--ease) backwards; }
.cfg-chip.is-mod { border-color: rgba(21, 94, 239, 0.5); background: rgba(21, 94, 239, 0.12); }
@keyframes cfgChip { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

.cfg-result-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.cfg-restart { background: none; border: 1px solid rgba(255,255,255,0.25); color: #fff; font-family: inherit; font-size: 0.9rem; border-radius: 999px; padding: 0.7rem 1.4rem; cursor: pointer; transition: border-color 0.18s; }
.cfg-restart:hover { border-color: #fff; }

/* ===== Solution teaser cards ===== */
/* ---------- Solution teaser cards ---------- */

.sol-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 560px) { .sol-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .sol-grid { grid-template-columns: repeat(3, 1fr); } }

.sol-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.75rem; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.sol-card:hover { border-color: var(--navy-700); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sol-card-icon { flex-shrink: 0; width: 46px; height: 46px; background: var(--navy-800); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.sol-card-icon svg { width: 24px; height: 24px; stroke: #fff; }
.sol-card-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.sol-card h3 { font-size: 1.125rem; margin: 0; }
.sol-card p { font-size: 0.9rem; color: var(--gray-600); line-height: 1.55; margin: 0 0 1rem; }
.sol-card .sol-link { margin-top: auto; font-size: 0.9rem; font-weight: 600; color: var(--orange-500); }
.sol-card:hover .sol-link { text-decoration: underline; }
.sol-card.sol-card--all { background: var(--navy-900); border-color: var(--navy-900); }
.sol-card.sol-card--all h3 { color: #fff; }
.sol-card.sol-card--all p { color: rgba(255,255,255,0.6); }
.sol-card.sol-card--all .sol-card-icon { background: rgba(21, 94, 239, 0.2); }
.sol-card.sol-card--all .sol-card-icon svg { stroke: var(--orange-400); }
.sol-card.sol-card--all .sol-link { color: var(--orange-400); }
.sol-card.sol-card--all:hover { border-color: var(--navy-700); }

/* ---------- Photo-led variant ----------
   Used on /parking/ where every vertical has its own render. The photo carries
   the recognition (a canopy reading HOTEL, a row of loading docks), so the icon
   is dropped - two symbols for the same thing is one too many. /building/ keeps
   the icon form, hence a modifier rather than a change to .sol-card itself. */
.sol-card--photo { padding: 0; overflow: hidden; }
.sol-card-visual { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray-100); }
.sol-card-visual img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sol-card--photo:hover .sol-card-visual img { transform: scale(1.05); }
.sol-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.35rem 1.35rem; }
.sol-card--photo h3 { margin-bottom: .55rem; }
.sol-grid-all { text-align: center; margin-top: 1.5rem; }

/* ---------- Phone: swipe rail ----------
   Stacked, the six cards run 1862px - 2.7 screens for one teaser section. As a
   rail they take one. The next card deliberately peeks past the right edge:
   that sliver is the whole affordance, since content beyond the screen edge has
   no information scent on its own. Manual swipe only - nothing auto-rotates. */
@media (max-width: 559px) {
  .sol-grid {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    /* Both axes stated on purpose. Setting overflow-x alone makes the browser
       compute overflow-y as auto too, and the rail then had ~10px of vertical
       slack you could wobble up and down inside the section. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.5rem;
    /* bleed to the screen edges so the peeking card is not clipped by a margin */
    margin-inline: -1.5rem;
    padding: 0 1.5rem .35rem;
    scrollbar-width: none;
  }
  .sol-grid::-webkit-scrollbar { display: none; }
  .sol-grid > .sol-card { scroll-snap-align: start; }
  /* .anim-up reveals by sliding up 16px, which the now-hidden vertical overflow
     would clip mid-animation. In a horizontal rail a vertical reveal earns
     nothing anyway - only the first card is on screen. */
  .sol-grid > .sol-card.anim-up { opacity: 1; transform: none; }

  .sol-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1rem; }
  .sol-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: var(--gray-300); cursor: pointer; transition: background .2s, transform .2s; }
  .sol-dots button.is-active { background: var(--blue); transform: scale(1.3); }
  .sol-swipe-hint { text-align: center; font-size: .8rem; color: var(--gray-500); margin-top: .5rem; }
}
@media (min-width: 560px) { .sol-dots, .sol-swipe-hint { display: none; } }

@keyframes sol-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(5px); }
}
.sol-card.sol-card--all .sol-arrow {
  display: inline-block;
  animation: sol-arrow-nudge 1.6s ease-in-out infinite;
}

/* ===== Security strip ===== */
/* ---------- Security strip ---------- */

.security {
  background: linear-gradient(135deg, #f4f1ea 0%, #fbfaf6 100%);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
}
/* 40px of padding either side leaves 123px per column on a phone; at 24px the
   columns get 139px, which is the difference between three and four words a line */
@media (max-width: 559px) { .security { padding: 1.5rem; } }
/* Two across from the smallest screen up. Each item is about twenty words, so
   half a phone width still reads fine, and stacking them one per row cost 1.6
   screens for a section most visitors scan rather than study. Not a rail: these
   four blocks look alike, so swiping through them would be swiping blind - and
   the solutions rail sits directly above, so a second one would read as the
   same control twice. */
.security-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
@media (min-width: 1000px) { .security-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.sec-item h3 { font-family: 'Geologica', sans-serif; font-size: 1rem; color: var(--navy-900); margin-bottom: 0.375rem; }
.sec-item p { font-size: 0.875rem; color: var(--gray-600); }
.sec-icon { width: 36px; height: 36px; color: var(--orange-500); margin-bottom: 0.75rem; }

/* ===== Testimonials ===== */
/* ---------- Testimonials ---------- */

.testimonials { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex; flex-direction: column;
}
.testimonial blockquote { font-size: 1.0625rem; color: var(--gray-800); line-height: 1.55; margin-bottom: 1.5rem; }
.testimonial blockquote::before { content: '\201C'; font-family: 'Geologica', serif; font-size: 3rem; color: var(--orange-500); line-height: 0; vertical-align: -0.4em; margin-right: 0.25rem; }
.t-meta { display: flex; align-items: center; gap: 0.875rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--gray-100); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-700), var(--orange-500)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Geologica', sans-serif; }
.t-meta-txt { line-height: 1.3; }
.t-name { font-weight: 600; color: var(--navy-900); font-size: 0.9375rem; }
.t-role { font-size: 0.8125rem; color: var(--gray-500); }

/* ===== Misc (.anim-up reveal used by main.js) ===== */
/* ---------- Misc ---------- */

.anim-up { opacity: 0; transform: translateY(16px); transition: all 0.6s var(--ease); }
.anim-up.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===== Animated illustration scenes + components block ===== */
/* ==========================================================================
   Animated illustration scenes
   Lightweight CSS/SVG loops. Each scene root carries [data-scene]; main.js
   toggles .in-view on it via IntersectionObserver, and every animation below
   is gated on .in-view so nothing runs while the scene is off screen.
   ========================================================================== */

/* Reusable little car (orange body, blue cabin, two wheels) */
.mini-car {
  position: absolute; bottom: 28px; width: 48px; height: 19px;
  background: var(--orange-500); border-radius: 8px 11px 4px 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
.mini-car.is-guest { background: var(--blue-500); }
.mini-car::before {                 /* cabin with A/B/C pillars */
  content: ''; position: absolute; left: 11px; top: -7px; width: 22px; height: 9px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(
    to right,
    #3d5465 0px 2px,
    #bfdcff 2px 10px,
    #3d5465 10px 12px,
    #bfdcff 12px 20px,
    #3d5465 20px 22px
  );
}
.mini-car::after {                  /* two wheels */
  content: ''; position: absolute; bottom: -4px; left: 5px; right: 5px; height: 9px;
  background:
    radial-gradient(5px 5px at 6px 4px, #0b1a30 4px, transparent 5px),
    radial-gradient(5px 5px at calc(100% - 6px) 4px, #0b1a30 4px, transparent 5px);
}

/* A barrier arm that pivots up from a short post */
.scene-gate { position: absolute; bottom: 26px; width: 5px; height: 22px; background: linear-gradient(90deg,#94a3b8,#e2e8f0); border-radius: 2px; }
.scene-gate::before {
  content: ''; position: absolute; left: 2px; bottom: 16px; width: 42px; height: 5px;
  background: repeating-linear-gradient(90deg,var(--blue) 0 10px,#fff 10px 20px);
  border: 1px solid rgba(0,0,0,0.25); border-radius: 3px;
  transform-origin: left center; transform: rotate(-4deg);
}

/* ---- Scene 1: before / after ------------------------------------------- */
.ba-scene { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 auto; max-width: 1000px; }
@media (min-width: 760px) { .ba-scene { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.ba-side { position: relative; border-radius: var(--radius-lg); padding: 1rem 1.1rem 1.2rem; border: 1px solid; overflow: hidden; }
.ba-old { background: linear-gradient(180deg,#fef7f3,#fff); border-color: #fbd3bf; }
.ba-new { background: radial-gradient(130% 150% at 50% 0%, #16294a, #0a1428); border-color: rgba(255,255,255,0.08); }
.ba-tag { display: inline-block; font-family: 'Geologica', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; margin-bottom: 0.85rem; }
.ba-old .ba-tag { color: var(--blue-h); background: #ffe8db; }
.ba-new .ba-tag { color: var(--orange-400); background: rgba(21, 94, 239, 0.16); }
.ba-lane { position: relative; height: 92px; border-radius: var(--radius-md); overflow: hidden; }
.ba-old .ba-lane { background: #ece1d8; }
.ba-new .ba-lane { background: linear-gradient(180deg,#243a5e,#16263f); }
.ba-lane::after { content: ''; position: absolute; left: 0; right: 0; bottom: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 14px, transparent 14px 28px); }
.ba-new .ba-lane::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 14px, transparent 14px 28px); }
.ba-cap { display: block; margin-top: 0.7rem; font-size: 0.82rem; }
.ba-old .ba-cap { color: var(--gray-600); }
.ba-new .ba-cap { color: rgba(255,255,255,0.72); }
/* Booth on the old lane */
.ba-booth { position: absolute; bottom: 26px; right: 10px; width: 38px; height: 50px; background: #c7ad97; border: 1px solid #a98a70; border-radius: 4px 4px 0 0; z-index: 2; }
.ba-booth::before { content: ''; position: absolute; left: 5px; top: 7px; width: 28px; height: 20px; background: #6b4f3a; border-radius: 2px; }
.ba-booth::after { content: '👤'; position: absolute; left: 5px; top: 7px; width: 28px; height: 20px; font-size: 12px; line-height: 20px; text-align: center; }
/* Old lane: JS-driven queue animation */
.ba-old .mini-car { transform: scale(0.78); transform-origin: bottom left; position: absolute; bottom: 28px; left: -60px; z-index: 3; }
.ba-old .scene-gate { left: 72%; right: auto; }
.ba-old .ba-booth   { left: 58%; right: auto; }
.scene-gate::before { transition: transform 0.35s ease; }
.scene-gate.gate-open::before { transform: rotate(-74deg) !important; }
/* New lane: camera + one car gliding through an auto barrier */
.ba-cam { position: absolute; bottom: 56px; left: 56%; width: 5px; height: 26px; background: linear-gradient(90deg,#94a3b8,#cbd5e1); border-radius: 2px; }
.ba-cam::before { content: ''; position: absolute; top: -5px; left: -16px; width: 26px; height: 12px; background: #e2e8f0; border-radius: 3px 6px 6px 3px; transform: rotate(12deg); }
.ba-cam::after { content: ''; position: absolute; top: 0; left: -19px; width: 6px; height: 6px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.9); }
.ba-new .scene-gate { left: 58%; }
.ba-new .mini-car { left: 50%; }
.ba-scene.in-view .ba-new .mini-car { animation: baDrive 4.4s linear infinite; }
.ba-scene.in-view .ba-new .scene-gate::before { animation: baLift 4.4s ease-in-out infinite; }
@keyframes baDrive { 0% { left: -56px; } 32%,52% { left: 50%; } 100% { left: 116%; } }
@keyframes baLift { 0%,30% { transform: rotate(-4deg); } 44%,66% { transform: rotate(-74deg); } 84%,100% { transform: rotate(-4deg); } }

/* ---- Why Rivikon: old way → typical system → Rivikon (3 stages) ------- */
.versus { display: flex; flex-direction: column; gap: 1rem; }
.versus > .ba-side { flex: 1; }
.vs-arrow { align-self: center; color: var(--orange-400); font-weight: 700; font-size: 1.4rem; line-height: 1; transform: rotate(90deg); }
@media (min-width: 760px) {
  .versus { flex-direction: row; align-items: stretch; gap: 0.6rem; }
  .vs-arrow { transform: none; }
}
.ba-rival { background: var(--gray-50); border-color: var(--gray-200); }
.ba-rival .ba-tag { color: var(--gray-700); background: var(--gray-100); }
.ba-rival .ba-cap { color: var(--gray-500); }
.ba-ours { background: radial-gradient(130% 150% at 50% 0%, #16294a, #0a1428); border-color: rgba(21, 94, 239, 0.5); box-shadow: 0 0 0 1px rgba(21, 94, 239, 0.22), var(--shadow-lg); }
.ba-ours .ba-tag { color: var(--orange-400); background: rgba(21, 94, 239, 0.16); }
.ba-ours .ba-cap { color: rgba(255,255,255,0.72); }
.vs-list { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.vs-list li { position: relative; padding-left: 1.6rem; font-size: 0.9rem; line-height: 1.45; }
.vs-list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.vs-neg li { color: var(--gray-600); }
.vs-neg li::before { content: '\2715'; color: #b91c1c; }
.vs-pos li { color: rgba(255,255,255,0.92); }
.vs-pos li::before { content: '\2713'; color: #4ade80; }

/* ---- Scene 2: resident vs guest ---------------------------------------- */
.rg-scene { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.75rem auto 0; max-width: 760px; }
@media (min-width: 620px) { .rg-scene { grid-template-columns: 1fr 1fr; } }
.rg-row { background: radial-gradient(130% 150% at 50% 0%, #16294a, #0a1428); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 0.85rem 1rem 1rem; }
.rg-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.rg-badge { font-family: 'Geologica', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: 999px; }
.rg-resident .rg-badge { color: #4ade80; background: rgba(34,197,94,0.16); }
.rg-guest .rg-badge { color: var(--orange-400); background: rgba(21, 94, 239, 0.16); }
.rg-plate { font-family: 'Geologica', monospace; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; color: #0b1a30; background: #fff; border: 2px solid #111; border-radius: 4px; padding: 0.05rem 0.4rem; }
.rg-lane { position: relative; height: 84px; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(180deg,#243a5e,#16263f); }
.rg-lane::after { content: ''; position: absolute; left: 0; right: 0; bottom: 20px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.32) 0 14px, transparent 14px 28px); }
.rg-lane .scene-gate { left: 60%; bottom: 24px; }
.rg-lane .mini-car { bottom: 26px; left: 52%; }
.rg-scene.in-view .rg-resident .mini-car { animation: baDrive 4.6s linear infinite; }
.rg-scene.in-view .rg-resident .scene-gate::before { animation: rgOpenFast 4.6s ease-in-out infinite; }
.rg-scene.in-view .rg-guest .mini-car { animation: rgGuestDrive 4.6s linear infinite; }
.rg-scene.in-view .rg-guest .scene-gate::before { animation: rgOpenSlow 4.6s ease-in-out infinite; }
@keyframes rgOpenFast { 0% { transform: rotate(-4deg); } 22%,60% { transform: rotate(-74deg); } 80%,100% { transform: rotate(-4deg); } }
@keyframes rgGuestDrive { 0% { left: -56px; } 30%,64% { left: 50%; } 100% { left: 116%; } }   /* longer pause to "pay" */
@keyframes rgOpenSlow { 0%,46% { transform: rotate(-4deg); } 58%,72% { transform: rotate(-74deg); } 88%,100% { transform: rotate(-4deg); } }
.rg-out { margin-top: 0.7rem; font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.rg-ok { color: #4ade80; }
.rg-pay { color: var(--orange-400); }
.rg-out::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ---- Scene 6: savings counter ------------------------------------------ */
.save-scene { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 960px; margin: 1.75rem auto 0; }
@media (min-width: 720px) { .save-scene { grid-template-columns: repeat(3, 1fr); } }
.save-card { background: radial-gradient(130% 150% at 50% 0%, #16294a, #0a1428); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 1.4rem 1.25rem; text-align: center; box-shadow: var(--shadow-lg); }
.save-v { font-family: 'Geologica', sans-serif; font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.4rem); color: #fff; line-height: 1.1; }
.save-v .unit { color: var(--orange-400); font-size: 0.7em; margin-left: 0.15em; }
.save-v .sign { color: var(--orange-400); }
.save-up { color: #22c55e; font-size: 0.55em; font-weight: 800; margin-right: 0.2em; vertical-align: middle; letter-spacing: -0.02em; }
.save-l { color: rgba(255,255,255,0.66); font-size: 0.85rem; margin-top: 0.45rem; line-height: 1.45; }

/* ---------- Components ---------- */
.comp-group { margin-top: 3rem; }
.comp-group:first-of-type { margin-top: 2rem; }
.comp-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.comp-group-head h2 { margin: 0; }
.comp-tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.comp-tag.req { background: rgba(21, 94, 239, 0.12); color: var(--blue-h); }
.comp-tag.opt { background: var(--gray-100); color: var(--gray-700); }

.comp-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 600px) { .comp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .comp-grid { grid-template-columns: repeat(3, 1fr); } }

.comp-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.comp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.comp-fig {
  position: relative;
  background: linear-gradient(160% 120% at 50% 0%, #f1f5fb, #e7edf6);
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
}
.comp-soon {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  background: rgba(21, 94, 239, 0.14); color: var(--blue-h);
  border: 1px solid rgba(21, 94, 239, 0.25);
  backdrop-filter: blur(2px);
}
.comp-soon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange-500);
}
.comp-fig svg { width: 100%; height: auto; max-height: 150px; display: block; }
.comp-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.comp-body h3 { font-size: 1.125rem; margin: 0 0 0.4rem; }
.comp-body > p { color: var(--gray-600); font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.9rem; }
.comp-feat { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.comp-feat li { position: relative; padding-left: 1.4rem; font-size: 0.85rem; color: var(--gray-700); }
.comp-feat li::before {
  content: ""; position: absolute; left: 0; top: 0.32rem;
  width: 7px; height: 7px; border-radius: 2px; background: var(--orange-500);
}
.comp-min { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-h); margin-bottom: 0.5rem; }
.comp-rec { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #0369a1; margin-bottom: 0.5rem; }
.comp-tag.rec { background: rgba(3,105,161,0.1); color: #0369a1; }
.rec-dot { display: inline-block; font-size: 0.68rem; font-weight: 600; color: #0369a1; margin-left: 0.3rem; }

/* Collapsible components block (solution pages) */
.comp-collapse {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.comp-collapse > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-family: 'Geologica', sans-serif; font-weight: 600; font-size: 1.1rem;
  color: var(--navy-900);
}
.comp-collapse > summary::-webkit-details-marker { display: none; }
.comp-collapse > summary:hover { background: var(--gray-50); }
.comp-sum-hint { font-family: 'Onest', sans-serif; font-weight: 500; font-size: 0.85rem; color: var(--gray-500); }
.comp-chev {
  flex: none; width: 22px; height: 22px; color: var(--orange-500);
  transition: transform 0.25s var(--ease);
}
.comp-collapse[open] .comp-chev { transform: rotate(180deg); }
.comp-collapse-body { padding: 0 1.5rem 1.5rem; }
.comp-collapse[open] .comp-collapse-body { animation: compReveal 0.3s var(--ease); }
@keyframes compReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.comp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 640px) { .comp-list { grid-template-columns: repeat(2, 1fr); } }
.comp-row { display: flex; gap: 0.85rem; align-items: center; padding: 0.85rem; border: 1px solid var(--gray-100); border-radius: var(--radius-md); background: var(--gray-50); }
.comp-row-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--gray-200); color: var(--navy-700); }
.comp-row-ic svg { width: 20px; height: 20px; }
.comp-row b { display: block; font-size: 0.92rem; color: var(--navy-900); }
.comp-row div span { display: block; font-size: 0.82rem; color: var(--gray-600); line-height: 1.4; margin-top: 0.1rem; }
.comp-row .req-dot { display: inline-block; font-size: 0.68rem; font-weight: 600; color: var(--blue-h); margin-left: 0.3rem; }
.comp-row .opt-dot { display: inline-block; font-size: 0.68rem; font-weight: 500; color: var(--gray-400); margin-left: 0.3rem; }
.comp-collapse-cta { margin-top: 1.1rem; }

/* LED totem - cycling screens */
.totem-screen { opacity: 0; }
.totem-s1 { opacity: 1; }
.comp-fig.in-view .totem-screen { animation: totemScreen 9s var(--ease) infinite; }
.comp-fig.in-view .totem-s2 { animation-delay: -3s; }
.comp-fig.in-view .totem-s3 { animation-delay: -6s; }
@keyframes totemScreen {
  0% { opacity: 0; }
  3% { opacity: 1; }
  30% { opacity: 1; }
  34% { opacity: 0; }
  100% { opacity: 0; }
}

/* ===== Solutions hub cards (shared by the parking and building hubs) =====
   Promoted out of a page-level <style> block so both verticals use one copy. */
.sol-hub-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      margin-top: 1.75rem;
    }
    @media (min-width: 768px) {
      .sol-hub-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ---- Tab set (tabs.js). Until JS runs, .sol-tabs is an ordinary wrapper
       and every card stays visible, so nothing depends on the script. ---- */
    .rk-tabs-strip {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
      margin-top: 1.75rem;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--gray-200);
    }
    .rk-tabs-strip::-webkit-scrollbar { display: none; }
    .rk-tab {
      flex: 0 0 auto;
      appearance: none;
      background: none;
      border: 0;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      padding: 10px 14px;
      font: inherit;
      font-size: 0.94rem;
      font-weight: 600;
      color: var(--gray-600);
      white-space: nowrap;
      cursor: pointer;
      transition: color .15s, border-color .15s;
    }
    .rk-tab:hover { color: var(--navy-900); }
    .rk-tab.is-active { color: var(--blue, var(--granted)); border-bottom-color: var(--blue, var(--granted)); }
    .rk-tab:focus-visible { outline: 2px solid var(--blue, var(--granted)); outline-offset: 2px; border-radius: 4px; }

    /* one panel at a time: drop the two-column grid while tabbed */
    .sol-tabs.is-tabbed .sol-hub-grid { display: block; margin-top: 1.5rem; }
    .sol-tabs.is-tabbed .sol-hub-card[hidden] { display: none; }
    .sol-tabs.is-tabbed .sol-hub-card:focus-visible { outline: 2px solid var(--blue, var(--granted)); outline-offset: 3px; }

    .sol-hub-card {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-xl);
      background: var(--white);
      overflow: hidden;
      transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
    }
    .sol-hub-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-3px);
    }

    .sol-hub-head {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.75rem 1.75rem 1.25rem;
      border-bottom: 1px solid var(--gray-100);
    }
    .sol-hub-icon {
      flex-shrink: 0;
      width: 52px;
      height: 52px;
      border-radius: var(--radius-md);
      background: rgba(30, 58, 95, 0.07);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--navy-700);
    }
    .sol-hub-icon svg { width: 24px; height: 24px; }
    .sol-hub-head h2 {
      font-size: 1.25rem;
      color: var(--navy-900);
      margin: 0;
    }

    .sol-hub-body {
      padding: 1.25rem 1.75rem;
      flex: 1;
    }
    .sol-hub-body p {
      font-size: 0.9375rem;
      color: var(--gray-600);
      margin-bottom: 1rem;
      line-height: 1.65;
    }
    .sol-hub-cases {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-bottom: 0;
    }
    .sol-hub-cases li {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      font-size: 0.875rem;
      color: var(--gray-700);
      line-height: 1.5;
    }
    .sol-hub-cases li::before {
      content: '';
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      margin-top: 1px;
      background: var(--orange-500);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-size: 10px;
      background-repeat: no-repeat;
      background-position: center;
      background-color: var(--orange-500);
    }

    .sol-hub-foot {
      padding: 1.25rem 1.75rem 1.75rem;
    }
    .sol-hub-foot .btn {
      width: 100%;
      justify-content: center;
    }

    .sol-other {
      margin-top: 3rem;
      padding: 2rem;
      border: 1.5px dashed var(--gray-300);
      border-radius: var(--radius-xl);
      text-align: center;
    }
    .sol-other h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
    .sol-other p { font-size: 0.9375rem; color: var(--gray-500); margin-bottom: 1.25rem; }

/* ============================================================== VIDEO HERO */
/* Real footage behind the headline. The clip is decoration - it is aria-hidden
   and the copy carries the meaning - so if autoplay is refused, or the visitor
   asked for reduced motion, the poster frame stands in and nothing is lost. */
/* --ticker-h is what the offer strip at the foot of the hero occupies; the
   bottom padding reserves it so the copy never sits under the strip. Same
   variable name and value the homepage slider uses, so the two read alike. */
.hero-video { position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; background: var(--ink, #0d1622);
  --ticker-h: 46px;
  min-height: min(80vh, 700px); padding: 5rem 0 calc(4.5rem + var(--ticker-h)); }
.hero-bg-video, .hero-bg-scrim { position: absolute; inset: 0; z-index: -1; }
.hero-bg-video { width: 100%; height: 100%; object-fit: cover; }
/* Three stops rather than an even wash: the frame is brightest at the top
   (sky and glass facade) and darkest at the bottom (asphalt), so a flat tint
   would either bury the picture or leave the headline on a white building. */
.hero-bg-scrim { background: linear-gradient(180deg,
  rgba(6, 12, 22, 0.84) 0%, rgba(6, 12, 22, 0.62) 45%, rgba(6, 12, 22, 0.80) 100%); }

/* Wider than the 900px the other heroes use. The headline is two sentences that
   each have to hold one line, and at full desktop size the longer one measures
   918px - it was wrapping and stranding a word. The sub-headline keeps its own
   620px measure, so only the headline gets the extra room. */
.hero-video .hero-inner { position: relative; z-index: 1; max-width: 1180px; }
.hero-video h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
/* Not --blue (#155eef): against the darkened footage that lands under 2:1 and
   is barely legible. This is the brand blue lifted until it clears 3.8:1, which
   is what large text over an image needs. */
.hero-video .hl-blue { color: #5f9dff; }

/* Left on desktop. Once the sub-headline went, centred copy had nothing under
   it to hold the axis and drifted over the middle of the picture; ranged left
   it lines up with the breadcrumb and the sections below. Phones stay centred -
   there is no spare width for the eye to travel back to a left edge. */
@media (min-width: 701px) {
  .hero-video .hero-inner { text-align: left; }
  .hero-video .hero-ctas { justify-content: flex-start; }
}
.hero-video .hero-sub { color: rgba(255, 255, 255, 0.87); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.hero-video .hero-phone { color: rgba(255, 255, 255, 0.72); }
.hero-video .hero-phone a { color: #fff; }

@media (max-width: 700px) {
  .hero-video { min-height: 72vh; padding: 3.25rem 0 calc(2.75rem + var(--ticker-h)); }
  /* The headline is two sentences and the break between them is the point, so
     each half should hold one line. A fixed step could not do that: just above
     the breakpoint the type jumped back up and overflowed again. Tying the size
     to the viewport removes the cliff - the longer sentence measures about 15.75
     times the font size, so 5.5vw keeps it inside the line from 350px up with
     roughly 8% to spare for a fallback font that sets wider. Below that it wraps,
     which the blue keeps readable: the colour groups the sentence, not the break. */
  .hero-video { --ticker-h: 40px; }
  .hero-video h1 { font-size: clamp(1.2rem, 5.5vw, 2.4rem); line-height: 1.22; }
  .hero-video .hero-inner { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ====================================================== SOFTWARE SHOWCASE */
/* A strip of feature cards, a wedge, and a carousel of app windows. Before
   showcase.js sets .is-ready the windows are simply stacked in the flow, so a
   visitor without JS still gets every screen. */
.sw-showcase { margin-top: 2rem; }

/* One row always, even when six cards will not fit: a wrapped second row would
   put the wedge's origin on a different line from the window it points at. */
.sw-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr);
  gap: 0.75rem; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scrollbar-width: none;
  /* A strip that scrolls sideways cannot be visible vertically - the browser
     forces overflow-y to clip - so the cards need room inside the box or their
     top edge, the blue ring on the live one and the 2px lift on hover all get
     sheared off. The negative margins take the padding back out of the layout so
     the strip still lines up with everything above and below it. */
  padding: 7px 0.35rem 20px; margin: -7px -0.35rem 0; }
.sw-tabs::-webkit-scrollbar { display: none; }

/* Arrows that say the strip scrolls. Built by showcase.js, which also toggles
   .is-on — each is present only while there is more strip in that direction, so
   on a screen wide enough for all six cards neither ever appears.
   The `top` below is only a starting point — syncNav() overwrites it with the
   measured centre of a card, which is not the centre of the strip: the padding
   above and below it is deliberately uneven (see .sw-tabs). */
.sw-tabs-wrap { position: relative; }
.sw-nav { position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: rgba(255, 255, 255, 0.94);
  color: var(--gray-700); box-shadow: 0 4px 14px rgba(13, 22, 34, 0.16);
  display: none; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease; }
.sw-nav.is-on { display: flex; }
.sw-nav:hover { background: #fff; color: var(--ink); }
.sw-nav svg { width: 15px; height: 15px; }
.sw-nav-prev { left: -2px; }
.sw-nav-next { right: -2px; }

.sw-tab { scroll-snap-align: center; cursor: pointer; display: block; text-align: left;
  background: #fff; border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.sw-tab:hover { border-color: var(--gray-400); transform: translateY(-2px); }
.sw-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sw-tab[aria-selected="true"] { border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), 0 10px 26px rgba(21, 94, 239, 0.13); }
.sw-tab .feature-icon { width: 36px; height: 36px; margin-bottom: 0.6rem; }
.sw-tab .feature-icon svg { width: 18px; height: 18px; }
.sw-tab[aria-selected="true"] .feature-icon { background: var(--blue); color: #fff; }
.sw-tab h3 { font-size: 0.95rem; margin: 0; line-height: 1.3; }

/* The cards sit directly above the carousel; this is the air between them. */
.is-ready .sw-stage { margin-top: 0.35rem; }

/* Carousel. The live window is 74% of the width; its neighbours sit behind at
   86% and are clipped by the stage, which is what gives the depth. Height comes
   from padding-bottom so it follows the width: 74% of a 16:10 body is 46.25%,
   plus the chrome bar. */
.sw-stage { position: relative; }
/* overflow:hidden is what keeps the side windows from spilling into the page,
   but it clips vertically too - the 1px ring on the live window and the drop
   shadow under it were both being sheared off. The windows start 12px down and
   the box is 56px taller than the tallest one, so both have room inside the
   clip. 46px is the chrome bar. */
.is-ready .sw-stage { height: 0; padding-bottom: calc(43.4% + 46px + 56px); overflow: hidden; }
.is-ready .sw-win { position: absolute; top: 12px; left: 50%; width: 64%;
  transform-origin: center top; cursor: pointer;
  transition: transform 0.5s var(--ease, cubic-bezier(.2,.7,.2,1)), opacity 0.4s ease; }
/* The live window wears the same blue outline as the live card. With nothing
   drawn between the two rows, this is what pairs them. */
.is-ready .sw-win[data-pos="live"] { transform: translateX(-50%); z-index: 3; opacity: 1;
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), 0 18px 44px rgba(21, 94, 239, 0.18); }
.is-ready .sw-win[data-pos="prev"] { transform: translateX(-50%) translateX(-58%) scale(0.86);
  z-index: 2; opacity: 0.5; }
.is-ready .sw-win[data-pos="next"] { transform: translateX(-50%) translateX(58%) scale(0.86);
  z-index: 2; opacity: 0.5; }
.is-ready .sw-win[data-pos="off"] { transform: translateX(-50%) scale(0.8);
  z-index: 1; opacity: 0; pointer-events: none; }

.sw-win { background: #fff; border: 1.5px solid var(--gray-200);
  border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px rgba(13, 22, 34, 0.14);
  transition: border-color 0.35s ease, box-shadow 0.35s ease; }
.sw-win-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  background: #f3f5f9; border-bottom: 1px solid var(--gray-200); }
.sw-win-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sw-win-url { flex: 1; margin: 0 8px; max-width: 62%; text-align: center;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 7px;
  font-size: 0.66rem; color: var(--gray-500); padding: 3px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The body carries the screenshots' own aspect (1200x814), not a rounded 16:10.
   Forcing them into 16:10 meant padding grey bars down each side; matching the
   frame to the picture removes them and loses nothing. Every screen is exported
   at that same size, so dropping a new one in cannot change the layout. */
.sw-win-body { aspect-ratio: 1200 / 814; background: #fff; position: relative;
  display: grid; place-items: center; }
.sw-win-body img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; }

/* Placeholder until the screens are shot. Deliberately plain - it should read as
   a frame waiting for content, not as a broken image. */
.sw-win-ph { display: grid; place-items: center; gap: 0.5rem; text-align: center;
  color: var(--gray-400); padding: 1.5rem; }
.sw-win-ph svg { width: 30px; height: 30px; }
.sw-win-ph span { font-size: 0.82rem; font-weight: 600; color: var(--gray-500); }

.sw-zoom { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(13, 22, 34, 0.12); border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--navy-900); cursor: zoom-in; padding: 0;
  opacity: 0; transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease; }
.sw-zoom svg { width: 16px; height: 16px; }
.sw-win[data-pos="live"] .sw-zoom { opacity: 1; }
/* Nothing to enlarge while the frame is still a placeholder, so the badge stays
   away until a real screenshot is dropped in. */
.sw-win-body:has(.sw-win-ph) + .sw-zoom { display: none; }
.sw-win[data-pos="live"]:hover .sw-zoom { background: var(--blue); color: #fff; }

.sw-lightbox { position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 4vmin;
  background: rgba(6, 12, 22, 0.86);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: zoom-out; }
.sw-lightbox img { max-width: 100%; max-height: 92vh; width: auto; height: auto;
  border-radius: var(--radius-lg); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); background: #fff; }
.sw-lightbox-x { position: absolute; top: 1rem; right: 1.25rem;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.6rem; line-height: 1; }
.sw-lightbox-x:hover { background: rgba(255, 255, 255, 0.26); }

/* Narrow screens: the neighbours are gone - at this width they are slivers that
   only steal room from the screen someone is actually trying to read. */
@media (max-width: 720px) {
  .is-ready .sw-stage { padding-bottom: calc(67.8% + 46px + 46px); }
  .is-ready .sw-win { width: 100%; }
  .is-ready .sw-win[data-pos="prev"], .is-ready .sw-win[data-pos="next"] {
    opacity: 0; pointer-events: none; transform: translateX(-50%) scale(0.9); }
  .sw-tabs { grid-auto-columns: minmax(172px, 1fr); }
  .is-ready .sw-stage { margin-top: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .is-ready .sw-win { transition: none; }
}