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

:root {
  --paper: #f7f5f0;
  --paper-soft: #fbfaf6;
  --paper-warm: #f2efe7;
  --card: #ffffff;
  --ink: #0d0d12;
  --ink-2: #444;
  --ink-3: #666;
  --ink-4: #888;
  --ink-5: #aaa;
  --line: rgba(0,0,0,0.09);
  --line-soft: rgba(0,0,0,0.06);
  --blue: #2563EB;
  --blue-dark: #1a4fd8;
  --blue-tint: rgba(37,99,235,0.06);
  --blue-tint-strong: rgba(37,99,235,0.12);
  --blue-border: rgba(37,99,235,0.28);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'ss01', 'ss02';
}

::selection { background: var(--blue); color: #fff; }

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

/* ============ NAV ============ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  background: rgba(247,245,240,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), backdrop-filter 0.4s;
}
nav.scrolled {
  background: rgba(247,245,240,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--line-soft);
}
.nav-logo {
  font-weight: 800; font-size: 20px; letter-spacing: -0.6px;
  color: var(--ink);
  text-decoration: none;
}
.nav-logo:hover { color: var(--blue); }
.nav-right {
  display: flex; align-items: center; gap: 24px;
}
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--blue); }
.nav-cta {
  padding: 10px 20px; border-radius: 100px;
  background: var(--blue); color: #fff;
  font-weight: 700; font-size: 14px;
  white-space: nowrap;
  transition: transform 0.3s var(--ease-out), background 0.2s, box-shadow 0.3s;
}
.nav-cta:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,0.25); }

/* Hamburger button — visible on mobile only */
.nav-hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  border-radius: 6px;
  transition: background 0.15s;
}
.nav-hamburger:hover { background: rgba(13,13,18,0.05); }
.nav-hamburger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
}

/* Full-screen mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 200;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu-close {
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
  border-radius: 8px;
  transition: background 0.15s;
}
.mobile-menu-close:hover { background: rgba(13,13,18,0.05); }
.mobile-menu-close svg {
  width: 24px;
  height: 24px;
  display: block;
}
.mobile-menu-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 28px;
  gap: 0;
}
.mobile-menu-item {
  display: block;
  padding: 16px 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s, padding-left 0.2s var(--ease-out);
}
.mobile-menu-item:last-of-type { border-bottom: 0; }
.mobile-menu-item:active { padding-left: 6px; color: var(--blue); }
.mobile-menu-footer {
  padding: 24px 28px 32px;
}
.mobile-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: var(--blue);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-sizing: border-box;
  transition: opacity 0.2s;
}
.mobile-menu-cta:hover { opacity: 0.92; }
.mobile-menu-cta svg { width: 18px; height: 18px; }

/* Body scroll lock when menu is open */
body.menu-locked { overflow: hidden; }

/* Tighten desktop nav spacing at narrower widths so 6 items + CTA fit comfortably */
@media (max-width: 1100px) {
  .nav-right { gap: 18px; }
  .nav-link { font-size: 13px; }
}

/* Switch to hamburger below 920px (6 nav items get cramped before then) */
@media (max-width: 920px) {
  .nav-link.hide-mobile,
  .nav-cta.hide-mobile { display: none; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 640px) {
  nav { padding: 14px 20px; }
}

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 140px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 900px 600px at 50% 30%, rgba(37,99,235,0.05), transparent 70%),
    radial-gradient(ellipse 700px 400px at 50% 100%, rgba(0,0,0,0.02), transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 32px;
  opacity: 0; transform: translateY(8px);
  animation: fadeUp 0.8s var(--ease-out) 0.2s forwards;
  display: inline-flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ''; width: 24px; height: 1px;
  background: var(--blue);
  opacity: 0.4;
}

.btn-quiet .quiet-aside {
  font-weight: 500;
  color: var(--ink-4);
  font-size: 13px;
}

.hero-headline {
  font-size: clamp(28px, 5.6vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 300;
  width: 100%;
  margin: 0 auto;
  font-variation-settings: 'wght' 300;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hero-headline .hl-line-1,
.hero-headline .hl-line-2 {
  display: block;
  white-space: nowrap;
}

.hero-headline .hl-line-1 {
  color: var(--ink);
  /* Animate only the first line, from 300 to 800 weight */
  opacity: 0;
  font-variation-settings: 'wght' 300;
  animation: weightShift 2.6s var(--ease-out) 0.4s forwards;
}

.hero-headline .hl-line-2 {
  font-style: italic;
  color: var(--blue);
  font-variation-settings: 'wght' 500;
  font-weight: 500;
  /* Softer weight so it reads as supporting detail, not a co-equal beat */
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 0.6s forwards;
}

/* On narrow screens, allow the longer line to wrap. Matched to the same
   breakpoint that boosts hero font size (9vw), so text always has room. */
@media (max-width: 640px) {
  .hero-headline .hl-line-1,
  .hero-headline .hl-line-2 {
    white-space: normal;
  }
}

@keyframes weightShift {
  0% {
    opacity: 0;
    font-variation-settings: 'wght' 300;
    transform: translateY(12px);
    letter-spacing: -0.01em;
  }
  100% {
    opacity: 1;
    font-variation-settings: 'wght' 800;
    transform: translateY(0);
    letter-spacing: -0.035em;
  }
}

.hero-headline .accent {
  display: inline-block;
  position: relative;
  font-weight: 800;
  font-style: italic;
  color: var(--blue);
}

.hero-sub {
  margin-top: 28px;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: -0.01em;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.0s forwards;
}

.hero-sub .num {
  font-weight: 800;
  color: var(--ink);
  display: inline-block;
  min-width: 0.8ch;
}

.hero-sub strong {
  font-weight: 800;
  color: var(--ink);
}

.hero-cta-row {
  margin-top: 44px;
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap; justify-content: center;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.3s forwards;
}

.btn-primary {
  position: relative;
  padding: 18px 40px;
  border-radius: 100px;
  background: var(--blue); color: #fff;
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em;
  transition: transform 0.4s var(--ease-out), background 0.2s, box-shadow 0.4s;
  display: inline-flex; align-items: center; gap: 10px;
  will-change: transform;
}
.btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 14px 40px rgba(37,99,235,0.3), 0 4px 12px rgba(37,99,235,0.15);
}
.btn-primary svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-quiet {
  font-size: 15px; font-weight: 600;
  color: var(--blue);
  border-bottom: none;
  padding-bottom: 2px;
  transition: color 0.2s;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.btn-quiet > span:first-child,
.btn-quiet:not(:has(.quiet-aside)) {
  border-bottom: 1px solid var(--blue-border);
}
.btn-quiet:hover { color: var(--blue-dark); }
.btn-quiet:hover > span:first-child { border-bottom-color: var(--blue); }

.hero-trust {
  margin-top: 56px;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex; gap: 24px; justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.6s forwards;
}
.hero-trust span { white-space: nowrap; }
.hero-trust .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--blue);
  align-self: center;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ SECTION BASE ============ */
section {
  padding: 120px 32px;
  position: relative;
}
@media (max-width: 640px) {
  section { padding: 80px 20px; }
}

.section-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 20px;
  text-align: center;
}
.section-headline {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-align: center;
  max-width: 18ch;
  margin: 0 auto 24px;
  color: var(--ink);
}
.section-headline em { font-style: italic; font-weight: 800; color: var(--blue); }
.section-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-3);
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 64px;
  line-height: 1.55;
}

/* ============ PROOF BAR (3 customer cards) ============ */
.proof {
  background: var(--paper-warm);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 56px;
}
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr; }
}

.proof-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 32px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.proof-card.visible { opacity: 1; transform: translateY(0); }
.proof-card:hover {
  border-color: var(--blue);
  box-shadow: 0 24px 60px rgba(37,99,235,0.10), 0 4px 12px rgba(0,0,0,0.04);
  transform: translateY(-6px);
}
.proof-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.proof-card:hover::before { transform: scaleX(1); }

.proof-card:nth-child(1).visible { transition-delay: 0s; }
.proof-card:nth-child(2).visible { transition-delay: 0.12s; }
.proof-card:nth-child(3).visible { transition-delay: 0.24s; }

.proof-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  color: var(--blue);
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 12px;
  background: var(--blue-tint);
  border: 1px solid var(--blue-border);
  border-radius: 100px;
  margin-bottom: 28px;
  align-self: flex-start;
}
.proof-headline {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 16px;
  color: var(--ink);
}
.proof-headline strong { font-weight: 800; color: var(--blue); }
.proof-text {
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 32px;
  flex: 1;
}
.proof-link {
  font-size: 14px; font-weight: 700;
  color: var(--blue);
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto;
  transition: gap 0.3s var(--ease-out);
}
.proof-card:hover .proof-link { gap: 14px; }
.proof-link svg { width: 14px; height: 14px; }

.proof-cta {
  text-align: center;
}
.proof-cta-top {
  margin-bottom: 32px;
}
.proof-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border: 1px solid var(--blue-border);
  background: var(--card);
  border-radius: 100px;
  font-size: 14px; font-weight: 700;
  color: var(--blue);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.proof-cta-btn:hover {
  border-color: var(--blue);
  background: var(--blue-tint);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,99,235,0.12);
}
.proof-cta-btn svg { width: 14px; height: 14px; }

/* ============ MADE FOR ============ */
.made-for-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .made-for-grid { grid-template-columns: 1fr; gap: 20px; }
}

.audience-card {
  padding: 0;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.audience-card.visible { opacity: 1; transform: translateY(0); }
.audience-card:nth-child(1).visible { transition-delay: 0s; }
.audience-card:nth-child(2).visible { transition-delay: 0.1s; }
.audience-card:nth-child(3).visible { transition-delay: 0.2s; }

.audience-card:hover {
  border-color: var(--blue);
  box-shadow: 0 16px 40px rgba(37,99,235,0.10);
  transform: translateY(-4px);
}

.audience-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--paper-warm);
}
.audience-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
  display: block;
}
.audience-card:hover .audience-photo img {
  transform: scale(1.04);
}
.audience-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(13,13,18,0.04) 100%);
  pointer-events: none;
}

.audience-content {
  padding: 28px 28px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.audience-num {
  font-size: 13px; font-weight: 700;
  color: var(--blue); letter-spacing: 1px;
  margin-bottom: 16px;
}
.audience-name {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--ink);
}
.audience-text {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  font-weight: 400;
}

/* ============ SIX ROLES (RADIAL FAN) ============ */
.roles {
  background: var(--paper);
  position: relative;
}

.roles-stage {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.roles-source {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 56px;
  opacity: 0; transform: scale(0.8);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.roles-source.visible { opacity: 1; transform: scale(1); }

.roles-source-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.03em;
  position: relative;
  box-shadow: 0 12px 32px rgba(37,99,235,0.25);
}
.roles-source-circle::after {
  content: '';
  position: absolute; inset: -10px;
  border: 1px solid var(--blue);
  opacity: 0.4;
  border-radius: 50%;
  animation: pulseRing 3s ease-in-out infinite;
}
@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.18); opacity: 0; }
}
.roles-source-label {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
}
@media (max-width: 1100px) { .roles-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .roles-grid { grid-template-columns: 1fr; } }

.role-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 18px;
  position: relative;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.role-card.visible { opacity: 1; transform: translateY(0); }
.role-card:hover {
  border-color: var(--blue);
  box-shadow: 0 12px 32px rgba(37,99,235,0.08);
}

.role-card:nth-child(1).visible { transition-delay: 0s; }
.role-card:nth-child(2).visible { transition-delay: 0.06s; }
.role-card:nth-child(3).visible { transition-delay: 0.12s; }
.role-card:nth-child(4).visible { transition-delay: 0.18s; }
.role-card:nth-child(5).visible { transition-delay: 0.24s; }
.role-card:nth-child(6).visible { transition-delay: 0.30s; }
.role-card:nth-child(7).visible { transition-delay: 0.36s; }
.role-card:nth-child(8).visible { transition-delay: 0.42s; }
.role-card:nth-child(9).visible { transition-delay: 0.48s; }
.role-card:nth-child(10).visible { transition-delay: 0.54s; }

