@tailwind base;
@tailwind components;
@tailwind utilities;

@import './components/index.css';
@import './jsmind.css';
@import './landing/fonts.css';
@import './landing/variables.css';
@import './landing/theme_v3.css';
.aa-footer-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  transition-delay: var(--aa-footer-delay, 800ms);
}
.aa-animated .aa-footer-item,
.aa-footer-item.aa-footer-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Smooth bar width transition ONLY when switching months via click.
   The .aa-transitions-ready class is added after the initial scroll-in
   animation completes, so it doesn't interfere with the JS-driven
   frame-by-frame entry animation. */
.aa-bar-grow.aa-transitions-ready {
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Footer value fade transition when switching months */
.aa-transitions-ready [data-card-footer] {
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

@keyframes aaTrendPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.aa-trend-pulse {
  animation: aaTrendPulse 600ms ease-out 800ms both;
}

/* Survey funnel — stagger entry for each step */
.aa-funnel-step {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 450ms ease-out, transform 450ms ease-out;
  transition-delay: var(--funnel-step-delay, 0ms);
}
.aa-animated .aa-funnel-step,
.aa-card-revealed .aa-funnel-step {
  opacity: 1;
  transform: translateX(0);
}
/* Hover lift on funnel step */
.aa-funnel-step {
  border-radius: 6px;
  padding: 4px 6px;
  margin: 0 -6px;
  transition: opacity 450ms ease-out, transform 450ms ease-out, background-color 200ms ease-out;
  transition-delay: var(--funnel-step-delay, 0ms), var(--funnel-step-delay, 0ms), 0ms;
}
.aa-funnel-step:hover {
  background-color: rgba(0,0,0,0.025);
}
@media (prefers-color-scheme: dark) {
  .aa-funnel-step:hover { background-color: rgba(255,255,255,0.04); }
}

/* Drop-off Hot Spots — stagger row fade-in */
.aa-hotspot-row {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms ease-out, transform 350ms ease-out, background-color 200ms ease-out;
  transition-delay: var(--row-delay, 0ms);
}
.aa-animated .aa-hotspot-row,
.aa-card-revealed .aa-hotspot-row {
  opacity: 1;
  transform: translateY(0);
}

@keyframes aaEmojiPing {
  0%   { transform: translateX(-50%) translateY(0)    scale(1); }
  50%  { transform: translateX(-50%) translateY(-9px) scale(1.12); }
  100% { transform: translateX(-50%) translateY(0)    scale(1); }
}
@keyframes aaEmojiPingSoft {
  0%   { transform: translateX(-50%) translateY(0)    scale(1); }
  50%  { transform: translateX(-50%) translateY(-3px) scale(1.04); }
  100% { transform: translateX(-50%) translateY(0)    scale(1); }
}
.aa-emoji-ping {
  animation: aaEmojiPing 600ms ease-in-out 1 both;
  animation-delay: var(--aa-emoji-ping-delay, 0ms);
}
.aa-emoji-ping-soft {
  animation: aaEmojiPingSoft 700ms ease-in-out 1 both;
  animation-delay: var(--aa-emoji-ping-soft-delay, 0ms);
}

/* Rich tooltip — fade + slide up on enter, slide on reposition. */
.aa-rich-tooltip {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 160ms ease-out,
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    left 180ms ease-out,
    top 180ms ease-out;
}
.aa-rich-tooltip[style*="opacity: 1"] {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .aa-footer-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .aa-bar-grow.aa-transitions-ready { transition: none !important; }
  .aa-transitions-ready [data-card-footer] { transition: none !important; }
  .aa-trend-pulse { animation: none !important; }
  .aa-funnel-step, .aa-hotspot-row { opacity: 1 !important; transform: none !important; transition: none !important; }
  .aa-emoji-ping { animation: none !important; }
  .aa-rich-tooltip { transform: none !important; transition: opacity 100ms linear, left 0ms, top 0ms !important; }
}
/* Analytics Rich Tooltip Styles */
.analytics-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.15s ease-out, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(6px) scale(0.97);
  transform-origin: top center;
}

.analytics-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered inner elements */
.analytics-tooltip .analytics-tooltip-main,
.analytics-tooltip .analytics-tooltip-breakdown,
.analytics-tooltip .analytics-tooltip-legend,
.analytics-tooltip .analytics-tooltip-comparison {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.analytics-tooltip .analytics-tooltip-main      { transition-delay: 0.03s; }
.analytics-tooltip .analytics-tooltip-breakdown  { transition-delay: 0.06s; }
.analytics-tooltip .analytics-tooltip-legend     { transition-delay: 0.09s; }
.analytics-tooltip .analytics-tooltip-comparison { transition-delay: 0.12s; }

.analytics-tooltip.visible .analytics-tooltip-main,
.analytics-tooltip.visible .analytics-tooltip-breakdown,
.analytics-tooltip.visible .analytics-tooltip-legend,
.analytics-tooltip.visible .analytics-tooltip-comparison {
  opacity: 1;
  transform: translateY(0);
}

/* Trend badge pop on appear */
.analytics-tooltip .analytics-tooltip-trend {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
  transform: scale(0.8);
}
.analytics-tooltip.visible .analytics-tooltip-trend {
  transform: scale(1);
}

.analytics-tooltip-content {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 14px 16px;
  min-width: 220px;
  max-width: 280px;
}

[data-theme="dark"] .analytics-tooltip-content,
[data-theme="night"] .analytics-tooltip-content,
[data-theme="business"] .analytics-tooltip-content {
  background: #1f2937;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.analytics-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.analytics-tooltip-date {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .analytics-tooltip-date,
[data-theme="night"] .analytics-tooltip-date,
[data-theme="business"] .analytics-tooltip-date {
  color: rgba(255, 255, 255, 0.5);
}

.analytics-tooltip-info-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .analytics-tooltip-info-icon,
[data-theme="night"] .analytics-tooltip-info-icon,
[data-theme="business"] .analytics-tooltip-info-icon {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
}

.analytics-tooltip-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.analytics-tooltip-value {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

[data-theme="dark"] .analytics-tooltip-value,
[data-theme="night"] .analytics-tooltip-value,
[data-theme="business"] .analytics-tooltip-value {
  color: #ffffff;
}

.analytics-tooltip-label {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .analytics-tooltip-label,
[data-theme="night"] .analytics-tooltip-label,
[data-theme="business"] .analytics-tooltip-label {
  color: rgba(255, 255, 255, 0.5);
}

.analytics-tooltip-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}

.analytics-tooltip-trend.positive {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.analytics-tooltip-trend.negative {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.analytics-tooltip-breakdown {
  margin-bottom: 12px;
}

.analytics-tooltip-breakdown-bar {
  height: 6px;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .analytics-tooltip-breakdown-bar,
[data-theme="night"] .analytics-tooltip-breakdown-bar,
[data-theme="business"] .analytics-tooltip-breakdown-bar {
  background: rgba(255, 255, 255, 0.1);
}

.analytics-tooltip-breakdown-segment {
  height: 100%;
}

.analytics-tooltip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.analytics-tooltip-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.analytics-tooltip-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.analytics-tooltip-legend-value {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}

[data-theme="dark"] .analytics-tooltip-legend-value,
[data-theme="night"] .analytics-tooltip-legend-value,
[data-theme="business"] .analytics-tooltip-legend-value {
  color: #ffffff;
}

.analytics-tooltip-comparison {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .analytics-tooltip-comparison,
[data-theme="night"] .analytics-tooltip-comparison,
[data-theme="business"] .analytics-tooltip-comparison {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.analytics-tooltip-comparison-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-bottom: 4px;
}

.analytics-tooltip-comparison-row:last-child {
  margin-bottom: 0;
}

.analytics-tooltip-comparison-label {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .analytics-tooltip-comparison-label,
[data-theme="night"] .analytics-tooltip-comparison-label,
[data-theme="business"] .analytics-tooltip-comparison-label {
  color: rgba(255, 255, 255, 0.5);
}

.analytics-tooltip-comparison-value {
  font-weight: 600;
  color: #1f2937;
}

[data-theme="dark"] .analytics-tooltip-comparison-value,
[data-theme="night"] .analytics-tooltip-comparison-value,
[data-theme="business"] .analytics-tooltip-comparison-value {
  color: #ffffff;
}

/* Accessibility — disable tooltip animations */
@media (prefers-reduced-motion: reduce) {
  .analytics-tooltip,
  .analytics-tooltip .analytics-tooltip-main,
  .analytics-tooltip .analytics-tooltip-breakdown,
  .analytics-tooltip .analytics-tooltip-legend,
  .analytics-tooltip .analytics-tooltip-comparison,
  .analytics-tooltip .analytics-tooltip-trend {
    transition: none !important;
    transform: none !important;
  }
  .analytics-tooltip.visible,
  .analytics-tooltip.visible .analytics-tooltip-main,
  .analytics-tooltip.visible .analytics-tooltip-breakdown,
  .analytics-tooltip.visible .analytics-tooltip-legend,
  .analytics-tooltip.visible .analytics-tooltip-comparison,
  .analytics-tooltip.visible .analytics-tooltip-trend {
    transform: none !important;
  }
}
/* 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);
} 
@import './buttons.css';
@import './cards.css';
@import './links.css';
@import './utilities.css';
@import './mindmap.css';
@import './analytics-tooltip.css';
@import './video-workspace.css';
@import './analytics-animations.css';
@import './preview-walkthrough.css';
/* ===================================================================
 * 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;
} 
/* Custom mindmap styling extracted from inline <style> tag */
#learning-vectors-mindmap .jmnode {
  background-color: #374151 !important;
  border-color: #374151 !important;
  color: white !important;
}

#learning-vectors-mindmap .jmnode.root {
  background-color: #111827 !important;
  border-color: #111827 !important;
  color: white !important;
}

#learning-vectors-mindmap .jmnode.selected {
  background-color: #4B5563 !important;
  border-color: #4B5563 !important;
}

#learning-vectors-mindmap .jmnode:hover {
  background-color: #4B5563 !important;
  border-color: #4B5563 !important;
}

/* Info icon styling for microlesson view */
.info-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.info-icon {
  cursor: pointer !important;
  transition: all 0.2s ease-in-out;
}

.info-icon:hover {
  transform: scale(1.1);
  color: hsl(var(--p)) !important;
}

/* Tooltip popup styling */
.tooltip-popup {
  animation: fadeIn 0.2s ease-in-out;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} 
.preview-walkthrough {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10000;
  width: 280px;
  background: #fff;
  border-radius: 14px;
  font: 13px/1.45 system-ui, -apple-system, sans-serif;
  color: #111B21;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(11, 20, 26, 0.06);
  overflow: hidden;
}
.preview-walkthrough[hidden] { display: none; }

.preview-walkthrough__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px 14px;
  border-bottom: 1px solid rgba(11, 20, 26, 0.06);
}
.preview-walkthrough__title { flex: 1; font-weight: 600; font-size: 13px; }
.preview-walkthrough__badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(18, 140, 126, 0.12);
  color: #0a7367;
  font-size: 11px;
  font-weight: 600;
  transition: background-color .25s, color .25s;
}
.preview-walkthrough--complete .preview-walkthrough__badge {
  background: #128C7E;
  color: #fff;
}
.preview-walkthrough__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #54656F;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.preview-walkthrough__btn:hover { background: rgba(11, 20, 26, 0.06); color: #111B21; }
.preview-walkthrough__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}

.preview-walkthrough__steps {
  list-style: none;
  margin: 0;
  padding: 10px 14px 14px;
  counter-reset: pwstep;
}
.preview-walkthrough__step {
  position: relative;
  padding: 8px 0 8px 30px;
  counter-increment: pwstep;
  color: #54656F;
}
.preview-walkthrough__step::before {
  content: counter(pwstep);
  position: absolute;
  left: 0;
  top: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 20, 26, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: #fff;
  transition: transform .25s cubic-bezier(.22, 1.4, .36, 1), background-color .25s, border-color .25s, color .25s, box-shadow .25s;
}
.preview-walkthrough__step--done { color: #0a7367; }
.preview-walkthrough__step--done::before {
  content: "✓";
  font-size: 13px;
  border-color: #128C7E;
  background: #128C7E;
  color: #fff;
}
.preview-walkthrough__step--current { color: #111B21; font-weight: 500; }
.preview-walkthrough__step--current::before {
  border-color: #128C7E;
  color: #128C7E;
  box-shadow: 0 0 0 4px rgba(18, 140, 126, 0.12);
}

@keyframes preview-walkthrough-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.preview-walkthrough--complete .preview-walkthrough__step--done::before {
  animation: preview-walkthrough-pop .35s ease-out both;
}
.preview-walkthrough--complete .preview-walkthrough__step:nth-child(1)::before { animation-delay: 0ms; }
.preview-walkthrough--complete .preview-walkthrough__step:nth-child(2)::before { animation-delay: 90ms; }
.preview-walkthrough--complete .preview-walkthrough__step:nth-child(3)::before { animation-delay: 180ms; }
.preview-walkthrough--complete .preview-walkthrough__step:nth-child(4)::before { animation-delay: 270ms; }
.preview-walkthrough--complete .preview-walkthrough__step:nth-child(5)::before { animation-delay: 360ms; }
.preview-walkthrough--complete .preview-walkthrough__step:nth-child(6)::before { animation-delay: 450ms; }

.preview-walkthrough-pill {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #128C7E;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(18, 140, 126, 0.35);
  transition: transform .15s, box-shadow .15s, background-color .25s;
}
.preview-walkthrough-pill:hover { transform: scale(1.05); }
.preview-walkthrough-pill[hidden] { display: none; }
.preview-walkthrough-pill--complete {
  background: #0a7367;
  animation: preview-walkthrough-pulse 1.6s ease-out 1;
}
@keyframes preview-walkthrough-pulse {
  0%   { box-shadow: 0 6px 18px rgba(18, 140, 126, 0.35), 0 0 0 0 rgba(18, 140, 126, 0.55); }
  70%  { box-shadow: 0 6px 18px rgba(18, 140, 126, 0.35), 0 0 0 16px rgba(18, 140, 126, 0); }
  100% { box-shadow: 0 6px 18px rgba(18, 140, 126, 0.35), 0 0 0 0 rgba(18, 140, 126, 0); }
}

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

@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);
} 
/* Video Workspace - Timeline, clip regions, creator controls, clip cards */

:root {
  --vw-sidebar-width: 344px;
  --vw-sidebar-gap: 16px;
  --vw-player-radius: 8px;
}

/* ── Fullscreen Video Page ──────────────────────────────── */

body.video-fullscreen-page {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.video-fullscreen-page main {
  padding: 0;
  max-width: none;
}

.video-fullscreen-container {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Floating back button */
.video-back-btn {
  position: fixed;
  top: 92px;
  left: 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.video-back-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.video-back-btn svg {
  width: 20px;
  height: 20px;
}

/* Floating title */
.video-title {
  position: fixed;
  top: 92px;
  left: 80px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  max-width: calc(100% - 120px);
}

.video-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Adjust workspace when in fullscreen mode */
.video-fullscreen-container .video-workspace {
  padding: 80px 20px 16px 20px;
  --vw-sidebar-width: 420px;
}

.video-fullscreen-container .video-workspace__player-group {
  width: calc(100% - var(--vw-sidebar-width) - var(--vw-sidebar-gap));
}

/* Limit player height so clips are visible */
.video-fullscreen-container .video-workspace__main {
  max-height: calc(100vh - 380px);
}

.video-fullscreen-container .video-workspace__player-group mux-player {
  max-height: calc(100vh - 380px);
  aspect-ratio: 16/9;
}

/* ── Workspace Container ─────────────────────────────────── */

.video-workspace {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px 20px;
}

.video-workspace__top {
  position: relative;
}

.video-workspace__player-group {
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--vw-sidebar-width) - var(--vw-sidebar-gap));
}

/* ── Sidebar (right of player) ───────────────────────────── */

.video-workspace__sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--vw-sidebar-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid oklch(var(--b3));
  border-radius: 10px;
  background: oklch(var(--b1));
  box-shadow: 0 1px 3px oklch(var(--bc) / 0.04);
}

.video-workspace__player-group mux-player {
  border-radius: var(--vw-player-radius) var(--vw-player-radius) 0 0;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
}

/* ── Clips Panel (below player) ──────────────────────────── */

.clips-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 12px;
  border-bottom: 1px solid oklch(var(--b3));
  margin-bottom: 12px;
}

.clips-panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: oklch(var(--bc));
}

