/* =========================================================
   PackTrack — Brand Site (v2 condensed copy build)
   One dark base. Section rhythm via overlays + cards + glow.
   Mobile is the default canvas: each section's idea reads
   within ~1 viewport on phones.
   ========================================================= */

:root {
  --bg:           #0a0e0d;
  --bg-2:         #0c1413;
  --bg-3:         #0e1b19;
  --bg-4:         #112723;
  --pure:         #060606;

  --teal:         #00e0c2;
  --teal-light:   #1ff5d8;
  --teal-deep:    #00b89e;
  --teal-glow:    rgba(0, 224, 194, 0.28);
  --teal-soft:    rgba(0, 224, 194, 0.10);

  --blue:         #2aa6d6;
  --blue-light:   #4cc4ee;
  --blue-deep:    #1b85af;
  --blue-glow:    rgba(42, 166, 214, 0.35);
  --blue-soft:    rgba(42, 166, 214, 0.10);
  --blue-border:  rgba(42, 166, 214, 0.22);

  --warn:         #f5b042;
  --bad:          #ff6b6b;

  --ink:          #ffffff;
  --ink-muted:    #b6cfc9;
  --ink-faint:    #6f8a86;
  --ink-dark:     #051a18;

  --border:       rgba(0, 224, 194, 0.18);
  --border-soft:  rgba(255, 255, 255, 0.06);

  --radius:       16px;
  --radius-lg:    22px;

  --shadow-card:  0 24px 60px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-glow:  0 0 60px rgba(0, 224, 194, 0.14);

  --container:    1200px;
  --pad:          clamp(20px, 4vw, 56px);
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { padding: 0; margin: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  position: relative;
  z-index: 2;
}

/* ============ TYPE ============ */
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: clamp(40px, 5.2vw, 68px); font-weight: 900; line-height: 1.0; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.4vw, 44px); }
h3 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.015em; }
p  { margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 4px 0;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex-shrink: 0;
}
.eyebrow--teal { color: var(--teal); }
.eyebrow--blue { color: var(--blue-light); }

.accent {
  background: linear-gradient(135deg, var(--teal-light) 0%, var(--teal-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--teal);
}
.accent-blue { color: var(--blue-light); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: transform .15s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn--lg { padding: 16px 28px; font-size: 15px; }

.btn--primary {
  position: relative;
  background: var(--teal);
  color: var(--ink-dark);
  isolation: isolate;
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--teal);
  filter: blur(18px);
  opacity: 0.32;
  z-index: -1;
  transition: opacity .2s ease, filter .2s ease;
}
.btn--primary:hover { background: var(--teal-light); transform: translateY(-2px); }
.btn--primary:hover::before { opacity: 0.52; filter: blur(24px); }

.btn--blue {
  position: relative;
  background: #1778a8; /* darkened from --blue #2aa6d6 for WCAG AA contrast (4.9:1 on white) */
  color: #ffffff;
  isolation: isolate;
}
.btn--blue::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--blue);
  filter: blur(18px);
  opacity: 0.32;
  z-index: -1;
  transition: opacity .2s ease;
}
.btn--blue:hover { background: #156d97; transform: translateY(-2px); }
.btn--blue:hover::before { opacity: 0.6; }

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: rgba(10, 14, 13, 0.78);
  border-bottom: 1px solid var(--border-soft);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__logo img { height: 26px; }
.nav__links { display: flex; gap: 24px; margin-left: 20px; }
.nav__links a {
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color .15s ease;
  padding: 4px 0;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--teal); }
.nav__links a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}
.nav__cta { margin-left: auto; padding: 11px 18px; font-size: 13.5px; }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.04);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;   /* pin hamburger to the far right on mobile */
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.nav__toggle:hover { border-color: var(--teal); background: var(--teal-soft); }
.nav__toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .15s ease;
  transform-origin: center;
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer */
.nav__drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: rgba(10, 14, 13, 0.97);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--border-soft);
  padding: 16px var(--pad) 22px;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  z-index: 99;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}
.nav__drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  display: flex;
}
.nav__drawer-link {
  display: block;
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border-soft);
  transition: color .15s ease, padding-left .15s ease;
}
.nav__drawer-link:hover { color: var(--teal); padding-left: 8px; }
.nav__drawer-cta { margin-top: 14px; width: 100%; justify-content: center; }

@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}

/* ============ SECTION SHELL ============ */
.section { padding: clamp(56px, 6vw, 88px) 0; position: relative; overflow: hidden; }
.section__head { max-width: 740px; margin: 0 auto clamp(36px, 4vw, 56px); text-align: center; }
.section__head .eyebrow { margin-bottom: 14px; }
.section__title { margin-bottom: 16px; }
.section__lede { font-size: clamp(15px, 1.2vw, 17px); color: var(--ink-muted); max-width: 640px; margin: 0 auto; line-height: 1.6; }
.section__lede strong { color: var(--ink); }

/* Pattern asset — ambient texture */
.bg-pattern {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  object-fit: cover;
  opacity: 0.06;
}
.bg-pattern--hero  { object-position: right center; mask-image: radial-gradient(ellipse 50% 60% at 80% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 50% 60% at 80% 50%, black 0%, transparent 75%); }
.bg-pattern--proof { object-position: left center;  opacity: 0.07; mask-image: radial-gradient(ellipse 50% 60% at 20% 50%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 50% 60% at 20% 50%, black 0%, transparent 70%); }
.bg-pattern--book  { object-position: right center; opacity: 0.06; mask-image: radial-gradient(ellipse 50% 60% at 80% 50%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 50% 60% at 80% 50%, black 0%, transparent 70%); }
@media (max-width: 880px) { .bg-pattern { display: none; } }

/* Inter-section nudge — quiet beat, never a button */
.nudge {
  text-align: center;
  font-size: 14px;
  color: var(--ink-faint);
  margin-top: clamp(36px, 4vw, 52px);
  letter-spacing: 0.01em;
}
.nudge a {
  color: var(--teal);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.nudge a:hover { border-color: var(--teal); }

/* ============ HERO ============ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(50px, 6vw, 86px) 0 clamp(64px, 7vw, 100px);
  background:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(0, 224, 194, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(0, 224, 194, 0.04), transparent 60%);
  isolation: isolate;
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; }
.hero__glow--1 { top: -10%; right: 10%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(0, 224, 194, 0.16), transparent 70%); }
.hero__glow--2 { bottom: -10%; left: -10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(0, 224, 194, 0.10), transparent 70%); }

.hero__inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  width: 100%;
}
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: 2; min-height: 300px; }
}
.hero__copy .eyebrow { margin-bottom: 22px; }
.hero__title { margin-bottom: 24px; max-width: 660px; }
.hero__title .accent { display: block; margin-top: 10px; }
.hero__sub {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-muted);
  max-width: 540px;
  margin-bottom: 30px;
  line-height: 1.6;
}
.hero__sub strong { color: var(--ink); }
.hero__note {
  font-size: clamp(13px, 1.05vw, 14.5px);
  color: var(--ink-faint);
  max-width: 640px;
  margin: -18px 0 30px;
  line-height: 1.6;
  text-wrap: balance;
}
.hero__cta-wrap { display: flex; flex-direction: column; gap: 12px; margin-bottom: 34px; align-items: flex-start; }
.hero__vibe { font-size: 13px; color: var(--ink-faint); font-style: italic; max-width: 380px; }

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 224, 194, 0.04);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.hero__pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); }

/* HERO ORB */
.hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; }
.hero__orb { position: relative; width: clamp(280px, 34vw, 440px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.hero__orb-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(0, 224, 194, 0.28); inset: 0; animation: spin 60s linear infinite; }
.hero__orb-ring--2 { inset: 12%; border-style: solid; border-color: rgba(0, 224, 194, 0.16); animation-duration: 90s; animation-direction: reverse; }
.hero__orb-ring--3 { inset: 24%; border-color: rgba(0, 224, 194, 0.4); animation-duration: 40s; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__orb-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 14px var(--teal); }
.hero__orb-dot--a { top: -4.5px; left: 50%; transform: translateX(-50%); }
.hero__orb-dot--b { bottom: -4.5px; left: 50%; transform: translateX(-50%); }
.hero__orb-dot--c { top: 50%; right: -4.5px; transform: translateY(-50%); }

.hero__orb-core {
  position: relative;
  z-index: 3;
  width: 42%; height: 42%;
  background: radial-gradient(circle at 30% 30%, var(--bg-4) 0%, var(--bg-3) 60%, var(--bg) 100%);
  border: 2px solid var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(0, 224, 194, 0.5), inset 0 0 30px rgba(0, 224, 194, 0.18), inset 0 0 0 1px rgba(0, 224, 194, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulseGlow 3.5s ease-in-out infinite alternate;
}
@keyframes pulseGlow {
  from { box-shadow: 0 0 60px rgba(0, 224, 194, 0.5), inset 0 0 30px rgba(0, 224, 194, 0.18), inset 0 0 0 1px rgba(0, 224, 194, 0.4); }
  to   { box-shadow: 0 0 110px rgba(0, 224, 194, 0.8), inset 0 0 40px rgba(0, 224, 194, 0.28), inset 0 0 0 1px rgba(0, 224, 194, 0.6); }
}
.hero__orb-icon { width: 56%; height: auto; filter: drop-shadow(0 0 14px rgba(0, 224, 194, 0.7)); }
.hero__orb-badge {
  position: absolute;
  top: -10px; right: 50%;
  transform: translateX(50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--teal);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  z-index: 4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.hero__orb-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero__chip {
  position: absolute;
  background: var(--bg-3);
  border: 1px solid var(--teal);
  color: var(--ink);
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  animation: float 4s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero__chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.hero__chip--1 { top: 2%; left: -2%; animation-delay: 0s; }
.hero__chip--2 { top: 22%; right: -8%; animation-delay: 1s; }
.hero__chip--3 { bottom: 22%; right: -4%; animation-delay: 2s; }
.hero__chip--4 { bottom: 4%; left: -8%; animation-delay: 3s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ============ PROBLEM — audience split ============ */
.problem { background: transparent; }
.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 800px) { .audience { grid-template-columns: 1fr; } }

.aud-card {
  position: relative;
  padding: clamp(26px, 3vw, 38px);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.aud-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.aud-card--floor::before { background: linear-gradient(90deg, var(--teal), transparent); }
.aud-card--checks::before { background: linear-gradient(90deg, var(--blue), transparent); }
.aud-card--floor { background: linear-gradient(180deg, rgba(0,224,194,0.05), var(--bg-3) 40%); }
.aud-card--checks { background: linear-gradient(180deg, rgba(42,166,214,0.05), var(--bg-3) 40%); border-color: var(--blue-border); }

.aud-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.aud-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.aud-card__icon svg { width: 26px; height: 26px; }
.aud-card--floor .aud-card__icon { background: var(--teal-soft); border: 1px solid var(--border); color: var(--teal); }
.aud-card--checks .aud-card__icon { background: var(--blue-soft); border: 1px solid var(--blue-border); color: var(--blue-light); }
.aud-card__tag { font-size: clamp(17px, 1.7vw, 20px); font-weight: 800; letter-spacing: -0.02em; }

.aud-card__lede { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.aud-card--floor .aud-card__lede { color: var(--teal); }
.aud-card--checks .aud-card__lede { color: var(--blue-light); }

.aud-card__list { flex: 1; margin-bottom: 18px; }
.aud-card__list li {
  position: relative;
  padding: 11px 0 11px 24px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.45;
  border-top: 1px solid var(--border-soft);
}
.aud-card__list li:first-child { border-top: 0; padding-top: 4px; }
.aud-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 18px;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.aud-card__list li:first-child::before { top: 11px; }
.aud-card--floor .aud-card__list li::before { background: var(--teal); box-shadow: 0 0 8px var(--teal-glow); }
.aud-card--checks .aud-card__list li::before { background: var(--blue-light); box-shadow: 0 0 8px var(--blue-glow); }

.aud-card__kicker {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.aud-card__kicker--proof { color: var(--ink-muted); font-weight: 500; }
.aud-card__kicker--proof a { color: var(--blue-light); font-weight: 700; white-space: nowrap; }

.problem__quote {
  text-align: center;
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 720px;
}
.problem__quote p {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* ============ DIFFERENT ============ */
.different { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 224, 194, 0.04), transparent 60%); }
.different__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 28px; }
@media (max-width: 880px) { .different__grid { grid-template-columns: 1fr; } }

.diff-card {
  position: relative;
  padding: clamp(26px, 3vw, 38px);
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.diff-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(0,224,194,0.08), transparent 60%); pointer-events: none; }
.diff-card--blue { border-color: var(--blue-border); }
.diff-card--blue::before { background: radial-gradient(circle at top right, rgba(42,166,214,0.10), transparent 60%); }
.diff-card__num-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; position: relative; }
.diff-card__num { width: 48px; height: 48px; border-radius: 12px; background: var(--teal); color: var(--ink-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; box-shadow: 0 8px 24px rgba(0,224,194,0.24); }
.diff-card__num--blue { background: var(--blue); color: var(--ink); box-shadow: 0 8px 24px rgba(42,166,214,0.4); }
.diff-card__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(0,224,194,0.08); border: 1px solid var(--border); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; }
.diff-card--blue .diff-card__icon { background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue-light); }
.diff-card__icon svg { width: 26px; height: 26px; }
.diff-card h3 { margin-bottom: 14px; font-size: clamp(20px, 1.9vw, 24px); position: relative; line-height: 1.2; }
.diff-card p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; position: relative; }
.diff-card p em { color: var(--teal); font-style: normal; font-weight: 600; }
.diff-card--blue p em { color: var(--blue-light); }
.diff-card__punch {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.diff-card__punch--blue { color: var(--ink) !important; }

/* vs ERP callout */
.erp-callout {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 30px);
  background: linear-gradient(135deg, var(--bg), var(--bg-3));
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
}
.erp-callout__label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 6px 12px;
  background: var(--teal-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.erp-callout p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; }
.erp-callout strong { color: var(--teal); }
.erp-callout__lines { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 580px) { .erp-callout { flex-direction: column; gap: 14px; } }

/* ============ HOW IT WORKS — roadmap + before/after ============ */
.how { background: transparent; }

.how__outro { text-align: center; max-width: 760px; margin: clamp(40px, 5vw, 60px) auto 0; }
.how__outro-lead {
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 14px;
}
.how__outro-body { font-size: clamp(14px, 1.2vw, 16px); color: var(--ink-muted); line-height: 1.65; }

.roadmap { max-width: 1080px; margin: 0 auto clamp(44px, 5vw, 68px); }
.roadmap__ends {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 18px;
  max-width: 92%;
}
.roadmap__end {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 5px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(0, 224, 194, 0.03);
}
.roadmap__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.roadmap__rail {
  position: absolute;
  top: 40px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal) 50%, var(--blue));
  opacity: 0.4;
  z-index: 0;
}
.roadmap__rail::before, .roadmap__rail::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid var(--teal);
  border-right: 2px solid var(--teal);
}
.roadmap__rail::before { left: 33%; transform: translateY(-50%) rotate(45deg); }
.roadmap__rail::after { left: 66%; transform: translateY(-50%) rotate(45deg); }