/* Coming soon state — dimmed but still showcased */
.role-card.coming-soon {
  background: var(--paper);
}
.role-card.coming-soon .role-mockup,
.role-card.coming-soon .role-num,
.role-card.coming-soon .role-name,
.role-card.coming-soon .role-tasks {
  opacity: 0.55;
  transition: opacity 0.3s var(--ease-out);
}
.role-card.coming-soon:hover {
  border-color: var(--blue);
  box-shadow: 0 12px 32px rgba(37,99,235,0.08);
}
.role-card.coming-soon:hover .role-mockup,
.role-card.coming-soon:hover .role-num,
.role-card.coming-soon:hover .role-name,
.role-card.coming-soon:hover .role-tasks {
  opacity: 0.75;
}
.role-coming-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
}

.role-num {
  font-size: 11px; font-weight: 700;
  color: var(--blue); letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.role-name {
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--ink);
}
.role-tasks {
  display: flex; flex-direction: column; gap: 8px;
}
.role-task {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
  font-weight: 400;
  display: flex; gap: 8px; align-items: flex-start;
}
.role-task::before {
  content: '·';
  color: var(--blue);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
  flex-shrink: 0;
}

/* ============ COMPOUNDING ============ */
.compound {
  background: var(--paper-warm);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.compound-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.compound-headline {
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 24px;
  color: var(--ink);
}
.compound-headline .lighter {
  font-style: italic;
  display: inline-block;
  font-variation-settings: 'wght' 800;
  color: var(--ink);
  transition: font-variation-settings 1.6s var(--ease-in-out), letter-spacing 1.6s var(--ease-in-out), color 1.6s var(--ease-in-out);
}
.compound-headline.animate-light .lighter {
  font-variation-settings: 'wght' 300;
  letter-spacing: 0.01em;
  color: var(--blue);
}

.compound-body {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-3);
  line-height: 1.6;
  margin-bottom: 24px;
}

.compound-quote {
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--ink);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.015em;
  padding: 24px 0;
  margin-bottom: 56px;
  border-top: 1px solid var(--blue-border);
  border-bottom: 1px solid var(--blue-border);
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}

.stat-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
}
.stat-item {
  flex: 1;
  min-width: 200px;
  padding: 24px 16px;
  text-align: center;
}
.stat-item + .stat-item {
  border-left: 1px solid var(--line);
}
@media (max-width: 720px) {
  .stat-item + .stat-item { border-left: none; border-top: 1px solid var(--line); }
}

.stat-num {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.stat-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
}
.stat-star {
  width: 22px; height: 22px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  fill: var(--blue);
}
.stat-star.visible { opacity: 1; transform: scale(1); }
.stat-label {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ============ REVIEWS MARQUEE ============ */
.reviews {
  padding-bottom: 0;
  background: var(--paper);
  overflow: hidden;
}
.reviews-header {
  text-align: center;
  margin-bottom: 64px;
}

/* Overall Google rating display, shown right below the headline */
.reviews-overall {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
}
.reviews-overall[hidden] { display: none; }
.reviews-overall-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.reviews-overall-stars svg {
  width: 22px;
  height: 22px;
  fill: #fbbf24;       /* amber/gold for filled stars */
}
.reviews-overall-stars svg.empty { fill: #e5e7eb; }
.reviews-overall-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.reviews-overall-sep {
  color: var(--ink-4);
  font-weight: 500;
}
#reviews-overall-count {
  color: var(--ink-3);
  font-weight: 600;
}
@media (max-width: 600px) {
  .reviews-overall { gap: 8px; margin-top: 14px; }
  .reviews-overall-stars svg { width: 18px; height: 18px; }
  .reviews-overall-text { font-size: 14px; }
}

.reviews-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 8px 0 80px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.reviews-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marquee 80s linear infinite;
  will-change: transform;
}
.reviews-marquee:hover .reviews-track {
  animation-play-state: paused;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.review-card {
  flex-shrink: 0;
  width: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out);
}
.review-card:hover {
  border-color: var(--blue);
  box-shadow: 0 16px 40px rgba(37,99,235,0.10);
  transform: translateY(-4px);
}

.review-stars {
  display: flex; gap: 2px;
  margin-bottom: 16px;
}
.review-stars svg {
  width: 16px; height: 16px;
  fill: var(--blue);
}

.review-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
  margin-bottom: 24px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-footer {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  gap: 12px;
}

.review-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.review-date {
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 2px;
}

.review-verify {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  flex-shrink: 0;
  transition: color 0.2s;
}
.review-verify:hover { color: var(--blue); }
.review-verify .g-mark {
  width: 14px; height: 14px;
}

.reviews-cta {
  text-align: center;
  padding: 0 24px 80px;
}

.reviews-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border: 1px solid var(--blue-border);
  background: var(--card);
  border-radius: 100px;
  font-size: 14px; font-weight: 700;
  color: var(--blue);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.reviews-cta-btn:hover {
  border-color: var(--blue);
  background: var(--blue-tint);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,99,235,0.12);
}
.reviews-cta-btn svg { width: 14px; height: 14px; }

/* ============ PRICING ============ */
.pricing {
  background: var(--paper-warm);
  border-top: 1px solid var(--line-soft);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pricing-grid { grid-template-columns: 1fr; } }

.tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 20px 24px;
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
  opacity: 0; transform: translateY(20px);
  text-decoration: none;
  color: inherit;
}
a.tier { -webkit-tap-highlight-color: transparent; }
.tier:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 18px;
}
.tier.visible { opacity: 1; transform: translateY(0); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), border-color 0.3s, box-shadow 0.3s; }
.tier:nth-child(1).visible { transition-delay: 0s; }
.tier:nth-child(2).visible { transition-delay: 0.06s; }
.tier:nth-child(3).visible { transition-delay: 0.12s; }
.tier:nth-child(4).visible { transition-delay: 0.18s; }
.tier:nth-child(5).visible { transition-delay: 0.24s; }
.tier:nth-child(6).visible { transition-delay: 0.30s; }

.tier:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(37,99,235,0.10);
}

.tier.featured {
  border-color: var(--blue);
  border-width: 2px;
  padding: 31px 19px 23px;
  background: linear-gradient(180deg, var(--card) 0%, rgba(37,99,235,0.02) 100%);
}
.tier.featured:hover {
  box-shadow: 0 20px 50px rgba(37,99,235,0.18);
}

.tier-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(37,99,235,0.25);
}

.tier-name {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--blue);
}

.tier-price {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--ink);
}
.tier-period {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 20px;
}

.tier-coverage {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  font-weight: 400;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.tier-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: background 0.2s, transform 0.2s;
}
.tier-cta svg { width: 14px; height: 14px; }
.tier:hover .tier-cta {
  background: var(--blue);
  transform: translateY(-1px);
}
.tier.featured .tier-cta {
  background: var(--blue);
}
.tier.featured:hover .tier-cta {
  background: #1e51c9;
}

.pricing-addons {
  text-align: center;
  margin-top: 56px;
  font-size: 14px;
  color: var(--ink-3);
}

/* ============ COMPARISON — cheap vs good help bar chart ============ */
.comparison {
  background: var(--paper-warm);
  text-align: center;
}

/* Comparison-specific headline: lighter weight on "cheap help" line,
   heavy weight on "good help" line. Both lines stack vertically. */
.comp-headline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ch-cheap {
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: -0.02em;
}
.ch-good {
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
}
.ch-good em {
  font-style: italic;
  font-weight: 800;
  color: var(--blue);
}
.comparison-grid {
  max-width: 1080px;
  margin: 24px auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* Per-tier column. Each holds two skinny bars + label + cost + tag. */
.comp-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 18px;
  border-radius: 16px;
  background: transparent;
  transition: background 0.3s, transform 0.3s var(--ease-out);
  position: relative;
}
.comp-tier-paulean {
  background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02));
  border: 1px solid rgba(37,99,235,0.22);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(37,99,235,0.08);
}

/* Chart stage — positioned container for the single cost bar + the FG error mark */
.ct-stage {
  position: relative;
  height: 220px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 16px;
}

/* Single cost bar — anchored to the bottom of the stage.
   Green with a tiled dollar-sign pattern: makes it unambiguous that the
   bar represents money you spend each month. */
.ct-bar {
  width: 32px;
  height: var(--h);
  min-height: 4px;
  border-radius: 6px 6px 0 0;
  background-color: #16a34a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Ctext x='8' y='14' font-family='DM Sans, sans-serif' font-size='13' font-weight='800' fill='rgba(255,255,255,0.38)' text-anchor='middle'%3E%24%3C/text%3E%3C/svg%3E");
  background-size: 16px 20px;
  background-repeat: repeat;
  background-position: center bottom;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -8px 14px rgba(0,0,0,0.08);
  transition: height 0.8s var(--ease-out);
}
.comp-tier-paulean .ct-bar {
  background-color: #15803d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -8px 14px rgba(0,0,0,0.10),
    0 6px 20px rgba(22,163,74,0.32);
}

/* Finished goods marker — a VERTICAL amber line layered on top of the cost bar.
   Anchored to the bottom of the stage, height scales with --fg (0-100%).
   When FG > cost%, the marker visually extends ABOVE the bar's top, showing
   the "you get more than you pay for" gap. The top is capped with a paper-stack
   icon to signify deliverables; the bottom has a simple horizontal cap. */
/* On desktop, the paper-stack icon is drawn via .ct-fg-mark::before (top of vertical bar).
   On mobile, that pseudo-element approach failed for high-FG tiers (positioning quirks
   on percentage-width parents), so we use a real .ct-fg-icon element instead.
   Hide it on desktop; show only in the mobile media query. */
.ct-fg-icon {
  display: none;
}

.ct-fg-mark {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 3px;
  height: var(--fg);
  background: #d97706;
  border-radius: 2px;
  z-index: 3;
  pointer-events: none;
}
/* Top cap — paper-stack icon signifying deliverables */
.ct-fg-mark::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18' viewBox='0 0 22 18'%3E%3C!-- Back sheet --%3E%3Crect x='5' y='2' width='14' height='12' rx='1' fill='%23fef3c7' stroke='%23d97706' stroke-width='1.2'/%3E%3Cline x1='8' y1='5' x2='16' y2='5' stroke='%23d97706' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='8' y1='8' x2='14' y2='8' stroke='%23d97706' stroke-width='1' stroke-linecap='round'/%3E%3C!-- Front sheet, offset --%3E%3Crect x='3' y='5' width='14' height='12' rx='1' fill='%23fde68a' stroke='%23d97706' stroke-width='1.2'/%3E%3Cline x1='6' y1='8' x2='14' y2='8' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='6' y1='11' x2='12' y2='11' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='6' y1='14' x2='13' y2='14' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  border-radius: 0;
}
/* Bottom cap — simple horizontal stub */
.ct-fg-mark::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  background: #d97706;
  border-radius: 2px;
}
.comp-tier-paulean .ct-fg-mark {
  background: #b45309;
  box-shadow: 0 0 12px rgba(217,119,6,0.5);
}
/* Desktop-only: the bottom cap (::after) is just an amber stub.
   On mobile, ::after is the paper-stack icon, which we don't want to override. */
@media (min-width: 881px) {
  .comp-tier-paulean .ct-fg-mark::after {
    background: #b45309;
  }
}

/* Tier name */
.ct-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: 6px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comp-tier-paulean .ct-name { color: var(--blue); }

