/* ABOUTME: Core marketing styles for public-facing pages
 * ABOUTME: Includes brand colors, typography, components, and responsive design
 */

/* ===================================== */
/* CSS VARIABLES                         */
/* ===================================== */
:root {
  /* Brand Colors */
  --color-primary: #005451;
  --color-primary-hover: #004440;
  --color-primary-dark: #002e48;
  --color-primary-light: #12a594;
  --color-accent: #1ac6af;
  
  /* Gradient Colors from Figma */
  --gradient-start: rgba(0, 84, 81, 0.8);
  --gradient-end: rgba(0, 46, 72, 0.8);
  --gradient-primary: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  
  /* Button Gradient */
  --gradient-button: linear-gradient(90deg, #00D0B5 0%, #00B5A0 100%);
  --button-shadow: 0px 0px 16px 0px rgba(13, 200, 178, 0.25);

  /* Neutral Colors */
  --color-black: #000000;
  --color-gray-900: #111827;
  --color-gray-800: #1f2937;
  --color-gray-700: #374151;
  --color-gray-600: #4b5563;
  --color-gray-500: #6b7280;
  --color-gray-400: #9ca3af;
  --color-gray-300: #d1d5db;
  --color-gray-200: #e5e7eb;
  --color-gray-120: #f4f4f4;
  --color-gray-100: #f3f4f6;
  --color-gray-50: #f9fafb;
  --color-white: #ffffff;

  /* Background Colors */
  --color-bg-light: #f1fbf9;
  --color-bg-accent: #e6faf7;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: 'Roboto Slab', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 4rem;
  --font-size-container-heading: 2.5rem;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ===================================== */
/* RESET & BASE STYLES                   */
/* ===================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-gray-900);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
}

h1 {
  font-size: var(--font-size-5xl);
}
h2 {
  font-size: var(--font-size-5xl);
}
h3 {
  font-size: var(--font-size-container-heading);
}
h4 {
  font-size: var(--font-size-2xl);
}
h5 {
  font-size: var(--font-size-xl);
}
h6 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--spacing-sm);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-hover);
}

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

/* ===================================== */
/* LAYOUT UTILITIES                      */
/* ===================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section {
  padding: var(--spacing-2xl) 0;
}

/* Max Width Utilities */
.max-w-250 {
  max-width: 250px;
}
.max-w-320 {
  max-width: 320px;
}
.max-w-600 {
  max-width: 600px;
}
.max-w-800 {
  max-width: 800px;
  margin: 0 auto;
}
.max-w-900 {
  max-width: 900px;
  margin: 0 auto;
}
.max-w-1100 {
  max-width: 1100px;
  margin: 0 auto;
}
.max-w-1200 {
  max-width: 1200px;
}

/* Width & Height */
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.w-80 {
  width: 80px;
}
.h-80 {
  height: 80px;
}
.h-400 {
  height: 400px;
}

/* ===================================== */
/* SPACING UTILITIES                     */
/* ===================================== */
/* Margin */
.m-0 {
  margin: 0;
}
.margin-0-auto {
  margin: 0 auto;
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}
.mb-sm {
  margin-bottom: var(--spacing-sm);
}
.mb-md {
  margin-bottom: var(--spacing-md);
}
.mb-lg {
  margin-bottom: var(--spacing-lg);
}
.mb-xl {
  margin-bottom: var(--spacing-xl);
}
.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

.mt-2 {
  margin-top: 2px;
}
.mt-sm {
  margin-top: var(--spacing-sm);
}
.mt-md {
  margin-top: var(--spacing-md);
}
.mt-lg {
  margin-top: var(--spacing-lg);
}
.mt-xl {
  margin-top: var(--spacing-xl);
}
.mt-2xl {
  margin-top: var(--spacing-2xl);
}

/* Padding */
.p-sm {
  padding: var(--spacing-sm);
}
.p-md {
  padding: var(--spacing-md);
}
.p-lg {
  padding: var(--spacing-lg);
}
.padding-xl {
  padding: var(--spacing-xl);
}
.padding-0-75rem-1rem {
  padding: 0.75rem 1rem;
}

.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}
.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}
.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}
.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

/* Gap */
.gap-xs {
  gap: var(--spacing-xs);
}
.gap-sm {
  gap: var(--spacing-sm);
}
.gap-md {
  gap: var(--spacing-md);
}
.gap-lg {
  gap: var(--spacing-lg);
}
.gap-xl {
  gap: var(--spacing-xl);
}
.gap-2xl {
  gap: var(--spacing-2xl);
}
.gap-3xl {
  gap: var(--spacing-3xl);
}

/* ===================================== */
/* TYPOGRAPHY UTILITIES                  */
/* ===================================== */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

/* Font Sizes */
.text-base {
  font-size: var(--font-size-base);
}
.text-lg {
  font-size: var(--font-size-lg);
}
.text-xl {
  font-size: var(--font-size-xl);
  color: var(--color-gray-600);
  line-height: 1.6;
}
.text-2xl {
  font-size: var(--font-size-2xl);
}
.text-3xl {
  font-size: var(--font-size-3xl);
}

/* Font Weight */
.font-bold {
  font-weight: 700;
}

/* Text Colors */
.text-primary {
  color: var(--color-primary);
}
.text-accent {
  color: var(--color-accent);
}
.text-white {
  color: var(--color-white);
}
.text-gray {
  color: var(--color-gray-600);
}
.text-gray-600 {
  color: var(--color-gray-600);
}
.text-gray-700 {
  color: var(--color-gray-700);
  line-height: 1.7;
}

/* Text Variations */
.text-lg-gray {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  line-height: 1.6;
}
.text-sm-gray {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}
.text-sm-strong {
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.text-xs-gray {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}
.text-2xl-bold {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
}
.text-heading-strong {
  color: var(--color-gray-900);
  font-weight: 600;
}

/* ===================================== */
/* BACKGROUND UTILITIES                  */
/* ===================================== */
.bg-primary {
  background-color: var(--color-primary);
}
.bg-accent {
  background-color: var(--color-accent);
}
.bg-light {
  background-color: var(--color-bg-light);
}
.bg-light-gray {
  background-color: var(--color-gray-120);
}
.bg-white {
  background-color: var(--color-white);
}
.bg-light-rounded {
  background-color: var(--color-bg-light);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.bg-white-opacity-20 {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ===================================== */
/* DISPLAY & FLEX UTILITIES              */
/* ===================================== */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.hidden {
  display: none !important;
}

.opacity-0 {
  opacity: 0;
}

.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-start {
  display: flex;
  align-items: flex-start;
}
.flex-column-gap-lg {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.items-center {
  align-items: center;
}
.align-items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}

/* ===================================== */
/* GRID UTILITIES                        */
/* ===================================== */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}
.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}
.grid-cols-3-lg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

/* ===================================== */
/* BORDER UTILITIES                      */
/* ===================================== */
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-full {
  border-radius: 50%;
}

.border-left-primary {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--spacing-lg);
}
.border-left-4-primary {
  border-left: 4px solid var(--color-primary);
}
.border-white-opacity-30 {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ===================================== */
/* SHADOW UTILITIES                      */
/* ===================================== */
.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* ===================================== */
/* POSITION UTILITIES                    */
/* ===================================== */
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}
.top-0 {
  top: 0;
}
.top-20 {
  top: 20px;
}
.bottom-20 {
  bottom: 20px;
}
.left-20 {
  left: 20px;
}
.left-50-center {
  left: 50%;
  transform: translateX(-50%);
}

/* ===================================== */
/* COMPONENTS                            */
/* ===================================== */

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  text-align: center;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--font-size-lg);
  border-radius: 50px !important;
}

/* Hero CTA Button */
.hero-content .btn-cta {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  align-self: center;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.8s ease-out 0.6s forwards;
}

@media (max-width: 1200px) {
  .hero-content .btn-cta {
    align-self: center;
  }
}

.btn-primary {
  background: var(--gradient-button);
  color: var(--color-white);
  box-shadow: var(--button-shadow);
}

.btn-primary:hover {
  background: linear-gradient(90deg, #00BFA6 0%, #00A590 100%);
  transform: translateY(-1px);
  box-shadow: 0px 0px 20px 0px rgba(13, 200, 178, 0.35);
  color: var(--color-white) !important;
}

.contact-form .btn-primary {
  min-width: 120px;
}

.btn-subtitle {
  font-size: var(--font-size-sm);
  font-weight: normal;
  opacity: 0.9;
  display: block;
}

.btn-primary .btn-subtitle,
.btn-primary:hover .btn-subtitle {
  color: var(--color-white) !important;
  opacity: 1;
}

.btn-secondary {
  background-color: transparent;
  color: #00BFA6;
  border: 2px solid #00BFA6;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: var(--gradient-button);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: var(--button-shadow);
  transform: translateY(-1px);
}

.btn-white {
  background: var(--gradient-button);
  color: var(--color-white);
  border-radius: 50px !important;
  box-shadow: var(--button-shadow);
  transition: all 0.3s ease;
}

.btn-white:hover {
  background: linear-gradient(90deg, #00BFA6 0%, #00A590 100%);
  transform: translateY(-1px);
  box-shadow: 0px 0px 20px 0px rgba(13, 200, 178, 0.35);
  color: var(--color-white);
}

.btn-cta {
  background: var(--gradient-button);
  color: var(--color-white);
  padding: 1rem 2rem;
  font-size: var(--font-size-lg);
  font-weight: 600;
  border-radius: 50px !important;
  transition: all 0.3s ease;
  display: inline-block;
  box-shadow: var(--button-shadow);
}

.btn-cta:hover {
  background: linear-gradient(90deg, #00BFA6 0%, #00A590 100%);
  transform: translateY(-2px);
  box-shadow: 0px 0px 20px 0px rgba(13, 200, 178, 0.35);
}

.btn-cta-primary {
  background: var(--gradient-button);
  color: var(--color-white);
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
  border: none;
  box-shadow: var(--button-shadow);
}

.btn-cta-primary:hover {
  background: linear-gradient(90deg, #00BFA6 0%, #00A590 100%);
  transform: translateY(-2px);
  box-shadow: 0px 0px 20px 0px rgba(13, 200, 178, 0.35);
}

.btn-cta-secondary {
  background: #0DCAB440;
  color: #0CCCB6;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
  border: none;
  box-shadow: 0px 0px 16px 0px #0CC9B340;
}

.btn-cta-secondary:hover {
  background: #0DCAB460;
  color: #0CCCB6;
  transform: translateY(-2px);
  box-shadow: 0px 0px 20px 0px #0CC9B360;
}

/* Forms */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--color-gray-700);
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-base);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
  background-color: var(--color-white);
  font-family: var(--font-family);
  resize: vertical;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 95, 84, 0.1);
}

textarea.form-input {
  min-height: 100px;
  line-height: 1.5;
}

/* Cards */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
}

.card-overlay {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.card-accent {
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.card-hierarchy {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.card-features {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Images */
.img-rounded-lg {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.img-rounded-md {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.img-cover {
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
}

/* Icons */
.icon-circle-accent,
.icon-square-accent,
.list-check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.list-check-icon {
  fill: var(--color-accent);
}

/* Lists */
.list-check {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

/* Badges */
.feature-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-bg-light);
  border-radius: var(--radius-full);
  height: 48px;
  white-space: nowrap;
}

/* CRM Landing Page */
.crm-landing-page .section {
  padding: var(--spacing-xl) 0;
}

.crm-landing-page .section.bg-light {
  background-color: var(--color-gray-50);
}

/* Communication hub section - match main landing page hero background */
.crm-landing-page .section.bg-light:nth-child(3) {
  background: var(--gradient-primary),
    url("/footer-1.png") center center/cover no-repeat;
  color: var(--color-white);
}

.crm-landing-page .section.bg-light:nth-child(3) .content-title,
.crm-landing-page .section.bg-light:nth-child(3) .section-label,
.crm-landing-page .section.bg-light:nth-child(3) .content-description,
.crm-landing-page .section.bg-light:nth-child(3) h4,
.crm-landing-page .section.bg-light:nth-child(3) p {
  color: var(--color-white);
}

/* Remove background container and expand image in Communication Hub section */
.crm-landing-page .section.bg-light:nth-child(3) .bg-light-rounded {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.crm-landing-page .section.bg-light:nth-child(3) .content-image img {
  width: 100%;
  max-width: none;
  transform: scale(1.2);
  border-radius: var(--radius-lg);
}

/* Pipeline & Deal Management section fixes */
.crm-landing-page .automation-visual {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: var(--radius-lg);
  /* transform: scale(1.1); */
}

.crm-landing-page .automation-visual img {
  /* Explicit width + display fallback. Earlier "image loading optimization"
     commit (de00c7cb2a) commented out width: 120% but left this rule with
     no width — relying on .img-rounded-lg's `width: 100%` to cascade in.
     That cascade is fragile when this rule's higher specificity competes
     on the same element; rebroadcasting width here so the img has explicit
     dimensions regardless of cascade order. */
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: none !important;
}

.crm-landing-page .max-w-300 {
  max-width: 300px;
}

/* Reporting & Analytics section styling */
.crm-landing-page .grid-2 .bg-light {
  background-color: var(--color-gray-50) !important;
}

.crm-landing-page .grid-2 svg {
  flex-shrink: 0;
}

/* Boxed sections for visual breaks */
.crm-landing-page .section.boxed-section {
  background-color: var(--color-gray-50);
  margin: var(--spacing-2xl) 0;
}

.crm-landing-page .section.boxed-section .container {
  max-width: 1200px;
  background-color: var(--color-white);
  padding: var(--spacing-3xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  margin: 0 auto;
}

/* Enhanced image styling for CRM sections */
.crm-landing-page .bg-light-rounded {
  background: linear-gradient(135deg, 
    rgba(0, 208, 181, 0.05) 0%, 
    rgba(0, 181, 160, 0.08) 100%);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: 
    0px 2px 4px -1px rgba(0, 0, 0, 0.06),
    0px 4px 6px -1px rgba(0, 0, 0, 0.10),
    0px 0px 0px 1px rgba(0, 208, 181, 0.08);
}

.feature-badge-icon {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

/* Labels */
.section-label {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background-color: var(--color-bg-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
}

.section-label-container {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background-color: rgba(11, 95, 84, 0.1);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-md);
}

.section-label-transparent {
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--color-primary);
}

.section-label-accent {
  background-color: rgba(26, 198, 175, 0.1);
  color: var(--color-accent);
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
}

/* ===================================== */
/* HEADER STYLES                         */
/* ===================================== */
.marketing-header {
  background: var(--gradient-primary),
    url("/footer-1.png") center center/cover no-repeat;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-white);
  text-decoration: none;
}

.header-logo {
  height: 32px;
  width: auto;
  fill: var(--color-white);
  color: var(--color-white);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: var(--spacing-xl);
  margin: 0;
  padding: 0;
}

.nav-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding: 8px 0;
  letter-spacing: 0.01em;
}

.nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.95);
}

.nav-link:hover::before {
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
}

.nav-link-active {
  color: rgba(255, 255, 255, 1);
  position: relative;
  font-weight: 600;
}

.nav-link-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.hamburger {
  width: 24px;
  height: 3px;
  background-color: var(--color-white);
  transition: all 0.3s ease;
}

/* ===================================== */
/* FOOTER STYLES                         */
/* ===================================== */
.company-footer {
  background: var(--gradient-primary),
    url("/footer-1.png") center center/cover no-repeat;
  color: var(--color-white) !important;
  padding: 3rem 0 2rem;
  position: relative;
  overflow: hidden;
}

/* Force footer content to be visible */
.company-footer * {
  color: var(--color-white) !important;
}

.company-footer .footer-links a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
}

.company-footer .footer-links a:hover {
  color: var(--color-white) !important;
}

.company-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.company-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 10% 20%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 45% 60%,
      rgba(13, 202, 180, 0.05) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6rem;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1;
}

.footer-logo {
  margin-bottom: 1.5rem;
}

.footer-logo-svg {
  height: 32px;
  width: auto;
  fill: var(--color-white);
  color: var(--color-white);
}

.company-description {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;
  max-width: 320px;
  font-weight: 300;
}

.all-rights {
  font-size: 0.875rem;
  opacity: 0.7;
  margin: 0;
}

.footer-heading {
  font-family: var(--font-family-heading);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.95);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  display: inline-block;
  position: relative;
}

