/*
  Extended Design System Variables

  Core colors are handled by DaisyUI theme in tailwind.config.js
  This file contains additional utilities and gradients
*/

/* v3 navbar logo — override hardcoded fill from chatac-logo.svg */
.landing-v3 .v3-navbar__logo-svg path,
.landing-v3 .v3-navbar__logo-svg .cls-1,
.landing-v3 .v3-navbar__logo-svg .cls-2 {
  fill: currentColor !important;
}

:root {
  /* ===========================================
     GRADIENTS (not available in DaisyUI)
     =========================================== */
  --gradient-hero: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(171,230,245,0.12) 34%, rgba(75,78,220,0.08) 59%, rgba(255,255,255,1) 100%);
  --gradient-cta: linear-gradient(45deg, #4B4EDC 0%, #6366F1 100%);
  --gradient-subtle: linear-gradient(180deg, oklch(var(--b2)) 0%, oklch(var(--b1)) 100%);
}

/* ===========================================
   GRADIENT UTILITIES
   =========================================== */
.bg-gradient-hero {
  background:
    var(--gradient-hero),
    repeating-linear-gradient(45deg, transparent, transparent 39px, rgba(190,195,225,0.08) 39px, rgba(190,195,225,0.08) 40px),
    repeating-linear-gradient(-45deg, transparent, transparent 39px, rgba(190,195,225,0.08) 39px, rgba(190,195,225,0.08) 40px);
}

.bg-gradient-cta {
  background: var(--gradient-cta);
}

.bg-gradient-subtle {
  background: var(--gradient-subtle);
}

.bg-section-alt {
  background: #EDF4F7;
}

[data-theme="dark"] .bg-section-alt {
  background: oklch(var(--b2));
}

[data-theme="dark"] .bg-gradient-hero {
  background:
    linear-gradient(45deg, transparent 0%, rgba(171,230,245,0.1) 40%, rgba(75,78,220,0.08) 64%, transparent 100%),
    repeating-linear-gradient(45deg, transparent, transparent 39px, rgba(200,205,230,0.03) 39px, rgba(200,205,230,0.03) 40px),
    repeating-linear-gradient(-45deg, transparent, transparent 39px, rgba(200,205,230,0.03) 39px, rgba(200,205,230,0.03) 40px);
}

/* Feature page gradients */
.bg-gradient-features {
  background: linear-gradient(180deg, #FFFFFF -4.62%, #EDF4F7 67.78%);
}

[data-theme="dark"] .bg-gradient-features {
  background: linear-gradient(180deg, oklch(var(--b1)) -4.62%, oklch(var(--b2)) 67.78%);
}

.bg-gradient-learning {
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF4F7 100%);
}

[data-theme="dark"] .bg-gradient-learning {
  background: linear-gradient(180deg, oklch(var(--b1)) 0%, oklch(var(--b2)) 100%);
}

.bg-gradient-how-it-works {
  background: linear-gradient(325.06deg, rgba(171, 230, 245, 0.3) 7.66%, rgba(75, 78, 220, 0.24) 46.67%, rgba(171, 230, 245, 0.18) 78.22%);
}

[data-theme="dark"] .bg-gradient-how-it-works {
  background: linear-gradient(325.06deg, rgba(171, 230, 245, 0.1) 7.66%, rgba(75, 78, 220, 0.15) 46.67%, rgba(171, 230, 245, 0.08) 78.22%);
}

.bg-illustration {
  background: #F2F3FB;
}

[data-theme="dark"] .bg-illustration {
  background: oklch(var(--b2));
}

.bg-illustration-blue {
  background: #EBF3FF;
}

[data-theme="dark"] .bg-illustration-blue {
  background: oklch(var(--b2));
}

.border-section-divider {
  border-color: #DEDEDE;
}

[data-theme="dark"] .border-section-divider {
  border-color: oklch(var(--bc) / 0.15);
}

/* ===========================================
   SECTION UTILITIES
   =========================================== */
.section-padding {
  @apply py-12 md:py-16 lg:py-20;
}

.section-padding-sm {
  @apply py-8 md:py-12;
}

.section-padding-lg {
  @apply py-16 md:py-20 lg:py-24;
}

/* ===========================================
   TEXT UTILITIES
   =========================================== */
.text-body {
  @apply text-mono-35;
}

.text-muted {
  @apply text-mono-50;
}

/* Heading styles */
.heading-1 {
  @apply text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight;
}

.heading-2 {
  @apply text-3xl md:text-4xl font-bold tracking-tight;
}

.heading-3 {
  @apply text-2xl md:text-3xl font-semibold;
}

.heading-4 {
  @apply text-xl md:text-2xl font-semibold;
}

/* ===========================================
   CARD UTILITIES
   =========================================== */
.card-hover {
  @apply transition-shadow duration-200 hover:shadow-card-hover;
}

/* ===========================================
   ANIMATIONS
   =========================================== */

/* Fade in from bottom animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Scale in animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation utilities */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Scroll-triggered animation states */
.scroll-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   CUSTOM JOURNEYS VISUAL ANIMATION
   =========================================== */
.cj-visual .cj-layer {
  position: absolute;
  inset: 0;
}

.cj-bg img {
  opacity: 0;
  transform: scale(0) rotate(-90deg);
  transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-visible .cj-bg img {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.cj-phone img {
  opacity: 0;
  transform: translateY(100%) scale(0.7);
  transition: opacity 0.6s ease-out, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-visible .cj-phone img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cj-icon {
  opacity: 0;
  transform: scale(0) rotate(-180deg);
  transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-visible .cj-icon-1 { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: 0.8s; }
.is-visible .cj-icon-2 { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: 1.0s; }
.is-visible .cj-icon-3 { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: 1.2s; }
.is-visible .cj-icon-4 { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: 1.4s; }

@keyframes cjFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

.is-visible .cj-icon-1 { animation: cjFloat 3s ease-in-out 1.8s infinite; }
.is-visible .cj-icon-2 { animation: cjFloat 3.4s ease-in-out 2.0s infinite; }
.is-visible .cj-icon-3 { animation: cjFloat 2.8s ease-in-out 2.2s infinite; }
.is-visible .cj-icon-4 { animation: cjFloat 3.2s ease-in-out 2.4s infinite; }

@keyframes cjPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

.is-visible .cj-bg img:nth-child(1) { animation: cjPulse 4s ease-in-out 1.5s infinite; }
.is-visible .cj-bg img:nth-child(2) { animation: cjPulse 4.5s ease-in-out 1.8s infinite; }
.is-visible .cj-bg img:nth-child(3) { animation: cjPulse 3.5s ease-in-out 2.0s infinite; }
.is-visible .cj-bg img:nth-child(4) { animation: cjPulse 5s ease-in-out 2.3s infinite; }

/* ===========================================
   CASE STUDY — IMPACT SECTION
   Animation sequence (all triggered by .is-visible):
   1. Cards slide up          (0.2s / 0.4s)
   2. Metric cards fade in    (0.5s–0.9s)
   3. Bars fill + numbers     (1.0s–1.6s, 1.2s duration)
   4. Markers appear          (2.2s–2.8s)
   5. Badges slide up         (2.4s–3.0s)
   =========================================== */

.impact-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.cs-impact-chatac {
  background: linear-gradient(339.58deg, #4B4EDC 69.99%, #2AF598 152.54%);
}
.is-visible .impact-card-1 { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.is-visible .impact-card-2 { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

.impact-metric {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.is-visible .impact-card-1 .impact-metric:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.is-visible .impact-card-1 .impact-metric:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.is-visible .impact-card-2 .impact-metric:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.is-visible .impact-card-2 .impact-metric:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }

.impact-bar,
.impact-right-pill {
  transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.impact-bar       { --bar-pct: 0%; width: var(--bar-pct); border-radius: 9999px; z-index: 1; }
.impact-right-pill { --pill-pct: 100%; width: var(--pill-pct); }

.is-visible .impact-card-1 .impact-metric:nth-child(1) .impact-bar,
.is-visible .impact-card-1 .impact-metric:nth-child(1) .impact-right-pill { transition-delay: 1.0s; }
.is-visible .impact-card-1 .impact-metric:nth-child(2) .impact-bar,
.is-visible .impact-card-1 .impact-metric:nth-child(2) .impact-right-pill { transition-delay: 1.4s; }
.is-visible .impact-card-2 .impact-metric:nth-child(1) .impact-bar,
.is-visible .impact-card-2 .impact-metric:nth-child(1) .impact-right-pill { transition-delay: 1.2s; }
.is-visible .impact-card-2 .impact-metric:nth-child(2) .impact-bar,
.is-visible .impact-card-2 .impact-metric:nth-child(2) .impact-right-pill { transition-delay: 1.6s; }

.is-visible .impact-bar        { --bar-pct: var(--bar-width); }
.is-visible .impact-right-pill { --pill-pct: var(--pill-width); }

@keyframes impactShimmer {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(200%); }
  100% { transform: translateX(-100%); }
}

.impact-bar {
  overflow: hidden;
}

.impact-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );
  transform: translateX(-100%);
  opacity: 0;
  z-index: 2;
}

.is-visible .impact-card-1 .impact-bar::after {
  opacity: 1;
  animation: impactShimmer 5s ease-in-out 3s infinite;
}

[data-impact-marker] {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.is-visible .impact-card-1 .impact-metric:nth-child(1) [data-impact-marker] { opacity: 1; transition-delay: 2.2s; }
.is-visible .impact-card-1 .impact-metric:nth-child(2) [data-impact-marker] { opacity: 1; transition-delay: 2.6s; }
.is-visible .impact-card-2 .impact-metric:nth-child(1) [data-impact-marker] { opacity: 1; transition-delay: 2.4s; }
.is-visible .impact-card-2 .impact-metric:nth-child(2) [data-impact-marker] { opacity: 1; transition-delay: 2.8s; }

.impact-badge {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.is-visible .impact-card-1 .impact-badge { opacity: 1; transform: translateY(0); transition-delay: 2.4s; }
.is-visible .impact-card-2 .impact-badge { opacity: 1; transform: translateY(0); transition-delay: 3.0s; }

/* ===========================================
   WHAT THIS MEANS — CASE STUDY
   =========================================== */

.wtm-icon { width: 120px; height: 120px; }
.wtm-icon-3 { width: 147px; height: 147px; }

.wtm-halo-outer { background: rgba(255,255,255,0.15); }
.wtm-halo-inner { background: rgba(255,255,255,0.22); }

.wtm-icon-1 .wtm-halo-outer { width: 120px; height: 120px; }
.wtm-icon-1 .wtm-halo-inner { width: 68px; height: 68px; }
.wtm-icon-1 img { width: 38px; height: 38px; }

.wtm-icon-2 .wtm-halo-outer { width: 120px; height: 120px; }
.wtm-icon-2 .wtm-halo-inner { width: 85px; height: 85px; }
.wtm-icon-2 .wtm-icon-circle { width: 49px; height: 49px; }
.wtm-icon-2 img { width: 49px; height: 49px; }

.wtm-icon-3 .wtm-halo-outer { width: 147px; height: 147px; }
.wtm-icon-3 .wtm-halo-inner { width: 85px; height: 85px; }
.wtm-icon-3 .wtm-icon-circle { width: 53px; height: 53px; }
.wtm-icon-3 img { width: 32px; height: 32px; }

.wtm-photo {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.8s ease-out, transform 1s ease-out;
}
.is-visible .wtm-photo {
  opacity: 1;
  transform: scale(1);
}

.wtm-icon {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.5s ease-out, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.is-visible .wtm-icon-1 { opacity: 1; transform: scale(1); transition-delay: 0.6s; }
.is-visible .wtm-icon-2 { opacity: 1; transform: scale(1); transition-delay: 0.9s; }
.is-visible .wtm-icon-3 { opacity: 1; transform: scale(1); transition-delay: 1.2s; }

@keyframes wtmPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.7; }
}
.is-visible .wtm-icon-1 .wtm-halo { animation: wtmPulse 4s ease-in-out 1.6s infinite; }
.is-visible .wtm-icon-2 .wtm-halo { animation: wtmPulse 4.5s ease-in-out 1.9s infinite; }
.is-visible .wtm-icon-3 .wtm-halo { animation: wtmPulse 3.5s ease-in-out 2.2s infinite; }

@keyframes wtmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.is-visible .wtm-icon-1 { animation: wtmFloat 3s ease-in-out 1.6s infinite; }
.is-visible .wtm-icon-2 { animation: wtmFloat 3.4s ease-in-out 1.9s infinite; }
.is-visible .wtm-icon-3 { animation: wtmFloat 2.8s ease-in-out 2.2s infinite; }

.wtm-bullet {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.is-visible .wtm-bullet { opacity: 1; transform: translateX(0); }
.is-visible .wtm-bullet:nth-child(1) { transition-delay: 0.4s; }
.is-visible .wtm-bullet:nth-child(2) { transition-delay: 0.6s; }
.is-visible .wtm-bullet:nth-child(3) { transition-delay: 0.8s; }

.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }

/* ===========================================
   LEARNING VECTORS — TIMELINE
   =========================================== */

.lv-timeline-line {
  background: linear-gradient(180deg, rgba(75,78,220,0.3) 0%, rgba(42,245,152,0.3) 50%, rgba(75,78,220,0.3) 100%);
}

.lv-node {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-visible .lv-node { opacity: 1; transform: scale(1); }

.lv-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.lv-item-1 .lv-card,
.lv-item-3 .lv-card,
.lv-item-5 .lv-card,
.lv-item-7 .lv-card {
  transform: translateX(-30px);
}

.lv-item-2 .lv-card,
.lv-item-4 .lv-card,
.lv-item-6 .lv-card {
  transform: translateX(30px);
}

.is-visible .lv-card {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

@media (max-width: 767px) {
  .lv-item .lv-card {
    transform: translateY(20px) !important;
  }
  .is-visible .lv-card {
    transform: translateY(0) !important;
  }
}

@keyframes lvNodePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(75, 78, 220, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(75, 78, 220, 0); }
}

.is-visible .lv-node {
  animation: lvNodePulse 2s ease-in-out 0.6s 2;
}

.lv-card:hover {
  border-color: oklch(var(--p) / 0.3);
}

[data-theme="dark"] .lv-timeline-line {
  background: linear-gradient(180deg, rgba(75,78,220,0.15) 0%, rgba(42,245,152,0.15) 50%, rgba(75,78,220,0.15) 100%);
}

/* ===========================================
   SMOOTH SCROLL
   =========================================== */
html.smooth-scroll {
  scroll-behavior: smooth;
}

/* ===========================================
   HOVER EFFECTS
   =========================================== */
.hover-lift {
  @apply transition-transform duration-200;
}

.hover-lift:hover {
  @apply -translate-y-1;
}

.hover-scale {
  @apply transition-transform duration-200;
}

.hover-scale:hover {
  @apply scale-105;
}

/* ===========================================
   IMAGE UTILITIES
   =========================================== */
.img-lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.img-lazy.loaded {
  opacity: 1;
}

/* ===========================================
   NAVBAR SCROLL EFFECTS
   =========================================== */
.navbar-transparent {
  background-color: transparent !important;
  backdrop-filter: none;
  box-shadow: none;
}

.navbar-solid {
  background-color: oklch(var(--b1) / 0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* ===========================================
   LINE CLAMP UTILITIES
   =========================================== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===========================================
   FAQ ACCORDION
   =========================================== */
.faq-item.collapse > input[type="radio"]:checked ~ .collapse-title {
  border-left: 3px solid oklch(var(--p));
}

.faq-item.collapse > input[type="radio"]:checked ~ .collapse-title .faq-q {
  color: oklch(var(--p));
}

.faq-item.collapse > input[type="radio"]:checked ~ .collapse-title .faq-icon-closed {
  display: none;
}

.faq-item.collapse > input[type="radio"]:checked ~ .collapse-title .faq-icon-open {
  display: flex;
}

.faq-item.collapse > input[type="radio"]:checked ~ .collapse-content {
  border-left: 3px solid oklch(var(--p));
}

/* Stronger shadow on open item */
.faq-item.collapse:has(input[type="radio"]:checked) {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Hide default DaisyUI collapse arrow */
.faq-item.collapse .collapse-title::after {
  display: none;
}

/* ===========================================
   CTA BANNER
   =========================================== */
.cta-gradient-bg {
  background: linear-gradient(241.41deg, #2AF598 -12.08%, #4B4EDC 85.86%);
}

.cta-banner-btn {
  color: #0D1530 !important;
}

/* ===========================================
   TESTIMONIAL CAPTION OVERLAY
   =========================================== */
.testimonial-caption-overlay {
  background: rgba(255, 255, 255, 0.49);
}


/* ===========================================
   CONVERSATION FLOW STEPS
   =========================================== */
.step-content-offset {
  margin-left: calc(16% - 2rem);
}

.aspect-16-9 {
  aspect-ratio: 16/9;
}

/* ===========================================
   MOBILE MENU ANIMATIONS
   =========================================== */
[data-mobile-menu-target="menu"].is-open > div:first-child {
  opacity: 1 !important;
}

[data-mobile-menu-target="menu"].is-open > div:last-child {
  transform: translateY(0) !important;
}

/* ===========================================
   CLIENT LOGO PILL (dark mode)
   =========================================== */
.client-logo-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

[data-theme="dark"] .client-logo-pill {
  background-color: #ffffff;
}

/* ===========================================
   CAROUSEL DOTS
   =========================================== */
.use-case-dots button.bg-base-content {
  background-color: #70EFC1 !important;
}

.use-case-dots button.bg-base-content\/25 {
  background-color: oklch(var(--bc) / 0.15) !important;
}

.use-case-dots svg {
  color: #70EFC1;
}

.product-dots button.bg-base-content {
  background-color: oklch(var(--p)) !important;
  width: 0.625rem;
  height: 0.625rem;
}

.product-dots button.bg-base-content\/25 {
  background-color: oklch(var(--p) / 0.25) !important;
}

/* ===========================================
   CASE STUDY — DARK MODE
   =========================================== */

[data-theme="dark"] .impact-card-1 .impact-metric {
  border-color: rgba(255,255,255,0.15) !important;
}

[data-theme="dark"] .impact-card-2 {
  background: oklch(var(--b1)) !important;
  border: 1px solid oklch(var(--bc) / 0.15);
}

[data-theme="dark"] .impact-card-2 .impact-metric {
  background: oklch(var(--b2)) !important;
  border-color: oklch(var(--bc) / 0.2) !important;
}

[data-theme="dark"] .impact-card-2 .impact-badge {
  background: oklch(var(--b2)) !important;
  border-color: oklch(var(--bc) / 0.2) !important;
}

[data-theme="dark"] .impact-card-2 .impact-right-pill {
  background: oklch(var(--b3)) !important;
}

[data-theme="dark"] .cs-card {
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc) / 0.15);
}

[data-theme="dark"] .cs-card-inner {
  background: oklch(var(--b2));
  border-color: oklch(var(--bc) / 0.25) !important;
}

[data-theme="dark"] .cs-card-inner p {
  color: oklch(var(--bc) / 0.7);
}

[data-theme="dark"] .cs-card-inner .bg-primary\/10 {
  background-color: oklch(var(--p) / 0.25) !important;
}

[data-theme="dark"] .cs-card-inner svg {
  filter: brightness(1.8);
}

[data-theme="dark"] .cs-benefit-card {
  border-color: oklch(var(--bc) / 0.2) !important;
}

[data-theme="dark"] .cs-cta-top {
  background: oklch(var(--b2)) !important;
}

[data-theme="dark"] .cs-cta-bottom {
  background: oklch(var(--b1)) !important;
}

/* ===========================================
   USE CASE CAROUSEL
   =========================================== */
.carousel-container {
  container-type: inline-size;
}

.carousel-track {
  gap: 24px;
}

.carousel-slide {
  width: 100cqi;
}

/* ===========================================
   CASE STUDIES INDEX — CAROUSEL
   =========================================== */
.cs-index-slide {
  width: calc(100% - 16px);
}

@media (min-width: 768px) {
  .cs-index-slide {
    width: 75vw;
  }
}

@media (min-width: 1024px) {
  .cs-index-slide {
    width: 70vw;
  }
}

.cs-index-container {
  background: #3B3E8A;
}

.cs-carousel-arrow {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

@media (min-width: 768px) {
  .cs-carousel-arrow {
    width: 48px;
    height: 48px;
  }
}

.cs-carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.25);
}

.cs-metric-number {
  background: linear-gradient(90deg, #4B4EDC, #2AF598);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cs-index-dots button.bg-base-content {
  background-color: white !important;
}

.cs-index-dots button.bg-base-content\/25 {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.cs-index-slide .cs-quote-icon,
.cs-index-slide .cs-quote,
.cs-index-slide .cs-read-link,
.cs-index-slide .cs-research-link,
.cs-index-slide .cs-author,
.cs-index-slide .cs-challenge,
.cs-index-slide .cs-solution,
.cs-index-slide .cs-metric {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.is-visible .cs-index-slide .cs-quote-icon   { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.is-visible .cs-index-slide .cs-quote         { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.is-visible .cs-index-slide .cs-read-link     { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.is-visible .cs-index-slide .cs-research-link { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }
.is-visible .cs-index-slide .cs-author        { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }
.is-visible .cs-index-slide .cs-challenge     { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.is-visible .cs-index-slide .cs-solution      { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.is-visible .cs-index-slide .cs-metric        { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }

[data-theme="dark"] .cs-impact-chatac {
  background: linear-gradient(339.58deg, #3638A0 69.99%, #1FA574 152.54%);
}

[data-theme="dark"] .cs-index-container {
  background: #2E3075;
}
/* Inter Tight Font Import for Landing Pages */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');

.landing-page {
  font-family: 'Inter Tight', sans-serif;
}
/* ----- announcement strip ----- */
@keyframes announceReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes announceRevealKf {
  from {
    opacity: 0;
    transform: translateY(24px);
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes announceBarKf {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.landing-v3 .announce {
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding-block: 2rem;
  position: relative;
  overflow: hidden;
  animation: announceRevealKf 1.1s cubic-bezier(0.16, 1, 0.3, 1) 2.5s both;
}

.landing-v3 .announce::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  transform-origin: top;
  animation: announceBarKf 0.7s cubic-bezier(0.16, 1, 0.3, 1) 3.2s both;
}

.landing-v3 .announce__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  font-size: 1.125rem;
  color: var(--text);
}

.landing-v3 .announce__tag {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.landing-v3 .announce__tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-deep);
  box-shadow: 0 0 0 4px var(--primary-glow);
  animation: announceDot 2.4s ease-in-out 3.5s infinite;
}

@keyframes announceDot {
  0%, 100% { box-shadow: 0 0 0 4px var(--primary-glow); }
  50%      { box-shadow: 0 0 0 8px rgba(156, 213, 198, 0.15); }
}

.landing-v3 .announce__title {
  font-size: 1.3125rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}

.landing-v3 .announce__divider {
  width: 1px;
  height: 1.25rem;
  background: var(--border);
}

.landing-v3 .announce__link {
  color: var(--primary-deep);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.0625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  transition: gap 200ms ease, color 200ms ease;
}

.landing-v3 .announce__link svg {
  transition: transform 200ms ease;
}

.landing-v3 .announce__link:hover {
  gap: 0.75rem;
}

.landing-v3 .announce__link:hover svg {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .announce,
  .landing-v3 .announce::before,
  .landing-v3 .announce__tag::before {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .landing-v3 .announce::before {
    transform: scaleY(1);
  }
}

.landing-v3 .auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.landing-v3 .auth-page__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 10vh, 8rem) 1rem clamp(2rem, 6vw, 4rem);
}

.landing-v3 .auth-card {
  width: 100%;
  max-width: 28rem;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.5rem;
}

.landing-v3 .auth-card__head {
  display: grid;
  gap: 0.35rem;
  text-align: center;
}

.landing-v3 .auth-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.landing-v3 .auth-card__subtitle {
  font-size: 0.9375rem;
  color: var(--neutral);
  margin: 0;
}

.landing-v3 .auth-form {
  display: grid;
  gap: 1rem;
}

.landing-v3 .auth-field {
  display: grid;
  gap: 0.4rem;
}

.landing-v3 .auth-field__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}

.landing-v3 .auth-input {
  width: 100%;
  padding: 0.7rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  outline: none;
  transition: border-color 200ms var(--hover-frame-easing),
              box-shadow 200ms var(--hover-frame-easing);
}

.landing-v3 .auth-input::placeholder {
  color: var(--neutral);
  opacity: 0.7;
}

.landing-v3 .auth-input:focus {
  border-color: var(--primary-deep);
  box-shadow: 0 0 0 3px var(--hover-edge);
}

.landing-v3 .auth-input--readonly,
.landing-v3 .auth-input[readonly] {
  background: var(--surface-2);
  color: var(--neutral);
  cursor: not-allowed;
}

.landing-v3 .auth-input--error {
  border-color: var(--error);
}

.landing-v3 .auth-input--error:focus {
  box-shadow: 0 0 0 3px var(--error-glow);
}

.landing-v3 .auth-field__error {
  font-size: 0.8125rem;
  color: var(--error);
}

.landing-v3 .auth-field__hint {
  font-size: 0.8125rem;
  color: var(--neutral);
}

.landing-v3 .auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
}

.landing-v3 .auth-terms__checkbox {
  flex-shrink: 0;
  margin-top: 0.18rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary-deep);
}

.landing-v3 .auth-terms__link {
  color: var(--primary-deep);
  text-decoration: underline;
}

.landing-v3 .auth-submit.cta-btn {
  width: 100%;
  justify-content: center;
}

.landing-v3 .auth-divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0.25rem 0;
}

.landing-v3 .auth-card__footer {
  display: grid;
  gap: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--neutral);
}

.landing-v3 .auth-card__footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
}

.landing-v3 .auth-link {
  color: var(--primary-deep);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 160ms ease;
}

.landing-v3 .auth-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.landing-v3 .auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid var(--border);
  color: var(--text);
}

.landing-v3 .auth-alert--warning {
  background: var(--warning-tint);
  border-color: var(--warning);
  color: var(--warning);
}

.landing-v3 .auth-submit--danger {
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: var(--error);
  color: var(--bg);
  border: 1px solid var(--error);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms var(--hover-frame-easing);
}

.landing-v3 .auth-submit--danger:hover {
  background: transparent;
  color: var(--error);
}
/*
  Theme v3 — Locked-mint / cocoa / stone palette
  Source: /theme/README.md (commit 1aba9a9b)

  Scoped under .landing-v3 so the v2 design system (DaisyUI tokens, gradients,
  feature pages, internal app) stays untouched.
*/

.landing-v3 {
  width: 100%;
  min-width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  overflow-x: clip;
  --nav-h: 72px;
  /* raw brand locks (illustration, logo, empty states) */
  --brand-mint:    #9CD5C6;
  --brand-cocoa:   #3F3333;
  --brand-stone:   #8A8F8D;

  /* structure */
  --bg:            #F0F6F3;
  --surface:       #F9FAF9;
  --surface-2:     #E6EAE8;
  --border:        #CFD4D2;

  /* text */
  --text:          #2E2626;
  --neutral:       #6B5F5F;

  /* brand / interactive */
  --primary:       #9CD5C6;
  --primary-hover: #7AC1B0;
  --primary-deep:  #1F8270;
  --primary-glow:  rgba(156, 213, 198, 0.45);

  /* translucent overlays */
  --text-veil:     rgba(46, 38, 38, 0.55);
  --bg-soft:       rgba(240, 246, 243, 0.14);
  --bg-glass:      rgba(240, 246, 243, 0.035);
  --bg-glass-edge: rgba(240, 246, 243, 0.10);
  --bg-glass-edge-strong: rgba(240, 246, 243, 0.22);
  --bg-fg-strong:  rgba(240, 246, 243, 0.90);
  --bg-fg-muted:   rgba(240, 246, 243, 0.70);
  --bg-fg-faint:   rgba(240, 246, 243, 0.62);
  --text-veil-deep: rgba(0, 0, 0, 0.60);
  --text-veil-mid:  rgba(0, 0, 0, 0.55);

  --hover-wash:           rgba(156, 213, 198, 0.04);
  --hover-edge:           rgba(156, 213, 198, 0.22);
  --hover-frame-color:    rgba(156, 213, 198, 0.65);
  --hover-wash-cocoa:     rgba(46, 38, 38, 0.04);
  --hover-wash-light:     rgba(240, 246, 243, 0.06);
  --bg-muted:             rgba(240, 246, 243, 0.72);
  --hover-frame-easing:   cubic-bezier(0.22, 1, 0.36, 1);
  --hover-frame-duration: 420ms;
  --hover-frame-delay:    80ms;
  --hover-square-opacity-duration:  280ms;
  --hover-square-transform-duration: 320ms;
  --hover-square-delay:   260ms;

  /* elevation (cocoa-tinted, not pure black) */
  --shadow-1:      0 1px 2px rgba(46, 38, 38, 0.18), 0 3px 8px rgba(46, 38, 38, 0.06);
  --shadow-2:      0 2px 5px rgba(46, 38, 38, 0.22), 0 6px 14px rgba(46, 38, 38, 0.08);

  /* status — open: --success may move; cocoa or olive */
  --success:       #7E9B4A;
  --warning:       #C49050;
  --error:         #B5544A;
  --error-glow:    rgba(181, 84, 74, 0.20);
  --warning-tint:  rgba(196, 144, 80, 0.12);

  background: var(--bg);
  color: var(--text);

  --font-display: "MPLUS1", system-ui, sans-serif;

  font-family: var(--font-display);
  /* font-feature-settings: "ss01", "cv11"; — Inter Tight only */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* defensively force the chosen font on every descendant — including form
   controls (button/input/select/textarea) which don't inherit by default,
   and headings/blockquotes that some user-agent styles override. */
.landing-v3 *,
.landing-v3 *::before,
.landing-v3 *::after,
.landing-v3 button,
.landing-v3 input,
.landing-v3 select,
.landing-v3 textarea,
.landing-v3 h1, .landing-v3 h2, .landing-v3 h3,
.landing-v3 h4, .landing-v3 h5, .landing-v3 h6,
.landing-v3 blockquote,
.landing-v3 cite,
.landing-v3 p {
  font-family: var(--font-display);
}

.landing-v3 .section.cs-index-hero {
  padding-block: clamp(3rem, 8vh, 6rem) clamp(1rem, 2vh, 1.5rem);
}

.landing-v3 .cs-index-hero__inner {
  display: grid;
  gap: 1rem;
  max-width: 56ch;
}

.landing-v3 .cs-index-hero__eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin: 0;
}

.landing-v3 .cs-index-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.landing-v3 .cs-index-hero__lead {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--neutral);
  margin: 0;
}

.landing-v3 .section.cs-index {
  padding-block: clamp(1rem, 2vh, 1.5rem) clamp(3rem, 8vh, 6rem);
}

.landing-v3 .cs-index__shell {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.landing-v3 .cs-index__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.landing-v3 .cs-index__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}

.landing-v3 .cs-index__controls {
  display: flex;
  gap: 0.5rem;
}

.landing-v3 .cs-index__arrow {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.landing-v3 .cs-index__arrow:hover {
  border-color: var(--primary-deep);
  color: var(--primary-deep);
}

.landing-v3 .cs-index__viewport {
  overflow: hidden;
}

.landing-v3 .cs-index__track {
  display: flex;
  gap: 1rem;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.landing-v3 .cs-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.landing-v3 .cs-slide__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.landing-v3 .cs-slide__split {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 900px) {
  .landing-v3 .cs-slide__split {
    flex-direction: row;
    align-items: stretch;
  }

  .landing-v3 .cs-slide__quote-col,
  .landing-v3 .cs-slide__data-col {
    flex: 1 1 0;
  }
}

.landing-v3 .cs-slide__quote-col,
.landing-v3 .cs-slide__data-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.landing-v3 .cs-slide__quote-mark {
  color: var(--primary);
  opacity: 0.35;
}

.landing-v3 .cs-slide__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

.landing-v3 .cs-slide__actions {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
}

.landing-v3 .cs-slide__read {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-deep);
}

.landing-v3 .cs-slide__read svg {
  transition: transform 320ms var(--hover-frame-easing);
}

.landing-v3 .cs-slide__link:hover .cs-slide__read svg {
  transform: translateX(4px);
}

.landing-v3 .cs-slide__paper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neutral);
  text-decoration: none;
}

.landing-v3 .cs-slide__paper:hover {
  color: var(--primary-deep);
  text-decoration: underline;
}

.landing-v3 .cs-slide__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.landing-v3 .cs-slide__author-logo {
  height: 2rem;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.landing-v3 .cs-slide__author-name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral);
}

.landing-v3 .cs-slide__divider {
  background: var(--border);
  height: 1px;
  width: 100%;
}

@media (min-width: 900px) {
  .landing-v3 .cs-slide__divider {
    width: 1px;
    height: auto;
  }
}

.landing-v3 .cs-slide__block-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.landing-v3 .cs-slide__block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--hover-wash);
  color: var(--primary-deep);
}

.landing-v3 .cs-slide__block-label {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text);
}

.landing-v3 .cs-slide__block-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--neutral);
}

.landing-v3 .cs-slide__metric {
  margin-top: auto;
  background: var(--text);
  color: var(--bg);
  padding: 1rem 1.25rem;
}

.landing-v3 .cs-slide__metric-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.landing-v3 .cs-slide__metric-label {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--bg-muted);
}