/* Cost label */
.ct-cost {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.comp-tier-paulean .ct-cost { color: var(--blue); }
.ct-aster {
  color: var(--ink-4);
  font-size: 11px;
  font-weight: 700;
  vertical-align: super;
  margin-left: 1px;
}
.comp-tier-paulean .ct-aster { color: var(--blue); }
.ct-period {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-4);
  letter-spacing: 0;
  margin-left: 2px;
  display: none; /* Hidden on desktop — legend above the chart sets expectations.
                    Shown on mobile via media query for clarity at small sizes. */
}
.comp-tier-paulean .ct-period { color: var(--blue); opacity: 0.7; }

/* Tag description */
.ct-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  line-height: 1.4;
  text-align: center;
  padding: 0 4px;
}
.comp-tier-paulean .ct-tag {
  color: var(--ink);
  font-weight: 700;
}

/* Legend above the chart — sets visitor expectations before they read the bars */
.comp-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin: 48px auto 24px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cl-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cl-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.cl-swatch-cost {
  width: 16px;
  height: 16px;
  background-color: #16a34a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ctext x='8' y='12' font-family='DM Sans, sans-serif' font-size='11' font-weight='800' fill='rgba(255,255,255,0.6)' text-anchor='middle'%3E%24%3C/text%3E%3C/svg%3E");
  background-size: cover;
  border-radius: 3px;
}
.cl-swatch-fg {
  width: 22px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18' viewBox='0 0 22 18'%3E%3Crect x='5' y='2' width='14' height='12' rx='1' fill='%23fef3c7' stroke='%23d97706' stroke-width='1.2'/%3E%3Cline x1='8' y1='5' x2='16' y2='5' stroke='%23d97706' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='8' y1='8' x2='14' y2='8' stroke='%23d97706' stroke-width='1' stroke-linecap='round'/%3E%3Crect x='3' y='5' width='14' height='12' rx='1' fill='%23fde68a' stroke='%23d97706' stroke-width='1.2'/%3E%3Cline x1='6' y1='8' x2='14' y2='8' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='6' y1='11' x2='12' y2='11' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='6' y1='14' x2='13' y2='14' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
  border-radius: 0;
  position: relative;
}

/* Asterisk note */
.comparison-note {
  margin-top: 28px;
  font-size: 12px;
  color: var(--ink-4);
  font-style: italic;
}

/* Kicker line below the whole thing */
.comparison-kicker {
  margin-top: 16px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
}

/* Mobile — sideways stacked bar chart. Each tier becomes a row with:
   - Tier name on the left
   - Horizontal grey cost bar with amber error bar overlaid (width = FG%)
   - Cost label on the right
   - Tag below the row, small */
@media (max-width: 880px) {
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
    padding: 0 16px;
  }
  .comp-tier {
    padding: 14px 14px 12px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "bar"
      "tag";
    gap: 8px;
    align-items: stretch;
    text-align: left;
    border-radius: 14px;
  }
  .comp-tier-paulean {
    transform: none;
  }
  /* Header row: name + cost on same line */
  .ct-name {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    min-height: 0;
    text-align: left;
  }
  /* Move cost INTO the name row using a flex sibling — flip the order so
     name is on the left, cost on the right of the same flex row */
  .comp-tier {
    /* Use the existing element flow but flex the name/cost together */
  }
  .ct-cost {
    grid-area: header;
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    text-align: right;
    justify-self: end;
    align-self: center;
  }
  /* Bar row: stage becomes a thin horizontal track.
     Top margin reserves space for the paper-stack icon that floats above. */
  .ct-stage {
    grid-area: bar;
    height: 28px;
    width: 100%;
    display: block;
    margin: 32px 0 0;
    position: relative;
    background: rgba(0,0,0,0.04);
    border-radius: 6px;
    overflow: visible;
  }
  /* Cost bar — horizontal, width = --h (the existing percentage value works) */
  .ct-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--h);
    height: 100%;
    border-radius: 6px;
    background-color: #16a34a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Ctext x='8' y='14' font-family='DM Sans, sans-serif' font-size='13' font-weight='800' fill='rgba(255,255,255,0.38)' text-anchor='middle'%3E%24%3C/text%3E%3C/svg%3E");
    background-size: 16px 20px;
    background-repeat: repeat;
    background-position: left center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 6px rgba(0,0,0,0.08);
    min-width: 4px;
  }
  .comp-tier-paulean .ct-bar {
    background-color: #15803d;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 4px 14px rgba(22,163,74,0.28);
  }
  /* FG marker — horizontal error bar layered on top of the cost bar.
     Width = --fg percentage, anchored to the left. Left cap is a vertical line;
     right cap is a paper-stack icon to signify deliverables. */
  .ct-fg-mark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--fg);
    height: 3px;
    background: #d97706;
    border-radius: 2px;
    z-index: 3;
    min-width: 8px;
    overflow: visible;
  }
  .ct-fg-mark::before {
    /* Left cap — vertical stub flush with the line's left edge */
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: #d97706;
    border-radius: 2px;
    z-index: 1;
  }
  /* Hide the desktop ::after pseudo-element on mobile — we use .ct-fg-icon instead */
  .ct-fg-mark::after {
    display: none;
  }
  /* Right cap + paper-stack icon, as a real element positioned via --fg on the stage.
     This is more reliable than using ::after with right: 0, which had quirks on
     percentage-width parents.  */
  .ct-fg-icon {
    display: block;
    position: absolute;
    left: var(--fg);
    top: 50%;
    transform: translate(-50%, calc(-50% - 16px));
    width: 32px;
    height: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='36' viewBox='0 0 32 36'%3E%3Crect x='14' y='25' width='4' height='11' rx='2' fill='%23d97706'/%3E%3Crect x='8' y='3' width='17' height='14' rx='1.5' fill='%23fef3c7' stroke='%23d97706' stroke-width='1.3'/%3E%3Cline x1='12' y1='6.5' x2='22' y2='6.5' stroke='%23d97706' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='12' y1='10' x2='19' y2='10' stroke='%23d97706' stroke-width='1' stroke-linecap='round'/%3E%3Crect x='5' y='6' width='17' height='14' rx='1.5' fill='%23fde68a' stroke='%23d97706' stroke-width='1.3'/%3E%3Cline x1='9' y1='10' x2='19' y2='10' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='9' y1='13.5' x2='16' y2='13.5' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='9' y1='17' x2='18' y2='17' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 4;
    pointer-events: none;
  }
  .comp-tier-paulean .ct-fg-mark {
    background: #b45309;
    box-shadow: 0 0 10px rgba(217,119,6,0.4);
  }
  .comp-tier-paulean .ct-fg-mark::before {
    background: #b45309;
  }
  /* Tag below the bar */
  .ct-tag {
    grid-area: tag;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    padding: 0;
  }
  .ct-aster, .ct-period {
    font-size: 10px;
  }
  .ct-period {
    display: inline; /* Re-show on mobile */
  }
  .comp-legend { gap: 16px; font-size: 10px; margin-top: 0; margin-bottom: 24px; padding: 0 16px; }
  .cl-swatch { width: 14px; height: 14px; }
  .cl-swatch-cost { width: 14px; height: 14px; }
  .cl-swatch-fg { width: 18px; height: 14px; }
  /* Remove the old pseudo-element legend marks — desktop swatches are now icons */
  .cl-swatch-fg::before, .cl-swatch-fg::after { display: none; }
  .comparison-kicker {
    font-size: 17px;
    margin-top: 24px;
    padding: 0 16px;
  }
  .comparison-note { margin-top: 20px; font-size: 11px; padding: 0 16px; }
}

/* ============ MODAL — partner application ============ */
/* Universal rule: the HTML `hidden` attribute should hide elements regardless of
   their display rule. Without this, `.modal-confirmation { display: flex }` wins
   over the user agent's `[hidden] { display: none }`, causing the success state
   to show before submission. */
[hidden] { display: none !important; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 18, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 24px 24px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.is-open {
  opacity: 1;
}
.modal-container {
  background: var(--paper);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  position: relative;
  padding: 48px 48px 40px;
  box-shadow: 0 20px 80px rgba(13,13,18,0.18);
  transform: translateY(20px);
  transition: transform 0.3s var(--ease-out);
  margin-bottom: 24px;
}
.modal-overlay.is-open .modal-container {
  transform: translateY(0);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-2);
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  z-index: 2;
}
.modal-close:hover {
  background: rgba(0,0,0,0.06);
  color: var(--ink);
}
.modal-close svg {
  width: 22px;
  height: 22px;
  display: block;
}
.modal-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.15;
}
.modal-sub {
  font-size: 15px;
  color: var(--ink-3);
  margin: 0 0 32px;
  font-weight: 500;
}

/* Form fields */
.partner-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pf-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.pf-req {
  color: var(--blue);
  margin-left: 2px;
}
.pf-optional {
  font-weight: 500;
  color: var(--ink-4);
  font-size: 12px;
  margin-left: 4px;
}
.pf-field input[type="text"],
.pf-field input[type="email"],
.pf-field input[type="url"],
.pf-field input[type="tel"],
.pf-field input[type="number"],
.pf-field select,
.pf-field textarea {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.pf-field textarea {
  resize: vertical;
  min-height: 80px;
  font-family: 'DM Sans', sans-serif;
}
.pf-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' stroke='%230d0d12' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
}
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.pf-field.has-error input,
.pf-field.has-error select,
.pf-field.has-error textarea {
  border-color: #dc2626;
}
.pf-field.has-error input:focus,
.pf-field.has-error select:focus,
.pf-field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,0.14);
}
.pf-error {
  font-size: 12px;
  color: #dc2626;
  font-weight: 600;
  min-height: 0;
  margin-top: 2px;
}
.pf-conditional {
  margin-top: 8px;
}
.pf-conditional[hidden] {
  display: none;
}

/* LOI section */
.pf-loi-field {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  gap: 12px;
}
.pf-loi-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue);
  margin-bottom: 0;
}
.pf-loi-instruction {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 4px;
  font-weight: 500;
}
.pf-loi-frame-wrap {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: inset 0 -8px 18px -8px rgba(0,0,0,0.08);
}
.pf-loi-frame {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}
.pf-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px;
  background: rgba(37,99,235,0.04);
  border-radius: 10px;
  cursor: pointer;
  margin-top: 4px;
}
.pf-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  cursor: pointer;
  accent-color: var(--blue);
}
.pf-checkbox-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.pf-checkbox-label em {
  font-style: italic;
  font-weight: 500;
  color: var(--ink-3);
}
.pf-checkbox-label a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.pf-checkbox-label a:hover { text-decoration: underline; }

/* SMS opt-in checkbox — visually lighter than the LOI required consent.
   Twilio requires this be voluntary and visually distinct from required consents. */
.pf-sms-field {
  margin-top: 4px;
}
.pf-sms-checkbox {
  background: rgba(13,13,18,0.03);
  border: 1px dashed rgba(13,13,18,0.15);
}
.pf-sms-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pf-sms-header-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.pf-sms-header-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(13,13,18,0.06);
  color: var(--ink-3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pf-sms-checkbox .pf-checkbox-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.5;
}
.pf-sms-checkbox .pf-checkbox-label strong { color: var(--ink); font-weight: 700; }
.pf-sms-lead {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  font-size: 12.5px;
}
.pf-sms-bullets {
  margin: 0 0 6px;
  padding-left: 18px;
  list-style: disc;
}
.pf-sms-bullets li {
  font-size: 12px;
  margin-bottom: 4px;
  line-height: 1.45;
  color: var(--ink-2);
}
.pf-sms-bullets li:last-child { margin-bottom: 0; }
.pf-sms-bullets a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.pf-sms-bullets a:hover { text-decoration: underline; }
.pf-sms-optional {
  display: block;
  font-style: italic;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 500;
  margin-top: 6px;
}

