/* ============================================================
   Safetyline — v2 design system
   Palette: cobalt #083cff · azure #00b7ff · cyan #33f2ff on white
   ============================================================ */

:root {
  --bg: #ffffff;
  --text: #061027;
  --muted: #5b6b84;
  --blue: #083cff;
  --azure: #00b7ff;
  --cyan: #33f2ff;
  --blue-deep: #0639d8;
  /* darker companions used wherever the palette renders TEXT on white (>=3:1) */
  --azure-text: #0092cc;
  --cyan-text: #009bb0;
  /* single token for muted blue-grey label/interactive text (was 3 stray hexes) */
  --text-soft: #33507c;
  --line: rgba(8, 60, 255, 0.14);

  --glass-fill:
    radial-gradient(140% 90% at 12% 0%, rgba(255, 255, 255, 0.5), transparent 45%),
    radial-gradient(120% 90% at 90% 100%, rgba(51, 242, 255, 0.14), transparent 46%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.52), rgba(240, 251, 255, 0.26) 46%, rgba(51, 242, 255, 0.12));
  --glass-border: rgba(255, 255, 255, 0.65);
  /* liquid-glass rim: masked 1.4px gradient stroke — bright specular top edge,
     fading through a faint blue mid, glowing azure at the bottom edge */
  --glass-rim: linear-gradient(180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.4) 18%,
    rgba(8, 60, 255, 0.12) 40%,
    rgba(0, 183, 255, 0.12) 60%,
    rgba(255, 255, 255, 0.45) 82%,
    rgba(0, 183, 255, 0.85) 100%);
  --glass-inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --glass-inner-bottom: inset 0 -1px 1px rgba(8, 60, 255, 0.07);
  --glass-shadow: 0 22px 54px rgba(8, 60, 255, 0.12), 0 6px 16px rgba(2, 132, 199, 0.07);

  --radius-lg: 30px;
  --radius-md: 24px;
  --content: 1120px;
  --font-display: Geist, Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  /* gentle one-section snap on pointer devices — proximity tidies near a
     boundary but never confiscates a deliberate mid-section stop */
  scroll-snap-type: y proximity;
}

/* touch users most resent hijacked scroll, and mobile content sections now
   scroll naturally — so no snapping on coarse pointers */
@media (pointer: coarse) {
  html { scroll-snap-type: none; }
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--blue);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  translate: 0 -220%;
  transition: translate 160ms ease;
}

.skip-link:focus-visible {
  translate: 0 0;
  outline-color: var(--blue);
}

/* ---------- ambient background ---------- */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgba(14, 116, 144, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 116, 144, 0.09) 1px, transparent 1px);
  background-size: 6rem 4rem;
}

.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 560px at 50% 180px, rgba(147, 219, 255, 0.62), transparent 70%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 78%);
}

.wisp-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.site-shell {
  position: relative;
  z-index: 2;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: 2px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--azure), var(--cyan));
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
}

/* ============================================================
   LIQUID GLASS CORE
   Layered recipe: refraction (backdrop) → fill → rim light → sheen
   ============================================================ */

.glass-panel,
.glass-card,
.glass-chip,
.glass-btn {
  position: relative;
  isolation: isolate;
  border: none;
  background: var(--glass-fill);
  box-shadow:
    var(--glass-inner-top),
    var(--glass-inner-bottom),
    inset 2px 4px 10px -6px rgba(255, 255, 255, 0.95),
    var(--glass-shadow);
}

/* full refraction only where surfaces float over content — keeps paint cost low */
.glass-btn,
.mobile-menu {
  -webkit-backdrop-filter: blur(14px) saturate(165%) brightness(1.03);
  backdrop-filter: blur(14px) saturate(165%) brightness(1.03);
}

.glass-card,
.glass-chip {
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
}

/* large panels skip the backdrop pass — over white it is invisible but it
   forces the compositor to re-raster a huge region (mobile GPUs included) */
.glass-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    radial-gradient(140% 90% at 12% 0%, rgba(255, 255, 255, 0.85), transparent 45%),
    var(--glass-fill),
    rgba(255, 255, 255, 0.55);
}

/* the floating mobile menu is a glass-panel that genuinely sits over content */
.mobile-menu.glass-panel {
  -webkit-backdrop-filter: blur(14px) saturate(165%) brightness(1.03);
  backdrop-filter: blur(14px) saturate(165%) brightness(1.03);
}

/* the liquid-glass rim — a masked gradient stroke instead of a flat border.
   (light curve that used to live here is folded into --glass-fill) */
.glass-panel::before,
.glass-card::before,
.glass-chip::before,
.glass-btn::before,
.lg-nav::before,
.nav-indicator::before,
.card-icon::before,
.km-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.4px;
  background: var(--rim, var(--glass-rim));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-panel { border-radius: var(--radius-lg); }
.glass-card  { border-radius: var(--radius-md); }
.glass-chip  { border-radius: 999px; }

/* ---------- glass buttons ---------- */

.glass-btn {
  --btn-text: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0.72rem 1.5rem;
  overflow: hidden;
  border-radius: 999px;
  color: var(--btn-text);
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 200ms ease, border-color 200ms ease;
}

.glass-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.75) 48%, transparent 62%);
  background-size: 240% 100%;
  background-position: 120% 0;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.glass-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--glass-inner-top),
    var(--glass-inner-bottom),
    0 18px 42px rgba(8, 60, 255, 0.2),
    0 6px 14px rgba(2, 132, 199, 0.12);
}

.glass-btn:hover::after {
  opacity: 1;
  animation: btn-shine 900ms ease forwards;
}

.glass-btn:active { transform: translateY(0) scale(0.98); }

@keyframes btn-shine {
  to { background-position: -120% 0; }
}

.glass-btn--accent {
  --btn-text: #ffffff;
  --rim: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 30%, rgba(140, 210, 255, 0.3) 65%, rgba(190, 240, 255, 0.9) 100%);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, var(--blue) 0%, #0455e6 55%, #0077d4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(4, 20, 90, 0.28),
    0 18px 40px rgba(8, 60, 255, 0.3),
    0 4px 12px rgba(8, 60, 255, 0.2);
  text-shadow: 0 1px 2px rgba(4, 20, 90, 0.3);
}

.glass-btn--accent:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 6px rgba(4, 20, 90, 0.28),
    0 22px 52px rgba(8, 60, 255, 0.38),
    0 6px 16px rgba(8, 60, 255, 0.24);
}

.glass-btn--clear { background: var(--glass-fill); }

.glass-btn--lg {
  min-height: 54px;
  padding: 0.9rem 2rem;
  font-size: 0.98rem;
}

/* WhatsApp — the differentiator's front door (brand green, glass sheen kept) */
.glass-btn--whatsapp {
  --btn-text: #ffffff;
  --rim: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(150, 240, 190, 0.35) 65%, rgba(170, 250, 205, 0.9) 100%);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, #1ebe57 0%, #17a94c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(6, 60, 30, 0.28),
    0 16px 36px rgba(23, 169, 76, 0.28),
    0 4px 12px rgba(23, 169, 76, 0.18);
  text-shadow: 0 1px 2px rgba(6, 50, 25, 0.3);
}

.glass-btn--whatsapp:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(6, 60, 30, 0.28),
    0 20px 46px rgba(23, 169, 76, 0.36),
    0 6px 16px rgba(23, 169, 76, 0.22);
}

.wa-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  flex: none;
}

/* floating WhatsApp button — persistent on phones */
.wa-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #17a94c);
  box-shadow: 0 10px 26px rgba(23, 169, 76, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: wa-fab-in 400ms cubic-bezier(0.34, 1.5, 0.5, 1) 600ms backwards;
}

.wa-fab svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 0;
}

@keyframes wa-fab-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

.contact-wa { margin-top: 4px; }

/* the FAB is the persistent WhatsApp door for touch users */
@media (pointer: coarse) {
  .wa-fab { display: inline-flex; }
}

/* ============================================================
   NAV — the liquid glass bar
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px clamp(16px, 3vw, 40px) 0;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 260ms ease, visibility 0s linear 0s;
}

.brand--header {
  grid-column: 1;
  justify-self: start;
}

.header-spacer { grid-column: 3; }

.site-header.nav-hidden {
  transform: translateY(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition-delay: 0s, 0s, 320ms;
}

.lg-nav {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  grid-column: 2;
  width: fit-content;
  max-width: calc(100vw - 32px);
  min-height: 62px;
  padding: 8px 9px 8px 14px;
  border: none;
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow:
    var(--glass-inner-top),
    var(--glass-inner-bottom),
    inset 2px 4px 12px -6px rgba(255, 255, 255, 0.95),
    0 18px 48px rgba(8, 60, 255, 0.14),
    0 5px 14px rgba(2, 132, 199, 0.08);
  transition: box-shadow 300ms ease, background 300ms ease;
}

/* refraction layer — does the heavy backdrop work */
.lg-nav__refraction {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  overflow: hidden;
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.04);
  backdrop-filter: blur(22px) saturate(185%) brightness(1.04);
}

/* subtle edge refraction — Chromium-only (SVG backdrop filters render nowhere
   else, and @supports cannot detect that: Firefox parses url() as valid then
   drops the whole chain, killing the blur). Gated by a JS-set class instead. */
.svg-backdrop .lg-nav__refraction {
  backdrop-filter: url("#lg-refract") blur(14px) saturate(185%) brightness(1.04);
}

/* travelling specular highlight */
.lg-nav__sheen {
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(220px 46px at var(--sheen-x, 18%) -8%, rgba(255, 255, 255, 0.85), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 34%);
  animation: sheen-drift 11s ease-in-out infinite;
}

@keyframes sheen-drift {
  0%, 100% { --sheen-x: 16%; }
  50% { --sheen-x: 84%; }
}

@property --sheen-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 16%;
}

.site-header.scrolled .lg-nav {
  box-shadow:
    var(--glass-inner-top),
    var(--glass-inner-bottom),
    inset 2px 4px 12px -6px rgba(255, 255, 255, 0.95),
    0 24px 60px rgba(8, 60, 255, 0.2),
    0 6px 18px rgba(2, 132, 199, 0.12);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand img {
  width: 34px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 116, 255, 0.28));
}

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  z-index: 1;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  transition: color 200ms ease;
}

.nav-links a:hover { color: var(--blue); }
.nav-links a.is-active { color: var(--blue-deep); }

.nav-indicator {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  height: 36px;
  width: 0;
  translate: var(--x, 0) -50%;
  width: var(--w, 0);
  border-radius: 999px;
  border: none;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25)),
    linear-gradient(135deg, rgba(51, 242, 255, 0.22), rgba(8, 60, 255, 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 20px rgba(8, 60, 255, 0.16);
  opacity: var(--on, 0);
  transition: translate 320ms cubic-bezier(0.3, 1.2, 0.4, 1), width 320ms cubic-bezier(0.3, 1.2, 0.4, 1), opacity 220ms ease;
}

.nav-cta { min-height: 44px; padding: 0.55rem 1.25rem; font-size: 0.85rem; }

/* mobile menu */

.menu-btn {
  display: none;
  position: relative;
  margin-left: auto; /* stays pinned to the right when .nav-links is hidden */
  width: 46px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  color: var(--blue);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 24px rgba(8, 60, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.menu-icon { position: relative; width: 20px; height: 14px; }

.menu-icon span {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 240ms ease, opacity 180ms ease, top 240ms ease;
}

.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 6px; }
.menu-icon span:nth-child(3) { top: 12px; }

.site-header.menu-open .menu-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.site-header.menu-open .menu-icon span:nth-child(2) { opacity: 0; }
.site-header.menu-open .menu-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 16px;
  display: grid;
  gap: 2px;
  width: min(300px, calc(100vw - 32px));
  padding: 14px;
  opacity: 0;
  translate: 0 -10px;
  scale: 0.97;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 220ms ease, translate 220ms ease, scale 220ms ease, visibility 0s linear 220ms;
}

.site-header.menu-open .mobile-menu {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s, 0s, 0s, 0s;
}

.mobile-menu a {
  padding: 13px 16px;
  border-radius: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  transition: background 180ms ease, color 180ms ease;
}

.mobile-menu a:hover { background: rgba(255, 255, 255, 0.55); color: var(--blue); }
.mobile-menu a.is-active { color: var(--blue-deep); }
.mobile-menu .mobile-cta { margin-top: 8px; justify-content: center; color: #fff; }

/* ============================================================
   HERO + 3D LOGO
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* bottom padding reserves real clearance for .scroll-cue (68px footprint)
     so centered content can never collide with it */
  padding: 84px 18px 78px;
  text-align: center;
  scroll-snap-align: start;
}

.logo-stage {
  position: relative;
  /* the mark is the hero — as large as the one-screen hero allows */
  width: min(clamp(280px, 36vw, 470px), 44vh);
  margin-bottom: clamp(10px, 2.2vh, 24px);
}

/* pointer-reactive, not animated: the mark leans toward the cursor and a
   specular light sweeps across its silhouette (masked to the logo alpha) */
.logo-wrap {
  position: relative;
  z-index: 2;
  translate: var(--px, 0px) var(--py, 0px);
  transition: translate 450ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.logo-img {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.logo-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(42% 36% at var(--lx, 32%) var(--ly, 26%), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%);
  -webkit-mask: url("logo-640.webp") center / contain no-repeat;
  mask: url("logo-640.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: var(--lo, 0);
  transition: opacity 300ms ease;
}

@keyframes logo-pop-kf {
  0% { scale: 1; }
  35% { scale: 1.06; }
  100% { scale: 1; }
}

.logo-pop { animation: logo-pop-kf 520ms cubic-bezier(0.3, 1.4, 0.4, 1); }

.logo-glow {
  position: absolute;
  inset: -20%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(51, 200, 255, 0.42), rgba(8, 60, 255, 0.1) 55%, transparent 72%);
  filter: blur(12px);
  opacity: var(--glow-boost, 0.7);
  transition: opacity 300ms ease;
  pointer-events: none;
}

.logo-shadow {
  position: absolute;
  left: 50%;
  bottom: -30px;
  z-index: 0;
  width: 58%;
  height: 22px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(6, 24, 90, 0.28), transparent 68%);
  filter: blur(6px);
}

.hero-title {
  max-width: 940px;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero-sub {
  max-width: 660px;
  margin: 0 0 24px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.8vw, 1.13rem);
  line-height: 1.66;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

/* short viewports: keep the whole hero visible */
@media (max-height: 760px) and (min-width: 880px) {
  .logo-stage { width: clamp(160px, 22vh, 240px); }
  .hero-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
  .hero-sub { margin-bottom: 22px; }
  .hero-chips { margin-top: 24px; }
}

.hero-chips .glass-chip {
  padding: 9px 18px;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
}

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  translate: -50% 0;
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(8, 60, 255, 0.3);
  border-radius: 999px;
}

.scroll-cue span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  translate: -50% 0;
  border-radius: 999px;
  background: linear-gradient(var(--blue), var(--azure));
  animation: cue-drop 1.9s ease-in-out infinite;
}

@keyframes cue-drop {
  0% { opacity: 0; translate: -50% 0; }
  30% { opacity: 1; }
  100% { opacity: 0; translate: -50% 14px; }
}

/* ============================================================
   SECTIONS — shared
   ============================================================ */

.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(var(--content), calc(100% - 36px));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 80px 0 28px;
  scroll-snap-align: start;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 0 10px rgba(0, 183, 255, 0.6);
}

.section-head {
  max-width: 780px;
  margin: 0 auto clamp(18px, 3vw, 30px);
  text-align: center;
}