.clips-panel__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.6);
}

.clips-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clips-panel__actions .btn {
  font-weight: 500;
}

.clips-panel__loading {
  text-align: center;
  padding: 32px 0;
  color: oklch(var(--bc) / 0.4);
  font-size: 13px;
}

.clips-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  height: 140px;
  color: oklch(var(--bc) / 0.35);
  font-size: 13px;
  line-height: 1.6;
}

.clips-panel__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 24px;
}

/* ── Clips Panel Tabs ─────────────────────────────────────── */

.clips-panel__tabs {
  display: flex;
  gap: 4px;
}

.clips-panel__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.5);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.clips-panel__tab:hover {
  color: oklch(var(--bc) / 0.75);
  background: oklch(var(--bc) / 0.03);
}

.clips-panel__tab:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: -2px;
}

.clips-panel__tab--active {
  color: oklch(var(--bc));
  border-bottom-color: oklch(var(--p));
}

.clips-panel__tab--active svg {
  color: oklch(var(--p));
}

.clips-panel__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.5);
}

.clips-panel__tab--active .clips-panel__tab-count {
  background: oklch(var(--p) / 0.12);
  color: oklch(var(--p));
}

.clips-panel__tab-count--ai {
  background: oklch(var(--p) / 0.1);
  color: oklch(var(--p));
}

.clips-panel__content {
  padding-top: 12px;
}

.clips-panel__content--active {
  display: block;
}

/* ── Transcript Sidebar Header ────────────────────────────── */

.transcript-sidebar__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid oklch(var(--b3));
  background: oklch(var(--b2) / 0.5);
}

.transcript-sidebar__icon {
  color: oklch(var(--bc) / 0.4);
  flex-shrink: 0;
}

.transcript-sidebar__title {
  font-size: 13px;
  font-weight: 600;
  color: oklch(var(--bc) / 0.8);
}

.transcript-panel__unavailable {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 16px;
  text-align: center;
  color: oklch(var(--bc) / 0.4);
  font-size: 13px;
}

/* ── Timeline ─────────────────────────────────────────────── */

.video-timeline-container {
  position: relative;
  margin-top: 8px;
}

.video-timeline {
  position: relative;
  height: 72px;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(0,0,0,0.04);
}

@media (max-width: 600px) {
  .video-timeline { height: 56px; }
}

.video-timeline__track {
  position: absolute;
  inset: 0;
  overflow: visible;
}

/* ── Waveform ─────────────────────────────────── */

.video-timeline__waveform {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 10px 0;
  gap: 1px;
  z-index: 1;
  overflow: hidden;
}

.video-timeline__bar {
  flex: 1 1 0;
  min-width: 1px;
  max-width: 4px;
  background: rgba(0,0,0,0.18);
  border-radius: 1px;
}

@media (max-width: 600px) {
  .video-timeline__waveform { padding: 8px 4px; }
}

/* ── Time Scale ───────────────────────────────── */

.video-timeline__scale {
  position: relative;
  height: 24px;
  margin-top: 4px;
  pointer-events: none;
}

.video-timeline__tick {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.video-timeline__tick::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: oklch(var(--bc) / 0.15);
}

.video-timeline__tick--major::before {
  width: 5px;
  height: 5px;
  background: oklch(var(--bc) / 0.25);
}

.video-timeline__tick-label {
  margin-top: 4px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 500;
  color: oklch(var(--bc) / 0.35);
  white-space: nowrap;
}

/* ── Playhead / Needle ────────────────────────── */

.video-timeline__playhead {
  position: absolute;
  top: -2px;
  bottom: -8px;
  width: 2px;
  margin-left: -1px;
  background: #182038;
  z-index: 20;
  cursor: ew-resize;
}

/* Larger hit area for easier dragging */
.video-timeline__playhead::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
}

.video-timeline__playhead::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2.5px solid #182038;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ── Hover Time Tooltip ───────────────────────── */

.video-timeline__hover-time {
  position: absolute;
  top: -34px;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: #222;
  color: #fff;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 30;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.video-timeline__hover-time::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #222;
}

.video-timeline:hover .video-timeline__hover-time {
  opacity: 1;
}

/* ── Clip Outline on Timeline ─────────────────── */

.video-timeline__clip {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 8px;
  border: 2.5px solid var(--clip-color, #3B82F6);
  background: rgba(255,255,255,0.5);
  min-width: 8px;
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.15s, background 0.15s;
}

.video-timeline__clip:hover {
  background: rgba(255,255,255,0.65);
}

.video-timeline__clip--selected {
  background: rgba(255,255,255,0.5);
}

.video-timeline__clip--playing {
  animation: clip-pulse 1.5s ease-in-out infinite;
}

@keyframes clip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* ── I/O Selection Region ─────────────────────── */

.video-timeline__selection {
  --selection-color: #4b4edc;
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 8px;
  border: 2.5px solid var(--selection-color);
  background: rgba(255,255,255,0.5);
  z-index: 5;
  pointer-events: none;
}

.video-timeline__selection--marker-only {
  border: none;
  background: none;
}

.video-timeline__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: 6;
  pointer-events: auto;
}

.video-timeline__clip .video-timeline__handle {
  background: var(--clip-color, #3B82F6);
}

.video-timeline__selection .video-timeline__handle {
  background: var(--selection-color, #4b4edc);
}

.video-timeline__handle--left {
  left: -2px;
  border-radius: 6px 2px 2px 6px;
}

.video-timeline__handle--right {
  right: -2px;
  border-radius: 2px 6px 6px 2px;
}

.video-timeline__handle-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.video-timeline__handle-dots span {
  display: flex;
  gap: 3px;
}

.video-timeline__handle-dots span::before,
.video-timeline__handle-dots span::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
}

@media (max-width: 600px) {
  .video-timeline__handle { width: 12px; }
}

/* ── Time Display ─────────────────────────────── */

.video-timeline__time-display {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 2px 0;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  color: oklch(var(--bc) / 0.5);
}

.video-timeline__time-current {
  font-weight: 600;
  color: oklch(var(--bc) / 0.75);
}

.video-timeline__time-sep {
  color: oklch(var(--bc) / 0.25);
}

/* ── Creator Controls ─────────────────────────────────────── */

.clip-creator {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid oklch(var(--b3));
}

.clip-creator__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.clip-creator__mark-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b1));
  color: oklch(var(--bc) / 0.8);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 1px 2px oklch(var(--bc) / 0.04);
}