/* Submit */
.pf-submit-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
}
.pf-submit {
  width: 100%;
  justify-content: center;
  position: relative;
}
.pf-submit[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}
.pf-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: pfSpin 0.8s linear infinite;
}
.pf-submit.is-loading .pf-submit-label,
.pf-submit.is-loading svg {
  display: none;
}
.pf-submit.is-loading .pf-submit-spinner {
  display: inline-block;
}
@keyframes pfSpin {
  to { transform: rotate(360deg); }
}
.pf-disclaimer {
  font-size: 12px;
  color: var(--ink-4);
  text-align: center;
  margin: 0;
  font-weight: 500;
}
.pf-form-error {
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: 10px;
  padding: 14px 16px;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-top: 8px;
}

/* Confirmation state */
.modal-confirmation {
  text-align: center;
  padding: 48px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.mc-icon svg {
  width: 64px;
  height: 64px;
  display: block;
}
.mc-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 8px 0 0;
  color: var(--ink);
}
.mc-text {
  font-size: 15px;
  color: var(--ink-3);
  margin: 0 0 16px;
  max-width: 420px;
}

/* Mobile */
@media (max-width: 720px) {
  .modal-overlay { padding: 16px; }
  .modal-container {
    padding: 32px 22px 28px;
    border-radius: 14px;
  }
  .modal-title { font-size: 24px; }
  .modal-sub { font-size: 14px; margin-bottom: 24px; }
  .pf-row { grid-template-columns: 1fr; gap: 20px; }
  .pf-loi-frame { height: 280px; }
  .modal-close { top: 10px; right: 10px; }
}

/* Prevent body scroll when modal is open */
body.modal-locked {
  overflow: hidden;
}

/* ============ PARTNERS ============ */
.partners {
  background: var(--paper);
  text-align: center;
}
.partners-content {
  max-width: 760px;
  margin: 0 auto;
}

.partners-headline {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 24px;
  color: var(--ink);
}
.partners-headline em { font-style: italic; font-weight: 800; color: var(--blue); }

.partners-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-3);
  line-height: 1.6;
  margin-bottom: 48px;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.partners-offer {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 56px 32px;
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}
.partners-offer::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(37,99,235,0.08), transparent 70%);
  pointer-events: none;
}