.rstep {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
  transition: transform .25s ease;
}
.rstep:hover { transform: translateY(-4px); }
.rstep:hover .rstep__node { border-color: var(--teal-light); box-shadow: 0 0 44px rgba(0,224,194,0.36), inset 0 0 20px rgba(0,224,194,0.18); }
.rstep__node {
  position: relative;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3));
  border: 2px solid var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 0 34px rgba(0,224,194,0.22), inset 0 0 16px rgba(0,224,194,0.13);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.rstep__icon { width: 34px; height: 34px; color: var(--teal); filter: drop-shadow(0 0 6px rgba(0,224,194,0.4)); }
.rstep__num {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 30px; height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: var(--ink-dark);
  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  border: 2px solid var(--bg);
  box-shadow: 0 4px 12px rgba(0,224,194,0.4);
}
.rstep h3 { font-size: 17px; margin-bottom: 9px; line-height: 1.22; }
.rstep p { font-size: 13px; color: var(--ink-muted); line-height: 1.5; max-width: 230px; }

/* Roadmap → vertical on tablet/mobile */
@media (max-width: 820px) {
  .roadmap__ends { display: none; }
  .roadmap__track { grid-template-columns: 1fr; gap: 0; }
  .roadmap__rail {
    top: 36px; bottom: 36px;
    left: 35px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--teal-deep), var(--teal) 50%, var(--blue));
  }
  .roadmap__rail::before, .roadmap__rail::after { display: none; }
  .rstep {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 18px;
    row-gap: 4px;
    text-align: left;
    align-items: start;
    padding: 0 0 28px;
  }
  .rstep:last-child { padding-bottom: 0; }
  .rstep:hover { transform: none; }
  .rstep__node { grid-row: 1 / span 2; grid-column: 1; align-self: start; width: 72px; height: 72px; margin-bottom: 0; }
  .rstep__icon { width: 30px; height: 30px; }
  .rstep h3 { grid-column: 2; align-self: center; font-size: 17px; margin: 0; }
  .rstep p { grid-column: 2; max-width: none; font-size: 13.5px; }
}

/* BEFORE / AFTER VISUAL */
.ba-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (max-width: 760px) { .ba-visual { grid-template-columns: 1fr; } }

.ba-visual__panel { padding: 24px; position: relative; min-height: 240px; display: flex; flex-direction: column; }
.ba-visual__panel--before { background: linear-gradient(180deg, rgba(255,107,107,0.05), transparent); }
.ba-visual__panel--after  { background: linear-gradient(180deg, rgba(0,224,194,0.06), transparent); }
.ba-visual__tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.ba-visual__tag--before { background: rgba(255,107,107,0.12); color: #ff9a9a; }
.ba-visual__tag--after  { background: var(--teal-soft); color: var(--teal); }
.ba-visual__stage { position: relative; flex: 1; }

/* Generated illustration slot — hidden until the PNG actually loads,
   then it replaces the CSS fallback (chaos chips / system flow). */
.ba-illus { display: none; }
.ba-visual__stage.has-illus { display: flex; align-items: center; justify-content: center; min-height: 0; }
.ba-visual__stage.has-illus .ba-illus {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  margin: 0 auto;
}
.ba-visual__stage.has-illus .chaos-chip,
.ba-visual__stage.has-illus .sys-flow { display: none; }

/* chaos stage */
.ba-visual__stage--chaos { min-height: 180px; }
.chaos-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: var(--bg-2);
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.chaos-warn { width: 14px; height: 14px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 9px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.chaos-q { color: var(--warn); font-weight: 900; }
.chaos-chip--1 { top: 4%; left: 2%; transform: rotate(-5deg); }
.chaos-chip--2 { top: 30%; right: 4%; transform: rotate(4deg); }
.chaos-chip--3 { top: 54%; left: 6%; transform: rotate(3deg); }
.chaos-chip--4 { bottom: 6%; right: 10%; transform: rotate(-4deg); }
.chaos-chip--5 { top: 12%; left: 38%; transform: rotate(6deg); }

/* system stage */
.sys-flow { display: flex; flex-direction: column; gap: 0; }
.sys-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.sys-check { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); flex-shrink: 0; position: relative; }
.sys-check::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: var(--ink-dark); }
.sys-meta { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--teal); }
.sys-line { width: 2px; height: 14px; background: var(--teal); margin-left: 21px; opacity: 0.5; }

.ba-visual__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-4));
  border-left: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
}
.ba-visual__arrow svg { width: 28px; height: 28px; color: var(--teal); padding: 8px; background: var(--teal-soft); border-radius: 50%; box-sizing: content-box; }
@media (max-width: 760px) {
  .ba-visual__arrow { border-left: 0; border-right: 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); padding: 12px; }
  .ba-visual__arrow svg { transform: rotate(90deg); }
}
.ba-visual__caption {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-faint);
  margin: 18px auto 0;
  max-width: 600px;
  font-style: italic;
}

/* ============ APP ============ */
.app { background: radial-gradient(ellipse 70% 50% at 50% 20%, rgba(42, 166, 214, 0.06), transparent 70%); }

/* Dashboard + caps share the SAME width + alignment so edges line up */
.app__layout { max-width: 920px; margin: 0 auto clamp(32px, 3.5vw, 44px); }
.app__screen-wrap { position: relative; }

/* Capabilities — 3-col grid, same 920px frame as the dashboard, edges aligned */
.app__caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 920px;
  margin: 0 auto clamp(36px, 4vw, 48px);
  background: var(--bg-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 800px) { .app__caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .app__caps { grid-template-columns: 1fr; } }

.app__footer-line {
  text-align: center;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  color: var(--ink-muted);
  margin: 0 auto;
}
.app__footer-line strong { color: var(--blue-light); font-weight: 800; }

.cap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px 24px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
/* remove right borders on last column, bottom borders on last row (3-col) */
.cap:nth-child(3n) { border-right: 0; }
.cap:nth-child(n+4) { border-bottom: 0; }
@media (max-width: 800px) {
  .cap:nth-child(3n) { border-right: 1px solid var(--border-soft); }
  .cap:nth-child(2n) { border-right: 0; }
  .cap:nth-child(n+4) { border-bottom: 1px solid var(--border-soft); }
  .cap:nth-child(n+5) { border-bottom: 0; }
}
@media (max-width: 480px) {
  .cap { border-right: 0 !important; }
  .cap:nth-child(n+4) { border-bottom: 1px solid var(--border-soft) !important; }
  .cap:last-child { border-bottom: 0 !important; }
}
.cap__icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; background: var(--blue-soft); border: 1px solid var(--blue-border); color: var(--blue-light); display: flex; align-items: center; justify-content: center; }
.cap__icon svg { width: 22px; height: 22px; }
.cap h4 { font-size: 15px; margin-bottom: 4px; }
.cap p { font-size: 13px; color: var(--ink-muted); line-height: 1.5; }

/* App screen mockup */
.app-screen { background: var(--bg-2); border: 1px solid var(--blue-border); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 80px rgba(42,166,214,0.15); }
.app-screen__topbar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.app-screen__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.app-screen__url { margin-left: 10px; flex: 1; text-align: center; font-size: 11px; color: var(--ink-faint); background: var(--bg-3); padding: 4px 14px; border-radius: 6px; max-width: 280px; margin-right: auto; letter-spacing: 0.04em; }
.app-screen__chrome { display: grid; grid-template-columns: 180px 1fr; min-height: 420px; }
.app-screen__sidebar { background: var(--bg); border-right: 1px solid var(--border-soft); padding: 16px 12px; display: flex; flex-direction: column; }
.app-screen__brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 16px; border-bottom: 1px solid var(--border-soft); margin-bottom: 12px; }
.app-screen__brand img { width: 22px; }
.app-screen__brand span { font-weight: 800; font-size: 13px; letter-spacing: -0.01em; }
.app-screen__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.app-screen__nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 12.5px; color: var(--ink-faint); font-weight: 500; }
.app-screen__nav a .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); }
.app-screen__nav a.is-active { background: var(--blue-soft); color: var(--blue-light); }
.app-screen__nav a.is-active .dot { background: var(--blue-light); box-shadow: 0 0 8px var(--blue-light); }
.app-screen__user { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--border-soft); margin-top: 12px; }
.app-screen__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: var(--ink); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.app-screen__user strong { display: block; font-size: 12px; font-weight: 700; }
.app-screen__user span { display: block; font-size: 10.5px; color: var(--ink-faint); }
.app-screen__main { padding: 16px 18px; background: var(--bg-2); }
.app-screen__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.app-screen__header h4 { font-size: 16px; }
.app-screen__header span { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.app-screen__btn { background: var(--blue); color: var(--ink); font-weight: 700; font-size: 12px; padding: 7px 12px; border-radius: 7px; }
.app-screen__table { display: flex; flex-direction: column; }
.app-row { display: grid; grid-template-columns: 2fr 0.8fr 0.8fr 1fr 1fr; gap: 10px; padding: 11px 10px; border-bottom: 1px solid var(--border-soft); align-items: center; font-size: 12px; color: var(--ink-muted); }
.app-row:last-child { border-bottom: 0; }
.app-row strong { color: var(--ink); font-weight: 700; }
.app-row--head { background: rgba(42,166,214,0.06); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue-light); font-weight: 700; border-radius: 6px; border: 0; }
.app-row--alert { background: rgba(245,176,66,0.04); }
.app-row--out { background: rgba(255,107,107,0.05); }
.app-row__act { text-align: right; color: var(--ink-faint); font-weight: 600; font-size: 11.5px; }
.app-row__act--primary { color: var(--blue-light); background: var(--blue-soft); border: 1px solid var(--blue-border); border-radius: 999px; padding: 4px 10px; text-align: center; font-size: 10.5px; letter-spacing: 0.04em; }
.app-screen__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--ink-muted); }
.app-screen__footer strong { color: var(--ink); }
.app-screen__live { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-weight: 700; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: blink 1.5s ease-in-out infinite; }
.dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; }
.dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.dot--ok { color: var(--teal); } .dot--ok::before { background: var(--teal); box-shadow: 0 0 8px var(--teal-glow); }
.dot--low { color: var(--warn); } .dot--low::before { background: var(--warn); box-shadow: 0 0 8px rgba(245,176,66,0.4); }
.dot--out { color: var(--bad); } .dot--out::before { background: var(--bad); box-shadow: 0 0 8px rgba(255,107,107,0.4); }

.app__demo { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.app__demo-line { font-size: 13.5px; color: var(--ink-faint); max-width: 440px; }

/* ============ ENGAGEMENT ============ */
.engagement { background: transparent; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; }
@media (max-width: 1100px) { .levels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .levels { grid-template-columns: 1fr; } }

.level {
  position: relative;
  padding: 28px 24px;
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.level:hover { transform: translateY(-4px); border-color: var(--teal); }
.level--featured { background: linear-gradient(180deg, rgba(0,224,194,0.10), var(--bg-3)); border-color: var(--teal); box-shadow: var(--shadow-glow); }
.level__badge { position: absolute; top: -10px; left: 24px; background: var(--teal); color: var(--ink-dark); padding: 5px 11px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.level__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.level__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--teal-soft); border: 1px solid var(--border); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; }
.level__icon svg { width: 22px; height: 22px; }
.level__num { font-size: 12.5px; font-weight: 800; color: var(--teal); letter-spacing: 0.15em; opacity: 0.8; }
.level h3 { font-size: 19px; margin-bottom: 12px; }
.level__for {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  background: rgba(0, 224, 194, 0.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.level__for-label {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 5px;
}
.level--featured .level__for { background: rgba(0, 224, 194, 0.1); }
.level p { color: var(--ink-muted); font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; flex: 1; }
.level__incl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--teal);
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.level__incl::before { content: '✓'; width: 16px; height: 16px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font-size: 10px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }

.levels__footer {
  text-align: center;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  color: var(--ink);
  max-width: 680px;
  margin: clamp(28px, 3vw, 40px) auto 0;
  line-height: 1.6;
}
.levels__footer strong { color: var(--teal); font-weight: 800; }

/* ============ PROOF — balanced panel ============ */
.proof {
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
}
.proof__glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 760px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 224, 194, 0.14), transparent 70%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}

.proof__head { text-align: center; margin-bottom: clamp(28px, 3vw, 42px); position: relative; z-index: 2; }
.proof__head .eyebrow { justify-content: center; margin-bottom: 14px; }
.proof__title { font-size: clamp(26px, 3.2vw, 40px); }

/* The panel — grounds everything; metric | divider | brand */
.proof__card {
  position: relative;
  z-index: 2;
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(34px, 4vw, 56px) clamp(28px, 4vw, 60px);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 0 90px rgba(0, 224, 194, 0.08);
}
@media (max-width: 760px) {
  .proof__card { grid-template-columns: 1fr; gap: 26px; text-align: center; }
}