.section-head h2,
.section-copy h2,
.cta-copy h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section-head p,
.section-copy p,
.cta-copy > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.04rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.gradient-text {
  background: linear-gradient(90deg, var(--blue) 0%, var(--azure-text) 32%, var(--cyan-text) 50%, var(--azure-text) 68%, var(--blue) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-flow 8s linear infinite;
}

.gradient-text-static {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue), var(--azure-text) 60%, var(--cyan-text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes gradient-flow {
  to { background-position: 300% 0; }
}

/* ============================================================
   SCROLL CHOREOGRAPHY — reversible reveal engine.
   IntersectionObserver toggles .in-view on enter AND removes on leave,
   so every element animates IN when it enters the viewport and OUT when
   it leaves, re-firing on re-entry (scroll up AND down).
   From-states use the INDIVIDUAL transform properties (translate/scale/
   rotate) + parent `perspective`, so they compose with the pointer-tilt
   `transform` on cards instead of clobbering it. Per-section overrides
   below give each section its own distinct, thematic motion.
   ============================================================ */

[data-reveal] {
  --i: 0;                 /* child index within its group (set by JS) */
  --stag: 80ms;           /* per-child stagger (per-section override) */
  --rv-in: 660ms;         /* enter duration (per-section override) */
  --rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
  translate: 0 26px;      /* default from-state — sections override */
  /* LEAVE: quick, ease-in, no stagger — the page "settles" on exit */
  transition:
    opacity 320ms ease-in,
    translate 320ms ease-in,
    scale 320ms ease-in,
    rotate 320ms ease-in,
    filter 320ms ease-in,
    clip-path 320ms ease-in;
}

[data-reveal].in-view {
  opacity: 1;
  /* !important so the reset beats the id-scoped from-states (which are more
     specific) — otherwise revealed elements keep their offset/scale/rotate */
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  filter: none !important;
  /* ENTER: slower, expensive easing, staggered by child index */
  transition:
    opacity var(--rv-in) var(--rv-ease) calc(var(--i) * var(--stag)),
    translate var(--rv-in) var(--rv-ease) calc(var(--i) * var(--stag)),
    scale var(--rv-in) var(--rv-ease) calc(var(--i) * var(--stag)),
    rotate var(--rv-in) var(--rv-ease) calc(var(--i) * var(--stag)),
    filter var(--rv-in) var(--rv-ease) calc(var(--i) * var(--stag)),
    clip-path var(--rv-in) var(--rv-ease) calc(var(--i) * var(--stag));
}

/* word-by-word blur-in on the hero headline (split by app.js) */
.blur-word { display: inline-block; }

.title-split .blur-word {
  animation: word-in 700ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  animation-delay: calc(240ms + var(--wi, 0) * 90ms);
}

@keyframes word-in {
  from {
    opacity: 0;
    translate: 0 42px;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }
}

/* ---------- positioning ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.85fr);
  align-items: center;
  gap: clamp(30px, 6vw, 80px);
}

.key-message {
  display: grid;
  gap: 22px;
  padding: clamp(26px, 4vw, 42px);
}

.km-icon {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 14px;
  color: var(--blue-deep);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.25) 62%),
    linear-gradient(160deg, rgba(51, 242, 255, 0.18), rgba(8, 60, 255, 0.08));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(8, 60, 255, 0.14);
}

.key-message blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.km-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
}

.km-flow i {
  flex: 0 0 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--azure), var(--cyan));
}

/* ---------- agents (the differentiator) ---------- */

.split--agents {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
}

/* ---------- feature showcase: numbered list that drives the phone preview.
   Transparent, borderless — an accent ring + colour carry the active state,
   inspired by the 21st.dev feature-section auto-advancing step pattern. ---------- */

.feature-showcase { margin: 22px 0 0; }

.feature-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  padding: 11px 10px;
  border: none;
  background: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background 220ms ease;
}

.feature-item:hover,
.feature-item:focus-visible { background: rgba(8, 60, 255, 0.045); }

.feature-item:focus-visible { outline: 2px solid rgba(0, 183, 255, 0.55); outline-offset: 2px; }

.feature-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-soft);
  background: rgba(8, 60, 255, 0.07);
  transition: color 240ms ease, background 240ms ease, transform 240ms cubic-bezier(0.34, 1.4, 0.5, 1);
}

.feature-item.is-active .feature-num {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--azure));
  box-shadow: 0 8px 18px rgba(8, 60, 255, 0.28);
  transform: scale(1.06);
}

/* progress ring — fills clockwise while the item is active (auto-advance cue) */
.feature-ring {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  transform: rotate(-90deg);
  pointer-events: none;
}

.feature-ring circle {
  fill: none;
  stroke: var(--azure);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: 97.4;
  opacity: 0;
  transition: opacity 200ms ease;
}

.feature-item.is-active .feature-ring circle {
  opacity: 1;
  stroke-dashoffset: calc(97.4 * (1 - var(--progress, 0)));
}

.feature-copy { display: grid; gap: 3px; }

.feature-copy strong {
  font-family: var(--font-display);
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text);
  transition: color 200ms ease;
}

.feature-item.is-active .feature-copy strong { color: var(--blue-deep); }

.feature-copy small {
  display: block;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.chat {
  display: grid;
  gap: 10px;
}

/* one-shot player: when JS drives it, bubbles start hidden and reveal in sequence.
   Without JS (or if it errors) the class is never added, so all bubbles show. */
.chat.chat--anim .msg {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 360ms ease, translate 360ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.chat.chat--anim .msg.is-shown {
  opacity: 1;
  translate: 0 0;
}

.msg {
  max-width: 86%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.msg p { margin: 0; }

.msg--user {
  justify-self: end;
  border-bottom-right-radius: 6px;
  background: linear-gradient(135deg, #0455e6, var(--blue));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px rgba(8, 60, 255, 0.22);
}

.msg--agent {
  justify-self: start;
  border: 1px solid rgba(8, 60, 255, 0.12);
  border-bottom-left-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(8, 60, 255, 0.07);
}

.msg--agent strong { color: var(--blue-deep); }

.msg-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.msg-actions span {
  padding: 5px 13px;
  border: 1px solid rgba(8, 60, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
}

.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 13px 15px;
}

.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(8, 60, 255, 0.42);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { translate: 0 0; opacity: 0.45; }
  30% { translate: 0 -4px; opacity: 1; }
}

/* ---------- card grids ---------- */

.card-grid {
  display: grid;
  gap: 12px;
}

.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* clearer "liquid glass": barely-tinted, more transparent, heavily frosted so
   the waves behind diffuse through as soft colour; definition comes from the
   crisp rim + a soft neutral shadow rather than a blue fill */
.glass-card {
  padding: 20px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.07) 52%, rgba(255, 255, 255, 0.22));
  -webkit-backdrop-filter: blur(14px) saturate(108%) brightness(1.04);
  backdrop-filter: blur(14px) saturate(108%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -10px 22px -14px rgba(8, 60, 255, 0.10),
    0 20px 46px rgba(20, 40, 90, 0.10),
    0 6px 16px rgba(20, 40, 90, 0.05);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 300ms ease;
}

.glass-card > * {
  position: relative;
  z-index: 1;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -10px 22px -14px rgba(0, 183, 255, 0.14),
    0 30px 60px rgba(20, 40, 90, 0.14),
    0 8px 20px rgba(0, 150, 220, 0.08);
}

/* ---- signature pointer FX (body.fx set by JS on fine-pointer desktops) ---- */

body.fx .glass-card {
  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform 160ms ease-out, box-shadow 260ms ease, border-color 260ms ease;
}

body.fx .glass-card:hover { --lift: -5px; }

/* specular hotspot that follows the pointer across the glass */
body.fx .glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.65), transparent 62%);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

body.fx .glass-card:hover::after { opacity: 1; }

body.fx .glass-btn {
  transform: translate(var(--magx, 0px), var(--magy, 0px));
}

body.fx .glass-btn:hover {
  transform: translate(var(--magx, 0px), calc(var(--magy, 0px) - 2px));
}

body.fx .glass-btn:active {
  transform: translate(var(--magx, 0px), var(--magy, 0px)) scale(0.97);
}

.btn-arrow {
  display: inline-block;
  transition: translate 200ms ease;
}

.glass-btn:hover .btn-arrow { translate: 4px 0; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.035;
  mix-blend-mode: multiply;
}

/* ---- hero entrance choreography ---- */

@keyframes hero-in {
  from {
    opacity: 0;
    translate: 0 34px;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

body.fx-enter .hero > * {
  animation: hero-in 850ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

body.fx-enter .hero > *:nth-child(1) { animation-delay: 40ms; }
body.fx-enter .hero > *:nth-child(2) { animation-delay: 150ms; }
body.fx-enter .hero > *:nth-child(3) { animation-delay: 250ms; }
body.fx-enter .hero > *:nth-child(4) { animation-delay: 350ms; }
body.fx-enter .hero > *:nth-child(5) { animation-delay: 450ms; }
body.fx-enter .hero > *:nth-child(6) { animation-delay: 650ms; }

/* when the headline is word-split, its words animate individually instead */
body.fx-enter .hero > .title-split { animation: none; }

/* nested glass icon square (reference pattern: glass-within-glass) */
.card-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 13px;
  border-radius: 14px;
  color: var(--blue-deep);
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.4) 62%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(214, 236, 255, 0.28));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    0 8px 20px rgba(20, 40, 90, 0.08);
  transition: transform 260ms cubic-bezier(0.34, 1.5, 0.5, 1);
}

.glass-card:hover .card-icon { transform: translateY(-2px) scale(1.06) rotate(-3deg); }

.card-icon svg,
.impact-item svg,
.contact-info svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glass-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.glass-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* (problem-card icons now share the unified nested-glass treatment) */

/* ---------- statements ---------- */

/* transition band — a slim breath BETWEEN sections (not a full viewport).
   The text is scroll-scrubbed by app.js: it rises + sharpens + brightens as
   it nears viewport-centre, then drifts + softens + fades as it leaves,
   so it animates both coming IN and going OUT. */
.statement-band {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(940px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(52px, 13vh, 132px) 0;
  text-align: center;
  overflow: clip; /* contain the vertical drift, never spawn h-scroll */
}

.statement-text {
  --p: 0;   /* 0 at viewport edges → 1 at centre (set per-frame by JS) */
  --dir: 0; /* signed distance from centre → drives rise direction */
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.5vw, 2.7rem);
  font-weight: 300;
  line-height: 1.26;
  letter-spacing: -0.025em;
  text-wrap: balance;
  opacity: var(--p);
  translate: 0 calc(var(--dir) * 48px);
  scale: calc(0.95 + var(--p) * 0.05);
  filter: blur(calc((1 - var(--p)) * 9px));
  will-change: opacity, translate, filter;
}

/* before JS runs (or if it never does), show the text rather than hide it */
.no-scrub .statement-text {
  opacity: 1;
  translate: 0;
  scale: 1;
  filter: none;
}

/* ---------- solution pillars ---------- */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pillar { padding-top: 24px; }

.pillar-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, rgba(8, 60, 255, 0.5), rgba(51, 242, 255, 0.6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- process ---------- */

.process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.process-track::before {
  content: "";
  position: absolute;
  top: 44px;
  right: 8%;
  left: 8%;
  height: 2px;
  background: linear-gradient(90deg, rgba(8, 60, 255, 0.3), rgba(0, 183, 255, 0.4), rgba(51, 242, 255, 0.35));
  z-index: 0;
}

.step {
  z-index: 1;
  padding: 22px 20px;
  text-align: left;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.6), transparent 42%),
    linear-gradient(135deg, var(--blue), #0077d4 75%);
  box-shadow: 0 12px 26px rgba(8, 60, 255, 0.3);
  font-family: var(--font-display);
  font-weight: 700;
}

.step h3 { font-size: 0.99rem; }
.step p { font-size: 0.85rem; }

/* ---------- why (bento) ---------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.why-card:nth-child(1),
.why-card:nth-child(2) { grid-column: span 3; }

.why-card:nth-child(3),
.why-card:nth-child(4),
.why-card:nth-child(5) { grid-column: span 2; }

/* ---------- impact ---------- */

.impact-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.impact-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border-radius: 22px;
  color: var(--blue-deep);
}

.impact-item svg { width: 26px; height: 26px; flex: none; }

.impact-item strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
}

.impact-item span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* ---------- contact / CTA ---------- */

.cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
  gap: clamp(26px, 4vw, 52px);
  padding: clamp(22px, 3.4vw, 40px);
}

.contact-info {
  display: grid;
  gap: 16px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.contact-info li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 13px;
}

.contact-info svg {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 13px;
  color: var(--blue-deep);
  background: rgba(51, 200, 255, 0.16);
  border: 1px solid rgba(8, 60, 255, 0.12);
}

.contact-info strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 2px;
}

.contact-info span,
.contact-info a {
  color: var(--text);
  font-size: 0.95rem;
}

.contact-info a:hover { color: var(--blue); }

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.hp-field { display: none; }

.contact-form label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid rgba(8, 60, 255, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 1rem; /* 16px floor keeps iOS Safari from zooming on focus */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 3px rgba(8, 60, 255, 0.35);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.contact-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--blue) 50%),
    linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.contact-form textarea {
  min-height: 110px;
  resize: vertical;
}

.form-wide, .form-submit, .form-status { grid-column: 1 / -1; }

.form-status {
  min-height: 20px;
  margin: 0;
  color: var(--blue-deep);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  position: relative;
  scroll-snap-align: end;
  margin-top: 0;
  /* 100% (not 100vw) so the gutters match the sections' auto-margin centering
     when a classic scrollbar is present */
  padding: clamp(40px, 6vw, 72px) max(20px, calc((100% - var(--content)) / 2)) 28px;
  border-top: 1px solid rgba(8, 60, 255, 0.1);
  background:
    radial-gradient(circle at 50% 0%, rgba(147, 219, 255, 0.3), transparent 56%),
    rgba(255, 255, 255, 0.6);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  gap: clamp(32px, 7vw, 90px);
  align-items: start;
}

.footer-brand p {
  max-width: 380px;
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.94rem;
}

.footer-links {
  display: grid;
  gap: 12px;
  min-width: 160px;
}