.partners-percent {
  font-size: clamp(96px, 18vw, 200px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.partners-percent .pct {
  font-size: 0.5em;
  font-weight: 700;
  vertical-align: top;
  letter-spacing: -0.04em;
}

.partners-offer-line {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-top: 16px;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.partners-offer-detail {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

.partners-math {
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 560px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
  position: relative;
  z-index: 1;
}
@media (max-width: 600px) { .partners-math { grid-template-columns: 1fr; gap: 24px; } }

.partners-math-item {
  text-align: center;
  padding: 0 16px;
}
.partners-math-item + .partners-math-item {
  border-left: 1px solid var(--line);
}
@media (max-width: 600px) {
  .partners-math-item + .partners-math-item { border-left: none; border-top: 1px solid var(--line); padding-top: 24px; }
}

.partners-math-num {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.partners-math-num .currency { font-size: 0.7em; color: var(--blue); margin-right: 2px; }
.partners-math-label {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
  font-weight: 500;
}

/* ============ FINAL CTA ============ */
.final {
  padding: 160px 24px 100px;
  background: var(--paper-warm);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
}

.final::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 800px; height: 600px;
  background: radial-gradient(ellipse, rgba(37,99,235,0.08), transparent 60%);
  pointer-events: none;
}

.final-mark {
  font-size: clamp(72px, 18vw, 240px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  margin-bottom: 24px;
  color: var(--ink);
  display: inline-block;
  position: relative;
  z-index: 1;
}

.final-mark .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.final-mark .word.accent {
  color: var(--blue);
  font-style: italic;
}
.final-mark.visible .word:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.final-mark.visible .word:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }

.final-sub {
  font-size: clamp(18px, 2vw, 24px);
  color: var(--ink-2);
  font-weight: 300;
  margin-bottom: 40px;
  max-width: 36ch;
  margin-left: auto; margin-right: auto;
  line-height: 1.4;
  letter-spacing: -0.015em;
  position: relative;
  z-index: 1;
}

.final-cta-row {
  display: flex; gap: 20px; justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.final-trust {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex; gap: 24px; justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.final-trust .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--blue);
  align-self: center;
}

/* ============ FOOTER ============ */
footer {
  padding: 60px 32px 40px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand-name {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  color: var(--ink);
}
.footer-brand-tag {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
  font-weight: 400;
  max-width: 26ch;
}

.footer-col-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.footer-col-link {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 10px;
  transition: color 0.2s;
}
.footer-col-link:hover { color: var(--blue); }

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ink-4);
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom .signature {
  letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; font-size: 11px;
  color: var(--blue);
}

/* ============================================================
   HERO LAYOUT — CENTERED with phone mockup below
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140px 24px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-eyebrow { align-self: center; }
.hero-headline { max-width: 14ch; margin: 0 auto; }
.hero-sub {
  margin-top: 28px;
  margin-left: auto;
  margin-right: auto;
  max-width: 32ch;
  text-align: center;
}
.hero-cta-row { justify-content: center; }
.hero-trust { justify-content: center; }

/* ============================================================
   HERO PHONE MOCKUP — Paulean delivering a customer win
   ============================================================ */
.hero-phone-stage {
  margin-top: 48px;
  width: 100%;
  max-width: 380px;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s var(--ease-out) 1.0s forwards;
}

/* ============ HERO PHONE WRAP — CINEMATIC SHELL ============ */
.hero-phone-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-phone-wrap .hero-phone-stage {
  margin-top: 0;
  position: relative;
  z-index: 2;
}

/* On desktop (>=1100px) the wrap expands so orbiting tiles have room */
@media (min-width: 1100px) {
  .hero-phone-wrap {
    max-width: 900px;
  }
  .hero-phone-wrap .hero-phone-stage {
    width: 380px;
    margin: 0 auto;
  }
}

/* While the shared phone markup loads, hold the height it will take so the
   sections below do not jump. Heights measured on the homepage 2026-09-15.
   The wrap must be written with nothing inside it for :empty to match.
   Re-measure these heights whenever the phone's layout, tile CSS or content changes. */
.hero-phone-wrap:empty { min-height: 877px; }
@media (min-width: 1100px) { .hero-phone-wrap:empty { min-height: 772px; } }
@media (max-width: 900px)  { .hero-phone-wrap:empty { min-height: 837px; } }
@media (max-width: 640px)  { .hero-phone-wrap:empty { min-height: 693px; } }
@media (max-width: 380px)  { .hero-phone-wrap:empty { min-height: 613px; } }

/* ============ PHONE SCENES — fade between chat and role scenes ============ */
.phone-scene {
  flex: 1;
  position: relative;
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.phone-scene.is-active {
  opacity: 1;
  pointer-events: auto;
}
.phone-scene-chat {
  display: flex;
}
.phone-scene-role {
  position: absolute;
  top: 92px;
  left: 0; right: 0; bottom: 0;
  padding: 0;
}
.phone-scene-role.is-active {
  display: flex;
  flex-direction: column;
}
@media (max-width: 640px) {
  .phone-scene-role { top: 84px; }
}

.phone-scene-label {
  padding: 14px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.psl-tag {
  font-size: 9px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.psl-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.3;
}

.phone-scene-stage {
  flex: 1;
  padding: 4px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  gap: 6px;
}
.phone-scene-stage svg.scene-mockup {
  width: 100%;
  height: auto;
  max-height: 50%;
  display: block;
  flex-shrink: 0;
}

/* ============ WORKFLOW TRAIL — collaboration steps below mockup ============ */
.scene-trail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px 0;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  flex: 1;
  min-height: 0;
  text-align: left;
}
.trail-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  line-height: 1.25;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), color 0.3s;
}
.trail-step.is-on {
  opacity: 1;
  transform: translateX(0);
  color: var(--ink);
}
.trail-step.is-on.is-done {
  color: var(--ink-2);
}
.trail-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.3s;
}
.trail-icon svg { width: 8px; height: 8px; display: block; }
.trail-step.is-on .trail-icon {
  background: var(--blue);
}
.trail-step.is-on.is-done .trail-icon {
  background: #16a34a;
}
.trail-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trail-you-pill {
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 800;
  color: #d97706;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.6px;
}
/* Stagger each step's reveal over the first ~3.5s of an 8s scene.
   JS adds 'is-on' and 'is-done' classes as the scene plays. */

/* On mobile, trail font shrinks slightly */
@media (max-width: 640px) {
  .trail-step { font-size: 9.5px; }
  .trail-you-pill { font-size: 7.5px; padding: 1px 4px; }
  .scene-trail { padding-top: 6px; gap: 3px; }
}

/* ============ SCENE 1 — SALES ANIMATIONS ============ */
@keyframes heroSalesFlip {
  0% { transform: rotateY(0deg); }
  35% { transform: rotateY(180deg); }
  70%, 100% { transform: rotateY(360deg); }
}
@keyframes heroSalesAiOut {
  0%, 30% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes heroSalesHumanIn {
  0%, 45% { opacity: 0; transform: translate(220px, 92px) scale(0.4); }
  55%, 100% { opacity: 1; transform: translate(220px, 92px) scale(1); }
}
.phone-scene-role[data-scene="sales"].is-active .hero-sales-card {
  transform-origin: 140px 130px;
  animation: heroSalesFlip 2.5s var(--ease-out) 0.2s both;
}
.phone-scene-role[data-scene="sales"].is-active .hero-sales-ai-badge {
  animation: heroSalesAiOut 2.5s var(--ease-out) 0.2s both;
}
.phone-scene-role[data-scene="sales"] .hero-sales-human-badge {
  opacity: 0;
}
.phone-scene-role[data-scene="sales"].is-active .hero-sales-human-badge {
  animation: heroSalesHumanIn 2.5s var(--ease-out) 0.2s both;
}

/* ============ SCENE 2 — MARKETING ANIMATIONS ============ */
@keyframes heroMkStampLand {
  0%, 35% { opacity: 0; transform: translate(200px, 88px) scale(1.8) rotate(0deg); }
  50%, 100% { opacity: 1; transform: translate(200px, 88px) scale(1) rotate(-10deg); }
}
.phone-scene-role[data-scene="marketing"] .hero-mk-stamp {
  opacity: 0;
}
.phone-scene-role[data-scene="marketing"].is-active .hero-mk-stamp {
  animation: heroMkStampLand 2s var(--ease-out) 0.5s both;
}

/* ============ SCENE 3 — HR ANIMATIONS ============ */
@keyframes heroHrCardIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroHrPickIn {
  0%, 65% { opacity: 0; transform: translate(140px, 70px) scale(0.5); }
  80%, 100% { opacity: 1; transform: translate(140px, 70px) scale(1); }
}
@keyframes heroHrC2Amber {
  0%, 45% {
    stroke: #e5e7eb;
    fill: #fbfaf6;
  }
  60%, 100% {
    stroke: #d97706;
    fill: #fff7ed;
    stroke-width: 2.2;
  }
}
@keyframes heroHrC2AvatarAmber {
  0%, 45% { fill: #dbeafe; }
  60%, 100% { fill: #fed7aa; }
}
@keyframes heroHrC2InitialAmber {
  0%, 45% { fill: #2563EB; }
  60%, 100% { fill: #d97706; }
}
.phone-scene-role[data-scene="hr"] .hero-hr-card { opacity: 0; }
.phone-scene-role[data-scene="hr"] .hero-hr-pick { opacity: 0; }
.phone-scene-role[data-scene="hr"].is-active .hero-hr-c1 {
  animation: heroHrCardIn 0.5s var(--ease-out) 0.2s forwards;
}
.phone-scene-role[data-scene="hr"].is-active .hero-hr-c2 {
  animation: heroHrCardIn 0.5s var(--ease-out) 0.45s forwards;
}
.phone-scene-role[data-scene="hr"].is-active .hero-hr-c3 {
  animation: heroHrCardIn 0.5s var(--ease-out) 0.7s forwards;
}
.phone-scene-role[data-scene="hr"].is-active .hero-hr-c2-bg {
  animation: heroHrC2Amber 2.4s var(--ease-out) 0.7s forwards;
}
.phone-scene-role[data-scene="hr"].is-active .hero-hr-c2-avatar {
  animation: heroHrC2AvatarAmber 2.4s var(--ease-out) 0.7s forwards;
}
.phone-scene-role[data-scene="hr"].is-active .hero-hr-c2-initial {
  animation: heroHrC2InitialAmber 2.4s var(--ease-out) 0.7s forwards;
}
.phone-scene-role[data-scene="hr"].is-active .hero-hr-pick {
  animation: heroHrPickIn 2.5s var(--ease-out) 0.6s forwards;
}

/* ============ SCENE — TECHNICAL EXPERT ============ */
@keyframes heroTeDrawLine {
  0% { stroke-dashoffset: 220; }
  100% { stroke-dashoffset: 0; }
}
@keyframes heroTeHumanCheck {
  0%, 70% { opacity: 0; transform: translate(244px, 104px) scale(0.4); }
  85%, 100% { opacity: 1; transform: translate(244px, 104px) scale(1); }
}
.phone-scene-role[data-scene="technical"] .hero-te-line {
  stroke: #2563EB;
  stroke-width: 1.6;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  fill: none;
}
.phone-scene-role[data-scene="technical"] .hero-te-human-check { opacity: 0; }
.phone-scene-role[data-scene="technical"].is-active .hero-te-l1 {
  animation: heroTeDrawLine 0.9s var(--ease-out) 0.2s forwards;
}
.phone-scene-role[data-scene="technical"].is-active .hero-te-l2 {
  animation: heroTeDrawLine 0.9s var(--ease-out) 0.45s forwards;
}
.phone-scene-role[data-scene="technical"].is-active .hero-te-l3 {
  animation: heroTeDrawLine 0.9s var(--ease-out) 0.7s forwards;
}
.phone-scene-role[data-scene="technical"].is-active .hero-te-l4 {
  animation: heroTeDrawLine 0.9s var(--ease-out) 0.95s forwards;
}
.phone-scene-role[data-scene="technical"].is-active .hero-te-human-check {
  animation: heroTeHumanCheck 2.6s var(--ease-out) 0.6s forwards;
}

/* ============ SCENE — SOCIAL MEDIA ============ */
@keyframes heroSmCursorMove {
  0%, 30% { opacity: 0; transform: translate(220px, 172px); }
  40% { opacity: 1; transform: translate(220px, 172px); }
  55%, 100% { opacity: 1; transform: translate(34px, 110px); }
}
@keyframes heroSmP2Pick {
  0%, 55% {
    stroke: #e5e7eb;
    stroke-width: 1.2;
  }
  70%, 100% {
    stroke: #2563EB;
    stroke-width: 2;
  }
}
@keyframes heroSmP2MetaChange {
  0%, 55% { fill: #a1a1aa; }
  70%, 100% { fill: #2563EB; font-weight: 700; }
}
@keyframes heroSmPostDim {
  0%, 55% { opacity: 1; }
  70%, 100% { opacity: 0.45; }
}
.phone-scene-role[data-scene="social"] .hero-sm-cursor { opacity: 0; }
.phone-scene-role[data-scene="social"].is-active .hero-sm-cursor {
  animation: heroSmCursorMove 3s var(--ease-out) 0.4s forwards;
}
.phone-scene-role[data-scene="social"].is-active .hero-sm-p2-bg {
  animation: heroSmP2Pick 3.4s var(--ease-out) 0.4s forwards;
}
.phone-scene-role[data-scene="social"].is-active .hero-sm-p2-meta {
  animation: heroSmP2MetaChange 3.4s var(--ease-out) 0.4s forwards;
}
.phone-scene-role[data-scene="social"].is-active .hero-sm-p1,
.phone-scene-role[data-scene="social"].is-active .hero-sm-p3 {
  animation: heroSmPostDim 3.4s var(--ease-out) 0.4s forwards;
}

/* ============ SCENE — EXECUTIVE ASSISTANT ============ */
@keyframes heroEaRowIn {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes heroEaLockIn {
  0%, 75% { opacity: 0; transform: translate(140px, 200px) translateY(-12px) scale(0.7); }
  90%, 100% { opacity: 1; transform: translate(140px, 200px) translateY(0) scale(1); }
}
.phone-scene-role[data-scene="exec"] .hero-ea-row { opacity: 0; }
.phone-scene-role[data-scene="exec"] .hero-ea-lock { opacity: 0; }
.phone-scene-role[data-scene="exec"].is-active .hero-ea-r1 {
  animation: heroEaRowIn 0.5s var(--ease-out) 0.2s forwards;
}
.phone-scene-role[data-scene="exec"].is-active .hero-ea-r2 {
  animation: heroEaRowIn 0.5s var(--ease-out) 0.4s forwards;
}
.phone-scene-role[data-scene="exec"].is-active .hero-ea-r3 {
  animation: heroEaRowIn 0.5s var(--ease-out) 0.6s forwards;
}
.phone-scene-role[data-scene="exec"].is-active .hero-ea-r4 {
  animation: heroEaRowIn 0.5s var(--ease-out) 0.8s forwards;
}
.phone-scene-role[data-scene="exec"].is-active .hero-ea-lock {
  animation: heroEaLockIn 2.5s var(--ease-out) 0.9s forwards;
}

/* ============ SCENE — RECEPTIONIST ============ */
@keyframes heroRcPhoneRing {
  0%, 100% { transform: translate(58px, 60px) rotate(0deg); }
  8%, 24% { transform: translate(58px, 60px) rotate(-8deg); }
  16%, 32% { transform: translate(58px, 60px) rotate(8deg); }
  40%, 100% { transform: translate(58px, 60px) rotate(0deg); }
}
@keyframes heroRcLineIn {
  0% { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes heroRcApprovalIn {
  0%, 75% { opacity: 0; transform: translate(230px, 150px) scale(0.4); }
  90%, 100% { opacity: 1; transform: translate(230px, 150px) scale(1); }
}
.phone-scene-role[data-scene="reception"] .hero-rc-line { opacity: 0; }
.phone-scene-role[data-scene="reception"] .hero-rc-approval { opacity: 0; }
.phone-scene-role[data-scene="reception"].is-active .hero-rc-phone {
  animation: heroRcPhoneRing 2.5s var(--ease-out) 0.2s forwards;
}
.phone-scene-role[data-scene="reception"].is-active .hero-rc-l1 {
  animation: heroRcLineIn 0.4s var(--ease-out) 0.5s forwards;
}
.phone-scene-role[data-scene="reception"].is-active .hero-rc-l2 {
  animation: heroRcLineIn 0.4s var(--ease-out) 0.7s forwards;
}
.phone-scene-role[data-scene="reception"].is-active .hero-rc-l3 {
  animation: heroRcLineIn 0.4s var(--ease-out) 0.9s forwards;
}
.phone-scene-role[data-scene="reception"].is-active .hero-rc-l4 {
  animation: heroRcLineIn 0.4s var(--ease-out) 1.1s forwards;
}
.phone-scene-role[data-scene="reception"].is-active .hero-rc-approval {
  animation: heroRcApprovalIn 2.5s var(--ease-out) 1.3s forwards;
}

/* ============ ROLE TILES — orbit on desktop, row on mobile ============ */
.hero-role-tiles {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  z-index: 3;
}
.role-tile {
  width: 76px;
  padding: 10px 8px 9px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
  font-family: inherit;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.3s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
  transition-delay: calc(var(--tile-i) * 0.12s);
}
.role-tile:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 20px rgba(37,99,235,0.12);
}
.role-tile:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.hero-role-tiles.is-visible .role-tile {
  opacity: 1;
  transform: translateY(0);
}
.rt-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.role-tile.is-spotlight {
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(37,99,235,0.18);
  transform: translateY(-3px);
}
.role-tile.is-spotlight .rt-name { color: var(--blue); }

@media (min-width: 1100px) {
  .hero-role-tiles {
    position: absolute;
    inset: 0;
    margin-top: 0;
    pointer-events: none;
    display: block;
  }
  .role-tile {
    position: absolute;
    width: 92px;
    pointer-events: auto;
  }
  /* Left column (4 tiles): Chat, Tech, Sales, Marketing */
  .role-tile[data-tile="0"] { left: 4%;   top: 4%; }
  .role-tile[data-tile="1"] { left: 0%;   top: 26%; }
  .role-tile[data-tile="2"] { left: 0%;   top: 50%; }
  .role-tile[data-tile="3"] { left: 4%;   top: 74%; }
  /* Right column (4 tiles): Social, Exec, HR, Reception */
  .role-tile[data-tile="4"] { right: 4%;  top: 4%; }
  .role-tile[data-tile="5"] { right: 0%;  top: 26%; }
  .role-tile[data-tile="6"] { right: 0%;  top: 50%; }
  .role-tile[data-tile="7"] { right: 4%;  top: 74%; }
  /* Subtle rotations for visual interest */
  .role-tile[data-tile="0"] { transform: translateY(8px) rotate(-2deg); }
  .role-tile[data-tile="1"] { transform: translateY(8px) rotate(-3deg); }
  .role-tile[data-tile="2"] { transform: translateY(8px) rotate(-1deg); }
  .role-tile[data-tile="3"] { transform: translateY(8px) rotate(-4deg); }
  .role-tile[data-tile="4"] { transform: translateY(8px) rotate(2deg); }
  .role-tile[data-tile="5"] { transform: translateY(8px) rotate(3deg); }
  .role-tile[data-tile="6"] { transform: translateY(8px) rotate(1deg); }
  .role-tile[data-tile="7"] { transform: translateY(8px) rotate(4deg); }
  .hero-role-tiles.is-visible .role-tile[data-tile="0"] { transform: translateY(0) rotate(-2deg); }
  .hero-role-tiles.is-visible .role-tile[data-tile="1"] { transform: translateY(0) rotate(-3deg); }
  .hero-role-tiles.is-visible .role-tile[data-tile="2"] { transform: translateY(0) rotate(-1deg); }
  .hero-role-tiles.is-visible .role-tile[data-tile="3"] { transform: translateY(0) rotate(-4deg); }
  .hero-role-tiles.is-visible .role-tile[data-tile="4"] { transform: translateY(0) rotate(2deg); }
  .hero-role-tiles.is-visible .role-tile[data-tile="5"] { transform: translateY(0) rotate(3deg); }
  .hero-role-tiles.is-visible .role-tile[data-tile="6"] { transform: translateY(0) rotate(1deg); }
  .hero-role-tiles.is-visible .role-tile[data-tile="7"] { transform: translateY(0) rotate(4deg); }
  .role-tile.is-spotlight[data-tile="0"] { transform: translateY(-3px) rotate(-2deg); }
  .role-tile.is-spotlight[data-tile="1"] { transform: translateY(-3px) rotate(-3deg); }
  .role-tile.is-spotlight[data-tile="2"] { transform: translateY(-3px) rotate(-1deg); }
  .role-tile.is-spotlight[data-tile="3"] { transform: translateY(-3px) rotate(-4deg); }
  .role-tile.is-spotlight[data-tile="4"] { transform: translateY(-3px) rotate(2deg); }
  .role-tile.is-spotlight[data-tile="5"] { transform: translateY(-3px) rotate(3deg); }
  .role-tile.is-spotlight[data-tile="6"] { transform: translateY(-3px) rotate(1deg); }
  .role-tile.is-spotlight[data-tile="7"] { transform: translateY(-3px) rotate(4deg); }
}

@media (max-width: 640px) {
  .hero-role-tiles { gap: 6px; margin-top: 20px; }
  .role-tile { width: 64px; padding: 8px 4px 7px; border-radius: 10px; }
  .rt-name { font-size: 9.5px; }
}

/* ============ SKIP BUTTON ============ */
.hero-skip {
  margin-top: 24px;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), color 0.2s;
  pointer-events: none;
}
.hero-skip svg { width: 12px; height: 12px; }
.hero-skip.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero-skip:hover { color: var(--blue); }
.hero-skip:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

.hero-phone-glow {
  position: absolute;
  inset: -80px -40px;
  background: radial-gradient(ellipse at 50% 60%, rgba(37,99,235,0.16), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.phone {
  width: 100%;
  aspect-ratio: 9 / 18;
  max-height: 720px;
  background: #0d0d12;
  border-radius: 44px;
  padding: 14px;
  box-shadow:
    0 30px 80px -20px rgba(13, 13, 18, 0.30),
    0 12px 32px -8px rgba(37, 99, 235, 0.12),
    inset 0 0 0 2px rgba(255,255,255,0.04);
  position: relative;
}
.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--card);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* iPhone notch */
.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 24px;
  background: #0d0d12;
  border-radius: 14px;
  z-index: 5;
}

/* Status bar */
.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.phone-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Chat header */
.phone-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.phone-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.phone-chat-meta {
  flex: 1;
  min-width: 0;
}
.phone-chat-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.phone-chat-status {
  font-size: 10px;
  color: var(--blue);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.phone-chat-status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Chat bubbles area */
.phone-chat-body {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  position: relative;
}

.phone-bubble {
  max-width: 82%;
  padding: 9px 13px;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(8px);
  animation-fill-mode: forwards;
}
.phone-bubble.from-you {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.phone-bubble.from-paulean {
  background: var(--blue);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.phone-bubble strong { font-weight: 800; }

/* Chat scene elements stay hidden until the chat scene is active, then animate in.
   This makes the chat story replay every time the cycle returns to chat. */
.phone-scene-chat .phone-bubble { opacity: 0; }
.phone-scene-chat .phone-time { opacity: 0; }
.phone-scene-chat .chat-email-banner { opacity: 0; transform: translateY(-6px); }
.phone-scene-chat .chat-call-chip { opacity: 0; transform: scale(0.95); }

.phone-scene-chat.is-active .chat-email-banner {
  animation: bubbleIn 0.5s var(--ease-out) 0.4s forwards;
}
.phone-scene-chat.is-active .phone-bubble.b1 { animation: bubbleIn 0.5s var(--ease-out) 1.8s forwards; }
.phone-scene-chat.is-active .phone-bubble.b2 { animation: bubbleIn 0.5s var(--ease-out) 2.8s forwards; }
.phone-scene-chat.is-active .chat-call-chip { animation: chipIn 0.6s var(--ease-out) 4.0s forwards; }
.phone-scene-chat.is-active .phone-bubble.b3 { animation: bubbleIn 0.5s var(--ease-out) 5.8s forwards; }

.phone-scene-chat.is-active .phone-time.t1 { animation: bubbleIn 0.5s var(--ease-out) 2.0s forwards; }
.phone-scene-chat.is-active .phone-time.t2 { animation: bubbleIn 0.5s var(--ease-out) 3.0s forwards; }
.phone-scene-chat.is-active .phone-time.t3 { animation: bubbleIn 0.5s var(--ease-out) 6.0s forwards; }

@keyframes bubbleIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chipIn {
  to { opacity: 1; transform: scale(1); }
}

.phone-time {
  font-size: 9px;
  color: var(--ink-4);
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.phone-time.you { align-self: flex-start; padding-left: 4px; }
.phone-time.paulean { align-self: flex-end; padding-right: 4px; }

/* ============ NEW CHAT ELEMENTS ============ */

/* Incoming email banner at top of chat */
.chat-email-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(37,99,235,0.08), rgba(37,99,235,0.02));
  border: 1px solid rgba(37,99,235,0.22);
  border-radius: 12px;
}
.ceb-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ceb-icon svg { width: 16px; height: 16px; }
.ceb-body { flex: 1; min-width: 0; text-align: left; }
.ceb-from {
  font-size: 9px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ceb-subject {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Call connected chip — appears mid-thread to acknowledge the call happened */
.chat-call-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: center;
  margin: 6px 0;
  padding: 8px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: 100px;
  max-width: 88%;
}
.ccc-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ccc-icon svg { width: 12px; height: 12px; }
.ccc-body { display: flex; flex-direction: column; }
.ccc-title {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.ccc-meta {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}

/* Three channels banner at the bottom of chat */
.chat-channels {
  margin: auto 14px 18px;
  padding: 12px 14px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.cc-line {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cc-icons {
  display: flex;
  gap: 16px;
  align-items: center;
}
.cc-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-4);
  transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.cc-channel svg {
  width: 18px; height: 18px;
  transition: transform 0.4s var(--ease-out);
}
.cc-channel span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Sequenced light-up: each channel pops blue in turn while chat scene is active */
.phone-scene-chat.is-active .cc-channel { color: var(--ink-4); }
.phone-scene-chat.is-active .cc-channel[data-ch="call"] {
  animation: channelPop 2.5s var(--ease-out) 0.6s forwards;
}
.phone-scene-chat.is-active .cc-channel[data-ch="email"] {
  animation: channelPop 2.5s var(--ease-out) 1.1s forwards;
}
.phone-scene-chat.is-active .cc-channel[data-ch="text"] {
  animation: channelPop 2.5s var(--ease-out) 1.6s forwards;
}
@keyframes channelPop {
  0% { color: var(--ink-4); transform: scale(1); }
  20% { color: var(--blue); transform: scale(1.12); }
  100% { color: var(--blue); transform: scale(1); }
}

/* Customer counter card that appears at the bottom */
.phone-counter {
  margin: 14px 14px 18px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(37,99,235,0.08), rgba(37,99,235,0.03));
  border: 1px solid rgba(37,99,235,0.22);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(8px);
  animation: bubbleIn 0.6s var(--ease-out) 4.6s forwards;
}
.phone-counter-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.phone-counter-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.phone-counter-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}
.phone-counter-delta {
  font-size: 11px;
  font-weight: 800;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Typing indicator that shows briefly between bubbles */
.phone-typing {
  align-self: flex-end;
  padding: 9px 13px;
  background: rgba(37,99,235,0.1);
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  display: flex;
  gap: 3px;
  opacity: 0;
  animation: typingShow 0.8s ease 3.0s forwards, typingHide 0.4s ease 3.6s forwards;
}
.phone-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.5;
  animation: typingDot 1.2s ease-in-out infinite;
}
.phone-typing span:nth-child(2) { animation-delay: 0.2s; }
.phone-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-3px); opacity: 1; }
}
@keyframes typingShow { to { opacity: 1; } }
@keyframes typingHide { to { opacity: 0; height: 0; padding: 0; margin: 0; } }

/* Mobile sizing for the phone */
@media (max-width: 520px) {
  .hero-phone-stage { max-width: 320px; margin-top: 48px; }
  .phone { border-radius: 36px; padding: 12px; }
  .phone-screen { border-radius: 26px; }
  .phone-notch { width: 76px; height: 20px; top: 10px; }
}

/* ============================================================
   PROOF CARD MOCKUP TILES
   ============================================================ */
.proof-mockup {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: var(--paper-warm);
  border: 1px solid var(--line-soft);
  margin-bottom: 28px;
  overflow: hidden;
  position: relative;
}
.proof-mockup svg { display: block; width: 100%; height: 100%; }

/* ============================================================
   ROLE CARD ANIMATED MOCKUPS
   ============================================================ */
.role-card { padding: 28px 24px; }
.role-mockup {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: var(--paper-warm);
  border: 1px solid var(--line-soft);
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}
.role-mockup svg { display: block; width: 100%; height: 100%; }

/* Role-specific animation triggers (start when card becomes visible) */
.role-card.visible .role-mockup { --play: 1; }

/* Technical Expert — document drawing itself */
.mck-doc-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.role-card.visible .mck-doc-line:nth-child(1) { stroke-dashoffset: 0; transition-delay: 0.2s; }
.role-card.visible .mck-doc-line:nth-child(2) { stroke-dashoffset: 0; transition-delay: 0.4s; }
.role-card.visible .mck-doc-line:nth-child(3) { stroke-dashoffset: 0; transition-delay: 0.6s; }
.role-card.visible .mck-doc-line:nth-child(4) { stroke-dashoffset: 0; transition-delay: 0.8s; }
.role-card.visible .mck-doc-line:nth-child(5) { stroke-dashoffset: 0; transition-delay: 1.0s; }
.role-card.visible .mck-doc-line:nth-child(6) { stroke-dashoffset: 0; transition-delay: 1.2s; }

/* Sales — Tinder card stack */
.mck-card-stack {
  opacity: 0;
  transform: translateX(0) rotate(0);
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
}
.role-card.visible .mck-card-stack { opacity: 1; }
.role-card.visible .mck-card-stack.swipe-right {
  animation: swipeRight 3s ease-in-out infinite;
}
@keyframes swipeRight {
  0%, 70% { transform: translateX(0) rotate(0); }
  80% { transform: translateX(40px) rotate(8deg); opacity: 0.4; }
  100% { transform: translateX(60px) rotate(12deg); opacity: 0; }
}

/* Marketing — newsletter composing + subscriber count */
.mck-news-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.role-card.visible .mck-news-line:nth-child(1) { transform: scaleX(1); transition-delay: 0.3s; }
.role-card.visible .mck-news-line:nth-child(2) { transform: scaleX(1); transition-delay: 0.5s; }
.role-card.visible .mck-news-line:nth-child(3) { transform: scaleX(1); transition-delay: 0.7s; }
.mck-sub-counter { font-feature-settings: 'tnum'; }

/* Executive Assistant — file tree expanding */
.mck-tree-row {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.role-card.visible .mck-tree-row:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }
.role-card.visible .mck-tree-row:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.35s; }
.role-card.visible .mck-tree-row:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.5s; }
.role-card.visible .mck-tree-row:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.65s; }
.role-card.visible .mck-tree-row:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.8s; }
.role-card.visible .mck-tree-row:nth-child(6) { opacity: 1; transform: translateX(0); transition-delay: 0.95s; }

/* Office and HR — job posting up + candidates flowing in */
.mck-candidate {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.role-card.visible .mck-candidate:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.role-card.visible .mck-candidate:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.role-card.visible .mck-candidate:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }

/* Receptionist — phone ring + iPad welcome */
.mck-ring {
  transform-origin: center;
  animation: ringShake 1.6s ease-in-out infinite;
  animation-play-state: paused;
}
.role-card.visible .mck-ring { animation-play-state: running; }
@keyframes ringShake {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50% { transform: rotate(-8deg); }
  20%, 40%, 60% { transform: rotate(8deg); }
  70%, 90% { transform: rotate(0); }
}
.mck-welcome-text {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 1s;
}
.role-card.visible .mck-welcome-text { opacity: 1; }

/* Social Media — engagement counters ticking up */
.mck-social-bar {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.6s var(--ease-out);
}
.role-card.visible .mck-social-bar:nth-of-type(1) { transform: scaleY(1); transition-delay: 0.3s; }
.role-card.visible .mck-social-bar:nth-of-type(2) { transform: scaleY(1); transition-delay: 0.45s; }
.role-card.visible .mck-social-bar:nth-of-type(3) { transform: scaleY(1); transition-delay: 0.6s; }
.role-card.visible .mck-social-bar:nth-of-type(4) { transform: scaleY(1); transition-delay: 0.75s; }
.role-card.visible .mck-social-bar:nth-of-type(5) { transform: scaleY(1); transition-delay: 0.9s; }
.role-card.visible .mck-social-bar:nth-of-type(6) { transform: scaleY(1); transition-delay: 1.05s; }
.role-card.visible .mck-social-bar:nth-of-type(7) { transform: scaleY(1); transition-delay: 1.2s; }

/* Property Manager — booking calendar tiles */
.mck-prop-tile {
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.role-card.visible .mck-prop-tile:nth-child(1) { opacity: 1; transform: scale(1); transition-delay: 0.2s; }
.role-card.visible .mck-prop-tile:nth-child(2) { opacity: 1; transform: scale(1); transition-delay: 0.32s; }
.role-card.visible .mck-prop-tile:nth-child(3) { opacity: 1; transform: scale(1); transition-delay: 0.44s; }
.role-card.visible .mck-prop-tile:nth-child(4) { opacity: 1; transform: scale(1); transition-delay: 0.56s; }
.role-card.visible .mck-prop-tile:nth-child(5) { opacity: 1; transform: scale(1); transition-delay: 0.68s; }
.role-card.visible .mck-prop-tile:nth-child(6) { opacity: 1; transform: scale(1); transition-delay: 0.80s; }

/* Finance — ledger rows scrolling in with a number ticking up */
.mck-ledger-row {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.role-card.visible .mck-ledger-row:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }
.role-card.visible .mck-ledger-row:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.4s; }
.role-card.visible .mck-ledger-row:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.6s; }
.role-card.visible .mck-ledger-row:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.8s; }

/* Custom Operations — workflow steps cascading in from the left */
.mck-step-1, .mck-step-2, .mck-step-3, .mck-step-4 {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.role-card.visible .mck-step-1 { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }
.role-card.visible .mck-step-2 { opacity: 1; transform: translateX(0); transition-delay: 0.35s; }
.role-card.visible .mck-step-3 { opacity: 1; transform: translateX(0); transition-delay: 0.5s; }
.role-card.visible .mck-step-4 { opacity: 1; transform: translateX(0); transition-delay: 0.65s; }

/* Legal — document stack with stamp animating on */
.mck-legal-doc {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.role-card.visible .mck-legal-doc:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.role-card.visible .mck-legal-doc:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.role-card.visible .mck-legal-doc:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.mck-legal-stamp {
  opacity: 0;
  transform: rotate(-15deg) scale(0.6);
  transform-origin: center;
  transition: opacity 0.5s var(--ease-out), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.role-card.visible .mck-legal-stamp { opacity: 1; transform: rotate(-12deg) scale(1); transition-delay: 0.9s; }

/* ============================================================
   COMPOUNDING — WEEK 1 vs WEEK 8 CHAT THREADS + GROWTH CHART
   ============================================================ */
.compound-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 920px;
  margin: 56px auto 56px;
  position: relative;
}
@media (max-width: 700px) {
  .compound-comparison { grid-template-columns: 1fr; gap: 16px; }
}

.thread-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 18px 16px;
  text-align: left;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.thread-card.visible { opacity: 1; transform: translateY(0); }
.thread-card.week-1.visible { transition-delay: 0.1s; }
.thread-card.week-8.visible { transition-delay: 0.3s; }

.thread-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.thread-week {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.thread-meta {
  font-size: 10px;
  color: var(--ink-4);
  font-weight: 500;
}

.thread-bubbles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bubble {
  max-width: 88%;
  padding: 9px 13px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  border-radius: 14px;
}
.bubble.from-you {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.bubble.from-paulean {
  background: var(--ink);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.bubble .bubble-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 3px;
  opacity: 0.55;
}
.bubble.from-paulean .bubble-label { color: rgba(255,255,255,0.65); }

.thread-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  box-shadow: 0 8px 24px rgba(13, 13, 18, 0.08);
}
.thread-arrow svg { width: 18px; height: 18px; color: var(--blue); }
@media (max-width: 700px) {
  .thread-arrow {
    top: auto;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}

/* Growth chart that anchors compounding section */
.compound-growth {
  max-width: 920px;
  margin: 0 auto 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 28px 20px;
}
.compound-growth-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.compound-growth-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.compound-growth-meta {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}
.compound-growth-svg {
  width: 100%;
  height: 110px;
  display: block;
}
.compound-growth-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 2s var(--ease-out);
}
.compound-growth.visible .compound-growth-line { stroke-dashoffset: 0; }
.compound-growth-fill {
  opacity: 0;
  transition: opacity 1s var(--ease-out) 1.2s;
}
.compound-growth.visible .compound-growth-fill { opacity: 1; }
.compound-growth-dot {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.compound-growth.visible .compound-growth-dot:nth-child(1) { opacity: 1; transition-delay: 0.4s; }
.compound-growth.visible .compound-growth-dot:nth-child(2) { opacity: 1; transition-delay: 0.8s; }
.compound-growth.visible .compound-growth-dot:nth-child(3) { opacity: 1; transition-delay: 1.2s; }
.compound-growth.visible .compound-growth-dot:nth-child(4) { opacity: 1; transition-delay: 1.6s; }
.compound-growth.visible .compound-growth-dot:nth-child(5) { opacity: 1; transition-delay: 2.0s; }

/* ============================================================
   PARTNER GROWTH ACCENT
   ============================================================ */
.partners-growth-accent {
  margin: 0 auto 32px;
  max-width: 360px;
  height: 64px;
  position: relative;
}
.partners-growth-accent svg { width: 100%; height: 100%; display: block; }
.partners-growth-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
.partners-growth-accent.visible .partners-growth-line { stroke-dashoffset: 0; }

/* ============================================================
   RESPONSIVE CLEANUP — comprehensive mobile and tablet review
   ============================================================ */

/* TABLET: 900px and below */
@media (max-width: 900px) {
  section { padding: 96px 24px; }
  .section-headline { font-size: clamp(28px, 5vw, 48px); }

  /* Hero mockup phone scales smaller on tablet too */
  .hero-phone-stage { max-width: 340px; margin-top: 56px; }

  /* Made-for cards: photo height adjusts when single column */
  .made-for-grid { grid-template-columns: 1fr; }
  .audience-photo { aspect-ratio: 16 / 9; }

  /* Roles in 2-column at this breakpoint */
  .roles-grid { gap: 14px; }
  .role-card { padding: 24px 22px; }
  .role-mockup { aspect-ratio: 16 / 9; }
}

/* MOBILE: 640px and below */
@media (max-width: 640px) {
  section { padding: 80px 20px; }

  /* Hero tightens */
  .hero { padding: 120px 20px 80px; }
  .hero-headline { font-size: clamp(34px, 9vw, 52px); gap: 4px; }
  .hero-sub { font-size: 16px; max-width: 26ch; }
  .hero-cta-row { gap: 16px; flex-direction: column; width: 100%; align-items: center; }
  .hero-cta-row .btn-primary { width: 100%; max-width: 320px; justify-content: center; }

  /* Phone mockup smaller on mobile */
  .hero-phone-stage { max-width: 280px; margin-top: 40px; }
  .phone-status { padding: 12px 24px 6px; font-size: 11px; }
  .phone-chat-header { padding: 12px 14px; }
  .phone-avatar { width: 30px; height: 30px; font-size: 12px; }
  .phone-chat-name { font-size: 12px; }
  .phone-bubble { font-size: 11.5px; padding: 8px 11px; max-width: 86%; }
  .phone-counter { margin: 10px 12px 14px; padding: 10px 12px; }
  .phone-counter-num { font-size: 18px; }

  /* Section eyebrow and headline tightens */
  .section-headline { font-size: clamp(26px, 7vw, 38px); }
  .section-sub { font-size: 15px; margin-bottom: 40px; }

  /* Proof cards full-width single column */
  .proof-card { padding: 28px 24px 24px; }
  .proof-headline { font-size: clamp(22px, 5.5vw, 28px); }
  .proof-mockup { margin-bottom: 22px; aspect-ratio: 16 / 10; }

  /* Made-for cards, photo wider aspect, content tighter */
  .audience-photo { aspect-ratio: 5 / 3; }
  .audience-content { padding: 24px 22px 26px; }
  .audience-name { font-size: 22px; }
  .audience-text { font-size: 14px; }

  /* Roles: 1 column on mobile */
  .roles-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .role-card { padding: 22px 22px; }
  .role-mockup { aspect-ratio: 16 / 9; max-height: 180px; }
  .role-name { font-size: 20px; }
  .role-task { font-size: 13px; }

  /* Compounding: stack threads */
  .compound-comparison { grid-template-columns: 1fr; gap: 16px; margin: 40px auto 40px; }
  .thread-arrow {
    position: relative;
    top: auto; left: auto;
    transform: rotate(90deg);
    margin: -8px auto;
    width: 40px; height: 40px;
  }
  .thread-card { padding: 18px 16px 14px; }
  .bubble { font-size: 12px; }
  .compound-headline { font-size: clamp(28px, 7.5vw, 44px); }
  .compound-quote { font-size: 16px; padding: 18px 0; margin-bottom: 36px; }
  .compound-growth { padding: 22px 22px 16px; }
  .compound-growth-svg { height: 90px; }

  /* Stat row: full-width stack already handled, just tighten spacing */
  .stat-item { padding: 18px 12px; }
  .stat-num { font-size: clamp(30px, 8vw, 42px); }
  .stat-stars { margin-left: 4px; }
  .stat-star { width: 18px; height: 18px; }

  /* Reviews marquee: smaller cards */
  .review-card { width: 280px; padding: 24px 20px; }
  .review-body { font-size: 14px; }
  .reviews-marquee { padding: 4px 0 56px; }
  .reviews-cta { padding-bottom: 56px; }

  /* Pricing tighter */
  .pricing-grid { gap: 10px; }
  .tier { padding: 24px 18px 20px; }
  .tier-badge { font-size: 9px; letter-spacing: 0.8px; padding: 4px 10px; }
  .tier-price { font-size: 24px; }

  /* Partners */
  .partners-offer { padding: 40px 24px; }
  .partners-percent { font-size: clamp(72px, 24vw, 120px); }
  .partners-offer-line { font-size: 16px; }
  .partners-math { padding-top: 24px; margin-top: 28px; }
  .partners-math-num { font-size: 26px; }
  .partners-growth-accent { max-width: 280px; height: 56px; margin-bottom: 24px; }

  /* Final CTA */
  .final { padding: 100px 20px 70px; }
  .final-mark { font-size: clamp(56px, 18vw, 96px); }
  .final-sub { font-size: 16px; margin-bottom: 32px; }
  .final-cta-row { flex-direction: column; gap: 14px; }
  .final-cta-row .btn-primary { width: 100%; max-width: 320px; justify-content: center; }
  .final-trust { font-size: 11px; gap: 10px; flex-wrap: wrap; }
  .final-trust .dot { display: none; }

  /* Footer */
  footer { padding: 48px 20px 32px; }
  .footer-grid { gap: 28px; margin-bottom: 40px; }
  .footer-bottom { font-size: 12px; gap: 12px; }
}

/* SMALL MOBILE: 380px and below */
@media (max-width: 380px) {
  .hero-headline { font-size: 30px; }
  .hero-sub { font-size: 15px; }
  .section-headline { font-size: 24px; }
  .hero-phone-stage { max-width: 240px; }
  .review-card { width: 240px; }
}

/* Mobile-only line break helper.
   Hidden on desktop; visible below the carousel breakpoint. */
.mobile-only-br { display: none; }
@media (max-width: 880px) {
  .mobile-only-br { display: inline; }
}

/* ============ MOBILE CAROUSELS ============
   Used by Why Paulean (comparison), How It Works (roles), Proof (case studies),
   and Pricing on mobile. The pattern: a horizontal scroll container that hides
   the scrollbar, snaps cards to viewport edges, and includes a position
   indicator below. Cards size themselves to a comfortable mobile width and
   trail off the right edge to signal "more to swipe to".

   Breakpoint at 880px: the desktop comparison's 6-column layout starts to
   cramp before then. Below 881px, we go full mobile carousel everywhere so
   tablets get the same swipe-friendly experience as phones.
============================================================================ */
@media (max-width: 880px) {
  .m-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE / Edge legacy */
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 24px;
    gap: 14px;
    scroll-padding-left: 20px;
  }
  .m-scroll::-webkit-scrollbar { display: none; }
  .m-scroll > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 80vw;                       /* ~80% viewport so next card peeks */
    max-width: 320px;
    box-sizing: border-box;
  }

  /* Carousel position indicator (dots) */
  .m-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0 20px;
  }
  .m-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(13, 13, 18, 0.18);
    transition: background 0.2s, transform 0.2s;
  }
  .m-dot.is-active {
    background: var(--blue);
    transform: scale(1.4);
  }

  /* Carousel position counter (e.g., "3 / 10") */
  .m-counter {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 8px 0 0;
  }
  .m-counter .m-counter-now { color: var(--ink); }

  /* ============ Why Paulean (comparison) — horizontal scroll on mobile ============
     The existing @media (max-width: 880px) block above turns this section into
     a vertical stacked-bar layout. We override that here so on phones (<=720px)
     we restore the desktop column metaphor inside a horizontal scroll instead.
     The scroll position is anchored on page load to put Paulean in view first
     (see the corresponding JS init). */
  .comparison-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 12px;
    margin: 24px -20px 0;             /* extend beyond container so cards reach edges */
    gap: 12px;
    width: auto;
    max-width: none;
  }
  .comparison-grid::-webkit-scrollbar { display: none; }

  .comp-tier {
    scroll-snap-align: center;
    flex: 0 0 auto;
    width: 58vw;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px 18px;
    text-align: center;
    grid-template-columns: none;
    grid-template-areas: none;
    background: transparent;
    border-radius: 16px;
  }
  .comp-tier-paulean {
    background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02));
    border: 1px solid rgba(37,99,235,0.22);
    transform: none;
    box-shadow: 0 16px 40px rgba(37,99,235,0.08);
  }
  .ct-stage {
    grid-area: auto;
    position: relative;
    height: 160px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0 0 12px;
  }
  /* Reset the bar/icon/mark back to vertical desktop behavior */
  .ct-bar {
    width: 32px;
    height: var(--h, 30%);
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    border-radius: 6px 6px 0 0;
  }
  /* Hide the alternate dot-style icon used elsewhere */
  .ct-fg-icon {
    display: none;
  }
  /* Restore the desktop error-mark behavior: vertical maroon line anchored at
     the bottom with a paper-stack icon at the top, height driven by the --fg
     custom property on .ct-stage. This is the same visual language the user
     already understands from desktop. */
  .ct-fg-mark {
    display: block;
    position: absolute;
    left: 50%;
    top: auto;
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: 3px;
    height: var(--fg, 50%);
    background: #d97706;
    border-radius: 2px;
    z-index: 3;
    pointer-events: none;
    min-width: 0;
    overflow: visible;
  }
  /* Top cap — paper-stack icon. Restore the desktop pseudo styling that the
     older stacked-bar mobile block overrode. */
  .ct-fg-mark::before {
    content: '';
    position: absolute;
    top: -14px;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 22px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18' viewBox='0 0 22 18'%3E%3Crect x='5' y='2' width='14' height='12' rx='1' fill='%23fef3c7' stroke='%23d97706' stroke-width='1.2'/%3E%3Cline x1='8' y1='5' x2='16' y2='5' stroke='%23d97706' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='8' y1='8' x2='14' y2='8' stroke='%23d97706' stroke-width='1' stroke-linecap='round'/%3E%3Crect x='3' y='5' width='14' height='12' rx='1' fill='%23fde68a' stroke='%23d97706' stroke-width='1.2'/%3E%3Cline x1='6' y1='8' x2='14' y2='8' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='6' y1='11' x2='12' y2='11' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='6' y1='14' x2='13' y2='14' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    border-radius: 0;
    z-index: 4;
  }
  /* Bottom cap — small horizontal stub */
  .ct-fg-mark::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    background: #d97706;
    border-radius: 2px;
  }
  /* Paulean tier — slightly darker maroon for emphasis */
  .comp-tier-paulean .ct-fg-mark {
    background: #b45309;
    box-shadow: 0 0 12px rgba(217,119,6,0.5);
  }
  .comp-tier-paulean .ct-fg-mark::after {
    background: #b45309;
  }
  /* The old mobile block sets .comp-tier-paulean .ct-fg-mark::before {background: #b45309}
     using shorthand, which clobbers the background-image. Restore it explicitly here. */
  .comp-tier-paulean .ct-fg-mark::before {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18' viewBox='0 0 22 18'%3E%3Crect x='5' y='2' width='14' height='12' rx='1' fill='%23fef3c7' stroke='%23d97706' stroke-width='1.2'/%3E%3Cline x1='8' y1='5' x2='16' y2='5' stroke='%23d97706' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='8' y1='8' x2='14' y2='8' stroke='%23d97706' stroke-width='1' stroke-linecap='round'/%3E%3Crect x='3' y='5' width='14' height='12' rx='1' fill='%23fde68a' stroke='%23d97706' stroke-width='1.2'/%3E%3Cline x1='6' y1='8' x2='14' y2='8' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='6' y1='11' x2='12' y2='11' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='6' y1='14' x2='13' y2='14' stroke='%23b45309' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .ct-name {
    grid-area: auto;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    margin: 6px 0 4px;
    display: block;
    min-height: 0;
    justify-content: center;
  }
  .ct-cost {
    grid-area: auto;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 6px;
    justify-self: center;
    align-self: auto;
  }
  .ct-tag {
    grid-area: auto;
    font-size: 11px;
    color: var(--ink-3);
    text-align: center;
    line-height: 1.35;
  }

  /* ============ How It Works (roles) — horizontal scroll on mobile ============ */
  .roles-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 12px;
    margin: 24px -20px 0;
    gap: 14px;
    grid-template-columns: none;
    width: auto;
  }
  .roles-grid::-webkit-scrollbar { display: none; }
  .role-card {
    scroll-snap-align: center;
    flex: 0 0 auto;
    width: 82vw;
    max-width: 340px;
  }

  /* ============ Real Businesses (proof) — horizontal scroll on mobile ============ */
  .proof-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 12px;
    margin: 24px -20px 0;
    gap: 14px;
    grid-template-columns: none;
    width: auto;
  }
  .proof-grid::-webkit-scrollbar { display: none; }
  .proof-card {
    scroll-snap-align: center;
    flex: 0 0 auto;
    width: 82vw;
    max-width: 340px;
  }

  /* ============ Pricing — horizontal scroll on mobile ============ */
  .pricing-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 12px;
    margin: 24px -20px 0;
    gap: 12px;
    grid-template-columns: none;
    width: auto;
  }
  .pricing-grid::-webkit-scrollbar { display: none; }
  .tier {
    scroll-snap-align: center;
    flex: 0 0 auto;
    width: 72vw;
    max-width: 280px;
  }
  /* Make sure the featured Elite tier keeps its visual prominence in the scroll */
  .tier.featured {
    transform: none;
  }
}

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

