/* ============================================
   AI Deal Flow — Landing Page
   Design system + components
   ============================================ */

:root {
  /* Palette — Seller Creation: the logo's royal navy as the ground,
     its gold as the only accent. Surfaces keep a navy cast because the
     wordmark is #093F9F; the accent family is gold throughout.

     EVERY brand colour lives here, including the alpha variants below.
     The donor this layout came from had 73 brand-coloured rgba() calls
     sitting outside :root, so swapping the accent broke the page in
     ~20 places. Change a hex here and the whole page follows. */
  --bg: #06080f;
  --bg-2: #0a0d18;
  --surface: #0f1322;
  --surface-2: #141a2e;
  --surface-3: #1c2440;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-glow: rgba(var(--accent-sky-rgb), 0.28);

  --text: #f3f1ea;
  --text-dim: #b4b0a4;
  --text-muted: #7b7869;

  --accent-deep: #b07d00;
  --accent: #f5b202;
  --accent-bright: #ffc94a;
  --accent-sky: #ffd97a;
  --accent-cyan: #e0a800;
  --accent-green: #10b981;
  --accent-navy: #4a7fd4;       /* the logo's #093F9F, lifted to read on ink */
  --accent-amber: #f59e0b;

  /* RGB triplets — the companion tokens the donor was missing. Every
     brand-tinted rgba() in this file reads from these. */
  --accent-rgb: 245, 178, 2;
  --accent-sky-rgb: 255, 217, 122;
  --accent-bright-rgb: 255, 201, 74;
  --accent-green-rgb: 16, 185, 129;
  --accent-navy-rgb: 74, 127, 212;

  --grad-primary: linear-gradient(135deg, #b07d00 0%, #f5b202 48%, #ffd97a 100%);
  --grad-sky: linear-gradient(135deg, #f5b202 0%, #ffd97a 100%);
  --grad-cyan: linear-gradient(135deg, #c08a00 0%, #f5b202 100%);
  --grad-success: linear-gradient(135deg, #10b981 0%, #ffd97a 100%);
  --grad-warm: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
  --grad-radial: radial-gradient(circle at 22% 18%, rgba(var(--accent-rgb), 0.3), transparent 52%),
                 radial-gradient(circle at 82% 65%, rgba(var(--accent-sky-rgb), 0.16), transparent 58%);

  /* Typography */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Layout */
  --container: 1200px;
  --container-narrow: 960px;
  --container-wide: 1360px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 60px -15px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 40px rgba(var(--accent-rgb), 0.35);
  --shadow-sky: 0 20px 50px -20px rgba(var(--accent-sky-rgb), 0.45);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 180ms;
  --dur: 300ms;
  --dur-slow: 600ms;
}

/* ============================================
   Reset + Base
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

::selection {
  background: var(--accent);
  color: white;
}

/* ============================================
   Typography
   ============================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.125rem; }

p { color: var(--text-dim); }

.eyebrow {
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent-sky);
  text-transform: uppercase;
}

.eyebrow::before,
.eyebrow::after {
  content: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.gradient-text {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cyan-text {
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================
   Layout + Utilities
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.container-wide {
  max-width: var(--container-wide);
}

.container-narrow {
  max-width: var(--container-narrow);
}

section {
  position: relative;
  padding: clamp(4rem, 10vw, 8rem) 0;
}

.section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}

.section-header .eyebrow {
  margin-bottom: 32px;
}

.section-header h2 {
  margin-bottom: 20px;
}

.section-header p {
  font-size: 1.125rem;
  color: var(--text-dim);
}

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--grad-primary);
  color: white;
  box-shadow: 0 8px 32px -8px rgba(var(--accent-bright-rgb), 0.5);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -8px rgba(var(--accent-bright-rgb), 0.7);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-color: var(--border-strong);
  backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
}

.btn-lg {
  padding: 16px 32px;
  font-size: 1rem;
}

.btn-sm {
  padding: 10px 20px;
  font-size: 0.875rem;
}

.btn .arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

/* ============================================
   Nav
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(6, 9, 19, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
  padding: 10px 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
}

.nav-logo img {
  height: var(--logo-h, 38px);
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}

.nav-links a:hover {
  color: var(--text);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid var(--border);
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
  .nav-cta .btn-sm:first-child {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 10, 19, 0.95);
  backdrop-filter: blur(24px);
  z-index: 99;
  padding: 100px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateY(-100%);
  /* visibility is delayed to the end of the slide-out so the panel still
     animates, then stops painting entirely. Without it, a viewport shorter
     than the panel's content (a phone in landscape: 6 links at 1.5rem plus
     100px of top padding needs ~554px, a 482px-tall screen has not got it)
     lets the overflow render past the panel's bottom edge -- which, while
     closed, is the top of the viewport. "Pricing" and "Login" were sitting
     over the hero. */
  visibility: hidden;
  transition: transform 400ms var(--ease), visibility 0s linear 400ms;
  pointer-events: none;
  /* And on those screens the open menu has to scroll rather than spill. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 400ms var(--ease), visibility 0s;
  pointer-events: auto;
}

.mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

/* ============================================
   Hero
   ============================================ */

.hero {
  min-height: 100vh;
  padding-top: 120px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-radial);
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.hero-copy h1 {
  margin: 20px 0 24px;
}

.hero-copy p.lead {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 560px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.hero-trust .avatars {
  display: flex;
}

.hero-trust .avatars span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--bg);
  margin-left: -10px;
  overflow: hidden;
}

.hero-trust .avatars span:first-child { margin-left: 0; }

.hero-trust .avatars img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-trust .stars {
  color: var(--accent-amber);
  letter-spacing: -1px;
}

.hero-visual {
  position: relative;
  padding: 12px 22px;
}

.hero-image-wrap {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 30px 80px -20px rgba(var(--accent-rgb), 0.4);
  transform: perspective(1600px) rotateY(-6deg) rotateX(4deg);
  transition: transform var(--dur-slow) var(--ease);
}

.hero-image-wrap:hover {
  transform: perspective(1600px) rotateY(-3deg) rotateX(2deg);
}

.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 9, 19, 0.55) 100%);
}

