/* ============================================================
   JoTrack public site — design system
   Consumed by the CMS-seeded page HTML (see ContentSeed spec):
   .hero .section .stats .grid .card .feature-row .pricing
   .steps .quote .person .cta-band .prose  etc.
   ============================================================ */

:root {
  --bg: #070b14;
  --bg-raised: #0c1322;
  --bg-card: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.09);
  --text: #e6ecf7;
  --text-dim: #93a0b8;
  /* Brand palette from the JoTrack logo: #0BBBEF (sky) → #1d71b8 (deep blue),
     wordmark blue #1D71B8. Dark theme lightens the deep end for contrast. */
  --accent: #0bbbef;
  --accent-2: #4d84e2;
  --accent-3: #38d4ff;
  --grad: linear-gradient(100deg, #38d4ff 0%, #0bbbef 45%, #4d84e2 100%);
  --radius: 16px;
  --radius-lg: 24px;
  --font-en: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ar: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --shadow-glow: 0 0 60px rgba(11, 187, 239, 0.12);
  --header-h: 72px;
  --header-bg: rgba(7, 11, 20, 0.72);
  --nav-mobile-bg: rgba(7, 11, 20, 0.97);
  --hover-bg: rgba(255, 255, 255, 0.06);
  --grid-line: rgba(255, 255, 255, 0.035);
  --shadow-soft: rgba(0, 0, 0, 0.4);
  --shadow-deep: rgba(0, 0, 0, 0.55);
  --tint: rgba(255, 255, 255, 0.022);
  --glass: rgba(12, 19, 34, 0.55);
  color-scheme: dark;
}

/* Light theme — applied when the pre-paint script in the layout sets
   data-theme="light" (visitor preference or prefers-color-scheme). */
html[data-theme="light"] {
  --bg: #f6f8fc;
  --bg-raised: #ffffff;
  --bg-card: #ffffff;
  --border: rgba(15, 26, 44, 0.10);
  --text: #101b30;
  --text-dim: #5a6880;
  --accent: #1d71b8;
  --accent-2: #1d71b8;
  --accent-3: #0bbbef;
  --grad: linear-gradient(100deg, #0bbbef 0%, #1d71b8 55%, #1d71b8 100%);
  --shadow-glow: 0 0 60px rgba(11, 187, 239, 0.16);
  --header-bg: rgba(255, 255, 255, 0.78);
  --nav-mobile-bg: rgba(255, 255, 255, 0.98);
  --hover-bg: rgba(15, 26, 44, 0.06);
  --grid-line: rgba(15, 26, 44, 0.05);
  --shadow-soft: rgba(15, 26, 44, 0.12);
  --shadow-deep: rgba(15, 26, 44, 0.18);
  --tint: rgba(15, 26, 44, 0.025);
  --glass: rgba(255, 255, 255, 0.72);
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Brand-tinted text selection instead of the harsh default blue */
::selection { background: rgba(11, 187, 239, 0.28); color: inherit; }

html { scroll-behavior: smooth; }

body.jt-public {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-en);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.jt-public[class*="rtl"], html[dir="rtl"] body.jt-public { font-family: var(--font-ar); }
html[dir="rtl"] body.jt-public { font-size: 17px; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.015em; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { letter-spacing: 0; }
p { margin: 0 0 1em; color: var(--text-dim); }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease;
}
.header-inner { display: flex; align-items: center; gap: 40px; height: var(--header-h); }
/* flex-shrink:0 — the brand is a flex item next to a nav that grows with every
   menu entry. Without this, adding a nav item squeezes the logo instead of the
   nav, and it silently scales down to a few pixels. */
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); flex-shrink: 0; }
.brand-logo { height: 32px; width: auto; display: none; flex-shrink: 0; }
html[data-theme="dark"] .logo-for-dark { display: block; }
html[data-theme="light"] .logo-for-light { display: block; }
.site-nav { flex: 1; }
.site-nav > ul { display: flex; align-items: center; justify-content: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 2px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  color: var(--text-dim); font: inherit; font-size: 0.97rem; font-weight: 600;
  transition: color 0.2s;
}
.nav-link::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--grad);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.22s ease;
}
.nav-link:hover, .active-parent > .nav-link { color: var(--text); }
.nav-link.active { color: var(--accent); }
.nav-link.active::after, .nav-link:hover::after { transform: scaleX(1); }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 220px;
  list-style: none; margin: 0; padding: 8px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 50px var(--shadow-soft);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text-dim); font-size: 0.93rem; }
.dropdown a:hover, .dropdown a.active { color: var(--text); background: var(--hover-bg); }

.header-actions { display: flex; align-items: center; gap: 12px; }
/* Separates the actions cluster from the menu so buttons don't read as menu items */
.header-actions::before {
  content: ""; width: 1px; height: 22px; background: var(--border);
  margin-inline-end: 10px;
}
.lang-switch { color: var(--text-dim); font-size: 0.92rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.lang-switch:hover { color: var(--text); background: var(--hover-bg); }

.theme-toggle {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
  background: none; color: var(--text-dim); padding: 0;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.theme-toggle:hover { color: var(--text); background: var(--hover-bg); }
.theme-toggle svg { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 0.98rem; cursor: pointer; white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s, border-color 0.18s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--grad); color: #ffffff;
  box-shadow: 0 8px 28px rgba(11, 187, 239, 0.35);
  /* no border on gradient pills: the transparent 1px border anti-aliases
     against the gradient's bright left cap and reads as a dark rim */
  border: 0; padding: 13px 27px;
}
.btn-sm.btn-primary { padding: 10px 19px; }
.btn-primary:hover { box-shadow: 0 12px 36px rgba(11, 187, 239, 0.5); color: #ffffff; }
/* Frosted glass: readable over any backdrop (3D brain/planets, gradients) */
.btn-ghost {
  border-color: var(--border); color: var(--text); background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { border-color: var(--text-dim); color: var(--text); }

/* "Watch the intro" — a comet of blue light continuously circles the pill.
   ::before is an oversized spinning conic gradient; ::after masks the middle
   back to the surface color, leaving only a 2px ring of moving light. */
.btn-film {
  position: relative; overflow: hidden; z-index: 0;
  border-color: transparent; background: transparent;
}
.btn-film::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%;
  width: 240%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(
    transparent 0deg, transparent 190deg,
    rgba(11, 187, 239, 0.35) 250deg, #0bbbef 300deg, #38d4ff 330deg,
    transparent 360deg);
  animation: btn-film-spin 3.2s linear infinite;
}
.btn-film::after {
  content: ""; position: absolute; z-index: -1; inset: 2px;
  border-radius: 999px; background: var(--bg-raised);
}
.btn-film:hover { color: var(--accent); transform: translateY(-2px); }
@keyframes btn-film-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-film::before { animation: none; background: var(--border); }
}

.btn-sm { padding: 9px 18px; font-size: 0.9rem; }
.btn-lg { padding: 15px 34px; font-size: 1.05rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; padding: 110px 24px 90px; text-align: center; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -40% -20% auto;  height: 140%;
  background:
    radial-gradient(600px 420px at 22% 8%, rgba(11, 187, 239, 0.16), transparent 65%),
    radial-gradient(700px 480px at 78% 12%, rgba(77, 132, 226, 0.18), transparent 65%),
    radial-gradient(500px 380px at 55% 90%, rgba(22, 65, 148, 0.08), transparent 70%),
    radial-gradient(1000px 320px at 50% 108%, rgba(11, 187, 239, 0.16), transparent 72%); /* atmosphere glow above the earth */
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 32%, black 30%, transparent 75%);
  pointer-events: none;
}
.hero > * { position: relative; }
.eyebrow {
  display: inline-block; padding: 6px 16px; margin-bottom: 22px;
  border: 1px solid rgba(11, 187, 239, 0.35); border-radius: 999px;
  color: var(--accent); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(11, 187, 239, 0.07);
}
html[dir="rtl"] .eyebrow { letter-spacing: 0; }
.hero-title { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 800; max-width: 850px; margin: 0 auto 0.4em; }
.hero-title .grad, .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 1.2rem; max-width: 640px; margin: 0 auto 2em; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.hero-media { max-width: 940px; margin: 48px auto 0; }
.hero-media img {
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: 0 40px 90px var(--shadow-deep), var(--shadow-glow);
}

/* ---------- sections ---------- */
.section { padding: 88px 24px; max-width: 1208px; margin: 0 auto; }
.section-alt { position: relative; }
.section-alt::before {
  content: ""; position: absolute; inset: 0 -100vw;
  background-color: var(--tint);
  background-image: radial-gradient(rgba(11, 187, 239, 0.07) 1px, transparent 1.6px);
  background-size: 26px 26px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  pointer-events: none;
}
.section-alt > * { position: relative; }
.section-header { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-header .section-title { position: relative; padding-bottom: 18px; }
.section-header .section-title::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 3px; border-radius: 3px; background: var(--grad);
}
.section-sub { font-size: 1.08rem; }

