/* Homepage-specific overrides - most styles now in marketing.css */
  body {
  	overflow-x: hidden;
  	position: relative;
  }

  html {
  	overflow-x: hidden;
  }

/* Hero section using patterns style */
.home-hero {
	padding-top: calc(var(--nav-height) + var(--space-12));
	padding-bottom: 0;
	background: transparent;
	text-align: center;
	position: relative;
	overflow: hidden;
	z-index: 1;
	border-bottom: 1px solid var(--border-default);
}

  /* Subtle shadow at bottom of hero section */
  .home-hero::after {
  	content: '';
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	height: 60px;
  	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
  	pointer-events: none;
  	z-index: 2;
  }

  .section {
  	position: relative;
  	z-index: 1;
  	background: transparent;
  }

  /* Homepage-specific override: wider hero demo */
  .hero-demo {
  	max-width: 900px;
  	animation: slideUpFromBottom 0.6s ease-out 0.2s both;
  }

  @keyframes slideUpFromBottom {
  	0% {
  		opacity: 0;
  		transform: translateY(40px);
  	}

  	100% {
  		opacity: 1;
  		transform: translateY(0);
  	}
  }

  /* Hero label animations - minimal staggered entrance */
  .hero-label-ask {
  	animation: labelFadeIn 0.5s ease-out 0.5s both;
  }

  .hero-label-get {
  	animation: labelFadeIn 0.5s ease-out 0.7s both;
  }

  @keyframes labelFadeIn {
  	0% {
  		opacity: 0;
  		transform: translateY(10px);
  	}

  	100% {
  		opacity: 1;
  		transform: translateY(0);
  	}
  }

  /* Homepage carousel spacing overrides */
  .template-carousel-v2 .slider-wrapper {
  	margin-top: var(--space-6);
  }

  /* Remove corner wraps (rounded corners) from template sections */
  .template-twocol,
  .template-carousel {
  	border-radius: 0 !important;
  }

  /* Unified section header widths - all left-aligned headers same width */
  .twocol-header,
  .template-carousel-title {
  	max-width: 640px;
  }

  /* NLP Section Header Layout - Full Width */
  .twocol-header-container-full {
  	width: 100%;
  	margin-bottom: var(--space-16);
  }

  /* Channels section - uses base twocol-header styling */

  /* Why Manager Boost - channel-focused copy block with generous spacing */
  #channels-section .why-points {
  	margin-top: var(--space-10);
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-8);
  }

  /* Two-column grid for first two why-points */
  #channels-section .why-points-grid {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: var(--space-10);
  }

  /* Mobile channel descriptions - hidden on desktop */
  .channel-descriptions-mobile {
  	display: none;
  }

  @media (max-width: 768px) {
  	#channels-section .why-points {
  		margin-top: var(--space-6);
  		gap: var(--space-5);
  	}

  	#channels-section .why-points-grid {
  		grid-template-columns: 1fr;
  		gap: var(--space-4);
  	}

  	#channels-section .why-point-title {
  		font-size: 0.875rem;
  		margin-bottom: var(--space-1);
  	}

  	#channels-section .why-point-desc {
  		font-size: 0.8125rem;
  	}

  	/* Hide desktop why-points on mobile */
  	#channels-section .why-points {
  		display: none;
  	}

  	/* Show mobile channel descriptions */
  	.channel-descriptions-mobile {
  		display: block;
  		margin-bottom: var(--space-5);
  	}

  	.channel-desc {
  		display: none;
  	}

  	.channel-desc.active {
  		display: block;
  	}

  	.channel-desc-title {
  		font-size: 1rem;
  		font-weight: 600;
  		color: var(--text-primary);
  		margin-bottom: var(--space-2);
  	}

  	.channel-desc-text {
  		font-size: var(--font-size-sm);
  		color: var(--text-secondary);
  		line-height: var(--line-height-loose);
  	}
  }

  @media (max-width: 480px) {
  	#channels-section .why-points {
  		margin-top: var(--space-5);
  		gap: var(--space-4);
  	}

  	#channels-section .why-points-grid {
  		gap: var(--space-3);
  	}

  	/* Mobile channel descriptions - smaller screens */
  	.channel-descriptions-mobile {
  		margin-bottom: var(--space-4);
  	}
  }

  #channels-section .why-point {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-2);
  }

  #channels-section .why-point i {
  	font-size: var(--font-size-lg);
  	color: var(--blue-400);
  	margin-top: 2px;
  	flex-shrink: 0;
  }

  #channels-section .why-point-title {
  	font-size: 1rem;
  	font-weight: 600;
  	color: var(--text-primary);
  	letter-spacing: var(--letter-spacing-normal);
  	margin-bottom: var(--space-2);
  }

  #channels-section .why-point-desc {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  }

  /* Channels section content spacing */
  #channels-section .twocol-item h3 {
  	margin-bottom: var(--space-4);
  }

  #channels-section .twocol-item>p {
  	margin-bottom: var(--space-2);
  }

  /* Governance & Business Requirements Sections - Stat Cards (Stripe-style, full width) */
  /* Governance section layout */
  #governance-section .governance-demo {
  	margin-bottom: 0;
  }

  #governance-section .feature-image {
  	position: relative;
  	width: 100%;
  	border-radius: var(--radius-xl);
  	overflow: visible;
  	margin-top: auto;
  }

  #governance-section .feature-image img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  }

  /* Governance stat-row layout */
  #governance-section .stat-row {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: 0;
  }

  #governance-section .stat-half {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: var(--space-10);
  	position: relative;
  }

  #governance-section .stat-half:first-child {
  	padding-right: var(--space-4);
  }

  #governance-section .stat-half:last-child {
  	padding-left: 0;
  }

  #governance-section .stat-half:last-child::before {
  	content: '';
  	position: absolute;
  	left: 0;
  	top: 0;
  	height: 1rem;
  	width: 1px;
  	background: var(--blue-500);
  }

  #governance-section .stat-half:last-child::after {
  	content: '';
  	position: absolute;
  	left: 0;
  	top: 1rem;
  	bottom: 0;
  	width: 1px;
  	background: rgba(255, 255, 255, 0.08);
  }

  #governance-section .stat-card {
  	position: relative;
  	padding-left: var(--space-8);
  }

  #governance-section .stat-half:last-child .stat-card:first-child::before,
  #governance-section .stat-half:last-child .stat-card:first-child::after {
  	display: none;
  }

  #governance-section .stat-cards,
  #business-requirements-section .stat-cards {
  	display: grid;
  	grid-template-columns: repeat(4, 1fr);
  	gap: var(--space-12);
  	margin-top: var(--space-12);
  }

  #governance-section .stat-card,
  #business-requirements-section .stat-card {
  	position: relative;
  	padding-left: var(--space-5);
  }

  #governance-section .stat-card::before,
  #business-requirements-section .stat-card::before {
  	content: '';
  	position: absolute;
  	left: 0;
  	top: 0;
  	height: 1rem;
  	width: 1px;
  	background: var(--blue-500);
  }

  #governance-section .stat-card::after,
  #business-requirements-section .stat-card::after {
  	content: '';
  	position: absolute;
  	left: 0;
  	top: 1rem;
  	bottom: 0;
  	width: 1px;
  	background: rgba(255, 255, 255, 0.08);
  }

  #governance-section .stat-card-title,
  #business-requirements-section .stat-card-title {
  	font-size: var(--font-size-xl);
  	font-weight: 600;
  	color: var(--blue-400);
  	margin-bottom: var(--space-4);
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  }

  #governance-section .stat-card-desc,
  #business-requirements-section .stat-card-desc {
  	font-size: 1rem;
  	color: var(--text-primary);
  	line-height: var(--line-height-loose);
  	margin-bottom: var(--space-2);
  }

  /* Business Requirements - Feature Row (50/50 split, gap instead of divider) */
  #business-requirements-section .feature-row {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: var(--space-20);
  	margin-bottom: var(--space-20);
  	position: relative;
  }

  /* Business requirements feature columns - matches channels-card-wrapper pattern */
  #business-requirements-section .feature-col {
  	display: flex;
  	flex-direction: column;
  }

  #business-requirements-section .feature-col .rc-row-label {
  	margin-bottom: var(--space-5);
  }

  #business-requirements-section .feature-col h3 {
  	font-size: var(--font-size-2xl);
  	font-weight: 600;
  	color: var(--text-primary);
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  	margin-bottom: var(--space-5);
  }

  #business-requirements-section .feature-col p {
  	font-size: var(--font-size-base);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  	margin-bottom: var(--space-2);
  }

  #business-requirements-section .feature-placeholder {
  	width: 100%;
  	aspect-ratio: 16 / 7;
  	background: rgba(59, 130, 246, 0.08);
  	border: 1px dashed rgba(59, 130, 246, 0.3);
  	border-radius: var(--radius-xl);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	color: var(--text-muted);
  	font-size: var(--font-size-sm);
  	margin-top: auto;
  }

  #business-requirements-section .feature-image {
  	position: relative;
  	width: 100%;
  	aspect-ratio: 16 / 9;
  	border-radius: var(--radius-xl);
  	overflow: hidden;
  	margin-top: auto;
  	border: 1px solid rgba(255, 255, 255, 0.1);
  	box-shadow:
  		0 20px 40px -12px rgba(0, 0, 0, 0.5),
  		0 0 30px rgba(59, 130, 246, 0.08);
  	transition: transform 150ms ease-out, box-shadow 150ms ease-out;
  }

  #business-requirements-section .feature-image:hover {
  	transform: translateY(-3px);
  	box-shadow:
  		0 24px 48px -12px rgba(0, 0, 0, 0.6),
  		0 0 40px rgba(59, 130, 246, 0.12);
  }

  #business-requirements-section .feature-image img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	object-position: center center;
  }

  /* Left column image (scenario.jpg) - focus on laptop screen */
  #business-requirements-section .feature-col:first-child .feature-image img {
  	object-position: 40% 50%;
  }

  /* Right column image (pdf-report.jpg) - focus on phone */
  #business-requirements-section .feature-col:last-child .feature-image img {
  	object-position: center 30%;
  }

  /* Stat Row - 50/50 split, no gap, borders align with center divider */
  #business-requirements-section .stat-row {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: 0;
  }

  #business-requirements-section .stat-half {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: var(--space-10);
  	position: relative;
  }

  /* First stat-half has padding-right for breathing room */
  #business-requirements-section .stat-half:first-child {
  	padding-right: var(--space-4);
  }

  /* Second stat-half - no extra padding, first card uses stat-half border */
  #business-requirements-section .stat-half:last-child {
  	padding-left: 0;
  }

  /* Stat-half border - solid blue at top */
  #business-requirements-section .stat-half:last-child::before {
  	content: '';
  	position: absolute;
  	left: 0;
  	top: 0;
  	height: 1rem;
  	width: 1px;
  	background: var(--blue-500);
  }

  /* Thin subtle line below */
  #business-requirements-section .stat-half:last-child::after {
  	content: '';
  	position: absolute;
  	left: 0;
  	top: 1rem;
  	bottom: 0;
  	width: 1px;
  	background: rgba(255, 255, 255, 0.08);
  }

  #business-requirements-section .stat-card {
  	position: relative;
  	padding-left: var(--space-10);
  }

  /* Stat card border - uses shared styles from above */

  /* Remove border from first card in second half - stat-half provides it */
  #business-requirements-section .stat-half:last-child .stat-card:first-child::before,
  #business-requirements-section .stat-half:last-child .stat-card:first-child::after {
  	display: none;
  }

  @media (max-width: 768px) {
  	#business-requirements-section .feature-row {
  		grid-template-columns: 1fr;
  		gap: var(--space-12);
  	}

  	#business-requirements-section .stat-row {
  		grid-template-columns: 1fr;
  		gap: var(--space-10);
  	}

  	#business-requirements-section .stat-half {
  		grid-template-columns: 1fr;
  		gap: var(--space-8);
  	}

  	#business-requirements-section .stat-half:first-child,
  	#business-requirements-section .stat-half:last-child {
  		padding-right: 0;
  		padding-left: 0;
  	}

  	#business-requirements-section .stat-half:last-child::before {
  		display: none;
  	}
  }

  @media (min-width: 769px) and (max-width: 1024px) {
  	#business-requirements-section .stat-half {
  		grid-template-columns: 1fr;
  		gap: var(--space-6);
  	}
  }

  /* Governance section responsive */
  @media (max-width: 768px) {
  	.governance-demo {
  		gap: var(--space-8);
  		padding: var(--space-8);
  		padding-bottom: var(--space-6);
  	}

  	.governance-mockups {
  		grid-template-columns: 1fr;
  		gap: var(--space-4);
  	}

  	/* Keep stat cards in 2 columns */
  	#governance-section .stat-row {
  		grid-template-columns: 1fr 1fr;
  		gap: var(--space-4);
  	}

  	#governance-section .stat-half {
  		grid-template-columns: 1fr;
  		gap: var(--space-4);
  	}

  	#governance-section .stat-half:first-child,
  	#governance-section .stat-half:last-child {
  		padding-right: 0;
  		padding-left: 0;
  	}

  	#governance-section .stat-half:last-child::before,
  	#governance-section .stat-half:last-child::after {
  		display: none;
  	}

  	.governance-text h3 {
  		font-size: var(--font-size-xl);
  	}
  }

  @media (max-width: 480px) {
  	.governance-demo {
  		padding: var(--space-6);
  		padding-bottom: var(--space-6);
  	}

  	.governance-mockups {
  		grid-template-columns: 1fr;
  		gap: var(--space-4);
  	}

  	.governance-text h3 {
  		font-size: var(--font-size-lg);
  	}

  	.governance-text p {
  		font-size: var(--font-size-sm);
  	}

  	/* Still keep stat cards 2 columns */
  	#governance-section .stat-row {
  		grid-template-columns: 1fr 1fr;
  		gap: var(--space-3);
  	}

  	#governance-section .stat-half {
  		gap: var(--space-3);
  	}
  }

  @media (min-width: 769px) and (max-width: 1024px) {
  	#governance-section .stat-half {
  		grid-template-columns: 1fr;
  		gap: var(--space-6);
  	}
  }

  /* Platform pill for Platforms section */
  .solution-pill-platform {
  	background: rgba(59, 130, 246, 0.15);
  	color: var(--blue-400);
  	border: 1px solid rgba(59, 130, 246, 0.25);
  }


  /* Solution pill variants for Use Cases */
  .solution-pill-sales {
  	background: rgba(52, 211, 153, 0.15);
  	color: var(--emerald-400);
  	border: 1px solid rgba(52, 211, 153, 0.25);
  }

  .solution-pill-leadership {
  	background: rgba(168, 85, 247, 0.15);
  	color: var(--purple-400);
  	border: 1px solid rgba(168, 85, 247, 0.25);
  }

  .solution-pill-operations {
  	background: rgba(251, 146, 60, 0.15);
  	color: var(--orange-400);
  	border: 1px solid rgba(251, 146, 60, 0.25);
  }

  /* ============================================
     USE CASES SLIDER
     ============================================ */