.footer-links a:hover {
  color: rgba(255, 255, 255, 1);
  transform: translateX(2px);
}

.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  /* height: 1px; */
  background-color: #1ac6af;
  transition: width 0.3s ease;
}

.footer-links a:hover::after {
  width: 100%;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  position: relative;
  z-index: 1;
  padding-top: 2rem;
}

.footer-bottom-left {
  display: flex;
  align-items: center;
}

.language-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.language-selector:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.language-selector-wrapper {
  position: relative;
}

.language-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.5rem;
  background: rgba(30, 30, 30, 0.98);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  padding: 0.5rem;
  min-width: 180px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.language-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.language-dropdown.hidden {
  display: none;
}

.language-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* padding: 0.75rem 1rem; */
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
}

.language-dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.language-dropdown-item .language-text {
  flex: 1;
}

.language-dropdown-item .checkmark-icon {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

.chevron-icon {
  width: 12px;
  height: 8px;
  transition: transform 0.2s ease;
}

.globe-icon {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

.footer-bottom-center {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
}

.copyright {
  opacity: 0.8;
}

.legal-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.legal-link:hover {
  color: #1ac6af;
}

.separator {
  opacity: 0.5;
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.social-links {
  display: flex;
  gap: 0.75rem;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-white);
  transition: all 0.3s ease;
  opacity: 0.8;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.social-links a:hover {
  opacity: 1;
  background-color: rgba(26, 198, 175, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.social-links svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-tagline {
  font-size: 0.875rem;
  opacity: 0.8;
  margin: 0;
}

/* ===================================== */
/* HERO SECTION                          */
/* ===================================== */
.hero-section {
  background: var(--gradient-primary),
    url("/footer-1.png") center center/cover no-repeat;
  padding: 3rem 0 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

.hero-wrapper {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 80px);
  text-align: center;
  width: 100%;
  padding-bottom: 0;
}

.hero-content {
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding-top: 2rem;
  opacity: 0;
  transform: translateY(30px);
  animation: slideInUp 0.8s ease-out 0.1s forwards;
}

.hero-title {
  font-family: var(--font-family-heading);
  font-size: 3rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 1rem;
  line-height: 1.2;
  text-align: center;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-features {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 1.5rem 0;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.8s ease-out 0.4s forwards;
}

.hero-feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--font-size-base);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.625rem var(--spacing-sm);
  border-radius: var(--radius-full);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.hero-feature:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.hero-feature .feature-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.9);
}

.hero-feature span {
  line-height: 1.4;
  white-space: nowrap;
}

/* Hero Visuals */
.hero-visuals {
  position: relative;
  width: 100%;
  max-width: 1200px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto;
  padding: 0 2rem;
  /* margin-top: auto; */
  padding-bottom: 0;
}

.floating-card {
  position: absolute;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: var(--spacing-md);
}

.performance-card {
  top: 20px;
  left: 0;
  width: 280px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.card-icon {
  flex-shrink: 0;
}

.card-title {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  font-weight: 500;
}

/* Phone Mockup */
.phone-mockup {
  position: absolute;
  bottom: 40px;
  left: 60px;
  width: 240px;
  height: 480px;
  background: #1f2937;
  border-radius: 30px;
  padding: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.phone-screen {
  background: var(--color-white);
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.phone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: var(--color-white);
  font-size: var(--font-size-xs);
}

.time {
  font-weight: 600;
}

.deal-card {
  padding: var(--spacing-md);
}

.deal-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.deal-name {
  font-weight: 600;
  color: var(--color-gray-900);
}

.deal-amount {
  color: var(--color-gray-700);
}

.deal-contact,
.deal-company {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.contact-icon,
.company-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* Pipeline Container */
.pipeline-container {
  position: absolute;
  top: 20px;
  right: 0;
  width: 600px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: var(--spacing-lg);
}

.pipeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.pipeline-header h3 {
  font-size: var(--font-size-lg);
  color: var(--color-gray-900);
  margin: 0;
}

.pipeline-controls {
  display: flex;
  gap: var(--spacing-xs);
}

.control-btn {
  background: none;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-gray-600);
}

.deal-add-btn {
  background: var(--gradient-button);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  box-shadow: var(--button-shadow);
  transition: all 0.3s ease;
}

.deal-add-btn:hover {
  background: linear-gradient(90deg, #00BFA6 0%, #00A590 100%);
  transform: translateY(-1px);
  box-shadow: 0px 0px 20px 0px rgba(13, 200, 178, 0.35);
}

.pipeline-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
}

.pipeline-column {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

.stage-header {
  margin-bottom: var(--spacing-sm);
}

.stage-header h4 {
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  margin: 0 0 4px 0;
}

.stage-count {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

.pipeline-deal-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.deal-title {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-gray-900);
  margin-bottom: 4px;
}

.deal-owner {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-bottom: 4px;
}

.deal-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Sales Assistant */
.sales-assistant {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 320px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: var(--spacing-md);
}

.assistant-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.assistant-info h4 {
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  margin: 0;
}

.assistant-status {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.assistant-message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-md);
}

.assistant-actions h5 {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
}

.action-item {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.action-item h6 {
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  margin: 0 0 var(--spacing-xs) 0;
}

.action-details {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-xs);
}

.action-priority {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.priority-high {
  background: var(--color-green-solid);
  color: var(--color-green-solid-text);
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.priority-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

.action-description {
  font-size: var(--font-size-xs);
  color: var(--color-gray-700);
  margin: 0;
}

.all-notifications {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  margin-top: var(--spacing-sm);
}

/* Dashboard Mockup */
.dashboard-mockup {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transform: translateY(30px);
}

/* Hero Image */
.hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom;
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translate(-50%, -30px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Logo carousel slide animation */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Logo carousel hover state */
.logo-carousel:hover {
  animation-play-state: paused;
}

/* Modern Scroll Animations for Sections */
.scroll-animate {
  opacity: 1;
}

.scroll-animate-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.scroll-animate.in-view .scroll-animate-item:nth-child(1) {
  animation: slideInUp 0.8s ease-out 0.1s forwards;
}

.scroll-animate.in-view .scroll-animate-item:nth-child(2) {
  animation: slideInUp 0.8s ease-out 0.3s forwards;
}

.scroll-animate.in-view .scroll-animate-item:nth-child(3) {
  animation: slideInUp 0.8s ease-out 0.5s forwards;
}

.scroll-animate.in-view .scroll-animate-item:nth-child(4) {
  animation: slideInUp 0.8s ease-out 0.7s forwards;
}

/* Removed display: none from dashboard-preview to make it visible */

/* ===================================== */
/* CONTENT SECTIONS                      */
/* ===================================== */
.logo-showcase {
  background-color: var(--color-gray-100);
  padding: var(--spacing-xl) 0;
}

.showcase-text {
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-gray-500);
  /* margin-bottom: var(--spacing-lg); */
}

.logo-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  padding: 0 1rem;
}

@media (min-width: 1024px) {
  .logo-grid {
    flex-wrap: nowrap;
    gap: var(--spacing-xl);
  }
}

.logo-item {
  opacity: 1;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .logo-item {
    flex-shrink: 0;
    min-width: max-content;
    margin-bottom: 0;
  }
}

.logo-item:hover {
  transform: translateY(-3px);
  opacity: 1;
}

.logo-item:hover svg {
  transform: rotate(5deg) scale(1.1);
  transition: all 0.3s ease;
}

.logo-icon {
  vertical-align: middle;
  margin-right: 8px;
}

.logo-text {
  vertical-align: middle;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-text);
}

/* Features Section - Platform Tabs */
.features-section {
  padding: var(--spacing-3xl) 0;
  margin-bottom: var(--spacing-3xl);
}

@media (max-width: 1024px) {
  .features-section {
    margin-bottom: var(--spacing-4xl);
  }
}

/* Platform Tabs Navigation */
.platform-tabs-nav {
  background: none;
  border-bottom: 1px solid var(--color-gray-200);
  border-radius: 0;
  padding: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--spacing-2xl);
}

.platform-tab {
  flex: 1 1 0%;
  min-width: 0;
  background: none;
  border: none;
  padding: 1.25rem 2.5rem 1rem 2.5rem;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: var(--color-gray-900);
  font-weight: 600;
  font-size: var(--font-size-lg);
  border-bottom: 3px solid transparent;
  word-break: break-word;
  white-space: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.platform-tab.active {
  background: none;
  box-shadow: none;
  border-bottom: 3px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 0;
  transform: none;
}

.platform-tab:hover {
  background: none;
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  box-shadow: none;
}

.platform-tab .tab-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: var(--spacing-xs);
}

.platform-tab .tab-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  display: block;
  margin-bottom: var(--spacing-xs);
}

.platform-tab .tab-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  display: block;
}

.platform-tab.active .tab-title {
  color: var(--color-primary);
}

/* Platform Tabs Content */
.platform-tabs-content {
  position: relative;
  min-height: 600px;
}

/* Fix overlap on medium tablets */
@media (max-width: 1024px) {
  .platform-tabs-content {
    min-height: auto;
    position: static;
  }
  
  .platform-tab-panel {
    position: relative !important;
  }
  
  .platform-tab-panel:not(.active) {
    display: none;
  }
}

.platform-tab-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.platform-tab-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tab-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: center;
}

.tab-content-text {
  padding: var(--spacing-xl);
}

.tab-content-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.automation-number {
  background-color: var(--color-accent);
  color: var(--color-white);
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  max-width: 50px;
  max-height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
  flex-grow: 0;
}

.property-info strong {
  display: block;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-xs);
}

.property-info span {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.progress-bar {
  background-color: var(--color-gray-200);
  height: 8px;
  border-radius: 4px;
  margin-top: var(--spacing-sm);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .platform-tabs-nav {
    /* Remove flex-direction: column and max-width: none to keep tabs horizontal */
  }
  .platform-tab {
    /* Remove margin-bottom so tabs stay inline */
    margin-bottom: 0;
  }
  .tab-content-wrapper {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  .tab-content-visual {
    order: -1;
    min-height: 300px;
  }
  .platform-tab-panel {
    position: relative;
  }
  .platform-tab-panel:not(.active) {
    display: none;
  }
}

/* CMS key features section */

.item-block {
  margin-bottom: 36px;
  position: relative;
}

.section-heading {
  margin: 0 0 8px 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.section-description {
  margin-left: 10px;
  color: #666;
  font-size: 14px;

  /* Start hidden and invisible */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.item-block:hover .section-description {
  opacity: 1;
  max-height: 200px;
}

.content-wrapper-feature {
  display: flex;
  align-items: start;
  gap: var(--spacing-2xl);
  flex-wrap: wrap;
}

.section-title {
  font-family: var(--font-family-heading);
  text-align: center;
  font-size: var(--font-size-5xl);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2xl);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.feature-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  transition: box-shadow 0.2s ease;
}

.feature-card:hover {
  box-shadow: var(--shadow-lg);
}

.feature-header {
  margin-bottom: var(--spacing-md);
}

.feature-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
}

.feature-subtitle {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-gray-800);
}

.feature-description {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.feature-quote {
  font-style: italic;
  color: var(--color-gray-700);
  padding: var(--spacing-md);
  background-color: var(--color-gray-50);
  border-left: 4px solid var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.feature-author {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  position: relative;
  z-index: 1;
}

/* Content Section */
.content-section {
  padding: var(--spacing-3xl) 0;
}

.content-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xl);
}

.content-wrapper.reverse {
  flex-direction: row-reverse;
}

.content-text,
.content-image {
  flex: 1;
}

.content-title {
  font-size: var(--font-size-5xl);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-md);
}

.content-description {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.testimonial {
  background-color: var(--color-gray-50);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.testimonial p {
  font-style: italic;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-sm);
}

/* Automation Visual */
.automation-visual {
  width: 100%;
  max-width: 400px;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.automation-card {
  background-color: var(--color-white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
}

.automation-card h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.automation-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

/* Calendar Visual */
.calendar-visual {
  background-color: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-lg);
}

.calendar-header {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-sm);
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.calendar-day.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Tools Section */
.tools-section {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-white);
}

/* Integration Section */
.integration-section {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-gray-50);
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}

.integration-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.integration-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.integration-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--spacing-md);
  width: 80px;
  height: 80px;
  background: var(--gradient-button);
  border-radius: var(--radius-lg);
  margin: 0 auto var(--spacing-md) auto;
}

.integration-icon svg {
  width: 50px;
  height: 50px;
}

.integration-icon svg rect {
  display: none;
}