/* ---------- stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px;
  max-width: 940px; margin: 0 auto;
}
.stat {
  padding: 30px 20px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.stat:hover { transform: translateY(-4px); border-color: rgba(11, 187, 239, 0.4); box-shadow: 0 14px 36px rgba(11, 187, 239, 0.14); }
.stat-value {
  font-size: 2.5rem; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { color: var(--text-dim); font-size: 0.95rem; margin-top: 6px; }

/* ---------- card grids ---------- */
/* minmax(0, 1fr): plain 1fr refuses to shrink below content min-width and
   overflows the viewport on phones (e.g. wide stat numbers). */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative; padding: 30px 26px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--grad); opacity: 0; transition: opacity 0.25s;
}
.card::after {
  content: ""; position: absolute; top: -46px; inset-inline-end: -46px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 187, 239, 0.10), transparent 68%);
  pointer-events: none;
}
/* Default elevation in light mode so cards read as layered even before hover */
html[data-theme="light"] .card,
html[data-theme="light"] .stat,
html[data-theme="light"] .step,
html[data-theme="light"] .quote,
html[data-theme="light"] .price-card {
  box-shadow: 0 6px 22px rgba(15, 26, 44, 0.06);
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(11, 187, 239, 0.5);
  box-shadow: 0 22px 54px var(--shadow-soft), 0 0 44px rgba(11, 187, 239, 0.16);
}
.card:hover::before { opacity: 1; }
.card-icon {
  width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px;
  font-size: 1.7rem; border-radius: 16px;
  background: linear-gradient(135deg, rgba(11, 187, 239, 0.16), rgba(77, 132, 226, 0.16));
  border: 1px solid rgba(11, 187, 239, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover .card-icon {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 10px 26px rgba(11, 187, 239, 0.35);
}
.card-icon svg { width: 26px; height: 26px; color: var(--accent); }
.card-title { font-size: 1.12rem; transition: color 0.2s; }

/* branded contact icons — recognizable at a glance, everywhere they appear */
a[href^="https://wa.me"] svg { color: #25D366; }
a[href^="mailto:"] svg { color: var(--accent); }
.card:hover .card-title { color: var(--accent); }
.card-text { font-size: 0.97rem; margin: 0; }
.card-text a { display: inline-block; font-weight: 600; transition: transform 0.2s ease; }
.card:hover .card-text a { transform: translateX(5px); }
html[dir="rtl"] .card:hover .card-text a { transform: translateX(-5px); }
.contact-card a { font-weight: 600; }

/* ---------- feature rows ---------- */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  padding: 34px 0;
}
.feature-row.reverse .feature-media { order: 2; }
.feature-media { position: relative; }
.feature-media::before {
  content: ""; position: absolute; inset: -10%;
  background: radial-gradient(closest-side, rgba(11, 187, 239, 0.16), transparent 74%);
  pointer-events: none;
}
.feature-media img {
  position: relative;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: 0 26px 60px var(--shadow-soft);
}
.feature-body h3 { font-size: 1.55rem; }
ul.checks { list-style: none; margin: 1.2em 0 0; padding: 0; display: grid; gap: 12px; }
ul.checks li { position: relative; padding-inline-start: 32px; color: var(--text-dim); }
ul.checks li::before {
  content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; font-size: 0.75rem; font-weight: 800; color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
}

/* ---------- pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column; padding: 36px 30px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: transform 0.25s ease, border-color 0.25s;
}
.price-card:hover {
  transform: translateY(-6px);
  border-color: rgba(11, 187, 239, 0.45);
  box-shadow: 0 24px 54px var(--shadow-soft), 0 0 40px rgba(11, 187, 239, 0.14);
}
.price-card.featured {
  background: linear-gradient(180deg, rgba(11, 187, 239, 0.08), rgba(77, 132, 226, 0.05));
  border-color: rgba(11, 187, 239, 0.5);
  box-shadow: var(--shadow-glow);
}
.ribbon {
  position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(-50%);
  padding: 4px 16px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  background: var(--grad); color: #ffffff; white-space: nowrap;
}
html[dir="rtl"] .ribbon { transform: translateX(50%); }
.plan-name { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
html[dir="rtl"] .plan-name { letter-spacing: 0; }
.price { font-size: 2.7rem; font-weight: 800; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.price-period { font-size: 0.95rem; font-weight: 500; color: var(--text-dim); margin-inline-start: 4px; }
.plan-desc { min-height: 3em; }
.plan-features { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 11px; flex: 1; }
.plan-features li { position: relative; padding-inline-start: 26px; color: var(--text-dim); font-size: 0.95rem; }
.plan-features li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--accent-3); font-weight: 800; }
.plan-cta { width: 100%; }
.plan-buy-link {
  display: block; text-align: center; margin-top: 10px;
  font-size: .88rem; font-weight: 600; color: var(--text-dim);
}
.plan-buy-link:hover { color: var(--accent); }

/* ---------- steps ---------- */
/* Floating number badges break out of the card tops; an animated gradient
   line flows through them left-to-right — data moving through the process. */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  position: relative; padding-top: 24px;
}
/* A five-step flow reads as one continuous row instead of wrapping 4 + 1.
   Scoped above the tablet breakpoint so the 2-col / 1-col rules still win
   on smaller screens (:has() out-specifies a bare .steps selector). */
@media (min-width: 1025px) {
  .steps:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
  .steps:has(> :nth-child(5)):not(:has(> :nth-child(6))) .step {
    padding-inline: 18px;
  }
}
@keyframes journey-flow {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (min-width: 1025px) {
  .steps::before {
    content: ""; position: absolute; top: 22px; left: 3%; right: 3%; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg,
      transparent, rgba(11, 187, 239, 0.65) 20%, rgba(77, 132, 226, 0.9) 50%,
      rgba(11, 187, 239, 0.65) 80%, transparent);
    background-size: 200% 100%;
    animation: journey-flow 5s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) { .steps::before { animation: none; } }
}
.step {
  position: relative; padding: 40px 24px 28px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.step:hover {
  transform: translateY(-5px);
  border-color: rgba(11, 187, 239, 0.45);
  box-shadow: 0 18px 44px var(--shadow-soft), 0 0 36px rgba(11, 187, 239, 0.12);
}
.step-num {
  position: absolute; top: -22px; inset-inline-start: 24px;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 14px; font-weight: 800; font-size: 1.2rem; color: #ffffff;
  background: var(--grad);
  box-shadow: 0 8px 22px rgba(11, 187, 239, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step:hover .step-num {
  transform: scale(1.15) rotate(-6deg);
  box-shadow: 0 12px 30px rgba(11, 187, 239, 0.55);
}
.step-title { font-size: 1.14rem; transition: color 0.2s; }
.step:hover .step-title { color: var(--accent); }
.step-text { font-size: 0.94rem; margin: 0; }
@media (max-width: 1024px) {
  /* Badge returns inline on stacked layouts (no line to align with) */
  .step { padding-top: 28px; }
  .step-num { position: static; margin-bottom: 16px; }
  .steps { padding-top: 0; }
}

/* ---------- testimonials ---------- */
.quote {
  margin: 0; padding: 30px 28px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.quote:hover { border-color: rgba(11, 187, 239, 0.4); box-shadow: 0 18px 42px var(--shadow-soft); }
.quote-text { margin: 0 0 16px; font-size: 1.02rem; color: var(--text); font-style: normal; }
.quote-text::before { content: "“"; display: block; font-size: 2.6rem; line-height: 0.6; color: var(--accent); margin-bottom: 12px; }
html[dir="rtl"] .quote-text::before { content: "”"; }
.quote-author { color: var(--text-dim); font-size: 0.92rem; font-weight: 600; }

/* ---------- team ---------- */
.person { text-align: center; }
.person-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; border: 2px solid var(--border); }
.person-name { font-weight: 700; }
.person-role { color: var(--text-dim); font-size: 0.9rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; max-width: 1060px; margin: 20px auto 90px; padding: 70px 40px;
  text-align: center; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(120deg, rgba(11, 187, 239, 0.13), rgba(77, 132, 226, 0.13) 55%, rgba(22, 65, 148, 0.1));
  border: 1px solid rgba(11, 187, 239, 0.3);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(500px 260px at 50% 0%, rgba(11, 187, 239, 0.18), transparent 70%);
  pointer-events: none;
}
/* Slow glass sheen sweeping across the CTA band */
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65%);
  background-size: 220% 100%; background-position: 130% 0;
  animation: cta-sheen 6s ease-in-out infinite;
}
@keyframes cta-sheen {
  0%, 45% { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}
@media (prefers-reduced-motion: reduce) { .cta-band::after { animation: none; } }
.cta-band > * { position: relative; }
.cta-title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.cta-band p { max-width: 520px; margin: 0 auto 1.8em; }

/* ---------- prose (legal pages) ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 1.45rem; margin-top: 2em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.6em; }
.prose ul { color: var(--text-dim); padding-inline-start: 1.4em; }
.prose li { margin-bottom: 0.4em; }

/* ---------- UI screenshots (light-mode app captures) ---------- */
/* In dark theme, invert + hue-rotate turns the light dashboard captures into a
   dark-UI look while keeping the brand blues blue. Photos are NOT tagged ui-shot. */
html[data-theme="dark"] .ui-shot {
  filter: invert(0.92) hue-rotate(187deg) saturate(1.15) contrast(0.96);
}

/* ---------- section media (centered illustration inside a section) ---------- */
.section-media { position: relative; max-width: 720px; margin: 0 auto 52px; }
.section-media::before {
  content: ""; position: absolute; inset: -8%;
  background: radial-gradient(closest-side, rgba(11, 187, 239, 0.16), transparent 74%);
  pointer-events: none;
}
/* Illustrations come with a baked-in white background; multiply dissolves the
   white into the page in light mode, and the invert+hue-rotate trick turns
   them into glowing blue-on-dark artwork in dark mode. No white boxes. */
.section-media img { position: relative; margin: 0 auto; mix-blend-mode: multiply; }
html[data-theme="dark"] .section-media img {
  mix-blend-mode: normal;
  filter: invert(0.94) hue-rotate(187deg) saturate(1.25);
}

/* ---------- CMS Kit page wrapper reset ---------- */
/* CMS Kit renders every page's content inside <abp-card> = <div class="card">
   <div class="card-body">…</div></div>. Without this reset, our .card design
   (border, radius, background, hover effects) styles that page-wide wrapper —
   it showed as a giant bordered panel around the whole page. */
.site-main > .card,
.site-main > .card:hover {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  transform: none !important;
  box-shadow: none;
  transition: none;
}
.site-main > .card::before { display: none; }
.site-main > .card > .card-body { padding: 0; }

/* ---------- 3D effects ---------- */
.hero-globe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0;
  animation: globe-fade 1.2s ease 0.2s forwards;
  /* Dissolve the sphere's silhouette: without this the crisp top edge of the
     wireframe reads like a tilted section border on wide screens. */
  -webkit-mask-image: radial-gradient(130% 105% at 50% 100%, black 70%, transparent 100%);
  mask-image: radial-gradient(130% 105% at 50% 100%, black 70%, transparent 100%);
}
@keyframes globe-fade { to { opacity: 1; } }

.tilt { will-change: transform; }
/* JS drives .tilt transforms; keep the CSS transition for smooth enter/leave */

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .site-nav > ul { gap: 18px; }
  .header-inner { gap: 28px; }
}
/* Seven root items (Resources included) plus the action cluster get tight
   before the hamburger takes over at 860px. Nav labels are nowrap, so give
   back space by closing the gaps rather than letting the row overflow. */
@media (max-width: 1100px) {
  .site-nav > ul { gap: 12px; }
  .header-inner { gap: 18px; }
  .nav-link { font-size: 0.92rem; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 30px; }
  .feature-row.reverse .feature-media { order: 0; }

  .nav-toggle { display: flex; }
  /* CRITICAL: backdrop-filter on the header makes it the containing block for
     position:fixed descendants — the fixed nav panel collapses to zero height
     inside the 72px header. Solid background on mobile instead of glass. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--nav-mobile-bg);
  }
  .site-nav {
    position: fixed; top: var(--header-h); inset-inline: 0; bottom: 0; z-index: 99;
    background: var(--nav-mobile-bg); backdrop-filter: blur(20px);
    padding: 24px; transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
    overflow-y: auto;
  }
  body.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 6px; }
  .nav-link { width: 100%; justify-content: space-between; padding: 13px 16px; font-size: 1.05rem; border-radius: 10px; }
  .nav-link::after { display: none; } /* mobile uses the pill hover, not the underline */
  .nav-link:hover, .nav-link.active { background: var(--hover-bg); }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none; display: none; padding: 0 12px;
  }
  .has-dropdown.open .dropdown { display: block; }
  .header-actions .demo-btn { display: none; } /* Login stays visible on mobile */
  .header-actions { gap: 8px; }
  .header-actions::before { display: none; }
  .brand-logo { height: 26px; }

  .hero { padding: 70px 20px 60px; }
  .section { padding: 60px 20px; }
}
@media (max-width: 560px) {
  /* Below this width the header row overflowed and carried the hamburger off
     the right edge — with .header-actions not wrapping and the page not
     scrolling sideways, the menu was simply unreachable. site.js moves the
     language and theme controls into .nav-tray inside the menu panel here;
     these rules style them there and buy back the remaining pixels. */
  .header-actions { gap: 6px; }
  .header-actions .btn-sm { padding: 0 11px; font-size: 0.85rem; }
  .brand-logo { height: 22px; }

  .nav-tray {
    display: flex; align-items: center; gap: 14px;
    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
  }
  .nav-tray .lang-switch {
    padding: 11px 16px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 1rem; text-decoration: none;
  }

  .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 22px 12px; }
  .stat-value { font-size: clamp(1.5rem, 8.5vw, 2.2rem); }
}