.use-cases-slider-section {
	padding-top: var(--space-36);
	padding-bottom: var(--space-36);
	overflow-x: hidden;
}

  /* Slider wrapper */
  .use-cases-slider-wrapper {
  	position: relative;
  	overflow: hidden;
  	margin-top: var(--space-6);
  	width: 100%;
  	max-width: 100%;
  }

  .use-cases-slider-track {
  	display: flex;
  	gap: var(--space-12);
  	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  	width: 100%;
  }

  /* Each slide - full width, two column layout */
  .use-cases-slide {
  	flex: 0 0 100%;
  	min-width: 0;
  	width: 100%;
  	max-width: 100%;
  	box-sizing: border-box;
  	display: grid;
  	grid-template-columns: 1fr 1.5fr;
  	gap: var(--space-16);
  	align-items: start;
  	background: var(--charcoal-800);
  	border: 1px solid var(--border-subtle);
  	border-top: 1px solid var(--blue-500);
  	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  	padding: var(--space-12) var(--space-16) var(--space-16);
  	overflow: hidden;
  	min-height: 520px;
  }

  /* Slide header (left column) - matches channels-card-wrapper pattern */
  .use-cases-slide-header {
  	display: flex;
  	flex-direction: column;
  	max-width: 480px;
  }

  .use-cases-slide-header .rc-row-label,
  .use-cases-slide-header .solution-pill {
  	margin-bottom: var(--space-5);
  }

  .use-cases-slide-header h4 {
  	font-size: var(--font-size-2xl);
  	font-weight: 600;
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  	color: var(--text-primary);
  	margin: 0;
  	margin-bottom: var(--space-3);
  }

  .use-cases-slide-header p {
  	font-size: var(--font-size-base);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  	margin: 0;
  	margin-bottom: var(--space-2);
  }

  /* Slide grid (right column) - align to top */
  .use-cases-slide-grid {
  	display: grid;
  	grid-template-columns: 1fr;
  	gap: var(--space-5);
  	align-content: start;
  }

  .use-cases-slide-grid-3 {
  	grid-template-columns: 1fr;
  }

  /* Grid items - clean link style */
  .use-cases-grid-item {
  	display: flex;
  	align-items: center;
  	gap: var(--space-6);
  	padding: var(--space-6) var(--space-8);
  	background: rgba(255, 255, 255, 0.02);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-md);
  	text-decoration: none;
  	transition: all 0.2s ease;
  }

  .use-cases-grid-item:hover {
  	background: rgba(59, 130, 246, 0.08);
  	border-color: rgba(59, 130, 246, 0.3);
  }

  .use-cases-item-icon {
  	width: 44px;
  	height: 44px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	background: rgba(59, 130, 246, 0.1);
  	border-radius: var(--radius-md);
  	flex-shrink: 0;
  }

  .use-cases-item-icon i {
  	font-size: 1.375rem;
  	color: var(--blue-400);
  }

  .use-cases-item-content {
  	flex: 1;
  }

  .use-cases-item-content h5 {
  	font-size: 1.0625rem;
  	font-weight: 600;
  	color: var(--text-primary);
  	margin: 0 0 var(--space-2) 0;
  }

  .use-cases-item-content p {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	margin: 0;
  	line-height: var(--line-height-loose);
  }

  .use-cases-item-arrow {
  	color: var(--text-muted);
  	font-size: var(--font-size-lg);
  	flex-shrink: 0;
  	transition: all 0.2s ease;
  }

  .use-cases-grid-item:hover .use-cases-item-arrow {
  	color: var(--blue-400);
  	transform: translateX(4px);
  }

  /* Informational grid items - non-clickable, display only */
  .use-cases-grid-item-info {
  	cursor: default;
  }

  .use-cases-grid-item-info:hover {
  	background: rgba(255, 255, 255, 0.02);
  	border-color: var(--border-subtle);
  }

  @media (max-width: 900px) {
  	.use-cases-slide {
  		grid-template-columns: 1fr;
  		gap: var(--space-6);
  		padding: var(--space-6);
  		align-content: start;
  	}

  	.use-cases-slider-track {
  		gap: var(--space-8);
  	}

  	/* Slider wrapper - closer to controls */
  	.use-cases-slider-wrapper {
  		margin-top: var(--space-6);
  	}
  }

@media (max-width: 768px) {
	.use-cases-slider-section {
		padding-top: var(--space-16);
		padding-bottom: var(--space-16);
	}

  	.use-cases-slide {
  		padding: var(--space-8);
  		gap: var(--space-5);
  		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  		align-content: start;
  	}

  	.use-cases-slider-wrapper {
  		margin-top: var(--space-6);
  	}

  	.use-cases-grid-item {
  		padding: var(--space-3);
  	}
  }

@media (max-width: 480px) {
	.use-cases-slider-section {
		padding-top: var(--space-12);
		padding-bottom: var(--space-12);
	}

  	.use-cases-slide {
  		padding: var(--space-6);
  		gap: var(--space-4);
  		align-content: start;
  	}

  	.use-cases-slider-wrapper {
  		margin-top: var(--space-6);
  	}
  }

  /* Governance demo wrapper card - matches channels-card-wrapper pattern */
  .governance-demo {
  	background: var(--charcoal-800);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-lg);
  	padding: var(--space-8);
  	padding-bottom: var(--space-6);
  	overflow: hidden;
  	position: relative;
  }

  /* Top: Text content - matches channels-card-wrapper pattern */
  .governance-text {
  	display: flex;
  	flex-direction: column;
  	max-width: 680px;
  }

  .governance-text .rc-row-label {
  	margin-bottom: var(--space-5);
  }

  .governance-text h3 {
  	font-size: var(--font-size-2xl);
  	font-weight: 600;
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  	color: var(--text-primary);
  	margin: 0;
  	margin-bottom: var(--space-5);
  }

  .governance-text p {
  	font-size: var(--font-size-base);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  	margin: 0;
  	margin-bottom: var(--space-8);
  }

  /* Bottom: Side by side mockups */
  .governance-mockups {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: var(--space-8);
  }

  /* Both mockups flush to bottom of governance-demo card */
  .governance-mockups {
  	margin-bottom: calc(-1 * var(--space-6));
  }

  .governance-mockups .macos-window {
  	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  	border-bottom: none;
  }

  .governance-mockups .governance-response-macos {
  	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  	border-bottom: none;
  }

  @media (max-width: 768px) {
  	.governance-mockups {
  		grid-template-columns: 1fr;
  		gap: var(--space-4);
  	}

  	.governance-mockups .macos-window.macos-flush-bottom {
  		border-radius: var(--radius-xl);
  		border-bottom: 1px solid var(--border-default);
  	}

  	.governance-mockups .governance-response-macos {
  		margin-bottom: calc(-1 * var(--space-6));
  	}

  	.governance-mockups .governance-response-macos .macos-content {
  		padding-bottom: var(--space-10);
  	}
  }

  .governance-mockups .macos-window {
  	flex: 0 0 auto;
  }

  .governance-mockups .macos-content {
  	padding: var(--space-6);
  	padding-bottom: var(--space-6);
  	justify-content: flex-start;
  	gap: var(--space-5);
  }

  .governance-mockups .showcase-input {
  	margin-bottom: 0;
  }

  /* Make the mockup fill remaining height */
  .response-panel .showcase-window {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  }

  .response-panel .showcase-content {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  	justify-content: flex-start;
  	padding: var(--space-6);
  	padding-bottom: var(--space-16);
  }

  /* SQL panel styling */
  .sql-panel .sql-backdrop {
  	padding: var(--space-6);
  	background: rgba(0, 0, 0, 0.3);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-lg);
  }

  .sql-code {
  	display: block;
  	font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  	font-size: var(--font-size-sm);
  	line-height: var(--line-height-loose);
  	color: rgba(255, 255, 255, 0.7);
  	white-space: pre-wrap;
  	letter-spacing: var(--letter-spacing-tight);
  }

  .sql-code .sql-keyword {
  	color: var(--blue-400);
  }

  /* Mockup window */
  .governance-demo .showcase-window {
  	position: relative;
  	width: 100%;
  	background: rgba(17, 19, 32, 0.4);
  	backdrop-filter: blur(4px);
  	-webkit-backdrop-filter: blur(4px);
  	border: 1px solid var(--border-hover);
  	border-bottom: none;
  	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  	box-shadow:
  		0 20px 40px rgba(0, 0, 0, 0.2),
  		inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .governance-label {
  	position: absolute;
  	display: flex;
  	align-items: center;
  	gap: var(--space-2);
  	z-index: 10;
  	top: 106px;
  	left: 340px;
  	flex-direction: row;
  	justify-content: flex-start;
  }

  .governance-label .handwritten-text {
  	font-family: 'Kalam', 'Bradley Hand', 'Brush Script MT', 'Segoe Script', cursive;
  	font-size: clamp(1.125rem, 2vw, 1.5rem);
  	font-weight: 400;
  	color: var(--text-primary);
  	white-space: nowrap;
  }

  .governance-label .hero-arrow {
  	color: var(--blue-400);
  	display: flex;
  	transform: rotate(-30deg);
  }

  .governance-result {
  	display: flex;
  	flex-direction: column;
  	gap: 0;
  }

  /* Minimal PDF preview */
  .governance-pdf-preview {
  	display: flex;
  	align-items: center;
  	gap: var(--space-3);
  	padding: var(--space-3);
  	background: rgba(255, 255, 255, 0.03);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-md);
  }

  .pdf-icon {
  	width: 32px;
  	height: 32px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	flex-shrink: 0;
  }

  .pdf-icon i {
  	font-size: var(--font-size-xl);
  	color: var(--text-muted);
  }

  .pdf-info {
  	display: flex;
  	flex-direction: column;
  	gap: 1px;
  	flex: 1;
  	min-width: 0;
  }

  .pdf-name {
  	font-size: var(--font-size-sm);
  	font-weight: 500;
  	color: var(--text-primary);
  }

  .pdf-meta {
  	font-size: 0.8125rem;
  	color: var(--text-muted);
  }

  .pdf-download {
  	width: 28px;
  	height: 28px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	color: var(--text-muted);
  	text-decoration: none;
  	flex-shrink: 0;
  }

  .pdf-download i {
  	font-size: var(--font-size-base);
  }

  /* NLP Continuous Slider */
  .nlp-slider-wrapper {
  	position: relative;
  	overflow: hidden;
  	margin-top: var(--space-6);
  }

  /* Clip overflow on NLP section */
  #nlp-section {
  	overflow-x: clip;
  }

  .nlp-slider-track {
  	display: flex;
  	gap: var(--space-12);
  	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* NLP cards - full width, one per view with two-column layout */
  .nlp-slider-track .top-border-card {
  	flex: 0 0 100%;
  	min-width: 0;
  	display: grid;
  	grid-template-columns: 1fr 1.5fr;
  	gap: var(--space-16);
  	align-items: start;
  	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  	min-height: 520px;
  	padding: var(--space-12) var(--space-16) var(--space-16);
  }

  /* NLP slide header - matches use-cases-slide-header */
  .nlp-slide-header {
  	display: flex;
  	flex-direction: column;
  	max-width: 480px;
  }

  .nlp-slide-header .rc-row-label {
  	margin-bottom: var(--space-5);
  }

  .nlp-slide-header h4 {
  	font-size: var(--font-size-2xl);
  	font-weight: 600;
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  	color: var(--text-primary);
  	margin: 0;
  	margin-bottom: var(--space-3);
  }

  .nlp-slide-header p {
  	font-size: var(--font-size-base);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  	margin: 0;
  	margin-bottom: var(--space-2);
  }

  /* Demo container - flush to edges */
  .nlp-slider-track .top-border-card .rc-macos-container {
  	align-self: end;
  	margin-right: calc(-1 * var(--space-16));
  	margin-bottom: calc(-1 * var(--space-16));
  	transition: all 0.3s ease;
  	border-radius: var(--radius-xl) 0 var(--radius-xl) 0;
  	border-right: none;
  	border-bottom: none;
  	border-top: none;
  }

  /* Disable hover effects on NLP slider cards */
  .nlp-slider-track .top-border-card:hover {
  	border-color: var(--border-subtle);
  	transform: none;
  	box-shadow: none;
  }

  /* Disable hover effects on NLP section macOS containers */
  .nlp-slider-track .top-border-card .rc-macos-container:hover {
  	border-color: var(--border-default);
  	transform: none;
  	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .nlp-slider-track .top-border-card .rc-macos-container .rc-macos-content {
  	padding: var(--space-6);
  	padding-bottom: var(--space-20);
  	justify-content: flex-start;
  }

  /* Disable hover effects on SQL mockups */
  .sql-panel .rc-macos-container:hover,
  .governance-demo .rc-macos-container:hover {
  	border-color: var(--border-default);
  	transform: none;
  	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  /* Disable hover effects on response control macOS containers */
  .response-macos-flush:hover {
  	border-color: var(--border-default);
  	transform: none;
  	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  /* ============================================
     MACOS WINDOW CONTENT - TOP ALIGNMENT & CONSISTENT SPACING
     All macOS window content must be top-aligned with uniform padding
     ============================================ */

  /* NLP demo content specific styling */
  .nlp-demo-content {
  	justify-content: flex-start;
  	align-items: stretch;
  	gap: var(--space-5);
  }

  /* Ensure showcase-input has consistent bottom spacing */
  .nlp-demo-content .showcase-input {
  	margin-bottom: 0;
  }

  /* Card 2 (Full transparency) - Uniform spacing system */
  .top-border-card[data-index="2"] .showcase-result {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-5);
  	overflow: hidden;
  	min-width: 0;
  }

  .top-border-card[data-index="2"] .audit-response-text {
  	padding: 0;
  	margin: 0;
  }

  .top-border-card[data-index="2"] .audit-response-value {
  	margin: 0;
  	font-size: 2rem;
  	font-weight: 700;
  	color: var(--text-primary);
  	line-height: 1;
  	letter-spacing: var(--letter-spacing-tight);
  }

  .top-border-card[data-index="2"] .verified-result-badge {
  	display: flex;
  	align-items: flex-start;
  	justify-content: flex-start;
  	width: 100%;
  	gap: var(--space-4);
  	padding: var(--space-4);
  	background: color-mix(in srgb, var(--emerald-400) 6%, transparent);
  	border: 1px solid color-mix(in srgb, var(--emerald-400) 15%, transparent);
  	border-radius: var(--radius-lg);
  	margin: 0;
  	overflow: hidden;
  	min-width: 0;
  }

  .top-border-card[data-index="2"] .verified-result-icon {
  	width: 36px;
  	height: 36px;
  	background: color-mix(in srgb, var(--emerald-400) 15%, transparent);
  	border-radius: 50%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	flex-shrink: 0;
  }

  .top-border-card[data-index="2"] .verified-result-icon i {
  	font-size: var(--font-size-lg);
  	color: var(--emerald-400);
  }

  .top-border-card[data-index="2"] .verified-result-text {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-3);
  	flex: 1;
  	min-width: 0;
  	overflow: hidden;
  }

  .top-border-card[data-index="2"] .verified-result-title {
  	font-size: var(--font-size-sm);
  	font-weight: 600;
  	color: var(--emerald-400);
  	line-height: 1;
  }

  .top-border-card[data-index="2"] .verified-result-sub {
  	font-size: 0.8125rem;
  	color: var(--text-muted);
  	line-height: 1;
  }

  .top-border-card[data-index="2"] .verified-result-entities {
  	display: flex;
  	flex-wrap: wrap;
  	gap: var(--space-2);
  	margin: 0;
  }

  .top-border-card[data-index="2"] .verified-entity-item {
  	font-size: var(--font-size-xs);
  	font-weight: 500;
  	color: var(--text-primary);
  	background: color-mix(in srgb, var(--emerald-400) 10%, transparent);
  	padding: var(--space-1) var(--space-2);
  	border-radius: var(--radius-sm);
  	border: 1px solid color-mix(in srgb, var(--emerald-400) 20%, transparent);
  	line-height: 1.3;
  	word-break: break-word;
  }

  .top-border-card[data-index="2"] .verified-entity-type {
  	text-transform: uppercase;
  	color: var(--emerald-400);
  	font-size: 0.625rem;
  	letter-spacing: 0.03em;
  	margin-right: 2px;
  }

  /* Ensure showcase content fits tightly */
  .nlp-feature-demo .showcase-content {
  	flex: 0 0 auto;
  }

  .nlp-feature-demo .ios-message-thread {
  	flex: 0 0 auto;
  }

  .nlp-feature-demo .showcase-connections {
  	flex: 0 0 auto;
  }

  /* Date Resolved Row - absolutely positioned to overlay messages */
  .ios-message-thread {
  	position: relative;
  }

  .date-resolved-row {
  	position: absolute;
  	left: 50%;
  	transform: translateX(-50%);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	pointer-events: none;
  	z-index: 10;
  }

  .date-resolved-row * {
  	pointer-events: auto;
  }

  /* Position date card vertically centered */
  .date-resolved-row-1 {
  	top: 50%;
  	transform: translate(-50%, -50%);
  }

  /* Position second date card between second Q&A */
  .date-resolved-row-2 {
  	top: 75%;
  	transform: translate(-50%, -50%);
  }

  /* Date transform card - Glass effect overlay */
  .date-transform-card {
  	position: relative;
  	background: rgba(26, 32, 44, 0.5);
  	backdrop-filter: blur(8px);
  	-webkit-backdrop-filter: blur(8px);
  	border: 1px solid rgba(255, 255, 255, 0.15);
  	border-radius: var(--radius-lg);
  	padding: var(--space-4);
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-2);
  	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  }

  .date-transform-row {
  	display: grid;
  	grid-template-columns: auto auto 1fr;
  	align-items: center;
  	gap: var(--space-3);
  	white-space: nowrap;
  	position: relative;
  	z-index: 1;
  }

  .date-original {
  	font-size: var(--font-size-sm);
  	color: var(--text-muted);
  	background: rgba(255, 255, 255, 0.04);
  	padding: var(--space-1) var(--space-3);
  	border-radius: var(--radius-sm);
  	font-style: italic;
  }

  .date-arrow-icon {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	color: var(--blue-400);
  	font-size: var(--font-size-sm);
  	flex-shrink: 0;
  }

  .date-converted {
  	font-family: 'SF Mono', 'Fira Code', monospace;
  	font-size: 0.8125rem;
  	font-weight: 500;
  	color: var(--emerald-400);
  	background: color-mix(in srgb, var(--emerald-400) 10%, transparent);
  	padding: var(--space-1) var(--space-3);
  	border-radius: var(--radius-sm);
  	letter-spacing: var(--letter-spacing-normal);
  }

  @media (max-width: 900px) {
  	.nlp-slider-track {
  		gap: 0;
  	}

  	.nlp-slider-track .top-border-card {
  		flex: 0 0 100%;
  		grid-template-columns: 1fr;
  		gap: var(--space-6);
  		padding: var(--space-8) var(--space-6);
  	}

  	.nlp-slider-track .top-border-card .rc-macos-container {
  		margin: 0;
  		height: auto;
  		border-radius: var(--radius-lg);
  		border: 1px solid var(--border-default);
  	}

  	.nlp-slider-track .top-border-card .rc-macos-container .rc-macos-content {
  		padding: var(--space-5);
  		padding-bottom: var(--space-10);
  		justify-content: flex-start;
  	}

	/* NLP tabs handled by marketing.css */

	.nlp-slider-wrapper {
  		margin-top: var(--space-6);
  	}

  	.nlp-slide-header h4 {
  		font-size: var(--font-size-xl);
  	}

  	.nlp-slider-track .top-border-card .rc-macos-container .rc-macos-content {
  		padding: var(--space-4);
  		padding-bottom: var(--space-8);
  	}

  	/* Hide decorative handwritten elements on mobile */
  	.date-handwritten-label {
  		display: none;
  	}

  	.nlp-slider-wrapper {
  		margin-top: var(--space-6);
  	}

	/* Date overlay - scale down to fit on mobile */
	.date-transform-card {
		padding: var(--space-2);
		gap: var(--space-1);
	}

	.date-transform-row {
		gap: var(--space-2);
	}

	.date-original {
		font-size: 0.625rem;
		padding: 2px var(--space-1);
	}

	.date-converted {
		font-size: 0.625rem;
		padding: 2px var(--space-1);
	}

	.date-arrow-icon {
		font-size: 0.625rem;
	}
  }

  /* Make iOS conversation windows full width */
  .showcase-card:has(.ios-message-thread) {
  	width: 100% !important;
  	margin: 0 !important;
  }

  /* Standardize all text in iOS message bubbles */
  .ios-message-bubble,
  .ios-message-bubble p,
  .ios-message-bubble .ios-response-text,
  .ios-message-bubble strong {
  	color: var(--text-primary) !important;
  	font-size: var(--font-size-lg) !important;
  	font-weight: 400 !important;
  	line-height: var(--line-height-relaxed) !important;
  }

  /* Standardize match indicator text */
  .ios-match-indicator,
  .ios-match-indicator span,
  .ios-match-indicator strong {
  	color: var(--text-primary) !important;
  	font-size: var(--font-size-lg) !important;
  	font-weight: 400 !important;
  }

  /* Remove icon styling */
  .ios-match-indicator i {
  	display: none !important;
  }

  /* Homepage-specific channel styling overrides */
  .channel-content-wrapper {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  }

  .channel-panel .rc-macos-container.channel-macos-flush .showcase-input {
  	margin-bottom: 0;
  }

  /* Simple text response styling */
  .simple-text-response {
  	font-size: var(--font-size-lg);
  	line-height: var(--line-height-normal);
  	color: var(--text-primary);
  }

  .simple-text-response p {
  	margin: 0;
  }

  .simple-text-response p:first-child {
  	font-weight: 600;
  	margin-bottom: var(--space-1);
  }

  /* Simple API styling without nested bg */
  .api-content-simple {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-4);
  	justify-content: flex-start;
  	align-items: flex-start;
  }

  .api-header-simple {
  	display: flex;
  	align-items: center;
  	gap: var(--space-3);
  }

  .api-header-simple .api-method {
  	font-size: 0.8125rem;
  	font-weight: 600;
  	color: var(--emerald-400);
  	text-transform: uppercase;
  }

  .api-header-simple .api-endpoint {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	font-family: 'SF Mono', 'Fira Code', monospace;
  }

  .api-code-simple {
  	font-family: 'SF Mono', 'Fira Code', monospace;
  	font-size: var(--font-size-sm);
  	line-height: var(--line-height-relaxed);
  	color: var(--text-secondary);
  	margin: 0;
  	white-space: pre;
  	background: none;
  }

  .api-code-simple code {
  	background: none;
  	padding: 0;
  }

  .channels-card-wrapper .channel-tabs-wrapper {
  	margin-bottom: var(--space-6);
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	gap: var(--space-5);
  }

  .channels-card-wrapper .channel-tabs-wrapper .handwritten-label {
  	display: flex;
  	align-items: center;
  	gap: var(--space-2);
  	justify-content: center;
  }

  .channels-card-wrapper .channel-tabs-wrapper .handwritten-text {
  	font-family: 'Kalam', 'Bradley Hand', 'Brush Script MT', 'Segoe Script', cursive;
  	font-size: clamp(1.75rem, 3vw, 2.25rem);
  	font-weight: 400;
  	color: var(--text-primary);
  	white-space: nowrap;
  }

  .channels-card-wrapper .channel-tabs-wrapper .handwritten-arrow-left {
  	color: var(--blue-400);
  	display: flex;
  	align-items: center;
  }

  .channels-card-wrapper .channel-mockup {
  	margin: 0;
  }

  /* Channel section - extend mockup to bottom of card */
  #channels-section .twocol-item-mockup {
  	display: flex;
  	flex-direction: column;
  }

  #channels-section .channel-mockup {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  	margin-bottom: calc(-1 * var(--space-16));
  }

  #channels-section .channel-content-wrapper {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  }

  #channels-section .channel-panel {
  	display: none;
  }

  #channels-section .channel-panel.active {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  }

  /* Channel mockup flush styling - matches governance section pattern */
  #channels-section .rc-macos-container.channel-macos-flush {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  	border-bottom: none;
  }

  #channels-section .rc-macos-container.channel-macos-flush .rc-macos-content {
  	flex: 1;
  	padding: var(--space-6);
  	padding-bottom: var(--space-16);
  	justify-content: flex-start;
  }

  /* Ask via slider - Uniform font sizes across all channel panels */
  .channel-mockup .sms-bubble,
  .channel-mockup .sms-bubble p,
  .channel-mockup .sms-label {
  	font-size: var(--font-size-base) !important;
  	line-height: var(--line-height-relaxed) !important;
  }

  .channel-mockup .showcase-input,
  .channel-mockup .showcase-input span,
  .channel-mockup .showcase-name,
  .channel-mockup .showcase-value,
  .channel-mockup .showcase-result-row {
  	font-size: var(--font-size-base) !important;
  }

  .channel-mockup .simple-text-response,
  .channel-mockup .simple-text-response p {
  	font-size: var(--font-size-base) !important;
  	line-height: var(--line-height-relaxed) !important;
  }

  .channel-mockup .api-endpoint {
  	font-size: var(--font-size-sm) !important;
  }

  .channel-mockup .api-code,
  .channel-mockup .api-code code {
  	font-size: 0.8125rem !important;
  }

  .channel-mockup .sms-verified {
  	font-size: var(--font-size-sm) !important;
  }

  /* Responsive - Channels section mockup margins must match wrapper padding */
  @media (max-width: 768px) {
  	#channels-section .channel-mockup {
  		margin-bottom: calc(-1 * var(--space-8));
  	}

  	#channels-section .rc-macos-container.channel-macos-flush .rc-macos-content {
  		padding-bottom: var(--space-8);
  	}
  }

  @media (max-width: 480px) {
  	#channels-section .channel-mockup {
  		margin-bottom: calc(-1 * var(--space-5));
  	}

  	#channels-section .rc-macos-container.channel-macos-flush .rc-macos-content {
  		padding-bottom: var(--space-5);
  	}
  }

  /* Responsive */