.clip-creator__mark-btn:hover {
  background: oklch(var(--b2));
  border-color: oklch(var(--bc) / 0.15);
}

.clip-creator__mark-btn:active {
  transform: scale(0.97);
}

.clip-creator__mark-btn:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

.clip-creator__mark-btn--in.clip-creator__mark-btn--active {
  border-color: oklch(var(--su, 0.75 0.18 155));
  background: oklch(var(--su, 0.75 0.18 155) / 0.1);
  color: oklch(var(--su, 0.75 0.18 155));
  box-shadow: 0 0 0 1px oklch(var(--su, 0.75 0.18 155) / 0.1);
}

.clip-creator__mark-btn--out.clip-creator__mark-btn--active {
  border-color: oklch(var(--er, 0.65 0.25 25));
  background: oklch(var(--er, 0.65 0.25 25) / 0.1);
  color: oklch(var(--er, 0.65 0.25 25));
  box-shadow: 0 0 0 1px oklch(var(--er, 0.65 0.25 25) / 0.1);
}

.clip-creator__mark-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.clip-creator__transport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b1));
  color: oklch(var(--bc) / 0.7);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.clip-creator__transport-btn:hover {
  background: oklch(var(--b3));
  color: oklch(var(--bc));
}

.clip-creator__transport-btn:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

.clip-creator__transport-btn--playing {
  border-color: oklch(var(--su, 0.75 0.18 155));
  color: oklch(var(--su, 0.75 0.18 155));
  background: oklch(var(--su, 0.75 0.18 155) / 0.1);
}

.clip-creator__transport-btn--stop:hover {
  border-color: oklch(var(--wa, 0.75 0.15 75));
  color: oklch(var(--wa, 0.75 0.15 75));
  background: oklch(var(--wa, 0.75 0.15 75) / 0.1);
}

.clip-creator__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid oklch(var(--bc) / 0.12);
  background: oklch(var(--bc) / 0.04);
  color: oklch(var(--bc) / 0.45);
}

.clip-creator__separator {
  width: 1px;
  height: 28px;
  background: oklch(var(--b3));
  margin: 0 4px;
}

.clip-creator__clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: oklch(var(--bc) / 0.5);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.clip-creator__clear-btn:hover {
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.7);
}

.clip-creator__clear-btn svg {
  opacity: 0.7;
}

.clip-creator__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: oklch(var(--b2) / 0.5);
  border: 1px solid oklch(var(--b3));
  border-radius: 10px;
  margin-top: 4px;
}

.clip-creator__form-row {
  display: flex;
  gap: 10px;
}

.clip-creator__input {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b1));
  color: oklch(var(--bc));
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.clip-creator__input::placeholder {
  color: oklch(var(--bc) / 0.4);
}

.clip-creator__input--title {
  font-weight: 500;
}

.clip-creator__input:focus {
  outline: none;
  border-color: oklch(var(--p));
  box-shadow: 0 0 0 3px oklch(var(--p) / 0.1);
}

.clip-creator__input--error {
  border-color: oklch(var(--er, 0.65 0.25 25));
}

.clip-creator__error {
  font-size: 12px;
  color: oklch(var(--er, 0.65 0.25 25));
}

.clip-creator__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.clip-creator__save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: oklch(var(--p));
  color: oklch(var(--pc, 1 0 0));
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}

.clip-creator__save-btn:hover {
  opacity: 0.9;
}

.clip-creator__save-btn:active {
  transform: scale(0.97);
}

.clip-creator__save-btn:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

.clip-creator__save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.clip-creator__cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: oklch(var(--bc) / 0.6);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.clip-creator__cancel-btn:hover {
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.8);
}

/* ── Clips List ───────────────────────────────────────────── */

.clips-list__generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid oklch(var(--bc) / 0.15);
  background: oklch(var(--bc));
  color: oklch(var(--b1));
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.clips-list__generate-btn:hover {
  opacity: 0.85;
}

.clips-list__generate-btn:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

.clips-list__generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Clip Card ────────────────────────────────────────────── */

.clip-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  height: 100px;
  background: oklch(var(--b1));
  border-radius: 10px;
  border: 1px solid oklch(var(--b3));
  transition: border-color 0.15s, background 0.15s, box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
  box-shadow: 0 1px 3px oklch(var(--bc) / 0.04);
}

.clip-card:hover {
  background: oklch(var(--b2) / 0.7);
  border-color: oklch(var(--bc) / 0.15);
  box-shadow: 0 2px 8px oklch(var(--bc) / 0.06);
}

.clip-card--selected {
  border-color: oklch(var(--p));
  background: oklch(var(--p) / 0.04);
  box-shadow: 0 0 0 1px oklch(var(--p) / 0.1);
}

.clip-card--playing {
  border-color: oklch(var(--su, 0.75 0.18 155));
  background: oklch(var(--su, 0.75 0.18 155) / 0.06);
  box-shadow: 0 0 0 2px oklch(var(--su, 0.75 0.18 155) / 0.12);
}

.clip-card--flash {
  animation: clip-card-flash 1s ease-out;
}

@keyframes clip-card-flash {
  0% { box-shadow: 0 0 0 4px oklch(var(--su, 0.75 0.18 155) / 0.4); }
  100% { box-shadow: 0 0 0 0px oklch(var(--su, 0.75 0.18 155) / 0); }
}

/* Thumbnail wrapper with play overlay */
.clip-card__thumbnail-wrap {
  position: relative;
  width: 120px;
  flex-shrink: 0;
  align-self: stretch;
}

.clip-card__thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  background: oklch(var(--b3));
  display: block;
}

.clip-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  color: #fff;
}

.clip-card:hover .clip-card__overlay,
.clip-card--playing .clip-card__overlay--transport {
  opacity: 1;
}

/* Focus-visible states for keyboard accessibility */
.clip-card:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

.clip-card__overlay--play {
  cursor: pointer;
}

.clip-card__overlay--play:hover {
  background: rgba(0, 0, 0, 0.5);
}

.clip-card__overlay--transport {
  background: rgba(0, 0, 0, 0.5);
}

.clip-card__overlay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
}

.clip-card__overlay-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.clip-card__overlay-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.clip-card__overlay-btn--stop:hover {
  background: rgba(239, 68, 68, 0.5);
}

.clip-card__color-bar {
  width: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.clip-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Header always at top */
.clip-card__header {
  flex-shrink: 0;
}

.clip-card__title {
  font-size: 14px;
  font-weight: 600;
  color: oklch(var(--bc));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.clip-card__time {
  font-size: 12px;
  color: oklch(var(--bc) / 0.45);
  font-family: ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Content area takes remaining space */
.clip-card__content {
  flex: 1;
  min-height: 0;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clip-card__description,
.clip-card__transcript {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  cursor: default;
}

.clip-card__description {
  color: oklch(var(--bc) / 0.55);
}

.clip-card__transcript {
  color: oklch(var(--bc) / 0.4);
}

.clip-card__content-label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 18px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 6px;
  border-radius: 4px;
  background: oklch(var(--bc) / 0.1);
  color: oklch(var(--bc) / 0.6);
  white-space: nowrap;
}

.clip-card__content-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-card__transcript .clip-card__content-text {
  font-style: italic;
}

/* Tooltip for full text */
.clip-card__tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 400px;
  padding: 10px 12px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: oklch(var(--bc));
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  box-shadow: 0 4px 20px oklch(var(--bc) / 0.15);
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

.clip-card__tooltip--visible {
  opacity: 1;
  visibility: visible;
}

.clip-card__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
  opacity: 0;
  transition: opacity 0.15s;
}

:is(.clip-card:hover, .clip-card--selected, .clip-card--playing) .clip-card__actions {
  opacity: 1;
}

.clip-card__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: oklch(var(--bc) / 0.05);
  color: oklch(var(--bc) / 0.45);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.clip-card__action-btn:hover {
  background: oklch(var(--bc) / 0.1);
  color: oklch(var(--bc) / 0.8);
}

.clip-card__action-btn:active {
  transform: scale(0.92);
}

.clip-card__action-btn:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
}

.clip-card__action-btn--delete:hover {
  background: oklch(var(--er, 0.65 0.25 25) / 0.12);
  color: oklch(var(--er, 0.65 0.25 25));
}

.clip-card__action-btn--attach:hover {
  background: oklch(var(--p) / 0.12);
  color: oklch(var(--p));
}

/* ── Clip Card Inline Edit ────────────────────────────────── */

.clip-card--editing {
  height: auto;
  background: oklch(var(--b1));
  border-color: oklch(var(--p));
  box-shadow: 0 0 0 2px oklch(var(--p) / 0.12);
  padding: 14px;
  cursor: default;
}

.clip-card__edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.clip-card__edit-input {
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b2) / 0.5);
  color: oklch(var(--bc));
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.clip-card__edit-input::placeholder {
  color: oklch(var(--bc) / 0.4);
}

.clip-card__edit-input:first-child {
  font-weight: 500;
}

.clip-card__edit-input:focus {
  outline: none;
  border-color: oklch(var(--p));
  background: oklch(var(--b1));
  box-shadow: 0 0 0 3px oklch(var(--p) / 0.1);
}

.clip-card__edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.clip-card__edit-actions .btn {
  padding: 8px 16px;
  font-weight: 600;
}

.clip-card__edit-actions .btn-primary {
  gap: 6px;
}

.clip-card__edit-actions .btn-ghost {
  color: oklch(var(--bc) / 0.6);
}

.clip-card__edit-actions .btn-ghost:hover {
  color: oklch(var(--bc) / 0.8);
}

/* ── AI Generation Status ─────────────────────────────────── */

.clips-ai-status {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 0 auto;
  background: oklch(var(--b2));
  border-radius: 12px;
  border: 1px solid oklch(var(--b3));
  font-size: 12px;
  color: oklch(var(--bc) / 0.6);
  min-width: 220px;
  max-width: 280px;
}

.clips-ai-status.is-visible {
  display: flex;
}

.clips-ai-status__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid oklch(var(--p) / 0.2);
  border-top-color: oklch(var(--p));
  border-radius: 50%;
  animation: clip-spin 0.6s linear infinite;
}

.clips-ai-status__error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: oklch(var(--er, 0.65 0.25 25));
}

.clips-ai-status__error svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.clips-ai-status__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 200px;
}

.clips-ai-status__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clips-ai-status__message {
  flex: 1;
  font-size: 12px;
  color: oklch(var(--bc) / 0.7);
}

.clips-ai-status__percentage {
  font-size: 11px;
  font-weight: 600;
  color: oklch(var(--p));
  min-width: 32px;
  text-align: right;
}

.clips-ai-status__progress-bar {
  width: 100%;
  height: 4px;
  background: oklch(var(--b3));
  border-radius: 2px;
  overflow: hidden;
}

.clips-ai-status__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, oklch(var(--p)), oklch(var(--p) / 0.8));
  border-radius: 2px;
  transition: width 0.3s ease-out;
}

@keyframes clip-spin {
  to { transform: rotate(360deg); }
}

/* ── Workspace Tabs ──────────────────────────────────────── */

.workspace-tabs__nav {
  display: flex;
  flex-shrink: 0;
  background: oklch(var(--b2) / 0.5);
  border-bottom: 1px solid oklch(var(--b3));
  padding: 0;
}

.workspace-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
}