.hero-image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-sky-rgb), 0.0) 55%, rgba(var(--accent-sky-rgb), 0.12) 100%);
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
}

.hero-float {
  position: absolute;
  background: rgba(15, 21, 37, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--accent-sky-rgb), 0.08);
  animation: float 6s var(--ease) infinite;
  z-index: 3;
}

.hero-float-1 {
  top: 12%;
  left: -6%;
  animation-delay: 0s;
}

.hero-float-2 {
  bottom: 18%;
  right: -4%;
  animation-delay: 2s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.hero-float .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.hero-float .value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.hero-float .value.green { color: var(--accent-green); }

@media (max-width: 960px) {
  .hero-visual { padding: 0; }
  .hero-image-wrap { transform: none; }
  .hero-float-1 { left: 12px; top: 16px; }
  .hero-float-2 { right: 12px; bottom: 20px; }
}

@media (max-width: 560px) {
  .hero-float { padding: 12px 14px; }
  .hero-float .value { font-size: 1.2rem; }
}

/* ============================================
   Logo Strip
   ============================================ */

.logo-strip {
  padding: 48px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.logo-strip-label {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.logo-strip-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vw, 64px);
  flex-wrap: wrap;
  opacity: 0.6;
}

.logo-strip-items span {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* ============================================
   Features Showcase — image left, feature list right (GHL style)
   ============================================ */

.features-showcase {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 7vw, 88px);
  align-items: center;
}

@media (max-width: 960px) {
  .features-showcase { grid-template-columns: 1fr; gap: 48px; }
}

.features-showcase-visual {
  position: relative;
  isolation: isolate;
}

.features-showcase-visual img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 45px rgba(var(--accent-rgb), 0.18));
  border-radius: var(--radius);
}

.features-showcase-visual::before {
  content: '';
  position: absolute;
  inset: -8% -4% -4% -8%;
  background: radial-gradient(circle at 30% 40%, rgba(var(--accent-rgb), 0.35), transparent 55%),
              radial-gradient(circle at 75% 70%, rgba(var(--accent-sky-rgb), 0.25), transparent 55%);
  z-index: -1;
  filter: blur(30px);
}

.features-showcase-visual::after {
  content: '';
  position: absolute;
  right: -14px;
  top: 40%;
  width: 120px;
  height: 120px;
  border: 1px dashed rgba(var(--accent-sky-rgb), 0.4);
  border-radius: 50%;
  animation: spin 14s linear infinite;
  pointer-events: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.features-showcase-copy .eyebrow {
  margin-bottom: 26px;
}

.features-showcase-copy h2 {
  margin-bottom: 20px;
  font-size: clamp(1.9rem, 3.8vw, 2.75rem);
}

.features-showcase-copy p.lead {
  font-size: 1.08rem;
  margin-bottom: 36px;
  color: var(--text-dim);
}

.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feature-list.checkmarks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}

@media (max-width: 560px) {
  .feature-list.checkmarks { grid-template-columns: 1fr; }
}

.feature-list.checkmarks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.98rem;
  color: var(--text);
  font-weight: 500;
  transition: transform var(--dur) var(--ease);
}

.feature-list.checkmarks li:hover {
  transform: translateX(4px);
}

.feature-list.checkmarks .feat-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--accent-sky-rgb), 0.22), rgba(var(--accent-rgb), 0.22));
  color: var(--accent-sky);
  border: 1px solid rgba(var(--accent-sky-rgb), 0.3);
}

.feature-list.checkmarks .feat-icon svg {
  width: 14px;
  height: 14px;
}

.feature-list.checkmarks .feat-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ============================================
   Lead Types
   ============================================ */

.leads-section {
  background: var(--bg-2);
}

/* 17 cards over 4 columns leaves a single orphan on the last row. Flex with
   a fixed basis wraps the same way but centres whatever the last row holds,
   so the remainder reads as intentional at every breakpoint. */
.lead-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.lead-grid > * {
  flex: 0 1 calc((100% - 3 * 16px) / 4);
  min-width: 210px;
}

@media (max-width: 960px) {
  .lead-grid > * { flex-basis: calc((100% - 16px) / 2); }
}