.integration-icon svg path {
  stroke: rgba(255, 255, 255, 0.9);
  fill: none;
  stroke-width: 2.5;
}

.integration-card h3 {
  font-size: var(--font-size-xl);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-sm);
}

.integration-card p {
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0;
}

.section-subtitle {
  text-align: center;
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  max-width: 800px;
  margin: 0 auto var(--spacing-2xl);
  line-height: 1.6;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}

.tool-card {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
}

.tool-visual {
  height: 250px;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-title {
  font-size: var(--font-size-xl);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-sm);
}

.tool-description {
  color: var(--color-gray-600);
  line-height: 1.6;
}

/* Products Section */
.products-section {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-white);
  opacity: 0;
  transform: translateY(50px);
  animation: slideInUp 0.8s ease-out 0.2s forwards;
}

/* Dashboard Preview Component */
.dashboard-preview {
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: block;
}

.dashboard-header {
  background-color: var(--color-white);
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-gray-200);
}

.dashboard-tabs {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.tab {
  color: var(--color-gray-500);
  cursor: pointer;
}

.tab.active {
  color: var(--color-primary);
  font-weight: 500;
}

.dashboard-content {
  display: flex;
  height: calc(100% - 50px);
}

.dashboard-sidebar {
  width: 150px;
  background-color: var(--color-gray-100);
  padding: var(--spacing-sm);
}

.menu-item {
  padding: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  border-radius: var(--radius-sm);
}

.menu-item.active {
  background: var(--gradient-button);
  color: var(--color-white);
}

.dashboard-main {
  flex: 1;
  padding: var(--spacing-md);
}

.project-card {
  background-color: var(--color-white);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.project-number {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
}

/* Inbox Preview */
.inbox-preview {
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inbox-header {
  flex-shrink: 0;
}

.inbox-header h4 {
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-md);
}

.inbox-messages {
  flex: 1;
  overflow-y: auto;
}

.message-item {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.message-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  background-color: var(--color-gray-300);
  border-radius: 50%;
  flex-shrink: 0;
}

.message-sender {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

.message-preview {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Automation Preview */
.automation-preview {
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
}

.automation-header h4 {
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-md);
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 100px;
  margin-bottom: var(--spacing-sm);
}

.bar {
  width: 30px;
  background: var(--gradient-button);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.chart-label {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Testimonials Section */
.testimonials-section {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-gray-50);
}

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

.testimonial-carousel {
  position: relative;
  overflow: hidden;
}

.testimonial-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.testimonial-slide.active {
  display: block;
  opacity: 1;
}

.testimonial-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.rating {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.star {
  margin: 0 2px;
}

.testimonial-quote {
  font-size: var(--font-size-2xl);
  line-height: 1.5;
  color: var(--color-gray-900);
  font-weight: 500;
  margin-bottom: var(--spacing-xl);
  font-style: italic;
}

.testimonial-author {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-xl);
}

.testimonial-author strong {
  color: var(--color-primary);
}

/* Removed .testimonial-avatars - now each testimonial has its own avatar */

.avatar {
  width: 60px;
  height: 60px;
  background-color: var(--color-gray-300);
  border-radius: 50%;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.testimonial-nav {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
}

.nav-dot {
  width: 10px;
  height: 10px;
  background-color: var(--color-gray-300);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.nav-dot.active {
  background-color: var(--color-primary);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.pricing-card {
  background-color: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured {
  border-color: var(--color-accent);
  border-top-width: 6px;
  box-shadow: var(--shadow-xl);
  transform: translateY(-12px);
  position: relative;
  background-color: var(--color-bg-accent);
}

.pricing-card.featured:hover {
  transform: translateY(-16px);
}

.featured-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 6px 20px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-md);
}

.plan-use-case {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
  min-height: 1rem;
}

.plan-name {
  font-size: var(--font-size-2xl);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-sm);
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
  min-height: 4.5rem;
}

.plan-price .currency {
  font-size: var(--font-size-xl);
  color: var(--color-gray-600);
  font-weight: 600;
}

.plan-price .amount {
  font-size: var(--font-size-5xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 4px;
  font-family: var(--font-family-heading);
}

.plan-price .period {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
}

.plan-description {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-lg);
  min-height: 3rem;
  display: flex;
  align-items: center;
  text-align: center;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg) 0;
  text-align: left;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.feature-item {
  display: flex;
  align-items: center;
  color: var(--color-gray-700);
  text-align: left;
  line-height: 1.5;
}

.check {
  color: var(--color-accent);
  font-weight: 700;
  margin-right: var(--spacing-sm);
  font-size: var(--font-size-lg);
}

.pricing-card .btn {
  width: 100%;
  margin-bottom: var(--spacing-md);
}

.pricing-card .text-gray-600.mb-lg {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: var(--spacing-md) !important;
}

.pricing-card .text-sm-gray {
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-card .text-sm-gray.text-primary {
  min-height: 1.5rem;
  margin-top: -0.5rem;
}

.pricing-savings {
  min-height: 1.5rem;
  line-height: 1.5rem;
  transition: opacity 0.2s ease-in-out;
  margin-bottom: var(--spacing-md) !important;
}

.pricing-card .btn-secondary {
  background-color: transparent;
  color: #00BFA6;
  border: 2px solid #00BFA6;
  transition: all 0.3s ease;
}

.pricing-card .btn-secondary:hover {
  background: var(--gradient-button);
  color: var(--color-white);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: var(--button-shadow);
}

/* Pricing Toggle */
.pricing-toggle {
  background: var(--color-white);
  padding: 4px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  border: 1px solid var(--color-gray-200);
}

.pricing-toggle-button {
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-sm);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.pricing-toggle-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.pricing-toggle-button:active::before {
  width: 300px;
  height: 300px;
}

.pricing-toggle-active {
  background: var(--color-primary) !important;
  color: white !important;
}

.pricing-toggle-inactive {
  background: transparent !important;
  color: var(--color-gray-600) !important;
}

.pricing-toggle-inactive:hover {
  color: var(--color-gray-900) !important;
  background: var(--color-gray-50) !important;
}

.pricing-grid:not(.hidden) {
  display: grid !important;
}

/* Pricing Animation with View Transitions */
.pricing-grids-container {
  view-transition-name: pricing-container;
}

.pricing-grid {
  transition: none;
}

.pricing-grid.hidden {
  display: none !important;
}

/* View transition names for smooth morphing */
.pricing-card:nth-child(1) {
  view-transition-name: pricing-card-1;
}

.pricing-card:nth-child(2) {
  view-transition-name: pricing-card-2;
}

.pricing-card:nth-child(3) {
  view-transition-name: pricing-card-3;
}

/* Individual price elements get their own transition names */
.pricing-card:nth-child(1) .plan-price {
  view-transition-name: price-1;
}

.pricing-card:nth-child(2) .plan-price {
  view-transition-name: price-2;
}

.pricing-card:nth-child(3) .plan-price {
  view-transition-name: price-3;
}

/* Savings text transitions */
.pricing-card:nth-child(1) .pricing-savings {
  view-transition-name: savings-1;
}

.pricing-card:nth-child(2) .pricing-savings {
  view-transition-name: savings-2;
}

.pricing-card:nth-child(3) .pricing-savings {
  view-transition-name: savings-3;
}

/* Customize the view transition animation */
::view-transition-old(pricing-container),
::view-transition-new(pricing-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(pricing-card-1),
::view-transition-new(pricing-card-1),
::view-transition-old(pricing-card-2),
::view-transition-new(pricing-card-2),
::view-transition-old(pricing-card-3),
::view-transition-new(pricing-card-3) {
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
}

/* Fade and slide effect for the cards */
::view-transition-old(pricing-container) {
  animation: slideUp 0.3s ease-out;
}

::view-transition-new(pricing-container) {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

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

/* About Page Package Cards */
.about-page .feature-card .feature-title {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

.about-page .feature-card {
  text-align: left;
}

/* Legal Pages */
article h2 {
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

article p {
  color: var(--color-gray-700);
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
}

/* Contact Page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
}

.contact-content {
  max-width: 600px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm) var(--spacing-md);
}

.contact-form .form-group {
  margin-bottom: var(--spacing-sm);
}

.form-full-width {
  grid-column: 1 / -1;
}

.form-label-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.form-helper {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.contact-form fieldset {
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.contact-form legend {
  padding: 0;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--color-gray-700);
}

.radio-group {
  margin-top: var(--spacing-xs);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.radio-item {
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.radio-item:hover {
  background-color: var(--color-gray-50);
  padding: var(--spacing-xs);
  margin: calc(var(--spacing-xs) * -1);
  border-radius: var(--radius-sm);
}

.radio-item input[type='radio'] {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-xs);
  cursor: pointer;
  accent-color: var(--color-primary);
}

.radio-item label {
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  cursor: pointer;
  margin: 0;
}

.contact-image {
  position: relative;
  height: 600px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

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

/* FAQ Section */
.faq-section {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-gray-50);
}

.faq-container {
  max-width: 1000px;
  margin: 0 auto;
}

.faq-item {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.faq-question {
  width: 100%;
  padding: var(--spacing-lg);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-gray-900);
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: var(--color-gray-50);
}

.faq-icon {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

.faq-answer p {
  padding: 20px var(--spacing-lg) var(--spacing-lg);
  color: var(--color-gray-600);
  line-height: 1.6;
}

/* CTA Footer Section */
.cta-footer-section {
  position: relative;
  background: var(--gradient-primary),
    url("/footer-1.png") center center/cover no-repeat;
  padding: 5rem 0 4rem;
  overflow: hidden;
}

.cta-footer-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 10% 20%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 45% 60%,
      rgba(13, 202, 180, 0.05) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 0;
}

.cta-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  gap: 3rem;
}

.cta-text {
  flex: 1;
  text-align: left;
}

.cta-title {
  font-size: 2.5rem;
  color: var(--color-white);
  margin-bottom: 0.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.cta-subtitle {
  font-size: 1.125rem;
  color: var(--color-white);
  opacity: 0.9;
  margin: 0;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-shrink: 0;
}

.cta-pattern {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;

  z-index: 1;
}

/* Accordion */
.accordion-content {
  transition: max-height 0.3s ease-out;
}

[data-accordion-target='icon'] {
  transition: transform 0.3s ease;
}

.rotate-180 {
  transform: rotate(180deg);
}

/* ===================================== */
/* RESPONSIVE DESIGN                     */
/* ===================================== */
@media (max-width: 1200px) {

  .hero-content {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 0;
  }

  .hero-title,
  .hero-subtitle {
    text-align: center;
  }

  .hero-features {
    align-items: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-visuals {
    padding-bottom: var(--spacing-md);
    margin-bottom: 0;
    position: static;
  }

  .hero-image {
    max-width: 100%;
  }
  
  .browser-frame {
    transform: scale(1);
    max-width: 100%;
  }
  
  .dashboard-mockup {
    position: static;
  }
}

/* Tablet styles */
@media (max-width: 1024px) and (min-width: 769px) {
  .hero-wrapper {
    min-height: 600px;
  }
  
  .hero-visuals {
    margin-bottom: -80px;
  }
  
  .browser-frame {
    transform: scale(0.9);
  }

  .products-section {
    padding: var(--spacing-2xl) 0;
  }
}

.footer-links-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr;
  gap: 4rem;
  width: 100%;
}

/* Ensure Contact Us stays on one line */
.footer-contact-link {
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .contact-image {
    display: none;
  }

  .pricing-card.featured {
    transform: none;
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-lg);
  }

  .pricing-card.featured:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 768px) {
  /* Typography */
  h1 {
    font-size: var(--font-size-4xl);
  }
  h2 {
    font-size: var(--font-size-3xl);
  }
  h3 {
    font-size: var(--font-size-2xl);
  }

  /* Layout */
  .container {
    padding: 0 var(--spacing-sm);
  }

  .section {
    padding: var(--spacing-2xl) 0;
  }

  /* Grid */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-2,
  .grid-cols-3-lg {
    grid-template-columns: 1fr;
  }

  /* Header Mobile */
  .nav-menu,
  .nav-actions {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .nav-wrapper {
    position: relative;
  }

  .nav-menu.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-primary);
    padding: var(--spacing-md);
    margin-top: 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  .nav-actions.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-primary);
    padding: var(--spacing-md);
    margin-top: 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  /* Footer Mobile */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .company-info {
    margin-bottom: 1rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .footer-bottom-left,
  .footer-bottom-center,
  .footer-bottom-right {
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .footer-bottom-right {
    flex-direction: column;
    gap: 1rem;
  }

  .social-links {
    justify-content: center;
  }

  .footer-bottom-center {
    order: 3;
  }

  .footer-links-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
  }

  /* Hero Mobile */
  .hero-title {
    font-size: var(--font-size-4xl);
  }
  .hero-subtitle {
    font-size: var(--font-size-lg);
  }
  .hero-features {
    gap: var(--spacing-sm);
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hero-feature {
    font-size: var(--font-size-sm);
    padding: 6px 12px;
  }
  .hero-feature .feature-icon {
    width: 18px;
    height: 18px;
  }

  /* Hero section mobile adjustments */
  .hero-section {
    min-height: 100vh;
    padding-bottom: 0;
  }

  .hero-wrapper {
    min-height: calc(100vh - 60px);
    justify-content: center;
    gap: 1.5rem;
  }

  .hero-title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  /* Ensure hero image is visible on mobile */
  .hero-visuals {
    padding: 0 1rem;
  }

  .hero-content {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .dashboard-mockup {
    position: relative;
    transform: translateY(10px);
    max-width: 100%;
  }

  .browser-frame {
    max-width: 100%;
  }

  .hero-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }

  /* Features Mobile */
  .logo-grid {
    gap: var(--spacing-md);
  }
  .features-grid {
    grid-template-columns: 1fr;
  }

  /* Content Mobile */
  .content-wrapper,
  .content-wrapper.reverse {
    flex-direction: column;
  }

  .content-title {
    font-size: var(--font-size-2xl);
  }

  /* Tools Mobile */
  .tools-grid {
    grid-template-columns: 1fr;
  }

  /* Testimonials Mobile */
  .testimonial-quote {
    font-size: var(--font-size-xl);
  }
  .avatar {
    width: 50px;
    height: 50px;
  }

  /* Pricing Mobile */
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  
  /* Only apply flex layout when grid is visible (not hidden) */
  .pricing-grid:not(.hidden) {
    display: flex !important;
    flex-direction: column;
  }
  
  /* Move featured plan to top on mobile */
  .pricing-card.featured {
    order: -1;
  }
  
  .pricing-card {
    order: 0;
  }

  /* Contact Mobile */
  .contact-form {
    grid-template-columns: 1fr;
  }

  /* FAQ Mobile */
  .faq-question {
    font-size: var(--font-size-base);
  }

  /* CTA Mobile */
  .cta-content {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .cta-text {
    text-align: center;
  }
  .cta-title {
    font-size: 1.875rem;
  }
  .cta-subtitle {
    font-size: 1rem;
  }
  .cta-buttons {
    justify-content: center;
  }
  .btn-cta-primary,
  .btn-cta-secondary {
    min-width: 140px;
  }
}

.footer-bg-image {
  background: var(--gradient-primary),
    url("/footer-1.png") center center/cover no-repeat;
}

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fadeInUp {
  opacity: 0;
  transform: translateY(32px);
  animation: fadeInUp 0.7s ease-out forwards;
}
@keyframes pulseOnce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
.animate-pulseOnce {
  animation: pulseOnce 0.7s ease-in-out 1;
}
@keyframes kenBurns {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1.04) translateY(-2px);
  }
}
.ken-burns {
  animation: kenBurns 8s ease-in-out forwards;
  transform-origin: center center;
}
/* Removed redundant .footer-bg-image - background applied directly to .company-footer and .cta-footer-section */

/* Footer mobile adjustments for very small screens */
@media (max-width: 640px) {
  .footer-links-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .platform-tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  
  /* Make content-wrapper-feature stack on mobile */
  .content-wrapper-feature {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .content-image, .content-text {
    width: 100%;
    max-width: none;
  }

  .platform-tabs-nav::-webkit-scrollbar {
    height: 4px;
  }

  .platform-tabs-nav::-webkit-scrollbar-track {
    background: var(--color-gray-bg-subtle);
  }

  .platform-tabs-nav::-webkit-scrollbar-thumb {
    background: var(--color-gray-border);
    border-radius: 2px;
  }

  .platform-tab {
    font-size: var(--font-size-base);
    padding: 1rem 1.5rem;
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: max-content;
  }

  /* Show full tab names on mobile - no hiding */
  .platform-tab .tab-mobile-hide {
    display: inline;
  }
}

/* Benefits Section Styles */
.benefits-section {
  background: var(--gradient-primary),
    url("/footer-1.png") center center/cover no-repeat;
  padding: 3rem 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.benefits-container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.benefits-content {
  color: white;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
}

.benefits-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 2rem;
  color: #FFE5E5;
}

.benefits-description {
  color: #d1fae5;
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  text-wrap: balance;
  hyphens: none;
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.benefit-checkmark {
  min-width: 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gradient-button);
  box-shadow: 0px 4px 12px 0px rgba(13, 200, 178, 0.3);
}

.benefit-checkmark svg {
  width: 14px;
  height: 14px;
  stroke: white;
  stroke-width: 2.5;
  fill: none;
}

.benefit-text {
  color: #d1fae5;
  font-size: 1rem;
  line-height: 1.5;
}

.benefits-cta {
  background: var(--gradient-button);
  color: white;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--button-shadow);
  align-self: flex-start;
  width: auto;
}

.benefits-cta:hover {
  background: linear-gradient(90deg, #00BFA6 0%, #00A590 100%);
  transform: translateY(-2px);
  box-shadow: 0px 0px 20px 0px rgba(13, 200, 178, 0.35);
}

.benefits-image {
  position: relative;
}

.image-wrapper {
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.benefits-img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .benefits-container {
    grid-template-columns: 0.8fr 1.2fr;
  }
.benefits-content {
    min-height: 600px;
    padding: 4rem 0;
    gap: 2rem;
  }
  .benefits-description {
    margin-bottom: 2.5rem;
  }
  .benefits-grid {
    gap: 1.8rem;
    margin-bottom: 2.5rem;
  }
  .benefits-title {
    font-size: 2rem;
    margin-bottom: 2.5rem;
  }
  .benefits-img {
    height: 600px;
  }
}

.benefits-title-underline {
  border-bottom: 4px solid var(--color-primary-light);
  padding-bottom: 2px;
  font-weight: 700;
  display: inline-block;
}

@media (min-width: 768px) {
  .benefits-title {
    white-space: nowrap;
  }
}

/* Mobile benefits centering */
@media (max-width: 767px) {
  .benefits-content {
    text-align: center;
    align-items: center;
  }
  
  .benefits-title {
    text-align: center;
  }
  
  .benefits-description {
    text-align: center;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem;
  }
  
  .benefit-item {
    justify-content: flex-start;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.25rem 0;
  }
  
  .benefit-text {
    text-align: left;
    flex: 1;
  }
  
  .benefits-cta {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* CRM Landing Page hover lift — hover affordance via transitions only
   (no perpetual loops). The .ken-burns override is dropped — the global
   one-shot kenBurns zoom from the shared rule now applies uniformly across
   all landing pages. */
.crm-landing-page .card-accent {
  transition: all 0.3s ease;
}

.crm-landing-page .card-accent:hover {
  transform: translateY(-5px) scale(1.05);
}

.crm-landing-page .card-overlay {
  transition: all 0.3s ease;
}

.crm-landing-page .card-overlay:hover {
  transform: scale(1.05);
}

.crm-landing-page .position-absolute.p-sm {
  transition: all 0.3s ease;
}

.crm-landing-page .position-absolute.p-sm:hover {
  transform: translateY(-8px) scale(1.1);
}

/* ----------------------------------------------------------------------------
   Pricing comparison table — side-by-side feature matrix below the plan cards.
   Header row pins the plan names; each row is one feature with ✓ / — per plan.
   The "Most Popular" column gets a tinted background so the visual emphasis
   carries through from the cards above into the comparison.
   ---------------------------------------------------------------------------- */
.pricing-comparison-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-white);
}

.pricing-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md);
}

.pricing-comparison-table th,
.pricing-comparison-table td {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
  border-bottom: 1px solid var(--color-gray-200);
}

.pricing-comparison-table thead th {
  background-color: var(--color-bg-light);
  font-weight: 700;
  color: var(--color-gray-900);
}

.pricing-comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.pricing-comparison-table tbody tr:hover {
  background-color: var(--color-bg-light);
}

.pricing-comparison-table .comparison-feature-cell {
  text-align: left;
  font-weight: 500;
  color: var(--color-gray-900);
  min-width: 240px;
}

.pricing-comparison-table .comparison-plan-cell {
  min-width: 160px;
}

.pricing-comparison-table .comparison-plan-cell-featured {
  background-color: var(--color-bg-accent);
}

.pricing-comparison-table thead .comparison-plan-cell-featured {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.pricing-comparison-table .comparison-plan-name {
  display: block;
  font-size: var(--font-size-lg);
}

.pricing-comparison-table .comparison-plan-tag {
  display: block;
  margin-top: 4px;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  opacity: 0.9;
}

.pricing-comparison-table .comparison-check {
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--font-size-lg);
}

.pricing-comparison-table .comparison-dash {
  color: var(--color-gray-600);
}

@media (max-width: 640px) {
  .pricing-comparison-table th,
  .pricing-comparison-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .pricing-comparison-table .comparison-feature-cell {
    min-width: 180px;
  }

  .pricing-comparison-table .comparison-plan-cell {
    min-width: 100px;
  }
}

/* ----------------------------------------------------------------------------
   Pricing FAQ list — collapsible <details> rows. The native disclosure
   triangle is replaced with our own +/− indicator via ::after.
   ---------------------------------------------------------------------------- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.faq-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  transition: background-color 0.15s ease;
}

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

.faq-item summary:hover {
  background-color: var(--color-bg-light);
}

.faq-item summary::after {
  content: "+";
  font-size: var(--font-size-xl);
  font-weight: 400;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  padding: 0 var(--spacing-lg) var(--spacing-md);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ----------------------------------------------------------------------------
   State Compliance cards on the TM landing page — compact 4-up grid showing
   the four states with encoded compliance rules.
   ---------------------------------------------------------------------------- */
.state-compliance-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.state-compliance-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

.state-compliance-state {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--spacing-xs);
}

.state-compliance-detail {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================================
   Homepage Hero — Pipeline Demo
   Mirrors Crm::Dashboard::Widgets::PipelineWidget at hero scale. Hardcoded
   fixture content lives in _hero_demo.html.erb. Brand tokens flow through
   from the variables defined at the top of this file, so a brand refresh
   updates the demo automatically.
   ============================================================================ */

/* Screen-reader-only utility. The marketing.css build doesn't ship Tailwind's
   `.sr-only`, so without this rule the hero-demo caption rendered as visible
   text. Defined here next to its only consumer; hoist somewhere more general
   if another landing page needs it later. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Hero Dashboard Demo
   Static mini-dashboard mockup that mirrors the real /dashboard view:
   a small page-header chrome ("Dashboard" + "+ Add Widget" pill) plus a
   compressed Office Pipeline widget below it. The widget's 4-stat row is
   folded 2×2 (instead of the real 4-wide layout) so the demo fits the
   hero's portrait column without forcing cards too narrow to read.

   No animations — everything is static. The previous kanban-with-pulse-loop
   pattern was retired along with its Stimulus controller.
   ============================================================================ */
.hero-demo {
  width: 100%;
  /* Positioning context for the absolutely-positioned fake cursor that
     the auto-playing tour drives. */
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Auto-playing cinematic demo — no user input. Clicks pass through
     to the page, hover does nothing. The scripted tour is the only
     driver of the visible state. */
  pointer-events: none;
}

/* ─── Fake cursor — auto-play tour driver ──────────────────────────
   Absolute-positioned over the demo card. Hidden by default (opacity 0
   + pointer-events none — it's decorative); the timeline controller
   fades it in when the tour starts, then sets style.transform =
   `translate(Xpx, Ypx)` on each step. CSS transition smooths the
   between-target glides; the cursor-state data attribute lets the
   click step trigger a quick scale-down pulse to mimic a real click. */
.hero-demo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  /* Off the cursor's own visual top-left so the pointer tip lands
     where transform: translate places it (the SVG path's hot point
     is at viewBox 1.5,1.5 ≈ ~10% inset). */
  margin: -2px 0 0 -2px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1),
              opacity 0.25s ease-out;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
  will-change: transform, opacity;
}

/* Applied during the intro step so the cursor can be placed at its
   starting position (over the Dashboard tab) instantly, without
   sliding diagonally from the default 0,0 origin. The controller
   adds this class, sets transform, forces a reflow, then removes
   the class — restoring transitions for all subsequent glides. */
.hero-demo-cursor--no-transition {
  transition: none !important;
}

.hero-demo-cursor[data-cursor-state="visible"],
.hero-demo-cursor[data-cursor-state="clicking"] {
  opacity: 1;
}

.hero-demo-cursor[data-cursor-state="clicking"] svg {
  animation: hero-demo-cursor-click 0.22s ease-out;
}

@keyframes hero-demo-cursor-click {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.78); }
  100% { transform: scale(1); }
}

/* Click ripple — an expanding circle that fades out behind the
   cursor on each click step, like the ripple on mobile OS clicks.
   The ::after pseudo sits centered on the cursor; it's invisible by
   default (opacity 0, scale 0) and animates on the cursor-state
   change. Origin is offset so the ripple emanates from the arrow's
   tip rather than the icon's bounding-box center. */
.hero-demo-cursor::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.35);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

.hero-demo-cursor[data-cursor-state="clicking"]::after {
  animation: hero-demo-cursor-ripple 0.35s ease-out;
}

@keyframes hero-demo-cursor-ripple {
  0%   { transform: scale(0);    opacity: 0.7; }
  60%  { transform: scale(2.4);  opacity: 0;   }
  100% { transform: scale(2.4);  opacity: 0;   }
}

/* When prefers-reduced-motion is set, the cursor never appears at all.
   The static Dashboard scene is what the user sees on load, and they
   can still click any nav button manually to switch scenes (the
   tab-switching wiring from steps 1+2 stays functional). */
@media (prefers-reduced-motion: reduce) {
  .hero-demo-cursor {
    display: none !important;
  }
}

/* App nav — module switcher across the top of the demo card. Mirrors
   the real application's global module nav (logo on the left, module
   links across the rest). Replaces the page-header chrome the demo
   used to have; each scene's own internal chrome (e.g., the Office
   Pipeline widget's title row) provides the equivalent of a page
   title when a scene needs one. */
.hero-demo-app-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

.hero-demo-app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-demo-app-brand svg {
  flex-shrink: 0;
}

.hero-demo-app-nav-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: auto;
}

.hero-demo-app-nav-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-500);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  /* Button reset — these are <button> elements (matches real-app
     markup) but the parent .hero-demo blocks pointer-events so they
     never receive user input. Stripping default button chrome so
     only the active/inactive modifiers control the visual. */
  background: transparent;
  border: 0;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hero-demo-app-nav-tab--active {
  color: var(--color-accent);
  background: var(--color-bg-accent);
  font-weight: 600;
}