@media (max-width: 768px) {
	.home-hero {
		padding-top: calc(var(--nav-height-tablet) + var(--space-8));
		padding-bottom: 0;
		overflow: visible;
  	}

  	.home-hero-inner {
  		gap: var(--space-3);
  	}

  	.home-hero h1 {
  		font-size: clamp(2rem, 8vw, 2.75rem);
  		margin-bottom: var(--space-1);
  	}

  	.home-hero p {
  		font-size: 1rem;
  		margin-bottom: var(--space-2);
  	}

  	.home-hero-cta {
  		margin-bottom: var(--space-1);
  	}

  	.home-hero-cta-buttons {
  		flex-direction: column;
  		align-items: center;
  		width: 100%;
  		gap: var(--space-2);
  	}

  	.btn-hero-primary {
  		width: 100%;
  		justify-content: center;
  	}

  	/* Secondary CTA - text-only on mobile for less vertical space */
  	.btn-hero-secondary {
  		width: auto;
  		padding: var(--space-2) 0;
  		background: none;
  		border: none;
  		color: var(--blue-400);
  		font-size: var(--font-size-base);
  		justify-content: center;
  	}

  	.btn-hero-secondary:hover {
  		background: none;
  		border: none;
  		text-decoration: underline;
  	}

  	/* Hero demo mobile - side gaps, rounded top, square bottom */
  	.hero-demo {
  		margin: var(--space-2) 0 0;
  		max-width: none;
  		width: 100%;
  	}

  	.hero-demo-window {
  		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  	}

  	.hero-demo-content {
  		padding: var(--space-6) var(--space-4);
  		padding-bottom: var(--space-10);
  	}

  	.hero-demo-input {
  		font-size: 1rem;
  		padding: var(--space-4);
  		min-height: 48px;
  	}

  	.hero-demo-result {
  		font-size: 0.9375rem;
  		white-space: normal;
  	}

  	/* Social proof - stack text above logos on tablet */
  	.home-hero-social-proof {
  		margin-bottom: var(--space-1);
  		gap: var(--space-2);
  	}

  	.home-hero-proof-text {
  		font-size: 0.8125rem;
  	}

  	/* Keep logos in a horizontal row */
  	.home-hero-logos {
  		flex-direction: row;
  		justify-content: center;
  	}

	/* Keep the lead-in text, hide trailing qualifier on mobile */
	.home-hero-logos .home-hero-proof-text:last-of-type {
		display: none;
	}

  	.home-hero-integration-logo {
  		height: 16px;
  	}
  }

@media (max-width: 480px) {
	.home-hero {
		padding-top: calc(var(--nav-height-mobile) + var(--space-4));
		padding-bottom: 0;
	}

	.home-hero-inner {
		gap: var(--space-4);
	}

	.home-hero h1 {
		margin: 0;
	}

	.home-hero p {
		margin: 0;
	}

	.home-hero-social-proof {
		margin: 0;
	}

  	.hero-demo {
  		margin: 0;
  		width: 100%;
  	}

  	.hero-demo-content {
  		padding: var(--space-5) var(--space-4);
  		padding-bottom: var(--space-8);
  	}

  	.hero-demo-input {
  		font-size: 0.9375rem;
  		padding: var(--space-3);
  	}

  	.hero-demo-result {
  		font-size: 0.875rem;
  	}
  }

  /* ============================================
FULL RESPONSE CONTROL - Award-Winning Design
============================================ */

  :root {
  	--charcoal-300: #a0a4b0;
  	--charcoal-200: #c8cbd3;
  	--charcoal-100: #e8e9ed;
  }