.workspace-tabs__icon {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.workspace-tabs__label {
  font-weight: 600;
}

.workspace-tabs__tab:hover {
  color: oklch(var(--bc) / 0.75);
  background: oklch(var(--bc) / 0.03);
}

.workspace-tabs__tab:focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: -2px;
}

.workspace-tabs__tab:hover .workspace-tabs__icon {
  opacity: 0.75;
}

.workspace-tabs__tab--active {
  color: oklch(var(--bc));
  border-bottom-color: oklch(var(--p));
  background: oklch(var(--b1));
}

.workspace-tabs__tab--active .workspace-tabs__icon {
  opacity: 1;
  color: oklch(var(--p));
}

.workspace-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 11px;
  background: oklch(var(--p));
  color: oklch(var(--pc, 1 0 0));
  box-shadow: 0 1px 3px oklch(var(--p) / 0.3);
}

.workspace-tabs__panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: oklch(var(--bc) / 0.15) transparent;
}

.workspace-tabs__panel::-webkit-scrollbar {
  width: 6px;
}

.workspace-tabs__panel::-webkit-scrollbar-track {
  background: transparent;
}

.workspace-tabs__panel::-webkit-scrollbar-thumb {
  background: oklch(var(--bc) / 0.12);
  border-radius: 3px;
}

.workspace-tabs__panel::-webkit-scrollbar-thumb:hover {
  background: oklch(var(--bc) / 0.25);
}

/* ── Attach Modal ────────────────────────────────────────── */

.attach-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.attach-modal.is-open {
  display: flex;
}

.attach-modal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0.4);
}

.attach-modal__content {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 16px;
  background: oklch(var(--b1));
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px oklch(0 0 0 / 0.25);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s;
}

.attach-modal.is-open .attach-modal__content {
  transform: scale(1) translateY(0);
}

.attach-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid oklch(var(--b3));
}

.attach-modal__title {
  font-size: 15px;
  font-weight: 600;
  color: oklch(var(--bc));
  margin: 0;
}

.attach-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: oklch(var(--bc) / 0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.attach-modal__close:hover {
  background: oklch(var(--b3));
  color: oklch(var(--bc));
}

.attach-modal__body {
  padding: 20px;
}

.attach-modal__clip-info {
  padding: 12px 14px;
  background: oklch(var(--b2));
  border-radius: 8px;
  border: 1px solid oklch(var(--b3));
  margin-bottom: 20px;
}

.attach-modal__clip-info h4 {
  font-size: 13px;
  font-weight: 600;
  color: oklch(var(--bc));
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.attach-modal__clip-info p {
  font-size: 12px;
  color: oklch(var(--bc) / 0.5);
  margin: 0;
  line-height: 1.4;
}

.attach-modal__clip-info p + p {
  margin-top: 2px;
}

.attach-modal__field {
  margin-bottom: 16px;
}

.attach-modal__field:last-of-type {
  margin-bottom: 0;
}

.attach-modal__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: oklch(var(--bc) / 0.5);
  margin-bottom: 6px;
}

.attach-modal__select {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  color: oklch(var(--bc));
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}

.attach-modal__select:hover {
  border-color: oklch(var(--bc) / 0.3);
}

.attach-modal__select:focus {
  outline: none;
  border-color: oklch(var(--p));
  box-shadow: 0 0 0 3px oklch(var(--p) / 0.1);
}

.attach-modal__select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.attach-modal__select option:disabled {
  color: oklch(var(--bc) / 0.35);
}

.attach-modal__warning {
  padding: 10px 12px;
  font-size: 12px;
  color: oklch(var(--wa, 0.8 0.1 85));
  background: oklch(var(--wa, 0.8 0.1 85) / 0.1);
  border: 1px solid oklch(var(--wa, 0.8 0.1 85) / 0.2);
  border-radius: 6px;
  margin-top: 16px;
}

.attach-modal__size-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: oklch(var(--wa, 0.8 0.1 85));
}

.attach-modal__size-warning svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.attach-modal__resolution {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.attach-modal__resolution-label {
  font-size: 12px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.6);
  white-space: nowrap;
}

.attach-modal__resolution-select {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid oklch(var(--bc) / 0.15);
  background: oklch(var(--b1));
  color: oklch(var(--bc));
  cursor: pointer;
}

.attach-modal__estimate {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
}

.attach-modal__estimate--ok {
  color: oklch(var(--su, 0.7 0.15 150));
}

.attach-modal__estimate--warning {
  color: oklch(var(--wa, 0.8 0.1 85));
}

.attach-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid oklch(var(--b3));
  background: oklch(var(--b2) / 0.5);
  border-radius: 0 0 12px 12px;
}

.attach-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.attach-modal__btn--cancel {
  background: transparent;
  color: oklch(var(--bc) / 0.6);
}

.attach-modal__btn--cancel:hover {
  background: oklch(var(--b3));
  color: oklch(var(--bc));
}

.attach-modal__btn--primary {
  background: oklch(var(--p));
  color: oklch(var(--pc, 1 0 0));
}

.attach-modal__btn--primary:hover:not(:disabled) {
  opacity: 0.9;
}

.attach-modal__btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.attach-modal__btn .loading {
  width: 14px;
  height: 14px;
  border: 2px solid oklch(var(--pc, 1 0 0) / 0.3);
  border-top-color: oklch(var(--pc, 1 0 0));
  border-radius: 50%;
  animation: attach-spin 0.6s linear infinite;
}

@keyframes attach-spin {
  to { transform: rotate(360deg); }
}

/* Loading state */
.attach-modal__loading {
  text-align: center;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.attach-modal__loading p {
  font-size: 13px;
  color: oklch(var(--bc) / 0.6);
  margin: 0;
}

/* Success state */
.attach-modal__success {
  text-align: center;
  padding: 24px 20px;
}

.attach-modal__success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: oklch(var(--su, 0.75 0.18 155) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(var(--su, 0.75 0.18 155));
}

.attach-modal__success h4 {
  font-size: 14px;
  font-weight: 600;
  color: oklch(var(--su, 0.75 0.18 155));
  margin: 0 0 6px 0;
}

.attach-modal__success p {
  font-size: 12px;
  color: oklch(var(--bc) / 0.5);
  margin: 0;
  line-height: 1.5;
}

.attach-modal__view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--p));
  background: oklch(var(--p) / 0.1);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.attach-modal__view-link:hover {
  background: oklch(var(--p) / 0.2);
  color: oklch(var(--p));
}

.attach-modal__view-link svg {
  flex-shrink: 0;
}

/* Progress state */
.attach-modal__progress {
  padding: 32px 20px;
  text-align: center;
}

.attach-modal__progress-bar {
  width: 100%;
  height: 6px;
  background: oklch(var(--b3));
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.attach-modal__progress-fill {
  height: 100%;
  background: oklch(var(--p));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.attach-modal__progress-text {
  font-size: 13px;
  color: oklch(var(--bc) / 0.6);
  margin: 0;
}

/* Error state */
.attach-modal__error {
  text-align: center;
  padding: 24px 20px;
}

.attach-modal__error-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: oklch(var(--er, 0.65 0.25 25) / 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(var(--er, 0.65 0.25 25));
}

.attach-modal__error h4 {
  font-size: 14px;
  font-weight: 600;
  color: oklch(var(--er, 0.65 0.25 25));
  margin: 0 0 6px 0;
}

.attach-modal__error p {
  font-size: 12px;
  color: oklch(var(--bc) / 0.5);
  margin: 0;
  line-height: 1.5;
}

/* ── Transcript Panel ────────────────────────────────────── */

.transcript-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: oklch(var(--bc) / 0.15) transparent;
}

.transcript-panel::-webkit-scrollbar {
  width: 6px;
}

.transcript-panel::-webkit-scrollbar-track {
  background: transparent;
}

.transcript-panel::-webkit-scrollbar-thumb {
  background: oklch(var(--bc) / 0.12);
  border-radius: 3px;
}

.transcript-panel::-webkit-scrollbar-thumb:hover {
  background: oklch(var(--bc) / 0.25);
}

.transcript-panel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 16px;
  text-align: center;
  color: oklch(var(--bc) / 0.4);
  font-size: 13px;
}

.transcript-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 16px;
  text-align: center;
  color: oklch(var(--bc) / 0.35);
  font-size: 13px;
}

.transcript-panel__body {
  margin: 0 -16px;
}

/* Segment rows */

.transcript-segment {
  display: flex;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.15s;
  align-items: baseline;
}

.transcript-segment:hover {
  background: oklch(var(--bc) / 0.04);
}

.transcript-segment--active {
  background: oklch(var(--p) / 0.06);
  border-left: 2px solid oklch(var(--p));
  padding-left: 14px;
}

.transcript-segment--active .transcript-segment__text {
  color: oklch(var(--bc));
  font-weight: 500;
}

.transcript-segment--active .transcript-segment__time {
  color: oklch(var(--p));
  font-weight: 600;
}

.transcript-segment__time {
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: oklch(var(--bc) / 0.3);
  flex-shrink: 0;
  line-height: 1.6;
  min-width: 32px;
}

.transcript-segment__text {
  font-size: 13px;
  color: oklch(var(--bc) / 0.6);
  line-height: 1.6;
}

/* Follow playback button */

.transcript-follow-btn {
  position: sticky;
  bottom: 8px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: oklch(var(--pc, 1 0 0));
  background: oklch(var(--p));
  border: none;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px oklch(var(--p) / 0.3);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 5;
  margin: 8px auto 0;
}

.transcript-follow-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px oklch(var(--p) / 0.35);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1023px) {
  .video-workspace {
    --vw-sidebar-width: 100%;
    --vw-sidebar-gap: 0px;
  }

  .video-workspace__player-group {
    width: 100%;
  }

  .video-workspace__sidebar {
    position: static;
    width: 100%;
    height: 360px;
    margin-top: 12px;
  }

  .video-fullscreen-container .video-workspace__player-group {
    width: 100%;
  }
}

@media (max-width: 639px) {
  .video-workspace {
    padding: 10px 12px;
  }

  .video-workspace__sidebar {
    height: 300px;
  }

  .clip-card__thumbnail-wrap,
  .clip-card__thumbnail {
    width: 80px;
    height: 54px;
  }

  .clip-creator__kbd {
    display: none;
  }

  .video-back-btn {
    width: 40px;
    height: 40px;
  }

  .video-title {
    left: 70px;
    font-size: 13px;
    padding: 8px 12px;
  }

  .video-fullscreen-container .video-workspace {
    padding: 70px 12px 10px 12px;
  }
}
/**
 * @license BSD
 * @copyright 2014-2025 hizzgdev@163.com
 *
 * Project Home:
 *   https://github.com/hizzgdev/jsmind/
 *
 * Custom styling based on Dialog app design
 */

/* ========================================
   Full-screen Mindmap Layout
   ======================================== */

/* Page body styles for full-screen mindmap */
body.mindmap-fullscreen-page {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.mindmap-fullscreen-page main {
  padding: 0;
  max-width: none;
}

/* Main container - fixed full screen (accounting for navbar ~72px) */
.mindmap-container {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  z-index: 10;
}

.mindmap-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  box-sizing: border-box;
}

#mindmap_container {
  width: 100%;
  height: 100%;
}

/* The actual jsMind canvas container */
.mindmap-canvas {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  box-shadow: none;
  overflow: visible;
  margin: 0;
  padding: 0;
}

/* Floating back button (positioned inside mindmap-container) */
.mindmap-back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mindmap-back-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.mindmap-back-btn svg {
  width: 20px;
  height: 20px;
}