/* Metric side */
.proof__metric { text-align: center; display: flex; flex-direction: column; align-items: center; }
.proof__stat-num {
  font-size: clamp(88px, 11vw, 148px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(180deg, var(--teal-light) 0%, var(--teal-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex;
  align-items: flex-start;
  padding: 0.05em 0.06em 0.1em;
  filter: drop-shadow(0 8px 36px rgba(0, 224, 194, 0.22));
}
.proof__stat-pct { font-size: 0.46em; font-weight: 800; margin-left: 4px; margin-top: 0.05em; }
.proof__metric-label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.4;
  max-width: 220px;
}
.proof__metric-label strong { display: block; color: var(--teal); font-weight: 800; margin-top: 2px; }

/* Divider */
.proof__divider {
  width: 1px;
  align-self: stretch;
  margin: 8px 0;
  background: linear-gradient(180deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
@media (max-width: 760px) {
  .proof__divider { width: 70%; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--border), transparent); }
}

/* Brand side */
.proof__brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.proof__logo {
  height: clamp(54px, 6.5vw, 78px);
  width: auto;
  opacity: 0.98;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.12));
}
.proof__brand-desc { font-size: 14px; color: var(--ink-muted); line-height: 1.55; max-width: 320px; }

.proof__video {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 10px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.proof__video:hover { border-color: var(--teal); transform: translateY(-2px); }
.proof__video-thumb {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--bg-3), var(--bg));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.proof__video-avatar {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: var(--teal);
  background: radial-gradient(circle at 50% 40%, rgba(0,224,194,0.15), transparent 70%);
}
.proof__video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--ink-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,224,194,0.4);
}
.proof__video-play svg { width: 13px; height: 13px; margin-left: 2px; }
.proof__video-meta { text-align: left; }
.proof__video-soon {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dark);
  background: var(--teal);
  padding: 2px 7px;
  border-radius: 999px;
  margin-bottom: 5px;
}
.proof__video-meta strong { display: block; font-size: 14.5px; font-weight: 800; }
.proof__video-meta > span:last-child { display: block; font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }

/* ---- Aaron testimonial player ---- */
.ptvid {
  position: relative;
  width: clamp(260px, 34vw, 320px);
  aspect-ratio: 540 / 894;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #05100e center / cover no-repeat;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 224, 194, 0.06);
  isolation: isolate;
}
/* Touch devices: iOS blocks muted autoplay (esp. Low Power Mode) and paints its
   OWN native play button on the teaser video, competing with our overlay. Use the
   blurred poster image as the resting background instead — no native video UI. */
/* Each card carries its own blurred poster via --ptvid-poster (set inline).
   Was hardcoded to Aaron's file — with a rail of testimonials that painted
   Aaron behind every card. */
.ptvid { background-image: var(--ptvid-poster); }
@media (hover: none) and (pointer: coarse) {
  /* iOS blocks muted autoplay (esp. Low Power Mode) and paints its OWN play
     button on the teaser video — use the still poster as the resting state. */
  .ptvid .ptvid__teaser { display: none; }
}
.ptvid__teaser, .ptvid__full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ptvid__full { z-index: 3; opacity: 0; pointer-events: none; background: #000; }
.ptvid.is-playing .ptvid__full { opacity: 1; pointer-events: auto; }
.ptvid.is-playing .ptvid__teaser { opacity: 0; }
/* Opt-in fullscreen (via the video's own control) shows the whole clip, not cropped. */
.ptvid__full:fullscreen { object-fit: contain; background: #000; }
.ptvid__full:-webkit-full-screen { object-fit: contain; background: #000; }
.ptvid__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.25s ease;
}
.ptvid.is-playing .ptvid__cover { opacity: 0; pointer-events: none; }
.ptvid__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 78% at 50% 50%, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.42) 38%, rgba(0, 0, 0, 0.16) 66%, transparent 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, transparent 28%, transparent 68%, rgba(0, 0, 0, 0.4) 100%);
}
.ptvid__play {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--ink-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 224, 194, 0.4), 0 0 0 0 rgba(0, 224, 194, 0.45);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  animation: ptvidPulse 2.6s ease-out infinite;
}
.ptvid__play svg { width: 24px; height: 24px; margin-left: 0; }
.ptvid__cover:hover .ptvid__play { transform: scale(1.07); }
.ptvid:hover { border-color: rgba(0, 224, 194, 0.4); }
@keyframes ptvidPulse {
  0% { box-shadow: 0 10px 30px rgba(0, 224, 194, 0.4), 0 0 0 0 rgba(0, 224, 194, 0.4); }
  70% { box-shadow: 0 10px 30px rgba(0, 224, 194, 0.4), 0 0 0 16px rgba(0, 224, 194, 0); }
  100% { box-shadow: 0 10px 30px rgba(0, 224, 194, 0.4), 0 0 0 0 rgba(0, 224, 194, 0); }
}
@media (prefers-reduced-motion: reduce) { .ptvid__play { animation: none; } }
.ptvid__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.ptvid__kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.ptvid__title { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
.ptvid__role { font-size: 12.5px; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }


/* ============ BOOK ============ */
.book { position: relative; background: transparent; overflow: hidden; }
.book__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 75% 50%, rgba(0,224,194,0.08), transparent 55%); z-index: 0; }
.book__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 880px) { .book__inner { grid-template-columns: 1fr; gap: 28px; } }

.book__main .eyebrow { margin-bottom: 16px; }
.book__title { font-size: clamp(32px, 4vw, 50px); margin-bottom: 18px; }
.book__sub { font-size: clamp(15px, 1.3vw, 17px); color: var(--ink-muted); line-height: 1.65; margin-bottom: 28px; max-width: 600px; }
.book__cta { margin-bottom: 16px; }
.book__vibe { font-size: 13px; color: var(--ink-faint); font-style: italic; max-width: 520px; line-height: 1.5; }

.book__psr {
  position: relative;
  padding: 24px 22px;
  background: var(--bg-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
/* when script.js moves the card above the Book button on stacked layouts */
.book__main .book__psr { margin-bottom: 24px; }
.book__psr-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--teal-soft); border: 1px solid var(--border); color: var(--teal); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.book__psr-mark svg { width: 20px; height: 20px; }
.book__psr p { font-size: 13px; color: var(--ink-faint); line-height: 1.6; }
.book__psr strong { color: var(--ink-muted); font-weight: 700; }

/* ============ FOOTER ============ */
.footer { background: var(--pure); border-top: 1px solid var(--border-soft); padding: 56px 0 24px; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 720px) { .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 460px) { .footer__inner { grid-template-columns: 1fr; } }
.footer__brand img { height: 28px; margin-bottom: 14px; }
.footer__tag { color: var(--teal); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
.footer h5, .footer__h { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
.footer__h { margin-top: 0; }
.footer__nav a, .footer__contact a { display: block; font-size: 13.5px; color: var(--ink-muted); padding: 5px 0; transition: color .15s ease; }
.footer__nav a:hover, .footer__contact a:hover { color: var(--teal); }
@media (max-width: 720px) { .footer__brand { grid-column: 1 / -1; } }
.footer__base { margin-top: 48px; padding: 24px var(--pad) 0; max-width: var(--container); margin-left: auto; margin-right: auto; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--ink-faint); }

/* ============ MOBILE COMPRESSION ============ */
@media (max-width: 720px) {
  .section { padding: 48px 0; }
  .section__head { margin-bottom: 26px; }
  .section__head .eyebrow { margin-bottom: 10px; }
  .section__title { margin-bottom: 12px; }
  .section__lede { font-size: 14px; line-height: 1.55; }

  h1 { font-size: 33px; line-height: 1.1; letter-spacing: -0.03em; }
  h2 { font-size: 26px; line-height: 1.12; }
  h3 { font-size: 18px; }

  /* HERO */
  .hero { padding: 32px 0 44px; }
  .hero__copy .eyebrow { margin-bottom: 16px; font-size: 10.5px; }
  /* Two clean statements — white on top, teal below, with a clear gap */
  .hero__title { margin-bottom: 18px; max-width: none; }
  .hero__title .accent { display: block; margin-top: 8px; }
  .hero__sub { font-size: 13.5px; margin-bottom: 26px; line-height: 1.55; color: var(--ink-muted); max-width: 420px; }
  .hero__cta-wrap { gap: 10px; margin-bottom: 24px; }
  .hero__cta-wrap .btn { width: 100%; justify-content: center; }
  .hero__vibe { font-size: 12px; max-width: none; }
  .hero__visual { min-height: 280px; margin-bottom: 8px; }
  .hero__orb { width: 240px; }
  .hero__chip { font-size: 10.5px; padding: 6px 10px 6px 8px; }
  .hero__chip--1 { top: -2%; left: -6%; }
  .hero__chip--2 { top: 16%; right: -10%; }
  .hero__chip--3 { bottom: 16%; right: -6%; }
  .hero__chip--4 { bottom: -2%; left: -10%; }

  /* PROBLEM */
  .aud-card { padding: 22px 20px; }
  .aud-card__head { margin-bottom: 14px; gap: 12px; }
  .aud-card__icon { width: 40px; height: 40px; }
  .aud-card__icon svg { width: 22px; height: 22px; }
  .aud-card__tag { font-size: 17px; }
  .aud-card__lede { font-size: 14px; margin-bottom: 12px; }
  .aud-card__list li { padding: 9px 0 9px 22px; font-size: 13px; }
  .aud-card__kicker { font-size: 14px; padding-top: 14px; }
  .problem__quote p { font-size: 22px; }

  /* DIFFERENT */
  .different__grid { gap: 16px; margin-bottom: 22px; }
  .diff-card { padding: 22px 20px; }
  .diff-card__num-row { margin-bottom: 16px; }
  .diff-card__num, .diff-card__icon { width: 42px; height: 42px; }
  .diff-card__icon svg { width: 22px; height: 22px; }
  .diff-card h3 { margin-bottom: 12px; font-size: 19px; }
  .diff-card p { font-size: 13.5px; }
  .diff-card__punch { font-size: 14px !important; margin-top: 14px; padding-top: 14px; }
  .erp-callout { padding: 18px; }
  .erp-callout p { font-size: 13.5px; }

  /* HOW — roadmap */
  .roadmap { margin-bottom: 36px; }
  .rstep h3 { font-size: 16px; }
  .rstep p { font-size: 13px; }
  .ba-visual__panel { padding: 20px; min-height: auto; }
  .ba-visual__stage--chaos { min-height: 200px; }
  .ba-visual__caption { font-size: 12.5px; }

  /* APP */
  .app__caps { gap: 18px 16px; }
  .cap__icon { width: 38px; height: 38px; }
  .cap__icon svg { width: 20px; height: 20px; }
  .cap h4 { font-size: 14px; }
  .cap p { font-size: 12.5px; }
  .app-screen__topbar { padding: 9px 12px; }
  .app-screen__url { font-size: 10px; padding: 3px 10px; }
  .app-screen__chrome { grid-template-columns: 1fr !important; min-height: auto; }
  .app-screen__sidebar { display: none !important; }
  .app-screen__main { padding: 14px; }
  .app-screen__header h4 { font-size: 15px; }
  .app-screen__btn { font-size: 11px; padding: 7px 12px; }
  .app-row { padding: 10px 8px; font-size: 11px; gap: 6px; grid-template-columns: 1.6fr 0.7fr 0.7fr 0.9fr; }
  .app-row span:nth-child(5) { display: none; }
  .app-row--head span:nth-child(5) { display: none; }
  .app-row--head { font-size: 9.5px; }
  .app-row strong { font-size: 11.5px; }
  .app-screen__footer { font-size: 10.5px; }
  .app__demo-line { font-size: 12.5px; }

  /* ENGAGEMENT */
  .levels { gap: 14px; }
  .level { padding: 22px 20px; }
  .level__head { margin-bottom: 14px; }
  .level__icon { width: 38px; height: 38px; }
  .level__icon svg { width: 20px; height: 20px; }
  .level h3 { font-size: 18px; }
  .level__for { font-size: 12px; padding: 10px 12px; margin-bottom: 12px; }
  .level p { font-size: 13px; margin-bottom: 14px; }
  .levels__footer { font-size: 13.5px; }

  /* PROOF */
  .proof__title { font-size: 24px; }
  .proof__card { padding: 28px 22px; }
  .proof__stat-num { font-size: 100px; }
  .proof__metric-label { font-size: 13.5px; }
  .proof__brand-desc { font-size: 13.5px; }
  .proof__video-thumb { width: 54px; height: 54px; }

  /* BOOK */
  .book__title { font-size: 30px; margin-bottom: 14px; }
  .book__sub { font-size: 14.5px; margin-bottom: 22px; }
  .book__cta { width: 100%; justify-content: center; }
  .book__psr { padding: 20px; }

  /* FOOTER */
  .footer { padding: 40px 0 20px; }
  .footer__inner { gap: 28px; }
  .footer__brand img { height: 24px; }
  .nudge { font-size: 13px; margin-top: 32px; }
}

@media (max-width: 400px) {
  .hero__orb { width: 200px; }
  .hero__chip { font-size: 9.5px; padding: 5px 9px 5px 7px; }
  h1 { font-size: 29px; line-height: 1.12; }
  h2 { font-size: 24px; }
  .hero__sub { font-size: 13px; }
  .proof__stat-num { font-size: 90px; }
  .container { padding-left: 18px; padding-right: 18px; }
  .app__caps { grid-template-columns: 1fr; }
}

/* ============ REVEAL ANIMATION ============ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   UTILITY PAGES  (/demo, /expo)
   Reuse the main design system. Ted: visual polish lives here.
   ============================================================ */
.util { min-height: calc(100vh - 360px); display: flex; align-items: center; }
.util .section__head { margin-bottom: clamp(32px, 4vw, 48px); }
.util__container { position: relative; z-index: 1; max-width: 880px; width: 100%; }
.util__close { text-align: center; margin-top: 40px; color: var(--ink-muted); font-size: 15px; }
.util__close a { color: var(--teal); font-weight: 600; }
.util__close a:hover { color: var(--teal-light); }

/* ---- /demo : video / tour embed ---- */
.demo-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--blue-border);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(42,166,214,0.10), transparent 60%),
    var(--bg-2);
  box-shadow: var(--shadow-card);
}
.demo-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo-embed__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 24px;
}
.demo-embed__play {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue); color: var(--ink-dark);
  box-shadow: 0 0 0 10px var(--blue-soft);
}
.demo-embed__play svg { width: 26px; height: 26px; margin-left: 3px; }
.demo-embed__soon { font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: .01em; }
.demo-embed__note { font-size: 13px; color: var(--ink-faint); }