/* ---------- footer ---------- */
.site-footer { padding: 0 0 30px; background: var(--tint); margin-top: 30px; }
.site-footer::before { content: ""; display: block; height: 2px; background: var(--grad); opacity: 0.65; }

.footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 44px; padding-bottom: 40px; border-bottom: 1px solid var(--border);
}
.footer-cta h3 { margin: 0 0 4px; font-size: 1.35rem; }
.footer-cta p { margin: 0; font-size: 0.97rem; }

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-top: 48px; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand .brand-logo { height: 28px; }
.footer-brand p { font-size: 0.92rem; max-width: 320px; line-height: 1.75; margin-bottom: 0; }
.footer-contact { display: grid; gap: 10px; margin-top: 18px; }
.footer-contact a, .footer-contact > span {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim); font-size: 0.93rem; transition: color 0.2s;
}
.footer-contact a:hover { color: var(--accent); }
.footer-contact svg { flex: none; color: var(--accent); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 6px; }
html[dir="rtl"] .footer-col h4 { letter-spacing: 0; }
.footer-col a { color: var(--text-dim); font-size: 0.95rem; transition: color 0.2s, padding 0.2s; }
.footer-col a:hover { color: var(--accent); padding-inline-start: 5px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: 0.88rem;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- Contact form (CMS contactus pages) ---------- */
.contact-form {
  max-width: 760px; margin: 0 auto; padding: 32px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-glow);
}
.contact-form .form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.contact-form .form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.contact-form .form-grid .form-field { margin-bottom: 0; }
.contact-form .form-grid { margin-bottom: 18px; }
.contact-form label { font-size: 0.86rem; font-weight: 600; color: var(--text-dim); }
.contact-form input,
.contact-form textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--text);
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11, 187, 239, 0.18);
}
.contact-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contact-form button[type="submit"] { min-width: 190px; }
.contact-form button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }
.form-status { margin: 14px 0 0; font-size: 0.95rem; min-height: 1.4em; }
.form-status.is-success { color: #23b26d; }
.form-status.is-error { color: #e05555; }
@media (max-width: 700px) {
  .contact-form { padding: 22px 18px; }
  .contact-form .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Compact contact-info cards (below the contact form) */
.contact-mini .card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
}
.contact-mini .card-icon {
  width: 40px; height: 40px; font-size: 1.15rem;
  margin-bottom: 0; flex: none;
}
.contact-mini .card-title { font-size: 0.95rem; margin: 2px 0 4px; }
.contact-mini .card-text { font-size: 0.85rem; margin: 0; color: var(--text-dim); }
.contact-mini .mini-body { min-width: 0; }
@media (max-width: 900px) {
  .contact-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .contact-mini { grid-template-columns: minmax(0, 1fr); }
}

/* Inline SVG country flags inside contact-card icons */
.card-icon svg.flag {
  width: 26px; height: auto; display: block;
  border-radius: 4px; box-shadow: 0 0 0 1px var(--border);
}

/* AI hero paragraph sits over the dark brain model — frosted glass backdrop
   (same treatment as .btn-ghost) keeps it readable in both themes. */
.hero-sub.hero-sub-glass {
  display: inline-block;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 24px;
  color: var(--text);
}

/* Split hero (AI page, wide screens): copy on the start side, the 3D brain
   floats on its own half — no overlap, no readability tricks needed. */
@media (min-width: 900px) {
  .hero.hero-split { text-align: start; padding-inline-start: clamp(48px, 10vw, 160px); }
  .hero-split .hero-title { margin: 0 0 0.4em; max-width: 56%; }
  .hero-split .hero-sub { margin: 0 0 2em; max-width: 48%; }
  .hero-split .hero-cta { justify-content: flex-start; }
  /* the frosted panel is only needed when the brain sits behind the text */
  .hero-split .hero-sub.hero-sub-glass {
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; border-radius: 0; padding: 0; display: block; color: inherit;
  }
}

/* Kill sideways scroll from full-bleed section backgrounds (inset 0 -100vw).
   `clip` (not `hidden`) — it doesn't create a scroll container, so the
   sticky header keeps working. Fallback line first for older engines. */
html, body { overflow-x: hidden; }
html, body { overflow-x: clip; }

/* ---------- product showcase (real screenshots, tabbed) ---------- */
.shots { max-width: 1080px; margin-inline: auto; }
.shots-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 26px;
}
.shot-tab {
  border: 1px solid var(--border); background: var(--bg-card); cursor: pointer;
  padding: 9px 20px; border-radius: 999px;
  font-weight: 700; font-size: .92rem; color: var(--text-dim);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.shot-tab:hover { color: var(--text); border-color: rgba(11, 187, 239, 0.5); }
.shot-tab.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(100deg, #38d4ff 0%, #0bbbef 45%, #1d71b8 100%);
  box-shadow: 0 6px 18px rgba(11, 187, 239, 0.35);
}
.shot-frame {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-raised);
  box-shadow: 0 30px 70px var(--shadow-soft), var(--shadow-glow);
}
.shot-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  background: var(--tint);
}
.shot-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--border); }
.shot-bar span:nth-child(1) { background: #ff5f57; }
.shot-bar span:nth-child(2) { background: #febc2e; }
.shot-bar span:nth-child(3) { background: #28c840; }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-frame video { display: block; width: 100%; height: auto; background: #000; }
.shot-frame img[hidden], .shot-frame video[hidden] { display: none; }
.shot-frame { position: relative; }
.shot-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; z-index: 2;
  background: linear-gradient(135deg, #0bbbef 0%, #1d71b8 55%, #1d71b8 100%);
  box-shadow: 0 18px 44px rgba(11, 187, 239, 0.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.shot-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 22px 54px rgba(11, 187, 239, 0.6);
}
.shot-play::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid rgba(11, 187, 239, 0.55);
  animation: shot-play-pulse 2s ease-out infinite;
}
@keyframes shot-play-pulse {
  0% { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
.shot-play svg { width: 34px; height: 34px; color: #fff; margin-left: 6px; }
.shot-play[hidden] { display: none; }

/* Cinematic film band (home page): light, airy backdrop with soft cyan
   glows; the frame's halo slowly "breathes", click-to-play play button.
   Theme variables keep it correct in dark mode too. */
.film-band {
  position: relative; overflow: hidden;
  padding: 96px 22px;
  background: radial-gradient(ellipse at 50% -10%, var(--tint) 0%, var(--bg) 75%);
}
.film-band::before, .film-band::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none; opacity: .55;
}
.film-band::before { width: 480px; height: 480px; left: -140px; top: -120px; background: rgba(11, 187, 239, 0.16); }
.film-band::after { width: 520px; height: 520px; right: -160px; bottom: -180px; background: rgba(29, 113, 184, 0.14); }
.film-band-inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; text-align: center; }
.film-band .section-sub { margin-left: auto; margin-right: auto; }
.film-frame {
  position: relative; margin-top: 36px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border);
  animation: film-breathe 6s ease-in-out infinite;
}
.film-frame video { display: block; width: 100%; height: auto; background: #000; }
@keyframes film-breathe {
  0%, 100% { box-shadow: 0 0 40px rgba(11, 187, 239, 0.18), 0 30px 80px var(--shadow-soft); }
  50% { box-shadow: 0 0 90px rgba(11, 187, 239, 0.35), 0 30px 80px var(--shadow-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .film-frame { animation: none; box-shadow: 0 0 60px rgba(11, 187, 239, 0.25), 0 30px 80px var(--shadow-soft); }
}

/* Hero film overlay — appears after the camera warps into the particles */
.film-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #0d1b33 0%, #05070f 75%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .7s ease, visibility .7s ease;
}
.film-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
.film-stage {
  width: min(1080px, 88vw);
  transform: scale(.9); transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.film-overlay.show .film-stage { transform: scale(1); }
.film-stage video {
  display: block; width: 100%; height: auto; border-radius: 16px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(11, 187, 239, 0.35), 0 0 90px rgba(11, 187, 239, 0.35), 0 40px 120px rgba(0, 0, 0, 0.8);
}
.film-close {
  position: absolute; top: 26px; right: 30px;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 18px; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.film-close:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }
[dir="rtl"] .film-close { right: auto; left: 30px; }
body.film-open { overflow: hidden; }
.video-frame {
  max-width: 960px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: #000;
  box-shadow: 0 30px 70px var(--shadow-soft), var(--shadow-glow);
}
.video-frame video { display: block; width: 100%; height: auto; }
.shot-caption {
  text-align: center; color: var(--text-dim); font-size: .98rem;
  margin: 18px auto 0; max-width: 720px;
}

/* phones row (mobile app shots) */
.phones-row {
  display: flex; justify-content: center; align-items: flex-start; gap: 34px;
  flex-wrap: wrap;
}
.phone-frame {
  width: min(250px, 78vw);
  border: 1px solid var(--border); border-radius: 34px; padding: 10px;
  background: var(--bg-raised);
  box-shadow: 0 24px 54px var(--shadow-soft);
  transition: transform 0.25s ease;
}
.phone-frame:hover { transform: translateY(-6px); }
.phone-frame img { display: block; width: 100%; height: auto; border-radius: 24px; }
@media (min-width: 900px) {
  /* middle phone lifted — storefront feel */
  .phone-frame:nth-child(2) { margin-top: -22px; }
}

/* ---------- customer logo marquee (home) ---------- */
.logos-section { max-width: none; padding-inline: 0; }
.logos-section .section-header { max-width: 1208px; margin-inline: auto; padding-inline: 24px; }
.logo-marquee {
  /* logos have no reading direction — pin LTR so RTL pages lay the tracks out identically */
  direction: ltr;
  display: grid; gap: 20px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee-scroll 90s linear infinite;
}
.marquee-track.marquee-reverse { animation-direction: reverse; animation-duration: 110s; }
.logo-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; gap: 20px; padding-inline-end: 20px; }
/* Sector-grouped reference wall. Replaces the marquee on /company: a scrolling
   strip cannot carry sector headings, and a moving logo is not a click target —
   both of which the content audit asked for. .logo-chip is unchanged and works
   as an <a> just as well as a <div>. */
.logo-groups { display: flex; flex-direction: column; gap: 26px; }
.logo-sector {
  margin: 0; text-align: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.logo-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
a.logo-chip { text-decoration: none; }
a.logo-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--shadow-soft); }
@media (max-width: 560px) {
  .logo-groups { gap: 20px; }
  .logo-row { gap: 10px; }
}

.logo-chip {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 172px; height: 78px; padding: 15px 22px;
  background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 4px 14px var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.logo-chip img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transition: filter 0.25s ease;
}
.logo-chip:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 26px var(--shadow-deep), var(--shadow-glow); }
.logo-chip:hover img { filter: saturate(1.35) contrast(1.06); }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee-group[aria-hidden="true"] { display: none; }
  .logo-marquee { mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 700px) {
  .logo-chip { width: 136px; height: 64px; padding: 12px 16px; }
  .marquee-group, .logo-marquee { gap: 12px; }
  .marquee-group { padding-inline-end: 12px; }
}

/* ---------- product duo cards (home: JoTrack Fleet AI / JoTrack School) ---------- */
.product-duo { max-width: 1000px; margin-inline: auto; }
.product-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; padding: 36px 32px 30px; overflow: hidden; color: inherit;
}
.product-card:hover { color: inherit; }
.product-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad); opacity: 0.85;
}
.product-card::after {
  content: ""; position: absolute; width: 240px; height: 240px; top: -90px; inset-inline-end: -90px;
  background: radial-gradient(circle, rgba(11, 187, 239, 0.15), transparent 70%);
  pointer-events: none;
}
.product-icon {
  width: 62px; height: 62px; border-radius: 18px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(11, 187, 239, 0.16), rgba(77, 132, 226, 0.16));
  border: 1px solid rgba(11, 187, 239, 0.3); color: var(--accent);
  transition: transform 0.25s ease;
}
.product-card:hover .product-icon { transform: scale(1.07) rotate(-3deg); }
.product-icon svg { width: 30px; height: 30px; }
.product-tag {
  margin: 2px 0 -8px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
html[dir="rtl"] .product-tag { letter-spacing: 0; }
.product-name { margin: 0; font-size: 1.6rem; font-weight: 800; }
.product-card .card-text { margin: 0; }
.product-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.product-chips span {
  padding: 5px 13px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--hover-bg); border: 1px solid var(--border); color: var(--text-dim);
}
.product-cta {
  margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--accent);
  display: inline-flex; align-items: center; gap: 7px;
}
.product-cta .arrow { transition: transform 0.25s ease; }
.product-card:hover .product-cta .arrow { transform: translateX(4px); }
html[dir="rtl"] .product-card:hover .product-cta .arrow { transform: translateX(-4px); }
@media (max-width: 700px) {
  .product-card { padding: 28px 22px 24px; }
  .product-name { font-size: 1.35rem; }
}