/* Floating title (positioned inside mindmap-container) */
.mindmap-title {
  position: absolute;
  top: 20px;
  left: 80px;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  font-size: 14px;
}

/* ========================================
   jsMind Core Styles
   ======================================== */

.jsmind-inner {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 100%;
  outline: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.jsmind-inner::-webkit-scrollbar {
  display: none;
}

.jsmind-inner canvas {
  position: absolute;
}

svg.jsmind {
  position: absolute;
  z-index: 1;
}

canvas.jsmind {
  position: absolute;
  z-index: 1;
}

jmnodes {
  position: absolute;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0);
}

jmnode {
  position: absolute;
  cursor: pointer;
  width: 220px;
  box-sizing: border-box;
  /* Smooth position transitions when expanding/collapsing */
  transition: left 0.25s ease-out, top 0.25s ease-out, opacity 0.2s ease-out;
}

jmexpander {
  position: absolute;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1;
  padding: 0;
  margin: 0;
  text-align: center;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  cursor: pointer;
  background-color: #ffffff;
  color: #9ca3af;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Smooth transitions for position and visual changes */
  transition: left 0.25s ease-out, top 0.25s ease-out, opacity 0.2s ease-out, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

jmexpander:hover {
  background-color: oklch(var(--p));
  border-color: oklch(var(--p));
  color: oklch(var(--pc));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: scale(1.15);
}

.jmnode-overflow-wrap jmnodes {
  min-width: 420px;
}

.jmnode-overflow-hidden jmnode {
  white-space: normal;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ========================================
   Node Styling - Clean White with Colored Left Border
   Each level has a distinct color border
   ======================================== */

jmnode {
  padding: 10px 14px 10px 16px !important;
  background-color: #ffffff !important;
  color: #374151 !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  border-left: 4px solid #6b7280 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  /* Smooth transitions for position and visual properties */
  transition: left 0.25s ease-out, top 0.25s ease-out, opacity 0.2s ease-out,
              background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: normal !important;
  overflow: hidden !important;
  width: 220px !important;
  min-height: 40px !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis !important;
}

/* Line clamp only when visible - don't override jsMind's display:none */
jmnode:not([style*="display: none"]) {
  display: -webkit-box;
}

/* Depth-based left border colors - highly contrasting */
jmnode[data-depth="1"] {
  border-left-color: #2563eb !important; /* Blue */
}

jmnode[data-depth="2"] {
  border-left-color: #059669 !important; /* Green */
}

jmnode[data-depth="3"] {
  border-left-color: #d97706 !important; /* Orange */
}

jmnode[data-depth="4"] {
  border-left-color: #dc2626 !important; /* Red */
}

jmnode[data-depth="5"],
jmnode[data-depth="6"],
jmnode[data-depth="7"],
jmnode[data-depth="8"] {
  border-left-color: #7c3aed !important; /* Purple */
}

jmnode:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px);
}

jmnode.selected {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}