/* ---- /demo : request form ---- */
.demo-form-wrap {
  margin-top: clamp(36px, 5vw, 56px);
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.5vw, 40px);
}
.demo-form__title { font-size: clamp(20px, 2vw, 24px); margin: 0 0 20px; text-align: center; }
.demo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.field__opt { color: var(--ink-faint); font-weight: 500; }
.field input {
  width: 100%; padding: 12px 14px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border-soft); border-radius: 10px;
  font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.field input::placeholder { color: var(--ink-faint); }
.demo-form__submit { grid-column: 1 / -1; justify-content: center; margin-top: 6px; }
.demo-form__reassure { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--ink-faint); margin: 4px 0 0; }
.demo-form__status { grid-column: 1 / -1; text-align: center; font-size: 14px; font-weight: 600; margin: 0; min-height: 1.2em; }
.demo-form__status.is-ok { color: var(--teal); }
.demo-form__status.is-err { color: var(--bad); }

/* ---- /expo ---- */
.expo-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.expo-block {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column; gap: 10px;
}
.expo-block__num { font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--teal); }
.expo-block h3 { font-size: clamp(17px, 1.6vw, 20px); margin: 0; }
.expo-block p { font-size: 14.5px; color: var(--ink-muted); margin: 0; line-height: 1.6; }
.expo-block--cta { border-color: var(--border); background: linear-gradient(160deg, var(--bg-4), var(--bg-2)); }
.expo-block--cta .btn { margin-top: auto; }
.expo-contact {
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.expo-contact strong { font-size: 17px; }
.expo-contact__role { font-size: 13px; color: var(--ink-faint); }
.expo-contact__lines { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 14px; color: var(--ink-muted); }
.expo-contact__lines a { color: var(--teal); font-weight: 600; }

@media (max-width: 720px) {
  .demo-form { grid-template-columns: 1fr; }
  .expo-blocks { grid-template-columns: 1fr; }
  .util { min-height: 0; padding-top: 36px; }
}

/* ============================================================
   HERO BEFORE/AFTER  (the "first thing they see" — 6/8 PJ direction)
   Placeholder concept art; design to replace with professional images.
   ============================================================ */
.hero__ba {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
  min-height: 0;
}
.hero__ba-card {
  position: relative;
  flex: 1 1 0;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-2);
  box-shadow: var(--shadow-card);
}
.hero__ba-card--before { border-color: rgba(255, 107, 107, 0.28); }
.hero__ba-card--after  { border-color: var(--border); }
.hero__ba-card img { width: 100%; height: auto; display: block; }
.hero__ba-tag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__ba-tag--before { background: rgba(255, 107, 107, 0.18); color: #ffb4b4; }
.hero__ba-tag--after  { background: var(--teal-soft); color: var(--teal-light); }
.hero__ba-arrow {
  flex: 0 0 auto;
  width: clamp(28px, 3vw, 40px);
  height: clamp(28px, 3vw, 40px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-soft);
  border: 1px solid var(--border);
  color: var(--teal);
}
.hero__ba-arrow svg { width: 60%; height: 60%; }
@media (max-width: 880px) {
  .hero__ba { max-width: 460px; margin: 8px auto 0; }
}

/* ============================================================
   FOCUS-VISIBLE  (keyboard accessibility — was missing)
   ============================================================ */
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.btn--blue:focus-visible { outline-color: var(--blue-light); }
.nav__logo:focus-visible,
.nav__links a:focus-visible,
.nav__drawer-link:focus-visible,
.nav__toggle:focus-visible,
.footer a:focus-visible,
.nudge a:focus-visible,
.aud-card__kicker a:focus-visible,
.util__close a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   FIRE REDESIGN  — visual-first, consumer-scannable (overrides above)
   Goal: cut text, lead with the before/after, big visual beats.
   ============================================================ */

/* bigger section headings, tighter section rhythm */
.section__title { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; }
.section--alt { background: var(--bg-2); }

/* ---- HERO: copy centered, before/after full-width centerpiece ---- */
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vw, 48px); grid-template-columns: none; text-align: center; }
.hero__copy { max-width: 820px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero__title { font-size: clamp(40px, 6.6vw, 80px); line-height: 1.04; margin: 0; }
.hero__ba {
  display: flex; align-items: stretch; justify-content: center;
  gap: clamp(10px, 1.6vw, 20px);
  width: 100%; max-width: none; margin: 0;
}
.hero__ba-card {
  position: relative; flex: 1 1 0; margin: 0;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-3);
  box-shadow: var(--shadow-card);
}
.hero__ba-card--before { border-color: rgba(255, 107, 107, 0.30); }
.hero__ba-card--after  { border-color: var(--border); }
.hero__ba-card img { width: 100%; height: clamp(300px, 46vh, 500px); object-fit: cover; object-position: center; display: block; }
.hero__ba-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(6,6,6,0.85), transparent); pointer-events: none; }
.hero__ba-tag {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-size: clamp(15px, 1.6vw, 22px); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0; background: none; backdrop-filter: none;
}
.hero__ba-tag--before { color: #ff9d9d; }
.hero__ba-tag--after  { color: var(--teal-light); }
.hero__ba-arrow {
  flex: 0 0 auto; align-self: center;
  width: clamp(40px, 4vw, 56px); height: clamp(40px, 4vw, 56px);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--teal); color: var(--ink-dark);
  box-shadow: 0 0 0 8px var(--teal-soft), 0 0 36px var(--teal-glow);
}
.hero__ba-arrow svg { width: 56%; height: 56%; }

/* ---- PROOF BAR (credibility ticker under hero) ---- */
.proofbar { background: var(--bg-2); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.proofbar__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; padding: 16px var(--pad); text-align: center; }
.proofbar__stat { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; color: var(--teal); letter-spacing: -0.02em; }
.proofbar__text { font-size: clamp(13px, 1.3vw, 15px); color: var(--ink); font-weight: 600; }
.proofbar__divider { width: 1px; height: 18px; background: var(--border); }
.proofbar__sub { font-size: clamp(12px, 1.2vw, 14px); color: var(--ink-faint); }

/* ---- PROBLEM (lean) ---- */
.aud-card { padding: clamp(22px, 2.6vw, 32px); }
.aud-card__tag { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); }
.aud-card--checks .aud-card__tag { color: var(--blue-light); }
.aud-card__list li { font-size: clamp(15px, 1.5vw, 17px); }
.problem__quote { text-align: center; font-size: clamp(20px, 2.6vw, 32px); font-weight: 800; margin: clamp(32px, 4vw, 48px) auto 0; max-width: 760px; }

/* ---- WHY DIFFERENT (one-clause cards) ---- */
.diff-card { padding: clamp(24px, 3vw, 38px); }
.diff-card h3 { font-size: clamp(20px, 2.2vw, 26px); margin: 14px 0 10px; }
.diff-card p { font-size: clamp(14px, 1.4vw, 16px); color: var(--ink-muted); }

/* ---- HOW IT WORKS (number-forward pillars) ---- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.pillar {
  position: relative; text-align: center;
  padding: clamp(24px, 2.6vw, 34px) clamp(14px, 1.6vw, 22px);
  background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; /* clicks through to booking (Ted 7/16) */
}
.pillar__num { font-size: clamp(34px, 4vw, 52px); font-weight: 900; color: var(--teal); opacity: 0.9; line-height: 1; }
.pillar__icon { width: 46px; height: 46px; color: var(--teal); margin-top: 4px; }
.pillar__icon svg { width: 100%; height: 100%; }
.pillar h3 { font-size: clamp(15px, 1.6vw, 18px); margin: 6px 0 0; }
.pillar p { font-size: 13px; color: var(--ink-faint); margin: 0; }

/* ---- APP caps (icon + label only) ---- */
.app__caps { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.4vw, 16px); }
.cap { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: clamp(16px, 1.8vw, 22px) 8px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--radius); }
.cap__icon { width: 30px; height: 30px; }
.cap__icon svg { width: 100%; height: 100%; }
.cap h3 { font-size: clamp(12.5px, 1.3vw, 14.5px); margin: 0; font-weight: 700; }

/* ---- ENGAGEMENT (compact tier cards) ---- */
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 18px); max-width: 1080px; margin-left: auto; margin-right: auto; }
.level { padding: clamp(22px, 2.4vw, 30px) clamp(16px, 1.8vw, 22px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.level__num { font-size: clamp(28px, 3vw, 40px); font-weight: 900; color: var(--ink-faint); opacity: 0.55; line-height: 1; }
.level h3 { font-size: clamp(17px, 1.8vw, 21px); margin: 0; }
.level__chip { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--teal); background: var(--teal-soft); border: 1px solid var(--border); padding: 5px 12px; border-radius: 999px; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.level--featured .level__chip { color: var(--ink-dark); background: var(--teal); border-color: var(--teal); }
/* PJ 7/11: cards click to book — chip lights on the card you're on, and the
   featured 02 chip steps back while you're hovering a different card */
.level { cursor: pointer; }
.level:hover .level__chip { color: var(--ink-dark); background: var(--teal); border-color: var(--teal); }
.levels:has(.level:hover) .level--featured:not(:hover) .level__chip { color: var(--teal); background: var(--teal-soft); border-color: var(--border); }
.levels__footer { text-align: center; color: var(--ink-faint); font-size: 14px; margin-top: 28px; }

/* ---- PROOF (monster stat) ---- */
.proof__glow { position: absolute; left: 12%; top: 50%; width: 520px; height: 520px; transform: translateY(-50%); background: radial-gradient(circle, var(--teal-glow), transparent 65%); filter: blur(40px); opacity: 0.5; pointer-events: none; z-index: 0; }
.proof .container { position: relative; z-index: 1; }
.proof__stat-num { font-size: clamp(120px, 17vw, 220px) !important; line-height: 0.9; }
.proof__metric-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(13px, 1.4vw, 16px) !important; }

/* ---- STICKY MOBILE CTA ---- */
.mobile-cta { display: none; }

@media (max-width: 880px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .app__caps { grid-template-columns: repeat(3, 1fr); }
  .levels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hero__ba-card img { height: clamp(220px, 38vw, 300px); }
  .hero__ba-arrow { width: 38px; height: 38px; }
  .erp-callout { display: none; }
  .mobile-cta {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    height: 60px; background: var(--teal); color: var(--ink-dark);
    font-weight: 800; font-size: 16px; letter-spacing: 0.01em;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
  }
  body { padding-bottom: 60px; }
}

/* ============================================================
   FIRE REDESIGN — ROUND 2  (full-bleed before/after, icon pains,
   monster proof, glowing scroll-triggered mobile CTA)
   ============================================================ */

/* HERO: copy block centered, before/after FULL-BLEED below */
.hero { display: block; padding-bottom: 0; }
.hero__inner { padding-bottom: clamp(30px, 4vw, 52px); gap: 18px; }
.hero__title { font-size: clamp(46px, 6.4vw, 82px); line-height: 1.02; }
.hero__sub { font-size: clamp(15px, 1.7vw, 20px); color: var(--ink-muted); margin: 0; max-width: 600px; }
.hero__ba { width: 100%; gap: 0; margin: clamp(26px, 3.5vw, 46px) 0 0; max-width: none; }
.hero__ba-card { flex: 1 1 0; border: 0; border-radius: 0; box-shadow: none; }
.hero__ba-card--before { border-color: transparent; }
.hero__ba-card--after { border-left: 2px solid var(--teal); }
.hero__ba-card img { height: clamp(360px, 54vh, 560px); object-fit: cover; object-position: center; }
.hero__ba-card::after { height: 42%; }
.hero__ba-tag { left: clamp(16px, 2vw, 28px); bottom: clamp(14px, 2vw, 22px); font-size: clamp(22px, 3.2vw, 40px); }

/* PROBLEM: icon pain chips, no sentences */
.pains { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.pain { display: inline-flex; align-items: center; gap: 11px; font-size: clamp(14px, 1.5vw, 16.5px); font-weight: 600; color: var(--ink); }
.pain svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--teal); }
.aud-card--checks .pain svg { color: var(--blue-light); }

/* PROOF: full-bleed monster moment */
.proof__card { max-width: 100%; }

@media (max-width: 720px) {
  .hero__ba { flex-direction: column; }
  .hero__ba-card--after { border-left: 0; border-top: 2px solid var(--teal); }
  .hero__ba-card img { height: clamp(240px, 56vw, 330px); }
  .hero__ba-tag { font-size: 24px; }
  .mobile-cta {
    transform: translateY(120%); transition: transform .3s ease;
    height: 58px; gap: 8px; box-shadow: 0 -6px 30px rgba(0, 224, 194, 0.32);
  }
  .mobile-cta svg { width: 20px; height: 20px; }
  .mobile-cta.is-shown { transform: translateY(0); }
}

/* ============================================================
   FIRE REDESIGN — ROUND 3  (section "rooms" + standalone 32%)
   Each section gets a distinct backdrop so the scroll feels like
   a journey, not one template repeated.
   ============================================================ */
.problem { background: var(--bg); }
.different { background: var(--bg-2); border-top: 1px solid var(--border-soft); }
.how {
  background: var(--bg);
  background-image: radial-gradient(rgba(0, 224, 194, 0.07) 1.1px, transparent 1.1px);
  background-size: 26px 26px;
}
.app {
  background: radial-gradient(ellipse 72% 75% at 82% 22%, rgba(42, 166, 214, 0.13), transparent 60%), var(--bg-2);
  border-top: 1px solid var(--border-soft);
}
.engagement { background: var(--pure); border-top: 1px solid var(--border-soft); }
.proof { background: var(--bg-2); border-top: 1px solid var(--border-soft); }