/* ---------- demo booking (contact page two-panel layout) ---------- */
.booking-grid {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px;
  max-width: 1100px; margin-inline: auto; align-items: start;
}
.booking-form-panel {
  padding: 34px 32px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
}
.booking-form-panel .eyebrow { margin-bottom: 12px; }
.booking-title { margin: 0 0 6px; font-size: 1.7rem; font-weight: 800; }
.booking-sub { margin: 0 0 24px; color: var(--text-dim); }
.booking-form { max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.booking-form select {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--text);
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); outline: none; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.booking-form input[type="date"] { cursor: pointer; }
.booking-form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: 0.6; filter: var(--date-icon-filter, none);
}
html[data-theme="dark"] .booking-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.booking-form select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11, 187, 239, 0.18);
}

.booking-aside {
  padding: 30px 28px; border-radius: var(--radius-lg); position: relative; overflow: hidden;
  background: linear-gradient(150deg, rgba(11,187,239,0.12), rgba(77,132,226,0.12) 60%, rgba(22,65,148,0.10));
  border: 1px solid rgba(11, 187, 239, 0.3);
}
.aside-title { margin: 0 0 20px; font-size: 1.25rem; font-weight: 800; }
.expect-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 18px; }
.expect-list li { display: flex; gap: 13px; align-items: flex-start; }
.expect-check svg { width: 13px; height: 13px; color: #ffffff; }
.expect-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-size: 0.85rem; font-weight: 700;
  box-shadow: 0 3px 10px rgba(11, 187, 239, 0.35);
}
.expect-list strong { display: block; font-size: 0.98rem; margin-bottom: 2px; }
.expect-list span { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
.aside-contact { padding-top: 20px; border-top: 1px solid var(--border); }
.aside-contact p { margin: 0 0 8px; font-weight: 600; color: var(--text-dim); font-size: 0.9rem; }
.aside-contact a { display: block; font-weight: 700; margin-bottom: 4px; }
@media (max-width: 860px) {
  .booking-grid { grid-template-columns: minmax(0, 1fr); }
  .booking-form-panel { padding: 26px 20px; }
}

/* one-hour demo slots (live availability) */
.slot-hint { font-weight: 500; color: var(--text-dim); }
.slot-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  min-height: 44px;
}
.slot {
  padding: 10px 0; text-align: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-card); color: var(--text);
  font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.slot:hover:not([disabled]) { border-color: var(--accent); }