.response-control-section {
	padding: var(--space-36) var(--space-8);
}

  /* Option cards */
  .response-option-card {
  	background: rgba(255, 255, 255, 0.02);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-md);
  	padding: var(--space-5);
  }

  .response-option-header {
  	display: flex;
  	align-items: flex-start;
  	gap: var(--space-4);
  	margin-bottom: var(--space-4);
  }

  .response-option-icon {
  	width: 40px;
  	height: 40px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	background: rgba(59, 130, 246, 0.1);
  	border-radius: var(--radius-md);
  	flex-shrink: 0;
  }

  .response-option-icon i {
  	font-size: var(--font-size-xl);
  	color: var(--blue-400);
  }

  .response-option-icon-ai {
  	background: rgba(168, 85, 247, 0.1);
  }

  .response-option-icon-ai i {
  	color: var(--purple-400);
  }

  .response-option-icon-link {
  	background: rgba(52, 211, 153, 0.1);
  }

  .response-option-icon-link i {
  	color: var(--emerald-400);
  }

  .response-option-icon-pdf {
  	background: rgba(239, 68, 68, 0.1);
  }

  .response-option-icon-pdf i {
  	color: #ef4444;
  }

  .response-option-header h5 {
  	font-size: 1rem;
  	font-weight: 600;
  	color: var(--text-primary);
  	margin: 0 0 var(--space-1) 0;
  }

  .response-option-header p {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	margin: 0;
  	line-height: var(--line-height-relaxed);
  }

  .response-option-card .rc-macos-container {
  	margin-top: var(--space-2);
  }

  /* Response option column - text above, macOS below - matches channels-card-wrapper pattern */
  .response-option-col {
  	display: flex;
  	flex-direction: column;
  }

  .response-option-text {
  	margin-bottom: var(--space-4);
  }

  .response-option-text h5 {
  	font-size: 1rem;
  	font-weight: 600;
  	color: var(--text-primary);
  	margin-bottom: var(--space-1);
  }

  .response-option-text p {
  	font-size: var(--font-size-sm);
  	color: var(--text-muted);
  	line-height: var(--line-height-relaxed);
  	margin: 0;
  }

  /* macOS containers flush bottom with rounded corners to match slide */
  .rc-macos-container.response-macos-flush {
  	border-radius: var(--radius-xl);
  	margin-bottom: calc(-1 * var(--space-24));
  	height: calc(100% + var(--space-24));
  }

  .response-macos-flush .rc-macos-header {
  	justify-content: flex-start;
  }

  .response-macos-flush .rc-macos-content {
  	padding: var(--space-6);
  	padding-bottom: var(--space-24);
  	justify-content: flex-start;
  }

  @media (max-width: 900px) {

  	/* On mobile stacked layout, first option needs proper spacing */
  	.response-option-col:first-child .response-macos-flush {
  		margin-bottom: 0;
  		height: auto;
  	}

  	.response-option-col:first-child .response-macos-flush .rc-macos-content {
  		padding-bottom: var(--space-6);
  	}

  	.rc-macos-container.response-macos-flush {
  		margin-bottom: calc(-1 * var(--space-16));
  		height: calc(100% + var(--space-16));
  	}

  	.response-macos-flush .rc-macos-content {
  		padding: var(--space-6);
  		padding-bottom: var(--space-16);
  		justify-content: flex-start;
  	}

  	.response-slide-header h4 {
  		font-size: var(--font-size-lg);
  	}

  	.response-option-card {
  		padding: var(--space-4);
  	}

  	.response-macos-flush .rc-macos-content {
  		padding: var(--space-5);
  		padding-bottom: var(--space-5);
  	}

  	/* Last option's macOS should still flush to bottom */
  	.response-option-col:last-child .rc-macos-container.response-macos-flush {
  		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  		margin-bottom: calc(-1 * var(--space-8));
  	}

  	.response-option-col:last-child .response-macos-flush .rc-macos-content {
  		padding-bottom: var(--space-10);
  	}
  }

  @media (max-width: 480px) {
  	.response-option-card {
  		padding: var(--space-3);
  	}

  	/* Adjust last option flush on smaller screens */
  	.response-option-col:last-child .rc-macos-container.response-macos-flush {
  		margin-bottom: calc(-1 * var(--space-8));
  	}
  }

  .response-control-header {
  	text-align: center;
  	margin-bottom: var(--space-16);
  }

  .response-control-header h2 {
  	font-size: clamp(2rem, 4vw, 2.75rem);
  	font-weight: 600;
  	letter-spacing: var(--letter-spacing-tighter);
  	color: var(--text-primary);
  	margin: var(--space-4) 0 0;
  }

  .response-control-header p {
  	font-size: var(--font-size-lg);
  	color: var(--text-secondary);
  	max-width: 520px;
  	margin: var(--space-4) auto 0;
  	line-height: var(--line-height-relaxed);
  }

  /* Matrix layout */
  .response-matrix {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-16);
  	max-width: 1200px;
  	margin: 0 auto;
  }

  /* Each row */
  .response-row {
  	display: grid;
  	grid-template-columns: 200px 1fr;
  	gap: var(--space-10);
  	align-items: center;
  }

  /* Stacked layout - label on top */
  .response-row-stacked {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-6);
  }

  /* Top label for stacked layout */
  .response-row-label-top {
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  }

  /* Title row - inline label with heading */
  .rc-title-row {
  	display: flex;
  	align-items: baseline;
  	gap: var(--space-3);
  }

  /* Simple text label (no pill) */
  /* rc-row-label uses base marketing.css styling */

  /* Separator dot - removed since labels are now stacked */
  .rc-row-label::after {
  	display: none;
  }

  .rc-title-row .rc-title {
  	margin: 0;
  }

  /* Stacked label and title */
  .response-option-simple>div:first-child .rc-title {
  	margin-top: 0;
  }

  @media (max-width: 640px) {
  	.rc-title-row {
  		flex-direction: column;
  		align-items: flex-start;
  		gap: var(--space-1);
  	}
  }

  /* Legacy pill style (keep for backwards compat) */
  .rc-row-pill {
  	display: inline-block;
  	font-size: var(--font-size-xs);
  	font-weight: 600;
  	text-transform: uppercase;
  	letter-spacing: 0.08em;
  	color: var(--blue-400);
  	background: rgba(59, 130, 246, 0.1);
  	border: 1px solid rgba(59, 130, 246, 0.2);
  	padding: var(--space-2) var(--space-4);
  	border-radius: var(--radius-pill);
  }

  /* Reverse row - label on right */
  .response-row-reverse {
  	grid-template-columns: 1fr 200px;
  }

  .response-row-reverse .response-row-label {
  	align-items: center;
  	text-align: center;
  	align-self: center;
  }

  /* Row label (left side) */
  .response-row-label {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	position: relative;
  	text-align: center;
  	align-self: center;
  }

  .response-row-label .handwritten-text {
  	font-family: 'Kalam', 'Bradley Hand', 'Brush Script MT', 'Segoe Script', cursive;
  	font-size: clamp(1.25rem, 2vw, 1.625rem);
  	font-weight: 400;
  	color: var(--text-primary);
  	white-space: nowrap;
  	line-height: var(--line-height-snug);
  	margin-top: calc(var(--space-2) * -1);
  }

  .response-row-subtitle {
  	font-size: var(--font-size-sm);
  	color: var(--text-muted);
  	line-height: var(--line-height-relaxed);
  	margin-top: var(--space-2);
  	text-align: center;
  }

  /* Options container */
  .response-row-options {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: var(--space-10);
  	width: 100%;
  	align-items: start;
  }

  /* Each option column */
  .response-option-simple {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-4);
  	min-height: 360px;
  	/* Changed from fixed height to min-height */
  	justify-content: center;
  }

  /* Option header group - matches feature-col h3/p style */
  .response-option-simple .rc-title {
  	font-size: var(--font-size-2xl);
  	font-weight: 600;
  	color: var(--text-primary);
  	margin: 0;
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  }

  .response-option-simple .rc-desc {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	margin: 0 0 var(--space-3);
  	line-height: var(--line-height-relaxed);
  }

  /* Template/prompt code block - Match hero input style */
  .rc-template-code {
  	display: flex;
  	align-items: center;
  	gap: var(--space-4);
  	padding: var(--space-5) var(--space-6);
  	background: var(--bg-input);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-lg);
  	font-size: 1.1875rem;
  	color: var(--text-primary);
  	min-height: 56px;
  	line-height: var(--line-height-normal);
  	font-family: inherit;
  }

  .rc-template-code i {
  	color: var(--text-muted);
  	font-size: var(--font-size-lg);
  	flex-shrink: 0;
  }

  /* If no icon, still center content */
  .rc-template-code:not(:has(i)) {
  	justify-content: flex-start;
  }

  /* Setting group - Backend configuration style */
  .rc-setting-group {
  	margin-bottom: var(--space-4);
  }

  .rc-setting-label {
  	display: block;
  	font-size: 0.8125rem;
  	font-weight: 600;
  	color: var(--text-muted);
  	text-transform: uppercase;
  	letter-spacing: var(--letter-spacing-wider);
  	margin-bottom: var(--space-3);
  }

  /* Output - Simple text response like hero (no card) */
  .rc-bubble {
  	font-size: var(--font-size-lg);
  	line-height: var(--line-height-loose);
  	color: var(--text-primary);
  	padding: 0;
  	background: none;
  	border: none;
  	border-radius: 0;
  }

  .rc-bubble i {
  	color: var(--text-muted);
  	margin-right: var(--space-2);
  }

  /* macOS container */
  .rc-macos-container {
  	background: var(--bg-elevated);
  	border: 1px solid var(--border-default);
  	border-radius: var(--radius-xl);
  	overflow: hidden;
  	box-shadow:
  		0 4px 12px rgba(0, 0, 0, 0.15),
  		inset 0 1px 0 rgba(255, 255, 255, 0.05);
  	display: flex;
  	flex-direction: column;
  	height: 100%;
  	min-height: 0;
  }

  .rc-macos-header {
  	display: flex;
  	gap: 6px;
  	padding: var(--space-3) var(--space-4);
  	background: var(--bg-input);
  	border-bottom: 1px solid var(--border-subtle);
  }

  .rc-macos-dot {
  	width: 10px;
  	height: 10px;
  	border-radius: 50%;
  	flex-shrink: 0;
  }

  .rc-dot-red {
  	background: #ff5f57;
  }

  .rc-dot-yellow {
  	background: #febc2e;
  }

  .rc-dot-green {
  	background: #28c840;
  }

  .rc-macos-content {
  	padding: var(--space-6);
  	padding-bottom: var(--space-12);
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-4);
  	flex: 1;
  	justify-content: flex-start;
  	align-items: stretch;
  	min-height: 0;
  }

  /* Center align content for table and PDF */
  .rc-macos-content .rc-table-preview,
  .rc-macos-content .rc-pdf-doc {
  	align-self: center;
  }

  /* Table preview - Clean data table */
  .rc-table-preview {
  	background: rgba(0, 0, 0, 0.15);
  	border: 1px solid rgba(255, 255, 255, 0.04);
  	border-radius: var(--radius-md);
  	overflow: hidden;
  	font-size: var(--font-size-sm);
  	width: 100%;
  	max-width: 100%;
  }

  .rc-table-row {
  	display: grid;
  	grid-template-columns: 1fr 1fr 0.5fr;
  	padding: 12px 16px;
  	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .rc-table-row:last-child {
  	border-bottom: none;
  }

  .rc-table-header {
  	background: rgba(255, 255, 255, 0.02);
  	font-weight: 600;
  	color: var(--text-muted);
  	text-transform: uppercase;
  	letter-spacing: var(--letter-spacing-wider);
  	font-size: var(--font-size-xs);
  }

  .rc-table-row span {
  	color: var(--text-secondary);
  }

  .rc-table-row span:last-child {
  	text-align: right;
  }

  .rc-table-fade {
  	opacity: 0.3;
  }

  /* PDF mini (summary card style) */
  .rc-pdf-mini {
  	background: white;
  	border-radius: 6px;
  	padding: var(--space-3);
  	text-align: center;
  	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  }

  .rc-pdf-logo {
  	display: block;
  	font-size: 0.5625rem;
  	font-weight: 800;
  	color: var(--blue-600);
  	letter-spacing: var(--letter-spacing-wider);
  	margin-bottom: 2px;
  }

  .rc-pdf-stat {
  	font-size: 1rem;
  	font-weight: 700;
  	color: var(--charcoal-800);
  }

  /* PDF document - Letter ratio, balanced size */
  .rc-pdf-doc {
  	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  	border-radius: 6px;
  	padding: var(--space-4) var(--space-5);
  	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  	width: 100%;
  	max-width: 140px;
  	aspect-ratio: 8.5 / 11;
  	display: flex;
  	flex-direction: column;
  	margin: 0 auto;
  }

  .rc-pdf-header {
  	display: flex;
  	justify-content: space-between;
  	align-items: baseline;
  	margin-bottom: var(--space-3);
  	padding-bottom: var(--space-2);
  	border-bottom: 1.5px solid var(--charcoal-200);
  }

  .rc-pdf-title {
  	font-size: 0.5rem;
  	font-weight: 600;
  	color: var(--charcoal-500);
  }

  .rc-pdf-table {
  	display: flex;
  	flex-direction: column;
  	gap: 8px;
  	flex: 1;
  	padding-top: var(--space-2);
  }

  .rc-pdf-tr {
  	display: flex;
  	gap: 10px;
  }

  .rc-pdf-tr span {
  	height: 5px;
  	background: var(--charcoal-200);
  	border-radius: 2px;
  }

  .rc-pdf-tr span:first-child {
  	flex: 1;
  }

  .rc-pdf-tr span:last-child {
  	width: 32px;
  	flex: none;
  }

  @media (max-width: 900px) {
  	.response-control-section {
  		padding-top: var(--space-10);
  		padding-bottom: var(--space-10);
  	}

  	.response-row,
  	.response-row-reverse {
  		grid-template-columns: 1fr;
  		gap: var(--space-6);
  	}

  	.response-row-options {
  		grid-template-columns: 1fr;
  		gap: var(--space-6);
  	}

  	.response-row-label-top {
  		align-items: center;
  		text-align: center;
  	}

  	.response-option-simple {
  		height: auto;
  	}
  }

@media (max-width: 768px) {
	.response-control-section {
		padding-top: var(--space-16);
		padding-bottom: var(--space-16);
	}
}

@media (max-width: 480px) {
	.response-control-section {
		padding-top: var(--space-12);
		padding-bottom: var(--space-12);
	}
  }

  /* ============================================
     OUTPUT FORMATS — Product-suite cards (33/66, 50/50, 50/50)
     Flat color, soft shadow, square corners, generous gap
     ============================================ */
  .output-formats {
  	display: grid;
  	grid-template-columns: repeat(6, 1fr);
  	gap: var(--space-6);
  	margin-top: var(--space-8);
  }

  /* 2x2 grid: each card spans half */
  .output-formats .output-format {
  	grid-column: span 3;
  }

  .output-format {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-4);
  	padding: var(--space-8);
  	background: var(--charcoal-800);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-xl);
  	overflow: hidden;
  	transition: border-color var(--transition-base);
  }

  .output-format:hover {
  	border-color: var(--border-hover);
  }

  /* Cards with image: image as bg, text overlay */
  .output-format:has(.output-format-imaging--img) {
  	position: relative;
  	min-height: 420px;
  	padding: 0;
  }

  .output-format:has(.output-format-imaging--img) .output-format-text {
  	position: relative;
  	z-index: 1;
  	padding: var(--space-8) var(--space-8);
  	max-width: 55%;
  }

  .output-format:has(.output-format-imaging--img) .output-format-imaging--img {
  	position: absolute;
  	inset: 0;
  	z-index: 0;
  	margin: 0;
  	padding: 0;
  	min-height: 100%;
  }

  /* Right-flush image: don't clip so the image's right edge is fully visible */
  .output-format:has(.output-format-imaging--img-right) {
  	overflow: visible;
  }

  .output-format:has(.output-format-imaging--img-right) .output-format-imaging--img {
  	left: auto;
  	right: 0;
  	top: 0;
  	bottom: 0;
  	width: 60%;
  	border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  	overflow: hidden;
  	display: flex;
  	flex-direction: column;
  	justify-content: flex-end;
  }

  .output-format:has(.output-format-imaging--img) .output-format-img {
  	position: absolute;
  	inset: 0;
  	width: 100%;
  	height: 100%;
  	min-height: 100%;
  }

  .output-format-text {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-2);
  }

  .output-format-label {
  	font-size: var(--font-size-lg);
  	font-weight: 600;
  	color: var(--text-primary);
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  }

  .output-format-desc {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  }

  /* Flush-to-edge image placeholder — all cards */
  .output-format-imaging {
  	min-height: 120px;
  	margin-top: var(--space-4);
  	margin-left: calc(-1 * var(--space-8));
  	margin-right: calc(-1 * var(--space-8));
  	margin-bottom: calc(-1 * var(--space-8));
  	padding: var(--space-5) var(--space-6) var(--space-8);
  	background: transparent;
  	border-top: none;
  	border-radius: 0;
  	display: flex;
  	flex-wrap: wrap;
  	align-items: center;
  	gap: var(--space-3);
  }

  /* Sliding boxed templates (e.g. Text responses card) */
  .output-format-imaging--slider {
  	padding: var(--space-4) 0 var(--space-6);
  	min-height: 0;
  	overflow: hidden;
  }

  .template-slider-wrap {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  }

  .template-slider-view {
  	width: 100%;
  	overflow: hidden;
  }

  .template-slider-track {
  	display: flex;
  	gap: var(--space-5);
  }

  .template-slider-track.template-slider-animate {
  	animation: template-slide 12s linear infinite;
  	transform: translateX(var(--peek-offset, 0));
  }

  @keyframes template-slide {
  	0% {
  		transform: translateX(var(--peek-offset, 0));
  	}
  	100% {
  		transform: translateX(calc(var(--peek-offset, 0) + var(--slide-distance, 0)));
  	}
  }

  .template-slider-box {
  	flex: 0 0 auto;
  	width: 280px;
  	min-height: 160px;
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	gap: var(--space-4);
  	padding: var(--space-8) var(--space-8);
  	background: rgba(255, 255, 255, 0.04);
  	border: none;
  	border-radius: var(--radius-lg);
  }

  .template-slider-label {
  	font-size: var(--font-size-xs);
  	font-weight: 600;
  	color: var(--text-muted);
  	text-transform: uppercase;
  	letter-spacing: 0.04em;
  }

  .template-slider-example {
  	font-size: var(--font-size-base);
  	color: var(--text-secondary);
  	line-height: 1.45;
  	word-break: break-word;
  }

  .template-var {
  	display: inline;
  	padding: 2px 6px;
  	background: color-mix(in srgb, var(--blue-500) 18%, transparent);
  	border: 1px solid color-mix(in srgb, var(--blue-400) 35%, transparent);
  	border-radius: var(--radius-sm);
  	color: var(--blue-300);
  	font-family: var(--font-mono, ui-monospace, monospace);
  	font-size: 0.9em;
  }

  /* Generic placeholder (cards without custom imaging): dashed hint for image */
  .output-format-imaging:not([class*="--intent"]):not([class*="--params"]):not([class*="--img"]):not([class*="--slider"]) {
  	background: rgba(255, 255, 255, 0.02);
  	border-top: 1px dashed var(--border-subtle);
  	align-items: center;
  	justify-content: center;
  }

  /* Card with image: base (overridden when inside :has card for bg+overlay) */
  .output-format-imaging--img {
  	padding: 0;
  	min-height: 140px;
  	overflow: hidden;
  }

  .output-format-img {
  	display: block;
  	width: 100%;
  	height: 100%;
  	min-height: 140px;
  	object-fit: cover;
  	object-position: center bottom;
  }

  /* Image flush to right and bottom (when used as bg, object-position keeps content visible) */
  .output-format-imaging--img-right {
  	display: flex;
  	justify-content: flex-end;
  	align-items: flex-end;
  }

  .output-format:has(.output-format-imaging--img-right) .output-format-img--right {
  	position: relative;
  	inset: auto;
  	width: 100%;
  	height: auto;
  	max-height: 100%;
  	min-height: 0;
  	object-fit: contain;
  	object-position: right bottom;
  }

  .output-format-img--right {
  	width: auto;
  	max-width: 100%;
  	height: auto;
  	min-height: 140px;
  	max-height: 220px;
  	object-fit: contain;
  	object-position: right bottom;
  }

  /* Intent: three phrase bars + one query block (kept for --params or if reused) */
  .output-format-imaging--intent {
  	align-content: center;
  	gap: var(--space-2) var(--space-4);
  }

  .imaging-phrase {
  	display: block;
  	height: 8px;
  	width: 60%;
  	max-width: 100px;
  	background: rgba(59, 130, 246, 0.25);
  	border-radius: var(--radius-pill);
  }

  .imaging-phrase:nth-child(2) {
  	width: 75%;
  	max-width: 120px;
  	opacity: 0.85;
  }

  .imaging-phrase:nth-child(3) {
  	width: 50%;
  	max-width: 85px;
  	opacity: 0.7;
  }

  .imaging-query {
  	display: block;
  	width: 100%;
  	height: 28px;
  	background: rgba(59, 130, 246, 0.15);
  	border: 1px solid rgba(59, 130, 246, 0.25);
  	border-radius: var(--radius-xs);
  	margin-top: var(--space-2);
  }

  /* Params: parameter chips */
  .output-format-imaging--params {
  	align-items: center;
  	justify-content: center;
  	gap: var(--space-3);
  }

  .imaging-chip {
  	display: block;
  	height: 28px;
  	min-width: 80px;
  	background: rgba(168, 85, 247, 0.12);
  	border: 1px solid rgba(168, 85, 247, 0.25);
  	border-radius: var(--radius-pill);
  }

  .imaging-chip:first-child {
  	min-width: 100px;
  }

  .imaging-chip::before {
  	content: '@';
  	display: block;
  	height: 100%;
  	padding: 0 var(--space-3);
  	font-size: 0.75rem;
  	font-weight: 600;
  	color: rgba(168, 85, 247, 0.7);
  	line-height: 28px;
  	font-family: 'SF Mono', 'Fira Code', monospace;
  }

  .imaging-chip:first-child::before {
  	content: '@customer';
  }

  .imaging-chip:last-child::before {
  	content: '@dateRange';
  }

  /* SQL param highlight */
  .sql-param {
  	color: var(--emerald-400);
  }

  @media (max-width: 900px) {
  	.output-formats {
  		grid-template-columns: repeat(2, 1fr);
  		margin-top: var(--space-8);
  	}

  	.output-formats .output-format {
  		grid-column: auto;
  	}
  }

  @media (max-width: 480px) {
  	.output-formats {
  		grid-template-columns: 1fr;
  		margin-top: var(--space-6);
  	}

  	.output-formats .output-format {
  		grid-column: auto;
  	}

  	.output-format {
  		padding: var(--space-5);
  	}

  	.output-format-imaging {
  		margin-left: calc(-1 * var(--space-5));
  		margin-right: calc(-1 * var(--space-5));
  		margin-bottom: calc(-1 * var(--space-5));
  		padding-left: var(--space-5);
  		padding-right: var(--space-5);
  	}
  }

  /* Grid layout override */
  .response-slide.response-slide-twocol {
  	display: grid;
  	grid-template-columns: 1fr 1.5fr;
  	flex-direction: unset;
  	gap: var(--space-16);
  	align-items: start;
  	padding: var(--space-12) var(--space-16) var(--space-16);
  }

  /* Feature explanation points below header */
  .response-format-points {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-5);
  	margin-top: var(--space-8);
  }

  .response-format-point {
  	display: flex;
  	align-items: flex-start;
  	gap: var(--space-4);
  }

  .response-format-point-icon {
  	width: 36px;
  	height: 36px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	background: rgba(59, 130, 246, 0.1);
  	border-radius: var(--radius-md);
  	flex-shrink: 0;
  }

  .response-format-point-icon i {
  	font-size: 1.125rem;
  	color: var(--blue-400);
  }

  .response-format-point-icon-ai {
  	background: color-mix(in srgb, var(--emerald-400) 10%, transparent);
  }

  .response-format-point-icon-ai i {
  	color: var(--emerald-400);
  }

  .response-format-point-icon-link {
  	background: color-mix(in srgb, var(--emerald-400) 10%, transparent);
  }

  .response-format-point-icon-link i {
  	color: var(--emerald-400);
  }

  .response-format-point-icon-pdf {
  	background: rgba(239, 68, 68, 0.1);
  }

  .response-format-point-icon-pdf i {
  	color: #ef4444;
  }

  .response-format-point-text h5 {
  	font-size: 1rem;
  	font-weight: 600;
  	color: var(--text-primary);
  	margin: 0 0 var(--space-1) 0;
  }

  .response-format-point-text p {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	line-height: var(--line-height-relaxed);
  	margin: 0;
  }

  /* Demo macOS container — flush to right and bottom edges */
  .rc-macos-container.response-demo-macos {
  	align-self: end;
  	margin-right: calc(-1 * var(--space-16));
  	margin-bottom: calc(-1 * var(--space-16));
  	border-radius: var(--radius-xl) 0 var(--radius-xl) 0;
  	border-right: none;
  	border-bottom: none;
  	border-top: none;
  }

  .rc-macos-container.response-demo-macos:hover {
  	border-color: var(--border-default);
  	transform: none;
  	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .response-demo-content {
  	padding: var(--space-6);
  	padding-bottom: var(--space-20);
  	gap: var(--space-6);
  }

  /* Pipeline section — SQL → Raw Result flow */
  .response-demo-pipeline {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-4);
  	padding: var(--space-4) var(--space-5);
  	background: rgba(0, 0, 0, 0.2);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-lg);
  }

  /* SQL query name */
  .response-demo-sql-name {
  	display: flex;
  	align-items: center;
  	gap: var(--space-2);
  	font-size: var(--font-size-sm);
  	font-weight: 600;
  	color: var(--text-primary);
  	margin-bottom: var(--space-2);
  }

  .response-demo-sql-name i {
  	color: var(--blue-400);
  	font-size: var(--font-size-base);
  }

  /* SQL code block */
  .response-demo-sql-code {
  	display: block;
  	font-family: 'SF Mono', 'Fira Code', monospace;
  	font-size: 0.8125rem;
  	line-height: var(--line-height-relaxed);
  	color: rgba(255, 255, 255, 0.6);
  	white-space: pre-wrap;
  }

  .response-demo-sql-code .sql-keyword {
  	color: var(--blue-400);
  }

  .response-demo-sql-param {
  	color: var(--emerald-400);
  }

  /* "+ add fields" affordance */
  .response-demo-sql-add {
  	display: inline-flex;
  	align-items: center;
  	gap: 3px;
  	font-size: 0.6875rem;
  	color: var(--blue-400);
  	background: rgba(59, 130, 246, 0.06);
  	border: 1px dashed rgba(59, 130, 246, 0.3);
  	border-radius: var(--radius-sm);
  	padding: 1px 6px;
  	font-family: inherit;
  	font-style: normal;
  	vertical-align: middle;
  	margin-left: 2px;
  }

  .response-demo-sql-add i {
  	font-size: 0.5625rem;
  }

  /* Raw result row */
  .response-demo-row {
  	border-top: 1px solid var(--border-subtle);
  	padding-top: var(--space-3);
  }

  .response-demo-row-label {
  	font-size: 0.6875rem;
  	font-weight: 600;
  	text-transform: uppercase;
  	letter-spacing: 0.06em;
  	color: var(--text-muted);
  	margin-bottom: var(--space-2);
  }

  .response-demo-row-data {
  	display: flex;
  	gap: var(--space-8);
  }

  .response-demo-row-cell {
  	display: flex;
  	flex-direction: column;
  	gap: 2px;
  }

  .response-demo-row-key {
  	font-size: 0.6875rem;
  	font-weight: 600;
  	text-transform: uppercase;
  	letter-spacing: 0.04em;
  	color: var(--text-muted);
  }

  .response-demo-row-value {
  	font-size: var(--font-size-base);
  	font-weight: 500;
  	color: var(--text-primary);
  }

  /* Blueprint zone — behind-the-scenes config area */
  .response-demo-blueprint {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-5);
  	padding: var(--space-5);
  	border: 1px dashed rgba(59, 130, 246, 0.18);
  	border-radius: var(--radius-lg);
  	background-color: rgba(59, 130, 246, 0.015);
  	background-image:
  		linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
  		linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
  	background-size: 24px 24px;
  }

  .response-demo-blueprint-label {
  	display: flex;
  	align-items: center;
  	gap: var(--space-3);
  	font-size: 0.6875rem;
  	font-weight: 600;
  	text-transform: uppercase;
  	letter-spacing: 0.06em;
  	color: rgba(59, 130, 246, 0.5);
  }

  .response-demo-blueprint-label i {
  	font-size: var(--font-size-sm);
  	flex-shrink: 0;
  }

  .response-demo-blueprint-label::after {
  	content: '';
  	flex: 1;
  	height: 1px;
  	background: linear-gradient(to right, rgba(59, 130, 246, 0.15), transparent);
  }

  /* Returned data container */
  .response-demo-data {
  	padding: var(--space-4) var(--space-5);
  	background: rgba(0, 0, 0, 0.15);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-lg);
  }

  /* Inside blueprint — dashed borders to match */
  .response-demo-blueprint .response-demo-data {
  	border: 1px dashed rgba(59, 130, 246, 0.2);
  	background: rgba(0, 0, 0, 0.1);
  }

  .response-demo-blueprint .response-demo-config {
  	border-style: dashed;
  	border-color: rgba(59, 130, 246, 0.15);
  }

  .response-demo-blueprint .response-demo-result {
  	border-left-style: dashed;
  }

  /* Two-column comparison grid */
  .response-demo-comparison {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: var(--space-6);
  }

  .response-demo-column {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-3);
  }

  /* Format badges */
  .response-demo-badge {
  	display: inline-flex;
  	align-items: center;
  	gap: var(--space-2);
  	font-size: var(--font-size-xs);
  	font-weight: 600;
  	text-transform: uppercase;
  	letter-spacing: 0.05em;
  	color: var(--blue-400);
  	padding: var(--space-1) var(--space-3);
  	background: rgba(59, 130, 246, 0.1);
  	border: 1px solid rgba(59, 130, 246, 0.2);
  	border-radius: var(--radius-pill);
  	width: fit-content;
  }

  .response-demo-badge i {
  	font-size: 0.6875rem;
  }

  .response-demo-badge-ai {
  	color: var(--emerald-400);
  	background: color-mix(in srgb, var(--emerald-400) 10%, transparent);
  	border-color: color-mix(in srgb, var(--emerald-400) 20%, transparent);
  }

  .response-demo-badge-link {
  	color: var(--emerald-400);
  	background: color-mix(in srgb, var(--emerald-400) 10%, transparent);
  	border-color: color-mix(in srgb, var(--emerald-400) 20%, transparent);
  }

  .response-demo-badge-pdf {
  	color: #ef4444;
  	background: rgba(239, 68, 68, 0.1);
  	border-color: rgba(239, 68, 68, 0.2);
  }

  /* Link text in multi-row demo */
  .response-demo-link-text {
  	display: flex;
  	align-items: center;
  	gap: var(--space-2);
  	font-size: var(--font-size-base);
  	color: var(--blue-400);
  	font-weight: 500;
  }

  .response-demo-link-text i {
  	font-size: var(--font-size-sm);
  	flex-shrink: 0;
  }

  /* Center content vertically in a demo column (e.g. PDF) */
  .response-demo-column-center {
  	align-items: center;
  }

  /* Tiny label above config — signals admin control */
  .response-demo-label {
  	font-size: 0.6875rem;
  	font-weight: 600;
  	text-transform: uppercase;
  	letter-spacing: 0.06em;
  	color: var(--text-muted);
  	margin: 0;
  }

  /* Config line — what the admin sets up */
  .response-demo-config {
  	font-size: var(--font-size-sm);
  	color: var(--text-muted);
  	font-family: 'SF Mono', 'Fira Code', monospace;
  	padding: var(--space-3) var(--space-4);
  	background: rgba(255, 255, 255, 0.03);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-md);
  	line-height: var(--line-height-relaxed);
  }

  /* Arrow between config and result */
  .response-demo-arrow {
  	display: flex;
  	justify-content: center;
  	color: var(--text-muted);
  	font-size: var(--font-size-sm);
  	opacity: 0.4;
  }

  /* Result — the actual output the user sees */
  .response-demo-result {
  	font-size: var(--font-size-base);
  	color: var(--text-primary);
  	line-height: var(--line-height-loose);
  	font-weight: 500;
  	padding: var(--space-3) var(--space-4);
  	background: rgba(59, 130, 246, 0.04);
  	border-left: 2px solid var(--blue-500);
  	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  /* Responsive — tablet */
  @media (max-width: 900px) {
  	.response-slide.response-slide-twocol {
  		grid-template-columns: 1fr;
  		gap: var(--space-8);
  		padding: var(--space-8) var(--space-6);
  		padding-bottom: var(--space-6);
  	}

  	.rc-macos-container.response-demo-macos {
  		margin: 0;
  		border-radius: var(--radius-lg);
  		border: 1px solid var(--border-default);
  	}

  	.response-demo-content {
  		padding: var(--space-5);
  		padding-bottom: var(--space-8);
  	}

  	.response-format-points {
  		margin-top: var(--space-5);
  	}
  }

  /* Responsive — mobile */
  @media (max-width: 480px) {
  	.response-slide.response-slide-twocol {
  		padding: var(--space-6);
  	}

  	.response-demo-comparison {
  		grid-template-columns: 1fr;
  		gap: var(--space-6);
  	}

  	.response-demo-content {
  		padding: var(--space-4);
  		padding-bottom: var(--space-6);
  	}

  	.response-demo-blueprint {
  		padding: var(--space-4);
  		gap: var(--space-4);
  	}

  	.response-demo-row-data {
  		gap: var(--space-5);
  	}
  }

  /* ============================================
     SOCIAL PROOF METRICS (Hero)
     ============================================ */
  .home-hero-proof-metrics {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: var(--space-4);
  	flex-wrap: wrap;
  	margin-bottom: var(--space-3);
  }

  .home-hero-proof-metric {
  	display: inline-flex;
  	align-items: center;
  	gap: var(--space-2);
  	font-size: var(--font-size-sm);
  	font-weight: 500;
  	color: var(--text-secondary);
  	white-space: nowrap;
  }

  .home-hero-proof-metric i {
  	font-size: var(--font-size-base);
  	color: var(--emerald-400);
  }

  .home-hero-proof-divider {
  	width: 1px;
  	height: 14px;
  	background: rgba(255, 255, 255, 0.15);
  	flex-shrink: 0;
  }

  .home-hero-logos {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: var(--space-4);
  	flex-wrap: wrap;
  }

  .home-hero-logos .home-hero-proof-text {
  	font-size: 0.8125rem;
  	color: var(--text-muted);
  	white-space: nowrap;
  }

  @media (max-width: 480px) {
  	.home-hero-proof-metrics {
  		gap: var(--space-2);
  	}

  	.home-hero-proof-metric {
  		font-size: var(--font-size-xs);
  		gap: var(--space-1);
  	}

  	.home-hero-proof-divider {
  		height: 10px;
  	}

  	.home-hero-logos .home-hero-proof-text {
  		font-size: var(--font-size-xs);
  	}
  }

  /* ============================================
     HOW IT WORKS — CLEAN 3-STEP FLOW
     ============================================ */
  #how-it-works-section {
  	padding-bottom: 0;
  	border-bottom: 1px solid var(--border-default);
  }

  @media (max-width: 900px) {
  	/* Keep header/row horizontal borders aligned to the mobile side rails. */
  	#how-it-works-section {
  		--hiw-mobile-inner-gutter: var(--space-4);
  		padding-left: var(--_rail-inset, var(--space-6));
  		padding-right: var(--_rail-inset, var(--space-6));
  	}

	/* Shared inner gutter: keep content off the rail lines on mobile. */
	#how-it-works-section .hiw-header .hiw-header-content,
	#how-it-works-section .hiw-section-header .hiw-header-content,
	#how-it-works-section .hiw-multichannel-content,
	#how-it-works-section .hiw-multichannel-row .hiw-channel-tabs,
	#how-it-works-section .hiw-cta-grid {
		padding-left: var(--hiw-mobile-inner-gutter);
		padding-right: var(--hiw-mobile-inner-gutter);
	}
  }

  @media (max-width: 480px) {
  	#how-it-works-section {
  		--hiw-mobile-inner-gutter: var(--space-3);
  	}
  }

  .hiw-header {
  	position: relative;
  	text-align: center;
  	margin-bottom: 0;
  	overflow: visible;
  }

  .hiw-header {
  	--bp-rail-extend-top: -320px;
  	--bp-rail-extend-bottom: -100px;
  }

  /* Slight rail variety so sections don’t look identical */
  .hiw-section-header.hiw-governance-header {
  	--bp-rail-extend-bottom: -24px;
  }
  /* 3-col NLP row and Integrations row: rails overshoot slightly */
  .hiw-governance-blueprint.hiw-nlp-row:not(.hiw-usecases-row) {
  	--bp-rail-extend: -24px;
  }
  .hiw-governance-blueprint.hiw-cta-row {
  	--bp-rail-extend-bottom: -32px;
  }
  .hiw-governance-blueprint.hiw-faq-row {
  	--bp-rail-extend-bottom: -40px;
  }

  .hiw-header .hiw-header-content {
  	max-width: 640px;
  	margin-left: auto;
  	margin-right: auto;
  }

  .hiw-header .hiw-header-content .sp-section-label,
  .hiw-header .hiw-header-content h2,
  .hiw-header .hiw-header-content p {
  	text-align: center;
  }

  .hiw-header .hiw-cta {
  	display: inline-flex;
  	margin-top: var(--space-6);
  }

  /* Border box wrapper — lines extend past viewport */
  .hiw-grid-box {
  	position: relative;
  	margin-top: var(--space-24);
  	padding: 0;
  }

  .hiw-grid-box > .hiw-steps {
  	--bp-rail-extend: -48px;
  }

  .hiw-steps {
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
  	gap: 0;
  	position: relative;
  }

  .hiw-step {
  	position: relative;
  	padding: calc(48px + var(--space-5)) var(--space-12) 0;
  	display: flex;
  	flex-direction: column;
  }

  /* Art wrapper — fills remaining space so tops align across columns */
  .hiw-step .hiw-step-art-wrap {
  	overflow: hidden;
  	margin-top: var(--space-6);
  	position: relative;
  }

  /* Connect & Build: art wrap and window fill to bottom (flush); chat stays auto height */
  .hiw-step .hiw-step-art-wrap:not(.hiw-step-art-wrap--chat) {
  	flex: 1;
  	min-height: 0;
  	display: flex;
  	flex-direction: column;
  }

  .hiw-step-art-wrap .hiw-step-art {
  	display: block;
  	width: 100%;
  	height: auto;
  	color: var(--border-default);
  	pointer-events: none;
  	/* Scroll-driven: JS sets --art-progress (0 → 1); default 1 so art is visible until JS runs */
  	transform: translateY(calc((1 - var(--art-progress, 1)) * 100%));
  	opacity: var(--art-progress, 1);
  	will-change: transform, opacity;
  	transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  }

  /* Reduced motion: skip animation and transitions */
  @media (prefers-reduced-motion: reduce) {
  	.hiw-step-art-wrap .hiw-step-art {
  		transform: none;
  		opacity: 1;
  		transition: none;
  	}
  }

  .hiw-chat-outgoing {
  	transform-origin: right bottom;
  	opacity: calc(var(--bubble-1, 1) * 0.4);
  	transform: scale(calc(0.4 + var(--bubble-1, 1) * 0.6));
  	will-change: transform, opacity;
  	transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  }

  .hiw-chat-incoming {
  	transform-origin: left bottom;
  	opacity: var(--bubble-2, 1);
  	transform: scale(calc(0.4 + var(--bubble-2, 1) * 0.6));
  	will-change: transform, opacity;
  	transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  }

  @media (prefers-reduced-motion: reduce) {
  	.hiw-chat-outgoing {
  		opacity: 0.4;
  		transform: none;
  		transition: none;
  	}
  	.hiw-chat-incoming {
  		opacity: 1;
  		transform: none;
  		transition: none;
  	}
  }

  /* ============================================
     HIW Art — Pure HTML/CSS (blueprint aesthetic)
     ============================================ */
  .hiw-step-art-wrap .hiw-art-terminal,
  .hiw-step-art-wrap .hiw-art-editor,
  .hiw-step-art-wrap--chat .hiw-art-chat {
  	border: 1px solid var(--border-default);
  	border-bottom: none;
  	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  	background: transparent;
  	box-shadow: none;
  	min-height: 140px;
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  }

  .hiw-step-art-wrap .hiw-art-terminal .rc-macos-header,
  .hiw-step-art-wrap .hiw-art-editor .rc-macos-header {
  	display: flex;
  	align-items: center;
  	min-height: 2.25rem;
  	padding: var(--space-2) var(--space-4);
  	background: transparent;
  	border-bottom: 1px solid var(--border-default);
  }

  /* Ask: iPhone-style top bar with notch (sits below rounded top) */
  .hiw-art-iphone .hiw-iphone-top {
  	position: relative;
  	padding-top: var(--space-4);
  	padding-bottom: var(--space-2);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	flex-shrink: 0;
  }

  .hiw-art-iphone .hiw-iphone-notch {
  	width: 4.5rem;
  	height: 0.75rem;
  	border: 1px solid var(--border-default);
  	border-radius: 999px;
  	background: transparent;
  }

  .hiw-step-art-wrap .hiw-art-tailscale-logo {
  	margin-left: auto;
  	opacity: 0.5;
  	width: auto;
  	height: 1.25rem;
  	display: block;
  }

  .hiw-step-art-wrap .hiw-art-editor .hiw-art-sql-label {
  	line-height: 1;
  }

  .hiw-art-terminal-content,
  .hiw-step-art-wrap .hiw-art-editor .rc-macos-content,
  .hiw-step-art-wrap .hiw-art-editor .hiw-art-editor-content {
  	background: transparent;
  	padding: var(--space-3) var(--space-4) var(--space-4);
  	gap: var(--space-2);
  	flex: 1;
  	min-height: 0;
  	align-items: flex-start;
  }

  .hiw-art-ip-line {
  	font-family: ui-monospace, monospace;
  	font-size: 0.75rem;
  	opacity: 0.4;
  	color: var(--text-primary);
  }

  /* Terminal: stacked bars below the IP line, left-aligned */
  .hiw-art-bars {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-2);
  	align-items: flex-start;
  	width: 100%;
  }

  .hiw-art-bar {
  	display: block;
  	height: 1px;
  	min-width: 2rem;
  	background: currentColor;
  	opacity: 0.4;
  	border-radius: 0;
  }

  .hiw-art-sql-label {
  	margin-left: auto;
  	font-family: ui-monospace, monospace;
  	font-size: 0.875rem;
  	opacity: 0.5;
  	color: var(--text-primary);
  }

  .hiw-art-editor-body {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-1);
  	min-width: 0;
  }

  .hiw-art-row {
  	display: flex;
  	align-items: center;
  	gap: var(--space-2);
  	min-height: 1.4em;
  }

  .hiw-art-gutter-num {
  	flex-shrink: 0;
  	width: 1.25rem;
  	text-align: right;
  	padding-right: var(--space-2);
  	border-right: 1px solid var(--border-default);
  	font-family: ui-monospace, monospace;
  	font-size: 0.5rem;
  	opacity: 0.35;
  	color: var(--text-primary);
  	line-height: 1.4;
  }

  .hiw-art-editor-body .hiw-art-code-line {
  	flex: 1;
  	min-width: 0;
  }

  .hiw-art-code-line {
  	font-family: ui-monospace, monospace;
  	font-size: 0.7rem;
  	opacity: 0.4;
  	color: var(--text-primary);
  	line-height: 1.4;
  }

  .hiw-art-editor-body .hiw-art-bar {
  	display: block;
  	min-width: 2rem;
  }

  /* Chat wrap: fill step height like Connect/Build, bubbles at top */
  .hiw-step .hiw-step-art-wrap--chat {
  	flex: 1;
  	min-height: 0;
  	display: flex;
  	flex-direction: column;
  }

  .hiw-step-art-wrap--chat .hiw-step-art {
  	flex: 1;
  	min-height: 0;
  	display: flex;
  	flex-direction: column;
  }

  /* Ask: chat content area inside macOS window */
  .hiw-art-chat-content {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-5);
  	align-items: stretch;
  	width: 100%;
  	justify-content: flex-start;
  	flex: 1;
  	min-height: 0;
  	padding: var(--space-3) var(--space-4) var(--space-4);
  	background: transparent;
  }

  /* Chat bubbles — outline only, match Connect/Build style */

  .hiw-chat-bubble {
  	position: relative;
  	padding: var(--space-2) var(--space-3);
  	background: transparent;
  	border: 1px solid var(--border-default);
  	font-size: var(--font-size-sm);
  	color: var(--text-primary);
  	width: fit-content;
  	max-width: 88%;
  }

  /* Rounded corners except the one where the tail connects (square) */
  .hiw-chat-bubble--outgoing {
  	align-self: flex-end;
  	margin-left: auto;
  	border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg);
  }

  .hiw-chat-bubble--incoming {
  	align-self: flex-start;
  	margin-right: auto;
  	border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0;
  	color: #fff;
  }

  /* Typing dots animation */
  .hiw-typing-dot {
  	animation: hiw-typing 1.4s ease-in-out infinite;
  }

  @keyframes hiw-typing {
  	0%, 60%, 100% { opacity: 0.2; }
  	30% { opacity: 0.6; }
  }

  @media (prefers-reduced-motion: reduce) {
  	.hiw-typing-dot {
  		animation: none;
  	}
  }


  /* Vertical lines between steps — blueprint overshoot on all */
  .hiw-step::before {
  	content: '';
  	position: absolute;
  	top: -48px;
  	bottom: -48px;
  	left: 0;
  	width: 1px;
  	background: var(--border-default);
  }

  /* First step: no left border on itself (covered by the viewport-extending line) */
  .hiw-step:first-child::before {
  	display: none;
  }

  /* Step meta — number + time badge inline */
  .hiw-step-meta {
  	display: flex;
  	align-items: center;
  	gap: var(--space-3);
  	margin-bottom: var(--space-4);
  }

  .hiw-step-meta .hiw-step-number {
  	margin-bottom: 0;
  }

  .hiw-step-number {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 48px;
  	height: 48px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	/* Static borders — always visible */
  	border: none;
  	border-right: 1px solid var(--border-default);
  	border-bottom: 1px solid var(--border-default);
  	background: none;
  }

  /* Number text — sweet scroll-driven animation */
  .hiw-step-number span {
  	font-family: 'Kalam', 'Bradley Hand', 'Brush Script MT', 'Segoe Script', cursive;
  	font-size: 1.5rem;
  	font-weight: 400;
  	line-height: 1;
  	color: var(--text-primary);
  	display: block;
  	opacity: var(--num-progress, 1);
  	transform: scale(calc(0.3 + var(--num-progress, 1) * 0.7)) rotate(calc((1 - var(--num-progress, 1)) * -15deg));
  	filter: blur(calc((1 - var(--num-progress, 1)) * 4px));
  	will-change: transform, opacity, filter;
  }

  .hiw-step-number {
  	--bp-inset: -1px;
  }

  /* Reduced motion: show numbers immediately */
  @media (prefers-reduced-motion: reduce) {
  	.hiw-step-number span {
  		opacity: 1;
  		transform: none;
  		filter: none;
  	}
  }

  .hiw-time-badge {
  	display: inline-flex;
  	align-items: center;
  	gap: var(--space-1);
  	font-size: var(--font-size-xs);
  	font-weight: 500;
  	color: var(--emerald-400);
  	background: color-mix(in srgb, var(--emerald-400) 8%, transparent);
  	border: 1px solid color-mix(in srgb, var(--emerald-400) 15%, transparent);
  	padding: 2px var(--space-2);
  	border-radius: var(--radius-pill);
  	white-space: nowrap;
  }

  .hiw-time-badge i {
  	font-size: 0.6875rem;
  }

  .hiw-step h4 {
  	font-size: 2.25rem;
  	font-weight: 700;
  	color: var(--text-primary);
  	margin: 0 0 var(--space-3) 0;
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  }

  .hiw-step p {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  	margin: 0;
  }

  /* Secured by — single-line trust callout */
  .hiw-secured-by {
  	display: flex;
  	align-items: center;
  	gap: var(--space-2);
  	margin-top: var(--space-2);
  	font-size: var(--font-size-sm);
  	color: var(--text-muted);
  }

  .hiw-secured-logo {
  	opacity: 0.7;
  }

  @media (max-width: 768px) {
  	.hiw-grid-box {
  		margin-top: var(--space-10);
  	}

  	.hiw-steps {
  		grid-template-columns: 1fr;
  		/* Extend steps full width so bottom border is flush with mockup below */
  		margin-left: calc(-1 * var(--space-4));
  		margin-right: calc(-1 * var(--space-4));
  	}

  	/* No vertical divider line between steps on mobile */
  	.hiw-step::before {
  		display: none;
  	}

  	.hiw-step {
  		border: none;
  		border-bottom: 1px solid var(--border-subtle);
		padding: calc(48px + var(--space-4)) calc(2 * var(--space-4)) 0;
  	}

	/* Keep number aligned with the mobile step box, not viewport edge. */
	.hiw-step-number {
		left: var(--space-4);
	}

	.hiw-step:last-child {
		border-bottom: 1px solid var(--border-subtle);
	}

  	.hiw-step h4 {
  		font-size: var(--font-size-lg);
  		margin-bottom: var(--space-2);
  	}

  	.hiw-step-art-wrap .hiw-art-terminal,
  	.hiw-step-art-wrap .hiw-art-editor,
  	.hiw-step-art-wrap--chat .hiw-art-chat {
  		border-color: var(--border-subtle);
  		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  		min-height: 100px;
  	}
  }

  @media (max-width: 480px) {
  	.hiw-grid-box {
  		margin-top: var(--space-8);
  		padding: var(--space-6) 0;
  	}

  	.hiw-steps {
  		margin-left: calc(-1 * var(--space-3));
  		margin-right: calc(-1 * var(--space-3));
  	}

  	.hiw-step {
		padding: calc(48px + var(--space-3)) calc(2 * var(--space-3)) 0;
  	}

	.hiw-step-number {
		left: var(--space-3);
	}
  }

  /* ============================================
     MULTI-CHANNEL ACCESS — Blueprint row joined to 3-step grid
     ============================================ */
  .hiw-multichannel-row {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	align-items: center;
  	gap: var(--space-12);
  	padding: calc(48px + var(--space-5)) var(--space-12);
  	border-top: 1px solid var(--border-default);
  	position: relative;
  }

  .hiw-multichannel-content {
  	max-width: 540px;
  }

  .hiw-multichannel-content .sp-section-label {
  	margin-bottom: var(--space-3);
  }

  .hiw-multichannel-content h3 {
  	font-size: var(--font-size-2xl);
  	font-weight: 600;
  	color: var(--text-primary);
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  	margin: 0 0 var(--space-3) 0;
  }

  .hiw-multichannel-content p {
  	font-size: var(--font-size-base);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  	margin: 0;
  }

  /* Channel tabs inside blueprint row */
  .hiw-channel-tabs {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-self: center;
  	gap: var(--space-4);
  	margin-bottom: 0;
  }

  /* Blueprint override for channels-card-wrapper inside hiw-grid-box */
  .hiw-channels-blueprint {
  	background: none !important;
  	border: none !important;
  	border-top: 1px solid var(--border-default) !important;
  	border-radius: 0 !important;
  	padding: 0 !important;
  	overflow: visible !important;
  	position: relative;
  }

  /* Two-column grid: text | divider | mockup */
  .hiw-channels-grid {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	min-height: 0;
  	overflow: visible;
  	position: relative;
  }

  /* Left column: stacked channel boxes */
  .hiw-channels-text {
  	display: flex;
  	flex-direction: column;
  	border-right: 1px solid var(--border-default);
  	overflow: visible;
  }

  .hiw-channel-box {
  	display: flex;
  	align-items: flex-start;
  	gap: var(--space-5);
  	padding: var(--space-8) var(--space-10);
  	border-bottom: 1px solid var(--border-default);
  }

  .hiw-channel-box:last-child {
  	border-bottom: none;
  }

  .hiw-channel-box {
  	cursor: pointer;
  	transition: background 0.2s ease;
  	position: relative;
  }

  .hiw-channel-box:hover {
  	background: rgba(255, 255, 255, 0.02);
  }

  .hiw-channel-box.active {
  	background: rgba(255, 255, 255, 0.04);
  }

  .hiw-channel-box.active .hiw-channel-box-title {
  	color: var(--text-primary);
  }

  .hiw-channel-box.active .hiw-channel-box-desc {
  	color: var(--text-secondary);
  }

  /* Web box: top border from viewport left to element right (override bp-1-tl-left-vw right edge) */
  .hiw-channel-box.bp-1-tl-left-vw[data-channel="web"]::before {
  	right: 0;
  }

  /* Twilio logo in SMS channel box */
  .hiw-channel-box-logo {
  	flex-shrink: 0;
  	margin-left: auto;
  	display: flex;
  	align-items: center;
  }

  .hiw-channel-box-logo .twilio-logo {
  	width: 28px;
  	height: 28px;
  	opacity: 0.35;
  	transition: opacity 0.2s ease;
  }

  .hiw-channel-box.active .hiw-channel-box-logo .twilio-logo {
  	opacity: 0.5;
  }

  .hiw-channel-box-text {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-2);
  }

  .hiw-channel-box-title {
  	font-size: 1rem;
  	font-weight: 600;
  	color: var(--text-primary);
  	letter-spacing: var(--letter-spacing-normal);
  }

  .hiw-channel-box-desc {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  }

  /* Right column: mockup — blueprint style */
  .hiw-channels-mockup {
  	display: flex;
  	flex-direction: column;
  	padding: var(--space-12);
  	padding-bottom: 0;
  	overflow: hidden;
  	position: relative;
  }

  /* Override old channel-section selectors for the new mockup container */
  .hiw-channels-mockup .channel-mockup {
  	display: flex;
  	flex-direction: column;
  	margin-bottom: 0;
  }

  .hiw-channels-mockup .channel-content-wrapper {
  	display: flex;
  	flex-direction: column;
  }

  .hiw-channels-mockup .channel-panel {
  	display: none;
  }

  .hiw-channels-mockup .channel-panel.active {
  	display: flex;
  	flex-direction: column;
  }

  .hiw-channels-mockup .rc-macos-container.channel-macos-flush {
  	display: flex;
  	flex-direction: column;
  	border-radius: 0;
  	border: 1px solid var(--border-default);
  	border-bottom: none;
  	box-shadow: none;
  	background: transparent;
  	overflow: visible;
  }

  /* Blueprint header — thin border line, muted dots */
  .hiw-channels-mockup .rc-macos-container.channel-macos-flush .rc-macos-header {
  	border-radius: 0;
  	border-bottom: 1px solid var(--border-default);
  	background: transparent;
  	padding: var(--space-3) var(--space-5);
  }

  .hiw-channels-mockup .rc-macos-container.channel-macos-flush .rc-macos-header .rc-macos-dot {
  	opacity: 1;
  }

  /* Content area keeps its original background */
  .hiw-channels-mockup .rc-macos-container.channel-macos-flush .rc-macos-content {
  	padding: var(--space-6);
  	padding-bottom: var(--space-16);
  	justify-content: flex-start;
  	background: var(--charcoal-900);
  }

  /* Mobile channel descriptions inside mockup column */
  .hiw-channels-mockup .channel-descriptions-mobile {
  	display: none;
  }

  /* ============================================
     QUERY TEMPLATES HEADER — Blueprint row
     ============================================ */
  .hiw-section-header {
  	position: relative;
  	text-align: center;
  	padding: var(--space-16) 0 var(--space-8);
  	border-top: 1px solid var(--border-default);
  }

  .hiw-section-header .hiw-header-content {
  	max-width: 640px;
  	margin-left: auto;
  	margin-right: auto;
  }

  .hiw-section-header .hiw-header-content .sp-section-label,
  .hiw-section-header .hiw-header-content h2,
  .hiw-section-header .hiw-header-content p {
  	text-align: center;
  }

  /* ============================================
     GOVERNANCE DEMO — Blueprint row joined to grid
     ============================================ */
  .hiw-governance-blueprint {
  	background: none !important;
  	border: none !important;
  	border-top: 1px solid var(--border-default) !important;
  	border-radius: 0 !important;
  	padding: 0 !important;
  	overflow: visible !important;
  	position: relative;
  }

  /* Two-column layout: text left, mockups right */
  .hiw-governance-grid {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  	min-height: 0;
  	overflow: visible;
  	position: relative;
  }

  /* Centre divider line */
  .hiw-governance-grid::before {
  	content: '';
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 50%;
  	width: 1px;
  	background: var(--border-default);
  	pointer-events: none;
  }

  /* Left column: text + inline mockups */
  .hiw-governance-text {
  	display: flex;
  	flex-direction: column;
  	padding: var(--space-12);
  	padding-bottom: 0;
  }

  .hiw-governance-text .rc-row-label {
  	margin-bottom: var(--space-5);
  }

  .hiw-governance-text h3 {
  	font-size: var(--font-size-2xl);
  	font-weight: 600;
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  	color: var(--text-primary);
  	margin: 0 0 var(--space-3) 0;
  }

  .hiw-governance-text p {
  	font-size: var(--font-size-base);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  	margin: 0;
  }

  /* Compact SQL mockup below text — flush to bottom */
  .governance-mockups-inline {
  	margin-top: auto;
  	padding-top: var(--space-8);
  	width: 100%;
  }

  /* Blueprint-style SQL mockup — flush bottom in governance section */
  .governance-mockups-inline .sql-mockup-inline {
  	margin-top: var(--space-6);
  }

  /* Right column: intent matching */
  .hiw-governance-right {
  	display: flex;
  	flex-direction: column;
  	padding: var(--space-12);
  }

  .hiw-governance-right .rc-row-label {
  	margin-bottom: var(--space-5);
  }

  .hiw-governance-right h3 {
  	font-size: var(--font-size-2xl);
  	font-weight: 600;
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  	color: var(--text-primary);
  	margin: 0 0 var(--space-3) 0;
  }

  .hiw-governance-right p {
  	font-size: var(--font-size-base);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  	margin: 0;
  }

  /* Intent matching visual */
  .intent-map {
  	margin-top: auto;
  	padding-top: var(--space-8);
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	gap: var(--space-5);
  	width: 100%;
  }

  .intent-map-col {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-3);
  }

  .intent-map-label {
  	font-size: var(--font-size-xs);
  	font-weight: 600;
  	text-transform: uppercase;
  	letter-spacing: 0.05em;
  	color: var(--text-muted);
  }

  .intent-map-phrases {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-2);
  }

  .intent-phrase {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	padding-left: var(--space-3);
  	border-left: 2px solid var(--accent);
  	line-height: var(--line-height-normal);
  }

  .intent-map-arrow {
  	color: var(--text-muted);
  	font-size: 16px;
  	flex-shrink: 0;
  }

  .intent-map-result code {
  	font-size: var(--font-size-xs);
  	font-family: var(--font-mono, monospace);
  	color: var(--text-muted);
  	background: var(--bg-input);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-md);
  	padding: var(--space-2) var(--space-3);
  	white-space: nowrap;
  }

  /* CTA blueprint row — two-column: text left, button right */
  .hiw-cta-grid {
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	gap: var(--space-12);
  	padding: calc(48px + var(--space-5)) var(--space-12);
  }

  .hiw-cta-text {
  	max-width: 540px;
  }

  .hiw-cta-text h2 {
  	font-size: var(--font-size-2xl);
  	font-weight: 600;
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  	color: var(--text-primary);
  	margin: 0 0 var(--space-3) 0;
  }

  .hiw-cta-text p {
  	font-size: var(--font-size-base);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  	margin: 0;
  }

  .hiw-cta-action {
  	flex-shrink: 0;
  }

  /* NLP 3-column grid */
  .hiw-nlp-grid {
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
  	position: relative;
  	overflow: visible;
  }

  .hiw-nlp-col {
  	padding: var(--space-12);
  	position: relative;
  }

  /* Vertical dividers between columns — overshoot bottom */
  .hiw-nlp-col + .hiw-nlp-col::before {
  	content: '';
  	position: absolute;
  	top: 0;
  	bottom: -48px;
  	left: 0;
  	width: 1px;
  	background: var(--border-default);
  }

  .hiw-nlp-col .rc-row-label {
  	margin-bottom: var(--space-4);
  }

  .hiw-nlp-col h4 {
  	font-size: var(--font-size-lg);
  	font-weight: 600;
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: var(--line-height-snug);
  	color: var(--text-primary);
  	margin: 0 0 var(--space-3) 0;
  }

  .hiw-nlp-col p {
  	font-size: var(--font-size-sm);
  	color: var(--text-secondary);
  	line-height: var(--line-height-loose);
  	margin: 0;
  }

  .hiw-nlp-col .card-link {
  	position: absolute;
  	right: 0;
  	bottom: 0;
  	margin: 0;
  	display: inline-flex;
  	align-items: center;
  	gap: var(--space-2);
  	padding: var(--space-3) var(--space-4);
  	border-top: 1px solid var(--border-default);
  	border-left: 1px solid var(--border-default);
  	font-size: var(--font-size-xs);
  	font-weight: 500;
  	color: var(--text-secondary);
  	text-decoration: none;
  	transition: background 150ms ease, color 150ms ease, gap 150ms ease;
  }

  .hiw-nlp-col .card-link i {
  	font-size: 14px;
  }

  .hiw-nlp-col .card-link:hover {
  	background: rgba(255, 255, 255, 0.06);
  	color: var(--blue-400);
  	gap: var(--space-3);
  }

  /* Security stat columns */
  .hiw-stat-col {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	text-align: center;
  	gap: var(--space-2);
  	padding: var(--space-10) var(--space-6);
  }

  .hiw-stat-value {
  	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  	font-weight: 700;
  	color: var(--text-primary);
  	letter-spacing: var(--letter-spacing-tight);
  	line-height: 1;
  }

  .hiw-stat-unit {
  	font-size: 0.5em;
  	font-weight: 500;
  	color: var(--text-secondary);
  }

  .hiw-stat-label {
  	font-size: var(--font-size-sm);
  	color: var(--text-muted);
  	line-height: 1;
  }

  /* Security 4-column stats grid */
  .hiw-security-grid {
  	display: grid;
  	grid-template-columns: repeat(4, 1fr);
  	gap: 0;
  	position: relative;
  }

  /* Vertical dividers between stat columns */
  .hiw-security-grid .hiw-stat-col + .hiw-stat-col {
  	border-left: 1px solid var(--border-default);
  }

  /* Integration logos in blueprint columns */
  .hiw-integration-logo {
  	display: block;
  	margin-bottom: var(--space-4);
  	opacity: 0.7;
  }

  /* 4-column variant */
  .hiw-nlp-grid-4 {
  	grid-template-columns: repeat(4, 1fr);
  }

  /* Example question quotes */
  .hiw-usecase-examples {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-2);
  	margin-top: var(--space-6);
  }

  .hiw-usecase-examples span {
  	font-size: var(--font-size-xs);
  	color: var(--text-muted);
  	font-style: italic;
  }

  /* Use case clickable links */
  .hiw-usecase-links {
  	display: flex;
  	flex-direction: column;
  	gap: var(--space-3);
  	margin-top: var(--space-6);
  }

  .hiw-usecase-link {
  	display: flex;
  	align-items: center;
  	gap: var(--space-3);
  	padding: var(--space-3) var(--space-4);
  	border: 1px solid var(--border-subtle);
  	border-radius: var(--radius-md);
  	text-decoration: none;
  	transition: border-color 0.2s ease;
  }

  .hiw-usecase-link:hover {
  	border-color: var(--border-hover);
  }

  .hiw-usecase-link-text {
  	flex: 1;
  	min-width: 0;
  }

  .hiw-usecase-link-text h5 {
  	font-size: var(--font-size-sm);
  	font-weight: 600;
  	color: var(--text-primary);
  	margin: 0 0 var(--space-1) 0;
  }

  .hiw-usecase-link-text span {
  	font-size: var(--font-size-xs);
  	color: var(--text-muted);
  	font-style: italic;
  }

  .hiw-usecase-link > i {
  	color: var(--text-muted);
  	font-size: 14px;
  	flex-shrink: 0;
  }

  @media (max-width: 900px) {
  	.hiw-nlp-grid,
  	.hiw-nlp-grid-4 {
  		grid-template-columns: 1fr;
  	}

  	.hiw-nlp-col + .hiw-nlp-col::before {
  		top: 0;
  		bottom: auto;
  		left: 0;
  		right: 0;
  		width: auto;
  		height: 1px;
  	}

  	.hiw-nlp-col {
  		padding: var(--space-8) var(--space-6);
  		padding-bottom: calc(var(--space-8) + 52px);
  	}

	.hiw-nlp-col .card-link {
		position: absolute;
		right: 0;
		bottom: 0;
		margin: 0;
		align-self: auto;
	}

  	.hiw-nlp-grid {
  		overflow: hidden;
  	}

  	.hiw-nlp-col:last-child::after {
  		display: none;
  	}
  }

  @media (max-width: 900px) {
  	.hiw-multichannel-row {
  		grid-template-columns: 1fr;
  		gap: var(--space-8);
  		padding: var(--space-8) var(--space-6);
  		text-align: center;
  	}

  	.hiw-multichannel-row .hiw-multichannel-content {
  		max-width: none;
  	}

  	.hiw-channel-tabs {
  		justify-self: center;
  		gap: var(--space-2);
  	}

  	.hiw-channel-tabs .handwritten-label {
  		font-size: 0.875rem;
  	}

  	.hiw-channel-tabs .handwritten-label .hero-arrow {
  		width: 28px;
  		height: 18px;
  	}

  	.hiw-channel-tabs .tabs-pills-wrapper {
  		padding: var(--space-1);
  	}

  	.hiw-channel-tabs .tab-trigger-pill {
  		padding: var(--space-2) var(--space-4);
  		font-size: 0.8125rem;
  	}

  	.hiw-channels-grid {
  		grid-template-columns: 1fr;
  	}

  	.hiw-governance-grid {
  		grid-template-columns: 1fr;
  	}

  	.hiw-governance-grid::before {
  		display: none;
  	}

  	.hiw-governance-text {
  		padding: var(--space-8) var(--space-6);
  	}

  	.hiw-governance-right {
  		padding: var(--space-8) var(--space-6);
  }

  	.hiw-channels-text {
  		border-right: none;
  		border-bottom: 1px solid var(--border-default);
  	}

  	.hiw-channel-box {
  		padding: var(--space-6) var(--space-5);
  		gap: var(--space-4);
  	}

  	.hiw-channel-box-title {
  		font-size: var(--font-size-base);
  	}

  	.hiw-channel-box-desc {
  		font-size: var(--font-size-sm);
  		line-height: 1.55;
  	}

  	.hiw-channels-mockup {
  		padding: var(--space-6);
  	}

  	/* Show mobile descriptions */
  	.hiw-channels-mockup .channel-descriptions-mobile {
  		display: block;
  		padding: 0 0 var(--space-4);
  	}

  	.hiw-channels-mockup .channel-desc {
  		display: none;
  	}

  	.hiw-channels-mockup .channel-desc.active {
  		display: block;
  	}

  	.hiw-channels-mockup .channel-desc-title {
  		font-size: 1rem;
  		font-weight: 600;
  		color: var(--text-primary);
  		margin-bottom: var(--space-2);
  	}

  	.hiw-channels-mockup .channel-desc-text {
  		font-size: var(--font-size-sm);
  		color: var(--text-secondary);
  		line-height: var(--line-height-loose);
  	}
  }

  @media (max-width: 768px) {
  	.hiw-multichannel-row {
  		padding: var(--space-8) var(--space-4);
  		gap: var(--space-6);
  	}

  	/* On mobile: steps (0), intro (1), channels section (2), tabs (4). Keep #channels-section as a real flex item so it never collapses and always appears after steps, before The Platform. */
  	.hiw-grid-box {
  		display: flex;
  		flex-direction: column;
  	}

  	.hiw-grid-box > .hiw-steps {
  		order: 0;
  	}

  	.hiw-multichannel-row {
  		display: contents;
  	}

  	.hiw-multichannel-row .hiw-multichannel-content {
  		order: 1;
  	}

  	.hiw-multichannel-content p {
  		margin-bottom: var(--space-6);
  	}

  	/* Pills below intro, above mockup on mobile */
  	.hiw-multichannel-row .hiw-channel-tabs {
  		order: 2;
  		margin-top: 0;
  		margin-bottom: 0;
  		padding-top: var(--space-4);
  		padding-bottom: var(--space-4);
  		border-bottom: 1px solid var(--border-default);
  		width: 100%;
  		align-items: stretch;
  	}

  	#channels-section {
  		order: 3;
  	}

  	/* On mobile, mockup has its own descriptions — hide the channel boxes list */
  	#channels-section .hiw-channels-text {
  		display: none;
  	}

  	.hiw-channel-tabs .tabs-list-pills,
  	.hiw-channel-tabs .tabs-pills-wrapper {
  		width: 100%;
  		display: flex;
  	}

  	.hiw-channel-tabs .tab-trigger-pill {
  		flex: 1;
  		min-width: 0;
  		display: flex;
  		align-items: center;
  		justify-content: center;
  	}

  	/* Mockup flush with tabs on mobile: no negative margin so mockup doesn’t overlap tabs */
  	#channels-section .hiw-channels-mockup .channel-mockup {
  		margin-bottom: 0;
  	}
  	#channels-section .hiw-channels-mockup .rc-macos-container.channel-macos-flush .rc-macos-content {
		padding-bottom: 0;
  	}

  	.hiw-channel-tabs .tab-trigger-pill {
  		padding: var(--space-3) var(--space-6);
  		font-size: 0.9375rem;
  	}

  	.hiw-cta-grid {
  		flex-direction: column;
  		align-items: center;
  		text-align: center;
  		gap: var(--space-6);
  		padding: var(--space-8) var(--space-6);
  	}

  	.hiw-cta-grid .hiw-cta-text {
  		max-width: none;
  	}

  	.hiw-stat-col {
  		padding: var(--space-8) var(--space-6);
  	}

  	.hiw-security-grid {
  		grid-template-columns: repeat(2, 1fr);
  	}

  	.hiw-security-grid .hiw-stat-col {
  		border-bottom: 1px solid var(--border-default);
  	}

  	.hiw-security-grid .hiw-stat-col:nth-child(odd) {
  		border-left: none;
  	}

  	.hiw-security-grid .hiw-stat-col:nth-last-child(-n+2) {
  		border-bottom: none;
  	}

  	/* Extra bottom padding for faq-toggle button space */
  	.hiw-faq-left {
  		padding-bottom: calc(var(--space-8) + 44px);
  	}

  	.hiw-governance-text {
  		padding: var(--space-6) var(--space-4);
  	}

  	.hiw-governance-right {
  		padding: var(--space-6) var(--space-4);
  	}

  	.governance-mockups-inline {
  		max-width: 100%;
  	}

  	.hiw-channel-box {
  		padding: var(--space-6) var(--space-4);
  		gap: var(--space-4);
  	}

  	.hiw-channel-box-desc {
  		line-height: 1.6;
  	}
  }

  @media (max-width: 480px) {
	.hiw-multichannel-row .hiw-multichannel-content {
		margin-top: 0;
	}

  	.hiw-multichannel-row {
  		padding: var(--space-6) var(--space-3);
  		gap: var(--space-5);
  	}

  	.hiw-multichannel-content h3 {
  		font-size: var(--font-size-xl);
  		line-height: var(--line-height-snug);
  	}

  	.hiw-multichannel-content p {
  		font-size: var(--font-size-sm);
  		line-height: 1.55;
  		margin-bottom: var(--space-6);
  	}

  	.hiw-channel-tabs {
  		align-items: stretch;
  	}

  	.hiw-channel-box {
  		padding: var(--space-5) var(--space-3);
  		gap: var(--space-3);
  	}

  	.hiw-channel-box-title {
  		font-size: var(--font-size-sm);
  		font-weight: 600;
  	}

  	.hiw-channel-box-desc {
  		font-size: 0.8125rem;
  		line-height: 1.6;
  		min-height: 0;
  	}

  	.hiw-channels-mockup {
  		padding: var(--space-4);
  	}

  	.hiw-channel-box-icon {
  		width: 36px;
  		height: 36px;
  	}

  	.hiw-channel-box-icon i {
  		font-size: 1.125rem;
  	}

  	.hiw-channel-box-title {
  		font-size: var(--font-size-sm);
  	}

  	.hiw-channel-box-desc {
  		font-size: var(--font-size-xs);
  	}
  }

  /* ============================================
     MID-PAGE CTA
     ============================================ */
  .mid-cta-section {
  	padding-top: 0;
  }

  .mid-cta-card {
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	gap: var(--space-12);
  	padding: var(--space-12) var(--space-16);
  	background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%);
  	border: 1px solid rgba(59, 130, 246, 0.15);
  	border-radius: var(--radius-xl);
  }

  .mid-cta-content h3 {
  	font-size: var(--font-size-2xl);
  	font-weight: 600;
  	color: var(--text-primary);
  	letter-spacing: var(--letter-spacing-tight);
  	margin: 0 0 var(--space-3) 0;
  }

  .mid-cta-content p {
  	font-size: var(--font-size-base);
  	color: var(--text-secondary);
  	line-height: var(--line-height-relaxed);
  	margin: 0;
  }

  .mid-cta-buttons {
  	display: flex;
  	align-items: center;
  	gap: var(--space-6);
  	flex-shrink: 0;
  }

  .mid-cta-secondary {
  	display: inline-flex;
  	align-items: center;
  	gap: var(--space-2);
  	font-size: var(--font-size-sm);
  	font-weight: 500;
  	color: var(--blue-400);
  	text-decoration: none;
  	white-space: nowrap;
  	transition: gap var(--transition-fast);
  }

  .mid-cta-secondary:hover {
  	gap: var(--space-3);
  }

  @media (max-width: 900px) {
  	.mid-cta-card {
  		flex-direction: column;
  		align-items: flex-start;
  		gap: var(--space-8);
  		padding: var(--space-10);
  	}
  }

  @media (max-width: 480px) {
  	.mid-cta-card {
  		padding: var(--space-6);
  		gap: var(--space-6);
  	}

  	.mid-cta-content h3 {
  		font-size: var(--font-size-xl);
  	}

  	.mid-cta-buttons {
  		flex-direction: column;
  		align-items: flex-start;
  		gap: var(--space-3);
  		width: 100%;
  	}

  	.mid-cta-buttons .btn-hero-primary {
  		width: 100%;
  		justify-content: center;
  	}
  }

  /* ============================================
     USE CASES SLIDE CTA LINK
     ============================================ */
  .use-cases-slide-cta {
  	display: inline-flex;
  	align-items: center;
  	gap: var(--space-2);
  	font-size: var(--font-size-sm);
  	font-weight: 500;
  	color: var(--blue-400);
  	text-decoration: none;
  	margin-top: var(--space-4);
  	transition: gap var(--transition-fast);
  }

  .use-cases-slide-cta:hover {
  	gap: var(--space-3);
  }

  .use-cases-slide-cta i {
  	font-size: var(--font-size-sm);
  }

  /* ============================================
     INTEGRATION BADGE (COMING SOON)
     ============================================ */
  .integration-badge-soon {
  	display: inline-flex;
  	align-items: center;
  	font-size: var(--font-size-xs);
  	font-weight: 500;
  	color: var(--text-muted);
  	background: rgba(255, 255, 255, 0.04);
  	border: 1px solid var(--border-subtle);
  	padding: var(--space-1) var(--space-3);
  	border-radius: var(--radius-pill);
  	margin-top: var(--space-2);
  }

  /* FAQ styles now in marketing.css (shared) */

@media (max-width: 900px) {
	/* Standardize top inset for HIW mobile sections to match header rhythm. */
	#how-it-works-section {
		--hiw-mobile-section-top-inset: var(--space-16);
	}

	#how-it-works-section .hiw-multichannel-content,
	#how-it-works-section .hiw-governance-text,
	#how-it-works-section .hiw-governance-right,
	#how-it-works-section .hiw-nlp-col,
	#how-it-works-section .hiw-cta-grid,
	#how-it-works-section .hiw-faq-left {
		padding-top: var(--hiw-mobile-section-top-inset);
	}
}