@media (max-width: 560px) {
  .lead-grid > * { flex-basis: 100%; min-width: 0; }
}

.lead-card {
  position: relative;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}

.lead-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0) 0%, rgba(var(--accent-sky-rgb), 0.08) 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: -1;
}

.lead-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-sky-rgb), 0.4);
  box-shadow: 0 18px 40px -16px rgba(var(--accent-rgb), 0.45);
}

.lead-card:hover::before { opacity: 1; }

.lead-card .icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-sky);
  margin-bottom: 14px;
  transition: transform var(--dur) var(--ease);
}

.lead-card:hover .icon {
  transform: scale(1.08) rotate(-3deg);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-sky-rgb), 0.22));
}

.lead-card .icon svg { width: 18px; height: 18px; }

.lead-card h4 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--text);
}

.lead-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================
   Premium lead index — editorial list (alt layout)
   ============================================ */

.premium-leads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

@media (max-width: 560px) {
  .premium-leads { grid-template-columns: 1fr; }
}

.premium-lead {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: var(--surface);
  transition: background var(--dur) var(--ease);
  position: relative;
  cursor: pointer;
}

.premium-lead::after {
  content: '→';
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 1rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.premium-lead:hover {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
}

.premium-lead:hover::after {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent-sky);
}

.premium-lead .num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-sky);
  letter-spacing: 0.1em;
  padding-top: 2px;
  align-self: start;
}

.premium-lead h4 {
  font-size: 0.95rem;
  margin-bottom: 3px;
  color: var(--text);
}

.premium-lead p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

/* ============================================
   AI Engine (full-bleed hero section)
   ============================================ */

.ai-engine {
  text-align: center;
  padding: 120px 0 0;
  overflow: hidden;
}

.ai-engine h2 {
  max-width: 900px;
  margin: 0 auto 24px;
}

.ai-engine .lead {
  max-width: 680px;
  margin: 0 auto 64px;
  font-size: 1.125rem;
}

.ai-engine-visual {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  box-shadow: 0 -30px 100px -20px rgba(var(--accent-rgb), 0.35);
  isolation: isolate;
}

.ai-engine-visual::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(180deg, var(--accent-sky), transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1px;
  mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 3;
}

.ai-engine-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.ai-engine-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, var(--bg) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ============================================
   Split Section (Leadpipes AI Suite)
   ============================================ */

.split-section {
  background: var(--bg);
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

@media (max-width: 960px) {
  .split-grid { grid-template-columns: 1fr; gap: 48px; }
}

.split-copy .eyebrow { margin-bottom: 24px; }
.split-copy h2 { margin-bottom: 20px; }
.split-copy p.lead { margin-bottom: 32px; font-size: 1.08rem; }

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
}

.benefit-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--dur) var(--ease);
}

.benefit-item:hover {
  border-color: var(--border-strong);
  transform: translateX(4px);
}

.benefit-item .icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--grad-sky);
  color: white;
  box-shadow: 0 8px 20px -8px rgba(var(--accent-sky-rgb), 0.5);
}

.benefit-item .icon svg { width: 20px; height: 20px; }

.benefit-item h4 {
  font-size: 1rem;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-weight: 600;
}

.benefit-item p {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin: 0;
}

.feature-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}

@media (max-width: 560px) {
  .feature-checklist { grid-template-columns: 1fr; }
}

.feature-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-dim);
  list-style: none;
}

.feature-checklist li svg {
  width: 16px;
  height: 16px;
  color: var(--accent-sky);
  flex-shrink: 0;
}

.split-visual {
  position: relative;
  isolation: isolate;
}

.split-visual img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 45px rgba(var(--accent-rgb), 0.2));
}

.split-visual::before {
  content: '';
  position: absolute;
  inset: -12% -6% -6% -12%;
  background: radial-gradient(circle at 30% 40%, rgba(var(--accent-rgb), 0.28), transparent 55%),
              radial-gradient(circle at 75% 70%, rgba(var(--accent-sky-rgb), 0.2), transparent 55%);
  z-index: -1;
  filter: blur(32px);
}

.split-visual .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(var(--accent-sky-rgb), 0.14), rgba(var(--accent-rgb), 0.14));
  border: 1px solid var(--border-glow);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--accent-sky);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* ============================================
   Sellability Scores
   ============================================ */

.scores-section {
  background: var(--bg-2);
  position: relative;
}

.scores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

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

.score-card {
  position: relative;
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--dur) var(--ease);
}

.score-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.score-card .score-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.score-card.wholesale .score-label {
  background: rgba(var(--accent-sky-rgb), 0.14);
  color: var(--accent-sky);
}

.score-card.rental .score-label {
  background: rgba(var(--accent-navy-rgb), 0.18);
  color: var(--accent-navy);
}

.score-card.retail .score-label {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-bright);
}

.score-card h3 {
  margin-bottom: 12px;
  font-size: 1.35rem;
}

.score-card p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin-bottom: 24px;
}

.score-meter {
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.score-meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 1.2s var(--ease);
  width: 0;
}