.landing-v3 .cs-index__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.landing-v3 .cs-index__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.landing-v3 .cs-index__dot:hover {
  background: var(--neutral);
}

.landing-v3 .cs-index__dot.active {
  background: var(--primary-deep);
  transform: scale(1.2);
}

.landing-v3 .cs-empty__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}

.landing-v3 .cs-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--neutral);
}

.landing-v3 .cs-empty__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  color: var(--text);
}

.landing-v3 .cs-empty__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--neutral);
}

.landing-v3 .cs-hero__logo,
.landing-v3 .cs-hero__eyebrow,
.landing-v3 .cs-hero__lead,
.landing-v3 .cs-means__visual,
.landing-v3 .cs-means__copy,
.landing-v3 .cs-impact__head,
.landing-v3 .cs-impact__cards {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .cs-hero__logo.is-visible,
.landing-v3 .cs-hero__eyebrow.is-visible,
.landing-v3 .cs-hero__lead.is-visible,
.landing-v3 .cs-means__visual.is-visible,
.landing-v3 .cs-means__copy.is-visible,
.landing-v3 .cs-impact__head.is-visible,
.landing-v3 .cs-impact__cards.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.landing-v3 .cs-hero__lead.is-visible {
  opacity: 0.95;
}

.landing-v3 .cs-hero__title {
  font-size: clamp(1.875rem, 3.8vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--bg);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.22em;
}

.landing-v3 .cs-hero__word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.12em;
  line-height: 1.06;
}

.landing-v3 .cs-hero__word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .cs-hero__title.is-visible .cs-hero__word > span {
  transform: translateY(0);
}

.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(1)  > span { transition-delay: 0.00s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(2)  > span { transition-delay: 0.06s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(3)  > span { transition-delay: 0.12s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(4)  > span { transition-delay: 0.18s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(5)  > span { transition-delay: 0.24s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(6)  > span { transition-delay: 0.30s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(7)  > span { transition-delay: 0.36s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(8)  > span { transition-delay: 0.42s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(9)  > span { transition-delay: 0.48s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(10) > span { transition-delay: 0.54s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(11) > span { transition-delay: 0.60s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(12) > span { transition-delay: 0.66s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(13) > span { transition-delay: 0.72s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(14) > span { transition-delay: 0.78s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(15) > span { transition-delay: 0.84s; }
.landing-v3 .cs-hero__title.is-visible .cs-hero__word:nth-child(n+16) > span { transition-delay: 0.90s; }

.landing-v3 .cs-hero__media {
  position: relative;
  align-self: stretch;
  min-height: clamp(18rem, 45vh, 32rem);
  overflow: hidden;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

@media (min-width: 900px) {
  .landing-v3 .cs-hero__media {
    min-height: 0;
  }
}

.landing-v3 .cs-hero__media.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.landing-v3 .cs-hero__media .cs-hero__stat {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.9s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.9s;
}

.landing-v3 .cs-hero__media.is-visible .cs-hero__stat {
  opacity: 1;
  transform: translateY(0);
}

.landing-v3 .cs-hero {
  position: relative;
  background: var(--text);
  color: var(--bg);
  overflow: hidden;
  isolation: isolate;
}

.landing-v3 .cs-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .landing-v3 .cs-hero__grid {
    grid-template-columns: minmax(28rem, 1fr) 1.1fr;
    min-height: calc(100svh - var(--nav-h));
    max-height: calc(100svh - var(--nav-h));
  }
}

.landing-v3 .cs-hero__copy {
  display: grid;
  gap: 1.25rem;
  align-content: center;
  justify-items: start;
  padding: clamp(6rem, 11vw, 8rem) clamp(1.5rem, 6vw, 5rem) clamp(3rem, 6vw, 4rem);
}

@media (min-width: 900px) {
  .landing-v3 .cs-hero__copy {
    padding-block: clamp(6rem, 8vh, 7rem) clamp(2rem, 4vh, 3rem);
    padding-inline: clamp(2rem, 6vw, 6rem) clamp(2rem, 4vw, 3.5rem);
  }
}

.landing-v3 .cs-hero__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.landing-v3 .cs-hero__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 0.65rem 1rem;
}

.landing-v3 .cs-hero__logo-img {
  height: 2.5rem;
  width: auto;
}

.landing-v3 .cs-hero__eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}

.landing-v3 .cs-hero__lead.body-lg,
.landing-v3 .cs-hero__lead {
  max-width: 54ch;
  margin: 0;
  color: rgba(240, 246, 243, 0.95);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.landing-v3 .cs-hero__stat {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--bg);
  padding: 0.75rem 1rem;
  max-width: 22rem;
  z-index: 2;
}

.landing-v3 .cs-hero__stat-icon {
  flex-shrink: 0;
  color: var(--primary-deep);
}

.landing-v3 .cs-hero__stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.landing-v3 .cs-why {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.landing-v3 .cs-why__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 72rem;
  margin-inline: auto;
}

@media (min-width: 860px) {
  .landing-v3 .cs-why__layout {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

.landing-v3 .cs-why__sidebar {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  position: relative;
}

@media (min-width: 860px) {
  .landing-v3 .cs-why__sidebar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    position: sticky;
    top: 7rem;
  }
}

.landing-v3 .cs-why__mark {
  color: var(--primary-deep);
  flex-shrink: 0;
}

.landing-v3 .cs-why__rule {
  display: block;
  width: clamp(2.5rem, 4vw, 4rem);
  height: 2px;
  background: var(--primary);
}

@media (min-width: 860px) {
  .landing-v3 .cs-why__rule {
    width: 3rem;
  }
}

.landing-v3 .cs-why__tag {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--neutral);
}

.landing-v3 .cs-why__main {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 48rem;
}

.landing-v3 .cs-why__title {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.landing-v3 .cs-why__title em {
  font-style: normal;
  color: var(--primary-deep);
  position: relative;
  display: inline-block;
}

.landing-v3 .cs-why__title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.35em;
  background: var(--primary);
  opacity: 0.32;
  z-index: -1;
}

.landing-v3 .cs-why__lead {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  opacity: 0.82;
}

.landing-v3 .cs-why__goal {
  position: relative;
  border-left: 3px solid var(--primary);
  background: var(--surface-2);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: 1rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.landing-v3 .cs-why__goal-head {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--primary-deep);
}

.landing-v3 .cs-why__goal-icon {
  flex-shrink: 0;
}

.landing-v3 .cs-why__goal-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}

.landing-v3 .cs-why__goal-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  font-weight: 500;
}

.landing-v3 .cs-why__sidebar {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .cs-why__sidebar.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.landing-v3 .cs-why__sidebar .cs-why__mark,
.landing-v3 .cs-why__sidebar .cs-why__rule,
.landing-v3 .cs-why__sidebar .cs-why__tag {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .cs-why__sidebar.is-visible .cs-why__mark { transition-delay: 0.20s; opacity: 1; transform: translateY(0); }
.landing-v3 .cs-why__sidebar.is-visible .cs-why__rule { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }
.landing-v3 .cs-why__sidebar.is-visible .cs-why__tag  { transition-delay: 0.65s; opacity: 1; transform: translateY(0); }

.landing-v3 .cs-why__sidebar .cs-why__mark {
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.landing-v3 .cs-why__sidebar.is-visible .cs-why__mark {
  transform: translateY(0) rotate(0);
}

.landing-v3 .cs-why__sidebar:not(.is-visible) .cs-why__mark {
  transform: translateY(14px) rotate(-22deg) scale(0.7);
}

.landing-v3 .cs-why__sidebar .cs-why__rule {
  transform-origin: left center;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .cs-why__sidebar:not(.is-visible) .cs-why__rule {
  transform: scaleX(0);
}

.landing-v3 .cs-why__sidebar.is-visible .cs-why__rule {
  transform: scaleX(1);
}

.landing-v3 .cs-why__title {
  opacity: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
}

.landing-v3 .cs-why__word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.14em;
  line-height: 1;
}

.landing-v3 .cs-why__word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .cs-why__title.is-visible .cs-why__word:nth-child(1) > span { transition-delay: 0.00s; transform: translateY(0); }
.landing-v3 .cs-why__title.is-visible .cs-why__word:nth-child(2) > span { transition-delay: 0.12s; transform: translateY(0); }
.landing-v3 .cs-why__title.is-visible .cs-why__word:nth-child(3) > span { transition-delay: 0.24s; transform: translateY(0); }
.landing-v3 .cs-why__title.is-visible .cs-why__word:nth-child(4) > span { transition-delay: 0.36s; transform: translateY(0); }
.landing-v3 .cs-why__title.is-visible .cs-why__word:nth-child(5) > span { transition-delay: 0.48s; transform: translateY(0); }

.landing-v3 .cs-why__title em::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s;
}

.landing-v3 .cs-why__title.is-visible em::after {
  transform: scaleX(1);
}

.landing-v3 .cs-why__lead {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .cs-why__lead.is-visible {
  opacity: 0.82;
  transform: translateY(0);
}

.landing-v3 .cs-why__goal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  border-left-color: transparent;
}

.landing-v3 .cs-why__goal.is-visible {
  opacity: 1;
  transform: translateY(0);
  border-left-color: var(--primary);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              border-left-color 0.6s ease 0.4s;
}

.landing-v3 .cs-bottom {
  background: var(--surface-2);
}

.landing-v3 .cs-bottom__head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 0.875rem;
}

.landing-v3 .cs-bottom__title {
  margin: 0;
}

.landing-v3 .cs-bottom__subtitle {
  margin: 0;
}

.landing-v3 .cs-bottom__grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
  max-width: 64rem;
}

@media (min-width: 720px) {
  .landing-v3 .cs-bottom__grid { grid-template-columns: 1fr 1fr; }
}

.landing-v3 .cs-bottom__grid.is-visible .cs-bottom__card {
  opacity: 1;
  transform: translateY(0);
}

.landing-v3 .cs-bottom__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg);
  border: 1px solid var(--border);
  isolation: isolate;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms var(--hover-frame-easing);
  transition-delay: calc(var(--i, 0) * 0.08s);
}

.landing-v3 .cs-bottom__card:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

.landing-v3 .cs-bottom__torch {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--primary) 12%, transparent),
    transparent 70%
  );
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .cs-bottom__card:hover .cs-bottom__torch {
  opacity: 1;
}


.landing-v3 .cs-bottom__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--primary-deep);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.landing-v3 .cs-bottom__card-title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.landing-v3 .cs-bottom__card-desc {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--neutral);
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .cs-bottom__card {
    opacity: 1;
    transform: none;
  }
}

.landing-v3 .cs-used {
  background: var(--text);
  color: var(--bg);
}

.landing-v3 .cs-used__head {
  display: grid;
  gap: 1rem;
  max-width: 60rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.landing-v3 .cs-used__title {
  margin: 0;
  color: var(--bg);
}

.landing-v3 .cs-used .cs-used__lead {
  margin: 0;
  max-width: 60ch;
  color: var(--bg-muted);
}

.landing-v3 .cs-used__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .landing-v3 .cs-used__grid { grid-template-columns: 1fr 1fr; }
}

.landing-v3 .cs-used__grid.is-visible .cs-used__card {
  opacity: 1;
  transform: translateY(0);
}

.landing-v3 .cs-used__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(240, 246, 243, 0.04);
  border: 1px solid rgba(240, 246, 243, 0.12);
  isolation: isolate;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              background 320ms var(--hover-frame-easing),
              border-color 320ms var(--hover-frame-easing);
  transition-delay: calc(var(--i, 0) * 0.08s);
}

.landing-v3 .cs-used__card:hover {
  background: rgba(240, 246, 243, 0.07);
  border-color: rgba(156, 213, 198, 0.5);
}

.landing-v3 .cs-used__torch {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(156, 213, 198, 0.10),
    rgba(156, 213, 198, 0) 70%
  );
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .cs-used__card:hover .cs-used__torch {
  opacity: 1;
}

.landing-v3 .cs-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .cs-frame::before,
.landing-v3 .cs-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hover-frame-color);
  transform: scaleX(0);
  transition: transform var(--hover-frame-duration) var(--hover-frame-easing) var(--hover-frame-delay);
}

.landing-v3 .cs-frame::before { top: 0; }
.landing-v3 .cs-frame::after  { bottom: 0; }

.landing-v3 .cs-frame > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--hover-frame-color);
  transform: scaleY(0);
  transition: transform var(--hover-frame-duration) var(--hover-frame-easing) var(--hover-frame-delay);
}

.landing-v3 .cs-frame > span:nth-of-type(1) { left: 0; }
.landing-v3 .cs-frame > span:nth-of-type(2) { right: 0; }

.landing-v3 .cs-frame i {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--primary);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--hover-square-opacity-duration) var(--hover-frame-easing),
              transform var(--hover-square-transform-duration) var(--hover-frame-easing);
}

.landing-v3 .cs-frame i:nth-of-type(1) { top: -6px;    left: -6px; }
.landing-v3 .cs-frame i:nth-of-type(2) { top: -6px;    right: -6px; }
.landing-v3 .cs-frame i:nth-of-type(3) { bottom: -6px; left: -6px; }
.landing-v3 .cs-frame i:nth-of-type(4) { bottom: -6px; right: -6px; }

.landing-v3 .cs-used__card:hover .cs-frame,
.landing-v3 .cs-bottom__card:hover .cs-frame {
  opacity: 1;
}

.landing-v3 .cs-used__card:hover .cs-frame::before,
.landing-v3 .cs-used__card:hover .cs-frame::after,
.landing-v3 .cs-used__card:hover .cs-frame > span,
.landing-v3 .cs-bottom__card:hover .cs-frame::before,
.landing-v3 .cs-bottom__card:hover .cs-frame::after,
.landing-v3 .cs-bottom__card:hover .cs-frame > span {
  transform: scaleX(1);
}

.landing-v3 .cs-used__card:hover .cs-frame > span,
.landing-v3 .cs-bottom__card:hover .cs-frame > span {
  transform: scaleY(1);
}

.landing-v3 .cs-used__card:hover .cs-frame i,
.landing-v3 .cs-bottom__card:hover .cs-frame i {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--hover-square-delay);
}

.landing-v3 .cs-used__num {
  position: relative;
  z-index: 2;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary);
}

.landing-v3 .cs-used__card-title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bg);
}

.landing-v3 .cs-used__card-desc {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bg-muted);
}

.landing-v3 .cs-used__collage {
  position: relative;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

@media (min-width: 720px) {
  .landing-v3 .cs-used__collage {
    grid-template-columns: repeat(3, 1fr);
  }
}

.landing-v3 .cs-used__plate {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 6%, transparent);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 0.12s);
  will-change: transform, opacity;
}

.landing-v3 .cs-used__collage.is-visible .cs-used__plate {
  opacity: 1;
  transform: translateY(0);
}

.landing-v3 .cs-used__plate-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .cs-used__plate:hover .cs-used__plate-img {
  transform: scale(1.05);
}

.landing-v3 .cs-used__plate-label {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  left: clamp(1rem, 2vw, 1.5rem);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  color: var(--bg);
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .cs-used__plate {
    opacity: 1;
    transform: none;
  }
  .landing-v3 .cs-used__collage.is-visible .cs-used__plate {
    transform: none;
  }
  .landing-v3 .cs-used__plate-img {
    transition: none;
  }
}

.landing-v3 .cs-impact__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.landing-v3 .cs-impact__subtitle {
  margin: 0;
  max-width: 60ch;
  color: var(--neutral);
}

.landing-v3 .cs-impact__cards {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 860px) {
  .landing-v3 .cs-impact__cards { grid-template-columns: 1fr 1fr; }
}

.landing-v3 .cs-impact__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--border);
}

.landing-v3 .cs-impact__corners {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 3;
}

.landing-v3 .cs-impact__corners > i {
  position: absolute;
  width: 18px;
  height: 18px;
  border-width: 2.5px;
  border-style: solid;
  border-color: var(--primary);
}

.landing-v3 .cs-impact__corners > i:nth-child(1) { top: 0; left: 0;     border-right: none; border-bottom: none; }
.landing-v3 .cs-impact__corners > i:nth-child(2) { top: 0; right: 0;    border-left: none;  border-bottom: none; }
.landing-v3 .cs-impact__corners > i:nth-child(3) { bottom: 0; left: 0;  border-right: none; border-top: none; }
.landing-v3 .cs-impact__corners > i:nth-child(4) { bottom: 0; right: 0; border-left: none;  border-top: none; }

.landing-v3 .cs-impact__card--chatac {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.landing-v3 .cs-impact__card--compare {
  background: var(--surface);
  color: var(--text);
}

.landing-v3 .cs-impact__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  margin: 0.5rem 0 2rem;
}

.landing-v3 .cs-impact__logo {
  height: 1.75rem;
  filter: brightness(0) invert(1);
}

.landing-v3 .cs-impact__compare-name {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
}

.landing-v3 .cs-impact__metrics {
  display: grid;
  gap: 1.25rem;
  flex: 1;
}

.landing-v3 .cs-impact__metric {
  padding: 1.25rem;
  border: 1px solid rgba(240, 246, 243, 0.18);
}

.landing-v3 .cs-impact__metric--compare {
  border-color: var(--border);
}

.landing-v3 .cs-impact__metric-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bg);
}

.landing-v3 .cs-impact__metric-label {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  color: var(--bg);
}

.landing-v3 .cs-impact__metric-label--muted {
  color: var(--neutral);
}

.landing-v3 .cs-impact__metric-number {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}

.landing-v3 .cs-impact__metric-number--compare {
  color: var(--text);
}

.landing-v3 .cs-impact__scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--bg);
}

.landing-v3 .cs-impact__scale--muted {
  color: var(--neutral);
}

.landing-v3 .cs-impact__track-wrap {
  position: relative;
}

.landing-v3 .cs-impact__marker-top {
  position: absolute;
  top: -10px;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--bg);
  line-height: 0;
}

.landing-v3 .cs-impact__marker-top--muted {
  color: var(--neutral);
}

.landing-v3 .cs-impact__track {
  position: relative;
  height: 0.625rem;
}

.landing-v3 .cs-impact__bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  border-radius: 0;
}

.landing-v3 .cs-impact__bar--chatac {
  background: var(--primary);
}

.landing-v3 .cs-impact__bar--compare {
  background: var(--neutral);
}

.landing-v3 .cs-impact__pill {
  position: absolute;
  inset-block: 0;
  right: 0;
  border-radius: 0;
}

.landing-v3 .cs-impact__pill--chatac {
  background: rgba(240, 246, 243, 0.12);
}

.landing-v3 .cs-impact__pill--compare {
  background: var(--surface-2);
}

.landing-v3 .cs-impact__divider {
  position: absolute;
  inset-block: 0;
  width: 1px;
  z-index: 10;
}

.landing-v3 .cs-impact__divider--chatac { background: var(--bg); }
.landing-v3 .cs-impact__divider--compare { background: var(--neutral); }

.landing-v3 .cs-impact__badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 500;
}

.landing-v3 .cs-impact__badge--chatac {
  border-color: rgba(240, 246, 243, 0.18);
  color: var(--bg);
}

.landing-v3 .cs-impact__badge--chatac svg { color: var(--primary); }

.landing-v3 .cs-impact__badge--compare {
  color: var(--neutral);
}

.landing-v3 .cs-impact__badge--compare svg { color: var(--neutral); }

.landing-v3 .cs-impact__bar {
  width: 0;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.landing-v3 .cs-impact__pill {
  width: 100%;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.landing-v3 .cs-impact__marker-top,
.landing-v3 .cs-impact__divider {
  opacity: 0;
  transition: opacity 0.6s ease 1.4s;
}

.landing-v3 #impact-cards.is-visible .cs-impact__bar {
  width: var(--bar-width);
}

.landing-v3 #impact-cards.is-visible .cs-impact__pill {
  width: var(--pill-width);
}

.landing-v3 #impact-cards.is-visible .cs-impact__marker-top,
.landing-v3 #impact-cards.is-visible .cs-impact__divider {
  opacity: 1;
}

.landing-v3 .cs-means {
  background: var(--bg);
}

.landing-v3 .cs-means__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  max-width: 78rem;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .landing-v3 .cs-means__layout {
    grid-template-columns: 1.5fr 1fr;
  }
}

.landing-v3 .cs-means__visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-height: clamp(24rem, 60vh, 40rem);
}

.landing-v3 .cs-means__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(8%) contrast(1.02);
}

.landing-v3 .cs-means__visual-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.landing-v3 .cs-means__visual-frame i {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: var(--primary);
  border-style: solid;
  border-width: 0;
}

.landing-v3 .cs-means__visual-frame i:nth-child(1) { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; }
.landing-v3 .cs-means__visual-frame i:nth-child(2) { top: 14px; right: 14px; border-top-width: 2px; border-right-width: 2px; }
.landing-v3 .cs-means__visual-frame i:nth-child(3) { bottom: 14px; left: 14px; border-bottom-width: 2px; border-left-width: 2px; }
.landing-v3 .cs-means__visual-frame i:nth-child(4) { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; }

.landing-v3 .cs-means__copy {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 36rem;
}

.landing-v3 .cs-means__head {
  display: grid;
  gap: 0.875rem;
}

.landing-v3 .cs-means__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary-deep);
}

.landing-v3 .cs-means__title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.22em;
}

.landing-v3 .cs-means__word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.12em;
  line-height: 1.05;
}

.landing-v3 .cs-means__word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .cs-means__copy.is-visible .cs-means__word:nth-child(1) > span { transition-delay: 0.10s; transform: translateY(0); }
.landing-v3 .cs-means__copy.is-visible .cs-means__word:nth-child(2) > span { transition-delay: 0.20s; transform: translateY(0); }
.landing-v3 .cs-means__copy.is-visible .cs-means__word:nth-child(3) > span { transition-delay: 0.30s; transform: translateY(0); }
.landing-v3 .cs-means__copy.is-visible .cs-means__word:nth-child(n+4) > span { transition-delay: 0.40s; transform: translateY(0); }

.landing-v3 .cs-means__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.landing-v3 .cs-means__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 1.25rem 1.25rem 0;
  border-top: 1px solid var(--border);
}

.landing-v3 .cs-means__item:last-child {
  border-bottom: 1px solid var(--border);
}

.landing-v3 .cs-means__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--primary-deep);
  background: var(--surface-2);
}

.landing-v3 .cs-means__item-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
}

.landing-v3 .cs-means__copy .cs-means__item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .cs-means__copy.is-visible .cs-means__item:nth-child(1) { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.landing-v3 .cs-means__copy.is-visible .cs-means__item:nth-child(2) { transition-delay: 0.70s; opacity: 1; transform: translateY(0); }
.landing-v3 .cs-means__copy.is-visible .cs-means__item:nth-child(3) { transition-delay: 0.85s; opacity: 1; transform: translateY(0); }
.landing-v3 .cs-means__copy.is-visible .cs-means__item:nth-child(n+4) { transition-delay: 1.00s; opacity: 1; transform: translateY(0); }
/* ----- CTA (full-bleed: forces 100vw regardless of any parent constraint) ----- */
.landing-v3 .cta-section {
  background: var(--text);
  color: var(--bg);
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  /* dvw fallback for modern browsers — accounts for scrollbar gutter */
  width: 100dvw;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  max-width: 100dvw;
}

.landing-v3 .cta-block {
  background: var(--text);
  color: var(--bg);
  padding: clamp(4rem, 10vw, 8rem) clamp(1.5rem, 5vw, 5rem);
  width: 100%;
  min-height: clamp(28rem, 70vh, 46rem);
  display: flex;
  align-items: center;
}

.landing-v3 .cta-block__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .landing-v3 .cta-block__inner {
    grid-template-columns: 1.5fr 1fr;
    align-items: end;
  }
}