/* PROOF: 32% as a standalone centered moment */
.proof__glow { left: 50%; transform: translate(-50%, -50%); width: 620px; height: 620px; opacity: 0.42; }
.proof__card--stack { flex-direction: column; align-items: center; text-align: center; gap: clamp(20px, 3vw, 38px); max-width: 760px; margin: 0 auto; }
.proof__card--stack .proof__metric { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.proof__card--stack .proof__metric-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(12px, 1.3vw, 15px) !important; color: var(--ink-muted); white-space: nowrap; max-width: none; }
/* gradient hairline between the 32% and its label (Ted 7/16) */
.proof__card--stack .proof__metric .proof__metric-label::before {
  content: "";
  display: block;
  width: min(230px, 90%);
  height: 1px;
  margin: 2px auto 12px;
  background: linear-gradient(90deg, transparent, rgba(0, 224, 194, 0.55), transparent);
}
/* AltSol logo: a touch bigger, nudged down toward the video card (Ted 7/16) */
.proof__card--stack .proof__logo { height: clamp(84px, 9.8vw, 118px); margin-top: 0; transform: translate(-16px, -10px); }
.proof__card--stack .proof__brand { display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* ============================================================
   ROUND 4 — PJ feedback 6/22
   • Hero: copy left-aligned, before → arrow → after stacked vertical on the right
   • Eyebrow kickers removed from markup ("don't need titles")
   • "Why different" + "How it works": de-boxed, embedded in the page (not blocky)
   • Engagement: per-tier detail restored (OG copy)
   ============================================================ */

/* ---- HERO: split — copy left, before→after vertical+arrow right ---- */
.hero { display: block; padding: clamp(40px, 5vw, 78px) 0 0; }
.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  text-align: left;
  padding-bottom: clamp(44px, 6vw, 84px);
  max-width: 1400px;
}
.hero__copy {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: clamp(18px, 2vw, 26px); max-width: 780px; margin: 0 auto;
}
.hero__title { font-size: clamp(44px, 5.6vw, 78px); line-height: 1.04; margin: 0; max-width: none; }
.hero__sub { margin: 0 auto; max-width: 660px; text-wrap: balance; }

.hero__ba {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 1vw, 14px);
  width: 100%; max-width: 440px; margin: 0 0 0 auto;
}
.hero__ba-card {
  position: relative; flex: 0 0 auto; width: 100%; margin: 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-3); box-shadow: var(--shadow-card);
}
.hero__ba-card--before { border-color: rgba(255,107,107,0.30); border-left-width: 1px; }
.hero__ba-card--after  { border-color: var(--border); border-left-width: 1px; }
.hero__ba-card img { width: 100%; height: clamp(150px, 19vw, 200px); object-fit: cover; object-position: center; }
.hero__ba-card::after { height: 38%; }
.hero__ba-tag {
  position: absolute; left: 14px; bottom: 12px; top: auto;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero__ba-tag--before { color: #ff9d9d; }
.hero__ba-tag--after  { color: var(--teal-light); }
.hero__ba-arrow {
  flex: 0 0 auto;
  width: clamp(40px, 3.4vw, 50px); height: clamp(40px, 3.4vw, 50px);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--teal); color: var(--ink-dark);
  box-shadow: 0 0 0 6px var(--teal-soft), 0 0 28px var(--teal-glow);
  z-index: 3;
}
.hero__ba-arrow svg { width: 52%; height: 52%; }

@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; gap: clamp(28px, 5vw, 44px); }
  .hero__copy { max-width: none; align-items: center; text-align: center; margin: 0 auto; }
  .hero__copy .btn { align-self: center; }
  .hero__ba { margin: 0 auto; max-width: 360px; }
  .hero__ba-card img { height: clamp(150px, 30vw, 190px); }
}

/* ---- WHY DIFFERENT: de-boxed, embedded ---- */
.different__grid {
  grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px);
  margin: 0 auto clamp(30px, 4vw, 48px); max-width: 920px;
}
.diff-card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; }
.diff-card::before { display: none; }
.diff-card--blue { border-left: 1px solid var(--border-soft); padding-left: clamp(28px, 5vw, 64px); }
.diff-card__icon { width: 44px; height: 44px; background: none; border: 0; border-radius: 0; color: var(--teal); margin-bottom: 14px; }
.diff-card--blue .diff-card__icon { background: none; border: 0; color: var(--blue-light); }
.diff-card__icon svg { width: 44px; height: 44px; }
.diff-card h3 { margin: 0 0 8px; }
.diff-card p { color: var(--ink-muted); }
@media (max-width: 880px) {
  .different__grid { grid-template-columns: 1fr; gap: 28px; }
  .diff-card--blue { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-soft); padding-top: 28px; }
}

/* ---- vs ERP: borderless centered punch ---- */
.erp-callout {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: 0; border-left: 0; border-radius: 0; padding: 0;
  margin: clamp(30px, 4vw, 50px) auto 0; max-width: 720px; text-align: center;
}
.erp-callout__label { background: none; border: 0; padding: 0; color: var(--ink-faint); font-size: 11px; letter-spacing: 0.18em; }
.erp-callout p { font-size: clamp(19px, 2.4vw, 28px); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.25; }
.erp-callout strong { color: var(--teal); }

/* ---- HOW IT WORKS: de-boxed, embedded in the dotted field ---- */
.pillars { grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1000px; margin: 0 auto; }
.pillar { background: none; border: 0; border-radius: 0; padding: clamp(10px, 1.4vw, 18px) clamp(14px, 2vw, 30px); gap: 10px; }
.pillar:not(:last-child) { border-right: 1px solid var(--border-soft); }
.pillar__num { font-size: clamp(36px, 4.2vw, 56px); }
.pillar__icon { width: 40px; height: 40px; }
.pillar h3 { margin-top: 4px; }
@media (max-width: 880px) {
  .pillars { grid-template-columns: repeat(2, 1fr); row-gap: clamp(24px, 4vw, 36px); }
  .pillar:nth-child(2n) { border-right: 0; }
  .pillar:nth-child(1), .pillar:nth-child(2) { border-bottom: 1px solid var(--border-soft); padding-bottom: clamp(20px, 4vw, 32px); }
}
@media (max-width: 480px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0 !important; border-bottom: 1px solid var(--border-soft); padding: 20px 0; }
  .pillar:last-child { border-bottom: 0; }
}

/* ---- ENGAGEMENT: detail restored (OG) ---- */
.level { gap: 12px; padding: clamp(24px, 2.6vw, 32px) clamp(18px, 2vw, 24px); }
.level__desc { font-size: 13px; line-height: 1.5; color: var(--ink-muted); margin: 4px 0 0; }
.level--featured .level__desc { color: var(--ink); }

/* ============================================================
   PREMIUM ELEVATION PASS  (pt-brief.json — all 17 refinements)
   CSS-only craft lift. Zero layout/copy/color changes.
   ============================================================ */

/* ── 1. HERO H1 TRACKING + LINE-HEIGHT ── */
h1 { letter-spacing: -0.045em; line-height: 1.03; }
@media (max-width: 768px) { h1 { letter-spacing: -0.03em; } }

/* ── 2. SECTION TITLE TRACKING + ORPHAN FIX ── */
.section__title { letter-spacing: -0.03em; }
.section__head { max-width: 920px; text-wrap: balance; }
/* Each headline thought gets its own line — the accent never splits a phrase
   like "supply chain" across lines mid-compound. */
.section__title .accent, .section__title .accent-blue { display: block; margin-top: 6px; text-wrap: auto; }
@media (max-width: 768px) { .section__title { letter-spacing: -0.025em; } }

/* ── 3. H3 WEIGHT + HIERARCHY ── */
.pillar h3, .level h3, .diff-card h3 { font-weight: 700; color: var(--ink); }
.pillar p, .level p, .level__desc, .diff-card p { color: var(--ink-muted); }

/* ── 4. EYEBROW — refined style (class is defined in markup; tune parameters) ── */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; opacity: 0.8; }

/* ── 5. PROOFBAR: stat letter-spacing + taller divider ── */
.proofbar__stat { letter-spacing: -0.01em; }
.proofbar__divider { height: 26px; opacity: 0.5; }