.footer-links > span {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-links a {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.93rem;
  transition: color 160ms ease;
}

.footer-links a:hover { color: var(--blue); }

.footer-loc { color: var(--muted); font-size: 0.85rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(8, 60, 255, 0.1);
  color: var(--muted);
  font-size: 0.85rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1020px) {
  .nav-cta { display: none; }

  /* 5-across impact pills only fit above ~1020px (long words like
     "Accountability" overflow the tracks below that) */
  .impact-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-item:nth-child(5) { grid-column: span 2; }
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  /* pill collapses to just the hamburger, right-aligned; brand stays left */
  .site-header { grid-template-columns: 1fr auto; }
  .header-spacer { display: none; }
  .lg-nav {
    grid-column: 2;
    justify-self: end;
    min-height: 0;
    padding: 6px;
  }

  .cols-3, .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split { grid-template-columns: 1fr; gap: 28px; }
  /* agents keeps the phone beside the copy at every width — it's the section's point */
  .split--agents { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 22px; align-items: center; }


  .process-track { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .process-track::before {
    top: 6%;
    bottom: 6%;
    left: 41px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(8, 60, 255, 0.3), rgba(0, 183, 255, 0.4), rgba(51, 242, 255, 0.35));
  }
  .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
  .step .step-num { margin-bottom: 0; }
  .step h3 { grid-column: 2; margin: 0 0 6px; align-self: center; }
  .step p { grid-column: 2; }
  .step h3 { align-self: center; }

  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-card:nth-child(n) { grid-column: span 1; }
  .why-card:nth-child(5) { grid-column: span 2; }

  .cta-panel { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-header { padding-top: 12px; }
  .hero { padding-top: 96px; }

  .hero-chips { gap: 8px; margin-top: 30px; }
  .hero-chips .glass-chip { padding: 7px 13px; font-size: 0.74rem; }

  .actions { width: 100%; max-width: 340px; }
  .actions .glass-btn { width: 100%; }

  .cols-3, .pillar-grid { grid-template-columns: 1fr; }
  .glass-card { padding: 20px; }

  .why-grid { grid-template-columns: 1fr; }
  .why-card:nth-child(n) { grid-column: auto; }

  .impact-rail { grid-template-columns: 1fr; }
  .impact-item:nth-child(5) { grid-column: auto; }

  .statement-text { font-size: 1.35rem; }

  .contact-form { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .scroll-cue { display: none; }
}

/* ============================================================
   MOBILE — narrow-width LAYOUT compaction only. Whether content is
   shown full, clamped, or title-only is decided per-section by the
   density engine (.s-snug / .s-tighter below), which measures each
   section against the real viewport. Every section is one viewport
   tall in every view.
   ============================================================ */

@media (max-width: 560px) {
  .section, .statement { padding-top: 74px; padding-bottom: 22px; }

  .hero { padding-top: 74px; padding-bottom: 24px; }
  .logo-stage { width: min(60vw, 28vh); margin-bottom: 10px; }
  .hero-title { margin-bottom: 14px; font-size: clamp(1.8rem, 7.6vw, 2.2rem); }
  .hero-sub { margin-bottom: 16px; font-size: 0.98rem; }
  .actions { gap: 8px; }
  .actions .glass-btn { min-height: 46px; padding: 0.6rem 1.2rem; font-size: 0.9rem; }
  .hero-chips { margin-top: 14px; gap: 7px; }
  .hero-chips .glass-chip { padding: 6px 12px; font-size: 0.7rem; }

  .section-head { margin-bottom: 14px; }
  .section-head p { font-size: 0.9rem; }
  .section-head h2, .section-copy h2, .cta-copy h2 { font-size: 1.6rem; }
  .section-copy p { font-size: 0.92rem; }

  /* dense 2-col card grids */
  .cols-3, .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cols-3 .glass-card, .pillar { padding: 13px; border-radius: 18px; }
  .pillar-num { display: none; }
  .card-icon { width: 34px; height: 34px; margin-bottom: 9px; border-radius: 12px; }
  .card-icon svg { width: 17px; height: 17px; }
  .glass-card h3 { margin-bottom: 4px; font-size: 0.82rem; line-height: 1.3; }
  .glass-card p { font-size: 0.74rem; line-height: 1.4; }

  .key-message { gap: 14px; padding: 18px; }
  .key-message blockquote { font-size: 1.1rem; }
  .km-flow { display: none; }

  .split { gap: 16px; }

  /* AGENTS on phones: heading (2 lines) → numbered feature row (hover/tap
     reveals its label) → the phone, sized to the height left over so the
     whole section fits ONE viewport (see the vh-capped .iphone-stage below).
     The list sits ABOVE the phone, never beside it.
     NOTE: the id `#agents` is used throughout this section (instead of the
     `.agents` class) so these rules always outrank the generic density-tier
     classes (.s-snug/.s-tight/.s-tighter) the fit-engine stacks on this
     section — a big enlarged phone routinely needs all three tiers just to
     fit one viewport, and equal-specificity class rules defined later in
     the file would otherwise silently win and break this layout. */
  #agents .split--agents {
    display: block;
    text-align: center;
  }
  #agents .section-copy { text-align: center; }
  #agents .section-copy > p { display: none; }
  #agents .section-copy h2 {
    max-width: 21ch;
    margin: 0 auto 10px;
    font-size: clamp(1.28rem, 6.2vw, 1.6rem);
    line-height: 1.18;
  }
  #agents .kicker { justify-content: center; margin-bottom: 8px; }

  #agents .feature-showcase { display: block; margin-top: 16px; }
  #agents .feature-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0;
  }
  #agents .feature-item {
    position: relative;
    display: block;
    padding: 3px;
    border-radius: 50%;
  }
  #agents .feature-item:hover,
  #agents .feature-item:focus-visible { background: none; }
  #agents .feature-num { width: 32px; height: 32px; font-size: 0.74rem; }
  /* the label is a floating tooltip above the number — hidden until the
     number is active, hovered, or focused ("full text only appears on hover") */
  /* the tooltip drops DOWN into the gap before the phone (never up into the
     heading above — there's no guaranteed clearance there at 2 lines) */
  #agents .feature-copy {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    translate: -50% -5px;
    display: block;
    width: max-content;
    max-width: 42vw;
    padding: 7px 12px;
    border-radius: 12px;
    background: rgba(6, 20, 60, 0.94);
    box-shadow: 0 10px 24px rgba(8, 60, 255, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, translate 200ms ease;
    z-index: 5;
  }
  #agents .feature-copy::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50% 0;
    border: 5px solid transparent;
    border-bottom-color: rgba(6, 20, 60, 0.94);
  }
  #agents .feature-copy small { display: none; }
  #agents .feature-copy strong {
    display: block;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
  }
  #agents .feature-item.is-active .feature-copy,
  #agents .feature-item:hover .feature-copy,
  #agents .feature-item:focus-visible .feature-copy {
    opacity: 1;
    translate: -50% 0;
  }

  /* The phone is sized by AVAILABLE HEIGHT (vh), not width, so heading +
     numbers + phone always add up to one viewport. (Sizing by width made a
     tall-aspect phone overflow the screen badly.) The fit-engine's tiers
     shrink it further on very short screens; these are #agents-scoped so
     they still beat the generic class tiers. */
  #agents .split--agents .iphone-stage { width: min(78vw, 34vh); margin: 12px auto 0; }
  #agents.s-snug .iphone-stage    { width: min(72vw, 30vh); }
  #agents.s-tight .iphone-stage   { width: min(66vw, 27vh); }
  #agents.s-tighter .iphone-stage { width: min(60vw, 24vh); }
  /* the numbers double as the screen nav now — keep them at every tier */
  #agents.s-tight .feature-showcase,
  #agents.s-tighter .feature-showcase { display: block; margin-top: 10px; }
  /* keep the phone's decorative glow from bleeding past the viewport edge */
  #agents .iphone-glow { left: -8%; right: -8%; }

  /* readiness */
  .bar-panel { padding: 18px 15px; }
  .bar-question { font-size: 1.08rem; min-height: 0; margin-bottom: 14px; }
  .bar-option { min-height: 46px; padding: 10px 14px; font-size: 0.86rem; }
  .bar-options { gap: 8px; }
  .bar-result { gap: 16px; }
  .bar-gauge { width: 120px; }


  /* process */
  .step { padding: 12px 14px; grid-template-columns: 34px 1fr; }
  .step .step-num { width: 34px; height: 34px; font-size: 0.85rem; }
  .step h3 { font-size: 0.88rem; margin: 0 0 3px; }
  .step p { font-size: 0.72rem; }
  .process-track { gap: 10px; }
  .process-track::before { left: 31px; }

  /* why */
  .why-grid { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-card:nth-child(n) { grid-column: auto; }
  .why-card:nth-child(5) { grid-column: span 2; }
  .why-card { padding: 13px; }

  /* impact */
  .impact-rail { gap: 8px; }
  .impact-item { padding: 12px 14px; }
  .impact-item strong { margin-bottom: 0; }
  .impact-item span { font-size: 0.7rem; }

  /* faq */
  .faq-list { gap: 8px; }

  /* contact */
  .cta-panel { padding: 18px 15px; gap: 14px; }
  .cta-copy h2 { font-size: 1.5rem; }
  .cta-copy > p { font-size: 0.88rem; }
  .contact-info { gap: 10px; margin-top: 14px; }
  .contact-wa { width: 100%; margin-top: 12px; }
  .contact-form { gap: 9px; }
  .contact-form label { gap: 4px; font-size: 0.74rem; }
  .contact-form input, .contact-form select { min-height: 44px; padding: 10px 13px; }
  .contact-form textarea { min-height: 64px; }
  .contact-form .form-submit { min-height: 48px; }
  .form-status { min-height: 0; }

  .statement-text { font-size: 1.4rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    /* scroll-snapping is motion the user did not initiate — honor the request */
    scroll-snap-type: none;
  }

  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }

  /* every reveal shown plainly, all transform props reset */
  [data-reveal] { opacity: 1; translate: none; scale: none; rotate: none; filter: none; clip-path: none; }
  #readiness .section-head h2 { clip-path: none; }
  .iphone-stage.scrub { opacity: 1; transform: none; }
  /* agent chat shows its full transcript statically (no one-shot play) */
  .chat.chat--anim .msg { opacity: 1; translate: 0 0; }
  /* statement bands shown plainly — no scroll-scrub */
  .statement-text { opacity: 1; translate: 0; scale: 1; filter: none; }
  /* .wisp-canvas stays visible — it is a static image, not motion */
}

/* ============================================================
   BUSINESS AGENTIC READINESS — quiz engine
   ============================================================ */

.readiness .section-head { margin-bottom: clamp(22px, 4vw, 40px); }

.bar-panel {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px);
}

.bar-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.bar-step-label {
  flex: none;
  margin: 0;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}

.bar-step-label b { color: var(--blue-deep); }

.bar-progress {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(8, 60, 255, 0.1);
  overflow: hidden;
}

.bar-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--azure), var(--cyan));
  transition: width 360ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.bar-question {
  min-height: 2.4em;
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.bar-options {
  display: grid;
  gap: 10px;
}

.bar-option {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 13px 18px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(8, 60, 255, 0.06);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 200ms ease, background 200ms ease;
}

.bar-option::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.4px;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

.bar-option:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 28px rgba(8, 60, 255, 0.14);
}

.bar-option:active { transform: translateY(0) scale(0.99); }

.bar-option .bar-dot {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(8, 60, 255, 0.35);
  transition: border-color 160ms ease, background 160ms ease;
}

.bar-option:hover .bar-dot {
  border-color: var(--blue);
  background: radial-gradient(circle, var(--azure) 40%, transparent 45%);
}

.bar-back {
  margin-top: 18px;
  padding: 8px 4px;
  border: none;
  background: none;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.bar-back:hover { color: var(--blue); }

/* result */

.bar-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 4vw, 40px);
  align-items: center;
}

.bar-gauge {
  position: relative;
  width: clamp(140px, 18vw, 180px);
  aspect-ratio: 1;
}

.bar-gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.bar-gauge-track,
.bar-gauge-fill {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}

.bar-gauge-track { stroke: rgba(8, 60, 255, 0.1); }