.score-card.wholesale .score-meter-fill { background: var(--grad-sky); width: 0; }
.score-card.rental .score-meter-fill { background: linear-gradient(135deg, #093f9f 0%, #ffd97a 100%); }
.score-card.retail .score-meter-fill { background: var(--grad-primary); }

/* Width is set by scripts.js from each card's data-score — do not add a
   width here, or the bar and the printed number will drift apart again. */

.score-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 500;
}

/* Stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 560px) {
  .stats-row { grid-template-columns: 1fr; }
}

.stat-card {
  padding: 40px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(var(--accent-sky-rgb), 0.22), transparent 60%);
  pointer-events: none;
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}

.stat-card:nth-child(2) .stat-value {
  background: var(--grad-success);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 340px;
  margin: 0 auto;
}

/* ============================================
   Testimonial Carousel
   ============================================ */

.testimonials-section {
  background: var(--bg);
}

.testimonials-section.alt {
  background: var(--bg-2);
}

.testimonial-carousel {
  position: relative;
}

.testimonial-viewport {
  overflow: hidden;
  padding: 24px 4px;
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.testimonial-track {
  display: flex;
  gap: 24px;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.testimonial-track .testimonial {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
}

@media (max-width: 960px) {
  .testimonial-track .testimonial { flex: 0 0 calc((100% - 24px) / 2); }
  .testimonial-track { gap: 20px; }
}

@media (max-width: 640px) {
  .testimonial-track .testimonial { flex: 0 0 100%; }
}

.testimonial {
  position: relative;
  padding: 32px 28px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  isolation: isolate;
}

.testimonial::before {
  content: '"';
  position: absolute;
  top: 10px;
  right: 22px;
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 1;
  color: rgba(var(--accent-sky-rgb), 0.08);
  pointer-events: none;
  z-index: -1;
  font-weight: 700;
}

.testimonial:hover {
  border-color: rgba(var(--accent-sky-rgb), 0.3);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -20px rgba(var(--accent-rgb), 0.3);
}

.testimonial .stars {
  color: var(--accent-amber);
  font-size: 0.95rem;
  letter-spacing: 1px;
}

.testimonial .quote {
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.7;
  flex: 1;
  font-family: var(--font-display);
  font-weight: 400;
}

.testimonial .author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.testimonial .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  flex-shrink: 0;
  border: 2px solid rgba(var(--accent-sky-rgb), 0.3);
}

.testimonial .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial .author-info .name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}

.testimonial .author-info .company {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* Carousel controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  gap: 24px;
}

.carousel-dots {
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.carousel-dot {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  border: none;
  padding: 0;
}

.carousel-dot.active {
  width: 48px;
  background: var(--grad-sky);
  box-shadow: 0 0 12px rgba(var(--accent-sky-rgb), 0.5);
}

.carousel-arrows {
  display: flex;
  gap: 10px;
}

.carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  color: var(--text);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.carousel-arrow:hover {
  background: rgba(var(--accent-sky-rgb), 0.1);
  border-color: var(--accent-sky);
  color: var(--accent-sky);
  transform: translateY(-1px);
}

.carousel-arrow:active { transform: translateY(0); }

.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.carousel-arrow svg { width: 18px; height: 18px; }

/* ============================================
   AI Tools Section (alternating layout)
   ============================================ */

.ai-tools {
  background: var(--bg-2);
  padding: clamp(4rem, 10vw, 8rem) 0;
}

.ai-tool-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: clamp(72px, 10vw, 140px) 0;
  position: relative;
}

.ai-tool-row + .ai-tool-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-sky-rgb), 0.35), transparent);
}

.ai-tool-row.reverse {
  direction: rtl;
}

.ai-tool-row.reverse > * {
  direction: ltr;
}

@media (max-width: 860px) {
  .ai-tool-row, .ai-tool-row.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    direction: ltr;
  }
}

.ai-tool-copy .eyebrow { margin-bottom: 22px; }

/* ---- "Ai Suite" membership pill ----
   These four tools unlock with the Ai Suite, not with the base plan, and the
   page now stacks them directly under the Suite pitch. The pill is what keeps
   that readable for someone who scrolled straight past the pitch. flex, not
   inline-flex: it has to hold its own line above the tool name. */
.suite-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.suite-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

/* The Suite block now sits against the pricing table, so it gets its own
   way in rather than making the reader scroll back up for one. */
.suite-cta { margin-top: 28px; }


/* ============================================
   Video: poster facade + lazily built Wistia player

   Wistia's own snippet pulls player.js plus a per-media module on page load,
   for videos most readers never start. The poster here is a <button>; the
   player element and both scripts are built on the first click, once, and
   shared by every embed on the page. See scripts.js.
   ============================================ */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-glow);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}

.video-embed wistia-player {
  display: block;
  width: 100%;
  height: 100%;
}

.video-facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.video-facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two of the three posters are light artwork, so the play button and the
   label need their own ground to stand on. */
.video-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.04) 48%);
  transition: background 0.3s var(--ease);
}

.video-facade:hover::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(58px, 6vw, 78px);
  height: clamp(58px, 6vw, 78px);
  border-radius: 50%;
  background: var(--grad-primary);
  color: var(--bg);
  box-shadow: 0 12px 44px -10px rgba(var(--accent-rgb), 0.75);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}