/* ── 6. CTA BUTTON: glow at rest dimmed → hover ignition + snap easing ── */
.btn--primary {
  background: linear-gradient(135deg, var(--teal-light) 0%, var(--teal) 50%, var(--teal-deep) 100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn--primary::before { opacity: 0.14; transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), filter 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.btn--primary:hover { background: linear-gradient(145deg, var(--teal-light) 0%, var(--teal) 50%, var(--teal-deep) 100%); transform: translateY(-1px); }
.btn--primary:hover::before { opacity: 0.52; }

/* ── 7. AUD-CARD TOP ACCENT SEAL ── */
.aud-card--floor::before {
  background: linear-gradient(90deg, var(--teal), transparent 60%);
  background-size: 60% 100%;
}
.aud-card--floor { box-shadow: var(--shadow-card), inset 0 1px 0 rgba(0, 224, 194, 0.30); }

/* ── 8. PILLAR HAIRLINES — teal-tinted visible dividers ── */
.pillar:not(:last-child) { border-right: 1px solid rgba(0, 224, 194, 0.18); }
/* mobile overrides keep existing responsive rules intact */
@media (max-width: 880px) {
  .pillar:nth-child(2n) { border-right: 0 !important; }
  .pillar:nth-child(1), .pillar:nth-child(2) { border-bottom: 1px solid rgba(0, 224, 194, 0.18); }
}
@media (max-width: 480px) {
  .pillar { border-right: 0 !important; border-bottom: 1px solid rgba(0, 224, 194, 0.18); }
  .pillar:last-child { border-bottom: 0 !important; }
}

/* ── 9. PROOF CARD — stronger glow + lit top edge ── */
.proof__card {
  box-shadow: var(--shadow-card),
              0 0 90px rgba(0, 224, 194, 0.18),
              inset 0 1px 0 rgba(0, 224, 194, 0.28);
}

/* ── 10. ENGAGEMENT LEVEL CARDS — rest depth + premium hover travel ── */
.level:not(.level--featured) {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.level:not(.level--featured):hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.52);
}

/* ── 11. DIFF-CARD + AUD-CARD BORDER STANDARDIZATION ── */
/* diff-cards (not blue accent) get soft border */
.diff-card { border-color: var(--border-soft); }
/* aud-card--floor keeps its teal border, checks keeps its blue border — no change needed */

/* ── 12. APP SCREEN TRAFFIC LIGHT DOTS ── */
.app-screen__dot:nth-child(1) { background: #ff5f56; }
.app-screen__dot:nth-child(2) { background: #febc2e; }
.app-screen__dot:nth-child(3) { background: #28c840; }

/* ── 13. REVEAL EASING — expo-out snap, shorter travel ── */
.reveal { transform: translateY(16px); transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── 14. MOBILE STICKY CTA — gradient surface ── */
.mobile-cta { background: linear-gradient(135deg, var(--teal-light), var(--teal-deep)); }

/* ── 15. HERO BEFORE/AFTER — card borders + lit teal arrow ── */
.hero__ba-card--before { border-color: rgba(255, 255, 255, 0.07); }
.hero__ba-card--after  { border-color: rgba(0, 224, 194, 0.22); }
.hero__ba-arrow { filter: drop-shadow(0 0 8px rgba(0, 224, 194, 0.44)); }

/* ── 16. FOCUS-VISIBLE RINGS ── */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 17. SECTION VERTICAL RHYTHM — single clamp token ── */
:root { --section-v: clamp(72px, 9vw, 108px); }
.section { padding: var(--section-v) 0; }
@media (max-width: 720px) { .section { padding: 48px 0; } }

/* ── 18. HERO BEFORE/AFTER — transparent illustrations, labels above,
   red glow on "before", green glow on "after" (Ted 6/29).
   Overrides the earlier card/cover/overlay treatment (this art is
   transparent line-illustration, not a cropped photo). ── */
.hero__ba {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, 1vw, 12px);
  width: 100%; max-width: 460px; margin: 0 0 0 auto;
}
.hero__ba-card {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
.hero__ba-card::after { content: none; display: none; }

/* label ABOVE the frame */
.hero__ba-tag {
  position: static; left: auto; bottom: auto; top: auto; z-index: auto;
  display: inline-flex; align-items: baseline; gap: 0;
  margin: 0 0 clamp(9px, 1.3vw, 15px); padding: 0;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font-weight: 900; font-size: clamp(21px, 2.4vw, 31px);
  letter-spacing: 0.01em; text-transform: none; line-height: 1;
}
.hero__ba-tag--before { color: #ff6b6b; text-shadow: 0 0 16px rgba(255, 80, 80, 0.55); }
.hero__ba-tag--before .hero__ba-tag-word { text-decoration: line-through; text-decoration-thickness: 0.09em; }
.hero__ba-tag--after { color: #23cf94; text-shadow: 0 0 16px rgba(15, 200, 140, 0.5); }
.hero__ba-tag-mark { font-weight: 900; }

/* the illustration — no box. The FRAME height is auto (wraps the image), so the
   art can never overflow into the next element. The image scales to a max-height
   that tracks the viewport, so the whole before→after stack fits any screen.
   Glow lives on the ARTWORK (drop-shadow), not a rectangle.
   NOTE: `.hero__ba-card .hero__ba-frame img` (0,2,1) intentionally out-specifies
   the seven legacy `.hero__ba-card img` cover-photo rules above (0,1,1). */
.hero__ba-frame {
  position: relative; width: 100%;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 0; overflow: visible;
  background: none; box-shadow: none;
}
.hero__ba-card .hero__ba-frame img {
  display: block; width: auto; height: auto;
  max-width: 100%;
  max-height: clamp(210px, 34vh, 330px);
  /* `fill` (not contain): the element already matches the image's natural ratio,
     so there's no distortion — and it stops WebKit clipping the drop-shadow glow
     into a hard rectangle at the image box. */
  object-fit: fill; margin: 0 auto;
}
/* colored halo hugs the illustration's silhouette (not a rectangle) */
.hero__ba-card--before .hero__ba-frame img {
  max-height: clamp(185px, 30vh, 290px); /* before reads a touch smaller than after */
  filter: drop-shadow(0 0 7px rgba(255, 70, 70, 0.5)) drop-shadow(0 0 15px rgba(255, 70, 70, 0.2));
}
.hero__ba-card--after .hero__ba-frame img {
  filter: drop-shadow(0 0 7px rgba(10, 196, 136, 0.5)) drop-shadow(0 0 15px rgba(10, 196, 136, 0.22));
}
/* Halftone layer sits directly behind the AFTER illustration, matching its exact
   box (the stack shrink-wraps to the illustration). No glow on this one. */
.hero__ba-after-stack { position: relative; display: inline-block; line-height: 0; }
.hero__ba-after-stack > img { position: relative; z-index: 1; }
.hero__ba-card--after .hero__ba-frame img.hero__ba-after-layer,
.util--expo .expo-ba .hero__ba-card--after .hero__ba-frame img.hero__ba-after-layer {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0;
  object-fit: fill;
  filter: none;
  pointer-events: none;
}

/* Support copy lives in a card, not a text stack — same language as the audience
   cards (gradient top edge, soft border) so the hero stops reading as pure type. */
.hero__os-card {
  position: relative;
  margin: 10px auto 4px;
  padding: 18px 30px 17px;
  max-width: 580px;
  background: linear-gradient(180deg, rgba(0, 224, 194, 0.05), var(--bg-3) 55%);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.hero__os-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
}
.hero__os-line {
  font-size: clamp(15px, 1.25vw, 17.5px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 6px;
  text-wrap: balance;
}
.hero__os-note {
  font-size: clamp(12px, 0.95vw, 13.5px);
  color: var(--ink-faint);
  line-height: 1.55;
  text-wrap: balance;
}

/* Desktop: condense the before/after column — labels hug the art, tighter arrow gap.
   (Images are cropped to content now; max-heights re-tuned so the art reads the same size.) */
@media (min-width: 601px) {
  .hero__ba { gap: 4px; margin-right: 30px; }
  .hero__ba-tag { margin-bottom: 13px; }
  .hero__ba-card .hero__ba-frame img { max-height: clamp(182px, 30vh, 292px); }
  .hero__ba-card--before .hero__ba-frame img { max-height: clamp(160px, 26.5vh, 256px); }
}

/* bare glowing teal down-arrow between the two illustrations (no box/ring) */
.hero__ba-arrow {
  flex: 0 0 auto;
  width: clamp(28px, 2.6vw, 36px); height: clamp(28px, 2.6vw, 36px);
  margin: clamp(2px, 0.5vw, 6px) 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--teal);
  filter: drop-shadow(0 0 9px rgba(0, 224, 194, 0.65));
}
.hero__ba-arrow svg { width: 100%; height: 100%; }

@media (max-width: 920px) {
  .hero__ba { margin: 0 auto; max-width: 420px; }
  .hero__ba-card .hero__ba-frame img { max-height: clamp(170px, 34vw, 250px); }
  .hero__ba-card--before .hero__ba-frame img { max-height: clamp(150px, 30vw, 220px); }
}

/* ── 19. HERO COPY POLISH — soft neon glow on the teal accent line so it reads
   "lit" like the illustrations on the right; a touch more presence + air on the
   subhead. Restrained, and no copy changes. ── */
.hero__title .accent { text-shadow: 0 0 8px rgba(0, 224, 194, 0.13), 0 0 22px rgba(0, 224, 194, 0.13); }
/* Desktop: accent is the support thought — sits below the white hook, ~60% of its size,
   with a hand-set break so "supply chain" never splits. Mobile (≤600px) keeps its own rule. */
@media (min-width: 601px) {
  .hero__title .accent { font-size: 0.62em; line-height: 1.16; margin-top: 16px; letter-spacing: -0.015em; }
}
@media (max-width: 600px) {
  .hero__accent-br { display: none; }
}
.hero__sub { color: #c6dbd6; letter-spacing: 0.006em; }

/* ── 20. DYNAMIC SECTION UPGRADES ─────────────────────────────────────────
   One glowing-icon-chip + hover/reveal language across the Problem, Why-
   different, and Four-pillars sections — bigger symbols, tighter rhythm,
   more motion. No copy changed. ───────────────────────────────────────── */

/* ===== A · PROBLEM CARDS ===== */
/* the top accent was a half-faded teal→transparent line that read "broken";
   make it a centered glow bar that's clearly intentional on both cards */
.aud-card::before { height: 2px; }
.aud-card--floor::before  { background: linear-gradient(90deg, transparent, var(--teal) 50%, transparent);       box-shadow: 0 0 12px rgba(0, 224, 194, 0.44); }
.aud-card--checks::before { background: linear-gradient(90deg, transparent, var(--blue-light) 50%, transparent); box-shadow: 0 0 12px rgba(42, 166, 214, 0.55); }

.aud-card { padding: clamp(24px, 2.8vw, 36px); transition: transform .32s cubic-bezier(.16,1,.3,1), border-color .32s ease, box-shadow .32s ease; }
.aud-card--floor:hover  { transform: translateY(-5px); border-color: rgba(0, 224, 194, 0.5);  box-shadow: 0 22px 54px rgba(0,0,0,.5), 0 0 42px rgba(0, 224, 194, 0.12); }
.aud-card--checks:hover { transform: translateY(-5px); border-color: rgba(42, 166, 214, 0.55); box-shadow: 0 22px 54px rgba(0,0,0,.5), 0 0 42px rgba(42, 166, 214, 0.15); }

.aud-card__tag { font-size: clamp(12px, 1.2vw, 13.5px); letter-spacing: 0.15em; margin-bottom: clamp(18px, 2.2vw, 26px); }

/* pain rows → glowing icon-chip + bigger text + dividers; centered to fill the card */
.aud-card .pains { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.aud-card .pain {
  gap: 15px; align-items: center;
  font-size: clamp(15px, 1.5vw, 17px); font-weight: 600; color: var(--ink);
  padding: clamp(13px, 1.5vw, 17px) 0; border-top: 1px solid var(--border-soft);
}
.aud-card .pains .pain:first-child { border-top: 0; }
.aud-card .pain svg {
  width: 22px; height: 22px; padding: 9px; box-sizing: content-box;
  border-radius: 12px; flex: 0 0 auto;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.aud-card--floor  .pain svg { color: var(--teal);      background: var(--teal-soft); border: 1px solid var(--border);      box-shadow: 0 0 16px rgba(0, 224, 194, 0.16); }
.aud-card--checks .pain svg { color: var(--blue-light); background: var(--blue-soft); border: 1px solid var(--blue-border); box-shadow: 0 0 16px rgba(42, 166, 214, 0.20); }
.aud-card:hover .pain svg { transform: scale(1.08); }
.aud-card--floor:hover  .pain svg { box-shadow: 0 0 22px rgba(0, 224, 194, 0.32); }
.aud-card--checks:hover .pain svg { box-shadow: 0 0 22px rgba(42, 166, 214, 0.40); }

/* staggered row reveal — gated on .reveal so a no-JS page still shows the rows */
.aud-card.reveal .pain { opacity: 0; transform: translateX(-12px); transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.aud-card.is-visible .pain { opacity: 1; transform: none; }
.aud-card.is-visible .pain:nth-child(1) { transition-delay: .14s; }
.aud-card.is-visible .pain:nth-child(2) { transition-delay: .26s; }
.aud-card.is-visible .pain:nth-child(3) { transition-delay: .38s; }

/* ===== B · WHY-DIFFERENT ===== */
.diff-card__icon {
  width: 60px; height: 60px; margin-bottom: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px; background: var(--teal-soft); border: 1px solid var(--border);
  box-shadow: 0 0 22px rgba(0, 224, 194, 0.16);
  transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease;
}
.diff-card__icon svg { width: 32px; height: 32px; filter: drop-shadow(0 0 8px rgba(0, 224, 194, 0.5)); }
.diff-card--blue .diff-card__icon { background: var(--blue-soft); border-color: var(--blue-border); box-shadow: 0 0 22px rgba(42, 166, 214, 0.16); }
.diff-card--blue .diff-card__icon svg { filter: drop-shadow(0 0 8px rgba(42, 166, 214, 0.5)); }
.diff-card:hover .diff-card__icon { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 32px rgba(0, 224, 194, 0.34); }
.diff-card--blue:hover .diff-card__icon { box-shadow: 0 0 32px rgba(42, 166, 214, 0.34); }
.diff-card h3 { font-size: clamp(19px, 2vw, 24px); }

/* vs-ERP callout: light up the punch line */
.erp-callout__label { color: var(--teal); opacity: 0.8; text-transform: uppercase; font-weight: 700; letter-spacing: 0.16em; }
.erp-callout strong { text-shadow: 0 0 18px rgba(0, 224, 194, 0.32); }

/* ===== C · FOUR PILLARS ===== */
.pillar { gap: 12px; padding: clamp(12px, 1.6vw, 20px) clamp(14px, 2vw, 28px); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.pillar__num { font-size: clamp(32px, 3.4vw, 46px); opacity: 0.85; letter-spacing: -0.02em; }
.pillar__icon {
  width: 64px; height: 64px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px; background: var(--teal-soft); border: 1px solid var(--border);
  box-shadow: 0 0 22px rgba(0, 224, 194, 0.14);
  transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease;
}
.pillar__icon svg { width: 34px; height: 34px; filter: drop-shadow(0 0 7px rgba(0, 224, 194, 0.5)); }
.pillar:hover { transform: translateY(-5px); }
.pillar:hover .pillar__icon { transform: scale(1.06); box-shadow: 0 0 32px rgba(0, 224, 194, 0.36); }
.pillar h3 { font-size: clamp(15px, 1.5vw, 18px); margin-top: 6px; }
.pillar p { font-size: clamp(12.5px, 1.3vw, 14px); color: var(--ink-faint); }
.pillar:not(:last-child) { border-right: 1px solid rgba(0, 224, 194, 0.12); }

/* respect reduced-motion: kill the transforms, never leave rows hidden */
@media (prefers-reduced-motion: reduce) {
  .aud-card, .aud-card .pain, .aud-card .pain svg,
  .diff-card__icon, .pillar, .pillar__icon { transition: none !important; transform: none !important; }
  .aud-card.reveal .pain { opacity: 1 !important; }
}

/* ── 22. APP CAPABILITY ICONS — give the icon real breathing room inside its
   chip. The svg was sized 100% of a 30px chip, so it sat ~1px from every edge.
   Bigger chip + properly inset icon (≈12px padding) + a faint glow to match. ── */
.cap__icon {
  width: 46px; height: 46px; border-radius: 13px;
  box-shadow: 0 0 16px rgba(42, 166, 214, 0.14);
}
.cap__icon svg { width: 22px; height: 22px; }

/* ── 21. PROOF CARD — un-squish the brand/testimonial side. The base grid was
   `1fr auto 1fr` with only two children, so the 3rd column was empty (0px) and
   the brand column starved to 176px — wrapping the "Coming soon" badge and the
   "Director of Operations, AltSol" line onto 3 lines. Clean 2-column split with
   a guaranteed minimum width for the brand side. ── */
.proof__card.proof__card--stack {
  /* Ted 7/28: back to the side-by-side look — company logo + headline result on
     the LEFT, that person's video on the RIGHT. Each carousel slide is one
     customer, so the pair always belongs to the same person. */
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  grid-template-areas: "brand video" "stat video";
  gap: clamp(10px, 1.6vw, 18px) clamp(28px, 4vw, 56px);
  max-width: 940px;
  align-items: center;
}
.proof__metric { grid-area: stat; align-self: start; }
.proof__card--stack .proof__brand { grid-area: brand; align-self: end; align-items: center; gap: 14px; }
.proof__card--stack .proof__metric .proof__metric-label { margin: 0; text-align: center; }
.proof__video, .proof__card--stack .ptvid { grid-area: video; justify-self: center; align-self: center; }
.proof__video-meta > strong, .proof__video-meta > span:last-child { white-space: nowrap; }
/* mobile: stack to one column (this selector out-specifies the base 760 rule,
   so it has to revert the columns itself or the 32% column collapses to 0). */
@media (max-width: 760px) {
  .proof__card.proof__card--stack { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 34px); }
}

/* ── 23. MOBILE REFINEMENTS (≤600px) — hierarchy + de-clunk pass: stronger
   hero headline, HORIZONTAL before/after, tidy 2×2 pillars, compact engagement
   rows, bolder 32% box. Phone-only; no copy changed. ── */
@media (max-width: 600px) {

  /* A · HERO — order: headline → before/after → CTA → subhead. BIG bold
     "Packaging chaos has a fix.", teal accent on ONE line (smaller to fit),
     lots of breathing room above & below the before/after. */
  .hero__inner { display: flex !important; flex-direction: column; align-items: center; gap: 16px; }
  .hero__copy { display: contents; }
  .hero__title { order: 1; margin: 0; font-size: clamp(36px, 10.6vw, 48px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
  /* one line, sized to sit just INSIDE the headline's widest line. The string
     inks at ~18.9x its font-size, so the old 5.1vw overflowed the 18px container
     padding on every phone (text ran to ~7px off each screen edge). 4.05vw keeps
     it narrower than the h1 above it at 320-430px, which is what holds the
     hierarchy. Both scale on vw in that range, so the relationship is stable. */
  .hero__title .accent { font-size: clamp(13px, 4.05vw, 18px); font-weight: 800; white-space: nowrap; margin-top: 10px; letter-spacing: -0.01em; }
  .hero__copy .btn--lg { order: 3; margin-top: 60px; }
  .hero__os-card { order: 4; margin: 10px auto 0; padding: 14px 18px 13px; max-width: min(100% - 72px, 340px); }
  .hero__os-line { font-size: 13px; line-height: 1.45; margin-bottom: 5px; }
  .hero__os-note { font-size: 11.5px; line-height: 1.45; }

  /* B · BEFORE / AFTER — horizontal band, big breathing room above & below.
     align-items:flex-start so the Before:/After: labels line up at the top
     (the arrow re-centers itself via align-self below). */
  .hero__ba { order: 2; flex-direction: row; align-items: flex-start; justify-content: center; gap: 12px; max-width: 100%; margin: 26px 0 0; }
  .hero__ba-card { flex: 1 1 0; min-width: 0; }
  .hero__ba-card .hero__ba-frame img { max-height: none; max-width: 80%; width: 80%; } /* after: a touch smaller now */
  .hero__ba-card--before .hero__ba-frame img { max-width: 78%; width: 78%; } /* before ~ matches after now */
  /* after-stack: move the 80% width onto the wrapper so the halftone layer tracks
     the illustration's exact box (percentage-on-img breaks the shrink-wrap here). */
  .hero__ba-card--after .hero__ba-after-stack { display: block; width: 80%; margin: 0 auto; }
  .hero__ba-card--after .hero__ba-frame .hero__ba-after-stack > img:not(.hero__ba-after-layer) { width: 100%; max-width: 100%; height: auto; }
  .hero__ba-tag { font-size: 12.5px; margin-bottom: 14px; } /* space between label and image */
  .hero__ba-arrow { transform: rotate(-90deg); margin: 0; align-self: center; }

  /* B2 · VS-AN-ERP CALLOUT — each sentence on its own line (the teal half
     was wrapping mid-phrase: "We implement / systems."). */
  .erp-callout p strong { display: block; }

  /* C · FOUR PILLARS — tidy 2×2 grid instead of one long column */
  .pillars { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .pillar { padding: clamp(22px, 6vw, 30px) 12px !important; border: 0 !important; }
  .pillar:nth-child(odd)   { border-right: 1px solid rgba(0, 224, 194, 0.12) !important; }
  .pillar:nth-child(-n+2)  { border-bottom: 1px solid rgba(0, 224, 194, 0.12) !important; }
  .pillar__num { font-size: 30px; }
  .pillar__icon { width: 54px; height: 54px; }
  .pillar__icon svg { width: 28px; height: 28px; }
  .pillar h3 { font-size: 14.5px; }
  .pillar p { font-size: 12px; }

  /* D · FOUR WAYS TO WORK — compact horizontal rows with room for the copy */
  .levels { grid-template-columns: 1fr !important; gap: 10px; }
  .level {
    display: grid; grid-template-columns: auto 1fr auto;
    column-gap: 13px; row-gap: 4px; align-items: center; text-align: left;
    padding: 16px 16px; background: var(--bg-2);
    border: 1px solid var(--border-soft); border-radius: 16px;
  }
  .level__num { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; font-size: 36px; opacity: 0.55; }
  .level h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 16px; white-space: nowrap; }
  .level__chip { grid-column: 3; grid-row: 1; justify-self: end; font-size: 10.5px; padding: 4px 9px; white-space: nowrap; }
  .level__desc { grid-column: 2 / 4; grid-row: 2; margin: 0; font-size: 13px; line-height: 1.45; }
  .level--featured { border-color: rgba(0, 224, 194, 0.4); }

  /* E · 32% PROOF BOX — AltSol logo on top, 32% below it, testimonial below (matches desktop). */
  .proof__card.proof__card--stack {
    grid-template-columns: 1fr !important;
    grid-template-areas: "brand" "stat" "video" !important;
    gap: 16px 0 !important; align-items: center; justify-items: center; text-align: center;
  }
  .proof__card { padding: 30px 16px 28px !important; }
  .proof__metric { grid-area: stat; align-items: center; text-align: center; justify-self: center; width: 100%; }
  /* NO translateX here. The layout box of .proof__stat-num already contains the
     "%", so the flex centering lands it true; the old translateX(0.32em) shoved
     the whole lockup 22.6px right of the logo/label/video axis (Ted 7/24). */
  .proof__stat-num { font-size: clamp(54px, 18vw, 80px) !important; line-height: 0.9; align-self: center; transform: none; }
  .proof__brand { grid-area: brand; width: 100%; align-items: center; text-align: center; gap: 8px; margin-bottom: 2px; }
  .proof__logo, .proof__card--stack .proof__logo { height: clamp(58px, 15vw, 78px); margin-top: 0; transform: none; }
  .proof__metric .proof__metric-label { font-size: 11px !important; text-align: center; letter-spacing: 0.08em !important; line-height: 1.4; margin: 6px 0 0; }
  /* phone layout keeps the plain label — no hairline */
  .proof__card--stack .proof__metric .proof__metric-label::before { content: none; }
  .proof__card--stack .ptvid { grid-area: video; margin-top: 10px; }

  /* F · SECTION HEADINGS — less chunky: smaller + lighter weight */
  .section__title { font-size: clamp(25px, 7.2vw, 33px); line-height: 1.14; letter-spacing: -0.02em; font-weight: 700; }

  /* G · NOT A VENDOR / NOT AN ERP — real cards (was bland, floating left) */
  .different__grid { gap: 12px; }
  .diff-card {
    display: grid; grid-template-columns: auto 1fr; column-gap: 15px; row-gap: 2px;
    align-items: center; text-align: left;
    background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 16px;
    padding: 18px;
  }
  .diff-card--blue { border: 1px solid var(--border-soft); padding: 18px; }
  .diff-card__icon { grid-row: 1 / span 2; align-self: center; margin-bottom: 0; width: 48px; height: 48px; }
  .diff-card__icon svg { width: 26px; height: 26px; }
  .diff-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 17px; }
  .diff-card p { grid-column: 2; grid-row: 2; margin: 0; font-size: 13px; line-height: 1.45; }

  /* H · APP CAPABILITY ICONS — all six in ONE compact row (de-boxed) */
  .app__caps { grid-template-columns: repeat(6, 1fr) !important; gap: 4px !important; }
  .cap { padding: 6px 1px !important; gap: 7px !important; border: 0 !important; background: none !important; }
  .cap__icon { width: 34px; height: 34px; border-radius: 9px; }
  .cap__icon svg { width: 16px; height: 16px; }
  .cap h3 { font-size: 8.5px !important; line-height: 1.2; letter-spacing: -0.01em; }
}

/* ── 24. QA PASS (2026-07-08) — cross-viewport cleanups ── */

/* The problem quote: same rule — each thought on its own line, never split the compound. */
.problem__quote .accent { display: block; margin-top: 4px; text-wrap: auto; }

/* Pillars ≥601px: reserve two title lines so subtitles align across the row
   even when one title ("ETA Tracking & Receiving") wraps. */
.pillar h3 { min-height: 2.5em; display: flex; align-items: flex-start; justify-content: center; }

/* Mobile: accents a step smaller so "supply chain" never splits at a wrap. */
@media (max-width: 600px) {
  .section__title .accent, .section__title .accent-blue { font-size: 0.82em; line-height: 1.25; text-wrap: auto; }
}

/* Why-Different cards, tablet range (601–880px): when the two cards stack they
   lose the side-by-side divider — give them the same boxed icon-row treatment
   the phone layout uses so they don't float as bare left-aligned text. */
@media (min-width: 601px) and (max-width: 880px) {
  .different__grid { gap: 14px; max-width: 620px; margin-left: auto; margin-right: auto; }
  .diff-card, .diff-card--blue {
    display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 3px;
    align-items: center; text-align: left;
    background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 16px;
    padding: 20px 22px;
  }
  .diff-card__icon { grid-row: 1 / span 2; align-self: center; margin-bottom: 0; width: 52px; height: 52px; }
  .diff-card__icon svg { width: 28px; height: 28px; }
  .diff-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 18px; }
  .diff-card p { grid-column: 2; grid-row: 2; margin: 0; font-size: 13.5px; line-height: 1.5; }
}

/* Engagement, 2-col range: don't leave the third card orphaned next to a hole. */
@media (max-width: 1100px) and (min-width: 561px) {
  .levels > .level:nth-child(3) { grid-column: 1 / -1; }
}
/* Proof label: balance instead of orphaning the last word. */
.proof__metric-label { text-wrap: balance; }

/* Engagement cards ≥561px: the short Full Service copy left a dead hole at the
   card bottom — let each desc center in its leftover space instead. */
@media (min-width: 561px) {
  .level { display: flex; flex-direction: column; padding-bottom: 20px; }
  /* .level p sets flex:1 which stretches the desc box and pins its text to the
     top — reset it so the auto margins can actually center the copy. The card's
     bottom padding is trimmed toward the 12px item gap so the centering reads
     true optically, not just mathematically. */
  .level .level__desc { flex: 0 0 auto; margin-top: auto; margin-bottom: auto; }
}

/* Why-Different cards, desktop: same boxed icon-row treatment as mobile/tablet
   (Ted 7/9 — the boxed design reads better than the de-boxed floating text). */
@media (min-width: 881px) {
  .different__grid { gap: 18px; max-width: 940px; margin-left: auto; margin-right: auto; }
  .diff-card, .diff-card--blue {
    display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 4px;
    align-items: center; text-align: left;
    background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 18px;
    padding: 26px 28px;
  }
  .diff-card__icon { grid-row: 1 / span 2; align-self: center; margin-bottom: 0; width: 56px; height: 56px; }
  .diff-card__icon svg { width: 30px; height: 30px; }
  .diff-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 20px; }
  .diff-card p { grid-column: 2; grid-row: 2; margin: 0; font-size: 14px; line-height: 1.55; }
}

/* ── 25. FRESH-EYES PANEL FIXES (2026-07-09) ── */
/* Hand break in the Different accent: only needed once the line can't hold the
   full phrase (≤880px). Desktop wraps clean on its own. */
@media (min-width: 881px) { .t-br { display: none; } }

/* Pillars outro: the payoff clause gets its own line, matching every other
   two-part headline on the page. */
.how__outro-lead .accent { display: block; margin-top: 4px; }

/* App mockup ≤880px: keep table headers on one line; center cap rows so a
   two-line label doesn't stagger the icon row. */
@media (max-width: 880px) {
  .app-screen .app-row--head span { white-space: nowrap; font-size: 9.5px; letter-spacing: 0.04em; }
  .cap { align-items: center !important; }
}

/* ── 26. INLINE BOOKING CALENDAR (cal.com) — drops open in #book ── */
.book__cal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.85s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  margin-top: 0;
}
.book__cal.is-open { grid-template-rows: 1fr; margin-top: clamp(28px, 4vw, 48px); }
.book__cal-clip { overflow: hidden; min-height: 0; border-radius: var(--radius-lg); }
.book__cal.is-open .book__cal-clip {
  border: 1px solid var(--border);
  background: var(--bg-3);
  padding: clamp(10px, 1.6vw, 18px);
  /* Holds the panel open while the embed loads. Must stay BELOW the
     cropped embed height at the narrowest side-by-side layout (~487px),
     or the box stretches and re-exposes the cropped wordmark row. */
  min-height: 440px;
}
/* Crop the embed's bottom branding row. The inner div must track the
   iframe's REAL height (no min-height here — the iframe self-sizes), so
   the negative margin always removes the iframe's last 80px = the
   Cal.com wordmark row on the wide side-by-side layout. The narrow
   stacked layout has no wordmark — script.js flags it as .cal-stacked
   (by iframe height) and the crop turns off so slots never get cut. */
.book__cal.is-open #bookCalInner { margin-bottom: -80px; }
.book__cal.cal-stacked.is-open #bookCalInner { margin-bottom: 0; }
#bookCalInner iframe { border-radius: 12px; display: block; }
@media (max-width: 600px) {
  .book__cal.is-open .book__cal-clip { min-height: 420px; }
}
/* The stacked (narrow) embed layout lists every time slot in one huge
   column (1300px+). Cap the panel and scroll inside it instead — the
   month grid shows, the time list scrolls. */
.book__cal.cal-stacked.is-open .book__cal-clip {
  max-height: 74vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* subtle close control — slim bar pinned to the panel top; sticky so it
   stays reachable while the mobile panel scrolls internally */
.book__cal-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: flex-end;
  margin-bottom: 4px;
}
.book__cal-close {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--border-soft);
  color: var(--ink-faint);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.book__cal-close svg { width: 13px; height: 13px; }
.book__cal-close:hover { color: var(--teal); border-color: var(--border); }

/* ── 27. EXPO PAGE — before/after art as the lead visual (Ted 7/17).
   Reuses the hero__ba component; these overrides neutralize hero-specific
   offsets so the pair sits centered between the lede and the 01/02/03 blocks. */
.util--expo .expo-ba {
  margin: clamp(30px, 4.5vw, 52px) auto clamp(34px, 5vw, 56px);
  max-width: 860px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 30px);
}
.util--expo .expo-ba .hero__ba-card { flex: 1 1 0; min-width: 0; }
.util--expo .expo-ba .hero__ba-arrow { transform: rotate(-90deg); align-self: center; margin: 0; flex: 0 0 auto; }
@media (min-width: 601px) {
  .util--expo .expo-ba .hero__ba-tag { font-size: clamp(18px, 2vw, 26px); margin-bottom: 14px; }
  .util--expo .expo-ba .hero__ba-card .hero__ba-frame img { max-height: clamp(220px, 32vh, 320px); max-width: 100%; width: auto; margin: 0 auto; }
}

/* teal pulse — points you at the calendar when it's already open */
@keyframes calPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 224, 194, 0.45); border-color: var(--teal); }
  55%  { box-shadow: 0 0 0 14px rgba(0, 224, 194, 0); border-color: var(--teal); }
  100% { box-shadow: 0 0 0 0 rgba(0, 224, 194, 0); }
}
.book__cal.is-pulsing .book__cal-clip { animation: calPulse 0.75s ease-out 2; }

/* ── TESTIMONIAL RAIL (2026-07-28) — Aaron + Josh, and room for the two more
   PJ has coming. Wrapping flex row: a third/fourth card drops in with no layout
   work. Cards keep their own fixed width so they never stretch. ── */
.ptvid-rail {
  grid-area: video;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 26px);
  width: 100%;
}
.ptvid-rail .ptvid { flex: 0 0 auto; }
/* Two-up needs less width per card than the old single hero video. */
@media (min-width: 881px) {
  .ptvid-rail .ptvid { width: clamp(230px, 21vw, 270px); }
}
@media (max-width: 880px) {
  .ptvid-rail .ptvid { width: min(260px, 78vw); }
}

/* ── TESTIMONIALS — its own block, OUTSIDE the AltSol proof card (2026-07-28).
   Josh is Post Production Manager at Armory Pharmaceutical; sitting inside a card
   branded with AltSol's logo + "32% less packaging spend" read as though he
   worked there. Separate block = each speaker credited to his own company. ── */
.testimonials { margin-top: clamp(34px, 5vw, 60px); text-align: center; }
.testimonials__title {
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}

/* The AltSol card lost the video that used to fill its right half (moved to the
   testimonials block), so it no longer needs that height. */
.proof__card.proof__card--stack { padding-top: clamp(26px, 3.4vw, 40px); padding-bottom: clamp(26px, 3.4vw, 40px); }


/* ── TESTIMONIAL CAROUSEL (2026-07-28) — swipe / drag / arrows / dots.
   One slide per customer. Adding PJ's next two = two more <article>s. ── */
.tcar {
  position: relative;
  /* Match the card's own max-width so SLIDE width == TRACK width. They were
     1088 vs 940, and the track translates by 100% of ITSELF — every slide
     landed 148px off. Constraining here keeps them identical. */
  max-width: 940px;
  margin-inline: auto;
}
/* the clip lives here, so the arrows (on .tcar) sit OUTSIDE it and never
   overlap the card */
/* The clip only needs to hide the NEIGHBOURING slide, which is offset
   horizontally — so vertical room costs nothing and stops the video's drop
   shadow (0 24px 60px = 84px of reach) being sliced off at the bottom.
   Negative margin cancels the padding so nothing shifts. */
.tcar__viewport {
  overflow: hidden;
  padding: 3px 3px 96px;
  margin: -3px -3px -96px;
}
.tcar__track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  touch-action: pan-y;            /* let the page scroll vertically; we own horizontal */
}
/* iOS swipe fix #2 (Ted 7/28): "the armory surrounding dont let you swipe".
   Both slides hit-test identically in Chrome — same element, same touch-action —
   so the difference isn't the box, it's what's ON it. AltSol's area around the
   video is mostly empty; Armory's is dense with text (logo, company, "Hours",
   the caption). On iOS a drag that begins on text starts a SELECTION, and on an
   <img> a long-press callout, and WebKit cancels our pointer stream to service
   it. Nothing to select in a testimonial carousel, so opt the whole slide out.
   Purely behavioural — no visual change to either slide. */
.tcar__slide,
.tcar__slide * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.tcar__slide img { -webkit-user-drag: none; user-drag: none; }

/* iOS-specific swipe fix (Ted 7/28, Armory slide). touch-action is per-element,
   so the <video> stayed at `auto` even with pan-y on the slide. On iOS that lets
   WebKit start its OWN gesture handling for a horizontal drag on the video and
   fire `pointercancel` at us — which aborts the drag before it passes threshold.
   Josh's slide is mostly video, so almost every swipe-back began there. Chrome's
   mobile emulation does NOT reproduce this, which is why synthetic tests passed.
   The playing video is deliberately excluded: pan-y there fights the native
   scrubber's horizontal drag, and that strip is already guarded in JS. */
.ptvid,
.ptvid__cover,
.ptvid__teaser { touch-action: pan-y; }
.ptvid:not(.is-playing) .ptvid__full { touch-action: pan-y; }

.tcar__slide {
  /* touch-action does NOT inherit, so pan-y on the track alone left every child
     (crucially the video) at `auto` — iOS was free to claim horizontal gestures
     that started on them. Declaring it here covers the whole slide surface. The
     <video> itself is deliberately left out: pan-y there would fight the native
     scrubber's horizontal drag. */
  touch-action: pan-y;
  flex: 0 0 100%;
  min-width: 0;
  max-width: none;                /* the .tcar cap already sizes it */
  /* the slide IS the proof card — it keeps that styling, just no outer margin */
  margin: 0;
}
.tcar.is-dragging .tcar__track { transition: none; }

/* arrows — sit outside the card on desktop, hidden on touch (swipe instead) */
.tcar__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 14, 13, 0.82);
  border: 1px solid var(--border);
  color: var(--ink); cursor: pointer; z-index: 3;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.tcar__nav svg { width: 20px; height: 20px; }
.tcar__nav:hover { border-color: var(--teal); background: rgba(0, 224, 194, 0.12); }
.tcar__nav:disabled { opacity: 0.25; cursor: default; }
.tcar__nav--prev { left: -62px; }
.tcar__nav--next { right: -62px; }
@media (max-width: 980px) { .tcar__nav { display: none; } }

/* dots */
.tcar__dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.tcar__dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: rgba(255, 255, 255, 0.24);
  border: 0; cursor: pointer; transition: background 0.2s ease, width 0.2s ease;
}
.tcar__dot.is-active { background: var(--teal); width: 22px; border-radius: 999px; }

/* Armory's mark is portrait where AltSol's is a wide wordmark — cap its height
   so the two slides read at the same visual weight. */
.proof__logo--armory { height: clamp(74px, 8vw, 104px) !important; width: auto; transform: none !important; }


/* Both slides share one left-column rhythm so the video sits at the same height
   on every slide — otherwise a slide with less copy (no stat yet) floats. */
.tcar__slide .proof__brand { align-self: center; }
.tcar__slide .proof__metric { min-height: 132px; justify-content: center; }
@media (max-width: 760px) { .tcar__slide .proof__metric { min-height: 0; } }

/* A word stat ("Hours") needs less size than a numeral ("32%") to carry the
   same weight — the numeral is only 2 glyphs. */
.proof__stat-num--word { font-size: clamp(56px, 9vw, 108px) !important; letter-spacing: -0.03em; }

/* company name under the logo — a quiet caption, never a headline */
.proof__company {
  display: block;
  font-size: clamp(10px, 1.05vw, 12px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 10px;
  white-space: nowrap;
}

/* ── MOBILE PROOF SLIDE (Ted 7/28) ──
   AltSol ONLY. Ted signed off on Josh/Armory's stacked layout (logo → company →
   stat → label → video), which falls out of the ≤600px block above — so every
   slide-content rule here is scoped to [data-name="Aaron"] and Josh is left
   completely alone. Do NOT widen these selectors.

   AltSol earns the side-by-side treatment because it has no company caption
   (the name is inside the wordmark), so the logo has nothing to pair with
   vertically and reads as an orphan stacked above the number. display:contents
   on the two wrappers is what lets the logo, the number and the caption become
   grid items in their own right — without it the number and its caption are
   welded together and the logo can only sit beside BOTH. ── */
@media (max-width: 760px) {
  .tcar__slide[data-name="Aaron"].proof__card--stack {
    display: grid !important;
    grid-template-columns: auto auto !important;
    /* Two empty 1fr rows (".  .") bracket the AltSol block so the slack splits
       ABOVE and BELOW it instead of pooling in one place. Aaron's content is a
       lot shorter than Josh's, and forcing its video onto Josh's line frees
       ~154px — dumped all at the bottom that left the caption stranded, all at
       the top and it crowded the video. Splitting it centres the block with no
       magic number, and it re-centres itself if the copy ever changes. */
    /* ONE spacer row, above everything (Ted 7/28: "feels weirdly disconnected,
       make it feel as one"). Splitting the slack above AND below left the stat
       block marooned midway between the card top and the video, reading as two
       separate objects. All the slack now sits above, so the lockup, caption and
       video form a single attached stack — the same top-down rhythm Josh's slide
       already has, with the free space becoming section breathing room. */
    grid-template-areas:
      ".     .    "
      "logo  stat"
      "label label"
      "video video" !important;
    justify-content: center !important;
    align-items: center;
    column-gap: clamp(20px, 6vw, 30px) !important;
    row-gap: 0 !important;
    /* Video row is 1fr so ALL the slack lands there and the video can bottom-
       anchor (Ted 7/28: keep the videos on one line across slides). Both cards
       stretch to the same track height and both videos are the same height, so
       an identical bottom offset puts their tops on the same y — no magic
       numbers, and it survives copy changes on either slide. 28px bottom matches
       what Josh's card already resolves to. The +13px on top walks the AltSol
       block down into the space that frees up. */
    /* 3:1, not 1:1 — Ted wants the block sitting lower in the space than dead
       centre, without crowding the video. The two spacers still absorb ALL the
       slack, so the video stays bottom-anchored on Josh's line regardless. */
    grid-template-rows: 1fr auto auto auto !important;
    padding: clamp(26px, 6vw, 34px) clamp(16px, 4vw, 22px) 28px !important;
  }

  .tcar__slide[data-name="Aaron"] .proof__brand,
  .tcar__slide[data-name="Aaron"] .proof__metric { display: contents; }

  .tcar__slide[data-name="Aaron"] .proof__logo {
    grid-area: logo; height: clamp(46px, 13vw, 58px) !important; width: auto;
    align-self: center; justify-self: end;
    /* optical nudge, not a layout change: the script wordmark's weight sits high
       and left of its own box, so it read as floating above the 32%. translate
       keeps it out of the grid maths — the row height and the centred lockup
       are both unaffected. */
    transform: translate(6px, 7px) !important;
  }

  .tcar__slide[data-name="Aaron"] .proof__stat-num {
    grid-area: stat; font-size: clamp(52px, 16vw, 66px) !important;
    line-height: 0.92; align-self: center; justify-self: start;
    /* Optical nudge only (Ted 7/28), same trick as the logo above — the digits'
       cap-height sits high in the line box once the raised % is in the layout,
       so centring by the box left it reading high. translateY keeps it out of
       the grid maths. NOT translateX: a stray translateX(0.32em) once shoved
       this whole lockup 22.6px off the centre axis. Vertical only. */
    transform: translateY(8px) !important;
  }

  /* 46px, not a round number: the logo carries a translate(6px,7px) optical
     nudge and the caption's own line box starts above its ink, so at margin 0
     the caption OVERLAPS the wordmark by 8px — the usable floor is ~10px, not 0.
     28px lands a 20px visual gap (Ted 7/28: bring the lockup down closer to the
     caption). Re-solve it if either nudge changes. */
  .tcar__slide[data-name="Aaron"] .proof__metric-label {
    grid-area: label; justify-self: center; text-align: center !important;
    margin: 24px 0 0 !important; font-size: 11px !important;
    letter-spacing: 0.1em; line-height: 1.45; max-width: 30ch;
  }
  /* The teal hairline from the desktop lockup, restored on mobile (Ted 7/28 —
     "the hours then the line below it"). This is the piece that ties the stat to
     its caption; without it they read as two stacked items, which is what made
     the slide feel disconnected. Reuses the desktop gradient exactly, just
     sized for the phone. */
  .tcar__slide[data-name="Aaron"] .proof__metric-label::before {
    content: "" !important;
    display: block;
    width: min(210px, 92%);
    height: 1px;
    margin: 0 auto 13px;
    background: linear-gradient(90deg, transparent, rgba(0, 224, 194, 0.55), transparent);
  }

  .tcar__slide[data-name="Aaron"] .ptvid {
    grid-area: video; justify-self: center; align-self: end;
    margin-top: 26px !important;   /* == Josh's caption->video gap, so both slides share a rhythm */
  }

}

/* ── ARMORY: "Hours" + "saved every week" as ONE statement (Ted 7/28) ──
   Three things were breaking the sentence: the hairline literally sits between
   them as a separator, the 0.1em tracking spaces the caption into a label rather
   than a phrase, and --ink-muted drops it into a different register from the
   teal number. Kill the rule, tighten the gap, pull the tracking in and lift the
   colour so the eye carries straight from "Hours" into the line under it.
   Applies at every width — the disconnect reads the same on desktop and phone.
   AltSol KEEPS its hairline (Ted approved it there): "32%" is a figure that
   needs a label, "Hours" is the first word of a sentence. ── */
.tcar__slide[data-name="Josh"] .proof__metric-label::before { content: none !important; }
.tcar__slide[data-name="Josh"] .proof__metric { gap: 4px; }
.tcar__slide[data-name="Josh"] .proof__metric-label {
  /* The first pass here only removed the hairline and shaved 4px — invisible on
     mobile, where the hairline never rendered in the first place. The actual
     break is REGISTER: 44px bold teal dropping to 11px grey tracked-out caps is
     two different typographic voices, and no amount of gap-tightening makes
     those read as one sentence. So: drop the caps, size it up, add weight, pull
     the tracking to near-normal and lift the colour. "Hours / Saved every week"
     now reads as one line of writing. AltSol keeps its caps + hairline — that's
     a figure with a label, a different job. */
  text-transform: none !important;
  font-size: clamp(15px, 4.2vw, 20px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  color: rgba(236, 248, 245, 0.88) !important;
  margin-top: 0 !important;
  white-space: nowrap;
}

@media (max-width: 760px) {
  /* carousel chrome — slide-agnostic, applies to both */
  .tcar__nav { display: grid !important; width: 36px; height: 36px; }
  .tcar__nav svg { width: 16px; height: 16px; }
  .tcar__nav--prev { left: 6px; }
  .tcar__nav--next { right: 6px; }
  .tcar { max-width: none; }
}
}
}
}
}
}