/* Root node - same base style but with emphasis to stand out as central node */
jmnode.root,
jmnode[data-depth="0"] {
  font-size: 15px;
  font-weight: 600;
  padding: 14px 18px 14px 20px !important;
  width: 260px !important;
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1.5px solid #d1d5db !important;
  /* Thicker left border for emphasis */
  border-left: 6px solid #374151 !important;
  /* Elevated shadow effect - makes it "float" above other nodes */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

jmnode.root:hover,
jmnode[data-depth="0"]:hover {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
  border-left-color: #1f2937 !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.12),
    0 2px 4px -2px rgba(0, 0, 0, 0.1),
    0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

jmnode.root.selected,
jmnode[data-depth="0"].selected {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-color: #3b82f6 !important;
  border-left: 6px solid #2563eb !important;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.25),
    0 4px 6px -1px rgba(59, 130, 246, 0.15),
    0 10px 15px -3px rgba(59, 130, 246, 0.1) !important;
}

/* Level badges - positioned near the branch connection */
.node-level-badge {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  color: white;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.node-level-badge[data-level="1"] { background-color: #6b7280; }
.node-level-badge[data-level="2"] { background-color: #9ca3af; }
.node-level-badge[data-level="3"] { background-color: #d1d5db; color: #6b7280; }
.node-level-badge[data-level="4"] { background-color: #e5e7eb; color: #9ca3af; }
.node-level-badge[data-level="5"],
.node-level-badge[data-level="6"],
.node-level-badge[data-level="7"],
.node-level-badge[data-level="8"] { background-color: #f3f4f6; color: #9ca3af; }

/* ========================================
   Theme Overrides - Apply Clean White with Colored Borders
   ======================================== */

/* Override all themes to use clean white with colored left border */
jmnodes[class*="theme-"] jmnode {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-left: 4px solid #6b7280 !important;
  color: #374151 !important;
}

jmnodes[class*="theme-"] jmnode[data-depth="1"] { border-left-color: #6b7280 !important; }
jmnodes[class*="theme-"] jmnode[data-depth="2"] { border-left-color: #9ca3af !important; }
jmnodes[class*="theme-"] jmnode[data-depth="3"] { border-left-color: #d1d5db !important; }
jmnodes[class*="theme-"] jmnode[data-depth="4"] { border-left-color: #e5e7eb !important; }
jmnodes[class*="theme-"] jmnode[data-depth="5"],
jmnodes[class*="theme-"] jmnode[data-depth="6"],
jmnodes[class*="theme-"] jmnode[data-depth="7"],
jmnodes[class*="theme-"] jmnode[data-depth="8"] { border-left-color: #f3f4f6 !important; }

jmnodes[class*="theme-"] jmnode:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

jmnodes[class*="theme-"] jmnode.selected {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-color: #3b82f6 !important;
}

jmnodes[class*="theme-"] jmnode.root,
jmnodes[class*="theme-"] jmnode[data-depth="0"] {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1.5px solid #d1d5db !important;
  border-left: 6px solid #374151 !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

jmnodes[class*="theme-"] jmnode.root.selected,
jmnodes[class*="theme-"] jmnode[data-depth="0"].selected {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-color: #3b82f6 !important;
  border-left: 6px solid #2563eb !important;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.25),
    0 4px 6px -1px rgba(59, 130, 246, 0.15),
    0 10px 15px -3px rgba(59, 130, 246, 0.1) !important;
}

/* Node with microlesson generated (orange/warning border) */
jmnodes[class*="theme-"] jmnode.has-microlesson {
  border-left-color: #FBBD23 !important;
}

/* Node with content added to course (green/success border) */
jmnodes[class*="theme-"] jmnode.added-to-course {
  border-left-color: #22c55e !important;
}

/* ========================================
   Node Badges (iOS-style notification badges)
   ======================================== */

.node-badge {
  position: absolute;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 100;
  pointer-events: auto;
  cursor: default;
}

/* CSS tooltip for node badges — works on macOS, Windows, and Linux */
.node-badge[data-tooltip] {
  position: absolute;
}

.node-badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 200;
}

.node-badge[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 200;
}

.node-badge[data-tooltip]:hover::after,
.node-badge[data-tooltip]:hover::before {
  opacity: 1;
}


.node-badge-warning {
  background: #FBBD23;
  color: #ffffff;
  border: 1px solid #f59e0b;
  box-shadow: 0 1px 3px rgba(251, 189, 35, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-badge-processing {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.node-badge-neutral {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-badge-loading {
  background: #ffffff;
  border: 1px solid oklch(var(--p) / 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-badge-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid oklch(var(--p) / 0.2);
  border-top-color: oklch(var(--p));
  border-radius: 50%;
  animation: node-badge-spin 0.8s linear infinite;
}

@keyframes node-badge-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Success badge for checkmark icon (used after generation) */
.node-badge-success:has(.node-badge-icon) {
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc) / 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 2px;
  min-width: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: node-badge-pop 0.3s ease-out;
}

/* Success badge for number (used when all goals added to course) */
.node-badge-success:not(:has(.node-badge-icon)) {
  background: #22c55e;
  color: #ffffff;
  border: 1px solid #16a34a;
  box-shadow: 0 1px 3px rgba(34, 197, 94, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-badge-success:has(.node-badge-icon) .node-badge-icon {
  width: 18px;
  height: 18px;
  color: oklch(var(--bc)) !important;
  stroke: oklch(var(--bc)) !important;
}

@keyframes node-badge-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========================================
   Mobile Responsive
   ======================================== */

@media screen and (max-device-width: 1024px) {
  jmnode {
    padding: 8px 12px;
    font-size: 13px;
    max-width: 200px;
  }

  jmnode.root {
    font-size: 15px;
    padding: 10px 14px;
    max-width: 250px;
  }

  .mindmap-back-btn {
    width: 40px;
    height: 40px;
  }

  .mindmap-title {
    left: 70px;
    font-size: 13px;
    padding: 8px 16px;
  }
}

/* ========================================
   Legacy Theme Definitions (for compatibility)
   ======================================== */

/* primary theme */
jmnodes.theme-primary jmnode {
  background-color: #428bca;
  color: #fff;
  border-color: #357ebd;
}
jmnodes.theme-primary jmnode:hover {
  background-color: #3276b1;
  border-color: #285e8e;
}
jmnodes.theme-primary jmnode.selected {
  background-color: #f1c40f;
  color: #fff;
}

/* warning theme */
jmnodes.theme-warning jmnode {
  background-color: #f0ad4e;
  border-color: #eea236;
  color: #fff;
}
jmnodes.theme-warning jmnode:hover {
  background-color: #ed9c28;
  border-color: #d58512;
}
jmnodes.theme-warning jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* danger theme */
jmnodes.theme-danger jmnode {
  background-color: #d9534f;
  border-color: #d43f3a;
  color: #fff;
}
jmnodes.theme-danger jmnode:hover {
  background-color: #d2322d;
  border-color: #ac2925;
}
jmnodes.theme-danger jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* success theme */
jmnodes.theme-success jmnode {
  background-color: #5cb85c;
  border-color: #4cae4c;
  color: #fff;
}
jmnodes.theme-success jmnode:hover {
  background-color: #47a447;
  border-color: #398439;
}
jmnodes.theme-success jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* info theme */
jmnodes.theme-info jmnode {
  background-color: #5dc0de;
  border-color: #46b8da;
  color: #fff;
}
jmnodes.theme-info jmnode:hover {
  background-color: #39b3d7;
  border-color: #269abc;
}
jmnodes.theme-info jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* greensea theme */
jmnodes.theme-greensea jmnode {
  background-color: #1abc9c;
  color: #fff;
}
jmnodes.theme-greensea jmnode:hover {
  background-color: #16a085;
}
jmnodes.theme-greensea jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* nephrite theme */
jmnodes.theme-nephrite jmnode {
  background-color: #2ecc71;
  color: #fff;
}
jmnodes.theme-nephrite jmnode:hover {
  background-color: #27ae60;
}
jmnodes.theme-nephrite jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* belizehole theme */
jmnodes.theme-belizehole jmnode {
  background-color: #3498db;
  color: #fff;
}
jmnodes.theme-belizehole jmnode:hover {
  background-color: #2980b9;
}
jmnodes.theme-belizehole jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* wisteria theme */
jmnodes.theme-wisteria jmnode {
  background-color: #9b59b6;
  color: #fff;
}
jmnodes.theme-wisteria jmnode:hover {
  background-color: #8e44ad;
}
jmnodes.theme-wisteria jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* asphalt theme */
jmnodes.theme-asphalt jmnode {
  background-color: #34495e;
  color: #fff;
}
jmnodes.theme-asphalt jmnode:hover {
  background-color: #2c3e50;
}
jmnodes.theme-asphalt jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* orange theme */
jmnodes.theme-orange jmnode {
  background-color: #f1c40f;
  color: #fff;
}
jmnodes.theme-orange jmnode:hover {
  background-color: #f39c12;
}
jmnodes.theme-orange jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* pumpkin theme */
jmnodes.theme-pumpkin jmnode {
  background-color: #e67e22;
  color: #fff;
}
jmnodes.theme-pumpkin jmnode:hover {
  background-color: #d35400;
}
jmnodes.theme-pumpkin jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* pomegranate theme */
jmnodes.theme-pomegranate jmnode {
  background-color: #e74c3c;
  color: #fff;
}
jmnodes.theme-pomegranate jmnode:hover {
  background-color: #c0392b;
}
jmnodes.theme-pomegranate jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* clouds theme */
jmnodes.theme-clouds jmnode {
  background-color: #ecf0f1;
  color: #333;
}
jmnodes.theme-clouds jmnode:hover {
  background-color: #bdc3c7;
}
jmnodes.theme-clouds jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* asbestos theme */
jmnodes.theme-asbestos jmnode {
  background-color: #95a5a6;
  color: #fff;
}
jmnodes.theme-asbestos jmnode:hover {
  background-color: #7f8c8d;
}
jmnodes.theme-asbestos jmnode.selected {
  background-color: #11f;
  color: #fff;
}

/* ========================================
   Drag and Drop Styles (for lesson plan)
   ======================================== */

.lesson-plan-item {
  transition: all 0.2s ease;
}

.lesson-plan-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lesson-plan-item.dragging {
  opacity: 0.5;
  background-color: var(--b3);
}

.lesson-plan-item.drag-over {
  border-top: 2px solid var(--primary);
}

/* ========================================
   Combined Node Panel (Left + Right)
   ======================================== */

.node-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 85vw;
  height: 90vh;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 120px);
  border-radius: 12px;
  z-index: 1003;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.node-panel.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Backdrop with blur - separate element */
.node-panel-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  z-index: 1002;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.node-panel-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.node-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

/* Left Side - Node Info & Goals */
.node-panel-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.node-panel-ug-info {
  font-size: 14px;
  line-height: 1.7;
  color: oklch(var(--bc) / 0.5);
  text-align: center;
  width: 100%;
  padding: 0 24px;
}

.node-panel-ug-info p.font-medium {
  font-size: 15px;
  text-align: center;
  margin-bottom: 4px;
}

.node-panel-ug-info ul {
  margin: 12px 0 0;
  padding-left: 20px;
  list-style: disc;
}

.node-panel-ug-info li {
  margin-bottom: 8px;
}

.node-panel-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: oklch(var(--p));
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.15s ease;
}

.node-panel-action-link:hover {
  color: oklch(var(--p) / 0.7);
  text-decoration: underline;
}

.node-panel-action-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.node-panel-left-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  border-top: 1px solid oklch(var(--b3));
}

.node-panel-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.node-panel-header {
  padding: 16px 24px;
}

.node-panel-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
}

.node-panel-description {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
  color: oklch(var(--bc) / 0.6);
}

.node-panel-description.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.node-panel-description-toggle {
  display: inline;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--p));
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px solid oklch(var(--p) / 0.3);
  padding: 2px 0;
  margin-top: 4px;
  transition: all 0.15s ease;
}

.node-panel-description-toggle:hover {
  color: oklch(var(--p) / 0.8);
  border-bottom-color: oklch(var(--p) / 0.6);
}

.node-panel-section {
  flex-shrink: 0;
}

.node-panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.node-panel-chat {
  padding: 12px 20px;
}

.node-panel-goals-section {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.node-panel-goals-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--bc) / 0.4);
  padding: 10px 16px 4px;
}

.node-panel-goals {
  flex: 1;
  padding: 8px 12px;
  overflow-y: auto;
}

.node-panel-goals::-webkit-scrollbar {
  width: 6px;
}

.node-panel-goals::-webkit-scrollbar-track {
  background: transparent;
}

.node-panel-goals::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.node-panel-goal-wrapper {
  position: relative;
  margin-bottom: 8px;
}

.node-panel-goal-wrapper .node-panel-goal {
  margin-bottom: 0;
}

.node-panel-goal-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: oklch(var(--bc) / 0.3);
  cursor: pointer;
  transition: all 0.15s ease;
}

.node-panel-goal-wrapper:hover .node-panel-goal-delete {
  display: flex;
}

.node-panel-goal-delete:hover {
  background: oklch(var(--er) / 0.1);
  color: oklch(var(--er));
}

.node-panel-goal-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: oklch(var(--b1) / 0.95);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  border: 1px solid oklch(var(--er) / 0.2);
  z-index: 10;
}

.node-panel-goal-confirm p {
  font-size: 13px;
  color: oklch(var(--bc) / 0.7);
  margin: 0;
}

.node-panel-goal-confirm-actions {
  display: flex;
  gap: 6px;
}

.node-panel-goal-confirm-btn {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.node-panel-goal-confirm-btn.cancel {
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.6);
}

.node-panel-goal-confirm-btn.cancel:hover {
  background: oklch(var(--bc) / 0.15);
}

.node-panel-goal-confirm-btn.delete {
  background: oklch(var(--er) / 0.1);
  color: oklch(var(--er));
}

.node-panel-goal-confirm-btn.delete:hover {
  background: oklch(var(--er) / 0.2);
}

.node-panel-goal {
  display: block;
  width: 100%;
  padding: 12px 36px 12px 16px;
  background: oklch(var(--b1));
  margin-bottom: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.2s ease;
}

.node-panel-goal:hover {
  background: rgba(0, 0, 0, 0.03);
}

.node-panel-goal.is-selected {
  background: oklch(var(--p) / 0.1);
  border-left: 3px solid oklch(var(--p));
  padding-left: 13px;
}

.node-panel-goal-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.node-panel-goal-text {
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc));
  line-height: 1.4;
}

.node-panel-goal-description {
  font-size: 12px;
  color: oklch(var(--bc) / 0.6);
  line-height: 1.4;
}

.node-panel-goal-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 6px;
  align-self: flex-start;
}

.node-panel-goal-badge.badge-beginner {
  background: oklch(var(--su) / 0.15);
  color: oklch(var(--su));
}

.node-panel-goal-badge.badge-intermediate {
  background: oklch(var(--wa) / 0.15);
  color: oklch(var(--wa));
}

.node-panel-goal-badge.badge-advanced {
  background: oklch(var(--er) / 0.15);
  color: oklch(var(--er));
}

/* Tags container */
.node-panel-goal-tags {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 8px;
}

/* Generated Tag (orange/warning = microlesson generated but not added to course) */
.node-panel-goal-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: oklch(var(--wa) / 0.15);
  color: oklch(var(--wa));
  flex-shrink: 0;
}

/* Added Tag (green/success = content added to course) */
.node-panel-goal-tag-added {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: oklch(var(--su) / 0.15);
  color: oklch(var(--su));
  flex-shrink: 0;
}

/* Edited Tag (primary/blue = microlesson edited by human) */
.node-panel-goal-tag-edited {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: oklch(var(--p) / 0.15);
  color: oklch(var(--p));
  flex-shrink: 0;
}

/* Generating Tag (blue/primary = microlesson generation in progress) */
.node-panel-goal-tag-generating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: oklch(var(--p) / 0.15);
  color: oklch(var(--p));
  flex-shrink: 0;
}

.node-panel-goal-spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid oklch(var(--p) / 0.3);
  border-top-color: oklch(var(--p));
  border-radius: 50%;
  animation: goal-spinner-spin 0.8s linear infinite;
}

@keyframes goal-spinner-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Goal with generation in progress */
.node-panel-goal.is-generating {
  border-left: 3px solid oklch(var(--p));
  padding-left: 13px;
}

.node-panel-goal.has-generated {
  border-left: 3px solid oklch(var(--wa));
  padding-left: 13px;
}

.node-panel-goal.has-edited {
  border-left: 3px solid oklch(var(--p));
  padding-left: 13px;
}

.node-panel-goal.added-to-course {
  border-left: 3px solid oklch(var(--su));
  padding-left: 13px;
}

/* Keep original border colors when selected */
.node-panel-goal.has-generated.is-selected {
  border-left-color: oklch(var(--wa));
}

.node-panel-goal.has-edited.is-selected {
  border-left-color: oklch(var(--p));
}

.node-panel-goal.added-to-course.is-selected {
  border-left-color: oklch(var(--su));
}

/* Custom goal footer */
.node-panel-goals-footer {
  border-top: 1px solid oklch(var(--bc) / 0.08);
  padding: 6px 12px;
}

/* Custom goal link */
.node-panel-custom-goal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  color: oklch(var(--bc) / 0.5);
  padding: 4px 10px;
  border-radius: 999px;
  transition: all 0.15s ease;
}

.node-panel-custom-goal-link:hover {
  color: oklch(var(--p));
  background: oklch(var(--p) / 0.08);
  text-decoration: underline;
}

.custom-goal-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.custom-goal-icon > svg:first-child {
  width: 20px;
  height: 20px;
}

.custom-goal-plus {
  position: absolute;
  top: -3px;
  right: -5px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.node-panel-chat-btn:hover .custom-goal-plus {
  background: transparent;
}

.node-panel-empty-state {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 32px 12px;
  text-align: center;
  height: 100%;
}

.node-panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.node-panel-loading.hidden {
  display: none !important;
}

/* Created Content View - Shows lessons and course items created from a goal */
.created-content-lesson {
  margin-bottom: 12px;
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  overflow: hidden;
}

.created-content-lesson-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: oklch(var(--su) / 0.08);
  border-bottom: 1px solid oklch(var(--b3));
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}

.created-content-lesson-header:hover {
  background: oklch(var(--su) / 0.15);
}

.created-content-lesson-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.created-content-lesson-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--su));
  background: oklch(var(--su) / 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.created-content-lesson-name {
  font-weight: 600;
  font-size: 14px;
  color: oklch(var(--bc));
}

.created-content-lesson-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: oklch(var(--bc) / 0.5);
}

.created-content-lesson-count {
  font-size: 12px;
}

.created-content-items {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.created-content-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: oklch(var(--b2));
  transition: all 0.2s ease;
}

.created-content-item:hover {
  background: oklch(var(--b3));
}

.created-content-item-position {
  font-size: 11px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.4);
  flex-shrink: 0;
}

.created-content-item-text {
  flex: 1;
  font-size: 13px;
  color: oklch(var(--bc) / 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.created-content-item-kind {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: oklch(var(--b3));
  color: oklch(var(--bc) / 0.6);
  flex-shrink: 0;
}

.created-content-remaining-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: oklch(var(--p));
  background: oklch(var(--p) / 0.06);
  border: 1px dashed oklch(var(--p) / 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.created-content-remaining-btn:hover {
  background: oklch(var(--p) / 0.12);
  border-color: oklch(var(--p) / 0.5);
}

.node-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.node-panel-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.6);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.node-panel-back-link:hover {
  color: oklch(var(--p));
}

.node-panel-goal-info {
  padding: 14px 16px;
  border-bottom: 1px solid oklch(var(--b3));
}

.node-panel-goal-info.hidden {
  display: none !important;
}

.node-panel-goal-info-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.node-panel-goal-statement {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: oklch(var(--bc) / 0.55);
  flex: 1;
}

.node-panel-microlesson-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: oklch(var(--bc));
}


.node-panel-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  background: oklch(var(--su) / 0.1);
  color: oklch(var(--su));
  border-bottom: 1px solid oklch(var(--b3));
}