.video-play svg {
  width: 32%;
  height: 32%;
  margin-left: 8%;
}

/* Its own dark pill rather than a scrim: two of the three posters are pale
   artwork, and a gradient alone left this unreadable over the cream one. */
.video-meta {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 2;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(6, 8, 15, 0.82);
  border: 1px solid rgba(var(--accent-sky-rgb), 0.22);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.video-facade:hover .video-play,
.video-facade:focus-visible .video-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-facade:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .video-meta { left: 14px; bottom: 12px; padding: 6px 10px; font-size: 0.64rem; }
}


/* ---- Ai Suite intro + the scroll tilt ----
   The video starts tipped away from the reader and stands up as it comes
   into view, the way the hero video does on wistia.com. --tilt runs 0 to 1
   and is written from scripts.js on scroll; everything visual is here. */
.suite-intro {
  background: var(--bg);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.video-tilt {
  max-width: 960px;
  margin: 0 auto;
  perspective: 1400px;
}

.video-tilt-inner {
  --tilt: 0;
  transform: rotateX(calc((1 - var(--tilt)) * 15deg))
             scale(calc(0.9 + var(--tilt) * 0.1));
  transform-origin: 50% 100%;
  will-change: transform;
}

/* No scroll-linked motion for anyone who asked not to have it: the video
   simply sits flat. */
@media (prefers-reduced-motion: reduce) {
  .video-tilt-inner {
    transform: none;
  }
}
.ai-tool-copy h3 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 16px;
}

.ai-tool-copy p {
  font-size: 1.02rem;
  margin-bottom: 24px;
  color: var(--text-dim);
}

.ai-tool-copy .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dim);
}

.pill.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-sky-rgb), 0.14));
  border-color: var(--border-glow);
  color: var(--accent-sky);
}

.pill svg { width: 12px; height: 12px; }

.ai-tool-visual {
  position: relative;
  isolation: isolate;
}

.ai-tool-visual img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.45))
          drop-shadow(0 0 40px rgba(var(--accent-rgb), 0.18));
  border-radius: 10px;
}

.ai-tool-visual::before {
  content: '';
  position: absolute;
  inset: -6% -4% -4% -4%;
  background: radial-gradient(circle at 35% 45%, rgba(var(--accent-rgb), 0.3), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(var(--accent-sky-rgb), 0.18), transparent 55%);
  z-index: -1;
  filter: blur(30px);
}

.ai-tool-visual .badge {
  position: absolute;
  top: -14px;
  right: 10%;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(15, 21, 37, 0.9), rgba(20, 28, 52, 0.9));
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glow);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--accent-sky);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 8px 24px -8px rgba(var(--accent-sky-rgb), 0.4);
}

/* ---- Nationwide US map SVG ---- */
.us-map-visual {
  position: relative;
  aspect-ratio: 959 / 593;
  isolation: isolate;
}

.us-map-visual .us-map-base,
.us-map-visual .us-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.us-map-visual .us-map-base {
  filter: drop-shadow(0 0 45px rgba(var(--accent-rgb), 0.35));
}

.us-map-visual::before {
  background: radial-gradient(circle at 30% 50%, rgba(var(--accent-rgb), 0.30), transparent 58%),
              radial-gradient(circle at 75% 45%, rgba(var(--accent-sky-rgb), 0.22), transparent 58%);
  inset: -4% -2%;
}

.us-map-visual .us-map-overlay {
  z-index: 2;
  pointer-events: none;
}

.us-map-visual .us-map-overlay .map-nodes circle {
  filter: drop-shadow(0 0 8px rgba(var(--accent-sky-rgb), 0.9));
}

.us-map-visual .map-label {
  position: absolute;
  top: 6%;
  left: 4%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
  pointer-events: none;
}

.us-map-visual .map-label .coverage {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-sky);
}