/* Office Pipeline widget body — sits inside a card-like container with
   subtle gray app-background showing through the gap. */
.hero-demo-widget {
  padding: 0.875rem;
  background: var(--color-gray-50);
}

.hero-demo-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  flex-wrap: wrap;
}

.hero-demo-widget-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-900);
  letter-spacing: -0.005em;
}

/* View-switcher pills — Overview/Teams/Stages. Active pill is blue;
   inactive pills are neutral gray. Mirrors the real widget exactly. */
.hero-demo-view-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--color-white);
  padding: 0.1875rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.hero-demo-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-500);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  /* Button reset — tabs are <button> elements to match the real-app
     markup, but the parent .hero-demo blocks pointer-events so they
     never receive user input. Strip default chrome so the active /
     inactive modifiers fully control the visual. */
  background: transparent;
  border: 0;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hero-demo-view-tab--active {
  color: #1d4ed8;
  background: #dbeafe;
  font-weight: 600;
}

.hero-demo-view-tab svg {
  flex-shrink: 0;
}

/* Scene stack — all four module scenes share one CSS grid cell so
   the demo card sizes to the TALLEST scene (Dashboard) and stays
   that height as the cursor tour cycles through CRM/CMS/TM (which
   are individually shorter). Without this, the card visibly
   shrinks-and-grows on every scene switch, which reads as a layout
   glitch.

   Each scene gets the same grid-row/grid-column placement so they
   stack on top of each other. The browser's default `display: none`
   for `[hidden]` is overridden to `display: block` + visibility +
   opacity hiding instead — that way every scene still occupies the
   grid cell and contributes to track sizing, but only the
   non-hidden one is visible. */