.node-panel-status.hidden {
  display: none !important;
}

.node-panel-microlesson-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  min-height: 0; /* Important for flex scroll */
}

.node-panel-microlesson-empty,
.node-panel-microlesson-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.node-panel-microlesson-empty.hidden,
.node-panel-microlesson-loading.hidden {
  display: none !important;
}

.node-panel-microlesson-items {
  display: block;
}

.node-panel-microlesson-items.hidden {
  display: none !important;
}

/* Section Label */
.node-panel-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--bc) / 0.6);
  border-bottom: 1px solid oklch(var(--b3));
  background: oklch(var(--b2));
}

.node-panel-section-label svg {
  color: oklch(var(--p));
}

/* Microlesson Vector Cards */
.microlesson-vector {
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.microlesson-vector-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: oklch(var(--b2));
  transition: background 0.15s ease;
}

.microlesson-vector-header:hover {
  background: oklch(var(--b3));
}

.microlesson-vector-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.microlesson-vector-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.microlesson-vector-chevron {
  width: 14px;
  height: 14px;
  color: oklch(var(--bc) / 0.5);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.microlesson-vector-chevron.is-expanded {
  transform: rotate(90deg);
}

.microlesson-vector-name {
  font-size: 13px;
  font-weight: 600;
  color: oklch(var(--bc));
}

.microlesson-vector-count {
  font-size: 11px;
  color: oklch(var(--bc) / 0.5);
}

.microlesson-vector-content {
  padding: 0;
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.microlesson-vector-content.is-collapsed {
  max-height: 0;
  padding: 0;
}

/* Microlesson Items */
.microlesson-item {
  padding: 10px 12px;
  border-top: 1px solid oklch(var(--b3));
  transition: box-shadow 0.3s ease;
}

@keyframes violation-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px oklch(var(--wa) / 0.6); }
  50% { box-shadow: inset 0 0 0 2px oklch(var(--wa)), 0 0 12px oklch(var(--wa) / 0.25); }
}
.microlesson-item.is-violation-highlight {
  animation: violation-pulse 0.6s ease 3;
  background: oklch(var(--wa) / 0.06);
  border-radius: 6px;
}

.microlesson-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.microlesson-item-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.microlesson-item-icon {
  width: 14px;
  height: 14px;
  color: oklch(var(--p));
  flex-shrink: 0;
}

.microlesson-item-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: oklch(var(--bc) / 0.5);
}

.microlesson-item-content {
  font-size: 13px;
  line-height: 1.5;
  color: oklch(var(--bc) / 0.8);
}

.microlesson-item-content.is-truncated {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.microlesson-item-content.is-expanded {
  display: block;
}

.microlesson-item-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.microlesson-item-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  background: oklch(var(--b2) / 0.5);
  border: 1px solid oklch(var(--bc) / 0.08);
}

.microlesson-item-option.is-correct {
  background: oklch(var(--su) / 0.08);
  border-color: oklch(var(--su) / 0.2);
}

.microlesson-item-option-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.6);
  flex-shrink: 0;
}

.microlesson-item-option.is-correct .microlesson-item-option-label {
  background: oklch(var(--su) / 0.15);
  color: oklch(var(--su));
}

.microlesson-item-option-text {
  flex: 1;
  color: oklch(var(--bc) / 0.8);
  cursor: pointer;
}

.microlesson-item-option-text:hover {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
}

.microlesson-item-option.is-too-long {
  background: oklch(var(--er) / 0.06);
  border-color: oklch(var(--er) / 0.3);
}

.microlesson-item-option.is-too-long .microlesson-item-option-label {
  background: oklch(var(--er) / 0.15);
  color: oklch(var(--er));
}

.microlesson-item-option-charcount {
  font-size: 10px;
  font-weight: 600;
  color: oklch(var(--er));
  flex-shrink: 0;
  margin-left: auto;
}

.microlesson-item-option-charcount.is-ok {
  color: oklch(var(--bc) / 0.35);
}

.microlesson-item-option-input {
  flex: 1;
  font-size: 12px;
  line-height: 1.4;
  padding: 1px 4px;
  border: 1px solid oklch(var(--p) / 0.4);
  border-radius: 4px;
  background: oklch(var(--b1));
  color: oklch(var(--bc) / 0.9);
  outline: none;
}

.microlesson-item-option-input:focus {
  border-color: oklch(var(--p) / 0.6);
  box-shadow: 0 0 0 2px oklch(var(--p) / 0.1);
}

.microlesson-item-option-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: oklch(var(--er));
  background: oklch(var(--er) / 0.06);
  border: 1px solid oklch(var(--er) / 0.2);
}

.microlesson-item.is-content-too-long {
  border-left: 3px solid oklch(var(--er));
}

.microlesson-item-content-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: oklch(var(--er));
  background: oklch(var(--er) / 0.06);
  border: 1px solid oklch(var(--er) / 0.2);
}

.microlesson-item-content[data-action*="editContent"] {
  cursor: pointer;
}

.microlesson-item-content[data-action*="editContent"]:hover {
  background: oklch(var(--bc) / 0.03);
  border-radius: 6px;
}

.microlesson-item-content-input {
  width: 100%;
  min-height: 80px;
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 8px;
  border: 1px solid oklch(var(--p) / 0.4);
  border-radius: 6px;
  background: oklch(var(--b1));
  color: oklch(var(--bc) / 0.9);
  outline: none;
  resize: vertical;
  font-family: inherit;
}

.microlesson-item-content-input:focus {
  border-color: oklch(var(--p) / 0.6);
  box-shadow: 0 0 0 2px oklch(var(--p) / 0.1);
}

.microlesson-item-content-charcount {
  font-size: 10px;
  font-weight: 600;
  color: oklch(var(--er));
  text-align: right;
  margin-top: 4px;
}

.microlesson-item-content-charcount.is-ok {
  color: oklch(var(--bc) / 0.35);
}

.microlesson-item.is-added-to-course {
  border-left: 3px solid oklch(var(--su));
  opacity: 0.65;
}

.microlesson-item.is-added-to-course .microlesson-item-checkbox input {
  pointer-events: none;
}

.microlesson-item.is-added-to-course .microlesson-item-option-text {
  cursor: default;
}

.microlesson-item.is-added-to-course .microlesson-item-option-text:hover {
  text-decoration: none;
}

.microlesson-item-added-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: oklch(var(--su));
  background: oklch(var(--su) / 0.1);
  border: 1px solid oklch(var(--su) / 0.2);
  margin-left: auto;
}

.microlesson-item-edited-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: oklch(var(--wa));
  background: oklch(var(--wa) / 0.1);
  border: 1px solid oklch(var(--wa) / 0.2);
}

.microlesson-item-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 500;
  color: oklch(var(--p));
  cursor: pointer;
  transition: color 0.15s ease;
}

.microlesson-item-toggle:hover {
  color: oklch(var(--pf));
}

.microlesson-item-toggle svg {
  transition: transform 0.2s ease;
}

.microlesson-item-toggle.is-expanded svg {
  transform: rotate(180deg);
}

/* Chat Button - Block/Card Style */
.node-panel-chat-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc) / 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.node-panel-chat-btn:hover {
  background: oklch(var(--p) / 0.08);
  border-color: oklch(var(--p) / 0.2);
  transform: translateY(-1px);
}

.node-panel-chat-btn.is-active {
  background: oklch(var(--p) / 0.1);
  border-color: oklch(var(--p) / 0.3);
}

.node-panel-chat-icon {
  color: oklch(var(--p));
}

.node-panel-chat-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.node-panel-chat-title {
  font-size: 13px;
  font-weight: 600;
  color: oklch(var(--bc));
}

/* Right panel views (microlesson / chat) */
.node-panel-right-view {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  height: 100%;
}

.node-panel-right-view.is-active {
  display: flex;
}

/* Node Chat */
.node-chat-messages-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.node-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node-chat-scroll-btn {
  position: absolute;
  bottom: 12px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--bc) / 0.2);
  box-shadow: 0 2px 6px oklch(var(--bc) / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: oklch(var(--bc) / 0.5);
  transition: all 0.15s ease;
  z-index: 5;
}

.node-chat-scroll-btn:hover {
  background: oklch(var(--b2));
  color: oklch(var(--bc));
  box-shadow: 0 2px 12px oklch(var(--bc) / 0.15);
}

.node-chat-scroll-btn.hidden {
  display: none;
}

/* Chat welcome state */
.node-chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 32px 16px;
  color: oklch(var(--bc) / 0.4);
}

/* Message row, full width, controls alignment */
.node-chat-row {
  display: flex;
  width: 100%;
}

.node-chat-row--user {
  justify-content: flex-end;
  padding-left: 15%;
}

.node-chat-row--assistant {
  justify-content: flex-start;
  padding-right: 15%;
}

.node-chat-row--error {
  justify-content: center;
}

/* Message bubble, follows helpdesk pattern */
.node-chat-bubble {
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 1px 2px oklch(var(--bc) / 0.08);
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.node-chat-bubble--user {
  background: oklch(var(--p));
  color: oklch(var(--pc));
}

.node-chat-bulb-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.65;
}

.node-chat-bulb-badge svg {
  opacity: 0.8;
}

.node-chat-bubble--assistant {
  background: oklch(var(--b3));
  color: oklch(var(--bc));
}

.node-chat-bubble ul {
  margin: 4px 0;
  padding-left: 16px;
  list-style: disc;
}

.node-chat-bubble li {
  margin: 2px 0;
}

.node-chat-bubble--error {
  background: oklch(var(--er) / 0.1);
  border: 1px solid oklch(var(--er) / 0.2);
  color: oklch(var(--er));
  font-size: 0.75rem;
  box-shadow: none;
}

/* Typing indicator */
.node-chat-typing .node-chat-bubble {
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  min-height: auto;
}

/* Suggested goals inside chat */
.node-chat-goals-bubble {
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: 0 1px 2px oklch(var(--bc) / 0.08);
  background: oklch(0.97 0.02 75);
  color: oklch(var(--bc));
}

.node-chat-goals-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid oklch(0.90 0.03 75 / 0.4);
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(0.55 0.05 75);
}

.node-chat-goal-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: oklch(var(--b1) / 0.6);
  border: 1px solid oklch(var(--bc) / 0.06);
  border-radius: 6px;
  transition: all 0.15s ease;
}

.node-chat-goal-card:last-child {
  margin-bottom: 0;
}

.node-chat-goal-card:hover {
  background: oklch(var(--b1));
  border-color: oklch(var(--bc) / 0.1);
}

.node-chat-goal-card.is-added {
  background: oklch(var(--su) / 0.06);
  border-color: oklch(var(--su) / 0.2);
}

.node-chat-goal-card.is-deleted {
  background: oklch(var(--bc) / 0.03);
  border-color: oklch(var(--bc) / 0.1);
  opacity: 0.7;
}

.node-chat-goal-card-content {
  flex: 1;
  min-width: 0;
}

.node-chat-goal-card-title {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: oklch(var(--bc) / 0.9);
}

.node-chat-goal-card-desc {
  font-size: 0.7rem;
  line-height: 1.4;
  color: oklch(var(--bc) / 0.55);
  margin-top: 2px;
}