.landing-v3 .cta-block__eyebrow {
  color: rgba(240, 246, 243, 0.7);
  margin-bottom: 1.5rem;
}

.landing-v3 .cta-block__right {
  display: grid;
  gap: 1.5rem;
  align-content: end;
}

.landing-v3 .cta-block__lead {
  max-width: 38ch;
}

.landing-v3 .cta-block .h1,
.landing-v3 .cta-block .h2 {
  color: var(--bg);
}

.landing-v3 .cta-block .body-lg {
  color: var(--bg-muted);
}

.landing-v3 .cta-block .btn-primary {
  background: var(--primary);
  color: var(--text);
}

/* ----- CTA actions: squared buttons with cursor torch ----- */
.landing-v3 .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.landing-v3 .cta-btn {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 2rem;
  min-width: 13rem;
  border-radius: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: visible;
  border: none;
  transition: background 320ms var(--hover-frame-easing),
              color 320ms var(--hover-frame-easing),
              box-shadow 320ms var(--hover-frame-easing) var(--hover-frame-delay);
}

.landing-v3 .cta-btn--sm {
  padding: 0.6rem 1.1rem;
  min-width: 0;
  font-size: 0.9375rem;
}

.landing-v3 .cta-btn__label {
  position: relative;
  z-index: 2;
}

/* torch — radial highlight that follows the cursor (same pattern as why-tile) */
.landing-v3 .cta-btn__torch {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  overflow: hidden;
  background: radial-gradient(
    120px circle at var(--mx) var(--my),
    rgba(156, 213, 198, 0.10),
    rgba(156, 213, 198, 0) 70%
  );
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .cta-btn--ghost-light .cta-btn__torch,
.landing-v3 .cta-btn--ghost .cta-btn__torch {
  background: radial-gradient(
    120px circle at var(--mx) var(--my),
    rgba(46, 38, 38, 0.10),
    rgba(46, 38, 38, 0) 70%
  );
}

.landing-v3 .cta-section .cta-btn--ghost .cta-btn__torch {
  background: radial-gradient(
    120px circle at var(--mx) var(--my),
    rgba(240, 246, 243, 0.10),
    rgba(240, 246, 243, 0) 70%
  );
}

.landing-v3 .cta-btn:hover .cta-btn__torch {
  opacity: 1;
}

.landing-v3 .cta-btn--primary {
  background: transparent;
  color: var(--text);
  border-color: transparent;
  box-shadow: none;
}

.landing-v3 .cta-btn--primary:hover {
  background: var(--hover-wash);
  color: var(--text);
}

.landing-v3 .cta-section .cta-btn--primary {
  background: transparent;
  color: var(--bg);
  box-shadow: none;
}

.landing-v3 .cta-section .cta-btn--primary:hover {
  background: var(--hover-wash);
  color: var(--bg);
}

.landing-v3 .cta-btn--ghost,
.landing-v3 .cta-btn--ghost-light {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  box-shadow: none;
}

.landing-v3 .cta-btn--ghost {
  color: var(--bg);
}

/* Vertical sides use box-shadow inset instead of pseudo-elements so all 4 <i>
   slots stay free for the corner brackets. */
.landing-v3 .cta-btn::before,
.landing-v3 .cta-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hover-frame-color);
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--hover-frame-duration) var(--hover-frame-easing) var(--hover-frame-delay),
              opacity var(--hover-square-opacity-duration) var(--hover-frame-easing);
  z-index: 3;
}

.landing-v3 .cta-btn::before { top: 0; }
.landing-v3 .cta-btn::after  { bottom: 0; }

.landing-v3 .cta-btn--ghost-light::before,
.landing-v3 .cta-btn--ghost-light::after {
  background: var(--text);
}

.landing-v3 .cta-btn--ghost::before,
.landing-v3 .cta-btn--ghost::after {
  background: var(--bg);
}

.landing-v3 .cta-btn:hover::before,
.landing-v3 .cta-btn:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

.landing-v3 .cta-btn--primary:hover,
.landing-v3 .cta-section .cta-btn--primary:hover {
  box-shadow: inset 2px 0 0 0 var(--primary),
              inset -2px 0 0 0 var(--primary);
}

.landing-v3 .cta-btn--ghost-light:hover {
  box-shadow: inset 2px 0 0 0 var(--text),
              inset -2px 0 0 0 var(--text);
}

.landing-v3 .cta-btn--ghost:hover {
  box-shadow: inset 2px 0 0 0 var(--bg),
              inset -2px 0 0 0 var(--bg);
}

.landing-v3 .cta-btn__corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.landing-v3 .cta-btn__corners > i {
  position: absolute;
  width: 13px;
  height: 13px;
  border-width: 2.5px;
  border-style: solid;
  border-color: transparent;
  background: transparent;
}

.landing-v3 .cta-btn__corners > i:nth-child(1) {
  top: 0; left: 0;
  border-right: none; border-bottom: none;
}
.landing-v3 .cta-btn__corners > i:nth-child(2) {
  top: 0; right: 0;
  border-left: none; border-bottom: none;
}
.landing-v3 .cta-btn__corners > i:nth-child(3) {
  bottom: 0; left: 0;
  border-right: none; border-top: none;
}
.landing-v3 .cta-btn__corners > i:nth-child(4) {
  bottom: 0; right: 0;
  border-left: none; border-top: none;
}

.landing-v3 .cta-btn--primary .cta-btn__corners > i {
  border-color: var(--primary);
}

.landing-v3 .cta-btn__corners > i::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--hover-square-opacity-duration) var(--hover-frame-easing),
              transform var(--hover-square-transform-duration) var(--hover-frame-easing);
}

.landing-v3 .cta-btn__corners > i:nth-child(1)::after { top: -4px;    left: -4px; }
.landing-v3 .cta-btn__corners > i:nth-child(2)::after { top: -4px;    right: -4px; }
.landing-v3 .cta-btn__corners > i:nth-child(3)::after { bottom: -4px; left: -4px; }
.landing-v3 .cta-btn__corners > i:nth-child(4)::after { bottom: -4px; right: -4px; }

.landing-v3 .cta-btn--primary .cta-btn__corners > i::after     { background: var(--primary); }
.landing-v3 .cta-btn--ghost-light .cta-btn__corners > i::after { background: var(--text); }
.landing-v3 .cta-btn--ghost .cta-btn__corners > i::after       { background: var(--bg); }

.landing-v3 .cta-btn:hover .cta-btn__corners > i::after {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--hover-square-delay);
}

.landing-v3 .cta-btn--ghost-light:hover {
  background: var(--hover-wash-cocoa);
  color: var(--text);
}

.landing-v3 .cta-btn--ghost:hover {
  background: var(--hover-wash-light);
  color: var(--bg);
}

.landing-v3 .demo {
  padding-top: 0;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.landing-v3 .demo__panel {
  position: relative;
  max-width: 66rem;
  margin-inline: auto;
  padding: clamp(0.5rem, 1.5vw, 1rem);
  background: var(--surface);
  border: 1px solid var(--border);
}

.landing-v3 .demo__corners {
  position: absolute;
  inset: -1px;
  pointer-events: none;
}

.landing-v3 .demo__corners > i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--primary);
}

.landing-v3 .demo__corners > i:nth-child(1) { top: -1px;    left: -1px;  border-right: none; border-bottom: none; }
.landing-v3 .demo__corners > i:nth-child(2) { top: -1px;    right: -1px; border-left: none;  border-bottom: none; }
.landing-v3 .demo__corners > i:nth-child(3) { bottom: -1px; left: -1px;  border-right: none; border-top: none; }
.landing-v3 .demo__corners > i:nth-child(4) { bottom: -1px; right: -1px; border-left: none;  border-top: none; }

.landing-v3 .demo__widget {
  width: 100%;
  min-width: 320px;
  height: 700px;
}
.landing-v3.errors-v3 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

.landing-v3 .errors-v3__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--nav-h));
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.landing-v3 .errors-v3__block {
  text-align: center;
  max-width: 40rem;
  padding: 0 1.5rem;
}

.landing-v3 .errors-v3__code {
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.landing-v3 .errors-v3__title {
  margin-top: 1rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.landing-v3 .errors-v3__desc {
  margin: 1.25rem auto 2rem;
  max-width: 44ch;
  color: var(--neutral);
}

.landing-v3.errors-v3 .v3-footer__logo-svg path,
.landing-v3.errors-v3 [data-controller~="scroll-animate"] {
  opacity: 1;
  transform: none;
  animation: none;
}
/* ----- FAQ section (uses same intro grid as Product/Why) ----- */
.landing-v3 .faq-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

@media (min-width: 900px) {
  .landing-v3 .faq-intro {
    grid-template-columns: 1.6fr 1fr;
  }
}

.landing-v3 .faq-intro__right {
  display: grid;
  gap: 1.75rem;
  align-content: end;
  padding-bottom: 0.5rem;
}

.landing-v3 .faq-intro__copy {
  max-width: 42ch;
  margin: 0;
}

/* mask reveal title — same pattern as Product / Why */
.landing-v3 .faq-title {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.landing-v3 .faq-title .display__line {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.22em;
}

.landing-v3 .faq-title .display__line > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .faq-title.is-visible .display__line:nth-child(1) > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.10s;
}

.landing-v3 .faq-title.is-visible .display__line:nth-child(2) > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

/* faq list */
.landing-v3 .faq {
  border-top: 1px solid var(--border);
}

.landing-v3 .faq__item {
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .faq.is-visible .faq__item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.15s + var(--i, 0) * 0.06s);
}

.landing-v3 .faq__summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 4ch 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.5rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 220ms ease, padding-left 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .faq__summary::-webkit-details-marker { display: none; }

.landing-v3 .faq__index {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--neutral);
  transition: color 220ms ease;
}

.landing-v3 .faq__q {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.3;
}

.landing-v3 .faq__item:hover .faq__summary {
  padding-left: 0.5rem;
}

/* hover preview: tiny hint of the answer color shifts when closed */
.landing-v3 .faq__item:not([open]):hover {
  background:
    linear-gradient(
      to right,
      rgba(156, 213, 198, 0.04) 0%,
      rgba(156, 213, 198, 0) 60%
    );
}

.landing-v3 .faq__item:hover .faq__index,
.landing-v3 .faq__item[open] .faq__index {
  color: var(--primary-deep);
}

.landing-v3 .faq__icon {
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  flex-shrink: 0;
}

.landing-v3 .faq__icon::before,
.landing-v3 .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--text);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background 220ms ease;
}

.landing-v3 .faq__icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-0.5px);
}

.landing-v3 .faq__icon::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);
}

.landing-v3 .faq__item[open] .faq__icon::after {
  transform: translateX(-0.5px) rotate(90deg);
}

.landing-v3 .faq__item[open] .faq__icon::before,
.landing-v3 .faq__item[open] .faq__icon::after {
  background: var(--primary-deep);
}

.landing-v3 .faq__answer {
  padding: 0 2.5rem 1.75rem calc(4ch + 1.5rem);
  color: var(--neutral);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 64ch;
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .faq-title .display__line > span,
  .landing-v3 .faq__item {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

.landing-v3 .feature-grid .v3-card,
.landing-v3 .key-features__inner .v3-card,
.landing-v3 .why-matters-grid .v3-card,
.landing-v3 .how-steps .v3-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms var(--hover-frame-easing),
              box-shadow 320ms var(--hover-frame-easing);
  transition-delay: calc(var(--i, 0) * 0.07s);
}

.landing-v3 .feature-grid .v3-card.is-visible,
.landing-v3 .key-features__inner .v3-card.is-visible,
.landing-v3 .why-matters-grid .v3-card.is-visible,
.landing-v3 .how-steps .v3-card.is-visible,
.landing-v3 .feature-grid.is-visible .v3-card,
.landing-v3 .key-features__inner.is-visible .v3-card,
.landing-v3 .why-matters-grid.is-visible .v3-card,
.landing-v3 .how-steps.is-visible .v3-card {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .feature-grid .v3-card,
  .landing-v3 .key-features__inner .v3-card,
  .landing-v3 .why-matters-grid .v3-card,
  .landing-v3 .how-steps .v3-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.landing-v3 .feature-grid__card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.landing-v3 .feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--primary-deep);
  margin-bottom: 0.35rem;
}

.landing-v3 .feature-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.landing-v3 .feature-icon__img {
  width: 1.4rem;
  height: 1.4rem;
}

.landing-v3 .key-features__inner {
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  max-width: 56rem;
}

.landing-v3 .key-feature {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  border-left: 3px solid var(--primary);
}

.landing-v3 .key-feature__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.1rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--primary-deep);
}

.landing-v3 .key-feature__body {
  min-width: 0;
}

.landing-v3 .why-matters__item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  border-left: 3px solid var(--primary);
}

.landing-v3 .why-matters__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--primary-deep);
  transition: border-color 320ms var(--hover-frame-easing),
              color 320ms var(--hover-frame-easing);
}

.landing-v3 .why-matters__item:hover .why-matters__check {
  border-color: var(--primary-deep);
}

.landing-v3 .why-matters__label {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

.landing-v3 .how-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.landing-v3 .how-step__num {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--primary-deep);
}

.landing-v3 .how-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--primary-deep);
}

.landing-v3 .how-step__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.landing-v3 .how-step__title {
  margin-top: 0.25rem;
}

.landing-v3 .delivered-whatsapp__card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.landing-v3 .delivered-whatsapp__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--primary-deep);
}

.landing-v3 .delivered-whatsapp__title {
  font-size: 1.375rem;
  margin-bottom: 0.35rem;
}

.landing-v3 .delivered-whatsapp__desc {
  font-size: 1.0625rem;
  line-height: 1.55;
}

.landing-v3 .learning-science__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .landing-v3 .learning-science__head {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.landing-v3 .learning-science__title {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
}

.landing-v3 .learning-science__intro {
  display: grid;
  gap: 1rem;
  max-width: 40rem;
}

.landing-v3 .learning-science__lead {
  margin: 0;
}

.landing-v3 .ls-explorer--desktop { display: none; }
.landing-v3 .ls-explorer--mobile { display: block; }

@media (min-width: 768px) {
  .landing-v3 .ls-explorer--desktop {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
  }
  .landing-v3 .ls-explorer--mobile { display: none; }
}

@media (min-width: 1100px) {
  .landing-v3 .ls-explorer--desktop {
    grid-template-columns: 340px 1fr;
  }
}

.landing-v3 .ls-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.landing-v3 .ls-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  padding: 1rem 1.25rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--neutral);
  cursor: pointer;
  transition: background 200ms var(--hover-frame-easing),
              border-color 200ms var(--hover-frame-easing),
              color 200ms var(--hover-frame-easing);
}

.landing-v3 .ls-tab:hover {
  background: var(--hover-wash);
}

.landing-v3 .ls-tab__label {
  font-size: 1rem;
  font-weight: 500;
}

.landing-v3 .ls-tab__arrow {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--border);
  transition: color 200ms var(--hover-frame-easing);
}

.landing-v3 .ls-tab--active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.landing-v3 .ls-tab--active .ls-tab__arrow {
  color: var(--primary-deep);
}

.landing-v3 .ls-chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.landing-v3 .ls-chips::-webkit-scrollbar { display: none; }

.landing-v3 .ls-chip {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--neutral);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.landing-v3 .ls-chip.ls-tab--active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.landing-v3 .ls-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.landing-v3 .ls-panel--mobile {
  margin-top: 1rem;
}

.landing-v3 .ls-panel__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.landing-v3 .ls-panel__copy {
  flex: 1 1 280px;
  min-width: 0;
}

.landing-v3 .ls-panel__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  margin: 0 0 0.75rem;
}

.landing-v3 .ls-panel__title {
  margin: 0 0 0.75rem;
}

.landing-v3 .ls-panel__desc {
  margin: 0 0 1.25rem;
}

.landing-v3 .ls-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.landing-v3 .ls-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--neutral);
  font-size: 0.8125rem;
  font-weight: 500;
}

.landing-v3 .ls-panel__visual {
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-v3 .ls-panel__visual--scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: 1.5rem;
}

.landing-v3 .ls-panel__visual--scroll::-webkit-scrollbar { display: none; }

.landing-v3 .ls-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 340px;
  height: 310px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.landing-v3 .ls-diagram--col {
  flex-direction: column;
  gap: 4px;
}

.landing-v3 .ls-diagram__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.landing-v3 .ls-diagram__row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.landing-v3 .ls-diagram__row--tight {
  gap: 16px;
}

.landing-v3 .ls-node {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--primary-deep);
  background: var(--primary-glow);
  color: var(--primary-deep);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.landing-v3 .ls-node--sm {
  padding: 0.5rem 1rem;
}

.landing-v3 .ls-arrow--v {
  margin-block: -4px;
}

.landing-v3 .custom-journeys__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .landing-v3 .custom-journeys__head {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.landing-v3 .custom-journeys__title {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
}

.landing-v3 .custom-journeys__intro {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  max-width: 40rem;
}

.landing-v3 .custom-journeys__lead {
  margin: 0;
}

.landing-v3 .cj-theater {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  width: 100dvw;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  max-width: 100dvw;
  background: var(--text);
  color: var(--bg);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}

.landing-v3 .cj-theater__track {
  position: relative;
  height: 220vh;
}

.landing-v3 .cj-theater__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  perspective: 1600px;
  transform: translateZ(0);
  contain: layout paint;
}

.landing-v3 .cj-theater__title {
  position: absolute;
  top: clamp(2.5rem, 8vh, 6rem);
  left: 50%;
  transform: translate(-50%, 60px);
  text-align: center;
  margin: 0;
  padding-inline: 1.5rem;
  width: min(40rem, 80vw);
  z-index: 6;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--bg);
  opacity: 0;
  text-shadow: 0 2px 24px var(--text-veil-deep);
  will-change: opacity, transform;
}

.landing-v3 .cj-theater__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.landing-v3 .cj-theater__phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(1200px, 158vw, 2800px);
  height: clamp(1160px, 152vw, 2700px);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* fixed z-order — left always front, right always back. Swapping mid-scroll
   flickers the 3D layers; do not change this with logic. */
.landing-v3 .cj-theater__phone--left  { z-index: 2; }
.landing-v3 .cj-theater__phone--right { z-index: 1; }

.landing-v3 .cj-theater__model {
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  background: transparent !important;
  --progress-bar-color: transparent;
  --progress-bar-height: 0;
  --poster-color: transparent;
}

.landing-v3 .cj-theater__model::part(default-progress-bar),
.landing-v3 .cj-theater__model::part(default-progress-mask) {
  display: none !important;
  opacity: 0 !important;
}

.landing-v3 .cj-theater__copy {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: min(40rem, 76vw);
  margin: 0;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.1875rem, 1.6vw, 1.4rem);
  line-height: 1.65;
  color: var(--bg-fg-strong);
  opacity: 0;
  text-shadow: 0 2px 18px var(--text-veil-mid);
  will-change: opacity, transform;
}

/* negative top margin tucks the CTA under the released pin so it isn't
   stranded in empty dark space — keep tied to viewport height */
.landing-v3 .cj-theater__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(-14rem, -22vh, -10rem);
  position: relative;
  z-index: 2;
  padding: 0 1.5rem clamp(3rem, 7vw, 5rem);
}

.landing-v3 .cj-theater__cta .cta-btn--primary { color: var(--bg); }
.landing-v3 .cj-theater__cta .cta-btn--primary:hover { color: var(--bg); }
.landing-v3 .cj-theater__cta .cta-btn--primary .cta-btn__label { color: var(--bg); }
.landing-v3 .cj-theater__cta .cta-btn--primary .cta-btn__corners > i { border-color: var(--primary); }
.landing-v3 .cj-theater__cta .cta-btn--primary .cta-btn__corners > i::after { background: var(--primary); }

.landing-v3 .cj-theater.is-static .cj-theater__track { height: auto; }
.landing-v3 .cj-theater.is-static .cj-theater__pin {
  position: static;
  height: auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem);
}
.landing-v3 .cj-theater.is-static .cj-theater__title {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 0 auto 2rem !important;
  width: auto !important;
  max-width: 100% !important;
  font-size: clamp(2rem, 8vw, 3rem);
}
.landing-v3 .cj-theater.is-static .cj-theater__copy {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  margin: 1.5rem auto 0 !important;
  width: auto !important;
  max-width: 100% !important;
  font-size: 1rem;
  line-height: 1.55;
}
.landing-v3 .cj-theater.is-static .cj-theater__copy {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
.landing-v3 .cj-theater.is-static .cj-theater__stage { height: 60vh; min-height: 22rem; }
.landing-v3 .cj-theater.is-static .cj-theater__phone--left { display: none; }
.landing-v3 .cj-theater.is-static .cj-theater__phone {
  width: 110vw;
  height: 110vw;
}

@media (max-height: 900px) {
  .landing-v3 .cj-theater__title {
    font-size: clamp(1.875rem, 4.2vw, 3.25rem);
    top: 5.5rem;
  }
  .landing-v3 .cj-theater__copy {
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  }
  .landing-v3 .cj-theater__phone {
    width: clamp(1000px, 145vw, 2200px);
    height: clamp(970px, 140vw, 2100px);
  }
}

@media (max-height: 750px) {
  .landing-v3 .cj-theater__title {
    font-size: clamp(1.5rem, 3.4vw, 2.5rem);
    top: 6rem;
    width: min(32rem, 76vw);
  }
  .landing-v3 .cj-theater__copy {
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    width: min(34rem, 72vw);
    top: 50%;
  }
  .landing-v3 .cj-theater__phone {
    width: clamp(950px, 138vw, 2000px);
    height: clamp(920px, 133vw, 1920px);
  }
}

@media (max-height: 620px) {
  .landing-v3 .cj-theater__title {
    font-size: clamp(1.25rem, 2.8vw, 2rem);
    top: 6.5rem;
  }
  .landing-v3 .cj-theater__copy {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .landing-v3 .cj-theater__phone {
    width: clamp(820px, 118vw, 1700px);
    height: clamp(795px, 115vw, 1630px);
  }
}

@media (max-width: 600px) {
  .landing-v3 .cj-theater__copy {
    top: clamp(8rem, 22vh, 14rem);
    transform: translate(-50%, 0);
    width: min(28rem, 86vw);
  }
  .landing-v3 .cj-theater__stage {
    overflow: hidden;
  }
}


.landing-v3 .vectors-spine {
  background: var(--text);
  color: var(--bg);
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  width: 100dvw;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  max-width: 100dvw;
  overflow: clip;
}

.landing-v3 .vectors-spine__head {
  max-width: 46rem;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.landing-v3 .vectors-spine__eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--primary);
  margin: 0 0 1.25rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-v3 .vectors-spine__head.is-visible .vectors-spine__eyebrow { opacity: 1; transform: none; }

.landing-v3 .vectors-spine__title {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--bg);
  margin: 0 0 1.25rem;
}
.landing-v3 .vectors-spine__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* reserve descender room inside the clip mask, then pull layout back */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}
.landing-v3 .vectors-spine__word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--w, 0) * 0.07s);
}
.landing-v3 .vectors-spine__head.is-visible .vectors-spine__word > span { transform: translateY(0); }

.landing-v3 .vectors-spine__intro {
  color: var(--bg-fg-faint);
  max-width: 52ch;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease 0.35s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
.landing-v3 .vectors-spine__head.is-visible .vectors-spine__intro { opacity: 1; transform: none; }

.landing-v3 .vectors-spine__timeline { position: relative; }

.landing-v3 .vectors-spine__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.25rem;
  width: 2px;
  background: var(--bg-soft);
  overflow: hidden;
}
.landing-v3 .vectors-spine__rail-fill {
  position: absolute;
  inset: 0;
  transform-origin: top;
  transform: scaleY(0);
  background: linear-gradient(180deg, var(--primary), var(--primary-deep));
}

.landing-v3 .vectors-spine__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-v3 .vectors-spine__row {
  position: relative;
  padding-left: 3.75rem;
  padding-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
  min-height: 3rem;
}

.landing-v3 .vectors-spine__node {
  position: absolute;
  top: 0;
  left: 1.25rem;
  transform: translateX(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  /* ring matches the dark section bg so the node punches through the rail line */
  box-shadow: 0 0 0 6px var(--text);
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.5s ease, scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.landing-v3 .vectors-spine__row.is-visible .vectors-spine__node { opacity: 1; scale: 1; }

.landing-v3 .vectors-spine__node-num { position: relative; z-index: 1; }

.landing-v3 .vectors-spine__node-pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0.5;
  transform: scale(1);
}
.landing-v3 .vectors-spine__row.is-visible .vectors-spine__node-pulse {
  animation: spineNodePulse 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
@keyframes spineNodePulse {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 0;   transform: scale(2.4); }
}

.landing-v3 .vectors-spine__card {
  background: var(--bg-glass);
  border: 1px solid var(--bg-glass-edge);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms var(--hover-frame-easing);
}
.landing-v3 .vectors-spine__row.is-visible .vectors-spine__card { opacity: 1; transform: none; }
.landing-v3 .vectors-spine__card:hover { border-color: var(--hover-frame-color); }

.landing-v3 .vectors-spine__card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.landing-v3 .vectors-spine__card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--bg-glass-edge-strong);
  color: var(--primary);
}

.landing-v3 .vectors-spine__card-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bg);
  margin: 0;
}

.landing-v3 .vectors-spine__card-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0.25rem 0 0;
}

.landing-v3 .vectors-spine__card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bg-fg-muted);
  margin: 0;
}

@media (min-width: 860px) {
  .landing-v3 .vectors-spine__rail {
    left: 50%;
    transform: translateX(-50%);
  }

  .landing-v3 .vectors-spine__row {
    padding-left: 0;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: 1fr 5rem 1fr;
    align-items: center;
    min-height: 0;
    margin-bottom: clamp(1rem, 2.5vw, 2.5rem);
  }
  .landing-v3 .vectors-spine__row:last-child { margin-bottom: 0; }

  .landing-v3 .vectors-spine__node {
    position: static;
    transform: none;
    grid-column: 2;
    justify-self: center;
  }
  .landing-v3 .vectors-spine__row.is-visible .vectors-spine__node { scale: 1; }

  .landing-v3 .vectors-spine__row--left .vectors-spine__card {
    grid-column: 1;
    text-align: right;
    transform: translateX(-44px);
  }
  .landing-v3 .vectors-spine__row--left .vectors-spine__card-head {
    flex-direction: row-reverse;
  }

  .landing-v3 .vectors-spine__row--right .vectors-spine__card {
    grid-column: 3;
    transform: translateX(44px);
  }

  .landing-v3 .vectors-spine__row.is-visible .vectors-spine__card { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .vectors-spine__eyebrow,
  .landing-v3 .vectors-spine__intro,
  .landing-v3 .vectors-spine__word > span,
  .landing-v3 .vectors-spine__node,
  .landing-v3 .vectors-spine__card {
    opacity: 1 !important;
    transform: none !important;
    scale: 1 !important;
    transition: none !important;
  }
  .landing-v3 .vectors-spine__rail-fill { transform: scaleY(1) !important; }
  .landing-v3 .vectors-spine__node-pulse { display: none; }
}
/* ----- footer ----- */
.landing-v3 .v3-footer {
  background: var(--primary);
  color: var(--text);
  border-top: none;
  padding-block: clamp(3rem, 5vw, 4rem) 2rem;
}

/* on mint background — everything uses cocoa for contrast */
.landing-v3 .v3-footer__col h4 {
  color: var(--text-veil);
}

.landing-v3 .v3-footer__col a {
  color: var(--text);
  transition: opacity 200ms ease;
}

.landing-v3 .v3-footer__col a:hover {
  opacity: 0.6;
  color: var(--text);
}

.landing-v3 .v3-footer__logo:hover {
  color: var(--text);
  opacity: 0.7;
}

/* divider line between links and base — cocoa fade */
.landing-v3 .v3-footer__base {
  color: rgba(46, 38, 38, 0.7);
  border-top-color: rgba(46, 38, 38, 0.18);
}

.landing-v3 .v3-footer__heart {
  color: var(--text);
}

.landing-v3 .v3-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 700px) {
  .landing-v3 .v3-footer__grid {
    /* brand · product (wide, holds 2 sub-cols) · company · legal */
    grid-template-columns: 1.6fr 2fr 1fr 1fr;
  }
}

/* Product column splits its list into two balanced columns so all 12
   products fit without a towering single list — on mobile too. */
.landing-v3 .v3-footer__products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1.25rem;
}

.landing-v3 .v3-footer__col h4 {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral);
  margin-bottom: 1rem;
  font-weight: 500;
}