.hero-demo-scenes {
  display: grid;
  grid-template-columns: 1fr;
}

[data-hero-demo-target="scene"] {
  grid-row: 1;
  grid-column: 1;
}

[data-hero-demo-target="scene"][hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

/* Soft fade-in on whichever view/scene container is currently
   visible. Same rule covers both — Office Pipeline view tabs and
   the top-level module-nav scenes — because both targets share the
   :not([hidden]) gate the controller drives. Fires once on first
   paint for the default Overview view + Dashboard scene; fires on
   every subsequent click-swap. */
[data-hero-demo-target="view"]:not([hidden]),
[data-hero-demo-target="scene"]:not([hidden]) {
  animation: hero-demo-view-fade-in 0.2s ease-out;
}

@keyframes hero-demo-view-fade-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-hero-demo-target="view"]:not([hidden]),
  [data-hero-demo-target="scene"]:not([hidden]) {
    animation: none;
  }
}

/* ─── CRM scene — People index ──────────────────────────────────
   Mirrors /crm/people exactly as a logged-in user sees it: tab
   strip with pill-style integrated counts, action toolbar with the
   selection counter + icon groups + filter button, and a multi-
   column table (Name / Email / Last Email / Last Call). Two of the
   real six columns (Phone Number, Last Text) are dropped to fit
   hero width. */
.hero-demo-crm {
  padding: 0.5rem 0.625rem 0.625rem;
  background: var(--color-bg-light);
}

/* Tab strip — five tabs with active state as a tinted-pill background
   (not an underline). Counts sit inline-after-label, not in a
   separate badge bubble. */
.hero-demo-crm-tabs {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-bottom: 0.5rem;
}

.hero-demo-crm-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  white-space: nowrap;
  border-radius: var(--radius-sm);
}

.hero-demo-crm-tab--active {
  background: var(--color-bg-accent);
  color: var(--color-accent);
  font-weight: 600;
}

.hero-demo-crm-tab--saved {
  margin-left: auto;
  color: var(--color-gray-500);
}

.hero-demo-crm-count {
  font-size: 0.625rem;
  color: var(--color-gray-500);
  font-weight: 500;
}

.hero-demo-crm-tab--active .hero-demo-crm-count {
  color: var(--color-accent);
}

/* Action toolbar — selection counter + two icon groups + right-side
   chips (All Accounts / Columns / Filter). Wraps gracefully at narrow
   widths; the Filter button stays solid-accent regardless. */
.hero-demo-crm-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.4375rem 0;
  margin-bottom: 0.5rem;
}

.hero-demo-crm-selection {
  font-size: 0.625rem;
  color: var(--color-accent);
  font-weight: 500;
  white-space: nowrap;
  margin-right: 0.125rem;
}

.hero-demo-crm-icon-group {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
}

.hero-demo-crm-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  background: var(--color-white);
}

.hero-demo-crm-iconbtn svg {
  flex-shrink: 0;
}

.hero-demo-crm-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.hero-demo-crm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.4375rem;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--color-gray-700);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.hero-demo-crm-filter-wrap {
  position: relative;
  display: inline-flex;
}

.hero-demo-crm-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Tooltip the auto-play tour reveals while the cursor hovers the
   Filter button. Hidden by default; data-tooltip-state="visible"
   fades it in. Small arrow points up via the ::before pseudo. */
.hero-demo-crm-tooltip {
  position: absolute;
  top: calc(100% + 0.4375rem);
  right: 0;
  z-index: 20;
  padding: 0.25rem 0.5rem;
  background: var(--color-gray-900);
  color: var(--color-white);
  font-size: 0.5625rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
  pointer-events: none;
}

.hero-demo-crm-tooltip::before {
  content: "";
  position: absolute;
  top: -3px;
  right: 8px;
  width: 6px;
  height: 6px;
  background: var(--color-gray-900);
  transform: rotate(45deg);
}

.hero-demo-crm-tooltip[data-tooltip-state="visible"] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-demo-crm-tooltip {
    transition: none;
  }
}

/* Table — header + rows. Five-column grid: checkbox / Name / Email
   / Last Email / Last Call. Min-content on first two so the avatar
   + name + checkbox don't get squeezed; the three trailing columns
   share the remaining space. */
.hero-demo-crm-table {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hero-demo-crm-tr {
  display: grid;
  grid-template-columns:
    auto                              /* checkbox */
    minmax(0, 1.2fr)                  /* name */
    minmax(0, 1.4fr)                  /* email */
    minmax(0, 1fr)                    /* last email */
    minmax(0, 0.9fr);                 /* last call */
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.5rem;
  border-bottom: 1px solid var(--color-gray-100);
}

.hero-demo-crm-tr:last-child {
  border-bottom: 0;
}

.hero-demo-crm-tr--head {
  background: var(--color-bg-light);
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--color-gray-200);
}

.hero-demo-crm-th {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-demo-crm-th svg {
  opacity: 0.7;
}

.hero-demo-crm-th--check,
.hero-demo-crm-td--check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-demo-crm-checkbox {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 2px;
  background: var(--color-white);
}

.hero-demo-crm-td {
  font-size: 0.625rem;
  color: var(--color-gray-700);
  min-width: 0;
}

.hero-demo-crm-td--email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-gray-600);
}

.hero-demo-crm-td--name {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
}

.hero-demo-crm-avatar {
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--color-bg-accent);
  color: var(--color-accent);
  font-size: 0.5625rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

.hero-demo-crm-name {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.hero-demo-crm-first {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.hero-demo-crm-last {
  font-size: 0.625rem;
  color: var(--color-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Activity columns (Last Email / Last Call) — label on top, relative
   time stamp underneath. "No Last Call." style rows get muted. */
.hero-demo-crm-td--activity {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.hero-demo-crm-activity-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-gray-700);
  line-height: 1.2;
}

.hero-demo-crm-activity-time {
  font-size: 0.5625rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.hero-demo-crm-td--muted {
  color: var(--color-gray-400);
  font-style: italic;
}

/* ─── CRM person detail (sub-scene) ─────────────────────────────
   Drill-in target when the cursor clicks a row in the CRM list.
   Mirrors the real /crm/people/:id show page at hero-card width:
   identity header + contact channels + communications tab strip +
   email composer preview + one email history row + module-counts
   grid + Details footer. Compressed version of the same shape used
   by .crm-person-* on the homepage product-demo row. */
.hero-demo-crm-person {
  padding: 0.5rem 0.625rem 0.625rem;
  background: var(--color-bg-light);
}

.hero-demo-crm-person-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.25rem;
}

.hero-demo-crm-person-avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-bg-accent);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.6875rem;
}

.hero-demo-crm-person-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-demo-crm-person-name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.2;
}

.hero-demo-crm-person-last-comm {
  margin: 0.125rem 0 0;
  font-size: 0.625rem;
  color: var(--color-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-demo-crm-person-last-comm strong {
  color: var(--color-accent);
  font-weight: 600;
}

.hero-demo-crm-person-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0.25rem 0 0.4375rem;
  padding: 0 0.25rem;
  list-style: none;
}

.hero-demo-crm-person-contacts li {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.625rem;
  color: var(--color-gray-600);
}

.hero-demo-crm-person-contacts svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

.hero-demo-crm-person-tabs {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.25rem 0;
  margin: 0 0.25rem 0.4375rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.hero-demo-crm-person-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.hero-demo-crm-person-tab--active {
  color: var(--color-accent);
  font-weight: 600;
  border-bottom-color: var(--color-accent);
}

.hero-demo-crm-person-composer {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin: 0 0.25rem 0.5rem;
  padding: 0.4375rem 0.5rem;
}

.hero-demo-crm-person-composer-row {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.625rem;
  color: var(--color-gray-700);
}

.hero-demo-crm-person-composer-label {
  color: var(--color-gray-500);
  font-weight: 500;
}

.hero-demo-crm-person-composer-via {
  margin-left: auto;
  font-size: 0.5625rem;
  color: var(--color-gray-500);
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-accent);
  color: var(--color-accent);
  font-weight: 600;
}

.hero-demo-crm-person-composer-subject {
  margin-top: 0.3125rem;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  color: var(--color-gray-400);
  font-style: italic;
}

.hero-demo-crm-person-history {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin: 0 0.25rem 0.5rem;
  padding: 0.4375rem 0.5rem;
}

.hero-demo-crm-person-history-head {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
  margin-bottom: 0.3125rem;
}

.hero-demo-crm-person-history-row {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.hero-demo-crm-person-history-from {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--color-bg-accent);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
}

.hero-demo-crm-person-history-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.hero-demo-crm-person-history-subject {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.hero-demo-crm-person-history-meta {
  font-size: 0.5625rem;
  color: var(--color-gray-500);
  line-height: 1.2;
}

.hero-demo-crm-person-modules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3125rem;
  margin: 0 0.25rem 0.4375rem;
  padding: 0;
  list-style: none;
}

.hero-demo-crm-person-modules li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.375rem 0.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
}

.hero-demo-crm-person-module-count {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.1;
}

.hero-demo-crm-person-module-label {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.0625rem;
}

.hero-demo-crm-person-details {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.375rem 0.4375rem;
  margin: 0 0.25rem;
  font-size: 0.625rem;
  color: var(--color-gray-700);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
}

.hero-demo-crm-person-details strong {
  color: var(--color-gray-500);
  font-weight: 600;
}

.hero-demo-crm-person-details-divider {
  color: var(--color-gray-300);
}

/* ─── CMS scene — Your Websites list ────────────────────────────
   Mirrors /cms/admin/websites index with status-filter tabs +
   site-row list. Same row-shape pattern as the CRM scene
   (icon / id / meta grid), but the leading element is a square
   rounded site-icon tile (not a circular avatar) — the real product
   uses tile-style site icons too. */
.hero-demo-cms {
  padding: 0.625rem 0.75rem 0.75rem;
}

.hero-demo-cms-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.hero-demo-cms-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.125rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-500);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.hero-demo-cms-tab--active {
  color: var(--color-accent);
  font-weight: 600;
  border-bottom-color: var(--color-accent);
}

.hero-demo-cms-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: 0.5625rem;
  font-weight: 600;
}

.hero-demo-cms-count--active {
  background: var(--color-bg-accent);
  color: var(--color-accent);
}

.hero-demo-cms-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-demo-cms-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.125rem;
  border-bottom: 1px solid var(--color-gray-100);
}

.hero-demo-cms-row:last-child {
  border-bottom: 0;
}

/* Square rounded tile with two-letter site initials. Color variants
   give each row a distinct anchor — brand uses the accent color (so
   the brokerage row is visually privileged), the four agent/office
   colors (blue / violet / amber / rose / cyan) match the palette
   already used for site-icon tiles in the landing-page CMS demos. */
.hero-demo-cms-icon {
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0;
}

.hero-demo-cms-icon--brand {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover, #0d9b8a) 100%);
}

.hero-demo-cms-icon--blue   { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.hero-demo-cms-icon--violet { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }
.hero-demo-cms-icon--amber  { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.hero-demo-cms-icon--rose   { background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); }
.hero-demo-cms-icon--cyan   { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); }