/* ── GLOW CLIPPING FIX (Ted 7/28) ──
   .proof__card carries `0 0 90px rgba(0,224,194,.18)`. Inside the carousel the
   card IS the slide, and the viewport has to clip horizontally to hide the next
   slide — so that 90px glow got sliced flat, leaving a hard vertical seam at the
   card's corner. Padding the viewport can't fix it (the neighbour just shows in
   the padding instead).
   Fix: the SLIDE keeps only its border + inset highlight; the outer glow moves
   to .tcar, which lives OUTSIDE the clip. Same look, nothing to cut. */
.tcar__slide.proof__card {
  box-shadow: inset 0 1px 0 rgba(0, 224, 194, 0.28);
}
.tcar {
  border-radius: 22px;
  box-shadow: var(--shadow-card), 0 0 90px rgba(0, 224, 194, 0.18);
}
.tcar__viewport { border-radius: 22px; }


/* ── CAROUSEL: no "window" frame, fade between slides (Ted 7/28) ──
   The slide inherited .proof__card's border + panel fill, which read as a
   window pane sitting on the page. Strip the frame; let the content sit on the
   section. Slides now cross-fade (and drift a few px) instead of sliding as a
   filmstrip — softer, and nothing looks like it's behind glass. ── */
.tcar__slide.proof__card {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.tcar {
  box-shadow: none;              /* the relocated glow goes too */
  border-radius: 0;
}
.tcar__viewport { border-radius: 0; }

.tcar__slide {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.tcar__slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* while dragging, show both so the swipe still feels physical */
.tcar.is-dragging .tcar__slide { opacity: 1; transform: none; transition: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .tcar__slide { transition: opacity 0.2s ease; transform: none; }
}