/* footer brand logo with letter-by-letter reveal on scroll */
.landing-v3 .v3-footer__logo {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  transition: color 200ms ease;
}

.landing-v3 .v3-footer__logo:hover {
  color: var(--primary-deep);
}

.landing-v3 .v3-footer__logo-svg {
  height: 56px;
  width: auto;
  display: block;
  overflow: visible;
}

.landing-v3 .v3-footer__logo-svg path {
  opacity: 0;
  transform: translateY(40px);
  transform-box: fill-box;
  transform-origin: center bottom;
}

.landing-v3 .v3-footer__col--brand.is-visible .v3-footer__logo-svg path {
  animation: footerLogoRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* stagger each path in visual reading order (left → right) */
/* SVG dom order vs visual: path6=C, path5=h, path1=a, path4=t, path2=a, path3=c, path9/7/8=sparkles */
.landing-v3 .v3-footer__col--brand.is-visible .v3-footer__logo-svg path:nth-child(6)  { animation-delay: 0.00s; }  /* C */
.landing-v3 .v3-footer__col--brand.is-visible .v3-footer__logo-svg path:nth-child(5)  { animation-delay: 0.18s; }  /* h */
.landing-v3 .v3-footer__col--brand.is-visible .v3-footer__logo-svg path:nth-child(1)  { animation-delay: 0.30s; }  /* a */
.landing-v3 .v3-footer__col--brand.is-visible .v3-footer__logo-svg path:nth-child(4)  { animation-delay: 0.42s; }  /* t */
.landing-v3 .v3-footer__col--brand.is-visible .v3-footer__logo-svg path:nth-child(2)  { animation-delay: 0.54s; }  /* a */
.landing-v3 .v3-footer__col--brand.is-visible .v3-footer__logo-svg path:nth-child(3)  { animation-delay: 0.66s; }  /* c */
/* sparkles last, faster, slight stagger */
.landing-v3 .v3-footer__col--brand.is-visible .v3-footer__logo-svg path:nth-child(7)  { animation-delay: 0.85s; }
.landing-v3 .v3-footer__col--brand.is-visible .v3-footer__logo-svg path:nth-child(8)  { animation-delay: 0.92s; }
.landing-v3 .v3-footer__col--brand.is-visible .v3-footer__logo-svg path:nth-child(9)  { animation-delay: 0.99s; }

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .v3-footer__logo-svg path {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.landing-v3 .v3-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.landing-v3 .v3-footer__col a {
  text-decoration: none;
  font-size: 0.9375rem;
}

.landing-v3 .v3-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid rgba(46, 38, 38, 0.18);
  font-size: 0.8125rem;
}

.landing-v3 .v3-footer__base .v3-footer__social {
  margin-left: auto;
}

.landing-v3 .v3-footer__made {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.landing-v3 .v3-footer__heart {
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: -0.15em;
  margin-inline: 0.1em;
  filter: drop-shadow(0 1px 0 rgba(46, 38, 38, 0.08));
  animation: heartBeat 1.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes heartBeat {
  0%, 100%      { transform: scale(1); }
  14%           { transform: scale(1.22); }
  28%           { transform: scale(1); }
  42%           { transform: scale(1.18); }
  56%           { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .v3-footer__heart { animation: none; }
}

.landing-v3 .v3-footer__social {
  display: flex;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-v3 .v3-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(46, 38, 38, 0.2);
  color: var(--text);
  transition: border-color 200ms var(--hover-frame-easing),
              background 200ms var(--hover-frame-easing);
}

.landing-v3 .v3-footer__social-link:hover {
  border-color: var(--text);
  background: rgba(46, 38, 38, 0.06);
}

/* ----- hero ----- */
.landing-v3 .hero {
  padding-block: clamp(5rem, 9vw, 8rem) clamp(2.5rem, 4vw, 4rem);
  position: relative;
  overflow: visible;
  z-index: 5;
}

.landing-v3 .hero__content {
  position: relative;
  z-index: 2;
}

.landing-v3 .hero .container-x {
  container-type: inline-size;
}

.landing-v3 .hero--dark {
  background: var(--primary);
  color: var(--text);
  overflow: hidden;
  min-height: clamp(36rem, 80vh, 52rem);
}

.landing-v3 .hero--dark .eyebrow,
.landing-v3 .hero--dark .eyebrow__letter {
  color: var(--text);
}

.landing-v3 .hero--dark .hero__lead {
  color: rgba(46, 38, 38, 0.78);
}

.landing-v3 .hero--dark .cta-btn,
.landing-v3 .hero--dark .cta-btn__label {
  color: var(--text);
}

.landing-v3 .hero--dark .cta-btn--primary .cta-btn__corners > i {
  border-color: var(--text);
}

.landing-v3 .hero--dark .cta-btn--primary:hover {
  background: transparent;
  color: var(--text);
  box-shadow: inset 2px 0 0 0 var(--text),
              inset -2px 0 0 0 var(--text);
}

.landing-v3 .hero--dark .cta-btn--primary .cta-btn__torch {
  background: radial-gradient(
    140px circle at var(--mx) var(--my),
    rgba(232, 247, 241, 0.70),
    rgba(232, 247, 241, 0) 70%
  );
}

.landing-v3 .hero--dark .cta-btn--ghost:hover,
.landing-v3 .hero--dark .cta-btn--ghost-light:hover {
  background: rgba(46, 38, 38, 0.06);
  color: var(--text);
  box-shadow: inset 2px 0 0 0 var(--text),
              inset -2px 0 0 0 var(--text);
}

.landing-v3 .hero--dark .cta-btn::before,
.landing-v3 .hero--dark .cta-btn::after {
  background: var(--text);
}

.landing-v3 .hero--dark .cta-btn--primary .cta-btn__corners > i::after,
.landing-v3 .hero--dark .cta-btn--ghost .cta-btn__corners > i::after,
.landing-v3 .hero--dark .cta-btn--ghost-light .cta-btn__corners > i::after {
  background: var(--text);
}

.landing-v3 .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--primary);
}

.landing-v3 .hero__bg-spline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  opacity: 0;
  animation: heroSplineFade 1.6s cubic-bezier(0.16, 1, 0.3, 1) 3s forwards;
}

@keyframes heroSplineFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .hero__bg-spline {
    animation: none;
    opacity: 1;
  }
}

/* =====================================================================
   Phones Theater — scroll-driven 3D scene
   ===================================================================== */

.landing-v3 .phones-theater {
  position: relative;
  width: 100%;
  height: 320vh; /* 3 chapters × ~100vh of scroll */
  background: transparent;
  margin-block: clamp(-6rem, -8vw, -8rem) clamp(-6rem, -8vw, -8rem);
  z-index: 5;
}

.landing-v3 .phones-theater__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  perspective: 1600px;
}

.landing-v3 .phones-theater__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-v3 .phones-theater__phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(900px, 95vw, 1700px);
  height: clamp(900px, 90vw, 1600px);
  pointer-events: none;
  will-change: transform, opacity;
  /* GSAP drives the inline transform; we keep translate(-50%,-50%) as base */
  transform: translate(-50%, -50%);
}

.landing-v3 .phones-theater__model {
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  --progress-bar-color: transparent;
  --progress-bar-height: 0;
  --poster-color: transparent;
}

/* chapters: stacked absolutely; GSAP fades them in/out as scroll progresses */
.landing-v3 .phones-theater__chapters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.landing-v3 .phones-theater__chapter {
  position: absolute;
  top: 50%;
  left: clamp(1.5rem, 5vw, 4rem);
  right: clamp(1.5rem, 5vw, 4rem);
  transform: translateY(-50%);
  max-width: 28rem;
  opacity: 0;
  will-change: opacity, transform;
}

/* center chapter horizontally on smaller layouts; left-anchored on wide */
@media (min-width: 1100px) {
  .landing-v3 .phones-theater__chapter {
    left: clamp(3rem, 6vw, 6rem);
    right: auto;
  }

  .landing-v3 .phones-theater__chapter[data-index="1"] {
    left: auto;
    right: clamp(3rem, 6vw, 6rem);
    text-align: right;
  }
}

.landing-v3 .phones-theater__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
  font-weight: 600;
}

.landing-v3 .phones-theater__headline {
  font-family: var(--font-display, inherit);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 1rem 0;
  font-weight: 500;
}

.landing-v3 .phones-theater__copy {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.5;
  color: var(--neutral);
  margin: 0;
}

@media (max-width: 768px) {
  .landing-v3 .phones-theater {
    height: auto;
    min-height: 100vh;
  }
  .landing-v3 .phones-theater__sticky {
    position: relative;
    height: 80vh;
  }
  .landing-v3 .phones-theater__phone {
    width: 120vw;
    height: 120vw;
  }
  .landing-v3 .phones-theater__chapter {
    position: relative;
    top: auto;
    transform: none;
    text-align: center;
    margin: 1rem auto;
    opacity: 1;
  }

  .landing-v3 .hero .display .display__line > span {
    font-size: inherit;
  }
  .landing-v3 .hero .hero__lead {
    font-size: 1.0625rem;
  }
}

/* Spline web component: !important required to pierce Shadow DOM defaults */
.landing-v3 spline-viewer,
.landing-v3 spline-viewer::part(canvas),
.landing-v3 .phones-theater__model {
  background: transparent !important;
}

.landing-v3 .phones-theater__model::part(default-progress-bar),
.landing-v3 .phones-theater__model::part(default-progress-mask) {
  display: none !important;
  opacity: 0 !important;
}

.landing-v3 spline-viewer::part(logo),
.landing-v3 spline-viewer::part(loading),
.landing-v3 spline-viewer #logo {
  display: none !important;
}

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

@keyframes heroSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes heroLineRise {
  from {
    opacity: 0;
    transform: translateY(110%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landing-v3 .hero [data-rise] {
  opacity: 0;
  animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.landing-v3 .hero [data-slide-left] {
  opacity: 0;
  animation: heroSlideLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.landing-v3 .hero .display {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.landing-v3 .hero .display__line {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.22em;
  white-space: nowrap;
}

.landing-v3 .hero .display__line > span {
  font-size: calc(var(--hero-scale, 4.5rem) * 0.66);
  display: inline-block;
  opacity: 0;
  animation: heroLineRise 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.landing-v3 .hero [data-slide-left]      { animation-delay: 0.15s; }
/* eyebrow takes ~1.03s (22 letters × 40ms + 0.15s base) — display starts after */
.landing-v3 .hero .display__line:nth-child(1) > span { animation-delay: 1.20s; }
.landing-v3 .hero .display__line:nth-child(2) > span { animation-delay: 1.55s; }
.landing-v3 .hero .display__line:nth-child(3) > span { animation-delay: 1.85s; }
.landing-v3 .hero [data-rise="copy"]     { animation-delay: 2.20s; }
.landing-v3 .hero [data-rise="cta"]      { animation-delay: 2.45s; }

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .hero [data-rise],
  .landing-v3 .hero [data-slide-left],
  .landing-v3 .hero .display__line > span {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.landing-v3 .hero__content {
  max-width: 64rem;
  /* cqi keeps the nowrap "INFRASTRUCTURE" (~9em wide in MPLUS1) within the
     64rem content cap at every width; hero elements derive from this scale. */
  --hero-scale: clamp(2rem, 6.5cqi, 5.25rem);
}

.landing-v3 .hero__lead {
  max-width: 48ch;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-size: max(1rem, calc(var(--hero-scale, 1.3125rem) * 0.2));
}

.landing-v3 .hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.landing-v3 .how-section {
  --how-track: 1100vh;

  --how-card-w-vw: 38vw;
  --how-card-w-max: 560px;
  --how-card-h-cap: 56vh;
  --how-card-w: min(var(--how-card-w-vw), var(--how-card-w-max), var(--how-card-h-cap));

  --how-frame-w: calc(50vw + var(--how-card-w));

  --how-edge-top: clamp(6rem, 12vh, 10rem);
  --how-heading-top: clamp(11rem, 22vh, 16rem);
  --how-bottom-card-drop: 11rem;
  --how-image-ratio: 4 / 3;

  position: relative;
  height: var(--how-track);
  padding: 0;
  background: var(--text);
  color: var(--bg);
}

.landing-v3 .how-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.landing-v3 .how-stage {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

.landing-v3 .how-stage__inner {
  position: relative;
  width: var(--how-frame-w);
  height: 100%;
  margin-inline: auto;
}

.landing-v3 .how-stage__chip {
  position: absolute;
  top: clamp(6rem, 12vh, 9rem);
  left: 0;
  z-index: 30;
  color: var(--bg);
  font-size: 1.0625rem;
  opacity: 0;
  will-change: transform, opacity;
}

.landing-v3 .how-stage__chip .product-chip__label { color: var(--bg); }
.landing-v3 .how-stage__chip .product-chip__arrow { stroke: var(--bg); }
.landing-v3 .how-stage__chip .product-chip__bracket-left,
.landing-v3 .how-stage__chip .product-chip__bracket-right { border-color: var(--bg); }

.landing-v3 .how-heading {
  position: absolute;
  top: var(--how-heading-top);
  left: 0;
  right: 0;
  z-index: 20;
  max-width: 20ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--bg);
  opacity: 0;
  will-change: transform, opacity;
}

.landing-v3 .how-heading > span { display: block; }
.landing-v3 .how-heading--main   { font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 0.98; }
.landing-v3 .how-heading--bridge { font-size: clamp(2rem, 5vw, 4rem);       line-height: 1.05; }

.landing-v3 .how-card {
  position: absolute;
  z-index: 10;
  width: var(--how-card-w);
  opacity: 0;
  will-change: transform, opacity;
  container-type: inline-size;
}

.landing-v3 .how-card--top-right { top: var(--how-edge-top); right: 0; }
.landing-v3 .how-card--top-left  { top: var(--how-edge-top); left: 0; }
.landing-v3 .how-card--bottom-right { bottom: clamp(5rem, 10vh, 8rem); right: 0; }

.landing-v3 .how-card--bottom-left {
  top: calc(var(--how-heading-top) + var(--how-bottom-card-drop));
  left: 0;
}

.landing-v3 .how-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--how-image-ratio);
}

.landing-v3 .how-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.landing-v3 .how-card__corners {
  position: absolute;
  inset: -7px;
  z-index: 2;
  pointer-events: none;
}

.landing-v3 .how-card__corners > i {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--primary);
}

.landing-v3 .how-card__corners > i:nth-child(1) { top: 0; left: 0;  border-right: none; border-bottom: none; }
.landing-v3 .how-card__corners > i:nth-child(2) { top: 0; right: 0; border-left: none;  border-bottom: none; }
.landing-v3 .how-card__corners > i:nth-child(3) { bottom: 0; left: 0;  border-right: none; border-top: none; }
.landing-v3 .how-card__corners > i:nth-child(4) { bottom: 0; right: 0; border-left: none;  border-top: none; }

.landing-v3 .how-card__copy {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.landing-v3 .how-card__counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

.landing-v3 .how-card__counter-sep { opacity: 0.5; }

.landing-v3 .how-card__sector {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.2cqi, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--bg);
}

.landing-v3 .how-card__desc {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(0.9375rem, 2.8cqi, 1.0625rem);
  line-height: 1.5;
  color: var(--bg-muted);
}

.landing-v3 .how-closing {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 25;
  width: calc(100% - clamp(3rem, 10vw, 8rem));
  max-width: 28ch;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--text);
  opacity: 0;
  will-change: transform, opacity;
}

@media (max-height: 900px) {
  .landing-v3 .how-section {
    --how-image-ratio: 16 / 10;
    --how-card-h-cap: 62vh;
    --how-bottom-card-drop: 10rem;
  }
  .landing-v3 .how-heading--main   { font-size: clamp(1.625rem, 3.3vw, 2.5rem); }
  .landing-v3 .how-heading--bridge { font-size: clamp(1.875rem, 3.8vw, 3rem); }
  .landing-v3 .how-stage__chip     { font-size: 0.9375rem; }
  .landing-v3 .how-closing         { font-size: clamp(1.25rem, 2.4vw, 2rem); }
  .landing-v3 .how-card--bottom-left { bottom: auto; }
}

@media (max-height: 750px) {
  .landing-v3 .how-section {
    --how-card-h-cap: 56vh;
    --how-bottom-card-drop: 9rem;
  }
  .landing-v3 .how-heading--main   { font-size: clamp(1.375rem, 2.8vw, 2.125rem); }
  .landing-v3 .how-heading--bridge { font-size: clamp(1.625rem, 3.4vw, 2.625rem); }
  .landing-v3 .how-stage__chip     { font-size: 0.875rem; }
  .landing-v3 .how-closing         { font-size: clamp(1rem, 2vw, 1.625rem); }
  .landing-v3 .how-card__copy      { margin-top: 0.5rem; gap: 0.3125rem; }
}

@media (max-height: 620px) {
  .landing-v3 .how-section {
    --how-card-h-cap: 50vh;
    --how-bottom-card-drop: 6rem;
  }
  .landing-v3 .how-heading--main   { font-size: clamp(1.125rem, 2.2vw, 1.75rem); }
  .landing-v3 .how-heading--bridge { font-size: clamp(1.375rem, 2.8vw, 2.125rem); }
  .landing-v3 .how-stage__chip     { font-size: 0.75rem; }
  .landing-v3 .how-closing         { font-size: clamp(0.875rem, 1.6vw, 1.25rem); }
  .landing-v3 .how-card__copy      { margin-top: 0.5rem; gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce), (max-width: 960px) {
  .landing-v3 .how-section {
    height: auto;
    background: var(--text);
  }
  .landing-v3 .how-overlay { display: none; }
  .landing-v3 .how-stage {
    position: relative;
    height: auto;
    overflow: visible;
  }
  .landing-v3 .how-stage__inner {
    display: grid;
    gap: clamp(2rem, 5vw, 3rem);
    width: auto;
    height: auto;
    padding-block: clamp(3rem, 8vw, 5rem);
    padding-inline: clamp(1rem, 4vw, 3rem);
  }
  .landing-v3 .how-stage__chip,
  .landing-v3 .how-heading,
  .landing-v3 .how-closing,
  .landing-v3 .how-card {
    position: relative;
    inset: auto;
    width: auto;
    opacity: 1 !important;
    transform: none !important;
  }
  .landing-v3 .how-card { width: 100%; }
  .landing-v3 .how-closing { color: var(--bg); }
  .landing-v3 .how-heading--bridge,
  .landing-v3 .how-closing { display: none; }
}
/* ----- layout primitives ----- */
.landing-v3 .container-x {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 3vw, 3rem);
  box-sizing: border-box;
}

/* defensively reset any parent constraints leaking from layout */
body.landing-page,
body.landing-page > main {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  overflow-x: clip;
}

html,
body.landing-page {
  overflow-x: clip;
}

.landing-v3 .section {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.landing-v3 .rule {
  height: 1px;
  background: var(--border);
  width: 100%;
}

.landing-v3.legal-page .page-hero__title {
  font-size: clamp(2rem, 4vw, 2.875rem);
}

.landing-v3 .legal {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 9vw, 7rem);
}

.landing-v3 .legal__inner {
  max-width: 56rem;
  margin-inline: auto;
}

.landing-v3 .legal__meta {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
  color: var(--neutral);
}

.landing-v3 .legal__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
}

.landing-v3 .legal__body > p {
  margin: 0 0 1.25rem;
  color: var(--neutral);
}

.landing-v3 .legal__body h2 {
  margin: clamp(2.25rem, 4vw, 3rem) 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.landing-v3 .legal__body h3 {
  margin: 1.75rem 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
}

.landing-v3 .legal__body ul {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  list-style: disc;
  color: var(--neutral);
}

.landing-v3 .legal__body li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.landing-v3 .legal__body strong {
  color: var(--text);
  font-weight: 600;
}

.landing-v3 .legal__body a {
  color: var(--primary-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.landing-v3 .legal__body a:hover {
  color: var(--primary-hover);
}
.landing-v3 .v3-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--primary);
  border-bottom: 1px solid transparent;
  transition: background 320ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .v3-navbar.v3-navbar--solid {
  background: rgba(240, 246, 243, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.landing-v3 .v3-navbar.v3-navbar--transparent {
  background: var(--primary);
  border-bottom-color: transparent;
}

.landing-v3 .v3-navbar--transparent .cta-btn--primary,
.landing-v3 .v3-navbar--transparent .cta-btn--primary .cta-btn__label {
  color: var(--text);
}

.landing-v3 .v3-navbar--transparent .cta-btn--primary .cta-btn__corners > i {
  border-color: var(--text);
}

.landing-v3 .v3-navbar--transparent .cta-btn--primary .cta-btn__corners > i::after {
  background: var(--text);
}

.landing-v3 .v3-navbar--transparent .cta-btn--primary::before,
.landing-v3 .v3-navbar--transparent .cta-btn--primary::after {
  background: var(--text);
}

.landing-v3 .v3-navbar--transparent .cta-btn--primary .cta-btn__torch {
  background: radial-gradient(
    140px circle at var(--mx) var(--my),
    rgba(232, 247, 241, 0.70),
    rgba(232, 247, 241, 0) 70%
  );
}

.landing-v3 .v3-navbar--transparent .cta-btn--primary:hover {
  background: rgba(46, 38, 38, 0.06);
  color: var(--text);
  box-shadow: inset 2px 0 0 0 var(--text),
              inset -2px 0 0 0 var(--text);
}

.landing-v3 .v3-navbar--transparent .cta-btn--primary:hover .cta-btn__label {
  color: var(--text);
}

.landing-v3 .v3-navbar.v3-navbar--menu-open,
.landing-v3 .v3-navbar.v3-navbar--menu-open.v3-navbar--transparent {
  background: var(--surface);
  border-bottom-color: var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing-v3 .v3-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: var(--nav-h);
}

.landing-v3 .v3-navbar__logo {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.landing-v3 .v3-navbar__logo:hover {
  color: var(--primary-deep);
}

.landing-v3 .v3-navbar__logo-svg {
  height: 26px;
  width: auto;
  display: block;
}

.landing-v3 .v3-navbar__logo-svg path,
.landing-v3 .v3-navbar__logo-svg .cls-1,
.landing-v3 .v3-navbar__logo-svg .cls-2 {
  fill: currentColor !important;
}

.landing-v3 .v3-navbar a.nav-link {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding-inline: 0.5rem;
}

.landing-v3 .v3-navbar a.nav-link:hover {
  color: var(--primary-deep);
}

.landing-v3 .v3-navbar__links {
  display: none;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 1100px) {
  .landing-v3 .v3-navbar__links { display: flex; }
}

.landing-v3 .v3-navbar__actions {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 1100px) {
  .landing-v3 .v3-navbar__actions { display: flex; }
}

.landing-v3 .v3-navbar__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
}

.landing-v3 .v3-navbar__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  transition: transform 200ms ease, opacity 200ms ease;
}

.landing-v3 .v3-navbar__toggle[aria-expanded="true"] .v3-navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.landing-v3 .v3-navbar__toggle[aria-expanded="true"] .v3-navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}
.landing-v3 .v3-navbar__toggle[aria-expanded="true"] .v3-navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1100px) {
  .landing-v3 .v3-navbar__toggle { display: none; }
}

.landing-v3 .v3-navbar__drawer {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 3rem) 2rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
}

.landing-v3 .v3-navbar__drawer:not([hidden]) {
  display: flex;
}

.landing-v3 .v3-navbar__drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.landing-v3 .v3-navbar__drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 1100px) {
  .landing-v3 .v3-navbar__drawer,
  .landing-v3 .v3-navbar__drawer:not([hidden]) { display: none; }
}

.landing-v3 .page-hero {
  padding-top: clamp(5rem, 9vw, 8rem);
  text-align: left;
}

.landing-v3 .page-hero__inner {
  display: grid;
  gap: 1.5rem;
  max-width: 60rem;
}

.landing-v3 .page-hero__eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--primary-deep);
  margin: 0;
}

.landing-v3 .page-hero__title {
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  margin: 0;
}

.landing-v3 .page-hero__title .display__line {
  display: inline-block;
  overflow: hidden;
  /* reserve descender room inside the clip mask, then pull layout back */
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

.landing-v3 .page-hero__title .display__line > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   1s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .page-hero__title.is-visible .display__line > span,
.landing-v3 .page-hero__inner.is-visible .page-hero__title .display__line > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .page-hero__title .display__line > span {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.landing-v3 .page-hero__lead {
  max-width: 52ch;
  margin: 0;
}

.landing-v3 .page-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.landing-v3 .section-heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

@media (min-width: 900px) {
  .landing-v3 .section-heading {
    grid-template-columns: 1.6fr 1fr;
  }
}

.landing-v3 .section-heading__right {
  display: grid;
  gap: 1.75rem;
  align-content: end;
  padding-bottom: 0.5rem;
}

.landing-v3 .section-heading__copy {
  max-width: 42ch;
  margin: 0;
}

.landing-v3 .section-heading__title {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.landing-v3 .section-heading__title .display__line {
  display: inline-block;
  overflow: hidden;
  /* reserve descender room inside the clip mask, then pull layout back */
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

.landing-v3 .section-heading__title .display__line > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .section-heading__title.is-visible .display__line > span,
.is-visible > .section-heading__title .display__line > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.landing-v3 .v3-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  transition: border-color 320ms var(--hover-frame-easing),
              box-shadow 320ms var(--hover-frame-easing);
}

.landing-v3 .v3-card:hover {
  border-color: var(--hover-frame-color);
  box-shadow: var(--shadow-1);
}

.landing-v3 .v3-card__title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.5rem;
}

.landing-v3 .v3-card__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--neutral);
  margin: 0;
}

.landing-v3 .v3-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .landing-v3 .v3-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .landing-v3 .v3-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .landing-v3 .v3-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.landing-v3 .pricing-hero {
  padding-block: clamp(3rem, 8vh, 6rem) clamp(2rem, 5vh, 3rem);
}

.landing-v3 .pricing-hero__inner {
  display: grid;
  gap: 1rem;
  max-width: 56ch;
}

.landing-v3 .pricing-hero__eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin: 0;
}

.landing-v3 .pricing-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.landing-v3 .pricing-hero__lead {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--neutral);
  margin: 0;
}

.landing-v3 .pricing-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.landing-v3 .pricing-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--neutral);
  text-decoration: none;
  background: transparent;
  transition: background 200ms ease, color 200ms ease;
}

.landing-v3 .pricing-toggle__btn.is-active {
  background: var(--text);
  color: var(--bg);
}

.landing-v3 .pricing-toggle__badge {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--primary-deep);
}

.landing-v3 .pricing-toggle__btn.is-active .pricing-toggle__badge {
  color: var(--primary);
}

.landing-v3 .pricing-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .landing-v3 .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .landing-v3 .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.landing-v3 .pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms var(--hover-frame-easing);
  transition-delay: calc(var(--i, 0) * 0.08s);
}

.landing-v3 .pricing-card.is-visible,
.landing-v3 .pricing-grid.is-visible .pricing-card {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .pricing-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.landing-v3 .pricing-card--featured {
  border-color: var(--primary-deep);
}

.landing-v3 .pricing-card__tag {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--primary-deep);
  color: var(--bg);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.75rem;
}

.landing-v3 .pricing-card__name {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 0.5rem;
}

.landing-v3 .pricing-card__desc {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--neutral);
  margin: 0 0 1.5rem;
  /* reserve 2 lines so cards align their prices regardless of copy length */
  min-height: 2.8em;
}

.landing-v3 .pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.landing-v3 .pricing-card__amount {
  font-size: clamp(2.25rem, 4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
}

.landing-v3 .pricing-card__interval {
  font-size: 0.9375rem;
  color: var(--neutral);
}

.landing-v3 .pricing-card__annual-note {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--neutral);
}
.landing-v3 .pricing-card__annual-note.is-hidden,
.landing-v3 .pricing-card__annual-note--placeholder { visibility: hidden; }

.landing-v3 .pricing-card__cta {
  width: 100%;
  margin-bottom: 1.75rem;
}

.landing-v3 .pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.landing-v3 .pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text);
}

.landing-v3 .pricing-card__check {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--primary-deep);
}

.landing-v3 .pricing-footnote {
  font-size: 0.8125rem;
  color: var(--neutral);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 60ch;
}

.landing-v3 .pricing-addon__price {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  margin: 1rem 0 0;
}

.landing-v3 .pricing-whatsapp__inner {
  display: flex;
  justify-content: center;
}

.landing-v3 .pricing-whatsapp__card {
  width: 100%;
  max-width: 48rem;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.25rem;
  text-align: center;
}