.us-map-visual .map-label .states {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.us-map-visual .map-label .sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ============================================
   Chatbot example card
   ============================================ */

.chatbot-demo {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 500px;
  height: 100%;
  min-height: 420px;
  justify-content: flex-end;
}

.chatbot-demo .bubble {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 90%;
}

.chatbot-demo .bubble.user {
  background: var(--grad-sky);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 24px -8px rgba(var(--accent-sky-rgb), 0.5);
}

.chatbot-demo .bubble.bot {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.chatbot-demo .bubble.bot .loading {
  display: inline-flex;
  gap: 4px;
}

.chatbot-demo .bubble.bot .loading span {
  width: 6px; height: 6px;
  background: var(--accent-bright);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.chatbot-demo .bubble.bot .loading span:nth-child(2) { animation-delay: 0.2s; }
.chatbot-demo .bubble.bot .loading span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ============================================
   Marketing Tools — Editorial numbered grid
   ============================================ */

.tools-section {
  background: var(--bg);
}

.marketing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

/* Six cards over four columns leaves a 2-up second row against a 4-up first.
   The last two span two columns each so the row fills, which only makes sense
   while there are four columns — below that the spans are dropped. */
@media (min-width: 961px) {
  .marketing-grid > :nth-child(5),
  .marketing-grid > :nth-child(6) {
    grid-column: span 2;
  }
}

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

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

.marketing-tool {
  position: relative;
  padding: 36px 28px 32px;
  background: transparent;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
  overflow: hidden;
}

.marketing-tool::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -20%, rgba(var(--accent-sky-rgb), 0.18), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.marketing-tool:hover { background: rgba(var(--accent-sky-rgb), 0.04); }
.marketing-tool:hover::before { opacity: 1; }

.marketing-tool .num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-sky);
  margin-bottom: 20px;
  display: block;
  position: relative;
}

.marketing-tool .num::after {
  content: '';
  position: absolute;
  left: 42px;
  top: 50%;
  width: 20px;
  height: 1px;
  background: rgba(var(--accent-sky-rgb), 0.3);
}

.marketing-tool h4 {
  font-size: 1.15rem;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}

.marketing-tool:hover h4 { color: var(--accent-sky); }

.marketing-tool p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.marketing-tool .tool-icon {
  position: absolute;
  top: 30px;
  right: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  color: var(--accent-sky);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.marketing-tool:hover .tool-icon {
  opacity: 1;
  transform: translateY(-2px);
}

.marketing-tool .tool-icon svg { width: 20px; height: 20px; }

/* ============================================
   Business Tools — Stacked rows with horizontal layout
   ============================================ */

.business-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}

@media (max-width: 860px) {
  .business-list { grid-template-columns: 1fr; gap: 0; }
}

.business-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--border);
  transition: padding var(--dur) var(--ease), background var(--dur) var(--ease);
  position: relative;
}

.business-item:hover {
  padding-left: 14px;
}

.business-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: var(--grad-sky);
  border-radius: 999px;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.business-item:hover::before { opacity: 1; }

.business-item .biz-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-sky-rgb), 0.14));
  color: var(--accent-sky);
  border: 1px solid rgba(var(--accent-sky-rgb), 0.18);
  flex-shrink: 0;
}

.business-item .biz-icon svg { width: 20px; height: 20px; }

.business-item h4 {
  font-size: 1rem;
  margin-bottom: 3px;
  color: var(--text);
}

.business-item p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

.business-item .biz-tag {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .business-item { grid-template-columns: 40px 1fr; }
  .business-item .biz-tag { display: none; }
}

/* ============================================
   Spotlight Sections — each differentiated
   ============================================ */

.spotlight {
  padding: 80px 0;
  position: relative;
}

/* Shared spotlight copy treatment */
.spotlight-copy { position: relative; z-index: 1; }

/* --- Deal Marketplace: Dramatic showcase with floating stat card --- */
.marketplace-showcase {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 7vw, 80px);
  align-items: center;
}

@media (max-width: 860px) {
  .marketplace-showcase { grid-template-columns: 1fr; gap: 48px; }
}

.marketplace-showcase .spotlight-visual {
  position: relative;
}

.market-stat-float {
  position: absolute;
  bottom: 8%;
  left: -24px;
  padding: 18px 22px;
  background: rgba(15, 21, 37, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--accent-sky-rgb), 0.1);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 3;
  animation: float 7s var(--ease) infinite;
}

.market-stat-float .indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 12px var(--accent-green);
  animation: pulse 1.8s infinite;
}

.market-stat-float .label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.market-stat-float .val {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

/* --- Data Dossier: Stats-forward with overlay strip --- */
.data-dossier {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 7vw, 80px);
  align-items: center;
}

@media (max-width: 860px) {
  .data-dossier { grid-template-columns: 1fr; gap: 48px; }
  .data-dossier > .spotlight-visual { order: -1; }
}

.dossier-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}

/* Padding on BOTH sides of each divider: with padding-right alone the
   second and third figures sat flush against the rule to their left. */
.dossier-stats .stat {
  text-align: left;
  padding: 0 22px;
  border-right: 1px solid var(--border);
}

.dossier-stats .stat:first-child { padding-left: 0; }
.dossier-stats .stat:last-child { padding-right: 0; border-right: none; }

/* Three columns in a phone's width: trim the gutters so "Data points" still
   fits on one line rather than stacking and lengthening the whole row. */
@media (max-width: 560px) {
  .dossier-stats .stat { padding: 0 13px; }
  .dossier-stats .val { font-size: 1.4rem; }
  .dossier-stats .label { font-size: 0.72rem; letter-spacing: 0.04em; }
}

.dossier-stats .val {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-sky);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.dossier-stats .label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Deal Alerts: Notification stream mockup --- */
.alerts-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 80px);
  align-items: center;
}

@media (max-width: 860px) {
  .alerts-showcase { grid-template-columns: 1fr; gap: 48px; }
}

.alert-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.alert-stream::before {
  content: '';
  position: absolute;
  inset: -10% -6%;
  background: radial-gradient(circle at 60% 40%, rgba(var(--accent-rgb), 0.22), transparent 60%),
              radial-gradient(circle at 30% 75%, rgba(var(--accent-sky-rgb), 0.18), transparent 60%);
  filter: blur(32px);
  z-index: -1;
}