.bar-gauge-fill {
  stroke: #00a2e8;
  stroke-dasharray: 326.7; /* 2 * pi * r, r = 52 */
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 1100ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.bar-gauge-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.bar-gauge-num strong {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(120deg, var(--blue), var(--azure-text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bar-gauge-num span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.bar-verdict h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.bar-verdict > p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.bar-recs {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.bar-recs li {
  position: relative;
  padding-left: 24px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
}

.bar-recs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.actions--start { justify-content: flex-start; }

/* ============================================================
   IPHONE + WHATSAPP — the agent, on a real phone
   ============================================================ */

.iphone-stage {
  position: relative;
  justify-self: center;
  width: min(300px, 82vw);
  /* the phone is one scalable unit: every metric inside is in `em` or `cqw`,
     both derived from this container's width — so the WHOLE screen shrinks
     and grows together and never jumbles, at any viewport size */
  container-type: inline-size;
}

.iphone-glow {
  position: absolute;
  inset: -12% -30%;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(51, 200, 255, 0.3), rgba(8, 60, 255, 0.08) 60%, transparent 75%);
  filter: blur(14px);
  pointer-events: none;
}

.iphone {
  position: relative;
  z-index: 1;
  border-radius: 17cqw;
  padding: 3cqw;
  background: linear-gradient(160deg, #4a4d55, #26272c 40%, #35373e 70%, #191a1e);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px rgba(0, 0, 0, 0.6),
    0 30px 70px rgba(6, 16, 39, 0.35),
    0 8px 22px rgba(6, 16, 39, 0.25);
}

/* side buttons */
.iphone::before,
.iphone::after {
  content: "";
  position: absolute;
  right: -0.8cqw;
  width: 1cqw;
  border-radius: 0.7cqw;
  background: linear-gradient(90deg, #3a3c42, #17181b);
}

.iphone::before { top: 26%; height: 21cqw; }
.iphone::after { left: -0.8cqw; right: auto; top: 20%; height: 11cqw; }

.iphone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 19.2;
  border-radius: 14.5cqw;
  overflow: hidden;
  background: #f6f4ef;
  /* the em base for the whole WhatsApp UI — proportional to phone width */
  font-size: clamp(8px, 4.7cqw, 14.5px);
}

/* the swappable "screens" — chat / confirm / dashboard / audit — stacked and
   cross-dissolved. Home bar + status bar (siblings, outside this wrapper)
   stay put as constant phone chrome while only this area's content changes. */
.phone-screens {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  /* horizontal swipe changes screens (handled in JS); vertical stays native
     so the dashboard body and the page can still scroll */
  touch-action: pan-y;
}

.phone-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  translate: 0 10px;
  scale: 0.985;
  pointer-events: none;
  transition: opacity 280ms ease-in, translate 280ms ease-in, scale 280ms ease-in;
}

.phone-screen.is-active {
  z-index: 1;
  opacity: 1;
  translate: 0 0;
  scale: 1;
  pointer-events: auto;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1) 70ms, translate 500ms cubic-bezier(0.22, 1, 0.36, 1) 70ms, scale 500ms cubic-bezier(0.22, 1, 0.36, 1) 70ms;
}

/* a plain (non-WhatsApp) header used by the confirm/dashboard/audit screens */
.wa-header--plain { gap: 0.6em; }

.ph-icon {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  flex: none;
  border-radius: 50%;
  color: var(--blue-deep);
  background: radial-gradient(circle at 50% 40%, #ecf7ff, #d8ecff);
}

.ph-icon svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-live-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0.4em rgba(22, 163, 74, 0.55);
}

/* ---- confirm screen: the "preview → confirm" safety net, as its own card ---- */

.confirm-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  padding: 1em;
  background:
    radial-gradient(circle at 20% 25%, rgba(0, 183, 255, 0.08), transparent 55%),
    #f6f4ef;
}

.confirm-card {
  position: relative;
  width: 100%;
  display: grid;
  gap: 0.3em;
  padding: 1em 1.05em 1.1em;
  border-radius: 1.1em;
  background: #ffffff;
  box-shadow: 0 0.5em 1.4em rgba(8, 60, 255, 0.12);
  overflow: hidden;
}

.phone-screen.is-active .confirm-card {
  animation: ps-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.confirm-kicker {
  font-family: var(--font-display);
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azure-text);
}

.confirm-title {
  font-family: var(--font-display);
  font-size: 1.15em;
  font-weight: 700;
  color: #0b1220;
}

.confirm-line { margin: 0.15em 0 0; font-size: 0.9em; color: #0b1220; }
.confirm-line strong { color: var(--blue-deep); }
.confirm-meta { margin: 0.2em 0 0; font-size: 0.76em; color: #6b7280; }

.confirm-actions {
  display: flex;
  gap: 0.55em;
  margin-top: 0.75em;
}

.confirm-btn {
  flex: 1;
  appearance: none;
  border: 0;
  text-align: center;
  padding: 0.6em 0.4em;
  border-radius: 0.7em;
  font-family: var(--font-display);
  font-size: 0.8em;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.confirm-btn--yes { color: #fff; background: linear-gradient(135deg, var(--blue), var(--azure)); box-shadow: 0 0.35em 0.8em rgba(8, 60, 255, 0.28); }
.confirm-btn--no { color: var(--text-soft); background: rgba(8, 60, 255, 0.08); }
.confirm-btn:active { transform: scale(0.95); }
.confirm-btn--yes:hover { filter: brightness(1.05); }

/* success overlay — slides up over the card once Confirm is tapped */
.confirm-done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 1em;
  text-align: center;
  background: linear-gradient(160deg, #ffffff, #eef6ff);
  opacity: 0;
  translate: 0 12%;
  pointer-events: none;
  transition: opacity 320ms ease, translate 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.confirm-card.is-confirmed .confirm-done { opacity: 1; translate: 0 0; }
.confirm-card.is-confirmed .confirm-kicker,
.confirm-card.is-confirmed .confirm-title,
.confirm-card.is-confirmed .confirm-line,
.confirm-card.is-confirmed .confirm-meta,
.confirm-card.is-confirmed .confirm-actions { opacity: 0; }
.confirm-done strong { font-family: var(--font-display); font-size: 0.92em; font-weight: 700; color: #0b1220; }
.confirm-done small { font-size: 0.7em; color: #6b7280; }
.confirm-check {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 0.4em 1em rgba(22, 163, 74, 0.4);
}
.confirm-check svg { width: 1.5em; height: 1.5em; }
.confirm-card.is-confirmed .confirm-check { animation: confirm-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* Cancel → a quick shake (specificity beats the .is-active ps-rise rule) */
.phone-screen.is-active .confirm-card.is-shake { animation: confirm-shake 440ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }

.confirm-note {
  max-width: 24ch;
  margin: 0;
  color: #6b7280;
  font-size: 0.74em;
  line-height: 1.5;
  text-align: center;
}

.phone-screen.is-active .confirm-note { animation: ps-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) 90ms both; }

/* ---- dashboard screen: live UFMS stat tiles + a mini trend chart ---- */

/* a real multi-widget dashboard: segmented range control, KPI tiles, a
   trend-chart card, a donut breakdown, and a top-buyers list. The body
   scrolls inside the phone like a real app — the phone itself stays a
   fixed, viewport-fitting size, so the section never grows. */
.dash-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.75em 0.75em 0.9em;
  background: #eef1f7;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.dash-screen::-webkit-scrollbar { display: none; }

/* segmented Day / Week / Month control — interactive */
.dash-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2em;
  padding: 0.22em;
  border-radius: 0.7em;
  background: #ffffff;
  box-shadow: 0 0.3em 0.8em rgba(8, 60, 255, 0.07);
}
.dash-seg-btn {
  appearance: none;
  border: 0;
  border-radius: 0.5em;
  padding: 0.42em 0;
  font: inherit;
  font-size: 0.66em;
  font-weight: 700;
  color: #6b7280;
  background: transparent;
  cursor: pointer;
  transition: color 200ms ease, background 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
}
.dash-seg-btn.is-on {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--azure));
  box-shadow: 0 0.25em 0.55em rgba(8, 60, 255, 0.28);
}
.dash-seg-btn:active { transform: scale(0.96); }

/* KPI tiles — 2 x 2 */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5em;
}
.dash-tile {
  display: grid;
  gap: 0.1em;
  padding: 0.6em 0.65em;
  border-radius: 0.8em;
  background: #ffffff;
  box-shadow: 0 0.3em 0.8em rgba(8, 60, 255, 0.07);
}
.dash-tile small { color: #6b7280; font-size: 0.6em; font-weight: 600; }
.dash-tile strong { font-family: var(--font-display); font-size: 0.96em; font-weight: 700; color: #0b1220; line-height: 1.05; transition: color 260ms ease; }
.dash-tile strong span { margin-left: 0.2em; font-size: 0.56em; font-weight: 600; color: #6b7280; }
.dash-tile em { font-style: normal; font-size: 0.6em; font-weight: 700; }
.dash-up { color: #16a34a; }
.dash-down { color: #dc2626; }

/* generic white card */
.dash-card {
  padding: 0.68em 0.75em;
  border-radius: 0.85em;
  background: #ffffff;
  box-shadow: 0 0.3em 0.8em rgba(8, 60, 255, 0.07);
}
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5em;
}
.dash-card-head span { font-size: 0.62em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7280; }
.dash-card-head em { font-style: normal; font-family: var(--font-display); font-size: 0.82em; font-weight: 700; color: var(--blue-deep); }

/* trend chart */
.dash-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.34em;
  height: 3.4em;
}
.dash-chart span {
  flex: 1;
  height: var(--h, 40%);
  border-radius: 0.3em 0.3em 0.1em 0.1em;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  transform-origin: 50% 100%;
  transition: height 560ms cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
.dash-chart span:last-child { background: linear-gradient(180deg, #86d8ff, var(--azure)); }
.dash-xaxis { display: flex; gap: 0.34em; margin-top: 0.36em; }
.dash-xaxis i { flex: 1; text-align: center; font-style: normal; font-size: 0.52em; font-weight: 600; color: #9aa4ad; }

/* breakdown: donut + legend */
.dash-card--split { display: flex; align-items: center; gap: 0.85em; }
.dash-donut {
  position: relative;
  flex: 0 0 auto;
  width: 4.3em;
  height: 4.3em;
  display: grid;
  place-items: center;
}
.dash-donut-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--blue) 0 var(--eggs, 62%), var(--cyan) var(--eggs, 62%) var(--broiler, 88%), #d3e0f7 var(--broiler, 88%) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 57%, #000 58%);
  mask: radial-gradient(farthest-side, transparent 57%, #000 58%);
}
.phone-screen.is-active .dash-donut-ring { animation: dash-sweep 720ms ease both; }
.dash-donut-c { position: relative; text-align: center; line-height: 1; }
.dash-donut-c strong { display: block; font-family: var(--font-display); font-size: 0.85em; font-weight: 800; color: var(--blue-deep); }
.dash-donut-c small { font-size: 0.48em; font-weight: 600; color: #6b7280; }
.dash-legend { flex: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: 0.34em; }
.dash-legend li { display: flex; align-items: center; gap: 0.45em; font-size: 0.64em; font-weight: 600; color: #0b1220; }
.dash-legend li i { width: 0.75em; height: 0.75em; border-radius: 0.22em; }
.dash-legend li span { margin-left: auto; color: #6b7280; font-weight: 700; }
.dash-lg--eggs i { background: var(--blue); }
.dash-lg--broiler i { background: var(--cyan); }
.dash-lg--feed i { background: #d3e0f7; }

/* top buyers list */
.dash-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55em; }
.dash-list li { display: flex; align-items: center; gap: 0.55em; }
.dash-ava {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  font-size: 0.6em;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}
.dash-list-name { flex: 1; font-size: 0.72em; font-weight: 600; color: #0b1220; }
.dash-list li strong { font-family: var(--font-display); font-size: 0.74em; font-weight: 700; color: var(--blue-deep); }

.dash-foot { margin: 0.1em 0 0; color: #9aa4ad; font-size: 0.62em; text-align: center; }

/* staggered entrance for every dashboard widget, replays on each activation */
.phone-screen.is-active .dash-screen > * { animation: ps-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.phone-screen.is-active .dash-screen > *:nth-child(1) { animation-delay: 20ms; }
.phone-screen.is-active .dash-screen > *:nth-child(2) { animation-delay: 80ms; }
.phone-screen.is-active .dash-screen > *:nth-child(3) { animation-delay: 140ms; }
.phone-screen.is-active .dash-screen > *:nth-child(4) { animation-delay: 200ms; }
.phone-screen.is-active .dash-screen > *:nth-child(5) { animation-delay: 260ms; }
.phone-screen.is-active .dash-screen > *:nth-child(6) { animation-delay: 320ms; }
.phone-screen.is-active .dash-chart span { animation: ps-grow 560ms cubic-bezier(0.2, 0.9, 0.3, 1.05) both; }

/* ---- audit screen: a scannable, colour-coded activity log ---- */

.audit-screen {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 0.45em;
  margin: 0;
  padding: 0.9em 1em;
  list-style: none;
  background: #f6f4ef;
}

.audit-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6em;
  align-items: baseline;
  padding: 0.55em 0.7em;
  border-radius: 0.7em;
  background: #ffffff;
  box-shadow: 0 0.25em 0.6em rgba(8, 60, 255, 0.06);
  border-left: 0.22em solid transparent;
}

.phone-screen.is-active .audit-row { animation: ps-rise 440ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.phone-screen.is-active .audit-row:nth-child(2) { animation-delay: 60ms; }
.phone-screen.is-active .audit-row:nth-child(3) { animation-delay: 120ms; }
.phone-screen.is-active .audit-row:nth-child(4) { animation-delay: 180ms; }

.audit-row--ok { border-left-color: #16a34a; }
.audit-row--info { border-left-color: var(--azure); }
.audit-row--warn { border-left-color: #d97706; }

.audit-time { font-size: 0.62em; font-weight: 700; color: #9aa4ad; white-space: nowrap; }
.audit-text { font-size: 0.78em; line-height: 1.4; color: #0b1220; }
.audit-text strong { color: var(--blue-deep); }

@keyframes ps-rise {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ps-grow {
  from { scale: 1 0; }
  to { scale: 1 1; }
}

@keyframes dash-sweep {
  from { opacity: 0; rotate: -120deg; scale: 0.8; }
  to { opacity: 1; rotate: 0deg; scale: 1; }
}

@keyframes confirm-pop {
  0% { opacity: 0; scale: 0.4; }
  100% { opacity: 1; scale: 1; }
}

@keyframes confirm-shake {
  10%, 90% { translate: -1px 0; }
  20%, 80% { translate: 2px 0; }
  30%, 50%, 70% { translate: -4px 0; }
  40%, 60% { translate: 4px 0; }
}

.wa-statusbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85em 1.55em 0.4em;
  background: #f6f4ef;
}

.wa-time {
  font-family: var(--font-display);
  font-size: 0.9em;
  font-weight: 700;
  color: #0b1220;
}

.iphone-island {
  position: absolute;
  top: 0.62em;
  left: 50%;
  translate: -50% 0;
  width: 34%;
  height: 1.4em;
  border-radius: 999px;
  background: #060608;
}

.wa-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  color: #0b1220;
}

.wa-status-icons svg { height: 0.72em; width: auto; fill: currentColor; }

.wa-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.42em 0.7em 0.55em;
  background: #f6f4ef;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.wa-back {
  width: 1.55em;
  height: 1.55em;
  color: #007aff;
  flex: none;
}

.wa-avatar {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  object-fit: contain;
  padding: 0.12em;
  background: radial-gradient(circle at 50% 42%, #ecf7ff, #d8ecff);
  box-shadow: inset 0 0 0 1px rgba(8, 60, 255, 0.08);
  flex: none;
}

.wa-peer { min-width: 0; line-height: 1.15; }

.wa-peer strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98em;
  font-weight: 700;
  color: #0b1220;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-peer small { color: #6b7280; font-size: 0.78em; }

.wa-header-icons {
  display: inline-flex;
  gap: 1em;
  margin-left: auto;
  color: #007aff;
}

.wa-header-icons svg { width: 1.35em; height: 1.35em; fill: currentColor; }

.wa-chat {
  flex: 1;
  overflow: hidden;
  padding: 0.7em 0.7em 0.42em;
  background:
    radial-gradient(circle at 20% 30%, rgba(210, 190, 160, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(210, 190, 160, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 85%, rgba(210, 190, 160, 0.1) 0 2px, transparent 3px),
    #efe7dc;
  background-size: 6.4em 6.4em, 7.8em 7.8em, 5em 5em, auto;
}

.iphone-stage .chat { display: grid; gap: 0.5em; }

.wa-date,
.wa-e2e {
  justify-self: center;
  margin: 0.14em 0;
  padding: 0.28em 0.7em;
  border-radius: 0.57em;
  font-size: 0.66em;
  text-align: center;
}

.wa-date {
  background: rgba(255, 255, 255, 0.9);
  color: #6b7280;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

.wa-e2e {
  max-width: 88%;
  background: #fdf3c8;
  color: #6d6438;
  line-height: 1.45;
}

/* WhatsApp bubbles override the site glass bubbles inside the phone.
   The timestamp is a block-level flex row on its own line (right-aligned) —
   no float/translate hacks that jumbled multi-line and action bubbles. */
.iphone-stage .msg {
  position: relative;
  max-width: 84%;
  margin: 0;
  padding: 0.42em 0.6em 0.44em;
  border: none;
  border-radius: 0.64em;
  font-size: 0.84em;
  line-height: 1.4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.iphone-stage .msg--user {
  justify-self: end;
  background: #d8fdd2;
  color: #0b1220;
  border-top-right-radius: 0.15em;
}

.iphone-stage .msg--agent {
  justify-self: start;
  background: #ffffff;
  color: #0b1220;
  border-top-left-radius: 0.15em;
}

.iphone-stage .msg--agent strong { color: #075e54; }

.iphone-stage .msg p { margin: 0; }

.wa-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.2em;
  margin-top: 0.12em;
  color: #8696a0;
  font-size: 0.72em;
  line-height: 1;
}

.wa-ticks { color: #53bdeb; font-style: normal; letter-spacing: -0.14em; }

.iphone-stage .msg-actions {
  display: flex;
  gap: 0.5em;
  margin-top: 0.6em;
  padding-top: 0.6em;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.iphone-stage .msg-actions span {
  flex: 1;
  padding: 0.42em 0.68em;
  border: none;
  border-radius: 0.6em;
  background: rgba(0, 122, 255, 0.08);
  color: #007aff;
  font-family: var(--font-display);
  font-size: 0.9em;
  font-weight: 700;
  text-align: center;
}

/* one-shot player's injected typing indicator, WhatsApp-styled */
.iphone-stage .typing {
  display: inline-flex;
  gap: 0.34em;
  padding: 0.85em 1.02em;
}

.iphone-stage .typing i {
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: #8696a0;
}

.wa-inputbar {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 0.7em;
  background: #f6f4ef;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.wa-plus {
  color: #007aff;
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1;
}

.wa-field {
  flex: 1;
  padding: 0.5em 0.85em;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #9aa4ad;
  font-size: 0.84em;
}

.wa-mic { width: 1.4em; height: 1.4em; color: #007aff; fill: currentColor; }

/* in-phone screen switcher — tappable dots, part of the device chrome.
   The active dot stretches into a pill. Kept in sync with the feature
   list and swipe gestures by the showcase JS. */
.phone-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 0 0.15em;
  background: #f6f4ef;
}
.phone-dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 0.5em;
  height: 0.5em;
  border-radius: 999px;
  background: #c4cad6;
  cursor: pointer;
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease, transform 140ms ease;
}
.phone-dot.is-on {
  width: 1.5em;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.phone-dot:active { transform: scale(0.88); }

.iphone-homebar {
  align-self: center;
  width: 36%;
  height: 0.28em;
  margin: 0.28em 0 0.56em;
  border-radius: 999px;
  background: #0b1220;
  opacity: 0.85;
}

/* ============================================================
   HERMES DOCK — site assistant (plugs into the real agent later)
   ============================================================ */

.dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 140;
}

.dock-btn {
  position: relative;
  display: grid;
  place-content: center;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255, 255, 255, 0.95), rgba(230, 248, 255, 0.75) 60%),
    linear-gradient(160deg, rgba(51, 242, 255, 0.3), rgba(8, 60, 255, 0.15));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    0 14px 34px rgba(8, 60, 255, 0.3),
    0 4px 10px rgba(8, 60, 255, 0.18);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 200ms ease;
}

.dock-btn:hover { transform: translateY(-3px) scale(1.04); }

.dock-btn img { width: 30px; height: 32px; }

.dock-pulse {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #16a34a;
  border: 2px solid #ffffff;
}

.dock-panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  height: min(480px, calc(100dvh - 120px));
  padding: 0;
  overflow: hidden;
  opacity: 0;
  translate: 0 12px;
  scale: 0.97;
  transition: opacity 220ms ease, translate 220ms ease, scale 220ms ease;
}

.dock-panel.open {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.dock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(8, 60, 255, 0.1);
}

.dock-head img { width: 30px; height: 32px; }

.dock-head strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.dock-head small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
}

.dock-head small::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
}

.dock-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(8, 60, 255, 0.06);
  color: var(--text-soft);
  font-size: 0.8rem;
  cursor: pointer;
}

.dock-close:hover { background: rgba(8, 60, 255, 0.12); color: var(--blue-deep); }

/* switch-agent control in the header (only shown once a persona is chosen) */
.dock-switch {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(8, 60, 255, 0.06);
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.dock-switch:hover { background: rgba(8, 60, 255, 0.12); color: var(--blue-deep); }
/* when the switch button is present, it takes the auto margin; close sits after it */
.dock-switch + .dock-close { margin-left: 6px; }

/* agent picker — two persona cards shown before the chat starts */
.dock-picker { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 2px; }
.dock-picker-h {
  margin: 2px 2px 2px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.dock-agent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(8, 60, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  text-align: left;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, border-color 200ms ease;
}
.dock-agent:hover,
.dock-agent:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(8, 60, 255, 0.4);
  box-shadow: 0 10px 24px rgba(8, 60, 255, 0.14);
  outline: none;
}
.dock-agent-av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 6px 14px rgba(8, 60, 255, 0.28);
}
.dock-agent--bari .dock-agent-av { background: linear-gradient(135deg, #0b3ea8, #083cff); }
.dock-agent--biba .dock-agent-av { background: linear-gradient(135deg, #00b7ff, #33f2ff); color: #06283d; }
.dock-agent-t { display: grid; gap: 1px; }
.dock-agent-t strong { font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); }
.dock-agent-t small { color: var(--muted); font-size: 0.76rem; }

.dock-msgs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dock-msg {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  /* never let a long URL push the panel into horizontal scroll */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* messages spring in — gives the chat a lively, human rhythm */
@media (prefers-reduced-motion: no-preference) {
  .dock-msg,
  .dock-quick,
  .dock-picker { animation: dock-pop-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes dock-pop-in {
  from { opacity: 0; transform: translateY(9px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.dock-msg--bot {
  align-self: flex-start;
  border-bottom-left-radius: 5px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(8, 60, 255, 0.12);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px rgba(8, 60, 255, 0.06);
  white-space: pre-line; /* keep the agent's paragraph breaks */
}

.dock-msg--user {
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, #0455e6, var(--blue));
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 60, 255, 0.22);
}

.dock-msg a { color: var(--blue-deep); font-weight: 700; text-decoration: underline; }
.dock-msg--user a { color: #ffffff; }

/* the text half of a bot message (actions row sits beneath it) */
.dock-msg-text { white-space: pre-line; }

/* in-message action row + block-level action buttons (right-sized, own row) */
.dock-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}
.dock-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: none;
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, filter 180ms ease;
}
.dock-action svg { width: 15px; height: 15px; flex: none; fill: currentColor; }
.dock-action:hover { transform: translateY(-1px); }
.dock-action:active { transform: translateY(0) scale(0.98); }
.dock-action--wa {
  background: linear-gradient(135deg, #25d366, #12a150);
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(18, 140, 74, 0.3);
}
.dock-action--wa:hover { box-shadow: 0 9px 20px rgba(18, 140, 74, 0.42); }
@media (prefers-reduced-motion: no-preference) {
  .dock-action--wa { animation: dock-wa-nudge 2.4s ease-in-out 0.5s 2; }
}
@keyframes dock-wa-nudge {
  0%, 100% { box-shadow: 0 6px 15px rgba(18, 140, 74, 0.3); }
  50% { box-shadow: 0 6px 22px rgba(18, 140, 74, 0.55); }
}

/* tappable suggestion chips (shown after the greeting) */
.dock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-self: flex-start;
  max-width: 100%;
}
.dock-chip {
  padding: 7px 13px;
  border: 1px solid rgba(8, 60, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--blue-deep);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.dock-chip:hover { background: rgba(8, 60, 255, 0.08); border-color: rgba(8, 60, 255, 0.5); transform: translateY(-1px); }
.dock-chip:active { transform: translateY(0) scale(0.97); }

/* persistent quick-actions tool bar — pinned above the composer */
.dock-tools {
  display: flex;
  gap: 7px;
  padding: 9px 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.dock-tools::-webkit-scrollbar { display: none; }
.dock-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 12px;
  border: 1px solid rgba(8, 60, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.dock-tool svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dock-tool:hover { transform: translateY(-1px); border-color: rgba(8, 60, 255, 0.4); box-shadow: 0 6px 14px rgba(8, 60, 255, 0.12); }
.dock-tool:active { transform: translateY(0) scale(0.97); }
.dock-tool--wa {
  border-color: rgba(18, 140, 74, 0.3);
  color: #0b7a3e;
  background: rgba(37, 211, 102, 0.1);
}
.dock-tool--wa svg { fill: currentColor; stroke: none; }
.dock-tool--wa:hover { border-color: rgba(18, 140, 74, 0.55); box-shadow: 0 6px 14px rgba(18, 140, 74, 0.18); }

/* primary in-chat action (e.g. the readiness result CTA) */
.dock-action--primary {
  background: linear-gradient(135deg, #0455e6, var(--blue));
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(8, 60, 255, 0.28);
}
.dock-action--primary:hover { box-shadow: 0 9px 20px rgba(8, 60, 255, 0.4); }

/* handover divider when the visitor switches agent mid-chat */
.dock-divider {
  align-self: center;
  max-width: 92%;
  margin: 4px 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(8, 60, 255, 0.07);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}

/* in-chat readiness quiz — tappable option buttons */
.dock-quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 9px;
}
.dock-quiz-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 13px;
  border: 1px solid rgba(8, 60, 255, 0.22);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.dock-quiz-opt:hover:not(:disabled) { background: rgba(8, 60, 255, 0.07); border-color: rgba(8, 60, 255, 0.5); transform: translateY(-1px); }
.dock-quiz-opt:disabled { cursor: default; opacity: 0.55; }
.dock-quiz-opt.is-chosen {
  background: linear-gradient(135deg, #0455e6, var(--blue));
  border-color: transparent;
  color: #ffffff;
  opacity: 1;
}

/* readiness result card inside the chat */
.dock-result .dock-result-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(8, 60, 255, 0.1), rgba(51, 242, 255, 0.12));
  border: 1px solid rgba(8, 60, 255, 0.16);
}
.dock-result-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
}
.dock-result-score strong { font-size: 2rem; font-weight: 700; color: var(--blue-deep); letter-spacing: -0.02em; }
.dock-result-score span { font-size: 0.85rem; color: var(--muted); }
.dock-result-tier { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); }
.dock-result-recs {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text);
}
.dock-result-recs li { line-height: 1.45; }

/* contextual smart-reply suggestions (below an agent message) */
.dock-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-self: flex-start;
  max-width: 100%;
  margin-top: -2px;
}
.dock-suggest {
  padding: 7px 13px;
  border: 1px solid rgba(8, 60, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue-deep);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 170ms ease, transform 170ms ease, border-color 170ms ease;
}
.dock-suggest:hover { background: rgba(8, 60, 255, 0.08); border-color: rgba(8, 60, 255, 0.5); transform: translateY(-1px); }

/* use-case gallery card */
.dock-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 9px;
}
.dock-uc {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(8, 60, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  text-align: left;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, border-color 180ms ease;
}
.dock-uc:hover { transform: translateY(-1px); border-color: rgba(8, 60, 255, 0.42); box-shadow: 0 8px 18px rgba(8, 60, 255, 0.12); }
.dock-uc-emoji { font-size: 1.25rem; line-height: 1; flex: none; }
.dock-uc-t { display: grid; gap: 1px; min-width: 0; }
.dock-uc-t strong { font-size: 0.82rem; color: var(--ink); }
.dock-uc-t small { font-size: 0.68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* inline lead-capture form card */
.dock-leadform {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}
.dock-leadform input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(8, 60, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
}
.dock-leadform input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8, 60, 255, 0.12); }
.dock-leadform.is-error input:placeholder-shown { border-color: rgba(220, 38, 38, 0.6); }
.dock-lead-send { justify-content: center; width: 100%; }
.dock-leadform-done { margin: 2px 0 0; font-size: 0.8rem; font-weight: 700; color: #16a34a; }

/* message meta — timestamp + sent/read ticks (WhatsApp style) */
.dock-meta {
  display: block;
  margin-top: 3px;
  font-size: 0.62rem;
  line-height: 1;
  opacity: 0.75;
}
.dock-msg--bot .dock-meta { color: var(--muted); text-align: left; }
.dock-msg--user .dock-meta { color: rgba(255, 255, 255, 0.85); text-align: right; }
.dock-tick { margin-left: 4px; font-style: normal; letter-spacing: -1px; }
.dock-tick.read { color: #7fe0ff; }

.dock-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
}

.dock-quick button {
  padding: 6px 12px;
  border: 1px solid rgba(8, 60, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease;
}

.dock-quick button:hover { background: rgba(222, 246, 255, 0.95); }

.dock-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}

.dock-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(8, 60, 255, 0.4);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.dock-typing i:nth-child(2) { animation-delay: 0.15s; }
.dock-typing i:nth-child(3) { animation-delay: 0.3s; }

.dock-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(8, 60, 255, 0.1);
}
/* the display:flex above overrides the UA [hidden] rule, so hide explicitly
   (e.g. while the agent picker is up — no composer until a persona is chosen) */
.dock-form[hidden] { display: none; }

.dock-form input {
  flex: 1;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(8, 60, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  outline: 0;
}

.dock-form input:focus { border-color: rgba(0, 183, 255, 0.65); }

.dock-send {
  min-height: 44px;
  min-width: 48px;
  padding: 0.4rem 0.9rem;
}

/* NDPA consent line — muted, once per panel */
.dock-consent {
  margin: 0 0 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(8, 60, 255, 0.05);
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

/* transient neutral "working…" line for tool.activity */
.dock-working {
  align-self: flex-start;
  padding: 4px 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-style: italic;
  opacity: 0.85;
}

/* limit → continue on WhatsApp affordance in the composer slot */
.dock-form--wa { justify-content: center; }

.dock-wa-btn {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
}

/* teaser bubble — sits to the LEFT of the closed button so it never collides
   with the WhatsApp FAB (which stacks vertically above the dock button) */
.dock-teaser {
  position: absolute;
  right: 70px;
  bottom: 12px;
  display: flex;
  align-items: stretch;
  max-width: min(230px, calc(100vw - 96px));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(8, 60, 255, 0.14);
  box-shadow: 0 10px 26px rgba(8, 60, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 260ms ease, transform 260ms ease;
  overflow: hidden;
}

.dock-teaser.show { opacity: 1; transform: translateX(0); }

.dock-teaser-open {
  border: 0;
  background: transparent;
  padding: 9px 6px 9px 13px;
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.dock-teaser-x {
  border: 0;
  background: transparent;
  padding: 0 10px 0 4px;
  color: var(--muted);
  font-size: 0.68rem;
  cursor: pointer;
}

.dock-teaser-x:hover { color: var(--blue-deep); }

@media (prefers-reduced-motion: reduce) {
  .dock-teaser { transition: none; }
}

/* stack the WhatsApp FAB above the dock on touch devices */
@media (pointer: coarse) {
  .wa-fab { bottom: 86px; }
}

@media (max-width: 880px) {
  .bar-result { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .bar-verdict .kicker { justify-content: center; }
  .actions--start { justify-content: center; }
  .bar-recs li { text-align: left; }
  .iphone-stage { width: min(280px, 78vw); }
}

/* ---------- readiness 3-step strip ---------- */

.bar-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.bar-steps li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
}

.bar-steps b {
  display: grid;
  place-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--azure));
  color: #fff;
  font-size: 0.74rem;
}

/* ---------- FAQ ---------- */

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.faq-item { padding: 0; }

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 19px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(8, 60, 255, 0.08);
  color: var(--blue-deep);
  font-size: 1.1rem;
  font-weight: 500;
  transition: rotate 200ms ease, background 200ms ease;
}

.faq-item[open] summary::after {
  rotate: 45deg;
  background: rgba(8, 60, 255, 0.14);
}

.faq-item > p {
  margin: 0;
  padding: 0 24px 20px;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.65;
  max-width: 64ch;
}

@media (max-width: 560px) {
  .faq-item summary { padding: 15px 16px; font-size: 0.9rem; }
  .faq-item > p { padding: 0 16px 16px; font-size: 0.86rem; }
  .bar-steps { gap: 10px 18px; }
  .bar-steps li { font-size: 0.76rem; }
}

/* the hidden attribute must always win over component display values */
.bar-result[hidden],
.dock-panel[hidden] {
  display: none;
}

/* ============================================================
   DENSITY ENGINE — three presentation levels per section.
   The fit engine in app.js measures every section against the real
   viewport and applies the lightest tier that fits:
     (roomy default)  →  .s-snug (clamp/condense)  →  .s-tighter (essentials)
   Works at every width AND height — no breakpoint guessing.
   ============================================================ */

/* ---------- tier 1 (.s-snug): geometry only — tighter spacing and type,
   every word stays. Most desktop sizes never go past this. ---------- */

.s-snug { padding-top: 70px; padding-bottom: 18px; }

.s-snug .section-head { margin-bottom: 12px; }

.s-snug .section-head h2,
.s-snug .section-copy h2,
.s-snug .cta-copy h2 {
  margin-bottom: 10px;
  font-size: clamp(1.35rem, 3.4vh, 2.4rem);
}

.s-snug .section-head p,
.s-snug .section-copy p,
.s-snug .cta-copy > p {
  margin-bottom: 8px;
  font-size: clamp(0.78rem, 1.7vh, 0.95rem);
  line-height: 1.45;
}

.s-snug .kicker { margin-bottom: 8px; font-size: 0.68rem; }

.s-snug .card-grid,
.s-snug .pillar-grid,
.s-snug .why-grid,
.s-snug .impact-rail { gap: 8px; }

.s-snug .glass-card { padding: clamp(10px, 1.8vh, 16px); border-radius: 16px; }

.s-snug .glass-card h3 { margin-bottom: 3px; font-size: clamp(0.76rem, 1.8vh, 0.95rem); }

.s-snug .glass-card p {
  font-size: clamp(0.66rem, 1.5vh, 0.8rem);
  line-height: 1.35;
}

.s-snug .card-icon {
  width: clamp(26px, 4vh, 36px);
  height: clamp(26px, 4vh, 36px);
  margin-bottom: 6px;
  border-radius: 10px;
}

.s-snug .card-icon svg { width: 15px; height: 15px; }
.s-snug .pillar-num { display: none; }
.s-snug .pillar { padding-top: clamp(10px, 1.8vh, 16px); }

/* hero */
.s-snug .logo-stage { width: min(52vw, 24vh); margin-bottom: 8px; }
.s-snug .hero-title { margin-bottom: 10px; font-size: clamp(1.6rem, 4.4vh, 3.4rem); }
.s-snug .hero-sub { margin-bottom: 12px; }
/* decorative "keep scrolling" hint is the first thing to give way once
   the hero is tight on room — it must never fight real content for space */
.s-snug .scroll-cue { display: none; }

/* readiness */
.s-snug .bar-panel { padding: clamp(14px, 2.4vh, 26px); }
.s-snug .bar-top { margin-bottom: 12px; }
.s-snug .bar-question { min-height: 0; margin-bottom: 12px; font-size: clamp(1rem, 2.4vh, 1.4rem); }
.s-snug .bar-options { gap: 7px; }
.s-snug .bar-option { min-height: 42px; padding: 8px 13px; font-size: clamp(0.78rem, 1.8vh, 0.9rem); }
.s-snug .bar-back { margin-top: 10px; }
.s-snug .bar-steps { margin-top: 14px; gap: 8px 16px; }
.s-snug .bar-steps li { font-size: 0.72rem; }
.s-snug .bar-result { gap: 14px; }
.s-snug .bar-gauge { width: clamp(96px, 16vh, 150px); }
.s-snug .bar-verdict h3 { font-size: clamp(1.1rem, 2.6vh, 1.6rem); }
.s-snug .bar-verdict > p {
  margin-bottom: 8px;
  font-size: 0.84rem;
}
.s-snug .bar-recs { gap: 5px; margin-bottom: 12px; }
.s-snug .bar-recs li { font-size: 0.78rem; }

/* positioning */
.s-snug .key-message { gap: 10px; padding: 14px; }
.s-snug .key-message blockquote { font-size: clamp(0.95rem, 2.2vh, 1.3rem); }
.s-snug .km-flow { display: none; }
.s-snug .km-icon { width: 34px; height: 34px; padding: 8px; }

/* agents */
.s-snug .split, .s-snug .split--agents { gap: 14px; }
.s-snug .iphone-stage { width: min(230px, 36vh); }
.s-snug .feature-showcase { margin-top: 10px; }
.s-snug .feature-item { padding: 8px 10px; gap: 6px; }

/* process */
.s-snug .process-track { gap: 8px; }
.s-snug .step { padding: 9px 12px; }
.s-snug .step h3 { font-size: 0.82rem; margin-bottom: 2px; }
.s-snug .step p {
  font-size: 0.7rem;
}
.s-snug .step .step-num { width: 30px; height: 30px; font-size: 0.78rem; }
.s-snug .process-track::before { left: 29px; }

/* impact */
.s-snug .impact-item { padding: 9px 12px; border-radius: 16px; }
.s-snug .impact-item svg { width: 20px; height: 20px; }
.s-snug .impact-item strong { font-size: 0.8rem; }
.s-snug .impact-item span { font-size: 0.68rem; }

/* faq */
.s-snug .faq-list { gap: 7px; }
.s-snug .faq-item summary { padding: 12px 16px; font-size: 0.86rem; }
.s-snug .faq-item summary::after { width: 22px; height: 22px; font-size: 0.9rem; }
.s-snug .faq-item > p { padding: 0 16px 12px; font-size: 0.8rem; }

/* contact */
.s-snug .cta-panel { padding: clamp(14px, 2.4vh, 28px); gap: 14px; }
.s-snug .contact-info { gap: 8px; margin-top: 10px; }
.s-snug .contact-info svg { width: 30px; height: 30px; padding: 6px; }
.s-snug .contact-info strong { font-size: 0.68rem; }
.s-snug .contact-info span, .s-snug .contact-info a { font-size: 0.84rem; }
.s-snug .contact-wa { margin-top: 8px; min-height: 42px; font-size: 0.84rem; }
.s-snug .contact-form { gap: 7px; }
.s-snug .contact-form label { gap: 3px; font-size: 0.7rem; }
.s-snug .contact-form input, .s-snug .contact-form select { min-height: 40px; padding: 8px 12px; }
.s-snug .contact-form textarea { min-height: 52px; }
.s-snug .contact-form .form-submit { min-height: 44px; }

/* statements */
.s-snug .statement-text { font-size: clamp(1.15rem, 3vh, 2.2rem); }

/* ---------- tier 2 (.s-tight): adds gentle 3-line clamps on secondary
   text — only reached when geometry compression alone wasn't enough.
   Applied on top of .s-snug. ---------- */

.s-tight .section-head p,
.s-tight .section-copy p,
.s-tight .cta-copy > p,
.s-tight .glass-card p,
.s-tight .step p,
.s-tight .bar-verdict > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.s-tight .glass-card p,
.s-tight .step p {
  -webkit-line-clamp: 2;
}

.s-tight .iphone-stage { width: min(210px, 33vh); }
.s-tight .bar-gauge { width: clamp(90px, 14vh, 130px); }
.s-tight .bar-steps { display: none; }
.s-tight .key-message blockquote { font-size: 0.95rem; }
/* compact list instead of hiding it: numbers + titles stay, the small copy
   goes — the full hide remains the .s-tighter last resort below */
.s-tight .feature-showcase { margin-top: 8px; }
.s-tight .feature-item { padding: 5px 9px; gap: 10px; }
.s-tight .feature-num { width: 28px; height: 28px; font-size: 0.68rem; }
.s-tight .feature-copy small { display: none; }
.s-tight .feature-copy strong { font-size: 0.85rem; }
.s-tight .contact-info li:nth-child(3) { display: none; }
.s-tight .statement-text { font-size: clamp(1.05rem, 2.6vh, 1.9rem); }

/* ---------- tier 3 (.s-tighter): essentials only — the section must fit ---------- */

.s-tighter .section-head p,
.s-tighter .glass-card p,
.s-tighter .step p,
.s-tighter .impact-item span,
.s-tighter .bar-steps,
.s-tighter .feature-showcase,
.s-tighter .key-message,
.s-tighter .cta-copy > p,
.s-tighter .contact-info li:nth-child(3),
.s-tighter .contact-wa,
.s-tighter .bar-verdict > p { display: none; }

.s-tighter .section-copy p {
  -webkit-line-clamp: 2;
}

.s-tighter .glass-card h3 { margin-bottom: 0; }
.s-tighter .step h3 { margin-bottom: 0; }
.s-tighter .impact-item strong { margin-bottom: 0; }

/* agents: the phone IS the message at this size */
.s-tighter .agents .section-copy p:nth-of-type(2),
.s-tighter.agents .section-copy p:nth-of-type(2) { display: none; }
.s-tighter .iphone-stage { width: min(200px, 30vh); }

/* positioning keeps its three paragraphs but clamped harder */
.s-tighter .section-copy p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* contact: minimal viable form */
.s-tighter .contact-form > label:nth-of-type(3) { display: none; } /* company (optional) */
.s-tighter .contact-form textarea { min-height: 44px; }
.s-tighter .contact-info { margin-top: 6px; }

/* hero */
.s-tighter .logo-stage { width: min(44vw, 19vh); }
.s-tighter .hero-sub { display: none; }

/* readiness result */
.s-tighter .bar-gauge { width: 90px; }
.s-tighter .bar-recs { display: none; }

/* fit-engine measurement anchor: children's offsetTop must be section-relative */
.hero,
main > .section,
main > .statement {
  position: relative;
}

/* ============================================================
   LANDSCAPE / VERY SHORT WIDE VIEWPORTS — use the width: layouts
   that stack on portrait phones go side-by-side here.
   ============================================================ */

@media (max-height: 520px) and (min-width: 640px) {
  .split,
  .split--agents {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 18px;
    align-items: center;
  }

  .agents .section-copy,
  .positioning .section-copy { text-align: left; }

  .agents .iphone-stage { width: min(150px, 58vh); }

  .process-track {
    max-width: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .process-track::before { display: none; }
  .step { display: block; padding: 10px 12px; }
  .step .step-num { width: 26px; height: 26px; margin-bottom: 6px; font-size: 0.7rem; }
  .step h3 { font-size: 0.78rem; }

  .faq-list {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
  }

  .cta-panel {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 18px;
  }
  .contact-form { grid-template-columns: 1fr 1fr; }

  .logo-stage { width: min(120px, 20vh); }
  .hero-title { font-size: clamp(1.3rem, 6.5vh, 2.1rem); }

  .bar-panel { grid-template-columns: 1fr; }
  .bar-question { min-height: 0; }
}

@media (max-height: 520px) and (min-width: 640px) {
  .cta-panel { padding: 14px 18px; }
  .contact .contact-info { display: none; }
  .contact-form textarea { min-height: 40px; }
}

@media (max-height: 520px) and (min-width: 640px) {
  /* specificity must beat the .s-snug/.s-tight tier rules (two classes) */
  .contact .contact-form textarea { min-height: 40px; }
  .contact .contact-form label { gap: 3px; font-size: 0.68rem; }
  .contact .contact-form input, .contact .contact-form select { min-height: 38px; padding: 7px 12px; }
  .contact .form-submit { min-height: 42px; }
  .contact .form-status { display: none; }
}

/* named-proof line under use-case copy — a live-status dot + real deployment fact */
.proof-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 8px rgba(22, 163, 74, 0.55);
  translate: 0 -1px;
}

/* ============================================================
   USE-CASES — live product previews inside a laptop / phone.
   Selectors on top switch the app; the ordering app morphs the
   laptop into a phone. The REAL app UIs mount into .uc-app-inner
   and are scaled to fit with `zoom` (recomputed on resize/switch).
   ============================================================ */
.uc-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(18px, 3vw, 32px);
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(8, 60, 255, 0.1);
  box-shadow: 0 10px 30px rgba(8, 30, 90, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(1.3);
}
.uc-tab {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.58rem 1.05rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: color 240ms ease;
}
.uc-tab.is-active { color: #fff; }
.uc-tab:not(.is-active):hover { color: var(--blue-deep); }
.uc-tab:focus-visible { outline: 2px solid rgba(0, 183, 255, 0.6); outline-offset: 2px; }
.uc-tab-indicator {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  /* tracks the active tab's box exactly — tabs can wrap to two rows on
     narrow screens, so the pill needs y/height, not container height */
  height: var(--h, calc(100% - 10px));
  width: var(--w, 0);
  transform: translate(var(--x, 0), var(--y, 5px));
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--azure));
  box-shadow: 0 6px 16px rgba(8, 60, 255, 0.32);
  transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1), width 440ms cubic-bezier(0.22, 1, 0.36, 1), height 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-stage {
  position: relative;
  display: grid;
  place-items: center;
  /* one source of truth for the device stage height — media queries
     override the variable and the laptop width-cap follows automatically */
  --stage-h: clamp(340px, 56vh, 528px);
  height: var(--stage-h);
  perspective: 1600px;
}

/* ---- laptop (desktop apps) ---- */
.uc-laptop {
  position: absolute;
  /* width is also height-capped: total laptop height (lid + 16:10 screen +
     base) must fit the stage, or the centered absolute lid bleeds UP over the
     selectors. laptop_height ≈ 0.625·(W−20) + 36, so W ≤ 1.6·stageH − 50. */
  width: min(880px, 94%, calc(1.6 * var(--stage-h) - 50px));
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.uc-laptop-lid {
  position: relative;
  padding: 10px 10px 12px;
  border-radius: 16px 16px 6px 6px;
  background: linear-gradient(155deg, #3a3d45, #202227 60%, #303239);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28), inset 0 -1px 2px rgba(0, 0, 0, 0.6), 0 34px 64px rgba(6, 16, 39, 0.34);
}
.uc-laptop-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
.uc-cam {
  position: absolute;
  z-index: 5;
  top: 5px; left: 50%; translate: -50% 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: #0b0d12; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}
.uc-laptop-base {
  position: relative;
  /* never poke past the viewport — 3px of bleed makes mobile browsers
     widen the layout viewport and the whole page pans sideways */
  width: min(116%, calc(100vw - 6px));
  left: 50%; translate: -50% 0;
  height: 14px;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(180deg, #cbced5, #a1a6af 55%, #80848d);
  box-shadow: 0 24px 30px rgba(6, 16, 39, 0.3);
}
.uc-laptop-base::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35), transparent);
}
.uc-laptop-lip {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 92px; height: 5px; border-radius: 0 0 6px 6px;
  background: rgba(0, 0, 0, 0.22);
}

/* ---- phone (ordering app) — realistic device: proportional (cqw) frame,
   side buttons, status bar + Dynamic-Island chrome above the scrolling app,
   floating home indicator. Everything scales as one unit at any size. ---- */
.uc-phone {
  position: absolute;
  height: min(100%, 512px);
  aspect-ratio: 191 / 396;
  container-type: inline-size;
  opacity: 0; transform: scale(0.9);
  pointer-events: none;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* side buttons: volume (left), power (right) */
.uc-phone::before,
.uc-phone::after {
  content: "";
  position: absolute;
  width: 1.3cqw;
  border-radius: 1cqw;
  background: linear-gradient(90deg, #3a3c42, #17181b);
}
.uc-phone::before { left: -1.1cqw; top: 24%; height: 15cqw; }
.uc-phone::after { right: -1.1cqw; top: 27%; height: 10cqw; }
.uc-phone-frame {
  position: relative;
  height: 100%;
  padding: 3.5cqw;
  border-radius: 17cqw;
  background: linear-gradient(160deg, #4a4d55, #26272c 45%, #191a1e);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.6), 0 34px 64px rgba(6, 16, 39, 0.34);
}
/* the screen: constant chrome (status bar, home pill) around the scrolling app */
.uc-phone-screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 13.8cqw;
  overflow: hidden;
  background: #fff7e8; /* matches the ordering app's canvas */
}
.uc-statusbar {
  position: relative;
  z-index: 6;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3cqw 7.5cqw 1.8cqw;
  background: #fff7e8;
}
.uc-time {
  font-family: var(--font-display);
  font-size: 3.9cqw;
  font-weight: 700;
  color: #063824;
  letter-spacing: 0.02em;
}
.uc-phone-island {
  position: absolute;
  left: 50%;
  top: 55%;
  translate: -50% -50%;
  width: 26cqw;
  height: 7.2cqw;
  border-radius: 999px;
  background: #05060a;
  box-shadow: inset 0 0 1.2cqw rgba(255, 255, 255, 0.08);
}
.uc-sicons { display: inline-flex; align-items: center; gap: 1.6cqw; color: #063824; }
.uc-sicons svg { height: 3.3cqw; fill: currentColor; display: block; }
.uc-sig { width: 5cqw; }
.uc-wifi { width: 4.6cqw; }
.uc-batt { width: 7.2cqw; }
.uc-phone-screen .uc-viewport {
  position: relative;
  inset: auto;
  flex: 1;
  min-height: 0;
  border-radius: 0;
  background: #fff7e8;
}
.uc-phone-home {
  position: absolute;
  z-index: 7;
  bottom: 2.4cqw;
  left: 50%;
  translate: -50% 0;
  width: 34cqw;
  height: 1.5cqw;
  border-radius: 999px;
  background: rgba(6, 20, 12, 0.6);
  pointer-events: none;
}

/* ---- morph laptop <-> phone ---- */
.uc-stage[data-device="phone"] .uc-laptop { opacity: 0; transform: scale(0.92); pointer-events: none; }
.uc-stage[data-device="phone"] .uc-phone { opacity: 1; transform: scale(1); pointer-events: auto; }

/* ---- scrollable viewport + zoom-scaled app (scrollbars fully hidden —
   the screens read as real devices; content still scrolls) ---- */
.uc-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  background: #ffffff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.uc-viewport::-webkit-scrollbar { display: none; }
.uc-app { display: none; position: relative; min-height: 100%; }
.uc-app.is-active { display: block; }
.uc-app-inner {
  width: var(--uc-w, 1280px);
  zoom: var(--uc-zoom, 0.42);
  transform-origin: top left;
}
[data-app-view="order"] .uc-app-inner { --uc-w: 390px; }

/* boot placeholder — shown until the real UI is mounted; NOT zoomed */
.uc-boot {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  color: var(--text-soft);
  background: radial-gradient(circle at 50% 38%, rgba(0, 183, 255, 0.06), transparent 60%), #fbfcfe;
}
.uc-app-inner:not(:empty) + .uc-boot { display: none; }
.uc-boot-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  animation: uc-pulse 1.2s ease-in-out infinite;
}
@keyframes uc-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

.uc-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 22px; margin-top: clamp(18px, 3vw, 30px); text-align: center;
}
.uc-caption { margin: 0; font-size: 0.92rem; color: var(--text-soft); }
.uc-caption strong { color: var(--ink); font-weight: 600; }

@media (max-width: 700px) {
  .uc-tab { padding: 0.5rem 0.82rem; font-size: 0.78rem; }
  .uc-stage { --stage-h: clamp(300px, 52vh, 460px); }
  .uc-laptop { width: min(97%, calc(1.6 * var(--stage-h) - 50px)); }
  .uc-laptop-lid { padding: 7px 7px 9px; border-radius: 12px 12px 5px 5px; }
}

/* short/landscape viewports: shrink the whole stage so devices never
   collide with the selectors above or the caption below */
@media (max-height: 560px) {
  .uc-stage { --stage-h: clamp(220px, 58vh, 340px); }
}

/* density tiers: when the fit-engine compresses Use Cases, shrink the
   device stage itself — the laptop width-cap follows --stage-h (see
   .uc-laptop), so the whole device scales down and the section can
   actually reach one-viewport height on short laptop screens. Gated to
   >560px tall so the shorter, higher-priority short-viewport rule above
   (which these would otherwise out-specify) still governs landscape/short
   screens — the two must not fight. */
@media (min-height: 561px) {
  #products.s-tight .uc-stage { --stage-h: clamp(300px, 48vh, 460px); }
  #products.s-tighter .uc-stage { --stage-h: clamp(250px, 42vh, 400px); }
}
#products.s-tighter .uc-foot { margin-top: 12px; }

/* ============================================================
   UFMS — faithful reproduction of the real Universal Farms MS
   dashboard UI (tokens lifted from ufms-dashboard/globals.css:
   brand #0f6b3f, gold #e8a723, ink #12211a, Segoe UI, 14px cards).
   Rendered at 1280px native, scaled by the shell's zoom. View-only.
   ============================================================ */
.ufms {
  width: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: #12211a;
  background: #f4f7f5;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ufms *, .ufms *::before, .ufms *::after { box-sizing: border-box; }
.ufms a { text-decoration: none; color: inherit; }
.ufms .tnum { font-variant-numeric: tabular-nums lining-nums; }

/* top bar */
.ufms-top { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 20px; background: #fff; border-bottom: 1px solid #e3ebe6; }
.ufms-brand { display: flex; align-items: center; gap: 10px; }
.ufms-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #0f6b3f, #128a52); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; letter-spacing: 0.03em; }
.ufms-brandtxt { display: flex; flex-direction: column; line-height: 1.12; }
.ufms-brandtxt small { font-size: 9px; letter-spacing: 0.14em; color: #7c8f86; font-weight: 700; }
.ufms-brandtxt strong { font-size: 15px; color: #12211a; font-weight: 800; letter-spacing: 0.02em; }
.ufms-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: #e6f6ee; color: #1f9d55; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; }
.ufms-live i { width: 6px; height: 6px; border-radius: 50%; background: #1f9d55; animation: ufms-pulse 2s infinite; }
.ufms-topright { display: flex; align-items: center; gap: 14px; }
.ufms-search { display: flex; align-items: center; gap: 8px; width: 300px; padding: 8px 12px; border-radius: 10px; background: #f8faf9; border: 1px solid #e3ebe6; color: #7c8f86; font-size: 13px; }
.ufms-search svg { width: 15px; height: 15px; fill: none; stroke: #7c8f86; stroke-width: 2; stroke-linecap: round; }
.ufms-search span { flex: 1; }
.ufms-search kbd { font-size: 10px; padding: 2px 6px; border-radius: 5px; background: #fff; border: 1px solid #e3ebe6; color: #7c8f86; font-family: inherit; }
.ufms-iconbtn { position: relative; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #f8faf9; border: 1px solid #e3ebe6; }
.ufms-iconbtn svg { width: 17px; height: 17px; fill: none; stroke: #4d635a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ufms-dot { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 9px; font-weight: 800; font-style: normal; display: grid; place-items: center; }
.ufms-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.ufms-user strong { font-size: 13px; color: #12211a; font-weight: 700; }
.ufms-user small { font-size: 10px; color: #7c8f86; }
.ufms-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #128a52, #0f6b3f); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.ufms-logout { font-size: 12px; color: #4d635a; padding: 7px 12px; border-radius: 8px; border: 1px solid #e3ebe6; background: #fff; font-weight: 600; }

/* body: sidebar + main */
.ufms-body { display: flex; align-items: stretch; }
.ufms-side { width: 216px; flex-shrink: 0; background: #fff; border-right: 1px solid #e3ebe6; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.ufms-nav { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: #4d635a; font-size: 13.5px; font-weight: 500; }
.ufms-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ufms-nav.is-active { background: #e6f4ec; color: #0f6b3f; font-weight: 700; }

.ufms-main { flex: 1; min-width: 0; padding: 22px 26px; background: #f4f7f5; display: flex; flex-direction: column; gap: 16px; }
.ufms-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ufms-pagehead h1 { margin: 0; font-size: 22px; font-weight: 800; color: #12211a; letter-spacing: -0.01em; }
.ufms-pagehead p { margin: 3px 0 0; font-size: 13px; color: #4d635a; }
.ufms-filters { display: flex; gap: 7px; }
.ufms-chip { padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid #e3ebe6; color: #4d635a; font-size: 12px; font-weight: 600; }
.ufms-chip.is-on { background: #0f6b3f; border-color: #0f6b3f; color: #fff; }

/* KPI strip */
.ufms-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ufms-kpi { background: #fff; border: 1px solid #e3ebe6; border-radius: 14px; padding: 15px 16px; box-shadow: 0 1px 2px rgba(18,33,26,0.05), 0 8px 24px -14px rgba(18,33,26,0.16); display: flex; flex-direction: column; gap: 3px; animation: ufms-rise 0.5s ease-out both; }
.ufms-kpi:nth-child(2) { animation-delay: 0.06s; }
.ufms-kpi:nth-child(3) { animation-delay: 0.12s; }
.ufms-kpi:nth-child(4) { animation-delay: 0.18s; }
.ufms-kpi small { font-size: 12px; color: #7c8f86; font-weight: 600; }
.ufms-kpi strong { font-size: 26px; color: #12211a; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
.ufms-kpi em { font-style: normal; font-size: 11.5px; font-weight: 700; }
.ufms-kpi em.up, .ufms-kpi em.ok { color: #1f9d55; }
.ufms-kpi em.watch { color: #c67f11; }
.ufms-kpi em.down, .ufms-kpi em.bad { color: #c0392b; }

/* cards */
.ufms-card { background: #fff; border: 1px solid #e3ebe6; border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(18,33,26,0.05), 0 8px 24px -14px rgba(18,33,26,0.16); animation: ufms-rise 0.55s ease-out 0.14s both; }
.ufms-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ufms-card-h span { font-size: 13px; font-weight: 700; color: #12211a; }
.ufms-card-h small { font-size: 11.5px; color: #7c8f86; font-weight: 600; }
.ufms-live-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #1f9d55; text-transform: uppercase; letter-spacing: 0.06em; }
.ufms-live-tag i { width: 6px; height: 6px; border-radius: 50%; background: #1f9d55; animation: ufms-pulse 2s infinite; }
.ufms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* egg-ledger centerpiece */
.ufms-ledger-big { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.ufms-ledger-big strong { font-size: 44px; font-weight: 800; color: #0f6b3f; letter-spacing: -0.02em; line-height: 1; }
.ufms-ledger-big span { font-size: 14px; color: #4d635a; font-weight: 600; }
.ufms-ledger-big em { font-style: normal; color: #7c8f86; font-weight: 500; }
.ufms-ledger-bars { display: flex; align-items: flex-end; gap: 6px; height: 84px; margin-bottom: 10px; }
.ufms-ledger-bars span { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #128a52, #0f6b3f); transform-origin: bottom; animation: ufms-grow 0.7s cubic-bezier(0.2,0.9,0.3,1.05) both; }
.ufms-ledger-bars span:nth-child(2) { animation-delay: 0.05s; }
.ufms-ledger-bars span:nth-child(3) { animation-delay: 0.1s; }
.ufms-ledger-bars span:nth-child(4) { animation-delay: 0.15s; }
.ufms-ledger-bars span:nth-child(5) { animation-delay: 0.2s; }
.ufms-ledger-bars span:nth-child(6) { animation-delay: 0.25s; }
.ufms-ledger-bars span:nth-child(7) { animation-delay: 0.3s; }
.ufms-ledger-bars span:nth-child(8) { animation-delay: 0.35s; }
.ufms-ledger-foot { display: flex; justify-content: space-between; font-size: 11.5px; color: #7c8f86; }

/* lay-rate trend line */
.ufms-line { width: 100%; height: 96px; display: block; }
.ufms-area { fill: rgba(15,107,63,0.10); }
.ufms-stroke { fill: none; stroke: #0f6b3f; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: ufms-draw 1.5s ease forwards 0.25s; }
.ufms-line-foot { display: flex; justify-content: space-between; font-size: 11px; color: #7c8f86; margin-top: 4px; }

/* per-batch table */
.ufms-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ufms-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #7c8f86; font-weight: 700; padding: 0 12px 9px; border-bottom: 1px solid #e3ebe6; }
.ufms-table td { padding: 11px 12px; border-bottom: 1px solid #eef3f0; color: #4d635a; }
.ufms-table td strong { color: #12211a; font-weight: 700; }
.ufms-table .r { text-align: right; }
.ufms-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.ufms-pill.ok { background: #e6f6ee; color: #1f9d55; }
.ufms-pill.watch { background: #fbf0dc; color: #c67f11; }

/* in-app navigation: clickable sidebar switches pages within the preview */
.ufms-nav { cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.ufms-nav:not(.is-active):hover { background: #f1f6f2; color: #0f6b3f; }
.ufms-page { display: none; }
.ufms-page.is-active { display: flex; flex-direction: column; gap: 16px; }

/* records page */
.ufms-setup { padding: 16px 18px; }
.ufms-setup-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ufms-setup-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: #e6f4ec; color: #0f6b3f; display: grid; place-items: center; }
.ufms-setup-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ufms-setup-h strong { display: block; font-size: 15px; font-weight: 700; color: #12211a; }
.ufms-setup-h small { display: block; margin-top: 2px; font-size: 12.5px; color: #4d635a; }
.ufms-setup-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ufms-setup-card { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1px solid #e3ebe6; border-radius: 12px; background: #f8faf9; }
.ufms-setup-num { flex: none; font-size: 20px; line-height: 1.2; }
.ufms-setup-card strong { display: block; font-size: 13.5px; font-weight: 700; color: #12211a; }
.ufms-setup-card small { display: block; margin-top: 2px; font-size: 12px; color: #7c8f86; }
.ufms-rtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ufms-rtab { padding: 7px 13px; border-radius: 999px; border: 1px solid #e3ebe6; background: #fff; color: #4d635a; font-size: 12.5px; font-weight: 600; }
.ufms-rtab.is-on { background: #0f6b3f; border-color: #0f6b3f; color: #fff; }
.ufms-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ufms-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #4d635a; font-weight: 600; }
.ufms-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #c5d2ca; background: #fff; }
.ufms-toolbar-r { display: flex; gap: 8px; }
.ufms-btn { padding: 8px 14px; border-radius: 9px; border: 1px solid #e3ebe6; background: #fff; color: #12211a; font-size: 13px; font-weight: 600; }
.ufms-btn--primary { background: #0f6b3f; border-color: #0f6b3f; color: #fff; }
.ufms-rtable td, .ufms-rtable th { padding-left: 4px; }
.ufms-view { display: inline-block; padding: 5px 13px; border-radius: 8px; border: 1px solid #e3ebe6; background: #fff; font-size: 12px; font-weight: 700; color: #0f6b3f; }
.ufms-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 12.5px; color: #7c8f86; }
.ufms-pager-b { display: flex; align-items: center; gap: 9px; }
.ufms-pager-n { color: #4d635a; }
.ufms-page[data-ufms-page="records"].is-active > * { animation: ufms-rise 0.5s ease-out both; }
.ufms-page[data-ufms-page="records"].is-active > *:nth-child(2) { animation-delay: 0.06s; }
.ufms-page[data-ufms-page="records"].is-active > *:nth-child(3) { animation-delay: 0.12s; }
.ufms-page[data-ufms-page="records"].is-active > *:nth-child(4) { animation-delay: 0.18s; }

@keyframes ufms-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,0.5); } 70% { box-shadow: 0 0 0 6px rgba(31,157,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,85,0); } }
@keyframes ufms-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ufms-draw { to { stroke-dashoffset: 0; } }
@keyframes ufms-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   TRUCKVILLE OS — faithful reproduction of the real ops admin
   (tokens from truckville/dashboard/app/globals.css: #020617 ink,
   #047857 money-green kicker, #f6f8fb canvas, white slate-200 cards,
   black pills, Arial). Rendered at 1280px native, view-only.
   ============================================================ */
.tvos {
  width: 100%;
  display: flex;
  align-items: stretch;
  font-family: Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
  background: #f6f8fb;
  color: #020617;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.tvos *, .tvos *::before, .tvos *::after { box-sizing: border-box; }
.tvos h1, .tvos h2, .tvos h3 { margin: 0; letter-spacing: -0.02em; }
.tvos .tnum { font-variant-numeric: tabular-nums; }
.tvos-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #047857; }
.tvos-kicker-muted { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #64748b; }

/* sidebar rail */
.tvos-side { width: 244px; flex-shrink: 0; background: #fff; border-right: 1px solid #e2e8f0; padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; }
.tvos-brand { display: flex; align-items: center; gap: 11px; padding: 2px 6px 6px; }
.tvos-logo { width: 38px; height: 38px; border-radius: 11px; background: #020617; color: #fff; font-weight: 900; font-size: 14px; display: grid; place-items: center; letter-spacing: 0.03em; }
.tvos-brandtxt { display: flex; flex-direction: column; line-height: 1.15; }
.tvos-brandtxt small { font-size: 9px; letter-spacing: 0.16em; color: #64748b; font-weight: 700; }
.tvos-brandtxt strong { font-size: 15px; color: #020617; font-weight: 800; letter-spacing: -0.01em; }
.tvos-group { display: flex; flex-direction: column; gap: 2px; }
.tvos-group > p { margin: 0 0 4px; padding: 0 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #94a3b8; }
.tvos-navitem { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; color: #475569; font-size: 13.5px; font-weight: 600; }
.tvos-navitem svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tvos-navitem.is-active { background: #020617; color: #fff; }

/* main */
.tvos-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #f6f8fb; }
.tvos-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 26px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.tvos-top h1 { margin-top: 4px; font-size: 24px; font-weight: 900; color: #020617; }
.tvos-topright { display: flex; align-items: center; gap: 14px; }
.tvos-day { font-size: 13px; font-weight: 700; color: #64748b; }
.tvos-userchip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #334155; }
.tvos-ava { width: 30px; height: 30px; border-radius: 50%; background: #020617; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.tvos-logout { font-size: 13px; font-weight: 700; color: #020617; padding: 8px 16px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; }

.tvos-content { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; gap: 20px; }
.tvos-content > * { animation: ufms-rise 0.5s ease-out both; }
.tvos-content > *:nth-child(2) { animation-delay: 0.06s; }
.tvos-content > *:nth-child(3) { animation-delay: 0.12s; }
.tvos-content > *:nth-child(4) { animation-delay: 0.18s; }

.tvos-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 2px rgb(17 24 39 / 0.05), 0 10px 28px -18px rgb(17 24 39 / 0.18); padding: 22px 24px; }
.tvos-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.tvos-hero h2 { margin-top: 8px; font-size: 26px; font-weight: 900; color: #020617; }
.tvos-sub { margin: 8px 0 0; max-width: 560px; font-size: 13px; line-height: 1.5; color: rgba(2,6,23,0.6); }
.tvos-hero-r { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.tvos-date { font-size: 13px; font-weight: 700; color: rgba(2,6,23,0.5); }
.tvos-pulse { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.tvos-pulse i { width: 7px; height: 7px; border-radius: 50%; background: #059669; animation: ufms-pulse 2s infinite; }
.tvos-daypill { padding: 5px 12px; border-radius: 999px; background: #d1fae5; color: #065f46; font-size: 11px; font-weight: 800; }

.tvos-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0; }
.tvos-stat { padding: 18px 18px; }
.tvos-stat dt { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #64748b; }
.tvos-val { margin: 8px 0 0; font-size: 28px; font-weight: 900; letter-spacing: -0.02em; color: #020617; line-height: 1.12; }
.tvos-stat small { display: block; margin-top: 4px; font-size: 11.5px; color: rgba(2,6,23,0.5); }

.tvos-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tvos-card h3 { margin-top: 4px; font-size: 18px; font-weight: 900; color: #020617; }
.tvos-pay { margin: 16px 0 0; display: flex; flex-direction: column; }
.tvos-pay > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(2,6,23,0.08); }
.tvos-pay dt { font-size: 14px; font-weight: 600; color: rgba(2,6,23,0.7); text-transform: capitalize; }
.tvos-pay dd { margin: 0; font-size: 15px; font-weight: 900; color: #020617; }
.tvos-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 14px; }
.tvos-table th { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #64748b; padding-bottom: 9px; text-align: left; }
.tvos-table td { padding: 10px 0; border-top: 1px solid rgba(2,6,23,0.08); color: #334155; font-weight: 600; }
.tvos-table .r { text-align: right; }
.tvos-table .b { color: #020617; font-weight: 900; }

.tvos-bands { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tvos-band { border-radius: 12px; border: 1px solid; padding: 13px 16px; font-size: 13px; line-height: 1.45; }
.tvos-band strong { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.tvos-band.mint { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.tvos-band.amber { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ============================================================
   TRUCKVILLE ORDERING APP — faithful reproduction of the real
   customer mobile app (tokens from truckville/order/globals.css:
   cream #fff7e8, forest #063824, gold #f5c400, app-cards r28,
   glassy chips, floating liquid-glass tab bar). 390px native.
   ============================================================ */
.tvo {
  width: 100%;
  min-height: 780px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 8px;
  background: #fff7e8;
  color: #102818;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.tvo *, .tvo *::before, .tvo *::after { box-sizing: border-box; }
.tvo strong { font-weight: 800; }
.tvo-card { background: #fff; border: 1px solid rgba(6,56,36,0.06); border-radius: 26px; box-shadow: 0 8px 28px -16px rgba(6,56,36,0.26), inset 0 1px 0 rgba(255,255,255,0.6); }

/* sticky top: wordmark + scan + search */
.tvo-top { position: sticky; top: 0; z-index: 6; margin: 0 -16px; padding: 16px 16px 12px; background: rgba(255,247,232,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(6,56,36,0.08); }
.tvo-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tvo-word { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: #063824; }
.tvo-scan { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(6,56,36,0.08); color: #063824; font-size: 12px; font-weight: 700; }
.tvo-scan svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tvo-search { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 999px; background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 2px 10px -6px rgba(6,56,36,0.3); color: rgba(16,40,24,0.5); font-size: 14px; font-weight: 600; }
.tvo-search svg { width: 17px; height: 17px; fill: none; stroke: rgba(6,56,36,0.55); stroke-width: 2; stroke-linecap: round; }

/* hero */
.tvo-hero { border-radius: 24px; background: #063824; padding: 22px 20px; color: #fff7e8; box-shadow: 0 10px 30px -12px rgba(6,56,36,0.4); }
.tvo-hero-k { margin: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #f5c400; }
.tvo-hero h1 { margin: 6px 0 0; font-size: 23px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.tvo-hero-sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,247,232,0.85); }

/* squad card */
.tvo-squad { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.tvo-squad-ic { flex: none; width: 44px; height: 44px; border-radius: 15px; background: rgba(229,160,46,0.2); display: grid; place-items: center; font-size: 22px; }
.tvo-squad-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tvo-squad-t strong { font-size: 14px; color: #063824; }
.tvo-squad-t small { font-size: 12px; color: rgba(16,40,24,0.6); }
.tvo-chev { flex: none; font-size: 22px; color: rgba(6,56,36,0.4); }

/* quick 2-col */
.tvo-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tvo-quick-c { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.tvo-quick-ic { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; }
.tvo-quick-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tvo-quick-ic.forest { background: rgba(6,56,36,0.1); color: #063824; }
.tvo-quick-ic.gold { background: rgba(245,196,0,0.25); color: #9a6a10; }
.tvo-quick-c strong { display: block; font-size: 14px; color: #063824; }
.tvo-quick-c small { display: block; margin-top: 2px; font-size: 12px; color: rgba(16,40,24,0.6); }

/* category chips */
.tvo-chips { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tvo-chips::-webkit-scrollbar { display: none; }
.tvo-chip { flex: none; padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 2px 8px -5px rgba(6,56,36,0.25); font-size: 13px; font-weight: 700; color: #063824; white-space: nowrap; }
.tvo-chip.is-active { background: #063824; border-color: #063824; color: #fff7e8; }

/* rails */
.tvo-rail-h { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.tvo-rail-h strong { display: block; font-size: 18px; font-weight: 900; letter-spacing: -0.02em; color: #063824; }
.tvo-rail-h small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(16,40,24,0.6); }
.tvo-seeall { font-size: 12.5px; font-weight: 800; color: #078b21; white-space: nowrap; }
.tvo-rail-row { display: flex; gap: 13px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.tvo-rail-row::-webkit-scrollbar { display: none; }
.tvo-rail-row .tvo-vendor { flex: 0 0 158px; }

/* vendor card */
.tvo-vendor { overflow: hidden; }
.tvo-vphoto { position: relative; display: grid; place-items: center; height: 96px; font-size: 40px; background: linear-gradient(150deg, var(--g1), var(--g2)); }
.tvo-vpill { position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.tvo-vpill.open { background: #e7f6ea; color: #0b7a2e; }
.tvo-vpill.busy { background: #fdf3d6; color: #9a6a10; }
.tvo-vpill.soldout { background: #fbe9e7; color: #b23c17; }
.tvo-vbody { padding: 11px 13px 14px; }
.tvo-vbody strong { display: block; font-size: 14px; font-weight: 800; color: #063824; }
.tvo-vmeta { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; font-weight: 700; color: rgba(16,40,24,0.7); }
.tvo-star { color: #e5a02e; font-style: normal; }
.tvo-vbody small { display: block; margin-top: 3px; font-size: 11.5px; color: rgba(16,40,24,0.55); }

/* promo */
.tvo-promo { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 22px; background: linear-gradient(120deg, #f5c400, #e5a02e); color: #063824; box-shadow: 0 10px 26px -14px rgba(229,160,46,0.7); }
.tvo-promo-k { margin: 0; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(6,56,36,0.65); }
.tvo-promo strong { display: block; margin-top: 3px; font-size: 17px; font-weight: 900; letter-spacing: -0.01em; }
.tvo-promo small { display: block; margin-top: 3px; font-size: 12px; color: rgba(6,56,36,0.7); }
.tvo-promo-badge { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(6,56,36,0.9); color: #f5c400; font-size: 15px; font-weight: 900; }

/* every truck grid */
.tvo-every h2 { margin: 0 0 12px; font-size: 18px; font-weight: 900; letter-spacing: -0.02em; color: #063824; }
.tvo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

/* floating liquid-glass tab bar */
.tvo-tabbar { position: sticky; bottom: 12px; z-index: 8; margin: 20px 10px 4px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border-radius: 28px; isolation: isolate; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.32)); backdrop-filter: blur(22px) saturate(190%); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 14px 36px -10px rgba(6,56,36,0.36), inset 0 1px 0 rgba(255,255,255,0.9); }
.tvo-glass { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 4); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18)), linear-gradient(180deg, rgba(245,196,0,0.22), rgba(229,160,46,0.08)); border: 1px solid rgba(255,255,255,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 12px -4px rgba(6,56,36,0.22); }
.tvo-tabbar a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; font-size: 10px; font-weight: 800; color: rgba(6,56,36,0.5); }
.tvo-tabbar a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tvo-tabbar a.is-on { color: #063824; }

.tvo > * { animation: ufms-rise 0.5s ease-out both; }
.tvo-top { animation: none; }
.tvo-hero { animation-delay: 0.04s; }
.tvo-squad { animation-delay: 0.09s; }
.tvo-quick { animation-delay: 0.14s; }

/* ============================================================
   LABOUR PARTY portal — faithful reproduction of the real member
   portal (tokens from labour-party/portal-v1-reference/style.css:
   red #e0102b + green #007a3d, Playfair serif headings/Inter body,
   the 2px-bordered membership slip). 1280px native, view-only.
   ============================================================ */
.lp {
  width: 100%;
  background: radial-gradient(circle at top left, #ffffff 0%, #f7f8fa 44%, #f2f3f5 100%);
  color: #1a1a1a;
  font-family: "Inter", "Segoe UI", sans-serif;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp h1, .lp h2, .lp h3 { margin: 0; font-family: "Playfair Display", Georgia, "Times New Roman", serif; letter-spacing: -0.02em; color: #141824; }
.lp-logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 11px; background: linear-gradient(135deg, #e0102b 0 48%, #007a3d 52% 100%); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: 0.02em; box-shadow: 0 4px 14px rgba(0,0,0,0.14); }

/* header */
.lp-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 78px; padding: 0 28px; background: rgba(249,249,250,0.96); border-bottom: 1px solid rgba(18,28,47,0.09); backdrop-filter: blur(11px); }
.lp-brand { display: inline-flex; align-items: center; gap: 12px; }
.lp-brandtxt { display: flex; flex-direction: column; line-height: 1.15; }
.lp-brandtxt strong { font-family: "Playfair Display", Georgia, serif; font-size: 19px; font-weight: 800; color: #101a33; letter-spacing: -0.01em; }
.lp-brandtxt small { font-size: 11px; color: #5a5a5a; font-weight: 600; }
.lp-nav { display: flex; align-items: center; gap: 22px; }
.lp-nav a { font-size: 14px; font-weight: 700; color: #22334e; }
.lp-nav a.is-on { color: #007a3d; }
.lp-nav a.lp-login { padding: 9px 18px; border-radius: 999px; background: #e0102b; color: #fff; box-shadow: 0 6px 16px -6px rgba(224,16,43,0.5); }

/* shell + layout */
.lp-shell { width: min(1100px, calc(100% - 3rem)); margin: 26px auto 30px; }
.lp-layout { display: grid; grid-template-columns: 236px minmax(0,1fr); gap: 18px; align-items: start; }
.lp-sidebar { border: 1px solid #dce4ef; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.08); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.lp-sidebar h2 { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #73839f; margin-bottom: 6px; }
.lp-navitem { display: block; text-align: left; border: 1px solid transparent; border-radius: 11px; padding: 11px 13px; color: #22334e; font-family: "Inter", sans-serif; font-weight: 700; font-size: 14px; background: none; cursor: default; }
.lp-navitem.is-active { background: rgba(224,16,43,0.09); border-color: rgba(224,16,43,0.2); color: #b70f23; }
.lp-logout { color: #cc1f2f; margin-top: 4px; }

/* main */
.lp-main { display: flex; flex-direction: column; gap: 18px; }
.lp-card { background: #fff; border: 1px solid #e4e4e7; border-radius: 18px; padding: 26px 28px; box-shadow: 0 18px 45px rgba(8,14,30,0.12); }
.lp-card h1 { font-size: 30px; }
.lp-subtitle { margin: 6px 0 0; color: #5a5a5a; font-size: 15px; }
.lp-stats { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.lp-stat { border: 1px solid #dce4ef; border-radius: 13px; padding: 15px; background: #fff; }
.lp-stat span { display: block; color: #60708a; font-size: 12.5px; margin-bottom: 5px; }
.lp-stat strong { display: block; color: #007a3d; font-size: 19px; line-height: 1.15; font-weight: 800; overflow-wrap: anywhere; }

/* membership slip */
.lp-slip { border: 2px solid #101010; border-radius: 8px; background: #fff; padding: 18px 20px; box-shadow: 0 12px 26px rgba(0,0,0,0.12); }
.lp-slip-head { text-align: center; }
.lp-slip-head h2 { font-size: 27px; color: #171c26; margin-bottom: 4px; }
.lp-slip-head p { color: #404040; font-size: 15px; }
.lp-slip-div { border-top: 1px solid #d6d6d6; margin: 14px 0; }
.lp-slip-main { display: grid; grid-template-columns: 120px 1fr 96px; gap: 18px; align-items: center; }
.lp-slip-photo { display: grid; place-items: center; border: 1px solid #d5d5d5; border-radius: 8px; min-height: 124px; background: #fbfbfb; color: #9aa3b2; font-size: 13px; font-weight: 600; }
.lp-slip-meta h3 { margin: 0 0 8px; font-family: "Inter", sans-serif; font-size: 22px; font-weight: 800; color: #181d28; letter-spacing: 0.01em; }
.lp-slip-meta p { margin: 3px 0; color: #2a2f3a; font-size: 14px; }
.lp-slip-meta strong { font-weight: 700; }
.lp-slip-brand { display: grid; justify-items: center; gap: 6px; }
.lp-logo-sm { width: 62px; height: 62px; font-size: 22px; }
.lp-slip-lp { font-weight: 800; color: #0f3321; font-size: 14px; }
.lp-slip-loc { margin-top: 16px; border: 1px solid #191919; border-radius: 8px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.lp-loc-item { padding: 13px; text-align: center; border-right: 1px solid #191919; }
.lp-loc-item:last-child { border-right: none; }
.lp-loc-item strong { display: block; color: #121620; font-size: 16px; font-weight: 800; }
.lp-loc-item span { color: #525252; font-size: 12.5px; }
.lp-slip-foot { text-align: center; margin-top: 14px; color: #6a6a6a; font-size: 13px; }

.lp-main > * { animation: ufms-rise 0.55s ease-out both; }
.lp-slip { animation-delay: 0.1s; }

/* ============================================================
   WHAT WE BUILD — feature-detail: a clickable capability list
   drives a contextual dashboard preview window (site blue-glass
   style, view-only, charts animate on activation).
   ============================================================ */
.fd { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 42px); align-items: center; }
.fd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fd-item { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; padding: 13px 15px; border-radius: 16px; cursor: pointer; border: 1px solid transparent; transition: background 240ms ease, border-color 240ms ease, transform 200ms ease; }
.fd-item:hover { background: rgba(8, 60, 255, 0.045); }
.fd-item:focus-visible { outline: 2px solid rgba(0, 183, 255, 0.55); outline-offset: 2px; }
.fd-item.is-active { background: linear-gradient(120deg, rgba(8, 60, 255, 0.07), rgba(0, 183, 255, 0.05)); border-color: rgba(0, 183, 255, 0.28); box-shadow: 0 10px 30px -18px rgba(8, 60, 255, 0.4); }
.fd-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(8, 60, 255, 0.08); color: var(--blue); transition: background 240ms ease, color 240ms ease; }
.fd-item.is-active .fd-ic { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; box-shadow: 0 6px 16px -6px rgba(8, 60, 255, 0.6); }
.fd-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fd-txt strong { display: block; font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.fd-txt small { display: block; margin-top: 2px; font-size: 0.82rem; line-height: 1.45; color: var(--text-soft); }

.fd-window { border-radius: 20px; overflow: hidden; }
.fd-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(8, 30, 90, 0.08); }
.fd-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(8, 30, 90, 0.16); }
.fd-dot:nth-child(1) { background: #ff5f57; } .fd-dot:nth-child(2) { background: #febc2e; } .fd-dot:nth-child(3) { background: #28c840; }
.fd-url { margin-left: 10px; padding: 4px 12px; border-radius: 8px; background: rgba(8, 30, 90, 0.05); font-size: 0.76rem; color: var(--text-soft); letter-spacing: 0.02em; }
.fd-screens { position: relative; min-height: 318px; padding: 18px; }
.fd-screen { position: absolute; inset: 18px; display: flex; flex-direction: column; gap: 12px; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity 300ms ease, translate 300ms ease; }
.fd-screen.is-active { opacity: 1; translate: 0 0; pointer-events: auto; }

.fd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fd-kpis--2 { grid-template-columns: repeat(2, 1fr); }
.fd-kpi { background: #fff; border: 1px solid rgba(8, 30, 90, 0.07); border-radius: 13px; padding: 12px 13px; box-shadow: 0 6px 18px -12px rgba(8, 30, 90, 0.2); }
.fd-kpi small { color: var(--text-soft); font-size: 0.72rem; font-weight: 600; }
.fd-kpi strong { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.fd-kpi em { font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--text-soft); }
.fd-kpi em.up { color: #16a34a; } .fd-kpi em.down { color: #dc2626; } .fd-kpi em.warn { color: #d97706; }

.fd-panel { flex: 1; background: #fff; border: 1px solid rgba(8, 30, 90, 0.07); border-radius: 13px; padding: 14px 15px; box-shadow: 0 6px 18px -12px rgba(8, 30, 90, 0.2); }
.fd-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.fd-panel-h i { font-style: normal; font-size: 0.7rem; font-weight: 600; color: var(--text-soft); }
.fd-live { display: inline-flex; align-items: center; gap: 5px; color: #16a34a; }
.fd-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; animation: ufms-pulse 2s infinite; }

.fd-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fd-rows li { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; font-size: 0.82rem; color: var(--text-soft); }
.fd-rows strong { color: var(--ink); font-weight: 700; }
.fd-rdot { width: 8px; height: 8px; border-radius: 50%; }
.fd-rdot.ok { background: #16a34a; } .fd-rdot.info { background: var(--blue); } .fd-rdot.warn { background: #d97706; }
.fd-rows em { font-style: normal; font-size: 0.72rem; color: var(--text-soft); white-space: nowrap; }

.fd-bars { display: flex; align-items: flex-end; gap: 9px; height: 118px; }
.fd-bars span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--cyan), var(--blue)); transform-origin: bottom; }
.fd-bars span:last-child { background: linear-gradient(180deg, #86d8ff, var(--azure)); }
.fd-screen.is-active .fd-bars span { animation: ufms-grow 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.05) both; }
.fd-screen.is-active .fd-bars span:nth-child(2) { animation-delay: 0.05s; } .fd-screen.is-active .fd-bars span:nth-child(3) { animation-delay: 0.1s; } .fd-screen.is-active .fd-bars span:nth-child(4) { animation-delay: 0.15s; } .fd-screen.is-active .fd-bars span:nth-child(5) { animation-delay: 0.2s; } .fd-screen.is-active .fd-bars span:nth-child(6) { animation-delay: 0.25s; } .fd-screen.is-active .fd-bars span:nth-child(7) { animation-delay: 0.3s; }

.fd-panel--flow { display: flex; flex-direction: column; }
.fd-flow { display: flex; align-items: center; gap: 5px; margin: auto 0; }
.fd-node { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; color: var(--ink); }
.fd-node-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(8, 60, 255, 0.08); color: var(--blue); }
.fd-node-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fd-flowline { flex: 0 0 22px; height: 2px; background: rgba(8, 60, 255, 0.16); position: relative; overflow: hidden; border-radius: 2px; }
.fd-flowline i { position: absolute; top: 0; left: 0; height: 100%; width: 45%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: fd-flow 1.7s linear infinite; }
@keyframes fd-flow { from { transform: translateX(-120%); } to { transform: translateX(280%); } }

.fd-panel--chat { display: flex; flex-direction: column; }
.fd-chat { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.fd-msg { margin: 0; max-width: 86%; padding: 10px 13px; font-size: 0.84rem; line-height: 1.45; border-radius: 15px; }
.fd-msg--u { align-self: flex-end; background: linear-gradient(135deg, var(--blue), var(--azure)); color: #fff; border-bottom-right-radius: 5px; }
.fd-msg--a { align-self: flex-start; background: #f4f7ff; border: 1px solid rgba(8, 30, 90, 0.08); color: var(--ink); border-bottom-left-radius: 5px; }
.fd-msg--a strong { color: var(--blue-deep); }
.fd-chips { display: flex; gap: 6px; margin-top: 9px; }
.fd-chips span { font-size: 0.72rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(8, 60, 255, 0.09); color: var(--blue); }
.fd-screen.is-active .fd-msg { animation: ufms-rise 0.5s ease-out both; }
.fd-screen.is-active .fd-msg--a { animation-delay: 0.22s; }

.fd-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.fd-table th { text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); font-weight: 700; padding-bottom: 10px; }
.fd-table td { padding: 10px 0; border-top: 1px solid rgba(8, 30, 90, 0.07); color: var(--text-soft); }
.fd-table strong { color: var(--ink); font-weight: 700; }
.fd-pill { padding: 3px 11px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
.fd-pill.full { background: #e6f6ee; color: #16a34a; } .fd-pill.lim { background: rgba(8, 60, 255, 0.1); color: var(--blue); } .fd-pill.fin { background: #fef3c7; color: #b45309; }

.fd-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fd-mod { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 8px; border-radius: 13px; background: #fff; border: 1px solid rgba(8, 30, 90, 0.07); font-size: 0.74rem; font-weight: 700; color: var(--ink); box-shadow: 0 6px 18px -12px rgba(8, 30, 90, 0.2); }
.fd-mod svg { width: 21px; height: 21px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.fd-screen.is-active .fd-kpi, .fd-screen.is-active .fd-panel, .fd-screen.is-active .fd-mod { animation: ufms-rise 0.5s ease-out both; }
.fd-screen.is-active .fd-kpi:nth-child(2) { animation-delay: 0.06s; } .fd-screen.is-active .fd-kpi:nth-child(3) { animation-delay: 0.12s; }
.fd-screen.is-active .fd-mod:nth-child(2) { animation-delay: 0.05s; } .fd-screen.is-active .fd-mod:nth-child(3) { animation-delay: 0.1s; } .fd-screen.is-active .fd-mod:nth-child(4) { animation-delay: 0.15s; } .fd-screen.is-active .fd-mod:nth-child(5) { animation-delay: 0.2s; } .fd-screen.is-active .fd-mod:nth-child(6) { animation-delay: 0.25s; }
.fd-screen.is-active .fd-rows li { animation: ufms-rise 0.45s ease-out both; }
.fd-screen.is-active .fd-rows li:nth-child(2) { animation-delay: 0.07s; } .fd-screen.is-active .fd-rows li:nth-child(3) { animation-delay: 0.14s; }

/* feature-detail responsive + density */
@media (max-width: 860px) {
  .fd { grid-template-columns: 1fr; gap: 20px; }
  .fd-txt small { display: none; }
  .fd-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .fd-item { grid-template-columns: auto; gap: 0; padding: 11px 13px; }
  .fd-screens { min-height: 300px; }
}
.s-snug .fd-txt small { display: none; }
.s-snug .fd-item { padding: 9px 13px; }
.s-tight .fd-screens { min-height: 260px; }
.s-tighter .fd-screens { min-height: 228px; }
.s-tighter .fd-item { padding: 7px 11px; }

/* ============================================================
   PER-SECTION MOTION — "Editorial Depth — Kinetic Glass".
   Each section gets a distinct, thematically-apt reveal. All from-states
   use individual transform props (translate/scale/rotate) + parent
   perspective + clip-path/opacity/filter — reversible via .in-view.
   ============================================================ */

/* readiness — panel rises into soft focus; steps cascade; heading clip-wipes (JS scrub) */
#readiness [data-reveal] { --rv-in: 660ms; --stag: 70ms; }
#readiness .section-head { translate: 0 18px; }
#readiness .bar-panel { --i: 1; translate: 0 28px; scale: 0.99; filter: blur(6px); }
#readiness .bar-steps { --i: 2; translate: 0 18px; }
#readiness .section-head h2 {
  clip-path: inset(0 var(--wipe-r, 0%) 0 0); /* JS drives --wipe-r 100%→0% */
}

/* positioning — counter-slide: text from the left, key-message card hinges in from the right */
#positioning .split { perspective: 1200px; }
#positioning .section-copy { --rv-in: 700ms; --rv-ease: cubic-bezier(0.16, 1, 0.3, 1); translate: -36px 0; }
#positioning .key-message {
  --rv-in: 720ms; --rv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  translate: 34px 0; rotate: y 8deg; scale: 0.98;
  transform-origin: right center;
}

/* agents — copy slides from the left (phone is a JS 3D scroll-dolly, handled separately) */
#agents .section-copy { --rv-in: 700ms; --rv-ease: cubic-bezier(0.2, 0.8, 0.24, 1); translate: -28px 14px; }

/* systems — diagonal pop-scale wave (top-left → bottom-right) */
#systems [data-reveal] { --rv-in: 580ms; --rv-ease: cubic-bezier(0.34, 1.18, 0.5, 1); --stag: 65ms; }
#systems .section-head { translate: 0 16px; }
#systems .cols-3 > [data-reveal] { translate: 0 30px; scale: 0.94; }

/* problem — scatter → converge (chaos resolving into order) */
#problem [data-reveal] { --rv-in: 700ms; --rv-ease: cubic-bezier(0.2, 0.9, 0.28, 1.02); --stag: 55ms; }
#problem .section-head { translate: 0 16px; }
#problem .cols-3 > [data-reveal] {
  translate: var(--sx, -40px) var(--sy, 26px);
  rotate: var(--sr, -4deg);
  scale: 0.9;
}
#problem .cols-3 > [data-reveal]:nth-child(1) { --sx: -42px; --sy: 26px; --sr: -4deg; }
#problem .cols-3 > [data-reveal]:nth-child(2) { --sx: 34px;  --sy: -22px; --sr: 3deg; }
#problem .cols-3 > [data-reveal]:nth-child(3) { --sx: -28px; --sy: -30px; --sr: 2.5deg; }
#problem .cols-3 > [data-reveal]:nth-child(4) { --sx: 30px;  --sy: 28px; --sr: -3.5deg; }
#problem .cols-3 > [data-reveal]:nth-child(5) { --sx: -36px; --sy: 14px; --sr: 4deg; }
#problem .cols-3 > [data-reveal]:nth-child(6) { --sx: 26px;  --sy: -16px; --sr: -2deg; }

/* solution — deal-in flip-up (numbered pillars tip up as if dealt, 1→6) */
#solution .pillar-grid { perspective: 900px; }
#solution [data-reveal] { --rv-in: 620ms; --rv-ease: cubic-bezier(0.18, 0.82, 0.25, 1); --stag: 80ms; }
#solution .section-head { translate: 0 16px; }
#solution .pillar-grid > [data-reveal] {
  translate: 0 32px; rotate: x -14deg; transform-origin: center bottom;
}

/* products — screen-on: tabs and stage rise in with a gentle stagger */
#products [data-reveal] { --rv-in: 720ms; --rv-ease: cubic-bezier(0.22, 0.88, 0.3, 1); --stag: 80ms; }
#products .section-head { translate: 0 16px; }

/* process — deal steps left→right; the connector line draws via scaleX */
#process [data-reveal] { --rv-in: 580ms; --rv-ease: cubic-bezier(0.2, 0.85, 0.26, 1); --stag: 110ms; }
#process .section-head { translate: 0 16px; }
#process .process-track > [data-reveal] { translate: -32px 0; scale: 0.95; }
#process .process-track::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(0.2, 0.85, 0.26, 1) 130ms;
}
#process .process-track:has(.step.in-view)::before { transform: scaleX(1); }

/* why — bento focus-pull bloom (tiles settle into hierarchy) */
#why [data-reveal] { --rv-in: 680ms; --rv-ease: cubic-bezier(0.22, 1, 0.36, 1); --stag: 75ms; }
#why .section-head { translate: 0 16px; }
#why .why-grid > [data-reveal] { translate: 0 20px; scale: 0.95; }

/* impact — sequential pill pop with restrained overshoot */
#impact [data-reveal] { --rv-in: 500ms; --rv-ease: cubic-bezier(0.34, 1.28, 0.5, 1); --stag: 85ms; }
#impact .section-head { translate: 0 14px; }
#impact .impact-rail > [data-reveal] { translate: 0 12px; scale: 0.85; }

/* faq — accordion rows unroll via a top-down clip, in sequence */
#faq [data-reveal] { --rv-in: 560ms; --rv-ease: cubic-bezier(0.22, 1, 0.36, 1); --stag: 60ms; }
#faq .section-head { translate: 0 14px; }
#faq .faq-list > [data-reveal] { translate: 0 14px; clip-path: inset(0 0 100% 0); }
#faq .faq-list > [data-reveal].in-view { clip-path: inset(0 0 0 0); }

/* contact — converge-to-CTA: the closing panel settles into place */
#contact [data-reveal] { --rv-in: 740ms; --rv-ease: cubic-bezier(0.16, 0.84, 0.3, 1); }
#contact .cta-panel { translate: 0 34px; scale: 0.98; filter: blur(5px); }

/* the 3D scroll-dolly phone (agents) — JS sets .style.transform per frame */
.iphone-stage.scrub { will-change: transform, opacity; }