.landing-v3 .pricing-whatsapp__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.landing-v3 .pricing-whatsapp__intro {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.55;
  color: var(--neutral);
  margin: 0;
}

.landing-v3 .pricing-whatsapp__links-block {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.landing-v3 .pricing-whatsapp__links-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.landing-v3 .pricing-whatsapp__links {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.landing-v3 .pricing-whatsapp__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--primary-deep);
  text-decoration: none;
  transition: opacity 160ms ease;
}

.landing-v3 .pricing-whatsapp__link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.landing-v3 .pricing-whatsapp__note {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--neutral);
  margin: 0;
  text-align: left;
}

.landing-v3 .pricing-whatsapp__note strong {
  color: var(--text);
  font-weight: 600;
}

.landing-v3.pricing-page .pricing-section,
.landing-v3.pricing-page .pricing-addons,
.landing-v3.pricing-page .pricing-whatsapp {
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
/* ----- product section layout (title left, chip + copy right) ----- */
.landing-v3 .product-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

@media (min-width: 900px) {
  .landing-v3 .product-intro {
    grid-template-columns: 1.6fr 1fr;
  }
}

.landing-v3 .product-intro__right {
  display: grid;
  gap: 1.75rem;
  align-content: end;
  padding-bottom: 0.5rem;
}

.landing-v3 .product-intro__copy {
  max-width: 42ch;
  margin: 0;
}

/* ----- product title (large + dramatic mask reveal per line) ----- */
.landing-v3 .product-title {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.landing-v3 .product-title .display__line {
  display: inline-block;
  overflow: hidden;
  /* reserve descender room inside the clip mask, then pull layout back */
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

.landing-v3 .product-title .display__line > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .product-title.is-visible .display__line:nth-child(1) > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.10s;
}

.landing-v3 .product-title.is-visible .display__line:nth-child(2) > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}

/* ----- product chip "Our products [ ↘ ]" — STATIC, no hover ----- */
.landing-v3 .product-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  align-self: start;
  color: var(--text);
}

.landing-v3 .product-chip__label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}

.landing-v3 .product-chip__bracket {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--neutral);
}

.landing-v3 .product-chip__bracket-left,
.landing-v3 .product-chip__bracket-right {
  display: inline-block;
  width: 8px;
  height: 22px;
  border: 1px solid currentColor;
}

.landing-v3 .product-chip__bracket-left  { border-right: none; }
.landing-v3 .product-chip__bracket-right { border-left:  none; }

.landing-v3 .product-chip__arrow {
  color: var(--text);
}

/* ----- product cards grid ----- */
.landing-v3 .product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

@media (min-width: 700px) {
  .landing-v3 .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .landing-v3 .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.landing-v3 .product-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 1.25rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--bg);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  min-height: 17rem;
  transition: color 350ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);

  opacity: 0;
  transform: translateY(20px);
}

.landing-v3 .product-grid.is-visible .product-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              color 350ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(0.2s + var(--i, 0) * 0.06s);
}

/* hover lift — card rises with primary-tinted shadow */
.landing-v3 .product-grid.is-visible .product-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 24px -8px var(--primary-glow),
    0 2px 6px rgba(46, 38, 38, 0.06);
  transition-delay: 0s;
  z-index: 1;
}

/* (product card frame removed — moved to why-tile) */

/* mint wash that floods from bottom-left on hover */
.landing-v3 .product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  z-index: -2;
  transform: translate3d(-100%, 100%, 0);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .product-card:hover::before,
.landing-v3 .product-card:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.landing-v3 .product-card__num {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral);
  letter-spacing: 0.04em;
  grid-row: 1;
  grid-column: 1;
  transition: color 350ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .product-card:hover .product-card__num {
  color: var(--text);
  transform: translateX(4px);
}

.landing-v3 .product-card__arrow {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  color: var(--neutral);
  transform: translate(0, 0) rotate(-45deg);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
              color 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .product-card:hover .product-card__arrow {
  color: var(--text);
  transform: translate(6px, -6px) rotate(-45deg);
}

.landing-v3 .product-card__arrow svg {
  display: block;
}

.landing-v3 .product-card__title {
  grid-column: 1 / -1;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0;
  align-self: start;
  min-height: 2.5em;
  display: flex;
  align-items: flex-start;
  max-width: 16ch;
  transition: color 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .product-card__desc {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--neutral);
  margin: -0.75rem 0 -0.75rem;
  max-width: 38ch;
  transition: color 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .product-card:hover .product-card__desc {
  color: var(--text);
}

.landing-v3 .product-card__cta {
  grid-column: 1 / -1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1) 80ms,
              transform 450ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}

.landing-v3 .product-card:hover .product-card__cta {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .product-title .display__line > span,
  .landing-v3 .product-card,
  .landing-v3 .product-card::before,
  .landing-v3 .product-card__num,
  .landing-v3 .product-card__arrow,
  .landing-v3 .product-card__cta {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   RESPONSIVE — tablet (≤ 900px) and mobile (≤ 640px)
   ========================================================================= */

/* TABLET — collapse 2-column intros, tighten paddings */
@media (max-width: 899px) {
  .landing-v3 .v3-navbar__inner {
    height: 60px;
    gap: 1rem;
  }

  .landing-v3 .v3-navbar__links {
    display: none;  /* hide nav links — keep only logo + ctas */
  }

  /* hide secondary CTA (Log in) on tablet to save space */
  .landing-v3 .v3-navbar a.btn-ghost {
    display: none;
  }

  /* product/why/faq/testimonials/how intros become single column */
  .landing-v3 .product-intro,
  .landing-v3 .faq-intro,
  .landing-v3 .testimonials-intro,
  .landing-v3 .how-intro {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .landing-v3 .product-intro__right,
  .landing-v3 .faq-intro__right,
  .landing-v3 .testimonials-intro__right,
  .landing-v3 .how-intro__right {
    padding-bottom: 0;
    gap: 1rem;
  }

  /* product cards: 2 columns */
  .landing-v3 .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* how grid: stays 2 cols at >=800px (already in 800 breakpoint) */

  /* testimonials: stage gets stacked */
  .landing-v3 .testimonials-stage {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* why section: visual + cards already collapse via existing rules */
}

/* MOBILE — single column everything, smaller typography */
@media (max-width: 640px) {
  /* tighter container padding */
  .landing-v3 .container-x {
    padding-inline: 1.25rem;
  }

  /* navbar: spread items so logo and CTA don't touch */
  .landing-v3 .v3-navbar__inner {
    justify-content: space-between;
    gap: 0.75rem;
  }

  /* shorter section padding */
  .landing-v3 .section {
    padding-block: clamp(2rem, 8vw, 3rem);
  }

  /* navbar: smaller logo, primary CTA only */
  .landing-v3 .v3-navbar__inner {
    height: 56px;
  }

  .landing-v3 .v3-navbar__logo-svg {
    height: 22px;
  }

  .landing-v3 .v3-navbar .btn-primary {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
  }

  /* hero — tame the giant display */
  .landing-v3 .hero {
    padding-block: clamp(2rem, 8vw, 3.5rem) clamp(1.5rem, 5vw, 2.5rem);
  }

  /* eyebrow letters ("LEARNING INFRASTRUCTURE") — scale so the longest
     word fits the viewport. "INFRASTRUCTURE" (14 letters) drives the size:
     ~6vw keeps it inside the container without clipping on the right.
     Scoped under .hero to outrank the base .eyebrow--letters rule, which the
     CSS bundler emits after this file. */
  .landing-v3 .hero .eyebrow--letters {
    font-size: clamp(1.5rem, 6.2vw, 3rem);
    letter-spacing: -0.02em;
    line-height: 1.02;
  }

  .landing-v3 .display {
    font-size: clamp(2.5rem, 11vw, 3.75rem);
    line-height: 1;
  }

  /* allow display lines to wrap on tight mobile widths */
  .landing-v3 .display .display__line {
    white-space: normal;
  }

  .landing-v3 .hero__cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }

  .landing-v3 .hero__cta-row .btn-primary,
  .landing-v3 .hero__cta-row .btn-secondary {
    justify-content: center;
    width: 100%;
  }

  /* announce: stack vertically */
  .landing-v3 .announce {
    padding-block: 1rem;
  }

  .landing-v3 .announce__inner {
    font-size: 0.875rem;
    gap: 0.5rem 0.75rem;
  }

  .landing-v3 .announce__divider {
    display: none;
  }

  .landing-v3 .announce__link {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    padding-top: 0.25rem;
  }

  /* section titles — calmer scale */
  .landing-v3 .product-title,
  .landing-v3 .faq-title,
  .landing-v3 .testimonials-title,
  .landing-v3 .how-title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  /* product cards: single column */
  .landing-v3 .product-grid {
    grid-template-columns: 1fr;
  }

  .landing-v3 .product-card {
    min-height: 14rem;
  }

  /* why section */
  .landing-v3 .why-title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
  }

  .landing-v3 .why-stage__visual {
    height: clamp(220px, 38vh, 320px);
  }

  .landing-v3 .why-tile {
    padding: 1.25rem 1.25rem;
    min-height: 11rem;
  }

  .landing-v3 .why-tile__title {
    font-size: 1.375rem;
  }

  .landing-v3 .why-tile__desc {
    font-size: 0.9375rem;
  }

  /* testimonials */
  .landing-v3 .testimonial-slide__text {
    font-size: clamp(1.125rem, 5vw, 1.5rem);
  }

  .landing-v3 .testimonial-slide__cite {
    font-size: 0.875rem;
  }

  .landing-v3 .testimonials-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .landing-v3 .testimonials-arrows {
    justify-content: space-between;
    width: 100%;
  }

  /* faq */
  .landing-v3 .faq__summary {
    grid-template-columns: 3ch 1fr auto;
    gap: 1rem;
    padding-block: 1.125rem;
  }

  .landing-v3 .faq__answer {
    padding-left: calc(3ch + 1rem);
    padding-right: 1rem;
    padding-bottom: 1.25rem;
  }

  /* cta — center the whole block on mobile */
  .landing-v3 .cta-block {
    padding: 4rem 1.25rem;
    min-height: auto;
    text-align: center;
  }
  .landing-v3 .cta-block__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    justify-items: center;
  }
  .landing-v3 .cta-block__right {
    justify-items: center;
    text-align: center;
  }
  .landing-v3 .cta-block__lead {
    margin-inline: auto;
  }
  /* center the action buttons and let them share a comfortable width */
  .landing-v3 .cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 20rem;
    margin-inline: auto;
  }
  .landing-v3 .cta-section .cta-btn {
    width: 100%;
    min-width: 0;
  }

  /* footer */
  .landing-v3 .v3-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .landing-v3 .v3-footer__col:first-child {
    grid-column: 1 / -1;
  }

  /* product column (12 items) spans full width so its 2-col list breathes */
  .landing-v3 .v3-footer__col--products {
    grid-column: 1 / -1;
  }

  .landing-v3 .v3-footer__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* XSMALL — ≤ 400px (older phones / narrow viewports) */
@media (max-width: 400px) {
  .landing-v3 .hero .eyebrow--letters {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    letter-spacing: -0.03em;
  }

  .landing-v3 .display {
    font-size: clamp(2.5rem, 13vw, 3.5rem);
  }

  .landing-v3 .v3-footer__grid {
    grid-template-columns: 1fr;
  }
}

.landing-v3.sensly {
  --bg:            #fbfaec;
  --surface:       #fffef9;
  --surface-2:     #f2efd8;
  --border:        #ddd8be;
  --text:          #2e2626;
  --neutral:       #6b5f5f;
  --primary:       #A16F3F;
  --primary-hover: #b07f4f;
  --primary-deep:  #9B6B3E;
  --primary-glow:  rgba(161, 111, 63, 0.45);
  --hover-wash:        rgba(161, 111, 63, 0.10);
  --hover-edge:        rgba(161, 111, 63, 0.30);
  --hover-frame-color: rgba(46, 38, 38, 1);
  --sensly-nav-h: 73px;
  --hero-dark: #E0B080;
  --mono: "SF Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --brand: "Monda", system-ui, sans-serif;

  background: var(--surface);
  color: var(--text);
}

body.landing-page:has(.landing-v3.sensly) { background: var(--surface, #fffef9); }

.landing-v3.sensly .ly { color: var(--primary-deep); }

.landing-v3.sensly .sensly-steps .sensly-hero__eyebrow,
.landing-v3.sensly .sensly-values .sensly-hero__eyebrow,
.landing-v3.sensly .sensly-who .sensly-hero__eyebrow {
  font-family: var(--mono); font-weight: 500; letter-spacing: 0.12em;
}
.landing-v3.sensly .sensly-steps .sensly-hero__eyebrow::before,
.landing-v3.sensly .sensly-values .sensly-hero__eyebrow::before,
.landing-v3.sensly .sensly-who .sensly-hero__eyebrow::before { content: "// "; opacity: 0.55; }
.landing-v3.sensly .sensly-step__n { font-family: var(--mono); font-weight: 500; }

.landing-v3.sensly .cta-btn--primary .cta-btn__corners > i {
  border-color: var(--text);
}
.landing-v3.sensly .cta-btn--primary .cta-btn__corners > i::after {
  background: var(--text);
}

.landing-v3.sensly .cta-btn--primary:hover,
.landing-v3.sensly .cta-section .cta-btn--primary:hover {
  box-shadow: inset 2px 0 0 0 var(--text),
              inset -2px 0 0 0 var(--text);
}

.landing-v3.sensly .cta-btn--primary .cta-btn__torch {
  background: radial-gradient(
    120px circle at var(--mx) var(--my),
    rgba(251, 250, 236, 0.55),
    rgba(251, 250, 236, 0) 70%
  );
}

.landing-v3.sensly .sensly-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--sensly-nav-h);
  background: var(--hero-dark);
  border-bottom: 1px solid transparent;
  transition: background 320ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3.sensly .sensly-nav__inner {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.landing-v3.sensly .sensly-nav__brand {
  position: relative; display: inline-flex; align-items: center; text-decoration: none;
  outline: none;
}
/* only show a focus ring for keyboard users, not on mouse click/load */
.landing-v3.sensly .sensly-nav__brand:focus { outline: none; }
.landing-v3.sensly .sensly-nav__brand:focus-visible {
  outline: 2px solid var(--text); outline-offset: 4px;
}
.landing-v3.sensly .sensly-nav__wordmark {
  font-family: var(--brand);
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  display: block;
}

.landing-v3.sensly .sensly-nav.sensly-nav--dark {
  background: var(--hero-dark);
  border-bottom-color: transparent;
}

.landing-v3.sensly .sensly-nav.sensly-nav--light {
  background: rgba(251, 250, 236, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.landing-v3.sensly .sensly-nav.sensly-nav--top {
  background: transparent;
  border-bottom-color: transparent;
}

.landing-v3.sensly .sensly-hero.sensly-hero--dark { background: var(--hero-dark); color: var(--text); }
.landing-v3.sensly .sensly-hero--dark .sensly-hero__eyebrow { color: var(--text); opacity: 0.75; }
.landing-v3.sensly .sensly-hero--dark .sensly-hero__stem { color: var(--text); }

.landing-v3.sensly .sensly-hero--dark .sensly-hero__sub { color: rgba(46, 38, 38, 0.82); }
.landing-v3.sensly .sensly-hero--dark .cta-btn,
.landing-v3.sensly .sensly-hero--dark .cta-btn__label { color: var(--text); }
.landing-v3.sensly .sensly-hero--dark .cta-btn--primary .cta-btn__corners > i { border-color: var(--text); }
.landing-v3.sensly .sensly-hero--dark .cta-btn--primary .cta-btn__corners > i::after { background: var(--text); }

.landing-v3.sensly .sensly-cta--dark {
  background: var(--text); color: var(--bg); border-top: none;
  min-height: clamp(28rem, 70vh, 46rem);
  display: flex; align-items: center;
  padding: clamp(4rem, 10vw, 8rem) 0;
}
.landing-v3.sensly .sensly-cta--dark > .container-x { width: 100%; }
.landing-v3.sensly .sensly-cta--dark .sensly-hero__headline,
.landing-v3.sensly .sensly-cta--dark .sensly-hero__stem { color: var(--bg); }
.landing-v3.sensly .sensly-cta--dark .ly { color: var(--bg); }
.landing-v3.sensly .sensly-cta--dark .cta-btn,
.landing-v3.sensly .sensly-cta--dark .cta-btn__label { color: var(--bg); }
.landing-v3.sensly .sensly-cta--dark .cta-btn--primary .cta-btn__corners > i { border-color: var(--bg); }
.landing-v3.sensly .sensly-cta--dark .cta-btn--primary .cta-btn__corners > i::after { background: var(--bg); }

.landing-v3.sensly .sensly-cta--dark .cta-btn--primary::before,
.landing-v3.sensly .sensly-cta--dark .cta-btn--primary::after {
  background: var(--bg);
}
.landing-v3.sensly .sensly-cta--dark .cta-btn--primary:hover {
  box-shadow: inset 2px 0 0 0 var(--bg),
              inset -2px 0 0 0 var(--bg);
}
.landing-v3.sensly .sensly-cta--dark .cta-btn--primary .cta-btn__torch {
  background: radial-gradient(
    120px circle at var(--mx) var(--my),
    rgba(249, 241, 99, 0.18),
    rgba(249, 241, 99, 0) 70%
  );
}

.landing-v3.sensly .sensly-footer--hero { background: var(--hero-dark); border-top: none; }
.landing-v3.sensly .sensly-footer--hero .sensly-footer__note { color: rgba(46, 38, 38, 0.7); }

.landing-v3.sensly .sensly-nav__links {
  display: flex; gap: 1.75rem; align-items: center;
  flex: 1; justify-content: center;
}
.landing-v3.sensly .sensly-nav__actions { display: flex; align-items: center; gap: 1.5rem; }
.landing-v3.sensly .sensly-nav__link {
  font-size: 0.95rem; font-weight: 600; color: var(--text);
  text-decoration: none; transition: opacity 180ms ease;
}
.landing-v3.sensly .sensly-nav__link:hover { opacity: 0.6; }
@media (max-width: 760px) {
  .landing-v3.sensly .sensly-nav__links { display: none; }
}

/* Hero entrance — industrial-modern with an organic settle: each element
   un-masks upward (a panel revealing) while a soft blur + lift dissolves away,
   eased so it "breathes" into place instead of snapping. Sequenced by --i. */
.landing-v3.sensly .sensly-reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  filter: blur(8px);
  clip-path: inset(0 0 100% 0);
  animation: senslyReveal 0.9s cubic-bezier(0.22, 1, 0.30, 1) forwards;
  animation-delay: calc(0.2s + var(--i, 0) * 0.7s);
  will-change: opacity, transform, filter, clip-path;
}
@keyframes senslyReveal {
  0%   { opacity: 0; transform: translateY(1.4rem); filter: blur(8px); clip-path: inset(0 0 100% 0); }
  60%  { opacity: 1; filter: blur(0); }
  99%  { clip-path: inset(0 0 -10% 0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); clip-path: none; }
}
/* the CTA buttons cascade within their row */
.landing-v3.sensly .sensly-hero__cta .cta-btn {
  opacity: 0;
  animation: senslyFadeUp 0.7s cubic-bezier(0.22, 1, 0.30, 1) forwards;
}
.landing-v3.sensly .sensly-hero__cta .cta-btn:nth-child(1) { animation-delay: calc(0.2s + 4 * 0.7s); }
.landing-v3.sensly .sensly-hero__cta .cta-btn:nth-child(2) { animation-delay: calc(0.2s + 4 * 0.7s + 0.18s); }
@keyframes senslyFadeUp {
  from { opacity: 0; transform: translateY(0.8rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v3.sensly .sensly-reveal,
  .landing-v3.sensly .sensly-hero__cta .cta-btn {
    animation: none; opacity: 1; transform: none; filter: none; clip-path: none;
  }
}

.landing-v3.sensly .sensly-hero {
  position: relative;
  margin-top: calc(-1 * var(--sensly-nav-h, 73px));
  min-height: 100dvh;
  padding-top: var(--sensly-nav-h, 73px);
  display: flex;
  align-items: center;
  background: var(--hero-dark);
  overflow: hidden;
}
.landing-v3.sensly .sensly-hero > .container-x { width: 100%; }
/* Size hero text against the (max-1440px) container, not the raw viewport, so
   it stays identical across desktops instead of inflating on very wide Macs. */
.landing-v3.sensly .sensly-hero__content { container-type: inline-size; }

.landing-v3.sensly .sensly-hero__fx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.landing-v3.sensly .sensly-hero__fx.is-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .landing-v3.sensly .sensly-hero__fx { transition: none; }
}
.landing-v3.sensly .sensly-hero__fx spline-viewer {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.landing-v3.sensly .sensly-hero__fx :is(canvas, iframe) {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
}

.landing-v3.sensly .sensly-hero__fx spline-viewer::part(logo) { display: none; }
.landing-v3.sensly .sensly-hero__content { position: relative; z-index: 1; }
@supports not (height: 100dvh) {
  .landing-v3.sensly .sensly-hero { min-height: calc(100vh - var(--sensly-nav-h, 73px)); }
}
.landing-v3.sensly .sensly-hero__eyebrow {
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 600; color: var(--primary-deep); margin-bottom: 1.25rem;
}
.landing-v3.sensly .sensly-hero__headline {
  font-weight: 700; line-height: 0.9; letter-spacing: -0.035em;
  font-size: clamp(2.5rem, 6.5cqi, 5.5rem); text-transform: none;
  display: flex; align-items: baseline;
  margin-bottom: 0.85rem;
}
.landing-v3.sensly .sensly-hero__stem {
  color: var(--text); display: inline-block; will-change: opacity, transform, filter;
}

.landing-v3.sensly .sensly-hero__sub {
  margin-top: 1.75rem; font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--neutral); font-weight: 500; max-width: 42ch; line-height: 1.5;
}
.landing-v3.sensly .sensly-hero__sub b { color: inherit; font-weight: 700; }
.landing-v3.sensly .sensly-hero__cta { display: flex; gap: 1rem; margin-top: 2.25rem; flex-wrap: wrap; }

.landing-v3.sensly .sensly-values {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--border);
}
.landing-v3.sensly .sensly-values__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem; margin-top: 2rem;
}
.landing-v3.sensly .sensly-value {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 1.5rem; transition: border-color 200ms ease, transform 200ms ease;
}
.landing-v3.sensly .sensly-value:hover {
  border-color: var(--primary-deep); transform: translateY(-2px);
}
.landing-v3.sensly .sensly-value__k {
  font-size: 1.15rem; font-weight: 800; color: var(--text);
  letter-spacing: -0.01em; margin-bottom: 0.5rem;
}
.landing-v3.sensly .sensly-value__d { font-size: 0.95rem; color: var(--neutral); line-height: 1.5; }


.landing-v3.sensly .sensly-steps {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--border);
}
.landing-v3.sensly .sensly-steps__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; margin-top: 2rem;
  background: var(--border); border: 1px solid var(--border);
}
.landing-v3.sensly .sensly-step {
  background: var(--bg); padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 0.5rem; min-height: 13rem;
  transition: box-shadow 320ms ease, transform 320ms ease;
}
.landing-v3.sensly .sensly-step:hover {
  transform: translateY(-4px); z-index: 1;
  box-shadow: 0 12px 24px -10px var(--primary-glow), 0 2px 6px rgba(46,38,38,0.06);
}
.landing-v3.sensly .sensly-step__n {
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; color: var(--primary-deep);
}
.landing-v3.sensly .sensly-step__k {
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em;
  text-transform: lowercase; margin-top: 0.25rem;
}
.landing-v3.sensly .sensly-step__k .stem { color: var(--text); }
.landing-v3.sensly .sensly-step__d {
  font-size: 0.95rem; color: var(--neutral); line-height: 1.5; margin-top: auto;
}

.landing-v3.sensly .sensly-who {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.landing-v3.sensly .sensly-who__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-top: 2rem;
}
.landing-v3.sensly .sensly-who__card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 1.5rem; transition: border-color 200ms ease, transform 200ms ease;
}
.landing-v3.sensly .sensly-who__card:hover {
  border-color: var(--primary-deep); transform: translateY(-2px);
}
.landing-v3.sensly .sensly-who__name {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text);
  margin-bottom: 0.4rem;
}
.landing-v3.sensly .sensly-who__d { font-size: 0.9rem; color: var(--neutral); line-height: 1.5; }

.landing-v3.sensly .sensly-footer { padding-block: clamp(3rem, 5vw, 4rem) 2rem; }
.landing-v3.sensly .sensly-footer__inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 2rem;
}
.landing-v3.sensly .sensly-footer__lead { display: flex; flex-direction: column; gap: 0.75rem; max-width: 32ch; }
.landing-v3.sensly .sensly-footer__brand { display: inline-flex; align-items: center; }
.landing-v3.sensly .sensly-footer__wordmark {
  font-family: "Monda", var(--brand);
  font-weight: 500;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  display: block;
}
.landing-v3.sensly .sensly-footer__wordmark .l { font-family: inherit; }
.landing-v3.sensly .sensly-footer__tag { font-size: 0.9rem; color: rgba(46, 38, 38, 0.7); line-height: 1.5; }
.landing-v3.sensly .sensly-footer__links { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.landing-v3.sensly .sensly-footer__link {
  font-size: 0.9rem; font-weight: 500; color: var(--text); text-decoration: none;
  transition: opacity 180ms ease;
}
.landing-v3.sensly .sensly-footer__link:hover { opacity: 0.6; }
.landing-v3.sensly .sensly-footer__base {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid rgba(46, 38, 38, 0.18);
  font-size: 0.8125rem; color: rgba(46, 38, 38, 0.7);
}
.landing-v3.sensly .sensly-footer__social {
  margin-left: auto; display: flex; gap: 0.6rem; list-style: none; padding: 0;
}
.landing-v3.sensly .sensly-footer__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid rgba(46, 38, 38, 0.2); color: var(--text);
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.landing-v3.sensly .sensly-footer__social-link:hover {
  border-color: var(--text); background: rgba(46, 38, 38, 0.06);
}
.landing-v3.sensly .sensly-footer__made {
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
.landing-v3.sensly .sensly-footer__heart {
  color: var(--text);
  display: inline-flex; flex-shrink: 0; vertical-align: -0.15em; margin-inline: 0.1em;
  filter: drop-shadow(0 1px 0 rgba(46, 38, 38, 0.08));
  animation: heartBeat 1.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.22); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.18); }
  56%      { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v3.sensly .sensly-footer__heart { animation: none; }
}

/* footer wordmark reveals letter by letter */
.landing-v3.sensly .sensly-footer__wordmark .l {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em);
  filter: blur(5px);
  animation: senslyLetterIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--li, 0) * 0.09s);
  will-change: opacity, transform, filter;
}
@keyframes senslyLetterIn {
  0%   { opacity: 0; transform: translateY(0.32em); filter: blur(5px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v3.sensly .sensly-footer__wordmark .l { animation: none; opacity: 1; transform: none; }
}

.landing-v3.sensly [data-word-rotator-target="stem"] { display: inline-block; }

/* ---------- shared section title ---------- */
.landing-v3.sensly .sensly-section__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--text); max-width: 22ch; margin-top: 0.75rem;
}

/* ---------- stacked hero headline (statement + rotating last word) ---------- */
.landing-v3.sensly .sensly-hero__headline--stacked {
  flex-direction: column; align-items: flex-start; gap: 0.15em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: 2.5rem;
}
.landing-v3.sensly .sensly-hero__line { display: flex; align-items: baseline; }
/* Chatac-style contrast: statement stays lean, the animated word goes
   bold + accent so it carries the emphasis. */
.landing-v3.sensly .sensly-hero__line:first-child { font-weight: 400; }
.landing-v3.sensly .sensly-hero__line:last-child { font-weight: 800; }
.landing-v3.sensly .sensly-hero--dark .sensly-hero__headline--stacked .sensly-hero__line:last-child .sensly-hero__stem,
.landing-v3.sensly .sensly-hero--dark .sensly-hero__headline--stacked .sensly-hero__line:last-child .sensly-hero__ly {
  color: var(--text);
}

/* ---------- more than surveys (statement) ---------- */
.landing-v3.sensly .sensly-statement {
  padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--border);
}
.landing-v3.sensly .sensly-statement__lead {
  margin-top: 1rem; max-width: 30ch;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 600;
  line-height: 1.2; letter-spacing: -0.02em; color: var(--text);
}
.landing-v3.sensly .sensly-statement__lead b { color: var(--primary-deep); font-weight: 700; }