.slot.selected {
  color: #fff; border-color: transparent;
  background: linear-gradient(100deg, #38d4ff 0%, #0bbbef 45%, #1d71b8 100%);
  box-shadow: 0 6px 16px rgba(11, 187, 239, 0.35);
}
.slot[disabled] {
  cursor: not-allowed; opacity: .38; text-decoration: line-through;
}
.slot-note { grid-column: 1 / -1; color: var(--text-dim); margin: 0; align-self: center; }
@media (max-width: 560px) {
  .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- live pricing widget (editions from the host) ---------- */
.plive-toggle {
  display: flex; justify-content: center; gap: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 5px;
  width: fit-content; margin: 0 auto 30px;
}
.plive-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 26px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; color: var(--text-dim, #5a6880);
  transition: background .2s ease, color .2s ease;
}
.plive-tab.active {
  color: #fff;
  background: linear-gradient(100deg, #38d4ff 0%, #0bbbef 45%, #1d71b8 100%);
  box-shadow: 0 6px 18px rgba(11,187,239,.35);
}
.plive-controls {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; flex-wrap: wrap; margin: 0 auto 30px;
}
.plive-controls .plive-toggle, .plive-controls .plive-billing { margin: 0; }
.plive-billing {
  display: flex; justify-content: center; gap: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 5px;
  width: fit-content;
}
.plive-billing .plive-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 22px; }
.plive-save {
  background: rgba(35, 165, 90, 0.14); color: #1d8a4e;
  font-size: .72rem; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.plive-tab.active .plive-save { background: rgba(255, 255, 255, 0.22); color: #fff; }
.price-was {
  display: block; color: var(--text-dim); font-size: 1rem; font-weight: 600;
  text-decoration: line-through; line-height: 1.1; margin-bottom: 2px;
}
.plive-year-note {
  color: #1d8a4e; font-size: .85rem; font-weight: 700; margin: 4px 0 2px;
}
.plive-ai-note {
  display: inline-block; margin: 8px 0 2px;
  background: rgba(11, 187, 239, 0.1); color: var(--accent, #1d71b8);
  font-size: .78rem; font-weight: 700; padding: 4px 11px; border-radius: 999px;
}

/* Loading skeleton — ghost plan cards shimmer while the catalog loads */
.plive-skel {
  display: flex; gap: 22px; justify-content: center;
  overflow: hidden; padding: 26px 26px 24px;
}
.skel-card {
  min-width: 300px; max-width: 300px; min-height: 430px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px;
}
.skel {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, var(--tint) 25%, var(--border) 50%, var(--tint) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.3s linear infinite;
}
.skel-t { height: 15px; width: 45%; }
.skel-p { height: 34px; width: 62%; }
.skel-l { height: 11px; width: 88%; }
.skel-b { height: 42px; width: 100%; border-radius: 999px; margin-top: auto; }
@keyframes skel-shimmer { to { background-position: -200% 0; } }
@media (max-width: 1000px) { .skel-card:nth-child(n+3) { display: none; } }
.plive-fail { text-align: center; color: var(--text-dim); padding: 34px 0; font-size: .95rem; }
.plive-fail .plive-retry { margin-inline-start: 10px; }
.plive-wrap { position: relative; }
.plive-track {
  display: flex; gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 4px 22px;
  scrollbar-width: thin;
}
.plive-card {
  min-width: 300px; max-width: 300px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
/* Capacity line sits directly under the plan name — it's the "is this my
   plan?" signal, so it reads before the price rather than after it. */
.plive-cap {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  margin: 6px 0 2px;
  font-size: .95rem; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
}
.plive-cap::before {
  content: "";
  width: 17px; height: 17px; flex-shrink: 0;
  background: currentColor; color: var(--accent);
  -webkit-mask: var(--jt-veh-icon) center / contain no-repeat;
  mask: var(--jt-veh-icon) center / contain no-repeat;
}
:root {
  --jt-veh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h-2v-6l2-5h9l4 5h3a1 1 0 0 1 1 1v5h-2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E");
}
.plive-ai {
  /* the padding-box layer must be OPAQUE (it paints over the card),
     so use --bg-raised, not the translucent --bg-card */
  background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    linear-gradient(135deg, #0bbbef, #1d71b8 55%, #1d71b8) border-box;
  border: 2px solid transparent;
}
.plive-ai-badge {
  align-self: flex-start;
  margin-bottom: 10px;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(100deg, #0bbbef, #1d71b8 60%, #1d71b8);
  box-shadow: 0 4px 14px rgba(11,187,239,.35);
}
html[dir="rtl"] .plive-ai-badge { letter-spacing: 0; }
.plan-features li.feat-ai { color: var(--accent, #1d71b8); font-weight: 600; }
.plan-features li.feat-ai::before { content: "✨"; }
.plive-arrow {
  position: absolute; top: 42%; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-raised); color: var(--text);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 22px rgba(15,26,44,.14);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.plive-arrow:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(11,187,239,.3); }
.plive-prev { inset-inline-start: -14px; }
.plive-next { inset-inline-end: -14px; }
@media (max-width: 640px) {
  .plive-card { min-width: 270px; max-width: 270px; }
  .plive-arrow { display: none; } /* touch scrolling on mobile */
}

/* two-category feature lists on pricing cards */
.plive-feats-head {
  margin-top: 16px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim, #5a6880);
  border-bottom: 1px solid var(--border, rgba(15,26,44,.10));
  padding-bottom: 6px;
}
html[dir="rtl"] .plive-feats-head { letter-spacing: 0; }
/* "+ Everything in <previous plan>" ladder header */
.plive-everything {
  color: var(--accent); text-transform: none; font-size: .85rem;
  border-bottom-color: rgba(11, 187, 239, 0.35);
}
.plive-card .plan-features { margin: 12px 0 4px; flex: 0 0 auto; }
.plive-card .plan-features:last-of-type { flex: 1; }

/* ---------- pricing carousel polish ---------- */
/* cards sized so four fit cleanly and the fifth peeks (scroll affordance) */
.plive-card { min-width: 278px; max-width: 278px; position: relative; padding-top: 30px; }
.plive-track { padding: 26px 26px 24px; scroll-padding-inline: 26px; }
/* rows top-aligned — no stretched gaps between bullets */
.plive-card .plan-features { align-content: start; gap: 9px; }
/* no edge overlays — cards stay crisp; the side padding keeps the first and
   last card from ever being clipped at the scroll ends */
.plive-arrow { z-index: 3; }
/* Break the carousel out of the text column: span (almost) the viewport,
   centered, so every plan card fits on desktop without scrolling.
   RTL needs the mirrored offset — a wide block overflows LEFT there, so the
   left-based centering math shoves it off-screen. */
#pricing-live {
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(1660px, 96vw);
}
[dir="rtl"] #pricing-live { left: auto; right: 50%; transform: translateX(50%); }
#pricing-live .plive-track { justify-content: safe center; }
/* recommended ("Most popular") card */
.plive-rec {
  border-color: var(--accent, #1d71b8);
  box-shadow: 0 18px 44px rgba(11, 187, 239, 0.22);
  transform: translateY(-6px);
}
.plive-rec .ribbon { z-index: 2; }

/* pricing family switch (Business | Personal) */
.plive-family {
  display: flex; justify-content: center; gap: 8px; margin: 0 0 26px;
}
.plive-family-tab {
  padding: 9px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); font-weight: 700; font-size: 0.95rem;
  font-family: inherit; transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.plive-family-tab:hover { color: var(--text); background: var(--hover-bg); }
/* No focus ring on the family toggle — the active gradient pill is already a
   clear indicator, and the halo read as a dark rim on the blue Personal pill. */
.plive-family-tab:focus,
.plive-family-tab:focus-visible { outline: none; box-shadow: none; }
.plive-family-tab.active {
  background: var(--grad); color: #fff; border-color: transparent;
}

/* "Tap for sound" badge on muted auto-playing films */
.film-sound-badge {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 5;
  display: none; align-items: center; gap: 6px;
  padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(10, 16, 29, .72); color: #fff;
  font-family: inherit; font-size: .88rem; font-weight: 700;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: background .15s ease, transform .15s ease;
}
.film-sound-badge:hover { background: rgba(10, 16, 29, .9); transform: scale(1.04); }
.film-sound-badge.on { display: inline-flex; }

/* ═══════════════════════════════════════════════════════════════════════════
   Ported from newcontent: The Shift comparison, milestones, partner cards
   (theme-aware via the existing custom-property system)
   ═══════════════════════════════════════════════════════════════════════════ */

.shift {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: var(--radius-lg);
  margin-top: 54px; text-align: start;
  position: relative;
}
.shift > div { padding: 46px 42px; }
.shift h3 { font-size: 1.28rem; margin: 0 0 18px; }
.shift ul {
  list-style: none; display: flex; flex-direction: column; gap: 14px;
  font-size: 0.95rem; margin: 0; padding: 0;
}
.shift li { display: flex; align-items: flex-start; }
.shift li::before {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-inline-end: 12px; margin-top: -1px;
  border-radius: 50%; font-weight: 800; font-size: 0.72rem;
}
/* the "yesterday" side — clearly the losing column */
.shift .old {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
  border-inline-end: none;
}
.shift .old h3 { color: var(--text-dim); }
.shift .old li { color: var(--text-dim); }
.shift .old li::before {
  content: "\2715";
  background: rgba(226, 75, 74, 0.14);
  color: #e24b4a;
}
/* the JoTrack AI side — gradient ring, glow, lifted */
.shift .new {
  position: relative; z-index: 1;
  background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    linear-gradient(135deg, #38d4ff, #0bbbef 55%, #1d71b8) border-box;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  transform: scale(1.035);
  box-shadow:
    0 24px 70px -22px rgba(11, 187, 239, 0.45),
    0 12px 44px -16px rgba(29, 113, 184, 0.35);
}
.shift .new h3 {
  background: linear-gradient(100deg, #0bbbef, #1d71b8 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shift .new li { font-weight: 600; }
.shift .new li::before {
  content: "\2713";
  background: linear-gradient(135deg, #0bbbef, #1d71b8);
  color: #fff;
  box-shadow: 0 4px 12px rgba(11, 187, 239, 0.5);
}
/* the referee */
.shift::after {
  content: "VS";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0bbbef, #1d71b8);
  color: #fff; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.05em;
  box-shadow: 0 10px 28px rgba(11, 187, 239, 0.5);
  z-index: 2;
}
@media (max-width: 820px) {
  .shift { grid-template-columns: 1fr; gap: 18px; }
  .shift > div { padding: 28px 22px; }
  .shift .old {
    border-inline-end: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .shift .new { transform: none; }
  .shift::after { display: none; }
}

.miles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; text-align: start; }
.mile { border-inline-start: 2px solid rgba(11, 187, 239, 0.55); padding: 4px 18px; }
.mile b {
  display: block; font-size: 1.6rem; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mile i { font-style: normal; font-weight: 700; font-size: 0.9rem; display: block; margin: 2px 0 4px; }
.mile p { color: var(--text-dim); font-size: 0.82rem; line-height: 1.55; margin: 0; }
@media (max-width: 820px) { .miles { grid-template-columns: 1fr 1fr; } }

.svcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 44px; text-align: start; }
.svc {
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-card); padding: 18px 20px;
}
.svc svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.svc b { font-size: 0.92rem; display: block; }
.svc p { color: var(--text-dim); font-size: 0.8rem; margin: 3px 0 0; line-height: 1.55; }
@media (max-width: 620px) { .svcs { grid-template-columns: 1fr; } }

/* ═══ Pricing v2: stacked Personal/Business stores + billing-period bar ═══ */
.plive-sec-head {
  text-align: center; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800;
  margin: 0 0 18px;
}
.plive-sec-biz { margin-top: 64px; }
.plive-period {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin: 0 0 26px;
}
.plive-period-label { color: var(--text-dim); font-weight: 600; font-size: 0.92rem; }
.plive-period-btn {
  padding: 8px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); font-weight: 700; font-size: 0.9rem;
  font-family: inherit; transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.plive-period-btn:hover { color: var(--text); background: var(--hover-bg); }
.plive-period-btn:focus,
.plive-period-btn:focus-visible { outline: none; box-shadow: none; }
.plive-period-btn.active { background: var(--grad); color: #fff; border-color: transparent; }
.plive-save {
  color: #2fbf71; font-weight: 700; font-size: 0.85rem; margin: 2px 0 6px;
}

/* Period pricing: old monthly price struck through + billed-total line */
.price-old {
  font-size: 1.15rem; font-weight: 700; color: var(--text-dim);
  text-decoration: line-through; margin-inline-end: 8px; vertical-align: 6px;
}
.plive-billed {
  color: var(--text-dim); font-size: 0.86rem; font-weight: 600; margin: 2px 0;
}

/* Compact Personal cards (newcontent-style tiers, current theme) */
.plive-card.plive-mini {
  text-align: center; align-items: center; justify-content: flex-start;
}
.plive-card.plive-mini .plive-cap { align-self: center; margin: 6px auto 4px; }
.plive-card.plive-mini .plan-cta { margin-top: auto; }

/* ═══ Ported from newcontent: 02:47 night-shift case timeline ═══ */
.night {
  margin: 54px auto 0; max-width: 760px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-raised); padding: 40px 42px; text-align: start;
  box-shadow: 0 30px 80px -50px var(--shadow-deep);
}
.night .row { display: flex; gap: 20px; padding: 13px 0; border-bottom: 1px dashed var(--border); align-items: flex-start; }
.night .row:last-of-type { border-bottom: 0; }
.night time { flex: 0 0 66px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9rem; padding-top: 1px; }
.night .row p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.night .row p b { color: var(--text); }
.night .punch { margin-top: 22px; font-size: 1.1rem; font-weight: 800; text-align: center; }
.night .punch span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 620px) { .night { padding: 26px 20px; } }

/* /company one-pager: anchored sections land below the sticky header */
.company-part { scroll-margin-top: 96px; }

/* ═══ Ported from newcontent: gallery rows, chips, quotes, FAQ accordions ═══ */
.theme-light-only { display: none; }
html[data-theme="light"] .theme-light-only { display: block; }
html[data-theme="light"] .theme-dark-only { display: none; }

.gallery { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.gallery > span { position: relative; display: block; }
.gallery > span::before {
  content: ""; position: absolute; inset: -16px; z-index: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(11, 187, 239, 0.25), transparent 72%);
  filter: blur(28px); border-radius: 32px;
}
.gallery img {
  position: relative; z-index: 1;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(11, 187, 239, 0.28);
  box-shadow: 0 40px 90px -45px var(--shadow-deep), 0 20px 55px -22px rgba(11, 187, 239, 0.4);
  max-width: 100%;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.gallery > span:hover img {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 50px 110px -45px var(--shadow-deep), 0 28px 70px -20px rgba(11, 187, 239, 0.55);
}
.gallery .txt { text-align: start; }
.gallery .txt h3 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.gallery .txt h3::after {
  content: ""; display: block; width: 58px; height: 3px; border-radius: 2px;
  margin-top: 12px; background: linear-gradient(90deg, #0bbbef, #1d71b8);
}
.gallery .txt p { color: var(--text-dim); font-size: 0.97rem; margin: 0 0 14px; }
.gallery.flip { grid-template-columns: 1fr 1.2fr; }
.gallery.flip span { order: 2; }
@media (max-width: 820px) {
  .gallery, .gallery.flip { grid-template-columns: 1fr; }
  .gallery.flip span { order: 0; }
}

.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.quotes .qt { border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); padding: 22px 24px; text-align: start; }
.quotes .qt p { color: var(--text-dim); margin: 0 0 12px; font-size: 0.95rem; line-height: 1.65; }
.quotes .qt .by { font-size: 0.85rem; color: var(--text-dim); }
.quotes .qt .by b { color: var(--accent); }
@media (max-width: 820px) { .quotes { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; max-width: 860px; margin-inline: auto; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px;
  border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border);
  font-size: 0.9rem; font-weight: 600;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.chip:hover { transform: translateY(-3px); border-color: rgba(11, 187, 239, 0.5); box-shadow: 0 14px 30px -14px rgba(11, 187, 239, 0.55); }

.faq { max-width: 760px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 12px; text-align: start; }
.faq details { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); padding: 0 22px; transition: border-color 0.3s; }
.faq details[open] { border-color: rgba(11, 187, 239, 0.4); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 0.95rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; font-weight: 400; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--text-dim); padding: 0 0 18px; margin: 0; line-height: 1.65; }

/* Personal 1yr/2yr toggle badge */
.plive-pp-save {
  display: inline-block; margin-inline-start: 6px; padding: 2px 8px;
  border-radius: 999px; background: rgba(47, 191, 113, 0.15); color: #2fbf71;
  font-size: 0.72rem; font-weight: 700;
}
.plive-period-btn.active .plive-pp-save { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* ═══ Ported from newcontent: contact action cards (.sols/.sol) ═══ */
.sols.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .sols.cols3 { grid-template-columns: 1fr; } }
.sol {
  /* Gradient ring that follows the rounded corners + lift on hover */
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    linear-gradient(140deg, #38d4ff 0%, #0bbbef 45%, #1d71b8 100%) border-box;
  padding: 26px 24px; text-align: start;
  display: flex; flex-direction: column; gap: 11px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sol:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 54px -22px rgba(11, 187, 239, 0.5);
}
.sol .ic {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(140deg, rgba(56, 212, 255, 0.2), rgba(29, 113, 184, 0.18));
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.sol .ic svg { width: 22px; height: 22px; }
.sol .cat { color: var(--accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sol h3 { font-size: 1.35rem; margin: 0; }
.sol p { color: var(--text-dim); font-size: 0.92rem; margin: 0; flex-grow: 1; line-height: 1.6; }
.sol .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sol .tags span { border: 1px solid var(--border); background: var(--bg-card); border-radius: 999px; padding: 5px 12px; font-size: 0.75rem; color: var(--text-dim); }
.sol > a { color: var(--accent-2); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.sol > a:hover { text-decoration: underline; }

/* ── Savings calculator ────────────────────────────────────────────────────
   Inputs on the left, the figure on the right, assumptions below in plain
   sight. The assumptions are editable on purpose: a calculator that hides
   its multipliers is a sales prop, not a tool. */
.calc {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 28px;
}

.calc-inputs { display: grid; gap: 14px; }

.calc-field { display: grid; gap: 6px; }

.calc-field > span {
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted, #5a6880);
}

.calc-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid rgba(15, 26, 44, .14);
  border-radius: 12px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  background: var(--card, #fff);
  color: inherit;
}

.calc-field input:focus {
  outline: none;
  border-color: #1d71b8;
  box-shadow: 0 0 0 3px rgba(29, 113, 184, .15);
}

.calc-result {
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(29, 113, 184, .09), rgba(11, 187, 239, .07));
  border: 1.5px solid rgba(29, 113, 184, .18);
}

.calc-label {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #5a6880);
}

.calc-figure strong {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #1d71b8;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.calc-figure-sm { margin-top: 14px; }
.calc-figure-sm strong { font-size: 1.3rem; }
.calc-per { font-size: .8rem; color: var(--muted, #5a6880); }

.calc-breakdown {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 26, 44, .12);
  display: grid;
  gap: 6px;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.calc-row strong { font-weight: 700; }

.calc-assumptions {
  padding: 22px;
  border-radius: 16px;
  border: 1px dashed rgba(15, 26, 44, .22);
  margin-bottom: 28px;
}

.calc-assumptions h3 { margin: 0 0 6px; font-size: 1.05rem; }

.calc-assumption-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.calc-note {
  font-size: .84rem;
  color: var(--muted, #5a6880);
  margin: 0;
}

@media (max-width: 780px) {
  .calc { grid-template-columns: 1fr; }
}

/* ROI calculator — ported from the static proposal site
   (static.jotrack.com/roi-calculator.html) so the CMS page and the static
   prototype stay visually identical. */
/* ---------------------------------------------- ROI calculator */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

.roi-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px 28px;
}

.roi-panel h3 { margin: 0 0 6px; font-size: 19px; }

.roi-panel > p { color: var(--text-dim); font-size: 14px; margin: 0 0 24px; }

.roi-field { margin-bottom: 20px; }

.roi-field label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; font-weight: 650; margin-bottom: 9px;
}

.roi-field .roi-out {
  font-variant-numeric: tabular-nums; font-weight: 800; color: var(--accent);
}

.roi-field input[type="range"] {
  width: 100%; appearance: none; height: 5px; border-radius: 999px;
  background: var(--border); outline: none; cursor: pointer;
}

.roi-field input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 19px; height: 19px; border-radius: 50%;
  background: var(--grad); border: 2px solid var(--bg-raised); cursor: pointer;
  box-shadow: 0 3px 10px -2px rgba(11, 187, 239, .8);
}

.roi-field .roi-hint { font-size: 12px; color: var(--text-dim); margin-top: 7px; }

.roi-currency { display: flex; gap: 8px; margin-bottom: 26px; }

.roi-currency button {
  flex: 1; padding: 9px 0; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-weight: 700; font-size: 13px; transition: all .22s ease;
}

.roi-currency button.active { background: var(--grad); border-color: transparent; color: #fff; }

.roi-result {
  background: linear-gradient(160deg, rgba(11, 187, 239, .12), rgba(77, 132, 226, .05));
  border: 1px solid rgba(11, 187, 239, .3);
  border-radius: var(--radius-lg); padding: 30px 28px;
}

.roi-headline { text-align: center; padding-bottom: 24px; border-bottom: 1px solid var(--border); }

.roi-headline .rh-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim);
}

.roi-headline .rh-value {
  font-size: clamp(38px, 6vw, 56px); font-weight: 800; line-height: 1.05; margin: 8px 0 4px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums;
}

.roi-headline .rh-sub { color: var(--text-dim); font-size: 13.5px; }

.roi-lines { display: grid; gap: 2px; margin: 22px 0 4px; }

.roi-line {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}

.roi-line:last-child { border-bottom: 0; }

.roi-line .rl-name { display: flex; align-items: center; gap: 9px; }

.roi-line .rl-name em {
  font-style: normal; font-size: 11px; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}

.roi-line .rl-value { font-weight: 750; font-variant-numeric: tabular-nums; }

.roi-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); text-align: center;
}

.roi-summary div b { display: block; font-size: 22px; font-weight: 800; }

.roi-summary div span { font-size: 11.5px; color: var(--text-dim); }

.roi-cta { margin-top: 26px; display: grid; gap: 10px; }

.roi-disclaimer {
  margin-top: 18px; font-size: 12px; color: var(--text-dim);
  line-height: 1.6; border-top: 1px dashed var(--border); padding-top: 16px;
}

.roi-disclaimer b { color: #e2664f; }

in site.css hides the
   symptom by clipping, which is worse than the overflow — the content
   is simply gone. These rules let the offenders shrink instead. */
.roi > *, .roi-line > *, .mini-cta > *, .pain > *, .trust-item > * { min-width: 0; }

.roi-panel, .roi-result { padding: 24px 18px; }

.roi-line { grid-template-columns: 1fr auto; gap: 10px; }

.roi-line .rl-name { flex-wrap: wrap; }

.roi-summary { grid-template-columns: 1fr; gap: 16px; }

@media (max-width: 900px) { .roi { grid-template-columns: 1fr; } }

@media (max-width: 620px) {
  .roi-cta .btn,
  .cta-duo .btn,
  .mini-cta .btn,
  .hero-cta .btn,
  .sandbox-ask .sb-q {
    white-space: normal;
    text-align: center;
  }
  .roi-panel, .roi-result { padding: 24px 18px; }
  .roi-line { grid-template-columns: 1fr auto; gap: 10px; }
  .roi-line .rl-name { flex-wrap: wrap; }
  .roi-summary { grid-template-columns: 1fr; gap: 16px; }
  .sb-msg { max-width: 96%; }
}

/* ── AI assistant demo (/ai-demo) ─────────────────────────────────────────
   Deliberately shaped like the real in-app assistant rather than a generic
   chat mock: brand-blue header bar with a status pill, bot replies on a card
   background with a hairline border, user turns tinted with the accent and
   right-aligned, and a composer strip pinned to the bottom. A visitor who
   later sees the product should recognise this screen.
   Namespaced .jtd-* so it cannot collide with the marketing components. */
.jtd-shell {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: 0 24px 60px var(--shadow-deep);
  overflow: hidden;
}

.jtd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--grad);
  color: #fff;
}
.jtd-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jtd-brand-mark {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .25);
}
.jtd-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.jtd-brand-text b { font-size: 14.5px; font-weight: 600; }
.jtd-brand-text small { font-size: 12px; opacity: .85; }

.jtd-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
}
.jtd-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ecf8e;
  box-shadow: 0 0 0 3px rgba(62, 207, 142, .25);
}

.jtd-log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
  min-height: 260px;
  max-height: 460px;
  overflow-y: auto;
}

.jtd-msg { display: flex; gap: 10px; max-width: 86%; }
.jtd-msg.user { margin-inline-start: auto; flex-direction: row-reverse; }

.jtd-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
}
.jtd-msg.user .jtd-avatar { background: var(--hover-bg); color: var(--text-dim); }

/* Bot on card, user tinted with the accent — the same read as the product. */
.jtd-bubble {
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 14px;
  line-height: 1.6;
}
.jtd-bubble p { margin: 0; }
.jtd-bubble p + p { margin-top: 8px; }
.jtd-msg.user .jtd-bubble {
  background: rgba(11, 187, 239, .10);
  border-color: rgba(11, 187, 239, .28);
}

.jtd-table { width: 100%; border-collapse: collapse; margin-top: 11px; font-size: 13px; }
.jtd-table th {
  text-align: start;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-weight: 500;
}
.jtd-table td { padding: 6px 0; border-bottom: 1px solid var(--border); }

.jtd-bars { display: grid; gap: 7px; margin-top: 11px; }
.jtd-bar-row {
  display: grid;
  grid-template-columns: 82px 1fr 34px;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
}
.jtd-bar { display: block; height: 7px; border-radius: 999px; background: var(--grad); }

.jtd-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.jtd-chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.jtd-chip:hover { border-color: var(--accent); color: var(--accent); }

.jtd-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--tint);
}
.jtd-q {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.jtd-q:hover { border-color: var(--accent); transform: translateY(-1px); }
.jtd-q[disabled] { opacity: .35; cursor: default; transform: none; }

/* Decorative composer: it makes the panel read as the product rather than a
   transcript. Not focusable, since there is no live model behind it. */
.jtd-composer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.jtd-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 13px;
}
.jtd-send {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: var(--grad);
  opacity: .55;
  cursor: default;
}

.jtd-foot {
  max-width: 640px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}

.jtd-typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.jtd-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: jtdBlink 1s infinite ease-in-out;
}
.jtd-typing i:nth-child(2) { animation-delay: .2s; }
.jtd-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes jtdBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

@media (max-width: 640px) {
  .jtd-msg { max-width: 96%; }
  .jtd-suggest .jtd-q { width: 100%; text-align: start; }
  .jtd-bar-row { grid-template-columns: 68px 1fr 30px; }
}

/* ── Resources hub (/resources) ───────────────────────────────────────────
   Ported from the static prototype. Cards are NOT links here: none of the
   articles are written yet, so a clickable card would be a dead link on a
   customer-facing site. They render as static cards carrying an explicit
   "coming soon" state until real content exists — at which point each becomes
   an <a class="res-card"> and the hover lift below starts applying. */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 940px) { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .res-grid { grid-template-columns: 1fr; } }

.res-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  transition: transform .28s ease, border-color .28s ease;
}
/* Only real links lift — a static card that moves implies it is clickable. */
a.res-card:hover { transform: translateY(-4px); border-color: rgba(11, 187, 239, .45); }

.res-kind {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
}
.res-card h3 { margin: 0; font-size: 16.5px; line-height: 1.4; }
.res-card p { margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }

.res-meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
/* The status word carries the honesty of the page, so it reads as a badge
   rather than as incidental metadata. */
.res-soon {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--tint);
  font-size: 11px;
}

/* ── Product-tour tabs inside the intro overlay ───────────────────────────
   "Watch the intro" warps through the hero particles into this overlay. It
   now carries the whole tour, so one click can reach live tracking, the
   assistant, the dashboard and reports — without leaving the page or
   scrolling to a section. Styled on the dark overlay ground, not the page. */
.film-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.film-tab {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #cfe0f5;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}
.film-tab:hover {
  border-color: rgba(11, 187, 239, .55);
  color: #fff;
  transform: translateY(-1px);
}
.film-tab.active {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}
.film-caption {
  margin: 14px auto 0;
  max-width: 680px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: #93a0b8;
}

@media (max-width: 640px) {
  /* Six labels will not fit across a phone; scroll them horizontally rather
     than stacking six full-width rows and pushing the video off-screen. */
  .film-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .film-tabs::-webkit-scrollbar { display: none; }
  .film-tab { flex: 0 0 auto; font-size: 12.5px; padding: 7px 12px; }
  .film-caption { font-size: 12.5px; }
}

/* ── Outcome numbers + customer-result cards ──────────────────────────
   Ported from the static prototype. The SAMPLE ribbons, the "placeholder"
   source lines and the prototype note are part of the design ON PURPOSE:
   the figures are illustrative until the case-study programme produces
   attributable ones, and stripping the markers would turn placeholders into
   claims a buyer could hold us to. */
.outcome {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 22px;
  position: relative; overflow: hidden;
}

.outcome::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 3px; height: 100%; background: var(--grad);
}

.outcome .o-value {
  font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.05;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.outcome .o-label { font-weight: 700; margin: 8px 0 4px; font-size: 15px; }

.outcome .o-note { color: var(--text-dim); font-size: 13px; line-height: 1.5; }

.outcome .o-src {
  display: block; margin-top: 10px; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim); opacity: .65;
}

.cs-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px; text-decoration: none; color: inherit;
  transition: transform .28s ease, border-color .28s ease;
}