.alert-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(15, 21, 37, 0.95), rgba(20, 28, 52, 0.95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px -15px rgba(0, 0, 0, 0.5);
  transition: transform var(--dur) var(--ease);
}

.alert-card:hover { transform: translateX(6px); }

.alert-card:nth-child(1) { transform: translateX(-8px); }
.alert-card:nth-child(2) { transform: translateX(4px); }
.alert-card:nth-child(3) { transform: translateX(-4px); }

.alert-card:nth-child(1):hover { transform: translateX(0); }
.alert-card:nth-child(2):hover { transform: translateX(12px); }
.alert-card:nth-child(3):hover { transform: translateX(4px); }

.alert-card .alert-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-sky-rgb), 0.18));
  color: var(--accent-sky);
  border: 1px solid rgba(var(--accent-sky-rgb), 0.2);
  flex-shrink: 0;
}

.alert-card .alert-icon svg { width: 20px; height: 20px; }

.alert-card .alert-body {
  min-width: 0;
}

.alert-card .alert-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert-card .alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
}

.alert-card .alert-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.alert-card .alert-time {
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.spotlight-copy {
  position: relative;
  z-index: 1;
}

.spotlight-copy .eyebrow { margin-bottom: 24px; }
.spotlight-copy h3 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: 0 0 18px;
}

.spotlight-copy p {
  margin-bottom: 24px;
  font-size: 1rem;
}

.spotlight-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.spotlight-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-dim);
}

.spotlight-features li svg {
  width: 18px; height: 18px;
  color: var(--accent-sky);
  flex-shrink: 0;
}

.spotlight-visual {
  position: relative;
  isolation: isolate;
}

.spotlight-visual img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.45))
          drop-shadow(0 0 40px rgba(var(--accent-rgb), 0.18));
  border-radius: 12px;
}

.spotlight-visual::before {
  content: '';
  position: absolute;
  inset: -8% -6% -6% -6%;
  background: radial-gradient(circle at 30% 40%, rgba(var(--accent-rgb), 0.28), transparent 60%),
              radial-gradient(circle at 75% 70%, rgba(var(--accent-sky-rgb), 0.2), transparent 55%);
  z-index: -1;
  filter: blur(30px);
}

/* ---- Feathered edges ----
   The marketplace shot carries its own bloom in the alpha channel, and the
   bloom is still bright where the file ends, so the right and bottom edges
   read as a straight cut against the page. Two gradient masks intersect to
   fade all four edges; the opaque window (9%-84% across, 16%-78% down) clears
   the card itself, which sits at 11%-80% / 30%-74%, so only glow is touched.
   The drop-shadow and the radius come off: a filter is applied BEFORE the
   mask, so the shadow would trace a hard rectangle the mask then fades
   around, which is the artefact this is meant to remove. */
.spotlight-visual.feathered img {
  border-radius: 0;
  filter: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

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

.pricing-section {
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}

.pricing-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.25), transparent 60%);
  pointer-events: none;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

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

.price-card {
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  transition: all var(--dur) var(--ease);
}

.price-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.price-card.featured {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-glow);
}

.price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: var(--grad-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}

.price-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.price-value {
  font-family: var(--font-display);
  margin-bottom: 8px;
}

.price-value .strike {
  font-size: 1.4rem;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-right: 10px;
  font-weight: 400;
}

.price-value .amount {
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
}

.price-value .period {
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 500;
}

.price-foundersave {
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-sky-rgb), 0.18));
  color: var(--accent-sky);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 24px;
  border: 1px solid rgba(var(--accent-sky-rgb), 0.22);
}

.price-card .btn {
  width: 100%;
  margin-bottom: 28px;
}

.price-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.price-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.price-features li svg {
  width: 16px; height: 16px;
  color: var(--accent-sky);
  flex-shrink: 0;
}

/* ============================================
   Final CTA
   ============================================ */

.final-cta {
  padding: 100px 0;
  text-align: center;
}

.final-cta-inner {
  padding: clamp(48px, 8vw, 80px);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

.final-cta-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-radial);
  pointer-events: none;
}

.final-cta h2 {
  position: relative;
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 20px;
}

.final-cta p {
  position: relative;
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto 32px;
}