/* ---------- why whatsapp ---------- */
.landing-v3.sensly .sensly-whatsapp {
  padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--border);
}
.landing-v3.sensly .sensly-whatsapp__body {
  margin-top: 1.25rem; max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--neutral); line-height: 1.6;
}
/* stat band — HUD-style metrics, mono numbers, grid dividers */
.landing-v3.sensly .sensly-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--border);
}
.landing-v3.sensly .sensly-stat {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid var(--border);
}
.landing-v3.sensly .sensly-stat:first-child { border-left: none; }
.landing-v3.sensly .sensly-stat__n {
  display: block; font-family: var(--mono); font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--primary-deep);
  font-variant-numeric: tabular-nums;
}
.landing-v3.sensly .sensly-stat__label {
  display: block; margin-top: 0.85rem;
  font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--neutral); line-height: 1.4;
}
.landing-v3.sensly .sensly-stat__label em {
  display: block; font-style: normal; text-transform: none;
  letter-spacing: 0; font-size: 0.82rem; color: var(--text); opacity: 0.55; margin-top: 0.2rem;
}
@media (max-width: 760px) {
  .landing-v3.sensly .sensly-stats { grid-template-columns: 1fr; }
  .landing-v3.sensly .sensly-stat { border-left: none; border-top: 1px solid var(--border); }
  .landing-v3.sensly .sensly-stat:first-child { border-top: none; }
}

/* ---------- pricing ---------- */
.landing-v3.sensly .sensly-pricing {
  padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--border);
  background: var(--bg);
}
.landing-v3.sensly .sensly-pricing__lead {
  margin-top: 1rem; max-width: 60ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--neutral);
}
.landing-v3.sensly .sensly-pricing__billing {
  display: inline-flex; gap: 0.25rem; margin-top: 1.75rem; padding: 0.3rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
}
.landing-v3.sensly .sensly-pricing__billing-opt {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.15rem; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 0.95rem; font-weight: 500; color: var(--neutral);
  border-radius: 999px; transition: background 0.2s ease, color 0.2s ease;
}
.landing-v3.sensly .sensly-pricing__billing-opt.is-active {
  background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(46, 38, 38, 0.08);
}
.landing-v3.sensly .sensly-pricing__billing-badge {
  font-size: 0.72rem; font-weight: 600; color: var(--primary);
  background: var(--hover-wash); padding: 0.1rem 0.5rem; border-radius: 999px;
}
.landing-v3.sensly .sensly-pricing__annual-note {
  margin-top: 0.35rem; font-size: 0.85rem; color: var(--neutral);
}
.landing-v3.sensly .sensly-pricing__annual-note.is-hidden { visibility: hidden; }
.landing-v3.sensly .sensly-pricing__amount--custom { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.landing-v3.sensly .sensly-pricing__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin-top: 2.5rem; align-items: stretch;
}
.landing-v3.sensly .sensly-pricing__card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.landing-v3.sensly .sensly-pricing__card--featured {
  border-color: var(--primary-deep); box-shadow: inset 0 0 0 1px var(--primary-deep);
}
.landing-v3.sensly .sensly-pricing__tag {
  position: absolute; top: 0; right: clamp(1.75rem, 3vw, 2.5rem); transform: translateY(-50%);
  background: var(--primary-deep); color: var(--bg);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.7rem;
}
.landing-v3.sensly .sensly-pricing__name {
  font-size: 1.1rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text); margin-bottom: 0.75rem;
}
.landing-v3.sensly .sensly-pricing__desc { margin-top: 0.6rem; font-size: 0.9rem; color: var(--neutral); line-height: 1.5; }
.landing-v3.sensly .sensly-pricing__inherits {
  margin-top: 1.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text);
}
@media (max-width: 880px) {
  .landing-v3.sensly .sensly-pricing__grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}
.landing-v3.sensly .sensly-pricing__price { display: flex; align-items: baseline; gap: 0.25rem; }
.landing-v3.sensly .sensly-pricing__amount {
  font-size: clamp(2.75rem, 6vw, 3.75rem); font-weight: 800;
  letter-spacing: -0.03em; color: var(--text); line-height: 1;
}
.landing-v3.sensly .sensly-pricing__interval { font-size: 1.1rem; font-weight: 600; color: var(--neutral); }
.landing-v3.sensly .sensly-pricing__cta { margin-top: 1.5rem; width: 100%; }
.landing-v3.sensly .sensly-pricing__features { margin-top: 1.5rem; display: grid; gap: 0.6rem; }
.landing-v3.sensly .sensly-pricing__feature {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.9rem; color: var(--text); line-height: 1.4;
}
.landing-v3.sensly .sensly-pricing__feature svg { color: var(--primary-deep); flex-shrink: 0; margin-top: 0.15rem; }

/* enterprise + add-on row */
.landing-v3.sensly .sensly-pricing__secondary {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.25rem;
}
.landing-v3.sensly .sensly-pricing__mini {
  background: var(--surface); border: 1px solid var(--border);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.landing-v3.sensly .sensly-pricing__mini-eyebrow {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--primary-deep); margin-bottom: 0.5rem;
}
.landing-v3.sensly .sensly-pricing__mini-name {
  font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text);
}
.landing-v3.sensly .sensly-pricing__mini-desc { margin-top: 0.6rem; font-size: 0.9rem; color: var(--neutral); line-height: 1.5; }
.landing-v3.sensly .sensly-pricing__mini-link {
  display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--primary-deep); text-decoration: none;
}
.landing-v3.sensly .sensly-pricing__mini-link:hover { text-decoration: underline; }
.landing-v3.sensly .sensly-pricing__mini-price { margin-top: 1rem; font-size: 1rem; color: var(--text); }
@media (max-width: 880px) {
  .landing-v3.sensly .sensly-pricing__secondary { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}

/* WhatsApp / Meta charges — centered card, mirroring the Chatac template */
.landing-v3.sensly .sensly-pricing__whatsapp { margin-top: 2.5rem; }
.landing-v3.sensly .sensly-pricing__wa-card {
  max-width: 46rem; margin-inline: auto; text-align: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--border); background: var(--surface);
}
.landing-v3.sensly .sensly-pricing__wa-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--text);
}
.landing-v3.sensly .sensly-pricing__wa-intro { margin-top: 1rem; color: var(--neutral); line-height: 1.6; }
.landing-v3.sensly .sensly-pricing__wa-body {
  margin-top: 0.75rem; font-size: 0.95rem; color: var(--neutral); line-height: 1.6;
  max-width: 60ch; margin-inline: auto;
}
.landing-v3.sensly .sensly-pricing__wa-links-block { margin-top: 1.5rem; }
.landing-v3.sensly .sensly-pricing__wa-links-label { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.landing-v3.sensly .sensly-pricing__wa-links {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; margin-top: 0.75rem;
}
.landing-v3.sensly .sensly-pricing__wa-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 600; color: var(--primary-deep); text-decoration: none;
}
.landing-v3.sensly .sensly-pricing__wa-link:hover { text-decoration: underline; }
.landing-v3.sensly .sensly-pricing__wa-note {
  margin: 1.75rem auto 0; max-width: 52ch;
  padding: 1rem 1.25rem; border: 1px solid var(--border);
  font-size: 0.85rem; color: var(--neutral); line-height: 1.6; text-align: left;
}
.landing-v3.sensly .sensly-pricing__wa-note a { color: var(--primary-deep); }

/* FAQ */
/* FAQ — native <details> accordion (Chatac-style structure) */
.landing-v3.sensly .sensly-faq { margin-top: 2.5rem; }
.landing-v3.sensly .sensly-faq__title {
  font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--text); margin-bottom: 1rem;
}
.landing-v3.sensly .sensly-faq__item { border-top: 1px solid var(--border); }
.landing-v3.sensly .sensly-faq__item:last-child { border-bottom: 1px solid var(--border); }
.landing-v3.sensly .sensly-faq__summary {
  display: flex; align-items: center; gap: 1rem; cursor: pointer;
  padding: 1.25rem 0; list-style: none; color: var(--text);
}
.landing-v3.sensly .sensly-faq__summary::-webkit-details-marker { display: none; }
.landing-v3.sensly .sensly-faq__index {
  font-family: var(--mono); font-size: 0.8rem; color: var(--primary-deep); opacity: 0.8;
}
.landing-v3.sensly .sensly-faq__q { flex: 1; font-weight: 700; font-size: 1.05rem; }
.landing-v3.sensly .sensly-faq__icon {
  position: relative; width: 14px; height: 14px; flex-shrink: 0;
}
.landing-v3.sensly .sensly-faq__icon::before,
.landing-v3.sensly .sensly-faq__icon::after {
  content: ""; position: absolute; background: var(--primary-deep);
  transition: transform 240ms ease, opacity 240ms ease;
}
.landing-v3.sensly .sensly-faq__icon::before { top: 6px; left: 0; width: 14px; height: 2px; }
.landing-v3.sensly .sensly-faq__icon::after  { top: 0; left: 6px; width: 2px; height: 14px; }
.landing-v3.sensly .sensly-faq__item[open] .sensly-faq__icon::after { transform: scaleY(0); opacity: 0; }
.landing-v3.sensly .sensly-faq__answer {
  padding: 0 0 1.25rem calc(0.8rem + 1rem);
  font-size: 0.95rem; color: var(--neutral); line-height: 1.6; max-width: 70ch;
}

/* ---------- final CTA sub ---------- */
.landing-v3.sensly .sensly-cta__sub {
  margin: 1.25rem auto 0; max-width: 40ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgba(251, 250, 236, 0.75); line-height: 1.5;
}

/* ============================================================
   Why — interactive tabs (one benefit in focus at a time)
   ============================================================ */
.landing-v3.sensly .sensly-why {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem); margin-top: 2.5rem; align-items: stretch;
}
.landing-v3.sensly .sensly-why__list { display: flex; flex-direction: column; }
.landing-v3.sensly .sensly-why__tab {
  display: flex; align-items: baseline; gap: 1rem;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 1rem 0.5rem; border-top: 1px solid var(--border);
  color: var(--neutral); transition: color 200ms ease, padding-left 240ms ease;
  font: inherit;
}
.landing-v3.sensly .sensly-why__list .sensly-why__tab:last-child { border-bottom: 1px solid var(--border); }
.landing-v3.sensly .sensly-why__tab-n { font-family: var(--mono); font-size: 0.8rem; opacity: 0.6; }
.landing-v3.sensly .sensly-why__tab-k { font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -0.01em; }
.landing-v3.sensly .sensly-why__tab:hover { color: var(--text); }
.landing-v3.sensly .sensly-why__tab.is-active {
  color: var(--text); padding-left: 1.25rem;
  box-shadow: inset 3px 0 0 0 var(--primary-deep);
}
.landing-v3.sensly .sensly-why__tab.is-active .sensly-why__tab-n { opacity: 1; color: var(--primary-deep); }

.landing-v3.sensly .sensly-why__stage {
  position: relative; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem;
  padding: clamp(1.75rem, 4vw, 3rem); overflow: hidden; min-height: 18rem;
}
.landing-v3.sensly .sensly-why__panel { position: relative; z-index: 1; }
.landing-v3.sensly .sensly-why__panel[hidden] { display: none; }
.landing-v3.sensly .sensly-why__panel-k {
  font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700;
  letter-spacing: -0.02em; color: var(--text); margin-bottom: 1rem;
}
.landing-v3.sensly .sensly-why__panel-d {
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--neutral); max-width: 42ch;
}
/* gentle fade-in on switch */
.landing-v3.sensly .sensly-why__panel.is-active .sensly-why__panel-k,
.landing-v3.sensly .sensly-why__panel.is-active .sensly-why__panel-d {
  animation: senslyPanelIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.landing-v3.sensly .sensly-why__panel.is-active .sensly-why__panel-d { animation-delay: 60ms; }
@keyframes senslyPanelIn {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v3.sensly .sensly-why__panel.is-active .sensly-why__panel-k,
  .landing-v3.sensly .sensly-why__panel.is-active .sensly-why__panel-d { animation: none; }
}
@media (max-width: 760px) {
  .landing-v3.sensly .sensly-why { grid-template-columns: 1fr; }
  .landing-v3.sensly .sensly-why__stage { min-height: 14rem; }
}


/* ============================================================
   Full-viewport dense sections + industrial restyle
   ============================================================ */
.landing-v3.sensly .sensly-section--full {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.landing-v3.sensly .sensly-section--full > .container-x { width: 100%; }

/* industrial section titles — technical, uppercase, tight */
.landing-v3.sensly .sensly-section__title {
  text-transform: uppercase; letter-spacing: -0.01em;
}
.landing-v3.sensly .sensly-section--full .sensly-hero__eyebrow {
  font-family: var(--mono); font-weight: 500; letter-spacing: 0.18em;
}

/* ---- Why: blueprint panel, squared corners, grid lines ---- */
.landing-v3.sensly .sensly-why__tab {
  border-radius: 0; align-items: center;
}
.landing-v3.sensly .sensly-why__tab-k {
  text-transform: uppercase; letter-spacing: 0.01em; font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}
.landing-v3.sensly .sensly-why__tab.is-active {
  box-shadow: inset 4px 0 0 0 var(--primary-deep);
  background: rgba(155, 107, 62, 0.06);
}
.landing-v3.sensly .sensly-why__stage {
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}
/* corner ticks on the stage — the "scope" motif from the buttons */
.landing-v3.sensly .sensly-why__stage::after {
  content: ""; position: absolute; top: 0.75rem; right: 0.75rem;
  width: 16px; height: 16px; z-index: 2; pointer-events: none;
  border-top: 2px solid var(--primary-deep);
  border-right: 2px solid var(--primary-deep);
}
.landing-v3.sensly .sensly-why__panel-icon {
  display: inline-flex; color: var(--primary-deep); margin-bottom: 1.25rem;
}
.landing-v3.sensly .sensly-why__panel-meta {
  display: block; font-family: var(--mono); font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--neutral); margin-bottom: 0.6rem;
}
.landing-v3.sensly .sensly-why__panel-k { text-transform: uppercase; letter-spacing: -0.01em; }
.landing-v3.sensly .sensly-why__panel.is-active .sensly-why__panel-icon {
  animation: senslyPanelIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* WhatsApp icon is a filled glyph (not the outline stroke set); tint via currentColor */
.landing-v3.sensly .sensly-why__panel-icon--fill svg { width: 48px; height: 48px; display: block; }
.landing-v3.sensly .sensly-why__panel-icon--fill svg path { fill: currentColor; }

/* ============================================================
   "More than surveys" — pinned, scroll-scrubbed scene (cocoa)
   Choreography is driven by --p (0..1) set on .sensly-scene__stage
   by the sensly-scrollscene controller. All phases are pure CSS.
   ============================================================ */
.landing-v3.sensly .sensly-scene {
  --cocoa: #2a1c14;
  position: relative;
  height: 300vh;                 /* scroll track length */
  background: var(--cocoa);
}
.landing-v3.sensly .sensly-scene__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.landing-v3.sensly .sensly-scene__stage {
  --p: 0;
  position: relative; height: 100%;
  display: flex; align-items: center;
  background: var(--cocoa);
}

/* ---- 1) the data-sphere — a constant ambient backdrop (no scroll choreo) ---- */
/* It just sits behind the text the whole time. A gentle fade-in keeps it from
   popping in harshly when the section (and its Spline) mounts. */
.landing-v3.sensly .sensly-scene__fx {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  animation: senslySceneFx 1.4s ease-out both;
}
@keyframes senslySceneFx {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v3.sensly .sensly-scene__fx { animation: none; opacity: 1; }
}
.landing-v3.sensly .sensly-scene__fx spline-viewer {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  background: transparent !important;
}
.landing-v3.sensly .sensly-scene__fx :is(canvas, iframe) {
  width: 100% !important; height: 100% !important;
  background: transparent !important;
}
/* blend the particles into the cocoa: lighten drops the scene's dark backdrop */
.landing-v3.sensly .sensly-scene__fx { mix-blend-mode: lighten; }

/* contrast veil: keep the text side readable over the constant sphere,
   fading to nothing on the right so the sphere stays visible there */
.landing-v3.sensly .sensly-scene__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    100deg,
    var(--cocoa) 0%,
    rgba(42, 28, 20, 0.78) 32%,
    rgba(42, 28, 20, 0) 62%
  );
}

/* ---- 2) the message (title + line-by-line lead) ---- */
.landing-v3.sensly .sensly-scene__content {
  position: relative; z-index: 2; width: 100%;
  color: #f3e7dd;
}
/* title fades up between 0.42..0.58 */
.landing-v3.sensly .sensly-scene__eyebrow {
  color: #d8a679; opacity: 0;
  font-family: var(--mono); font-weight: 500; letter-spacing: 0.18em;
  --t: clamp(0, calc((var(--p) - 0.42) / 0.16), 1);
  opacity: var(--t);
  transform: translateY(calc(12px * (1 - var(--t))));
  margin-bottom: 1.5rem;
}
.landing-v3.sensly .sensly-scene__eyebrow::before { content: "// "; opacity: 0.55; }

.landing-v3.sensly .sensly-scene__lead {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); font-weight: 600;
  line-height: 1.25; letter-spacing: -0.02em; max-width: 24ch;
}
.landing-v3.sensly .sensly-scene__lead b { color: #e6b98c; font-weight: 700; }

/* each line reveals on its own slice of progress, after 0.55 */
.landing-v3.sensly .sensly-scene__line {
  display: block;
  /* line l reveals across [start, start+win]; start staggers by 0.07 */
  --start: calc(0.55 + var(--l) * 0.07);
  --r: clamp(0, calc((var(--p) - var(--start)) / 0.06), 1);
  opacity: calc(0.12 + 0.88 * var(--r));
  transform: translateY(calc(0.5em * (1 - var(--r))));
  filter: blur(calc(4px * (1 - var(--r))));
}

@media (prefers-reduced-motion: reduce) {
  /* collapse the scene to a static, readable block */
  .landing-v3.sensly .sensly-scene { height: auto; }
  .landing-v3.sensly .sensly-scene__pin { position: static; height: auto; padding: clamp(4rem,10vw,8rem) 0; }
  .landing-v3.sensly .sensly-scene__fx { display: none; }
  .landing-v3.sensly .sensly-scene__eyebrow,
  .landing-v3.sensly .sensly-scene__line { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- intro / value bridge (hero -> how) ---------- */
.landing-v3.sensly .sensly-intro {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--border);
}
.landing-v3.sensly .sensly-intro__title {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 700;
  line-height: 1.18; letter-spacing: -0.02em; color: var(--text);
  max-width: 24ch;
}
.landing-v3.sensly .sensly-intro__body {
  margin-top: 1.5rem; max-width: 60ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--neutral);
}

/* ============================================================
   Mobile refinements (hero / nav)
   ============================================================ */
@media (max-width: 600px) {
  /* nav: smaller wordmark so it doesn't dominate the bar */
  .landing-v3.sensly .sensly-nav__wordmark { font-size: 1.75rem; }
  .landing-v3.sensly .sensly-nav { height: 60px; }

  /* hero: breathing room from the top, contained headline */
  .landing-v3.sensly .sensly-hero { min-height: auto; padding-top: 5.5rem; padding-bottom: 3.5rem; }
  /* size to fit the longest rotating word ("understanding") without overflow */
  .landing-v3.sensly .sensly-hero__headline { font-size: clamp(1.9rem, 8.5vw, 2.9rem); }
  .landing-v3.sensly .sensly-hero__headline--stacked { margin-bottom: 1.75rem; }
  .landing-v3.sensly .sensly-hero__line,
  .landing-v3.sensly .sensly-hero__line [data-word-rotator-target="stem"] {
    max-width: 100%; overflow-wrap: break-word;
  }
  .landing-v3.sensly .sensly-hero__sub { margin-top: 1.25rem; }

  /* CTAs: full-width, stacked, evenly spaced */
  .landing-v3.sensly .sensly-hero__cta { flex-direction: column; gap: 0.85rem; margin-top: 2rem; width: 100%; }
  .landing-v3.sensly .sensly-hero__cta .cta-btn { width: 100%; }
}

/* showreel scenario subtitle + mobile scroll-jacking live in showreel.css,
   shared by Sensly and Chatac (opt-in via data-showreel-scroll-mobile-value). */

/* offset anchor jumps so section tops clear the sticky nav with breathing room */
.landing-v3.sensly :is(#why, #how, #use-cases, #why-whatsapp, #pricing) {
  scroll-margin-top: calc(var(--sensly-nav-h, 73px) + 3rem);
}
/* ============================================================
   Sensly PREMIUM — Apple/Tesla-grade scrollytelling layer.
   Builds on .landing-v3.sensly (yellow tokens) — only adds the
   premium hero, the floating product phone, and the sticky
   "product in motion" stage. Scoped to .sensly-pro.
   ============================================================ */

/* ============================================================
   Technical-mono accents — the industrial signature.
   Headlines stay sans; only metadata (eyebrows, numbers, labels,
   status) goes monospace, like Linear / Vercel / v0.
   ============================================================ */
.landing-v3.sensly-pro {
  --mono: "SF Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace,
          "Menlo", "Consolas", monospace;
}

/* eyebrows read like terminal labels: [ mono · uppercase · tracked ] */
.landing-v3.sensly-pro .sensly-hero__eyebrow,
.landing-v3.sensly-pro .sensly-campaign__eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.12em;
}
.landing-v3.sensly-pro .sensly-hero__eyebrow::before { content: "// "; opacity: 0.55; }

/* step numbers — monospaced index */
.landing-v3.sensly-pro .sensly-step__n {
  font-family: var(--mono);
  font-weight: 500;
}

/* phone status / name — technical metadata */
.landing-v3.sensly-pro .sensly-phone__status {
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

/* ---------- premium hero: split, full-viewport, generous space ---------- */
.landing-v3.sensly-pro .sensly-pro-hero {
  position: relative;
  min-height: calc(100dvh - var(--sensly-nav-h, 73px));
  display: flex;
  align-items: center;
  overflow: hidden;
}
.landing-v3.sensly-pro .sensly-pro-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}
@media (min-width: 920px) {
  .landing-v3.sensly-pro .sensly-pro-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.landing-v3.sensly-pro .sensly-pro-hero__visual {
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

/* static hero headline (no rotator) — "ask, honest·ly." */
.landing-v3.sensly-pro .sensly-hero__headline--static {
  display: block;
  font-size: clamp(2.75rem, 8vw, 5.5rem);
  line-height: 0.98;
}
.landing-v3.sensly-pro .sensly-hero__headline--static .sensly-hero__stem { color: var(--text); }
.landing-v3.sensly-pro .sensly-hero__headline--static .sensly-hero__ly { color: var(--primary-deep); }

/* scroll cue at the bottom of the hero */
.landing-v3.sensly-pro .sensly-pro-hero__scrollcue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  width: 24px;
  height: 38px;
  border: 2px solid var(--neutral);
  border-radius: 14px;
  opacity: 0.5;
}
.landing-v3.sensly-pro .sensly-pro-hero__scrollcue span {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 7px;
  border-radius: 2px;
  background: var(--primary-deep);
  transform: translateX(-50%);
  animation: sensly-scrollcue 1.8s ease-in-out infinite;
}
@keyframes sensly-scrollcue {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  35%  { opacity: 1; }
  70%  { opacity: 0; transform: translate(-50%, 12px); }
  100% { opacity: 0; }
}

/* ---------- the product phone ---------- */
.landing-v3.sensly-pro .sensly-phone {
  width: clamp(260px, 30vw, 330px);
  filter: drop-shadow(0 40px 60px rgba(46, 38, 38, 0.18));
}
.landing-v3.sensly-pro .sensly-pro-hero__visual .sensly-phone {
  transform: rotateY(-9deg) rotateX(3deg);
  animation: sensly-phone-float 9s ease-in-out infinite;
}
@keyframes sensly-phone-float {
  0%,100% { transform: rotateY(-9deg) rotateX(3deg) translateY(0); }
  50%     { transform: rotateY(-9deg) rotateX(3deg) translateY(-12px); }
}
.landing-v3.sensly-pro .sensly-phone__frame {
  position: relative;
  background: #fff;
  border: 8px solid var(--text);
  border-radius: 38px;
  padding: 1rem 0.9rem 1.25rem;
  overflow: hidden;
}
.landing-v3.sensly-pro .sensly-phone__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 18px; background: var(--text); border-radius: 0 0 12px 12px;
}
.landing-v3.sensly-pro .sensly-phone__bar {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.4rem 0.75rem;
  margin-top: 0.75rem; border-bottom: 1px solid var(--border);
}
.landing-v3.sensly-pro .sensly-phone__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: var(--text);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.landing-v3.sensly-pro .sensly-phone__meta { display: flex; flex-direction: column; line-height: 1.2; }
.landing-v3.sensly-pro .sensly-phone__name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.landing-v3.sensly-pro .sensly-phone__status { font-size: 0.7rem; color: var(--primary-deep); }
.landing-v3.sensly-pro .sensly-phone__chat {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 0.4rem 0.4rem;
  min-height: 230px;
}

/* chat bubbles — reveal one after another */
.landing-v3.sensly-pro .sensly-bubble {
  max-width: 82%; padding: 0.55rem 0.8rem; font-size: 0.85rem; line-height: 1.35;
  border-radius: 14px;
  opacity: 0; transform: translateY(8px);
  animation: sensly-bubble-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.5s + var(--i) * 0.7s);
}
.landing-v3.sensly-pro .sensly-bubble--in {
  background: var(--surface-2); color: var(--text);
  align-self: flex-start; border-bottom-left-radius: 4px;
}
.landing-v3.sensly-pro .sensly-bubble--out {
  background: var(--primary); color: var(--text); font-weight: 600;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
@keyframes sensly-bubble-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v3.sensly-pro .sensly-bubble { opacity: 1; transform: none; animation: none; }
  .landing-v3.sensly-pro .sensly-pro-hero__visual .sensly-phone { animation: none; }
}

/* ---------- STICKY STAGE: product in motion (the Apple moment) ---------- */
.landing-v3.sensly-pro .sensly-stage {
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.landing-v3.sensly-pro .sensly-stage__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 920px) {
  .landing-v3.sensly-pro .sensly-stage__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
/* the phone pins to the viewport while the steps scroll past it */
.landing-v3.sensly-pro .sensly-stage__sticky {
  position: sticky;
  top: calc(var(--sensly-nav-h, 73px) + 4vh);
  height: fit-content;
  display: flex;
  justify-content: center;
  padding: 4rem 0;
}
.landing-v3.sensly-pro .sensly-stage__steps {
  display: flex;
  flex-direction: column;
}
.landing-v3.sensly-pro .sensly-stage__step {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 0;
}
.landing-v3.sensly-pro .sensly-stage__k {
  font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: -0.03em;
  text-transform: lowercase; line-height: 1;
}
.landing-v3.sensly-pro .sensly-stage__k .stem { color: var(--text); }
.landing-v3.sensly-pro .sensly-stage__k .ly { color: var(--primary-deep); }
.landing-v3.sensly-pro .sensly-stage__d {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--neutral); line-height: 1.55; max-width: 38ch;
}
@media (max-width: 919px) {
  .landing-v3.sensly-pro .sensly-stage__sticky { position: static; padding: 2rem 0; }
  .landing-v3.sensly-pro .sensly-stage__step { min-height: auto; }
}

/* ---------- premium final CTA: full-bleed, dramatic ---------- */
.landing-v3.sensly-pro .sensly-pro-cta {
  min-height: 70vh;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border);
}
.landing-v3.sensly-pro .sensly-pro-cta > .container-x { width: 100%; }

/* ---------- premium section rhythm — more whitespace everywhere ---------- */
.landing-v3.sensly-pro .sensly-steps,
.landing-v3.sensly-pro .sensly-values,
.landing-v3.sensly-pro .sensly-who {
  padding: clamp(5rem, 10vw, 8rem) 0;
}
.landing-v3.sensly-pro .sensly-campaign {
  padding: clamp(5rem, 11vw, 9rem) 0;
}
/* =====================================================================
   Showcase page (/showcase/phones) — standalone theater route
   ===================================================================== */

.landing-v3 .showcase-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(46, 38, 38, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(240, 246, 243, 0.08);
}

.landing-v3 .showcase-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
}

.landing-v3 .showcase-nav__logo {
  height: 28px;
  width: auto;
  display: block;
}

.landing-v3 .showcase-nav__tag {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
}