.cs-card:hover { transform: translateY(-4px); border-color: rgba(11, 187, 239, .45); }

.cs-sector {
  font-size: 11px; text-transform: uppercase; letter-spacing: .11em;
  font-weight: 800; color: var(--accent);
}

.cs-card h3 { font-size: 17.5px; margin: 0; line-height: 1.35; }

.cs-card > p { color: var(--text-dim); font-size: 14px; margin: 0; line-height: 1.6; }

.cs-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding-top: 16px; border-top: 1px solid var(--border); margin-top: auto;
}

.cs-metrics div b {
  display: block; font-size: 21px; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cs-metrics div span {
  display: block; font-size: 11px; color: var(--text-dim); line-height: 1.35; margin-top: 3px;
}

.sample-ribbon {
  position: absolute; top: 14px; inset-inline-end: 14px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(226, 102, 79, .14); color: #e2664f;
  border: 1px solid rgba(226, 102, 79, .34);
}

.changed {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(11, 187, 239, .35);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 16px;
}

@media (max-width: 900px) { .outcomes { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 520px) { .outcomes { grid-template-columns: 1fr; } }

@media (max-width: 940px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 620px) { .cs-grid { grid-template-columns: 1fr; } }

/* The two CONTAINER grids. These were missed when the child rules were ported
   (the extractor anchored on line-start and both selectors sit behind a
   comment), so the cards stacked full-width instead of laying out in a row. */
.outcomes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) {
  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .cs-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .outcomes { grid-template-columns: 1fr; }
  .cs-grid  { grid-template-columns: 1fr; }
}

/* ── Sector / icon cards ──────────────────────────────────────────────────
   One card style shared by the Industries page and the customer-results row
   on the home page: rounded icon tile in the brand gradient, title, a single
   line of copy, then a quiet link rule. Replaces the metric-heavy card, which
   read as a claim when the underlying figures are still placeholders. */
.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 940px) { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sector-grid { grid-template-columns: 1fr; } }