.hero-demo-cms-id {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.hero-demo-cms-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.hero-demo-cms-role {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  background: var(--color-gray-100);
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero-demo-cms-domain {
  font-size: 0.625rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-demo-cms-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  flex-shrink: 0;
}

.hero-demo-cms-status {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.125rem 0.4375rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Status modifiers map to Cms::Website.statuses (draft/published/archived). */
.hero-demo-cms-status--draft {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.hero-demo-cms-status--published {
  background: #d1fae5;
  color: #065f46;
}

.hero-demo-cms-status--archived {
  background: #fee2e2;
  color: #991b1b;
}

.hero-demo-cms-time {
  font-size: 0.625rem;
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}

/* ─── TM scene — Envelopes index ────────────────────────────────
   Mirrors /tm/envelopes index, same design language as the
   /features/tm hero demo (_tm_landing_hero) but sized for hero-
   card width. Tab strip on top, then a 2×3 grid of envelope cards
   each carrying the distinctive "envelope flap" triangle clip-path
   that visually anchors the card as an "envelope" not just a
   generic tile. The CRM and CMS scenes use list-row layouts; this
   one breaks the rhythm intentionally because envelopes are the
   most visually distinctive object in the product. */
.hero-demo-tm {
  padding: 0.625rem 0.75rem 0.75rem;
}

.hero-demo-tm-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.hero-demo-tm-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.125rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-500);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.hero-demo-tm-tab--active {
  color: var(--color-accent);
  font-weight: 600;
  border-bottom-color: var(--color-accent);
}

.hero-demo-tm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: 0.5625rem;
  font-weight: 600;
}

.hero-demo-tm-count--active {
  background: var(--color-bg-accent);
  color: var(--color-accent);
}

/* 2-column card grid. Each card has the envelope flap at the top
   (clip-path triangle), title, transaction link, expires line, and
   a footer with status pill + doc count. Same shape as the
   landing-page _tm_landing_hero cards just smaller. */
.hero-demo-tm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.hero-demo-tm-card {
  position: relative;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding-top: 0.5rem;
}

/* Envelope flap — diagonal triangle peeking down from the top edge.
   Implemented as an absolutely-positioned overlay with clip-path so
   the card body content sits visually "underneath" the flap. */
.hero-demo-tm-card-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.625rem;
  background: var(--color-bg-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.hero-demo-tm-card-body {
  padding: 0.5rem 0.5rem 0.4375rem;
}

.hero-demo-tm-card-title {
  margin: 0 0 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.hero-demo-tm-card-link {
  margin: 0;
  font-size: 0.5625rem;
  color: var(--color-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.hero-demo-tm-card-expires {
  margin: 0.125rem 0 0.375rem;
  font-size: 0.5625rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.hero-demo-tm-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding-top: 0.375rem;
  border-top: 1px solid var(--color-gray-200);
}

.hero-demo-tm-card-pill {
  font-size: 0.5rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Pill modifiers map to Tm::Envelope.statuses (draft/sent/expired/completed). */
.hero-demo-tm-card-pill--draft {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.hero-demo-tm-card-pill--sent {
  background: var(--color-bg-accent);
  color: var(--color-accent);
}

.hero-demo-tm-card-pill--expired {
  background: #fee2e2;
  color: #991b1b;
}

.hero-demo-tm-card-pill--completed {
  background: #d1fae5;
  color: #065f46;
}

.hero-demo-tm-card-docs {
  font-size: 0.5rem;
  color: var(--color-gray-500);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Account chip row — teal-dot pill on left, deal summary on right. */
.hero-demo-widget-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 0.625rem;
}

.hero-demo-widget-account-name {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

.hero-demo-widget-account-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.hero-demo-widget-account-meta {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}

/* Stat-card grid — real widget renders these 4-wide; we fold to 2×2 so
   the cards don't go unreadably narrow inside the hero column. Each card
   gets its own color tint that matches the production widget (blue / green
   / purple / orange). */
.hero-demo-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.hero-demo-stat-card {
  padding: 0.5rem 0.625rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.hero-demo-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
}

.hero-demo-stat-header svg {
  flex-shrink: 0;
}

.hero-demo-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gray-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Per-card tinted variants — colors picked to match the Radix-based ZUI
   blue/green/purple/orange scales used by the production widget. */
.hero-demo-stat-card--blue {
  background: #eff6ff;
  border-color: #c7d2fe;
  color: #1d4ed8;
}

.hero-demo-stat-card--green {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.hero-demo-stat-card--purple {
  background: #faf5ff;
  border-color: #e9d5ff;
  color: #7c3aed;
}

.hero-demo-stat-card--orange {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

/* Team table — Team / Deals / Pipeline Value / Conversion. Uses a CSS
   grid so columns align cleanly across header + body rows. */
.hero-demo-team-table {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hero-demo-team-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 0.375rem;
  padding: 0.4375rem 0.625rem;
  font-size: 0.6875rem;
  color: var(--color-gray-700);
  border-bottom: 1px solid var(--color-gray-100);
  align-items: center;
}

.hero-demo-team-table-row:last-child {
  border-bottom: 0;
}

.hero-demo-team-table-row > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hero-demo-team-table-row > span:nth-child(2) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.hero-demo-team-table-row > span:nth-child(3),
.hero-demo-team-table-row > span:nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hero-demo-team-table-row--head {
  background: var(--color-gray-50);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: none;
  border-bottom: 1px solid var(--color-gray-200);
}

/* Teams view — agent breakdown. The summary line sits above the agent
   table and gives the scope + period filter pill (mirrors the real
   widget's "Last 90 days" affordance). */
.hero-demo-teams-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
}

.hero-demo-teams-scope {
  color: var(--color-gray-600);
  font-weight: 500;
}

.hero-demo-teams-period {
  padding: 0.125rem 0.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  color: var(--color-gray-500);
  font-weight: 500;
  white-space: nowrap;
}

/* Agent column needs a wider first-column allocation than the Office
   column in the Overview view, because agent rows pair an avatar with
   a longer name string. */
.hero-demo-team-table--agents .hero-demo-team-table-row {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 0.8fr);
}

.hero-demo-agent-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
}

.hero-demo-agent-cell > :last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hero-demo-agent-avatar {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-bg-accent);
  color: var(--color-accent);
  font-size: 0.5625rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

/* Stages view — cross-tabulation of teams × pipeline stages. Compact
   7-column grid so the team name + five stages + row total fit at hero
   column width. Non-zero counts get circular accent badges (real
   widget pattern); zero cells show a muted dash. The totals row and
   totals column both use bold weight, and the grand total at the
   bottom-right gets the strongest emphasis from the combined active
   states. */
.hero-demo-stages-table {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hero-demo-stages-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)) minmax(0, 0.9fr);
  gap: 0.25rem;
  padding: 0.4375rem 0.5rem;
  font-size: 0.6875rem;
  color: var(--color-gray-700);
  border-bottom: 1px solid var(--color-gray-100);
  align-items: center;
}

.hero-demo-stages-row:last-child {
  border-bottom: 0;
}

.hero-demo-stages-row > span {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.hero-demo-stages-row > span:first-child {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 500;
}

.hero-demo-stages-row--head {
  background: var(--color-gray-50);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  border-bottom: 1px solid var(--color-gray-200);
}

.hero-demo-stages-row--head > span:first-child {
  font-weight: 600;
}

/* Circular accent badge for non-zero stage counts. Same color family
   as .hero-demo-agent-avatar so the demo reads as one design system
   across the three views. */
.hero-demo-stages-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-bg-accent);
  color: var(--color-accent);
  font-size: 0.625rem;
  font-weight: 600;
}

.hero-demo-stages-zero {
  color: var(--color-gray-300);
  font-weight: 500;
}

.hero-demo-stages-total {
  font-weight: 700;
  color: var(--color-gray-900);
}

.hero-demo-stages-row--total {
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 0;
}

.hero-demo-stages-row--total > span:first-child {
  font-weight: 700;
  color: var(--color-gray-900);
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}

/* At narrow viewports, tighten paddings + drop type a half-step so the
   stat grid stays 2×2 without breaking. Don't collapse to one column —
   the visual story (4 metrics + table) is the whole point. */
@media (max-width: 640px) {
  .hero-demo-widget {
    padding: 0.75rem;
  }

  .hero-demo-stat-card {
    padding: 0.4375rem 0.5rem;
  }

  .hero-demo-stat-value {
    font-size: 0.9375rem;
  }

  .hero-demo-team-table-row {
    font-size: 0.625rem;
    padding: 0.375rem 0.5rem;
  }

  .hero-demo-stages-row {
    font-size: 0.625rem;
    padding: 0.375rem 0.375rem;
    gap: 0.125rem;
  }

  .hero-demo-stages-count {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.5625rem;
  }

  .hero-demo-crm {
    padding: 0.4375rem 0.5rem 0.5rem;
  }

  .hero-demo-crm-tr {
    gap: 0.3125rem;
    padding: 0.375rem 0.4375rem;
  }

  .hero-demo-crm-avatar {
    width: 1.4375rem;
    height: 1.4375rem;
  }

  .hero-demo-crm-first {
    font-size: 0.625rem;
  }

  .hero-demo-crm-iconbtn {
    width: 1.25rem;
    height: 1.25rem;
  }

  .hero-demo-cms {
    padding: 0.5rem 0.625rem 0.625rem;
  }

  .hero-demo-cms-row {
    gap: 0.375rem;
    padding: 0.375rem 0.125rem;
  }

  .hero-demo-cms-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .hero-demo-cms-name {
    font-size: 0.6875rem;
  }

  .hero-demo-tm {
    padding: 0.5rem 0.625rem 0.625rem;
  }

  .hero-demo-tm-grid {
    gap: 0.4375rem;
  }

  .hero-demo-tm-card-body {
    padding: 0.4375rem 0.4375rem 0.375rem;
  }

  .hero-demo-tm-card-title {
    font-size: 0.625rem;
  }
}

/* ============================================================================
   Products Overview — Per-product HTML demos
   Each row in the "Everything You Need to Run Your Brokerage" section gets
   its own pure-HTML demo card in place of the static product screenshot.
   The .product-demo-* rules below are the shared frame; per-product internals
   (.crm-person-*, .cms-builder-*, .tm-envelope-*) live in their own blocks.
   ============================================================================ */

.product-demo {
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.product-demo-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-bg-light);
}

.product-demo-brand-mark {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.product-demo-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-900);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.product-demo-pill {
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-demo-pill--green {
  background: #d1fae5;
  color: #065f46;
}

.product-demo-pill--accent {
  background: var(--color-bg-accent);
  color: var(--color-accent);
}

.product-demo-pill--gray {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.product-demo-body {
  padding: 1rem;
}

/* ----------------------------------------------------------------------------
   CRM person-snapshot internals
   ---------------------------------------------------------------------------- */
.crm-person-top {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1rem;
}

.crm-person-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-light) 100%);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.crm-person-id {
  flex: 1;
  min-width: 0;
}

.crm-person-name {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
  letter-spacing: -0.01em;
}

.crm-person-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.crm-person-contacts li {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.crm-person-contacts svg {
  width: 0.8125rem;
  height: 0.8125rem;
  flex-shrink: 0;
  color: var(--color-gray-400);
}

.crm-person-contacts li span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Last Communication" line — matches the real product's exact phrasing
   "Last Communication: <Channel> on <Date>". Sits between identity and
   the communications tabs. */
.crm-person-last-comm {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.crm-person-last-comm strong {
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Communications tabs strip — Email / Calls / Text / Notes (active = Email).
   Real page has six tabs; shown four for hero width. Underline-tab style
   matches the real product's tab pattern. */
.crm-person-comm-tabs {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid var(--color-gray-100);
}

.crm-person-comm-tab {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-500);
  padding-bottom: 0.4375rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: default;
}

.crm-person-comm-tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Email History row — one recent email shown as sender → recipient,
   subject, source badge, time. Real product has Email History below
   the composer; demo shows just one row at hero size. */
.crm-person-email-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  margin-bottom: 0.875rem;
}

.crm-person-email-row-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}

.crm-person-email-row-icon svg {
  width: 0.75rem;
  height: 0.75rem;
}

.crm-person-email-row-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.crm-person-email-row-subject {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-person-email-row-from {
  font-size: 0.625rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-person-email-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  flex-shrink: 0;
}

.crm-person-email-row-source {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-bg-accent);
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-person-email-row-time {
  font-size: 0.625rem;
  color: var(--color-gray-400);
  font-variant-numeric: tabular-nums;
}

/* Module counts strip — represents the right-sidebar modules on the real
   page (Tasks / Appointments / Documents / Deals / Collaborators /
   Action Plan, each with a count). 4-up grid showing the most active
   modules. */
.crm-person-modules {
  list-style: none;
  margin: 0 0 0.875rem 0;
  padding: 0.5rem;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
}

.crm-person-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  text-align: center;
  min-width: 0;
}

.crm-person-module-count {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.crm-person-module-label {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Details footer — Stage + Timeframe, matching the real product's
   "Details" sidebar section at the bottom of the left column. */
.crm-person-details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--color-gray-100);
  font-size: 0.6875rem;
  flex-wrap: wrap;
}

.crm-person-detail {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3125rem;
}

.crm-person-detail-label {
  font-weight: 500;
  color: var(--color-gray-500);
}

.crm-person-detail-value {
  font-weight: 600;
  color: var(--color-gray-900);
}

.crm-person-detail-divider {
  color: var(--color-gray-300);
}

/* ----------------------------------------------------------------------------
   CMS website-preview internals
   "Browser frame" + a faux real-estate site (nav, hero with search, three
   listing cards). Listing-image gradients stand in for property photos
   without shipping any image assets — keeps the demo fully self-contained.
   ---------------------------------------------------------------------------- */
.cms-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

.cms-browser-dots {
  display: flex;
  gap: 0.3125rem;
  flex-shrink: 0;
}

.cms-browser-dots span {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-gray-200);
}

.cms-browser-dots span:nth-child(1) { background: #ff5f57; }
.cms-browser-dots span:nth-child(2) { background: #febc2e; }
.cms-browser-dots span:nth-child(3) { background: #28c840; }

.cms-browser-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-browser-url svg {
  width: 0.6875rem;
  height: 0.6875rem;
  flex-shrink: 0;
  color: var(--color-gray-400);
}

.cms-site-preview {
  background: var(--color-white);
}

.cms-site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--color-gray-100);
}

.cms-site-logo {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-gray-900);
}

.cms-site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.875rem;
  margin-left: auto;
}

.cms-site-nav ul li {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-600);
}

.cms-site-hero {
  padding: 1.25rem 1rem;
  text-align: center;
  background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-bg-accent) 100%);
}

.cms-site-hero-title {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gray-900);
  letter-spacing: -0.01em;
}

.cms-site-hero-sub {
  margin: 0 0 0.625rem 0;
  font-size: 0.6875rem;
  color: var(--color-gray-600);
}

.cms-site-search {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 0.25rem;
  max-width: 18rem;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}

.cms-site-search-placeholder {
  flex: 1;
  text-align: left;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  color: var(--color-gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-site-search-cta {
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: calc(var(--radius-md) - 2px);
  white-space: nowrap;
  flex-shrink: 0;
}

.cms-site-section-label {
  padding: 0.875rem 1rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cms-site-listings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}

.cms-listing-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}

.cms-listing-image {
  aspect-ratio: 4 / 3;
  background: var(--color-gray-100);
}

.cms-listing-image--a {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
}

.cms-listing-image--b {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
}

.cms-listing-image--c {
  background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
}

.cms-listing-info {
  padding: 0.4375rem 0.5rem 0.5rem;
}

.cms-listing-price {
  margin: 0 0 0.0625rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gray-900);
  font-variant-numeric: tabular-nums;
}

.cms-listing-meta {
  margin: 0;
  font-size: 0.625rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------------------------
   TM envelope-detail internals (homepage product demo)
   Mirrors the real envelope show page at
   packages/tm/app/views/tm/envelopes/show.html.erb. Three regions in the
   body: metadata bar (linked-to + expires + counts), document tile, and
   recipients section with accent-stripe + numbered cards from the real
   _recipient.html.erb partial.
   ---------------------------------------------------------------------------- */

/* Metadata bar — linked-to-transaction, expiration, recipient/document
   counts. Sits below the header, matching the real show page's
   metadata strip. */
.tm-envelope-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: 0.875rem;
  font-size: 0.6875rem;
  color: var(--color-gray-600);
}

.tm-envelope-meta-row {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.tm-envelope-meta-row svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  color: var(--color-gray-400);
}

.tm-envelope-meta-row strong {
  color: var(--color-gray-900);
  font-weight: 600;
}

.tm-envelope-meta-counts {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-top: 0.4375rem;
  border-top: 1px solid var(--color-gray-200);
}

.tm-envelope-meta-count {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-gray-500);
}

.tm-envelope-meta-count svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color-gray-400);
}

/* Document tile. Real show page renders the full document_grid partial;
   demo shows a single representative tile at hero size. */
.tm-envelope-document {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 0.875rem;
}

.tm-envelope-document-icon {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}

.tm-envelope-document-icon svg {
  width: 1rem;
  height: 1rem;
}

.tm-envelope-document-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tm-envelope-document-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-envelope-document-meta {
  font-size: 0.625rem;
  color: var(--color-gray-500);
}

/* Recipients section. Each card has the colored accent stripe on the
   left edge from packages/tm/app/views/tm/recipients/_recipient.html.erb
   line 8 (`absolute w-2.5 rounded-l-lg h-full`) — a distinctive visual
   cue from the real product. Numbered when signing order is set. */