.landing-v3 .showcase-main {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.landing-v3 .showcase-intro {
  padding-block: clamp(4rem, 10vw, 8rem) clamp(2rem, 4vw, 4rem);
  text-align: center;
}

.landing-v3 .showcase-intro__copy {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  color: var(--neutral);
}

.landing-v3 .showcase-outro {
  padding-block: clamp(4rem, 10vw, 8rem);
  text-align: center;
}

.landing-v3 .showcase-outro__back {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.landing-v3 .showcase-outro__back:hover {
  text-decoration: underline;
}
.landing-v3 .showreel {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  width: 100dvw;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  max-width: 100dvw;
  background: var(--text);
  color: var(--bg);
  padding-block: clamp(1rem, 2vw, 2rem) clamp(4rem, 8vw, 7rem);
}

.landing-v3 .showreel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.landing-v3 .showreel__track,
.landing-v3 .showreel__pin {
  display: contents;
}

@media (min-width: 960px) {
  .landing-v3 .showreel__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .landing-v3 .showreel__track {
    display: block;
    height: 300vh;
  }

  .landing-v3 .showreel__pin {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    height: 100vh;
  }

  .landing-v3 .showreel__pin .showreel__grid {
    width: 100%;
  }

  .landing-v3 .showreel__item {
    cursor: default;
  }
}

.landing-v3 .showreel__list {
  display: grid;
  gap: 0.5rem;
}

.landing-v3 .showreel__item {
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: rgba(240, 246, 243, 0.55);
  transition: color 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .showreel__item:hover {
  color: var(--bg);
}

.landing-v3 .showreel__item.is-active {
  color: var(--bg);
}

.landing-v3 .showreel__item-title {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: font-size 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 960px) {
  .landing-v3 .showreel__item.is-active .showreel__item-title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
  }
}

.landing-v3 .showreel__bar {
  display: block;
  height: 2px;
  background: rgba(240, 246, 243, 0.16);
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease;
}

.landing-v3 .showreel__item.is-active .showreel__bar {
  opacity: 1;
}

.landing-v3 .showreel__bar-fill {
  display: block;
  height: 100%;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
}

.landing-v3 .showreel__stage {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Block the user's scroll (showcase only); the demo's scrollTop still works. */
.landing-v3 .showreel__stage .chatsap-chat {
  overflow: hidden;
}

.landing-v3 .showreel__stage .chatsap-widget {
  /* The 400x820 px-based phone is scaled with transform. Like the course
     preview, the scale fits the available height (vh / design-height, via CSS
     typed arithmetic) and is capped so it never grows past a compact size. */
  --phone-scale: min(0.68, calc(76vh / 820px));
  width: calc(400px * var(--phone-scale));
  height: calc(820px * var(--phone-scale));
  padding: 0;
  pointer-events: none;
}

.landing-v3 .showreel__stage .chatsap-phone-frame {
  flex: none;
  transform: scale(var(--phone-scale));
  transform-origin: top left;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.45), 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3);
}

@media (max-width: 959px) {
  .landing-v3 .showreel__stage .chatsap-widget {
    --phone-scale: min(0.62, calc(64vh / 820px));
  }
}

/* Appended inside the tapped element, so it positions against that element —
   near the right, where a thumb lands — with no coordinate math. */
.landing-v3 .showreel-cursor {
  --cursor-scale: 0.7;
  position: absolute;
  top: 50%;
  right: 14%;
  width: 44px;
  height: 44px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translate(50%, -50%) scale(var(--cursor-scale));
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .showreel-cursor.is-visible {
  --cursor-scale: 1;
  opacity: 1;
}

.landing-v3 .showreel-cursor.is-tapping {
  --cursor-scale: 0.82;
}

.landing-v3 .showreel-cursor::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 45%, transparent), transparent 70%);
}

.landing-v3 .showreel-cursor > i {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--primary-deep);
}

.landing-v3 .showreel-cursor > i:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.landing-v3 .showreel-cursor > i:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.landing-v3 .showreel-cursor > i:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
.landing-v3 .showreel-cursor > i:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .showreel__bar-fill { transform: scaleX(1); }
  .landing-v3 .showreel-cursor { display: none; }
}

.landing-v3 .showreel__item-sub {
  display: block; margin-top: 0.4rem;
  font-size: clamp(0.9rem, 1.1vw, 1rem); line-height: 1.45;
  color: var(--text-muted, rgba(240, 246, 243, 0.6)); max-width: 42ch;
  opacity: 0.7; transition: opacity 320ms ease;
}
.landing-v3 .showreel__item.is-active .showreel__item-sub { opacity: 1; }

/* Mobile: pin the reel and advance by scroll, one scenario at a time. */
@media (max-width: 959px) {
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__track {
    display: block; height: 300vh;
  }
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__pin {
    display: flex; align-items: center;
    position: sticky; top: var(--nav-h, 72px);
    height: calc(100svh - var(--nav-h, 72px));
  }
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__pin .showreel__grid { width: 100%; }

  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__grid {
    gap: 1rem; text-align: center; justify-items: center;
  }
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__list {
    display: grid; gap: 0; justify-items: center; min-height: 5.5rem;
  }
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__item {
    grid-area: 1 / 1; padding: 0; align-content: start;
    justify-items: center; text-align: center; width: 100%;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 320ms ease;
  }
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__item.is-active {
    opacity: 1; visibility: visible;
  }
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__item-title,
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__item-sub {
    text-align: center; max-width: 32ch; margin-inline: auto;
  }
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__bar { display: none; }
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__stage {
    width: 100%; justify-content: center;
  }
  /* scaled frame keeps its unscaled layout width; center it explicitly */
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__stage .chatsap-widget {
    display: flex; justify-content: center; overflow: visible; margin-inline: auto;
  }
  .landing-v3 .showreel[data-showreel-scroll-mobile-value="true"] .showreel__stage .chatsap-phone-frame {
    transform-origin: top center;
  }
}
/* ----- card / surface ----- */
.landing-v3 .surface {
  background: var(--surface);
  border: 1px solid var(--border);
}

/* ----- focus ----- */
.landing-v3 :focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----- TESTIMONIALS section ----- */
.landing-v3 .testimonials-section {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.landing-v3 .testimonials-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

@media (min-width: 900px) {
  .landing-v3 .testimonials-intro {
    grid-template-columns: 1.6fr 1fr;
  }
}

.landing-v3 .testimonials-intro__right {
  display: grid;
  gap: 1.75rem;
  align-content: end;
  padding-bottom: 0.5rem;
}

.landing-v3 .testimonials-intro__copy {
  max-width: 42ch;
  margin: 0;
}

.landing-v3 .testimonials-title {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--text);
  display: flex;
  flex-direction: column;
  margin: 0;
}

.landing-v3 .testimonials-title .display__line {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.22em;
}

.landing-v3 .testimonials-title .display__line > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .testimonials-title.is-visible .display__line:nth-child(1) > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.10s;
}

.landing-v3 .testimonials-title.is-visible .display__line:nth-child(2) > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

/* stage: full-width, quote marks live inline now (no positioned ornament) */
.landing-v3 .testimonials-stage {
  position: relative;
  display: block;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .testimonials-stage.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.landing-v3 .testimonials-slides {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 90ch;
}

/* all slides occupy the same grid cell — only active is visible/laid out */
.landing-v3 .testimonial-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(40px);
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 550ms cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 600ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 600ms;
}

.landing-v3 .testimonial-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 550ms cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 600ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear;
}

.landing-v3 .testimonial-slide__quote {
  margin: 0;
  max-width: 90ch;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  height: 100%;
}

.landing-v3 .testimonial-slide__text {
  display: block;
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.022em;
  font-weight: 500;
  color: var(--text);
  align-self: start;
}

/* inline quote marks — same family/size as the text, only color changes */
.landing-v3 .testimonial-slide__open,
.landing-v3 .testimonial-slide__close {
  color: var(--primary-deep);
  font-weight: 500;
}

.landing-v3 .testimonial-slide__attribution {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.5rem;
  margin-top: 0;
  align-self: end;
  border-top: 1px solid var(--border);
}

.landing-v3 .testimonial-slide__cite {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--neutral);
  font-style: normal;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}

.landing-v3 .testimonial-slide__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.landing-v3 .testimonial-slide__logo-img {
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.5) contrast(1.05);
  opacity: 0.75;
  transition: filter 280ms ease, opacity 280ms ease;
}

.landing-v3 .testimonial-slide__logo:hover .testimonial-slide__logo-img,
.landing-v3 .testimonial-slide.is-active .testimonial-slide__logo-img {
  filter: grayscale(0);
  opacity: 1;
}

/* controls: counter + bracketed arrows */
.landing-v3 .testimonials-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  gap: 2rem;
}

.landing-v3 .testimonials-progress {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--neutral);
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.landing-v3 .testimonials-progress__current {
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
}

.landing-v3 .testimonials-progress__sep {
  color: var(--border);
}

.landing-v3 .testimonials-arrows {
  display: flex;
  gap: 0.75rem;
}

.landing-v3 .testimonials-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 56px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: color 200ms ease;
}

.landing-v3 .testimonials-arrow svg {
  width: 18px;
  height: 18px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .testimonials-arrow:hover {
  color: var(--primary-deep);
}

/* bracket frames — drawn with corner pieces around the arrow */
.landing-v3 .testimonials-arrow__bracket-l,
.landing-v3 .testimonials-arrow__bracket-r {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 28px;
  border: 1.5px solid var(--neutral);
  color: transparent;
  font-size: 0;
  transform: translateY(-50%);
  transition: border-color 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .testimonials-arrow__bracket-l {
  left: 0;
  border-right: none;
}

.landing-v3 .testimonials-arrow__bracket-r {
  right: 0;
  border-left: none;
}

.landing-v3 .testimonials-arrow:hover .testimonials-arrow__bracket-l,
.landing-v3 .testimonials-arrow:hover .testimonials-arrow__bracket-r {
  border-color: var(--primary-deep);
}

.landing-v3 .testimonials-arrow:hover .testimonials-arrow__bracket-l {
  transform: translateY(-50%) translateX(-3px);
}

.landing-v3 .testimonials-arrow:hover .testimonials-arrow__bracket-r {
  transform: translateY(-50%) translateX(3px);
}

.landing-v3 .testimonials-arrow:hover svg {
  transform: translateX(2px);
}

.landing-v3 .testimonials-arrow:first-child:hover svg {
  transform: translateX(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .testimonials-title .display__line > span,
  .landing-v3 .testimonials-stage,
  .landing-v3 .testimonial-slide {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .landing-v3 .testimonial-slide:not(.is-active) { display: none; }
}

/* ----- typography scale (industrial / editorial) ----- */
.landing-v3 .display {
  font-size: clamp(3.5rem, 8.5vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--text);
}

.landing-v3 .h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--text);
}

.landing-v3 .h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--text);
}

.landing-v3 .h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  font-weight: 500;
  color: var(--text);
}

.landing-v3 .body-lg {
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--neutral);
}

.landing-v3 .body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--neutral);
}

.landing-v3 .eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--primary-deep);
}

.landing-v3 .eyebrow--letters {
  display: block;
  font-size: var(--hero-scale, clamp(2.5rem, 10.8cqi, 5rem));
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* each word stays together — wraps as a unit, never splits mid-word */
.landing-v3 .eyebrow__word {
  display: block;
  white-space: nowrap;
}

.landing-v3 .eyebrow__letter {
  display: inline-block;
  vertical-align: baseline;
  opacity: 0;
  transform: translateY(0.6em);
  animation: eyebrowLetterRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.15s + var(--i, 0) * 0.04s);
}

@keyframes eyebrowLetterRise {
  from {
    opacity: 0;
    transform: translateY(0.6em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .eyebrow__letter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* hero eyebrow override — same uppercase style but display-sized */

.landing-v3 .mono {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--neutral);
}

.landing-v3 .usecases {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.landing-v3 .usecases > .container-x { width: 100%; }

.landing-v3 .usecases__eyebrow {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-deep);
}
.landing-v3 .usecases__eyebrow::before { content: "// "; opacity: 0.55; }
.landing-v3 .usecases__title {
  margin-top: 0.75rem;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 700;
  line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text);
}

.landing-v3 .usecases__tabs { margin-top: 2.5rem; }
.landing-v3 .usecases__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.landing-v3 .usecases__chip {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.85rem; flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  border-radius: 0; padding: 0 1.2rem;
  font: inherit; font-size: 0.82rem; font-weight: 500; color: var(--neutral);
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.landing-v3 .usecases__chip:hover { color: var(--text); border-color: var(--primary-deep); }
.landing-v3 .usecases__chip.is-active {
  color: var(--bg); background: var(--primary-deep); border-color: var(--primary-deep);
}

.landing-v3 .usecases__stage {
  position: relative; margin-top: 2rem;
  background: var(--surface); border: 1px solid var(--border);
  padding: clamp(1.75rem, 4vw, 3rem); display: grid;
}
.landing-v3 .usecases__stage::after {
  content: ""; position: absolute; top: 0.75rem; right: 0.75rem;
  width: 16px; height: 16px; z-index: 2; pointer-events: none;
  border-top: 2px solid var(--primary-deep);
  border-right: 2px solid var(--primary-deep);
}
.landing-v3 .usecases__panel { grid-area: 1 / 1 / 2 / 2; }
.landing-v3 .usecases__panel[hidden] {
  display: block; visibility: hidden; opacity: 0; pointer-events: none;
}
.landing-v3 .usecases__panel.is-active { animation: usecasesPanelIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.landing-v3 .usecases__name {
  font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 700;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--text); margin-bottom: 0.75rem;
}
.landing-v3 .usecases__desc {
  font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; color: var(--neutral); max-width: 52ch;
}
@keyframes usecasesPanelIn {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v3 .usecases__panel.is-active { animation: none; }
}

.landing-v3 .usecases__stage--media .usecases__panel {
  grid-area: 1 / 1 / 2 / 2;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.landing-v3 .usecases__copy { min-width: 0; }
.landing-v3 .usecases__media {
  border: 1px solid var(--border); overflow: hidden; background: var(--bg);
}
.landing-v3 .usecases__media img {
  display: block; width: 100%; height: clamp(14rem, 30vh, 24rem); object-fit: cover;
}
@media (max-width: 760px) {
  .landing-v3 .usecases__stage--media .usecases__panel { grid-template-columns: 1fr; }
  .landing-v3 .usecases__media img { height: clamp(10rem, 20vh, 14rem); }
}
.landing-v3 .verify-section {
  padding-block: clamp(3rem, 8vh, 6rem);
}

.landing-v3 .verify-section__inner {
  max-width: 1100px;
}

.landing-v3 .verify-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 900px) {
  .landing-v3 .verify-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.landing-v3 .verify-intro {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.landing-v3 .verify-intro__eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin: 0;
}

.landing-v3 .verify-intro__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.landing-v3 .verify-intro__lead {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.55;
  color: var(--neutral);
  margin: 0;
  max-width: 44ch;
}

.landing-v3 .verify-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.landing-v3 .verify-form {
  display: grid;
  gap: 0.5rem;
}

.landing-v3 .verify-form__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}

.landing-v3 .verify-form__input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.landing-v3 .verify-form__input:focus {
  outline: none;
  border-color: var(--primary-deep);
  box-shadow: inset 0 0 0 1px var(--primary-deep);
}

.landing-v3 .verify-form__hint {
  font-size: 0.8125rem;
  color: var(--neutral);
  margin: 0.25rem 0 0.75rem;
}

.landing-v3 .verify-form__submit {
  width: 100%;
  margin-top: 0.25rem;
}

.landing-v3 .verify-alert {
  margin-bottom: 1rem;
}

.landing-v3 .verify-alert--success {
  margin-top: 1rem;
  margin-bottom: 0;
}

.landing-v3 .verify-alert__details {
  margin-top: 0.75rem;
}

.landing-v3 .verify-alert__details p {
  font-size: 0.875rem;
  margin: 0 0 0.5rem;
}

.landing-v3 .verify-alert__details ul {
  font-size: 0.875rem;
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.landing-v3 .verify-how {
  padding-block: clamp(3rem, 6vh, 5rem);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.landing-v3 .verify-how__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.landing-v3 .verify-steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 700px) {
  .landing-v3 .verify-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.landing-v3 .verify-step {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.landing-v3 .verify-step__num {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--primary-deep);
}

.landing-v3 .verify-step__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.landing-v3 .verify-step__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--neutral);
  margin: 0;
}
/* ----- WHY section — cocoa background, informational cards ----- */
.landing-v3 .why-section {
  background: var(--text);
  color: var(--bg);
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  position: relative;
  isolation: isolate;
}

/* industrial grid pattern in the background */
.landing-v3 .why-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    circle at 1.5px 1.5px,
    rgba(156, 213, 198, 0.22) 1.5px,
    transparent 0
  );
  background-size: 28px 28px;
  background-position: 0 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 95%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 95%);
}

.landing-v3 .why-intro {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.25rem;
  margin-bottom: 0;
  max-width: 64rem;
  margin-inline: auto;
}

/* ----- new layout: hero (orb + caption) on top, 3 cards row below ----- */
.landing-v3 .why-stage {
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .why-stage.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* hero row: orb visual + caption side by side */
.landing-v3 .why-stage__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: start;
}

@media (min-width: 900px) {
  .landing-v3 .why-stage__hero {
    grid-template-columns: 1.2fr 1fr;
  }
}

.landing-v3 .why-stage__caption {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  padding-top: clamp(0.5rem, 1.5vw, 1rem);
}

.landing-v3 .why-stage__copy {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(240, 246, 243, 0.6);
  margin: 0;
  max-width: 48ch;
  letter-spacing: -0.005em;
}

/* ----- 3D hero image (replaces orb placeholder) ----- */
.landing-v3 .why-stage__visual {
  position: relative;
  width: 100%;
  height: clamp(280px, 38vh, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.landing-v3 .why-stage__hero-iframe {
  width: 200%;
  height: 200%;
  margin: 10% 0 0 30%;
  transform: scale(1.7);
  transform-origin: center center;
  border: 0;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  animation: whyHeroFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 3s forwards;
}

@keyframes whyHeroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .why-stage__hero-iframe {
    animation: none;
    opacity: 1;
  }
}

.landing-v3 .why-cards-row {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--bg-soft);
  width: 100%;
}

@media (min-width: 700px) {
  .landing-v3 .why-cards-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tile: presence in repose + soft glow on hover (no harsh state change) */
.landing-v3 .why-tile {
  --mx: 50%;
  --my: 50%;
  position: relative;
  background: rgba(255, 255, 255, 0.012);
  border-right: 1px solid var(--bg-soft);
  border-bottom: 1px solid var(--bg-soft);
  padding: 1.75rem 1.75rem;
  min-height: 14rem;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.3rem;
  isolation: isolate;
  overflow: hidden;
  transition: background 480ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 700px) {
  .landing-v3 .why-tile:last-child {
    border-right: none;
  }
}

@media (max-width: 699px) {
  .landing-v3 .why-tile {
    border-right: none;
  }
  .landing-v3 .why-tile:last-child {
    border-bottom: none;
  }
  .landing-v3 .why-title {
    font-size: clamp(1.125rem, 5vw, 1.625rem);
    padding-inline: 0.75rem;
  }
  .landing-v3 .why-title .display__line {
    display: block;
    white-space: normal;
    overflow: visible;
    padding-bottom: 0.1em;
  }
  .landing-v3 .why-title .display__line > span {
    display: inline;
    white-space: normal;
  }
  .landing-v3 .why-stage__visual {
    height: clamp(220px, 32vh, 300px);
    overflow: hidden;
  }
  .landing-v3 .why-stage__hero-iframe {
    width: 140%;
    height: 140%;
    margin: 0;
    transform: scale(1.3);
  }
  .landing-v3 .why-stage__copy {
    font-size: 0.9375rem;
  }
}

/* hover: subtle mint wash, not a solid block */
.landing-v3 .why-tile:hover {
  background: var(--hover-wash);
  border-color: var(--hover-edge);
}

/* mouse-tracked torch — soft and natural */
.landing-v3 .why-tile__torch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    320px circle at var(--mx) var(--my),
    rgba(156, 213, 198, 0.10),
    rgba(156, 213, 198, 0) 70%
  );
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .why-tile:hover .why-tile__torch {
  opacity: 1;
}

/* corner frame — appears on hover: 4 mint squares at corners connected by faint border, hugging the tile edges */
.landing-v3 .why-tile__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.landing-v3 .why-tile__frame::before,
.landing-v3 .why-tile__frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hover-frame-color);
  transform: scaleX(0);
  transition: transform var(--hover-frame-duration) var(--hover-frame-easing) var(--hover-frame-delay);
}

.landing-v3 .why-tile__frame::before { top: 0; }
.landing-v3 .why-tile__frame::after  { bottom: 0; }

/* vertical lines (left + right) — use the two <span> children explicitly */
.landing-v3 .why-tile__frame > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--hover-frame-color);
  transform: scaleY(0);
  transition: transform var(--hover-frame-duration) var(--hover-frame-easing) var(--hover-frame-delay);
}

.landing-v3 .why-tile__frame > span:nth-of-type(1) { left: 0; }
.landing-v3 .why-tile__frame > span:nth-of-type(2) { right: 0; }

.landing-v3 .why-tile__frame i {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--primary);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--hover-square-opacity-duration) var(--hover-frame-easing),
              transform var(--hover-square-transform-duration) var(--hover-frame-easing);
}

.landing-v3 .why-tile__frame i:nth-of-type(1) { top: -6px;    left: -6px; }
.landing-v3 .why-tile__frame i:nth-of-type(2) { top: -6px;    right: -6px; }
.landing-v3 .why-tile__frame i:nth-of-type(3) { bottom: -6px; left: -6px; }
.landing-v3 .why-tile__frame i:nth-of-type(4) { bottom: -6px; right: -6px; }

.landing-v3 .why-tile:hover .why-tile__frame {
  opacity: 1;
}

.landing-v3 .why-tile:hover .why-tile__frame::before,
.landing-v3 .why-tile:hover .why-tile__frame::after,
.landing-v3 .why-tile:hover .why-tile__frame > span {
  transform: scaleX(1);
}

.landing-v3 .why-tile:hover .why-tile__frame > span {
  transform: scaleY(1);
}

.landing-v3 .why-tile:hover .why-tile__frame i {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--hover-square-delay);
}

/* number — always visible, slightly accents on hover */
.landing-v3 .why-tile__num {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  position: relative;
  z-index: 2;
  transition: color 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .why-tile:hover .why-tile__num {
  color: var(--primary-hover);
}

/* content block: title + description both visible, anchored to top */
.landing-v3 .why-tile__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.15rem;
}

.landing-v3 .why-tile__title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--bg);
  margin: 0;
  max-width: 18ch;
  transition: color 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* description hidden in repose, fades in on hover */
.landing-v3 .why-tile__desc {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: rgba(240, 246, 243, 0.78);
  margin: 0;
  max-width: 40ch;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-v3 .why-tile:hover .why-tile__desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  .landing-v3 .why-stage,
  .landing-v3 .why-tile,
  .landing-v3 .why-tile__desc {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
  .landing-v3 .why-tile__desc { max-height: none; }
}

.landing-v3 .why-chip {
  color: var(--bg);
}

.landing-v3 .why-chip .product-chip__label {
  color: var(--bg);
}

.landing-v3 .why-chip .product-chip__bracket {
  color: rgba(240, 246, 243, 0.55);
}

.landing-v3 .why-chip .product-chip__arrow {
  color: var(--bg);
}


.landing-v3 .why-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  max-width: none;
}

.landing-v3 .why-title .display__line {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.22em;
  white-space: nowrap;
}

.landing-v3 .why-title .display__line > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   1.0s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-v3 .why-title.is-visible .display__line:nth-child(1) > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.10s;
}

.landing-v3 .why-title.is-visible .display__line:nth-child(2) > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

/* Button overrides for Landing & Launchpad */
.btn {
  /* Smooth color/brightness transitions */
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover, .btn:focus-visible {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0); /* Reset on active press */
}

/* Ghost buttons are transparent; tweak background on hover */
.btn-ghost:hover {
  filter: none !important;
  background-color: var(--fallback-bc,oklch(var(--bc)/0.1)) !important;
}

/* Outline variant glow for dark theme */
[data-theme="dark"] .btn-outline:hover {
  backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(45, 85, 93, 0.4);
}

/* Ensure circular buttons (avatars) center their content */
.btn-circle {
  display: flex; /* override DaisyUI inline-flex */
  align-items: center;
  justify-content: center;
  gap: 0; /* no internal gap needed for single letter */
}

/* Override avatar child rule from DaisyUI that forces display:block */
.avatar > .btn-circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
} 
/* Card style overrides for Landing & Launchpad */
.card-clickable {
  transition: filter 0.3s ease, box-shadow 0.3s ease;
}

.card-clickable:hover {
  filter: brightness(1.03);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12);
}

/* Stronger shadow in dark mode */
[data-theme="dark"] .card-clickable:hover {
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.35);
}