.sector-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  transition: transform .28s ease, border-color .28s ease;
}
a.sector-card:hover { transform: translateY(-4px); border-color: rgba(11, 187, 239, .45); }

.sector-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--grad);
  color: #fff;
  flex: none;
}
.sector-icon svg { width: 22px; height: 22px; }

.sector-card h3 { margin: 0; font-size: 17.5px; line-height: 1.35; }
.sector-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }

.sector-link {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
}

/* The calculator prompt sits inside a .section (60px padding) AND is a
   .cta-band (70px of its own) — 260px of vertical air around three short
   lines. Tighten the band when it is nested in a section; the page-closing
   cta-band, which is a direct child of <body> flow, keeps its full height. */
.section > .cta-band { padding: 40px 36px; }
@media (max-width: 640px) { .section > .cta-band { padding: 30px 20px; } }

/* ── Industry landing pages ───────────────────────────────────────────────
   Ported with the pages from the static prototype. Selectors are taken
   verbatim so the CMS pages render exactly as the prototype did. */
.hero-trust {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
  margin-top: 22px; color: var(--text-dim); font-size: 13.5px;
}

.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }

.hero-trust svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }

.pain-col { padding: 30px 28px; }

.pain-col.problem { background: var(--tint); }

.pain-col.answer { background: linear-gradient(180deg, rgba(11, 187, 239, .07), transparent); }