/* Context memory indicator */
.node-chat-context-memory {
  text-align: center;
  font-size: 0.7rem;
  font-style: italic;
  color: oklch(var(--bc) / 0.35);
  padding: 8px 16px;
}

/* Date separator */
.node-chat-date-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin: 4px 0;
}

.node-chat-date-separator::before,
.node-chat-date-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: oklch(var(--bc) / 0.12);
}

.node-chat-date-separator span {
  font-size: 0.65rem;
  color: oklch(var(--bc) / 0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Character limit balloon */
.node-chat-char-balloon {
  position: absolute;
  bottom: 100%;
  right: 12px;
  margin-bottom: 6px;
  background: oklch(var(--n));
  color: oklch(var(--nc));
  font-size: 0.7rem;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.15);
  animation: balloon-pop 0.15s ease-out;
}

.node-chat-char-balloon::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 16px;
  border: 5px solid transparent;
  border-top-color: oklch(var(--n));
}

.node-chat-char-balloon--warn {
  background: oklch(var(--wa));
  color: oklch(var(--wac));
}

.node-chat-char-balloon--warn::after {
  border-top-color: oklch(var(--wa));
}

.node-chat-char-balloon--error {
  background: oklch(var(--er));
  color: oklch(var(--erc));
}

.node-chat-char-balloon--error::after {
  border-top-color: oklch(var(--er));
}

.node-chat-char-balloon--fade {
  animation: balloon-fade 0.3s ease-out forwards;
}

@keyframes balloon-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes balloon-fade {
  to { opacity: 0; transform: translateY(4px); }
}

.node-chat-welcome-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.node-chat-welcome-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: oklch(var(--p));
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px solid oklch(var(--p) / 0.3);
  padding: 2px 0;
  transition: all 0.15s ease;
}

.node-chat-welcome-link:hover {
  color: oklch(var(--p) / 0.8);
  border-bottom-color: oklch(var(--p) / 0.6);
}


.node-chat-bulb-plus-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.node-chat-bulb-plus-icon > svg:first-child {
  width: 20px;
  height: 20px;
}

.node-chat-bulb-plus {
  position: absolute;
  top: -5px;
  right: -7px;
  width: 11px;
  height: 11px;
}

.node-chat-input {
  position: relative;
  padding: 12px 16px;
  flex-shrink: 0;
  border-top: 1px solid oklch(var(--bc) / 0.08);
}

.node-chat-text-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: oklch(var(--bc));
  padding: 8px 0;
  resize: none;
  overflow-y: auto;
  max-height: 140px;
  line-height: 1.4;
  font-family: inherit;
}

.node-chat-guidance {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 0 12px 4px;
  background: oklch(0.95 0.02 250);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: oklch(0.45 0.03 250);
  flex-shrink: 0;
}

.node-chat-guidance svg {
  flex-shrink: 0;
}

.node-chat-guidance em {
  color: oklch(0.35 0.04 250);
}

.node-chat-text-input::placeholder {
  color: oklch(var(--bc) / 0.35);
}

.node-chat-text-input:disabled {
  opacity: 0.5;
}

.node-panel-footer {
  padding: 12px 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Selection Bar */
.node-panel-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: oklch(var(--b2));
  border-radius: 8px;
}

.node-panel-selection-bar.hidden {
  display: none;
}

.node-panel-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc));
}

.node-panel-selection-summary {
  font-size: 12px;
  color: oklch(var(--bc) / 0.6);
}

/* Add to Course Panel */
.node-panel-add-course {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: oklch(var(--b1));
  display: flex;
  flex-direction: column;
  z-index: 10;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.node-panel-add-course.is-open {
  transform: translateX(0);
}

.node-panel-add-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: oklch(var(--su) / 0.1);
  border-bottom: 1px solid oklch(var(--b3));
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc));
}

.node-panel-chapter-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.node-panel-chapter-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.node-panel-chapter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: oklch(var(--b1));
}

.node-panel-chapter-item:hover {
  background: oklch(var(--b2));
  border-color: oklch(var(--p) / 0.3);
}

.node-panel-chapter-item.is-selected {
  background: oklch(var(--p) / 0.1);
  border-color: oklch(var(--p));
}

.node-panel-chapter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: oklch(var(--b2));
  border-radius: 6px;
  flex-shrink: 0;
}

.node-panel-chapter-item.is-selected .node-panel-chapter-icon {
  background: oklch(var(--p));
  color: oklch(var(--pc));
}

.node-panel-chapter-info {
  flex: 1;
  min-width: 0;
}

.node-panel-chapter-name {
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-panel-chapter-meta {
  font-size: 11px;
  color: oklch(var(--bc) / 0.5);
}

.node-panel-chapter-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid oklch(var(--b3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.node-panel-chapter-item.is-selected .node-panel-chapter-check {
  background: oklch(var(--p));
  border-color: oklch(var(--p));
  color: oklch(var(--pc));
}

.node-panel-new-chapter {
  padding: 8px 16px;
  border-top: 1px solid oklch(var(--b3));
}

.node-panel-new-chapter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 2px dashed oklch(var(--b3));
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.7);
  transition: all 0.15s ease;
}

.node-panel-new-chapter-btn:hover {
  border-color: oklch(var(--p));
  color: oklch(var(--p));
  background: oklch(var(--p) / 0.05);
}

/* Create Form */
.node-panel-create-form {
  margin-top: 10px;
  padding: 12px;
  background: oklch(var(--b2));
  border-radius: 8px;
}

.node-panel-create-form.hidden {
  display: none;
}

/* Add to Course - Lesson Items */
.add-to-course-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: oklch(var(--b1));
  text-align: left;
}

.add-to-course-lesson:hover {
  background: oklch(var(--b2));
  border-color: oklch(var(--p) / 0.3);
}

.add-to-course-lesson.is-selected {
  background: oklch(var(--p) / 0.1);
  border-color: oklch(var(--p));
}

.add-to-course-lesson-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-to-course-lesson-name {
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--bc));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-to-course-lesson-count {
  font-size: 11px;
  color: oklch(var(--bc) / 0.5);
}

.add-to-course-lesson-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid oklch(var(--b3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
  color: transparent;
}

.add-to-course-lesson.is-selected .add-to-course-lesson-check {
  background: oklch(var(--su));
  border-color: oklch(var(--su));
  color: oklch(var(--suc, var(--b1)));
}

.add-to-course-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}

.add-to-course-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

/* Progress bar for streaming course item creation */
.add-to-course-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px;
  gap: 16px;
}

.add-to-course-progress-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.add-to-course-progress-spinner {
  width: 20px;
  height: 20px;
  color: oklch(var(--p));
  animation: spin 1s linear infinite;
}

.add-to-course-progress-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: oklch(var(--bc));
}

.add-to-course-progress-bar-track {
  width: 100%;
  height: 8px;
  background: oklch(var(--b3));
  border-radius: 4px;
  overflow: hidden;
}

.add-to-course-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: oklch(var(--p));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.add-to-course-progress-detail {
  font-size: 0.75rem;
  color: oklch(var(--bc) / 0.5);
  text-align: center;
}

/* Responsive */
@media screen and (max-width: 640px) {
  .node-panel {
    width: calc(100vw - 20px);
    height: 85vh;
  }

  .node-panel-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .node-panel-left {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    max-height: 40vh;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========================================
   Mindmap Expand/Collapse Controls
   ======================================== */

.mindmap-expand-controls {
  position: absolute;
  bottom: 48px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  pointer-events: auto;
}

/* ========================================
   Mindmap Zoom Controls
   ======================================== */

.mindmap-zoom-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.mindmap-control-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--bc) / 0.4);
  padding-right: 2px;
  user-select: none;
}

.mindmap-level-display {
  font-size: 10px;
  font-weight: 700;
  color: oklch(var(--bc) / 0.6);
  padding: 1px 5px;
  border-radius: 3px;
  background: oklch(var(--bc) / 0.08);
  user-select: none;
  min-width: 22px;
  text-align: center;
}

.mindmap-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: oklch(var(--bc) / 0.7);
  transition: all 0.15s ease;
}

.mindmap-control-btn:hover {
  background: oklch(var(--b2));
  color: oklch(var(--bc));
}

.mindmap-control-btn:active {
  background: oklch(var(--b3));
}

/* Level buttons container */
.mindmap-level-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
}

/* Individual level button */
.mindmap-level-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: oklch(var(--bc) / 0.5);
  transition: all 0.15s ease;
  user-select: none;
}

.mindmap-level-btn:hover {
  background: oklch(var(--bc) / 0.08);
  color: oklch(var(--bc) / 0.8);
}

.mindmap-level-btn.active {
  background: oklch(var(--p));
  color: oklch(var(--pc));
  border-color: oklch(var(--p));
}

.mindmap-level-btn.active:hover {
  background: oklch(var(--p) / 0.9);
}

.mindmap-zoom-level {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: oklch(var(--bc) / 0.7);
  user-select: none;
}

.mindmap-hint {
  position: absolute;
  bottom: 16px;
  left: 16px;
  padding: 6px 10px;
  background: oklch(var(--b1) / 0.9);
  border: 1px solid oklch(var(--b3));
  border-radius: 6px;
  font-size: 11px;
  color: oklch(var(--bc) / 0.5);
  z-index: 10;
}

/* Minimap */
.mindmap-minimap {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #f8fafc;
  border: 1px solid oklch(var(--b3));
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  overflow: visible;
  cursor: pointer;
}

.mindmap-minimap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.mindmap-minimap-viewport {
  position: absolute;
  box-sizing: border-box;
  background: rgba(59, 130, 246, 0.1);
  outline: 2px solid oklch(var(--p));
  outline-offset: -2px;
  border-radius: 1.5px;
  pointer-events: none;
}
/* 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;
}
/*
  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.

  Split into per-section files under ./v3/ for maintainability.
*/

@import './v3/base.css';
@import './v3/typography.css';
@import './v3/layout.css';
@import './v3/surface.css';
@import './v3/page.css';
@import './v3/navbar.css';
@import './v3/hero.css';
@import './v3/product.css';
@import './v3/why.css';
@import './v3/faq.css';
@import './v3/testimonials.css';
@import './v3/how.css';
@import './v3/cta.css';
@import './v3/footer.css';
@import './v3/pricing.css';
@import './v3/auth.css';
@import './v3/verify.css';
@import './v3/legal.css';
@import './v3/case_study_index.css';
@import './v3/case_study_show.css';
@import './v3/demo.css';
@import './v3/feature.css';
@import './v3/announce.css';
@import './v3/responsive.css';
@import './v3/showcase.css';
@import './v3/showreel.css';
/* ----- 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;
}
/* ----- 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;
  transition: color 200ms ease;
}

.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;
  transition: color 120ms ease;
}

.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__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 mint-tinted shadow */
.landing-v3 .product-grid.is-visible .product-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 24px -8px rgba(156, 213, 198, 0.25),
    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;
  }
}

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

/*
  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;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* AI Deck Tab System */
[data-controller="ai-deck"] .tab-content {
  display: none;
  height: 100%;
  width: 100%;
  min-height: 0;
  flex: 1;
}

[data-controller="ai-deck"] .tab-content:not(.hidden) {
  display: block !important;
}

[data-controller="ai-deck"] .tab-content.hidden {
  display: none !important;
}

/* Ensure proper height inheritance for tab containers */
[data-controller="ai-deck"] .flex-1 {
  min-height: 0;
}