/* Interactive content items (e.g., images inside cards) */
.interactive-content:hover {
  transform: translateY(-3px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .interactive-content:hover {
  box-shadow: 0 15px 35px -8px rgba(16, 16, 21, 0.2);
}

[data-theme="light"] .interactive-content:hover {
  box-shadow: 0 15px 35px -8px rgba(0, 0, 0, 0.12);
}

/* Stat card subtle glow */
[data-theme="dark"] .stat:hover {
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
  box-shadow: 0 0 20px rgba(45, 85, 93, 0.3);
}

[data-theme="light"] .stat:hover {
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
  box-shadow: 0 0 20px rgba(173, 173, 164, 0.3);
} 
/* ===================================================================
 * LINK THEME CONFIGURATION
 * ===================================================================
 * 
 * Comprehensive link styling system built on DaisyUI theme colors.
 * Based on privacy/legal links as the standard baseline pattern.
 * 
 * USAGE:
 *   <%= link_to "Text", path, class: "link-footer" %>
 *   <%= link_to "Text", path, class: "link-nav" %>
 *   <%= link_to "Text", path, class: "link-accent" %>
 * 
 * AVAILABLE LINK VARIANTS:
 * - link-footer    : Standard footer links (privacy/legal baseline)
 * - link-nav       : Navigation links with background hover
 * - link-nav-title : Large navigation title links
 * - link-accent    : Accent colored links (DaisyUI accent)
 * - link-primary   : Primary colored links (DaisyUI primary)
 * - link-secondary : Secondary colored links (DaisyUI secondary)
 * - link-success   : Success colored links (DaisyUI success)
 * - link-warning   : Warning colored links (DaisyUI warning)
 * - link-error     : Error colored links (DaisyUI error)
 * - link-subtle    : Subtle underlined links
 * - link-breadcrumb: Breadcrumb navigation links
 * - link-external  : External links with indicator
 * - link-button    : Button-styled links
 * 
 * BUTTON LINK VARIANTS:
 * - btn-link-primary   : Primary button link
 * - btn-link-secondary : Secondary button link
 * - btn-link-accent    : Accent button link
 * - btn-link-ghost     : Ghost button link
 * - btn-link-outline   : Outline button link
 * 
 * SIZE MODIFIERS (append to any variant):
 * - -xs, -sm, -lg, -xl
 * 
 * STATE MODIFIERS:
 * - -disabled : Disabled state
 * - -active   : Active state
 * 
 * =================================================================== */

/* ===================================================================
 * BASE LINK CONFIGURATION
 * =================================================================== */

/* Reset default link styling to build upon */
.link-component {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Focus states for accessibility */
.link-component:focus {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ===================================================================
 * STANDARD LINK VARIANTS
 * =================================================================== */

/* Footer Links - Privacy/Legal Baseline Standard */
.link-footer {
  @apply link-component;
  color: hsl(var(--base-content) / 0.7);
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-footer:hover,
.link-footer:focus {
  color: hsl(var(--base-content));
}

/* Navigation Links - Background hover effect */
.link-nav {
  @apply link-component;
  color: hsl(var(--base-content));
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-nav:hover,
.link-nav:focus {
  background-color: hsl(var(--base-200));
  color: hsl(var(--base-content));
}

/* Navigation Title Links - Large titles */
.link-nav-title {
  @apply link-component;
  color: hsl(var(--base-content));
  font-size: 1.125rem;
  font-weight: 500;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-nav-title:hover,
.link-nav-title:focus {
  color: hsl(var(--accent));
}

@media (min-width: 768px) {
  .link-nav-title {
    font-size: 1.25rem;
  }
}

/* DaisyUI Theme Color Links */
.link-accent {
  @apply link-component;
  color: hsl(var(--accent));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-accent:hover,
.link-accent:focus {
  color: hsl(var(--accent) / 0.8);
}

.link-primary {
  @apply link-component;
  color: hsl(var(--primary));
  font-weight: 500;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-primary:hover,
.link-primary:focus {
  color: hsl(var(--primary) / 0.8);
}

.link-secondary {
  @apply link-component;
  color: hsl(var(--secondary));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-secondary:hover,
.link-secondary:focus {
  color: hsl(var(--secondary) / 0.8);
}

.link-success {
  @apply link-component;
  color: hsl(var(--success));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-success:hover,
.link-success:focus {
  color: hsl(var(--success) / 0.8);
}

.link-warning {
  @apply link-component;
  color: hsl(var(--warning));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-warning:hover,
.link-warning:focus {
  color: hsl(var(--warning) / 0.8);
}

.link-error {
  @apply link-component;
  color: hsl(var(--error));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-error:hover,
.link-error:focus {
  color: hsl(var(--error) / 0.8);
}

/* ===================================================================
 * SPECIALIZED LINK VARIANTS
 * =================================================================== */

/* Subtle Links - With underline decoration */
.link-subtle {
  @apply link-component;
  color: hsl(var(--base-content) / 0.7);
  text-decoration: underline;
  text-decoration-color: hsl(var(--base-content) / 0.3);
  text-underline-offset: 0.25rem;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-subtle:hover,
.link-subtle:focus {
  color: hsl(var(--base-content));
  text-decoration-color: hsl(var(--base-content) / 0.6);
}

/* Breadcrumb Links - For navigation paths */
.link-breadcrumb {
  @apply link-component;
  color: hsl(var(--accent));
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2rem;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-breadcrumb:hover,
.link-breadcrumb:focus {
  color: hsl(var(--accent) / 0.8);
  text-decoration-color: hsl(var(--accent) / 0.6);
}

/* External Links - With indicator icon */
.link-external {
  @apply link-component;
  color: hsl(var(--accent));
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-external:hover,
.link-external:focus {
  color: hsl(var(--accent) / 0.8);
  transform: translateY(-1px);
}

.link-external::after {
  content: "↗";
  font-size: 0.75em;
  margin-left: 0.25rem;
  opacity: 0.7;
}

/* Button-styled Links */
.link-button {
  @apply link-component;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-content));
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-button:hover,
.link-button:focus {
  background-color: hsl(var(--primary) / 0.9);
  transform: translateY(-1px);
}

/* ===================================================================
 * BUTTON LINK VARIANTS (Enhanced DaisyUI buttons)
 * =================================================================== */

.btn-link-primary {
  @apply btn btn-primary;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-primary:hover {
  transform: translateY(-1px);
}

.btn-link-secondary {
  @apply btn btn-secondary;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-secondary:hover {
  transform: translateY(-1px);
}

.btn-link-accent {
  @apply btn btn-accent;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-accent:hover {
  transform: translateY(-1px);
}

.btn-link-ghost {
  @apply btn btn-ghost;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-ghost:hover {
  transform: translateY(-1px);
  background-color: hsl(var(--base-content) / 0.1);
}

.btn-link-outline {
  @apply btn btn-outline;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-link-outline:hover {
  transform: translateY(-1px);
}

/* ===================================================================
 * SIZE MODIFIERS
 * =================================================================== */

/* Extra Small */
.link-xs {
  font-size: 0.75rem;
  gap: 0.125rem;
}

.link-xs.link-nav {
  padding: 0.25rem 0.5rem;
}

.link-xs.link-button {
  padding: 0.25rem 0.5rem;
}

/* Small */
.link-sm {
  font-size: 0.875rem;
  gap: 0.1875rem;
}

.link-sm.link-nav {
  padding: 0.375rem 0.625rem;
}

.link-sm.link-button {
  padding: 0.375rem 0.75rem;
}

/* Large */
.link-lg {
  font-size: 1.125rem;
  gap: 0.375rem;
  font-weight: 500;
}

.link-lg.link-nav {
  padding: 0.75rem 1rem;
}

.link-lg.link-button {
  padding: 0.75rem 1.5rem;
}

/* Extra Large */
.link-xl {
  font-size: 1.25rem;
  gap: 0.5rem;
  font-weight: 600;
}

.link-xl.link-nav {
  padding: 1rem 1.25rem;
}

.link-xl.link-button {
  padding: 1rem 2rem;
}

/* ===================================================================
 * STATE MODIFIERS
 * =================================================================== */

/* Disabled State */
.link-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Active State */
.link-active {
  font-weight: 600;
}

.link-nav.link-active {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.link-accent.link-active {
  color: hsl(var(--accent));
  font-weight: 600;
}

/* ===================================================================
 * DARK MODE ENHANCEMENTS
 * =================================================================== */

[data-theme="dark"] .btn-link-outline:hover {
  backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(45, 85, 93, 0.4);
}

[data-theme="dark"] .link-external:hover {
  text-shadow: 0 0 8px hsl(var(--accent) / 0.3);
}

/* ===================================================================
 * INTERACTIVE EFFECTS
 * =================================================================== */

/* Hover Scale Effect (for special cases) */
.link-scale {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-scale:hover {
  transform: scale(1.05);
}

/* Glow Effect (for dark theme highlights) */
[data-theme="dark"] .link-glow:hover {
  text-shadow: 0 0 8px currentColor;
}

/* ===================================================================
 * ICON INTEGRATION
 * =================================================================== */

.link-component svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.link-xs svg {
  width: 0.75em;
  height: 0.75em;
}

.link-sm svg {
  width: 0.875em;
  height: 0.875em;
}

.link-lg svg {
  width: 1.125em;
  height: 1.125em;
}

.link-xl svg {
  width: 1.25em;
  height: 1.25em;
}

/* Icon positioning */
.link-component .icon-left {
  order: -1;
}

.link-component .icon-right {
  order: 1;
} 
/* ===== Migrated from globals.css - project-wide utility overrides ===== */

/* Variable Fonts */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "MPLUS1";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/MPLUS1-VariableFont_wght-f690acd6c4283c34769a24b3d3989b121db7c449c9fc30957698edb8ec41dd9c.woff2) format("woff2");
    font-named-instance: "Regular";
  }
}

@layer utilities {
  .font-thin { font-variation-settings: 'wght' 100; }
  .font-extralight { font-variation-settings: 'wght' 200; }
  .font-light { font-variation-settings: 'wght' 300; }
  .font-normal { font-variation-settings: 'wght' 400; }
  .font-medium { font-variation-settings: 'wght' 500; }
  .font-semibold { font-variation-settings: 'wght' 600; }
  .font-bold { font-variation-settings: 'wght' 700; }
  .font-extrabold { font-variation-settings: 'wght' 800; }
  .font-black { font-variation-settings: 'wght' 900; }

  /* Shared transition helpers to replace bulky utility chains */
  .transition-base {
    @apply transition duration-300 ease-in-out;
  }

  .transition-fast {
    @apply transition duration-200 ease-in-out;
  }
}

/* Additional utilities & component tweaks (kept here if not already moved) */

/* Custom shadow-primary for light theme */
[data-theme="light"] .shadow-primary {
  --tw-shadow: 0px 0px 1px 1px rgba(173, 173, 164, 0.5);
  box-shadow: var(--tw-shadow);
}

/* Dark-theme shadow refinements */
[data-theme="dark"] .shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  box-shadow: var(--tw-shadow);
}
[data-theme="dark"] .shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  box-shadow: var(--tw-shadow);
}
[data-theme="dark"] .shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  box-shadow: var(--tw-shadow);
}

/* Theme-aware semantic colors for metrics/trends.
   Light: high-contrast shades for readability on white.
   Dark: DaisyUI palette shades that pop on dark backgrounds. */
.text-positive  { color: #059669; }
.text-negative  { color: #dc2626; }
.bg-positive    { background-color: rgba(5, 150, 105, 0.10); }
.bg-negative    { background-color: rgba(220, 38, 38, 0.10); }

[data-theme="dark"] .text-positive  { color: #70EFC1; }
[data-theme="dark"] .text-negative  { color: #F87171; }
[data-theme="dark"] .bg-positive    { background-color: rgba(112, 239, 193, 0.15); }
[data-theme="dark"] .bg-negative    { background-color: rgba(248, 113, 113, 0.15); }

/* Accent-green: uses positive (#059669) in light, success (DaisyUI) in dark.
   Designed for navigation stat cards that need high contrast in both themes. */
.text-accent-green      { color: #059669; }
.text-accent-green-80   { color: rgba(5, 150, 105, 0.8); }
.bg-accent-green-10     { background-color: rgba(5, 150, 105, 0.10); }
.border-accent-green-20 { border-color: rgba(5, 150, 105, 0.20); }
.hover\:border-accent-green-40:hover { border-color: rgba(5, 150, 105, 0.40); }

[data-theme="dark"] .text-accent-green      { color: oklch(var(--su)); }
[data-theme="dark"] .text-accent-green-80   { color: oklch(var(--su) / 0.8); }
[data-theme="dark"] .bg-accent-green-10     { background-color: oklch(var(--su) / 0.10); }
[data-theme="dark"] .border-accent-green-20 { border-color: oklch(var(--su) / 0.20); }
[data-theme="dark"] .hover\:border-accent-green-40:hover { border-color: oklch(var(--su) / 0.40); }

/* AI-Usage dashboard card animation */
.ai-usage-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.ai-usage-card:hover { transform: scale(1.02) translateY(-2px); }
[data-theme="dark"] .ai-usage-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .ai-usage-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Progress component enhancements (matches DaisyUI `.progress`) */
.progress {
  appearance: none;
  border-radius: 9999px;
  overflow: hidden;
}
[data-theme="dark"] .progress::-webkit-progress-bar { background-color: hsl(var(--b3)); border-radius: 9999px; }
[data-theme="dark"] .progress::-webkit-progress-value {
  background: linear-gradient(90deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  border-radius: 9999px;
  transition: all 0.3s ease;
}
[data-theme="light"] .progress::-webkit-progress-value {
  background: linear-gradient(90deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  border-radius: 9999px;
  transition: all 0.3s ease;
}

/* Alerts, collapse, tables, scrollbar & misc animations */
[data-theme="dark"] .alert { backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
[data-theme="dark"] .alert-warning { background: linear-gradient(135deg, rgba(236, 148, 85, .2) 0%, rgba(236,148,85,.1) 100%); border-color: rgba(236,148,85,.3); }
[data-theme="dark"] .alert-error   { background: linear-gradient(135deg, rgba(234, 67, 53, .2) 0%, rgba(234,67,53,.1) 100%); border-color: rgba(234,67,53,.3); }
[data-theme="dark"] .alert-info    { background: linear-gradient(135deg, rgba(45, 85, 93, .2) 0%, rgba(45,85,93,.1) 100%); border-color: rgba(45,85,93,.3); }

[data-theme="dark"] .collapse { backdrop-filter: blur(10px); }
.collapse-title:hover { background: linear-gradient(135deg, hsl(var(--b3)) 0%, hsl(var(--b2)) 100%); }

/* Card-like table styling - applying card properties to table rows */
.table {
  border-collapse: separate;
  border-spacing: 0.5rem;
  width: 100%;
}

.table thead {
  background-color: transparent;
}

.table thead th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: hsl(var(--bc));
  border-bottom: 1px solid hsl(var(--b3));
  background-color: transparent;
}

.table tbody tr {
  background-color: hsl(var(--b2));
  border: 1px solid hsl(var(--b3));
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
  margin-bottom: 0.5rem;
}

.table tbody tr:hover {
  background-color: hsl(var(--b2) / 0.8) !important;
  border-color: hsl(var(--accent) / 0.3) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12);
}

.table tbody td {
  padding: 1rem;
  color: hsl(var(--bc));
  border-radius: 0.5rem;
}

/* Clickable table rows with card-like hover effects */
.table tbody tr.cursor-pointer {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.table tbody tr.cursor-pointer:hover {
  background-color: hsl(var(--b2) / 0.9) !important;
  border-color: hsl(var(--accent) / 0.4) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12);
}

[data-theme="dark"] .table tbody tr.cursor-pointer:hover {
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.35);
}

[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: hsl(var(--b3)); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: hsl(var(--bc) / 0.3); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: hsl(var(--bc) / 0.5); }

[data-slim-scroll] { scrollbar-width: none; -ms-overflow-style: none; }
[data-slim-scroll]::-webkit-scrollbar { width: 0; height: 0; display: none; }

@keyframes float { 0%,100% { transform: translateY(0px);} 50% { transform: translateY(-5px);} }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 5px rgba(45,85,93,.5);} 50% { box-shadow: 0 0 20px rgba(45,85,93,.8);} }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.float-animation { animation: float 3s ease-in-out infinite; }
[data-theme="dark"] .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Tab design */
.tab {
  transition: all 0.3s ease;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
}
.tab-active {
  background: linear-gradient(135deg, hsl(var(--b1)) 0%, hsl(var(--b2)) 100%);
  border-bottom: 2px solid hsl(var(--p));
  color: hsl(var(--p));
}

/* ── Rich metric info tooltips (CSS-only, zero JS) ── */
.metric-tooltip-trigger {
  position: relative;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--bc) / 0.18);
  color: hsl(var(--bc) / 0.35);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.metric-tooltip-trigger:hover,
.metric-tooltip-trigger:focus {
  color: hsl(var(--bc) / 0.75);
  border-color: hsl(var(--bc) / 0.35);
  background-color: hsl(var(--bc) / 0.06);
}

/* Tooltip card */
.metric-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.97);
  transform-origin: bottom center;
  min-width: 220px;
  max-width: 300px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.2s;
  z-index: 50;
}

/* Tooltip arrow (top position) */
.metric-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.97);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.04));
}

/* Typography */
.metric-tooltip-title {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #111827;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.metric-tooltip-desc {
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  color: #6b7280;
}

/* Show on hover / focus-within */
.metric-tooltip-trigger:hover .metric-tooltip,
.metric-tooltip-trigger:focus-within .metric-tooltip,
.metric-tooltip-trigger:focus .metric-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

/* Bottom variant */
.metric-tooltip--bottom {
  bottom: auto;
  top: calc(100% + 10px);
  transform-origin: top center;
}
.metric-tooltip--bottom::after {
  top: auto;
  bottom: 100%;
  border: 7px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.97);
  border-top-color: transparent;
}

/* End-aligned variant (for elements near the right edge) */
.metric-tooltip--end {
  left: auto;
  right: -8px;
  transform: translateY(6px) scale(0.97);
}
.metric-tooltip--end::after {
  left: auto;
  right: 12px;
  transform: none;
}
.metric-tooltip-trigger:hover .metric-tooltip--end,
.metric-tooltip-trigger:focus-within .metric-tooltip--end,
.metric-tooltip-trigger:focus .metric-tooltip--end {
  transform: translateY(0) scale(1);
}

/* Start-aligned variant (for elements near the left edge) */
.metric-tooltip--start {
  left: -8px;
  transform: translateY(6px) scale(0.97);
}
.metric-tooltip--start::after {
  left: 12px;
  transform: none;
}
.metric-tooltip-trigger:hover .metric-tooltip--start,
.metric-tooltip-trigger:focus-within .metric-tooltip--start,
.metric-tooltip-trigger:focus .metric-tooltip--start {
  transform: translateY(0) scale(1);
}

/* ── Dark / night / business themes ── */
[data-theme="dark"] .metric-tooltip,
[data-theme="night"] .metric-tooltip,
[data-theme="business"] .metric-tooltip {
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.40),
    0 2px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .metric-tooltip::after,
[data-theme="night"] .metric-tooltip::after,
[data-theme="business"] .metric-tooltip::after {
  border-top-color: rgba(30, 41, 59, 0.96);
}
[data-theme="dark"] .metric-tooltip--bottom::after,
[data-theme="night"] .metric-tooltip--bottom::after,
[data-theme="business"] .metric-tooltip--bottom::after {
  border-bottom-color: rgba(30, 41, 59, 0.96);
  border-top-color: transparent;
}
[data-theme="dark"] .metric-tooltip-title,
[data-theme="night"] .metric-tooltip-title,
[data-theme="business"] .metric-tooltip-title {
  color: #f1f5f9;
}
[data-theme="dark"] .metric-tooltip-desc,
[data-theme="night"] .metric-tooltip-desc,
[data-theme="business"] .metric-tooltip-desc {
  color: rgba(255, 255, 255, 0.55);
}

/* Tooltip only appears when text is actually truncated (JS adds .is-truncated). */
.truncated-text-wrapper {
  position: relative;
  display: block;
  max-width: 100%;
  cursor: default;
}
.truncated-text-wrapper .truncated-text-tooltip {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.truncated-text-wrapper.is-truncated {
  cursor: help;
}
.truncated-text-wrapper.is-truncated:hover .truncated-text-tooltip,
.truncated-text-wrapper.is-truncated:focus .truncated-text-tooltip,
.truncated-text-wrapper.is-truncated:focus-within .truncated-text-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .metric-tooltip {
    transition: opacity 0.1s, visibility 0.1s;
    transform: translateX(-50%) scale(1) !important;
  }
}

/* ── Metric deep-dive panels (<details>/<summary>) ── */
.metric-details summary { list-style: none; }
.metric-details summary::-webkit-details-marker { display: none; }
.metric-details[open] > summary .chevron-icon { rotate: 90deg; }

/* Mindmap colours for dialogs / controller-driven maps */
[data-controller="mindmap"] jmnode,
.mindmap-presentation jmnode {
  background: linear-gradient(135deg, hsl(var(--b2)) 0%, hsl(var(--b3)) 100%);
  border: 1px solid hsl(var(--bc) / 0.2);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
[data-controller="mindmap"] jmnode.selected,
jmnode.selected {
  background: linear-gradient(135deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
  color: hsl(var(--pc));
  border-color: hsl(var(--p));
  box-shadow: 0 0 10px rgba(45,85,93,.5);
} 
/* Tag Component Styles */
/* 
 * This component enhances DaisyUI badge classes for a more sleek, modern appearance.
 * Base styling comes from DaisyUI badges, with custom enhancements for visual polish.
 * See: https://daisyui.com/components/badge/
 * 
 * Available variants: badge-primary, badge-secondary, badge-accent, badge-neutral,
 *                    badge-info, badge-success, badge-warning, badge-error
 * 
 * Available sizes: badge-xs, badge-sm, (default), badge-lg
 */

/* Enhanced base badge styling for all tag components */
.tag-component.badge {
  /* Modern rounded pill appearance */
  border-radius: 9999px !important;
  
  /* Enhanced typography */
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.025em !important;
  
  /* Improved spacing */
  padding: 0.25rem 0.75rem !important;
  min-height: 1.5rem !important;
  
  /* Minimal visual enhancements */
  border: 1px solid transparent !important;
  box-shadow: none !important;
  
  /* Smooth transitions */
  transition: all 0.15s ease-in-out !important;
  
  /* Better text alignment */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
}

/* Size variants with enhanced styling */
.tag-component.badge-xs {
  font-size: 0.625rem;
  padding: 0.125rem 0.5rem;
  min-height: 1.25rem;
}

.tag-component.badge-sm {
  font-size: 0.6875rem;
  padding: 0.1875rem 0.625rem;
  min-height: 1.375rem;
}

.tag-component.badge-lg {
  font-size: 0.875rem;
  padding: 0.375rem 1rem;
  min-height: 2rem;
  font-weight: 600;
}

/* Enhanced hover effects for clickable tags */
.tag-component.badge.tag-clickable {
  cursor: pointer;
}

.tag-component.badge.tag-clickable:hover {
  transform: translateY(-1px) !important;
  opacity: 0.8 !important;
}

.tag-component.badge.tag-clickable:active {
  transform: translateY(0) !important;
  opacity: 0.6 !important;
}

/* Minimal color variants with subtle backgrounds and colored text */
.tag-component.badge-success {
  background-color: rgba(34, 197, 94, 0.1) !important;
  color: rgb(21, 128, 61) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-warning {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: rgb(180, 83, 9) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-info {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: rgb(37, 99, 235) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-error {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: rgb(220, 38, 38) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-primary {
  background-color: rgba(168, 85, 247, 0.1) !important;
  color: rgb(147, 51, 234) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-secondary {
  background-color: rgba(107, 114, 128, 0.1) !important;
  color: rgb(75, 85, 99) !important;
  border: 1px solid rgba(107, 114, 128, 0.2) !important;
  box-shadow: none !important;
}

.tag-component.badge-neutral {
  background-color: rgba(107, 114, 128, 0.1) !important;
  color: rgb(75, 85, 99) !important;
  border: 1px solid rgba(107, 114, 128, 0.2) !important;
  box-shadow: none !important;
}

/* Icon styling within tags */
.tag-component.badge svg {
  width: 0.875em;
  height: 0.875em;
  flex-shrink: 0;
}

.tag-component.badge-xs svg {
  width: 0.75em;
  height: 0.75em;
}

.tag-component.badge-lg svg {
  width: 1em;
  height: 1em;
}

/* Focus states for accessibility */
.tag-component.badge.tag-clickable:focus {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .tag-component.badge {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.625rem;
  }
  
  .tag-component.badge-lg {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }
} 
@media (max-width: 767px) {
  .feature-grid__card {
    align-items: center;
    text-align: center;
  }
}

.academy-hero {
  min-height: 100vh;
  min-height: 100dvh;
  margin-top: -4rem;
  display: flex;
  align-items: stretch;
  position: relative;
  isolation: isolate;
}

@media (min-width: 768px) {
  .academy-hero {
    margin-top: -5rem;
  }
}

@media (min-width: 1024px) {
  .academy-hero {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
}

.academy-navbar.navbar-transparent .menu a,
.academy-navbar.navbar-transparent .navbar-center a {
  color: rgba(240, 246, 243, 0.82);
}

.academy-navbar.navbar-transparent .menu a:hover,
.academy-navbar.navbar-transparent .navbar-center a:hover {
  color: #F0F6F3;
  background-color: rgba(240, 246, 243, 0.08);
}

.academy-navbar.navbar-transparent .btn-ghost {
  color: #F0F6F3;
}

.academy-navbar .academy-btn {
  --text: #1A1A2E;
}

.academy-navbar.navbar-transparent .academy-btn {
  --text: #F0F6F3;
  --hover-wash: rgba(240, 246, 243, 0.06);
}

.academy-navbar.navbar-transparent .academy-btn .cta-btn {
  --primary: #F0F6F3;
  --hover-frame-color: #F0F6F3;
}

.academy-navbar.navbar-transparent .academy-btn .cta-btn__label {
  color: #F0F6F3;
}

.academy-navbar.navbar-transparent .academy-btn .cta-btn__corners > i {
  border-color: #F0F6F3;
}

.academy-navbar.navbar-transparent .academy-btn .cta-btn__corners > i::after {
  background: #F0F6F3;
}

.academy-navbar.navbar-transparent .academy-btn .cta-btn--primary:hover {
  box-shadow: inset 2px 0 0 0 #F0F6F3, inset -2px 0 0 0 #F0F6F3;
}

.academy-navbar.navbar-transparent .academy-btn .cta-btn__torch {
  background: radial-gradient(
    120px circle at var(--mx, 50%) var(--my, 50%),
    rgba(240, 246, 243, 0.35),
    rgba(240, 246, 243, 0) 70%
  );
}

.academy-hero--dark {
  background: var(--academy-dark, #18182D);
  color: #F0F6F3;
}

.academy-hero__wrap {
  position: relative;
  z-index: 1;
}

.academy-hero__grid {
  position: absolute;
  inset: 0;
  --academy-grid-w: 300px;
  --academy-grid-h: 150px;
  --academy-grid-gap: 18px;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,
      rgba(240, 246, 243, 0.07) 0, rgba(240, 246, 243, 0.07) 1px,
      transparent 1px, transparent var(--academy-grid-gap),
      rgba(240, 246, 243, 0.07) var(--academy-grid-gap),
      rgba(240, 246, 243, 0.07) calc(var(--academy-grid-gap) + 1px),
      transparent calc(var(--academy-grid-gap) + 1px),
      transparent var(--academy-grid-w)),
    repeating-linear-gradient(to bottom,
      rgba(240, 246, 243, 0.07) 0, rgba(240, 246, 243, 0.07) 1px,
      transparent 1px, transparent var(--academy-grid-gap),
      rgba(240, 246, 243, 0.07) var(--academy-grid-gap),
      rgba(240, 246, 243, 0.07) calc(var(--academy-grid-gap) + 1px),
      transparent calc(var(--academy-grid-gap) + 1px),
      transparent var(--academy-grid-h));
  background-position: center top;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, transparent 100%);
}

.academy-hero--dark h1 {
  color: #F0F6F3;
}

.academy-hero__title {
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.08;
}

.landing-v3.academy-btn {
  display: inline-flex;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 0;
  background: transparent;
  overflow: visible;
  --hover-wash-cocoa: rgba(240, 246, 243, 0.05);
}

.academy-hero .landing-v3.academy-btn {
  --text: #F0F6F3;
}

.landing-v3.academy-btn .cta-btn--ghost-light .cta-btn__torch {
  background: radial-gradient(
    120px circle at var(--mx, 50%) var(--my, 50%),
    rgba(240, 246, 243, 0.35),
    rgba(240, 246, 243, 0) 70%
  );
}

.academy-hero__cols {
  width: 100%;
  max-width: none !important;
  padding-top: 6rem;
  padding-bottom: 3rem;
  padding-inline: clamp(2rem, 5vw, 6rem) !important;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .academy-hero__cols {
    flex-direction: row;
    align-items: stretch;
    gap: 3rem;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    padding-top: 6rem;
    padding-bottom: 2rem;
  }
  .academy-hero__text { flex: 1 1 52%; align-self: flex-start; }
  .academy-hero__cols > .academy-bento { flex: 0 0 42%; align-self: flex-end; gap: 0.5rem; }
  .academy-bento > div { padding: clamp(0.9rem, 1.8vw, 1.4rem); }
  .academy-bento__num { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .academy-bento__chip { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
}

.academy-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(0, auto);
  gap: 0.75rem;
}

.academy-bento__wide { grid-column: 1 / -1; }
.academy-bento__lang { grid-column: 1 / -1; }

.academy-bento > div {
  border: 1px solid rgba(240, 246, 243, 0.12);
  background: rgba(240, 246, 243, 0.03);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.academy-bento__stat,
.academy-bento__lang {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.academy-bento__num {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  color: #F0F6F3;
  font-variant-numeric: tabular-nums;
}

.academy-bento__label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(240, 246, 243, 0.5);
  margin-top: 0.5rem;
}

.academy-bento__wide {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.academy-bento__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(var(--academy-primary-rgb), 0.2);
  background: rgba(var(--academy-primary-rgb), 0.08);
}

.academy-bento__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(240, 246, 243, 0.2);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(240, 246, 243, 0.85);
  transition: border-color 200ms ease, background 200ms ease;
}

.academy-bento__chip:hover {
  border-color: rgba(var(--academy-primary-rgb), 0.6);
  background: rgba(var(--academy-primary-rgb), 0.12);
}

.academy-section-alt {
  background: rgba(var(--academy-primary-rgb), 0.03);
}

.academy-dark {
  background: var(--academy-dark, #18182D);
  color: #F0F6F3;
}

.academy-dark .text-base-content,
.academy-dark h2,
.academy-dark h3 {
  color: #F0F6F3;
}

.academy-dark .text-mono-50,
.academy-dark .text-mono-65 {
  color: rgba(240, 246, 243, 0.72);
}

.academy-dark .academy-eyebrow {
  color: rgba(var(--academy-primary-rgb), 1);
  filter: brightness(1.5);
}

.academy-dark hr,
.academy-dark .border-base-300 {
  border-color: rgba(240, 246, 243, 0.14);
}

.academy-course-filler,
.academy-landing-grid .product-card {
  background: var(--academy-card-bg, #FFFFFF);
}

.academy-landing-grid.product-grid {
  background: var(--academy-card-line, #E6E9EC);
  border-color: var(--academy-card-line, #E6E9EC);
}

.landing-v3 .cta-btn__torch {
  background: radial-gradient(
    120px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--academy-primary-rgb), 0.35),
    rgba(var(--academy-primary-rgb), 0) 70%
  );
}

.academy-dots {
  position: relative;
  isolation: isolate;
}

.academy-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    circle at 1.5px 1.5px,
    rgba(var(--academy-primary-rgb), 0.20) 1.5px,
    transparent 0
  );
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 95%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 95%);
}

.academy-dots--dark::before {
  background-image: radial-gradient(
    circle at 1.5px 1.5px,
    rgba(240, 246, 243, 0.10) 1.5px,
    transparent 0
  );
}
/*










 */