/* 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;
}

/* CRM page specific font sizes - balanced for readability */
.crm-landing-page .content-title {
  font-size: 2.25rem; /* 36px - better balance for line breaks */
}

/* 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: 1rem;
  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-4xl);
  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%;
  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;
}

/* Page chrome — mirrors Zui::PageHeader: title left, action button right. */
.hero-demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

.hero-demo-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-gray-900);
  letter-spacing: -0.01em;
}

.hero-demo-add-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-bg-accent);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.hero-demo-add-widget svg {
  flex-shrink: 0;
}

/* 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;
}

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

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

/* 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);
}

/* 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;
  }
}

/* ============================================================================
   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-list demo internals
   Sits inside the shared .product-demo / .product-demo-header scaffold.
   Tab strip then a borderless list of contact rows with avatar + identity
   + stage pill + last-contact timestamp. Stage pill colors match the hero
   pipeline demo (gray=new, accent=qualified, green=closed) so the visual
   vocabulary is consistent across the homepage and feature pages.
   ---------------------------------------------------------------------------- */
.crm-people-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;
}

.crm-people-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;
}

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

.crm-people-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;
}

.crm-people-tab-count--active {
  color: var(--color-accent);
  background: var(--color-bg-accent);
}

.crm-people-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crm-people-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--color-gray-100);
}

.crm-people-row:last-child {
  border-bottom: 0;
}

.crm-people-row .crm-people-avatar {
  width: 1.875rem;
  height: 1.875rem;
  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.6875rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.crm-people-id {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

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

.crm-people-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.crm-people-stage {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.1875rem 0.4375rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Stage modifiers map to Crm::Stage::DEFAULT_STAGES (Lead / Closed / Trash). */
.crm-people-stage--lead {
  background: var(--color-bg-accent);
  color: var(--color-accent);
}

.crm-people-stage--closed {
  background: #d1fae5;
  color: #065f46;
}

.crm-people-stage--trash {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

.crm-people-time {
  font-size: 0.625rem;
  color: var(--color-gray-400);
  font-variant-numeric: tabular-nums;
  min-width: 1.5rem;
  text-align: right;
}

/* ----------------------------------------------------------------------------
   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;
}