/* ============ SOLUTIONS DROPDOWN ============ */
.nav-dropdown { position: relative; display: inline-block; }
.nav-solutions {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; font-family: inherit; cursor: pointer;
  color: var(--ink-2); font-size: 14px; font-weight: 500; padding: 0;
}
.nav-solutions:hover { color: var(--blue); }
.nav-solutions[aria-expanded="true"] { color: var(--blue); }
.nav-solutions-chev { width: 12px; height: 12px; transition: transform 0.15s; }
.nav-solutions[aria-expanded="true"] .nav-solutions-chev { transform: rotate(180deg); }
.nav-solutions-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: white; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.10);
  padding: 20px; width: min(820px, calc(100vw - 40px));
  border: 1px solid var(--line-soft); z-index: 100;
}
.nav-solutions-head {
  padding: 0 12px 12px; display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 8px;
}
.nav-solutions-head-title { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink); }
.nav-solutions-head-note { font-size: 12px; color: var(--ink-3); }
.nav-solutions-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
.nav-solutions-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: 10px; text-decoration: none; color: var(--ink);
  transition: background 0.15s; font-size: 14px; font-weight: 500;
}
.nav-solutions-item:hover { background: var(--paper-warm); }
.nav-solutions-item.coming { color: var(--ink-3); }
.nav-solutions-icon {
  width: 32px; height: 32px; background: var(--blue-tint); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue); flex-shrink: 0;
}
.nav-solutions-item.coming .nav-solutions-icon { background: rgba(0,0,0,0.04); color: var(--ink-4); }
.nav-solutions-icon svg { width: 16px; height: 16px; }
.nav-solutions-label { flex: 1; display: flex; align-items: center; gap: 8px; }
.nav-solutions-badge {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ink-4); background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px;
}
.nav-solutions-footer {
  margin-top: 8px; padding: 14px 16px; background: var(--blue); border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between;
  text-decoration: none; color: white; font-weight: 700; font-size: 14px;
}
.nav-solutions-footer:hover { background: var(--blue-dark); }
.nav-solutions-footer svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .nav-solutions-panel { position: fixed; top: 72px; left: 20px; right: 20px; transform: none; width: auto; }
  .nav-solutions-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-solutions-grid { grid-template-columns: 1fr; }
}