.final-cta .actions {
  position: relative;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   Footer
   ============================================ */

footer {
  padding: 64px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

@media (max-width: 860px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; }
}

.footer-brand img {
  height: 48px;
  width: auto;
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 320px;
  margin-bottom: 20px;
}

.footer-contact {
  font-size: 0.88rem;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-contact strong {
  color: var(--text);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 6px;
  font-weight: 600;
}

.footer-col h5 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  color: var(--text);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.footer-col a:hover { color: var(--accent-sky); }

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ============================================
   Animations (scroll reveal)
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 300ms; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 360ms; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 420ms; }
.reveal-stagger.in-view > *:nth-child(9) { transition-delay: 480ms; }

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


/* ============================================
   Billing toggle + plan pricing (Seller Creation)
   Her lineup is Basic/Premium, each billable monthly or annually, so the
   two cards are plans and the period is a switch. The donor's two cards
   were Monthly vs Yearly of a single plan.
   ============================================ */

.billing-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 44px;
}

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.billing-toggle button {
  padding: 9px 24px;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.billing-toggle button[aria-pressed='true'] {
  background: var(--grad-primary);
  color: #2a1d00;
}

.save-note {
  margin: 14px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  min-height: 1.2em;
}

.price-sub {
  margin-top: -6px;
  margin-bottom: 4px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.price-features li.off {
  opacity: 0.45;
}
.price-features li.off svg {
  color: var(--text-muted);
}

.price-fine {
  max-width: 860px;
  margin: 32px auto 0;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-muted);
  text-align: center;
}
.price-fine a { color: var(--accent); }

.source-note {
  margin-top: 30px;
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--text-muted);
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.inside-label {
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* The logo is a wide wordmark; constrain by height and let width follow. */
.footer-brand img { height: 46px; width: auto; }


/* ============================================
   Hero Sellability score rings
   These were painted into the old hero photo. Coded now, so the numbers
   are editable, they animate, and they survive a photo swap. Light chips
   on purpose — they sit on a daylight photo, as the painted ones did.
   ============================================ */

/* The row straddles the bottom edge of the photo: translateY(50%) puts its
   centre line on the edge, so the lower half of each circle hangs past it.
   This lives in .hero-visual, not .hero-image-wrap, because the wrap clips
   its overflow — inside it the hanging halves would be cut off. */
.score-rings {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: flex;
  gap: 16px;
  z-index: 3;
}

.score-ring {
  position: relative;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(252, 251, 248, 0.94);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.score-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: rgba(15, 19, 34, 0.1);
  stroke-width: 5;
}

/* 2 * pi * r, r = 44 */
.ring-value {
  fill: none;
  stroke: var(--ring, var(--accent));
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: 276.46;
  transition: stroke-dashoffset 1.5s var(--ease);
}

.ring-text {
  position: relative;
  text-align: center;
  line-height: 1.05;
}

.ring-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 700;
  color: #121728;
  font-variant-numeric: tabular-nums;
}

.ring-label {
  display: block;
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #5d6374;
}

@media (max-width: 1100px) {
  .score-ring { width: 98px; height: 98px; }
  .ring-num { font-size: 1.36rem; }
}

@media (max-width: 480px) {
  .score-rings { gap: 10px; }
  .score-ring { width: 82px; height: 82px; }
  .ring-num { font-size: 1.1rem; }
  .ring-label { font-size: 0.52rem; letter-spacing: 0.08em; }
}

/* Half a ring now hangs below the photo; give it room so it never collides
   with whatever follows the hero. */
.hero-visual { margin-bottom: 62px; }

@media (max-width: 480px) {
  .hero-visual { margin-bottom: 48px; }
}

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


/* Review quotes without a headshot — the author row is text only. */
.testimonial.no-photo .author {
  gap: 0;
}

.testimonial.no-photo .author-info .company {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.testimonial.no-photo .author-info .company::before {
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12L20.2 5.6z'/%3E%3C/svg%3E") center/9px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12L20.2 5.6z'/%3E%3C/svg%3E") center/9px no-repeat;
  background-color: var(--accent);
  flex: none;
}

/* ============================================
   Legal pages (privacy / terms / refunds)
   Same shell as the landing page, long-form body.
   ============================================ */

.legal-main {
  padding-top: 150px;
  padding-bottom: clamp(60px, 8vw, 110px);
  background:
    radial-gradient(900px 480px at 18% -8%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    var(--bg);
}

.legal-head {
  max-width: 760px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}

.legal-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.legal-updated {
  display: inline-block;
  padding: 6px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}

.legal-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-dim);
}

.legal-body > p { margin-bottom: 1.15rem; }

.legal-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 2.6rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}

.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.legal-body h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.8rem 0 0.6rem;
}

.legal-body h4 {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.6rem 0 0.5rem;
}

.legal-body ul {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  gap: 10px;
}

.legal-body ul li {
  position: relative;
  padding-left: 20px;
}

.legal-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* The source policies read "Account means a unique account…" as one sentence,
   so the term and its definition run together rather than stacking. */
.legal-body dl { margin: 0 0 1.15rem; }
.legal-body dt { display: inline; color: var(--text); font-weight: 600; }
.legal-body dd { display: inline; margin: 0; }
.legal-body dt::after { content: ' '; }
.legal-body dd::after { content: ''; display: block; margin-bottom: 14px; }

.legal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--accent-bright); }
.legal-body strong { color: var(--text); }

.legal-contact {
  margin-top: 2.4rem;
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.legal-contact p { margin: 0 0 8px; }
.legal-contact p:last-child { margin-bottom: 0; }

/* Jump between the three policies */
.legal-switch {
  max-width: 760px;
  margin: clamp(44px, 6vw, 70px) auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-switch a {
  padding: 9px 17px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--text-dim);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.legal-switch a:hover { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); }
.legal-switch a[aria-current='page'] {
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

/* The legal nav has no section anchors to scroll to, so it is solid from the start. */
.nav.nav-solid {
  background: rgba(6, 8, 15, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 560px) {
  .legal-main { padding-top: 120px; }
  .legal-body { font-size: 0.92rem; }
}