.pain-col h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 18px; color: var(--text-dim);
}

.pain-col.answer h3 { color: var(--accent); }

.pain-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }

.pain-col li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.6px; line-height: 1.6;
}

.pain-col li svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; }

.pain-col.problem li svg { color: #e2664f; }

.pain-col.answer li svg { color: var(--accent); }

.pain-col li b { display: block; margin-bottom: 2px; }

.pain-col li span { color: var(--text-dim); }

/* ---------------------------------------------- shared bits */
.crumbs { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }

.crumbs a { color: var(--text-dim); text-decoration: none; }

.crumbs a:hover { color: var(--accent); }



/* The .pain container itself — my extractor matched .pain-col but not the bare
   .pain selector, so the two-column "today vs with JoTrack" comparison
   rendered as a single stacked block. */
.pain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 860px) { .pain { grid-template-columns: 1fr; } }

/* The calculator prompt still sat in ~120px of dead space: its own .section
   contributes 60px top and bottom, ON TOP of the 60px the preceding section
   already leaves. Tightening the band's wrapper — not the band — closes the
   gap without shrinking the card. :has() is used because the CMS emits a plain
   "section reveal" with nothing to target it by. */
.section:has(> .cta-band) { padding-top: 16px; padding-bottom: 16px; }
@media (max-width: 640px) { .section:has(> .cta-band) { padding-top: 8px; padding-bottom: 8px; } }

/* ── Dropdown polish ──────────────────────────────────────────────────────
   min-width:220px was set when items were short ("Pricing", "Process"); the
   sector names wrap onto two lines inside it, which reads as a cramped list
   rather than a menu. Let the panel size to its longest label instead, and
   give each row a hover affordance that moves. */
.dropdown {
  min-width: max-content;          /* one line per item, panel sizes to fit */
  padding: 10px;
}
.dropdown a {
  white-space: nowrap;
  padding: 10px 14px;
  font-weight: 500;
  transition: background .16s ease, color .16s ease, padding-inline-start .16s ease;
}
/* A small inward nudge on hover reads as "this row is the target" without
   needing an icon column. */
.dropdown a:hover,
.dropdown a.active {
  padding-inline-start: 20px;
  color: var(--text);
  background: var(--hover-bg);
}

/* On mobile the dropdown is a stacked in-flow list, so nowrap would overflow
   the viewport — restore wrapping and full width there. */
@media (max-width: 860px) {
  .dropdown { min-width: 0; padding: 0 12px; }
  .dropdown a { white-space: normal; }
  .dropdown a:hover, .dropdown a.active { padding-inline-start: 14px; }
}

/* Prototype note on the customer-results page — the SAMPLE ribbons and this
   caveat are load-bearing: the figures are illustrative until the case-study
   programme produces attributable ones. */
.cs-note {
  border: 1px dashed rgba(226, 102, 79, .5); border-radius: var(--radius);
  background: rgba(226, 102, 79, .06); padding: 20px 24px; margin-top: 28px;
  font-size: 14px; color: var(--text-dim); line-height: 1.65;
}

.cs-note b { color: #e2664f; }

/* --- Device-store cart button in the header ------------------------------ */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: color .2s, border-color .2s;
}
.cart-link:hover { color: var(--accent); border-color: var(--accent); }
.cart-link.has-items { color: var(--text); }
.cart-count {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #04222e;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* The header is already crowded; the orders link is secondary to Login and to
   the demo CTA, so it steps aside first as the viewport narrows. */
@media (max-width: 1100px) {
  .orders-btn { display: none; }
}

/* --- Signed-in account menu (header) ------------------------------------- */
.account-menu { position: relative; }

.account-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.account-avatar:hover { border-color: var(--accent); color: var(--accent); }

.account-dropdown {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 10px);
  min-width: 190px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .5);
  display: none;
  z-index: 60;
}
.account-menu.is-open .account-dropdown { display: block; }

.account-dropdown a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .92rem;
  color: var(--text-dim);
  text-decoration: none;
}
.account-dropdown a:hover { background: var(--hover-bg, rgba(128,140,160,.12)); color: var(--text); }

.account-name {
  display: block;
  padding: 6px 12px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
  font-weight: 650;
  color: var(--text);
}


/* ═══ Plan comparison table (audit P1 §6) ════════════════════════════════
   Rendered by site.js from /api/public-pricing so it tracks the real
   catalogue. Wide by nature: it scrolls inside its own container rather
   than making the page scroll sideways, and the feature column stays put
   while you scroll — a tick means nothing once its row label is gone. */
.pc-tabs {
  display: flex; justify-content: center; gap: 6px; margin: 0 0 22px;
  background: var(--hover-bg); border-radius: 999px; padding: 5px;
  width: fit-content; margin-inline: auto;
}
.pc-tab {
  border: 0; background: none; cursor: pointer; padding: 9px 26px;
  border-radius: 999px; font: inherit; font-weight: 700; font-size: .92rem;
  color: var(--dim); transition: background .18s, color .18s;
}
.pc-tab:hover { color: var(--text); }
.pc-tab.is-on { background: var(--card); color: var(--accent); box-shadow: 0 2px 8px rgba(15,26,44,.10); }

.pc-hint { display: none; text-align: center; color: var(--dim); font-size: .84rem; margin: 0 0 10px; }
.pc-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: 16px; background: var(--card);
  box-shadow: 0 18px 44px rgba(15,26,44,.06);
}
.pc-table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 720px; }
.pc-table th, .pc-table td { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--border); }
.pc-table tbody tr:last-child th, .pc-table tbody tr:last-child td { border-bottom: 0; }
.pc-table tbody tr:hover td, .pc-table tbody tr:hover th { background: rgba(29,113,184,.035); }

/* Feature column pinned so the labels survive horizontal scrolling. */
.pc-table th[scope="row"], .pc-table th.pc-corner {
  position: sticky; inset-inline-start: 0; z-index: 2;
  text-align: start; font-weight: 500; color: var(--text);
  background: var(--card); min-width: 210px;
}
.pc-table th.pc-corner { z-index: 3; }

/* .pc-table th sets padding (0,1,1) and outranks a bare .pc-head (0,1,0),
   so the badge clearance has to be written at matching specificity. */
.pc-table th.pc-head {
  background: var(--hover-bg); font-weight: 800; font-size: .95rem;
  white-space: nowrap; position: relative; padding-top: 34px;
}
.pc-badge {
  position: absolute; top: 7px; inset-inline-start: 50%; transform: translateX(-50%);
  background: var(--grad, linear-gradient(100deg,#0bbbef,#1d71b8)); color: #fff;
  font-size: .64rem; font-weight: 800; letter-spacing: .04em;
  padding: 2px 10px; border-radius: 999px; white-space: nowrap;
}
[dir="rtl"] .pc-badge { transform: translateX(50%); }

/* The recommended tier reads as a column, not a set of unrelated cells. */
.pc-star { background: rgba(29,113,184,.06); }
.pc-table thead th.pc-star { background: rgba(29,113,184,.13); }

.pc-key td, .pc-key th[scope="row"] { background: rgba(15,26,44,.025); font-weight: 700; }
.pc-key td.pc-star { background: rgba(29,113,184,.09); }
.pc-price td b { font-size: 1.22rem; }
.pc-price td small { display: block; font-weight: 500; color: var(--dim); font-size: .72rem; }
.pc-qty td { font-weight: 600; }
.pc-yes { color: #1d7a45; font-weight: 800; font-size: 1.02rem; }
.pc-no  { color: var(--dim); opacity: .45; }
.pc-cta td { padding-top: 18px; padding-bottom: 20px; }
.pc-note { margin: 16px 0 0; color: var(--dim); font-size: .85rem; text-align: center; }

@media (max-width: 860px) {
  .pc-hint { display: block; }
  .pc-table th, .pc-table td { padding: 11px 12px; }
  .pc-table th[scope="row"], .pc-table th.pc-corner { min-width: 165px; }
}

/* ═══ School journey strip (audit P1 §3) ═════════════════════════════════
   Six steps, horizontal on desktop and vertical on mobile, as specified.
   The connecting line is drawn between steps rather than under them, so it
   never dangles past the last card. */
.jsj { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.jsj-step { position: relative; padding: 0 14px; text-align: center; }
.jsj-step::before {
  content: ""; position: absolute; top: 21px; inset-inline-start: -50%;
  width: 100%; height: 2px; background: var(--border);
}
.jsj-step:first-child::before { display: none; }
.jsj-num {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--grad, linear-gradient(100deg,#0bbbef,#1d71b8));
  color: #fff; font-weight: 800; font-size: .92rem;
}
.jsj-title { margin: 0 0 6px; font-size: 1rem; font-weight: 700; }
.jsj-text { margin: 0; color: var(--dim); font-size: .87rem; line-height: 1.55; }

@media (max-width: 1024px) { .jsj { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .jsj-step:nth-child(3n+1)::before { display: none; } }
@media (max-width: 640px) {
  .jsj { grid-template-columns: 1fr; row-gap: 0; }
  .jsj-step { display: grid; grid-template-columns: 42px 1fr; gap: 0 16px;
              text-align: start; padding: 0 0 26px; }
  .jsj-step::before { display: none; }
  /* vertical rail instead of the horizontal one */
  .jsj-step:not(:last-child)::after {
    content: ""; position: absolute; inset-inline-start: 20px; top: 46px;
    bottom: 0; width: 2px; background: var(--border);
  }
  .jsj-num { margin: 0; grid-row: span 2; }
  .jsj-title { grid-column: 2; }
  .jsj-text { grid-column: 2; }
}