/* ============ COMPARISON TABLE ============ */
/* Used on /executive-assistant, /personal-assistant, /paulean-vs-athena and /paulean-vs-belay. */
.compare-table { padding: 80px 32px; background: var(--paper-warm); }
.compare-table table { max-width: 900px; margin: 0 auto; width: 100%; border-collapse: collapse; background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.compare-table th, .compare-table td { padding: 20px 24px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: 15px; vertical-align: top; }
.compare-table th { font-weight: 700; color: var(--ink); background: var(--paper-warm); }
.compare-table .col-paulean { background: rgba(37,99,235,0.04); color: var(--ink); font-weight: 600; }
.compare-table td:first-child { font-weight: 600; color: var(--ink-2); }
.compare-table .check { color: var(--blue); font-weight: 800; }
@media (max-width: 640px) {
  /* Match the site's 20px section padding on phones and tighten the cells so all three columns fit. */
  .compare-table { padding: 80px 20px; }
  .compare-table th, .compare-table td { padding: 12px 10px; font-size: 13px; }
}
.compare-footnote { max-width: 900px; margin: 24px auto 60px; padding: 0 32px; color: var(--ink-4); font-size: 13px; font-style: italic; }
.compare-footnote a { color: var(--ink-3); text-decoration: underline; }
.also-considering { max-width: 700px; margin: 60px auto; padding: 24px 32px; text-align: center; background: var(--paper-warm); border-radius: 16px; }
.also-considering p { color: var(--ink-2); font-size: 15px; margin: 0; }
.also-considering a { color: var(--blue); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--blue-border); }
.also-considering a:hover { border-bottom-color: var(--blue); }
/* Two-line comparison headline on the Athena and BELAY pages, the same pattern as
   the homepage hero: a bold statement line, then an italic blue supporting line. */
.spine-headline { max-width: 900px; }
.spine-headline .hl-line-1,
.spine-headline .hl-line-2 { display: block; }
.spine-headline .hl-line-1 { color: var(--ink); font-weight: 800; font-variation-settings: 'wght' 800; }
.spine-headline .hl-line-2 { font-style: italic; color: var(--blue); font-weight: 500; font-variation-settings: 'wght' 500; }