.tm-envelope-recipients-heading {
  margin: 0 0 0.5rem 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tm-envelope-recipients-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.tm-envelope-recipient {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tm-envelope-recipient-stripe {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.25rem;
  height: 100%;
  background: var(--color-accent);
}

.tm-envelope-recipient-num {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--color-bg-accent);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.tm-envelope-recipient-avatar {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-light) 100%);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.tm-envelope-recipient-id {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tm-envelope-recipient-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-envelope-recipient-email {
  font-size: 0.625rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-envelope-recipient-role {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ============================================================================
   Dark Mode — MVP variable overrides
   The pre-paint script in layouts/public_pages.html.erb sets [data-theme] on
   <html> before the stylesheet loads, so the right colors apply on first
   paint. Toggling is handled by app/javascript/controllers/marketing_theme_controller.js.

   Strategy: invert the gray scale and flip --color-white → near-black so
   any rule that uses the existing brand vars adapts automatically. This is
   ~80% of marketing.css. The remaining hardcoded hex values inside specific
   rules (gradients, badge color literals) will need per-section iteration.
   Brand --color-accent and --color-primary-light stay (teal reads on both
   light and dark backgrounds); --color-primary becomes its lighter variant
   in dark mode for contrast.
   ============================================================================ */
:root[data-theme="dark"] {
  /* Surface scale — inverted */
  --color-white: #0a0a0a;
  --color-gray-50: #141414;
  --color-gray-100: #1f1f1f;
  --color-gray-120: #232323;
  --color-gray-200: #2a2a2a;
  --color-gray-300: #404040;
  --color-gray-400: #737373;

  /* Text scale — also inverted, so existing dark-text-on-light-bg rules
     become light-text-on-dark-bg without changing class names. */
  --color-gray-500: #a3a3a3;
  --color-gray-600: #d4d4d4;
  --color-gray-700: #e5e5e5;
  --color-gray-800: #f0f0f0;
  --color-gray-900: #fafafa;

  /* Brand-tinted backgrounds — dark teal tints. */
  --color-bg-light: #0d2120;
  --color-bg-accent: #0e2a27;

  /* Bump primary to its lighter variant for contrast on dark surfaces.
     Hover and dark variants are darkened versions, which would disappear
     on a near-black background — give them lighter equivalents instead. */
  --color-primary: #12a594;
  --color-primary-hover: #1ac6af;
  --color-primary-dark: #0a857a;
}

/* Smooth the swap when the user toggles. Pre-paint script avoids the
   first-paint flash; this just makes the click-toggle feel intentional
   instead of jarring. */
html[data-theme] body,
html[data-theme] .marketing-header,
html[data-theme] section {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body,
  html[data-theme] .marketing-header,
  html[data-theme] section {
    transition: none;
  }
}

/* Theme toggle — track-style switch with sliding thumb + tooltip.
   Sits in .nav-actions next to Login/Sign Up. Both sun and moon icons
   are visible on the track; the thumb (sliding circle) covers the
   active-theme icon to indicate current state, leaving the OPPOSITE
   icon visible as a hint of where clicking will take you. Click is
   wired in marketing_theme_controller.js. */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.theme-toggle:focus-visible {
  outline: none;
}

.theme-toggle:focus-visible .theme-toggle-track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Track — pill background. Subtle gray-tinted in light mode; deeper
   gray in dark mode. Width gives the thumb room to slide between two
   icon positions. */
.theme-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 3.25rem;
  height: 1.625rem;
  padding: 0 0.1875rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

:root[data-theme="dark"] .theme-toggle-track {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.theme-toggle:hover .theme-toggle-track {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.38);
}

:root[data-theme="dark"] .theme-toggle:hover .theme-toggle-track {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Sun + moon icons sit in the track at fixed positions. The active-theme
   icon (the one the thumb is covering) gets full opacity; the inactive
   one is dimmed so it reads as "click here to switch to that mode". */
.theme-toggle-icon {
  position: absolute;
  top: 50%;
  width: 0.875rem;
  height: 0.875rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  transition: opacity 0.2s ease, color 0.2s ease;
  pointer-events: none;
  z-index: 2;
}

.theme-toggle-icon svg {
  width: 100%;
  height: 100%;
}

.theme-toggle-icon--sun {
  left: 0.3125rem;
  color: #fbbf24;
  opacity: 1;
}

.theme-toggle-icon--moon {
  right: 0.3125rem;
  opacity: 0.55;
}

/* In dark mode the moon is the active icon, the sun is the hint. */
:root[data-theme="dark"] .theme-toggle-icon--sun {
  opacity: 0.5;
}

:root[data-theme="dark"] .theme-toggle-icon--moon {
  color: #cbd5e1;
  opacity: 1;
}

/* Sliding thumb — sits OVER the active icon. transform: translateX
   moves it between the sun (left) and moon (right) positions. */
.theme-toggle-thumb {
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
  z-index: 1;
}

:root[data-theme="dark"] .theme-toggle-thumb {
  transform: translate(1.625rem, -50%);
  background: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Tooltip — appears below the toggle on hover/focus. Text swaps based on
   current theme via the ::before content trick on [data-theme]. */
.theme-toggle-tooltip {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 0.3125rem 0.625rem;
  background: var(--color-gray-900);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 100;
}

.theme-toggle-tooltip::before {
  content: "Switch to dark mode";
}

:root[data-theme="dark"] .theme-toggle-tooltip::before {
  content: "Switch to light mode";
}

/* Tooltip arrow — small triangle pointing up at the toggle. */
.theme-toggle-tooltip::after {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  border: 0.25rem solid transparent;
  border-top: 0;
  border-bottom-color: var(--color-gray-900);
}

.theme-toggle:hover .theme-toggle-tooltip,
.theme-toggle:focus-visible .theme-toggle-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip should adapt to dark mode too. */
:root[data-theme="dark"] .theme-toggle-tooltip {
  background: #f1f5f9;
  color: #0f172a;
}

:root[data-theme="dark"] .theme-toggle-tooltip::after {
  border-bottom-color: #f1f5f9;
}

/* Reduce motion preference — drop the slide / fade animations. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-track,
  .theme-toggle-thumb,
  .theme-toggle-icon,
  .theme-toggle-tooltip {
    transition: none;
  }
}

/* ----------------------------------------------------------------------------
   CRM landing hero — People-index demo internals
   Sits inside the shared .product-demo scaffold (no .product-demo-header
   any more — the tab strip is the page chrome, matching how the real
   /crm/people page renders). Five tabs with pill-style integrated counts,
   action toolbar with selection counter + icon groups + dropdown chips +
   filled Filter button, then the six-column table (Name / Email / Phone
   Number / Last Email / Last Text / Last Call). Same design language as
   the homepage hero demo's CRM scene (.hero-demo-crm-*), sized for the
   landing-page column so all six real columns fit.
   ---------------------------------------------------------------------------- */

/* Scene container — pale-mint background matches the real /crm/people
   page's surface tone. */
.product-demo--crm-people {
  background: var(--color-bg-light);
}

.product-demo--crm-people > .crm-people-tabs,
.product-demo--crm-people > .crm-people-toolbar,
.product-demo--crm-people > .crm-people-table {
  margin: 0 0.875rem;
}

.product-demo--crm-people > .crm-people-tabs {
  margin-top: 0.875rem;
}

.product-demo--crm-people > .crm-people-table {
  margin-bottom: 0.875rem;
}

/* Tab strip — five tabs, active gets a tinted-pill background (not an
   underline). Counts sit inline-after-label, no separate badge. */
.crm-people-tabs {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  margin-bottom: 0.625rem;
}

.crm-people-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-gray-700);
  border-radius: var(--radius-md);
  white-space: nowrap;
  cursor: default;
}

.crm-people-tab--active {
  background: var(--color-bg-accent);
  color: var(--color-accent);
  font-weight: 600;
}

.crm-people-tab--saved {
  margin-left: auto;
  color: var(--color-gray-500);
}

.crm-people-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}

.crm-people-tab--active .crm-people-count {
  color: var(--color-accent);
}

/* Action toolbar — selection counter + two icon groups + right-side
   chips/filter button. Sits on a single row at landing-page width. */
.crm-people-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.625rem;
  margin-bottom: 0.625rem;
}

.crm-people-selection {
  font-size: 0.75rem;
  color: var(--color-accent);
  font-weight: 500;
  white-space: nowrap;
  margin-right: 0.25rem;
}

.crm-people-icon-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.crm-people-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  background: var(--color-white);
}

.crm-people-iconbtn svg {
  flex-shrink: 0;
}

.crm-people-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-left: auto;
}

.crm-people-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.3125rem 0.5625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.crm-people-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.6875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Table — six-column grid (checkbox + Name + Email + Phone + Last Email
   + Last Text + Last Call). Wrapped in a white card so the surface
   stands out from the pale-mint scene background. */
.crm-people-table {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.crm-people-tr {
  display: grid;
  grid-template-columns:
    auto                              /* checkbox */
    minmax(0, 1.2fr)                  /* name */
    minmax(0, 1.6fr)                  /* email */
    minmax(0, 1fr)                    /* phone */
    minmax(0, 1.1fr)                  /* last email */
    minmax(0, 1.1fr)                  /* last text */
    minmax(0, 1fr);                   /* last call */
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-gray-100);
}

.crm-people-tr:last-child {
  border-bottom: 0;
}

.crm-people-tr--head {
  background: var(--color-bg-light);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-gray-200);
  padding: 0.5rem 0.875rem;
}

.crm-people-th {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-people-th svg {
  opacity: 0.7;
}

.crm-people-th--check,
.crm-people-td--check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.crm-people-checkbox {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 3px;
  background: var(--color-white);
}

.crm-people-td {
  font-size: 0.75rem;
  color: var(--color-gray-700);
  min-width: 0;
}

.crm-people-td--email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-gray-600);
}

.crm-people-td--name {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

/* Avatar — bigger than the hero demo's compact version (2rem vs 1.625rem)
   since the landing page has room for it. Solid accent-bg fill matches
   what the real product renders. */
.crm-people-avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-bg-accent);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0;
}

.crm-people-namegroup {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.crm-people-first {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.crm-people-last {
  font-size: 0.75rem;
  color: var(--color-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Activity columns (Last Email / Last Text / Last Call) — label on top,
   relative time stamp underneath. Muted style for empty rows. */
.crm-people-td--activity {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.crm-people-activity-label {
  font-size: 0.75rem;
  color: var(--color-gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.crm-people-activity-time {
  font-size: 0.6875rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.crm-people-td--muted {
  color: var(--color-gray-400);
  font-style: italic;
  font-size: 0.75rem;
}

/* ----------------------------------------------------------------------------
   TM landing hero — Envelopes-index demo internals
   Sits inside the shared .product-demo / .product-demo-header scaffold.
   Tab strip (filtered counts), then a list of envelope rows with PDF icon,
   transaction context, status pill, and time. Pill colors span the
   realistic envelope lifecycle: green=completed, accent=in-progress,
   amber=awaiting, red-tinted=expired.
   ---------------------------------------------------------------------------- */
.tm-envelopes-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem 0;
  border-bottom: 1px solid var(--color-gray-100);
  overflow-x: auto;
}

.tm-envelopes-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.625rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gray-500);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: default;
}

.tm-envelopes-tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.tm-envelopes-tab-count {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  background: var(--color-gray-100);
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}

.tm-envelopes-tab-count--active {
  color: var(--color-accent);
  background: var(--color-bg-accent);
}

/* 2x2 card grid mirroring the real envelopes index layout
   (packages/tm/app/views/tm/envelopes/index.html.erb uses a 1/2/3-col
   responsive grid; we cap at 2 columns at hero size). Each card has
   the distinctive envelope-flap triangle at the top, copying the
   clip-path trick from packages/tm/app/views/tm/envelopes/_envelope.html.erb. */
.tm-envelopes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  padding: 0.75rem;
}

.tm-envelope-card {
  position: relative;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-envelope-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

/* Envelope flap — triangle clipped from a colored strip at the top.
   Matches the clip-path: polygon(0 0, 50% 100%, 100% 0) trick from the
   real product partial. */
.tm-envelope-card-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5rem;
  background: var(--color-bg-accent);
  border-bottom: 1px solid var(--color-bg-light);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  z-index: 1;
}

.tm-envelope-card-body {
  position: relative;
  padding: 1.75rem 0.625rem 0.625rem;
  z-index: 2;
}

.tm-envelope-card-title {
  margin: 0 0 0.1875rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-envelope-card-link,
.tm-envelope-card-expires {
  margin: 0 0 0.1875rem 0;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.625rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-envelope-card-link svg,
.tm-envelope-card-expires svg {
  width: 0.6875rem;
  height: 0.6875rem;
  flex-shrink: 0;
  color: var(--color-gray-400);
}

.tm-envelope-card-footer {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.5rem;
  padding-top: 0.4375rem;
  border-top: 1px solid var(--color-gray-100);
  flex-wrap: wrap;
}

.tm-envelope-card-pill {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Status colors map to Tm::Envelope.statuses. */
.tm-envelope-card-pill--completed {
  background: #d1fae5;
  color: #065f46;
}

.tm-envelope-card-pill--sent {
  background: var(--color-bg-accent);
  color: var(--color-accent);
}

.tm-envelope-card-pill--draft {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.tm-envelope-card-pill--expired {
  background: #fee2e2;
  color: #991b1b;
}

.tm-envelope-card-docs {
  font-size: 0.5625rem;
  color: var(--color-gray-500);
  font-weight: 500;
  white-space: nowrap;
}

.tm-envelope-card-created {
  margin-left: auto;
  font-size: 0.5625rem;
  color: var(--color-gray-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   CMS landing hero — Multi-site list demo internals
   Sits inside the shared .product-demo / .product-demo-header scaffold.
   Filter strip then a list of website rows with site initials in a colored
   tile, name + role, domain, status pill (Published / Draft), and a
   last-edit timestamp.
   ---------------------------------------------------------------------------- */
.cms-sites-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem 0;
  border-bottom: 1px solid var(--color-gray-100);
  overflow-x: auto;
}

.cms-sites-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.625rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gray-500);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: default;
}

.cms-sites-tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.cms-sites-tab-count {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  background: var(--color-gray-100);
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}

.cms-sites-tab-count--active {
  color: var(--color-accent);
  background: var(--color-bg-accent);
}

.cms-sites-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cms-site-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--color-gray-100);
}

.cms-site-row:last-child {
  border-bottom: 0;
}

.cms-site-icon {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-md);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.cms-site-icon--brand {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-light) 100%);
}

.cms-site-icon--blue {
  background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%);
}

.cms-site-icon--violet {
  background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
}

.cms-site-icon--amber {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
}

.cms-site-icon--rose {
  background: linear-gradient(135deg, #fda4af 0%, #f43f5e 100%);
}

.cms-site-id {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cms-site-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-site-role {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-gray-400);
  margin-left: 0.25rem;
}

.cms-site-domain {
  font-size: 0.6875rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-site-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cms-site-status {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.1875rem 0.4375rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.cms-site-status--published {
  background: #d1fae5;
  color: #065f46;
}

.cms-site-status--draft {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.cms-site-time {
  font-size: 0.625rem;
  color: var(--color-gray-400);
  font-variant-numeric: tabular-nums;
  min-width: 1.5rem;
  text-align: right;
}

/* ----------------------------------------------------------------------------
   TM landing — Transaction-detail demo internals
   Sits inside the shared .product-demo / .product-demo-header scaffold.
   Three regions in the body: workflow stages bar at the top, a fields grid
   in the middle, and Documents / Parties panes at the bottom.
   ---------------------------------------------------------------------------- */
.tm-transaction-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Workflow stages — horizontal connected list with done / current / future
   states. Connecting line drawn via a pseudo-element on each list item. */
.tm-transaction-workflow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.5rem;
}

.tm-transaction-stage {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  color: var(--color-gray-500);
  min-width: 0;
  position: relative;
}

.tm-transaction-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.25rem;
  width: 0.25rem;
  height: 1px;
  background: var(--color-gray-200);
  transform: translateY(-50%);
}

.tm-transaction-stage:last-child::after {
  display: none;
}

.tm-transaction-stage-marker {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-white);
}

.tm-transaction-stage-marker svg {
  width: 0.5rem;
  height: 0.5rem;
}

.tm-transaction-stage--done {
  color: var(--color-gray-700);
}

.tm-transaction-stage--done .tm-transaction-stage-marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.tm-transaction-stage--current {
  color: var(--color-accent);
  font-weight: 600;
}

.tm-transaction-stage--current .tm-transaction-stage-marker {
  background: var(--color-white);
  border-color: var(--color-accent);
  border-width: 2px;
  box-shadow: 0 0 0 3px var(--color-bg-accent);
}

.tm-transaction-stage-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.6875rem;
  font-weight: 500;
}

.tm-transaction-stage--current .tm-transaction-stage-label {
  font-weight: 600;
}

/* Fields grid — four mini "label / value" cells. */
.tm-transaction-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.tm-transaction-field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.tm-transaction-field-label {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tm-transaction-field-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-transaction-field-value--num {
  font-variant-numeric: tabular-nums;
}

/* Documents / Parties panes side by side. On narrow widths they stack
   one above the other so neither pane gets crushed. */
.tm-transaction-panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

@media (max-width: 540px) {
  .tm-transaction-panes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tm-transaction-pane {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.75rem;
}

.tm-transaction-pane-heading {
  margin: 0 0 0.5rem 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tm-transaction-pane-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.tm-transaction-pane-list li {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.6875rem;
  color: var(--color-gray-700);
  min-width: 0;
}

.tm-transaction-pane-icon {
  width: 0.8125rem;
  height: 0.8125rem;
  flex-shrink: 0;
  color: var(--color-gray-400);
}

.tm-transaction-pane-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.tm-transaction-pane-pill {
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tm-transaction-pane-pill--green {
  background: #d1fae5;
  color: #065f46;
}

.tm-transaction-pane-pill--amber {
  background: #fef3c7;
  color: #92400e;
}

.tm-transaction-pane-pill--gray {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

.tm-transaction-party-avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-light) 100%);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.tm-transaction-party-role {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   TM landing — E-Signature setup demo internals
   Sits inside the shared .product-demo / .product-demo-header scaffold.
   Three regions: document chip at the top, settings rows (signing order
   toggle + expiry), then a numbered recipients list.
   ---------------------------------------------------------------------------- */
.tm-esignature-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tm-esignature-doc {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.tm-esignature-doc-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}

.tm-esignature-doc-icon svg {
  width: 1rem;
  height: 1rem;
}

.tm-esignature-doc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tm-esignature-doc-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-esignature-doc-sub {
  font-size: 0.625rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Settings rows — label on the left, control / value on the right. */
.tm-esignature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.25rem;
}

.tm-esignature-row-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-500);
}

.tm-esignature-row-value {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  font-variant-numeric: tabular-nums;
}

/* "Set signing order" checkbox affordance — matches the single checkbox
   pattern at packages/tm/app/views/tm/recipients/_recipients.html.erb
   line 2, not a two-state segmented toggle. */
.tm-esignature-row-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  cursor: default;
}

.tm-esignature-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 0.1875rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  flex-shrink: 0;
}

.tm-esignature-checkbox svg {
  width: 0.625rem;
  height: 0.625rem;
  color: var(--color-white);
  opacity: 0;
}

.tm-esignature-checkbox--checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.tm-esignature-checkbox--checked svg {
  opacity: 1;
}

/* Recipients ordered list. Each row carries a sequence-number badge so the
   "Sequential" signing order is visible at a glance. */
.tm-esignature-recipients-heading {
  margin: 0.25rem 0 0.375rem 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tm-esignature-recipients-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.tm-esignature-recipients-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
}

.tm-esignature-recipient-num {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--color-bg-accent);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.tm-esignature-recipient-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-light) 100%);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.tm-esignature-recipient-id {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tm-esignature-recipient-name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-esignature-recipient-email {
  font-size: 0.625rem;
  color: var(--color-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-esignature-recipient-role {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   TM landing — Pipeline Stages settings demo internals
   Sits inside the shared .product-demo / .product-demo-header scaffold.
   Two regions: transaction-type tab strip at the top, then a list of
   stage rows with drag handle, sequence number, color dot, name, and
   "in this stage right now" deal count.
   ---------------------------------------------------------------------------- */
.tm-stages-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem 0;
  border-bottom: 1px solid var(--color-gray-100);
  overflow-x: auto;
}

.tm-stages-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.75rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gray-500);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: default;
}

.tm-stages-tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.tm-stages-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.5rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tm-stages-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tm-stages-row:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-200);
}

.tm-stages-handle {
  width: 0.875rem;
  height: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-gray-300);
  cursor: grab;
}

.tm-stages-handle svg {
  width: 0.875rem;
  height: 0.875rem;
}

.tm-stages-num {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.tm-stages-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.tm-stages-dot--gray {
  background: var(--color-gray-400);
}

.tm-stages-dot--accent {
  background: var(--color-accent);
}

.tm-stages-dot--amber {
  background: #f59e0b;
}

.tm-stages-dot--green {
  background: #10b981;
}

.tm-stages-name {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tm-stages-name-meta {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 0.375rem;
}

.tm-stages-count {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  background: var(--color-gray-50);
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
  min-width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   TM landing — Analytics dashboard demo internals
   Mirrors packages/tm/app/views/tm/analytics/show.html.erb. Five regions:
   period filter pills (in header), top metric strip, Transactions by
   Status count-card grid, Pipeline by Stage list, Checklist Health
   4-cell breakdown + progress bar.
   ---------------------------------------------------------------------------- */

/* Period filter pills — sit in the product-demo header alongside the title. */
.tm-analytics-periods {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
}

.tm-analytics-period {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  padding: 0.1875rem 0.4375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.tm-analytics-period--active {
  background: var(--color-bg-accent);
  color: var(--color-accent);
}

.tm-analytics-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* KPI strip — four cards. First two on bg-accent, last two on bg-green
   (matches real view's color split between Active/Pipeline-Value and
   Closed/Commission). */
.tm-analytics-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.tm-analytics-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  min-width: 0;
}

.tm-analytics-kpi--accent {
  background: var(--color-bg-accent);
  border-color: var(--color-bg-light);
}

.tm-analytics-kpi--green {
  background: #ecfdf5;
  border-color: #d1fae5;
}

.tm-analytics-kpi-head {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}

.tm-analytics-kpi-head svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.tm-analytics-kpi--accent .tm-analytics-kpi-head svg,
.tm-analytics-kpi--accent .tm-analytics-kpi-label {
  color: var(--color-accent);
}

.tm-analytics-kpi--green .tm-analytics-kpi-head svg,
.tm-analytics-kpi--green .tm-analytics-kpi-label {
  color: #065f46;
}

.tm-analytics-kpi-label {
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tm-analytics-kpi-value {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.tm-analytics-kpi--accent .tm-analytics-kpi-value {
  color: var(--color-accent);
}

.tm-analytics-kpi--green .tm-analytics-kpi-value {
  color: #065f46;
}

/* Section wrapper. */
.tm-analytics-section-heading {
  margin: 0 0 0.4375rem 0;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Status grid — count cards, one per Tm::Transaction.statuses value.
   Real view loops over the enum; demo uses 4 representative values. */
.tm-analytics-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4375rem;
}

.tm-analytics-status-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.0625rem;
  padding: 0.4375rem 0.25rem;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.tm-analytics-status-num {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.tm-analytics-status-label {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Pipeline by Stage — color dot + name + count list. Real view uses the
   per-account Tm::TransactionStage record's color attribute; demo
   hardcodes a representative spread. */
.tm-analytics-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.tm-analytics-stages li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.tm-analytics-stage-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.tm-analytics-stage-name {
  flex: 1;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tm-analytics-stage-count {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* Checklist Health — 4-cell grid (Total / Completed / Overdue /
   Completion %) plus a progress bar underneath. Matches the real
   view's structure. */
.tm-analytics-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.tm-analytics-health-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.0625rem;
  text-align: center;
}

.tm-analytics-health-num {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-gray-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.tm-analytics-health-num--green {
  color: #10b981;
}

.tm-analytics-health-num--red {
  color: #ef4444;
}

.tm-analytics-health-num--accent {
  color: var(--color-accent);
}

.tm-analytics-health-label {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tm-analytics-health-bar {
  height: 0.4375rem;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.tm-analytics-health-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-full);
}

/* ============================================================================
   Dark mode — decorative gradient overrides (Bucket D)
   The CMS demo's listing-image tiles (_cms_product_demo) and the multi-site
   icon tiles (_cms_landing_hero) use saturated brand-adjacent gradients
   (blue / amber / violet / rose) that look great on a light page but pop
   too brightly on a dark one. Redefining each with a deeper, more muted
   variant keeps the visual variety (you can still tell the tiles apart at
   a glance) without the dark-mode brightness mismatch.

   filter: brightness/saturate wasn't an option for the site icons because
   they have white initials on top — dimming the filter dims the text too.
   So each gradient gets a full dark-mode redefine instead.
   ============================================================================ */
:root[data-theme="dark"] .cms-listing-image--a {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
}

:root[data-theme="dark"] .cms-listing-image--b {
  background: linear-gradient(135deg, #5a3a0b 0%, #78350f 100%);
}

:root[data-theme="dark"] .cms-listing-image--c {
  background: linear-gradient(135deg, #3b1f78 0%, #4c1d95 100%);
}

:root[data-theme="dark"] .cms-site-icon--blue {
  background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%);
}

:root[data-theme="dark"] .cms-site-icon--violet {
  background: linear-gradient(135deg, #3b1f78 0%, #6d28d9 100%);
}

:root[data-theme="dark"] .cms-site-icon--amber {
  background: linear-gradient(135deg, #5a3a0b 0%, #b45309 100%);
}

:root[data-theme="dark"] .cms-site-icon--rose {
  background: linear-gradient(135deg, #5f1e2a 0%, #be123c 100%);
}

/* ============================================================================
   Dark-mode text overrides for fixed-dark brand sections
   The footer, CTA strips, hero section, and TM document-management section
   all use `background: var(--gradient-primary), ...` — a fixed dark teal
   brand gradient that stays DARK in both light and dark modes (it's not a
   surface variable, so dark-mode inversion doesn't touch it).

   Text in those sections uses `color: var(--color-white)` or inherits the
   body's gray-scale color. Both of those flip from light → dark in dark
   mode, leaving the text dark-on-dark on these still-dark gradient
   backgrounds. The footer column headings, link items, paragraph copy,
   and CTA strip headline all become unreadable.

   Forcing literal #ffffff in dark mode for the specific text contexts
   inside these known fixed-dark sections. Buttons inside them have their
   own background + color rules and aren't touched (selector targets
   typography elements, not .btn / button).
   ============================================================================ */
:root[data-theme="dark"] .company-footer,
:root[data-theme="dark"] .company-footer h1,
:root[data-theme="dark"] .company-footer h2,
:root[data-theme="dark"] .company-footer h3,
:root[data-theme="dark"] .company-footer h4,
:root[data-theme="dark"] .company-footer h5,
:root[data-theme="dark"] .company-footer h6,
:root[data-theme="dark"] .company-footer p,
:root[data-theme="dark"] .company-footer span,
:root[data-theme="dark"] .company-footer li,
:root[data-theme="dark"] .cta-title,
:root[data-theme="dark"] .cta-subtitle,
:root[data-theme="dark"] .cta-footer-section h1,
:root[data-theme="dark"] .cta-footer-section h2,
:root[data-theme="dark"] .cta-footer-section h3,
:root[data-theme="dark"] .cta-footer-section h4,
:root[data-theme="dark"] .cta-footer-section p,
:root[data-theme="dark"] .hero-section h1,
:root[data-theme="dark"] .hero-section .hero-title,
:root[data-theme="dark"] .hero-section .hero-subtitle,
:root[data-theme="dark"] .hero-section p,
:root[data-theme="dark"] .hero-section span:not(.text-accent),
:root[data-theme="dark"] .footer-bg-image h1,
:root[data-theme="dark"] .footer-bg-image h2,
:root[data-theme="dark"] .footer-bg-image h3,
:root[data-theme="dark"] .footer-bg-image p,
:root[data-theme="dark"] .footer-bg-image li {
  color: #ffffff !important;
}

/* Footer links keep slight transparency for visual hierarchy, matching
   the light-mode rgba(255, 255, 255, 0.8) pattern already in use. */
:root[data-theme="dark"] .company-footer a,
:root[data-theme="dark"] .company-footer .footer-links a {
  color: rgba(255, 255, 255, 0.85) !important;
}

:root[data-theme="dark"] .company-footer a:hover,
:root[data-theme="dark"] .company-footer .footer-links a:hover {
  color: #ffffff !important;
}