/* ============================================================================
   EasyCompare Landing Page Styles
   
   Brand palette:
   - Primary:    #0969da (existing accent blue)
   - Ink:        #1f2328 (existing text)
   - Muted:      #656d76
   - Surface:    #ffffff
   - Surface-2:  #f6f8fa (alternating sections)
   - Border:     rgba(27, 31, 35, 0.1)
   - Accent gradient: #0969da → #2563eb (hero, CTA)
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --landing-font: "DM Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --landing-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --landing-font-mono: "SF Mono", "Fira Code", "Fira Mono", monospace;

  --landing-ink: #1f2328;
  --landing-ink-secondary: #656d76;
  --landing-ink-tertiary: #8b949e;
  --landing-surface: #ffffff;
  --landing-surface-alt: #f6f8fa;
  --landing-border: rgba(27, 31, 35, 0.1);
  --landing-primary: #0969da;
  --landing-primary-hover: #0860c4;
  --landing-primary-subtle: rgba(9, 105, 218, 0.06);
  --landing-gradient-start: #0969da;
  --landing-gradient-end: #2563eb;

  --landing-section-padding: 6rem 0;
  --landing-content-max: 80%;
  --landing-content-padding: 0 2rem;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--landing-font);
  color: var(--landing-ink);
  background: var(--landing-surface);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ============================================================================
   Responsive variants
   ----------------------------------------------------------------------------
   Some sections benefit from a different copy length, layout, or content
   density on mobile vs desktop, beyond what the standard responsive
   collapse can express. The convention is to author both variants in
   the HTML and tag the wrapper element with one of these utility
   classes. The breakpoint matches MOBILE_BREAKPOINT in landing.js
   (768px), so JS-driven behaviors and CSS visibility stay in sync.

   Usage:
     <section class="landing-story landing-desktop-only"> ... </section>
     <section class="landing-story landing-mobile-only">  ... </section>

   Pair these in source order so the page reading order is correct on
   both breakpoints, and keep the section-level class identical across
   the pair so styling rules apply uniformly.
   ============================================================================ */
.landing-desktop-only { display: block; }
.landing-mobile-only  { display: none; }

@media (max-width: 768px) {
  .landing-desktop-only { display: none; }
  .landing-mobile-only  { display: block; }
}

/* ============================================================================
   NAV
   ============================================================================ */

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.landing-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--landing-border);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

.landing-nav-inner {
  max-width: var(--landing-content-max);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 78px keeps just ~6px of breathing room above and below the 66px
     logo — enough to avoid the wordmark touching the nav edges, but
     tight enough that the bar doesn't feel like a banner. */
  height: 78px;
}

.landing-nav-logo {
  /* Sized at 66px (~50% larger than the previous 44px) so the wordmark
     reads at a glance in the top-left corner, matching the visual weight
     of the "Open App" CTA on the right. */
  --brand-logo-display-height: 66px;
}

.landing-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--landing-primary);
  border: none;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: -0.01em;
}

.landing-nav-cta:hover {
  background: var(--landing-primary-hover);
}

.landing-nav-cta:active {
  transform: scale(0.98);
}

/* ============================================================================
   HERO
   ============================================================================ */

.landing-hero {
  position: relative;
  padding: 6.5rem 2rem 5rem;
  overflow: hidden;
}

.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 18% 22%, rgba(118, 185, 0, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 82% 28%, rgba(66, 133, 244, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 95%, rgba(229, 9, 20, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(9, 105, 218, 0.04) 0%, transparent 70%);
  background-size: 200% 200%;
  animation: heroBrandGradientFlow 14s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroBrandGradientFlow {
  0%, 100% { background-position: 0% 0%; }
  25%      { background-position: 100% 0%; }
  50%      { background-position: 100% 100%; }
  75%      { background-position: 0% 100%; }
}

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

.landing-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.landing-hero-inner {
  position: relative;
  max-width: var(--landing-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 1.5rem 3.5rem;
  align-items: center;
}

.landing-hero-headline {
  grid-column: 1 / -1;
  grid-row: 1;
  font-family: var(--landing-font-display);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--landing-ink);
  text-align: center;
  margin-bottom: 3.5rem;
}

.landing-hero-headline em {
  font-style: italic;
  background: linear-gradient(
    100deg,
    var(--landing-gradient-start) 0%,
    #7c3aed 40%,
    #2563eb 60%,
    var(--landing-gradient-end) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 0 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: heroHeadlineShimmer 6s ease-in-out infinite;
}

@keyframes heroHeadlineShimmer {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-headline em {
    animation: none;
  }
}

.landing-hero-copy {
  grid-column: 1;
  grid-row: 2;
  text-align: left;
  align-self: start;
}

.landing-hero-bottom {
  grid-column: 1;
  grid-row: 3;
  text-align: left;
  margin-top: 2rem;
}

/* Numbered value props in the hero copy column. The counter circles use the
   same blue gradient as the headline accent so the hero reads as one piece. */
.landing-hero-bullets {
  list-style: none;
  counter-reset: hero-bullet;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.landing-hero-bullets li {
  counter-increment: hero-bullet;
  position: relative;
  padding-left: 3.1rem;
  font-family: var(--landing-font);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--landing-ink);
}

.landing-hero-bullets li strong {
  font-weight: 600;
  color: var(--landing-ink);
}

.landing-hero-bullets li::before {
  content: counter(hero-bullet);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--landing-gradient-start), var(--landing-gradient-end));
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 4px 10px -4px rgba(37, 99, 235, 0.55);
}

/* -- Badges ---------------------------------------------------------------- */

.landing-hero-badges-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--landing-ink-tertiary);
  margin-bottom: 0.75rem;
}

.landing-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 2.25rem;
}

.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem 0.5rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 100px;
  white-space: nowrap;
  color: hsl(var(--badge-hue) 55% 30%);
  background: hsl(var(--badge-hue) 70% 96%);
  border: 1.5px solid hsl(var(--badge-hue) 50% 85%);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  animation: badgeIn 0.4s ease forwards, badgePulse 3s ease-in-out infinite;
  animation-fill-mode: forwards, none;
}

.landing-badge-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: hsl(var(--badge-hue) 60% 40%);
}

.landing-badge:nth-child(1)  { animation-delay: 0.05s, 0.6s; }
.landing-badge:nth-child(2)  { animation-delay: 0.1s, 1.0s; }
.landing-badge:nth-child(3)  { animation-delay: 0.15s, 1.4s; }
.landing-badge:nth-child(4)  { animation-delay: 0.2s, 0.8s; }
.landing-badge:nth-child(5)  { animation-delay: 0.25s, 1.2s; }
.landing-badge:nth-child(6)  { animation-delay: 0.3s, 1.6s; }
.landing-badge:nth-child(7)  { animation-delay: 0.35s, 0.7s; }
.landing-badge:nth-child(8)  { animation-delay: 0.4s, 1.1s; }
.landing-badge:nth-child(9)  { animation-delay: 0.45s, 1.5s; }
.landing-badge:nth-child(10) { animation-delay: 0.5s, 0.9s; }
.landing-badge:nth-child(11) { animation-delay: 0.55s, 1.3s; }

@keyframes badgeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes badgePulse {
  0%, 100% {
    border-color: hsl(var(--badge-hue) 50% 85%);
    box-shadow: 0 0 0 0 hsl(var(--badge-hue) 50% 85% / 0);
  }
  50% {
    border-color: hsl(var(--badge-hue) 60% 68%);
    box-shadow: 0 0 8px 1px hsl(var(--badge-hue) 50% 75% / 0.3);
  }
}

.landing-badge:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: hsl(var(--badge-hue) 60% 65%);
  box-shadow: 0 4px 14px hsl(var(--badge-hue) 40% 75% / 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* -- CTA group ------------------------------------------------------------- */

.landing-hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.landing-hero-cta-hint {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--landing-ink-secondary);
  letter-spacing: 0.01em;
  padding-left: 0.15rem;
}

.landing-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem 3rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--landing-gradient-start), var(--landing-gradient-end));
  border: none;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.2s;
  box-shadow: 0 3px 16px rgba(9, 105, 218, 0.3);
  letter-spacing: -0.01em;
}

.landing-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(9, 105, 218, 0.4);
}

.landing-hero-cta:active {
  transform: translateY(0);
}

/* -- Video placeholder ----------------------------------------------------- */

.landing-hero-media {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* Center the video frame within the right column so when the placeholder
     sizes itself purely from the video's intrinsic aspect ratio it sits
     vertically in the middle of the available space (not stretched). */
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.landing-hero-video-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--landing-surface-alt);
  border: 1px solid var(--landing-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.06);
}

.landing-hero-video-placeholder span {
  font-size: 0.9rem;
  color: var(--landing-ink-tertiary);
}

/* Auto-playing product video sits flush inside the framed placeholder.
   `object-fit: contain` keeps the full app recording visible (it's
   portrait, ~3:4) regardless of how tall the right column ends up,
   with the surface-alt background filling any letterboxed space. */
.landing-hero-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--landing-surface-alt);
}

/* In the hero the placeholder uses the video's intrinsic aspect ratio
   (set inline in HTML to 2392 / 2160) so the frame is laid out at the
   correct shape on first paint, eliminating the flash that used to happen
   when the video's metadata loaded and pushed the layout. width:100% +
   aspect-ratio drives height; max-height caps it against the row so it
   won't overshoot when the left column is shorter than a full portrait
   frame. */
.landing-hero-media .landing-hero-video-placeholder {
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 360px;
}

/* ----------------------------------------------------------------------------
   Video live captions (generic)
   ----------------------------------------------------------------------------
   Single-line editorial commentary that mirrors what's happening in any
   video on the page. Drop a `[data-video-captions]` container next to a
   video, point it at a JSON track via `data-captions-src`, and the script
   in landing.js syncs the line below to the video's currentTime.

   Defaults are tuned for readable, body-font commentary (NOT the fancy
   serif). Per-instance overrides (e.g. hero placement) live below.
*/
.landing-video-captions {
  width: 100%;
  max-width: 38rem;
  min-height: 1.7em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.landing-video-captions.is-visible {
  opacity: 1;
}

.landing-video-caption-line {
  margin: 0;
  font-family: var(--landing-font);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: hsl(223 28% 22%);
  transition: opacity 0.22s ease, transform 0.22s ease;
  opacity: 0;
  transform: translateY(4px);
}

.landing-video-caption-line.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .landing-video-captions,
  .landing-video-caption-line {
    transition: none;
  }
}

/* Hero-specific: hide on mobile since the hero video is replaced by the
   mobile modal and the caption track is desktop-only for now. */
@media (max-width: 768px) {
  .landing-hero-captions {
    display: none;
  }
}

/* ============================================================================
   STORY / WHY SECTION
   ============================================================================ */

/* ============================================================================
   WHY RELATIVE PERFORMANCE MATTERS
   ============================================================================ */

.landing-why {
  position: relative;
  padding: 6rem 2rem;
  background: var(--landing-surface);
  overflow: hidden;
}

.landing-why::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 15% 20%, rgba(118, 185, 0, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 80%, rgba(66, 133, 244, 0.05) 0%, transparent 60%);
}

.landing-why-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.landing-why-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--landing-primary);
  background: var(--landing-primary-subtle);
  border: 1px solid rgba(9, 105, 218, 0.18);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.landing-why-headline {
  font-family: var(--landing-font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--landing-ink);
  margin: 0 0 1.5rem;
  letter-spacing: -0.005em;
}

.landing-why-lead {
  max-width: 760px;
  margin: 0 auto 4rem;
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--landing-ink-secondary);
}

.landing-why-lead strong {
  color: var(--landing-ink);
  font-weight: 600;
}

.landing-why-lead em {
  font-style: italic;
  color: var(--landing-primary);
  font-weight: 500;
  background: linear-gradient(120deg, var(--landing-gradient-start), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Editorial 3-column layout: clean typography, no boxes */
.landing-why-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 3rem;
  text-align: left;
  position: relative;
}

.landing-why-points li {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0 0.5rem;
  position: relative;
}

/* Subtle vertical dividers between columns */
.landing-why-points li + li::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--landing-border) 20%,
    var(--landing-border) 80%,
    transparent 100%
  );
}

.landing-why-point-num {
  font-family: var(--landing-font-display);
  font-size: 2rem;
  font-style: italic;
  line-height: 1;
  background: linear-gradient(135deg, var(--landing-gradient-start), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
}

.landing-why-point-title {
  font-family: var(--landing-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--landing-ink);
  letter-spacing: -0.005em;
}

.landing-why-point-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--landing-ink-secondary);
}

/* ============================================================================
   CONCISE COPY LIBRARY (reusable phrasing borrowed from old mobile page)
   These sections are visually marked as drafts/references so they're easy
   to spot and pull copy out of. Remove when no longer needed.
   ============================================================================ */

/* The Concise Copy Library at the bottom of the page is internal
   reference material. It stays hidden unless the URL has ?library
   (toggled by the head-script in landing.html, which sets
   .show-library on <html>). */
.landing-copy-lib-marker,
.landing-copy-lib-section {
  display: none;
}

html.show-library .landing-copy-lib-marker,
html.show-library .landing-copy-lib-section {
  display: block;
}

.landing-copy-lib-marker {
  max-width: var(--landing-content-max);
  margin: 5rem auto 0;
  padding: 1.5rem 2rem;
  text-align: center;
  border-top: 2px dashed rgba(245, 158, 11, 0.45);
  border-bottom: 2px dashed rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.04);
}

.landing-copy-lib-marker-pill {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(38 75% 35%);
  background: hsl(45 100% 92%);
  border: 1px solid hsl(45 80% 75%);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
}

.landing-copy-lib-marker-note {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: var(--landing-ink-secondary);
  font-style: italic;
}

.landing-copy-lib-section {
  position: relative;
  padding: 3.5rem 2rem !important;
  background: rgba(245, 158, 11, 0.025);
  border-bottom: 1px dashed rgba(245, 158, 11, 0.35);
}

.landing-copy-lib-section:last-of-type {
  border-bottom: 2px dashed rgba(245, 158, 11, 0.45);
}

.landing-copy-lib-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(38 75% 35%);
  background: hsl(45 100% 92%);
  border: 1px solid hsl(45 80% 75%);
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.landing-copy-lib-points {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 1.5rem auto 0;
}

.landing-copy-lib-points li {
  position: relative;
  padding: 0.6rem 0 0.6rem 2rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--landing-ink-secondary);
  border-bottom: 1px solid var(--landing-border);
}

.landing-copy-lib-points li:last-child {
  border-bottom: none;
}

.landing-copy-lib-points li::before {
  content: "✓";
  position: absolute;
  left: 0.4rem;
  top: 0.6rem;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: hsl(145 55% 38%);
  background: hsl(145 60% 95%);
  border-radius: 50%;
  font-size: 0.85rem;
  line-height: 1;
}

/* ============================================================================
   PROBLEM / SOLUTION STORY SECTION
   ============================================================================ */

.landing-story {
  padding: 4.5rem 2rem;
  background: var(--landing-surface-alt);
  border-top: 1px solid var(--landing-border);
  border-bottom: 1px solid var(--landing-border);
}

.landing-story-inner {
  max-width: var(--landing-content-max);
  margin: 0 auto;
  text-align: center;
}

.landing-story-label {
  display: inline-block;
  font-family: var(--landing-font-display);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--landing-ink);
  margin-bottom: 2rem;
}

.landing-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.landing-story-card {
  text-align: left;
  padding: 2rem 2.25rem;
  border-radius: 12px;
  border: 1px solid;
}

.landing-story-card-icon {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  line-height: 1;
}

.landing-story-card h3 {
  font-family: var(--landing-font-display);
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.landing-story-card p {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--landing-ink-secondary);
}

.landing-story-card p + p {
  margin-top: 0.85rem;
}

.landing-story-problem {
  background: hsl(0 80% 98%);
  border-color: hsl(0 60% 90%);
}

.landing-story-problem h3 {
  color: hsl(0 55% 42%);
}

.landing-story-problem .landing-story-card-icon {
  color: hsl(0 65% 50%);
}

.landing-story-solution {
  background: hsl(145 60% 97%);
  border-color: hsl(145 40% 85%);
}

.landing-story-solution h3 {
  color: hsl(145 50% 32%);
}

.landing-story-solution .landing-story-card-icon {
  color: hsl(145 55% 38%);
}

.landing-story-claim {
  margin: 2.5rem auto 0;
  max-width: 90rem;
  text-align: center;
  font-family: var(--landing-font-display);
  font-size: clamp(1.45rem, 2.1vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: hsl(223 28% 22%);
}

.landing-story-claim strong {
  font-weight: 600;
  color: hsl(216 84% 38%);
}

/* ============================================================================
   QUOTE CAROUSEL
   Compact, tasteful carousel that bridges the problem framing into the
   product overview by reinforcing the value of relative judgment.
   ============================================================================ */

.landing-quote-carousel {
  position: relative;
  padding: 3.75rem 2rem 4rem;
  background:
    radial-gradient(
      980px 420px at 12% -8%,
      rgba(59, 130, 246, 0.09) 0%,
      transparent 60%
    ),
    radial-gradient(
      900px 400px at 100% 100%,
      rgba(16, 185, 129, 0.07) 0%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      hsl(220 38% 99%) 0%,
      hsl(220 40% 97.9%) 50%,
      hsl(220 38% 99%) 100%
    );
  border-top: 1px solid hsl(220 28% 92%);
  border-bottom: 1px solid hsl(220 28% 92%);
  overflow: hidden;
}

.landing-quote-carousel-inner {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}

.landing-quote-carousel-header {
  text-align: center;
  margin-bottom: 2rem;
}

.landing-quote-carousel-title {
  font-family: var(--landing-font-display);
  font-size: clamp(2rem, 3.6vw, 2.65rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: hsl(223 33% 16%);
  margin: 0 0 0.6rem;
}

.landing-quote-carousel-subtitle {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.6;
  color: hsl(220 16% 39%);
}

.landing-quote-carousel-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.landing-quote-carousel-arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid hsl(220 22% 88%);
  background: rgba(255, 255, 255, 0.78);
  color: hsl(216 84% 46%);
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.landing-quote-carousel-arrow:hover,
.landing-quote-carousel-arrow:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.96);
  border-color: hsl(216 66% 78%);
  outline: none;
}

.landing-quote-carousel-slides {
  min-width: 0;
}

.landing-quote-slide {
  display: none;
}

.landing-quote-slide.active {
  display: block;
  animation: landingFadeIn 0.25s ease forwards;
}

.landing-quote-card {
  position: relative;
  margin: 0;
  padding: 2rem 2.25rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 34px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.landing-quote-card::before {
  content: '“';
  position: absolute;
  top: 0.7rem;
  left: 1.2rem;
  font-family: var(--landing-font-display);
  font-size: 4.6rem;
  line-height: 1;
  color: rgba(37, 99, 235, 0.12);
}

.landing-quote-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--landing-font-display);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: hsl(223 31% 16%);
}

.landing-quote-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  align-items: center;
  margin-top: 1.35rem;
}

.landing-quote-author {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(220 44% 24%);
}

.landing-quote-context {
  font-size: 0.95rem;
  color: hsl(220 14% 45%);
}

.landing-quote-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.15rem;
}

.landing-quote-carousel-counter {
  font-size: 0.95rem;
  color: hsl(220 14% 42%);
  font-variant-numeric: tabular-nums;
}

.landing-quote-carousel-dots {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.landing-quote-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.landing-quote-dot.active {
  background: hsl(216 84% 46%);
  transform: scale(1.12);
}

/* ============================================================================
   AT A GLANCE - quick-scan card grid
   ----------------------------------------------------------------------------
   Sits right after the Story (Problem/Solution) section and before the
   "Why This Matters" framing. Distinct light section: subtle blue/violet
   gradient wash so it reads as its own visual beat between adjacent
   white sections.

   Twelve cards arranged 4×3 (desktop), 2-up (tablet), single column
   (mobile). Each card has its own hue identity, set via a single
   inline custom property on the card element:
       --glance-h    (the HSL hue, 0-360)
   The icon stroke, icon tile background, card border, and the soft
   top-left card gradient are all derived from that one hue, so giving
   a card a new color is a one-number change.
   ============================================================================ */

.landing-glance {
  position: relative;
  padding: 5rem 2rem 5.5rem;
  background:
    radial-gradient(
      1100px 520px at 15% -10%,
      rgba(99, 102, 241, 0.10) 0%,
      transparent 60%
    ),
    radial-gradient(
      900px 480px at 100% 100%,
      rgba(56, 189, 248, 0.09) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      hsl(220 50% 98.5%) 0%,
      hsl(225 55% 97%) 50%,
      hsl(220 50% 98.5%) 100%
    );
  border-top: 1px solid hsl(220 30% 92%);
  border-bottom: 1px solid hsl(220 30% 92%);
  overflow: hidden;
}

.landing-glance-inner {
  position: relative;
  max-width: var(--landing-content-max);
  margin: 0 auto;
  z-index: 1;
}

.landing-glance-header {
  text-align: center;
  margin-bottom: 3rem;
}

.landing-glance-headline {
  font-family: var(--landing-font-display);
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: hsl(222 47% 14%);
  margin: 0.85rem auto;
  max-width: 1100px;
}

.landing-glance-subtitle {
  font-size: 1.1rem;
  line-height: 1.55;
  color: hsl(220 16% 38%);
  margin: 0 auto;
  max-width: 880px;
}

.landing-glance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.landing-glance-card {
  --glance-h: 215;
  background:
    radial-gradient(
      170% 130% at 0% 0%,
      hsl(var(--glance-h) 78% 93%) 0%,
      hsl(var(--glance-h) 60% 97%) 28%,
      #ffffff 68%
    );
  border: 1px solid hsl(var(--glance-h) 35% 88%);
  border-radius: 14px;
  padding: 1.6rem 1.6rem 1.5rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 18px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.landing-glance-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--glance-h) 60% 65%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 14px 30px rgba(15, 23, 42, 0.10);
}

.landing-glance-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: hsl(var(--glance-h) 80% 92%);
  color: hsl(var(--glance-h) 65% 38%);
  border: 1px solid hsl(var(--glance-h) 55% 80%);
  margin-bottom: 1.05rem;
}

.landing-glance-card-title {
  font-family: var(--landing-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: hsl(222 47% 14%);
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}

.landing-glance-card-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: hsl(220 16% 32%);
  margin: 0;
}

/* --- Clickable cards (those with data-video) --------------------------------
   The whole card behaves as a button: cursor, focus ring, and a small "Watch"
   pill in the top-right that signals the click affordance. The pill itself
   is inert (pointer-events: none) so the card receives every click cleanly. */

.landing-glance-card {
  position: relative;
}

.landing-glance-card-clickable {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.landing-glance-card-clickable:focus {
  outline: none;
}

.landing-glance-card-clickable:focus-visible {
  outline: 2px solid hsl(var(--glance-h) 70% 52%);
  outline-offset: 3px;
}

.landing-glance-card-clickable:active {
  transform: translateY(0);
}

.landing-glance-card-play {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem 0.3rem 0.55rem;
  border-radius: 999px;
  background: hsl(222 47% 16%);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.35);
  pointer-events: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.landing-glance-card-play svg {
  margin-left: 1px;
}

.landing-glance-card-clickable:hover .landing-glance-card-play,
.landing-glance-card-clickable:focus-visible .landing-glance-card-play {
  transform: scale(1.05);
  background: hsl(var(--glance-h) 65% 35%);
  box-shadow: 0 6px 16px -4px hsla(var(--glance-h), 70%, 35%, 0.55);
}

/* --- Tip banner above the grid ---------------------------------------------
   A small pill-style hint that tells the user the cards are clickable. */

.landing-glance-tip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem auto 0;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: hsl(215 80% 96%);
  border: 1px solid hsl(215 60% 86%);
  color: hsl(215 55% 30%);
  font-size: 0.92rem;
  font-weight: 500;
}

.landing-glance-tip svg {
  color: hsl(215 75% 48%);
  flex-shrink: 0;
}

/* Tablet: drop from 4-up to 2-up before the single-column phone layout */
@media (max-width: 1100px) {
  .landing-glance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================================
   SPEED SECTION (in-memory backend story)
   ============================================================================ */

.landing-speed {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 2rem;
  background: linear-gradient(180deg, #0b1220 0%, #0a1729 60%, #0b1220 100%);
  color: #e6edf3;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

.landing-speed-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.landing-speed-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
}

.landing-speed-orb-1 {
  width: 360px;
  height: 360px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, #2563eb 0%, transparent 70%);
  animation: speedOrbDrift1 14s ease-in-out infinite alternate;
}

.landing-speed-orb-2 {
  width: 400px;
  height: 400px;
  bottom: -160px;
  right: -100px;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
  animation: speedOrbDrift2 18s ease-in-out infinite alternate;
}

@keyframes speedOrbDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.1); }
}

@keyframes speedOrbDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-30px, -40px) scale(1.08); }
}

.landing-speed-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 70%);
}

.landing-speed-inner {
  position: relative;
  z-index: 1;
  max-width: var(--landing-content-max);
  margin: 0 auto;
  text-align: center;
}

.landing-speed-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.08);
  border: 1px solid rgba(88, 166, 255, 0.25);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.landing-speed-headline {
  font-family: var(--landing-font-display);
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.85rem;
  color: #ffffff;
}

.landing-speed-sub {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(230, 237, 243, 0.75);
}

.landing-speed-sub strong {
  color: #ffffff;
  font-weight: 600;
}

/* Compact stat strip: three short facts in one row, replaces the
   former giant hero-stat block + 4 glass-morphism cards. Keeps the
   section feeling like a normal section instead of a mini landing. */
.landing-speed-stats {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.75rem 3.5rem;
  max-width: 880px;
  margin: 0 auto;
}

.landing-speed-stat {
  text-align: center;
  min-width: 160px;
  max-width: 240px;
}

.landing-speed-stat-num {
  font-family: var(--landing-font-display);
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  color: #a8c7fa;
  font-variant-numeric: tabular-nums;
}

.landing-speed-stat-unit {
  font-size: 0.55em;
  margin-left: 0.18rem;
  font-style: italic;
  color: rgba(168, 199, 250, 0.78);
}

.landing-speed-stat-label {
  margin-top: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(230, 237, 243, 0.7);
}

/* ============================================================================
   SECTIONS (shared)
   ============================================================================ */

.landing-section {
  position: relative;
  padding: var(--landing-section-padding);
}

.landing-section:nth-child(even) {
  background: var(--landing-surface-alt);
}

.landing-section-themed {
  --landing-section-wash-a: rgba(59, 130, 246, 0.08);
  --landing-section-wash-b: rgba(16, 185, 129, 0.06);
  --landing-section-base-top: hsl(220 40% 99%);
  --landing-section-base-mid: hsl(220 42% 98%);
  --landing-section-base-bottom: hsl(220 40% 99%);
  --landing-section-border: hsl(220 28% 92%);
  --landing-section-accent: var(--landing-primary);
  --landing-section-chip: var(--landing-primary-subtle);
  overflow: hidden;
  background:
    radial-gradient(
      1050px 480px at 10% -8%,
      var(--landing-section-wash-a) 0%,
      transparent 60%
    ),
    radial-gradient(
      900px 440px at 100% 110%,
      var(--landing-section-wash-b) 0%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      var(--landing-section-base-top) 0%,
      var(--landing-section-base-mid) 50%,
      var(--landing-section-base-bottom) 100%
    );
  border-top: 1px solid var(--landing-section-border);
  border-bottom: 1px solid var(--landing-section-border);
}

.landing-section-visual {
  --landing-section-wash-a: rgba(37, 99, 235, 0.10);
  --landing-section-wash-b: rgba(20, 184, 166, 0.08);
  --landing-section-base-top: hsl(212 55% 99%);
  --landing-section-base-mid: hsl(212 52% 97.9%);
  --landing-section-base-bottom: hsl(212 55% 99%);
  --landing-section-border: hsl(212 30% 91.5%);
  --landing-section-accent: hsl(217 78% 47%);
  --landing-section-chip: rgba(37, 99, 235, 0.10);
}

.landing-section-rankings {
  --landing-section-wash-a: rgba(245, 158, 11, 0.09);
  --landing-section-wash-b: rgba(59, 130, 246, 0.07);
  --landing-section-base-top: hsl(38 60% 98.9%);
  --landing-section-base-mid: hsl(38 52% 97.8%);
  --landing-section-base-bottom: hsl(38 60% 98.9%);
  --landing-section-border: hsl(36 34% 90.5%);
  --landing-section-accent: hsl(32 92% 35%);
  --landing-section-chip: rgba(217, 119, 6, 0.10);
}

.landing-section-time {
  --landing-section-wash-a: rgba(99, 102, 241, 0.10);
  --landing-section-wash-b: rgba(56, 189, 248, 0.08);
  --landing-section-base-top: hsl(226 55% 99%);
  --landing-section-base-mid: hsl(226 50% 97.8%);
  --landing-section-base-bottom: hsl(226 55% 99%);
  --landing-section-border: hsl(226 30% 91%);
  --landing-section-accent: hsl(239 63% 51%);
  --landing-section-chip: rgba(99, 102, 241, 0.10);
}

.landing-section-quant {
  --landing-section-wash-a: rgba(168, 85, 247, 0.10);
  --landing-section-wash-b: rgba(34, 197, 94, 0.06);
  --landing-section-base-top: hsl(276 58% 99%);
  --landing-section-base-mid: hsl(276 44% 97.9%);
  --landing-section-base-bottom: hsl(276 58% 99%);
  --landing-section-border: hsl(274 28% 91.3%);
  --landing-section-accent: hsl(271 70% 44%);
  --landing-section-chip: rgba(168, 85, 247, 0.10);
}

.landing-section-workflow {
  --landing-section-wash-a: rgba(20, 184, 166, 0.09);
  --landing-section-wash-b: rgba(249, 115, 22, 0.06);
  --landing-section-base-top: hsl(168 48% 98.9%);
  --landing-section-base-mid: hsl(168 38% 97.8%);
  --landing-section-base-bottom: hsl(168 48% 98.9%);
  --landing-section-border: hsl(168 24% 90.8%);
  --landing-section-accent: hsl(173 80% 28%);
  --landing-section-chip: rgba(13, 148, 136, 0.10);
}

.landing-section-inner {
  max-width: var(--landing-content-max);
  margin: 0 auto;
  padding: var(--landing-content-padding);
}

.landing-section-themed .landing-section-inner {
  position: relative;
  z-index: 1;
}

.landing-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.landing-section-label {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--landing-primary);
  background: var(--landing-primary-subtle);
  padding: 0.35rem 1rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.landing-section-themed .landing-section-label {
  color: var(--landing-section-accent);
  background: var(--landing-section-chip);
}

.landing-section-title {
  font-family: var(--landing-font-display);
  font-size: clamp(2.5rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--landing-ink);
  margin-bottom: 0.75rem;
}

.landing-section-subtitle {
  font-size: 1.3rem;
  color: var(--landing-ink-secondary);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ============================================================================
   TABS
   ============================================================================ */

.landing-tabs {
  margin-bottom: 2.5rem;
}

.landing-tab-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}

.landing-tab-bar::-webkit-scrollbar {
  display: none;
}

.landing-tab-btn {
  position: relative;
  padding: 0.7rem 1.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--landing-ink-secondary);
  background: var(--landing-surface);
  border: 1.5px solid var(--landing-border);
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  letter-spacing: 0;
  flex-shrink: 0;
}

.landing-tab-btn:hover {
  color: var(--landing-ink);
  border-color: rgba(9, 105, 218, 0.3);
  background: rgba(9, 105, 218, 0.04);
}

.landing-tab-btn.active {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(135deg, var(--landing-gradient-start), var(--landing-gradient-end));
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(9, 105, 218, 0.25);
}

.landing-tab-num {
  font-size: 0.95rem;
  font-weight: 700;
  margin-right: 0.3rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.landing-tab-btn.active .landing-tab-num {
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================================
   CAROUSEL (mobile only)
   ============================================================================ */

.landing-carousel-wrapper {
  position: relative;
}

.landing-carousel-arrow {
  display: none;
}

.landing-carousel-footer {
  display: none;
}

/* ============================================================================
   TAB CONTENT
   ============================================================================ */

.landing-tab-panels {
  position: relative;
  margin-top: 2rem;
}

.landing-tab-panel {
  display: none;
  opacity: 0;
  animation: landingFadeIn 0.25s ease forwards;
}

.landing-tab-panel.active {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4.5rem;
  align-items: start;
}

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

.landing-tab-text {
  padding-top: 0.5rem;
}

.landing-tab-title {
  font-family: var(--landing-font-display);
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--landing-ink);
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.landing-tab-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.landing-tab-features li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--landing-ink-secondary);
}

.landing-tab-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--landing-primary);
  opacity: 0.5;
}

.landing-tab-features li strong {
  color: var(--landing-ink);
  font-weight: 600;
}

/* Screenshot placeholder */
.landing-tab-visual {
  background: var(--landing-surface-alt);
  border: 1px solid var(--landing-border);
  border-radius: 10px;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 6px 24px rgba(0, 0, 0, 0.06);
}

.landing-tab-visual-placeholder {
  font-size: 0.85rem;
  color: var(--landing-ink-tertiary);
  text-align: center;
  padding: 2rem;
  line-height: 1.5;
}

/* Tab visual that wraps an inline auto-playing demo video. The whole tile
   doubles as a click target that opens the same fullscreen modal used by
   the At-a-Glance cards. */
.landing-tab-visual-video {
  position: relative;
  cursor: pointer;
  padding: 0;
  /* The video fills its grid cell; height comes from the inline aspect-ratio
     (set in HTML from measured dimensions, confirmed by JS once metadata
     loads). min-width guarantees the video stays large enough to be useful
     even on portrait/square aspects; the cell width is otherwise driven by
     the grid track below. */
  width: 100%;
  height: auto;
  min-width: 480px;
  justify-self: stretch;
}

/* When a tab panel hosts a video visual, the text column gets a fixed width
   so copy stays consistent across tab switches and doesn't reflow based on
   the video's aspect ratio. The visual column claims all remaining space
   with a minimum width floor so even portrait clips render at a usable size
   (their height grows to match the aspect ratio). */
.landing-tab-panel.active:has(.landing-tab-visual-video) {
  grid-template-columns: 460px minmax(480px, 1fr);
}

.landing-tab-visual-video:focus-visible {
  outline: 2px solid var(--landing-accent, #4285f4);
  outline-offset: 3px;
}

.landing-tab-video {
  width: 100%;
  height: 100%;
  /* contain (not cover) so the full frame is visible even if the container
     aspect-ratio is off from the video by a hair. */
  object-fit: contain;
  display: block;
  background: var(--landing-surface-alt);
}

.landing-video-restart {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.landing-video-restart:hover,
.landing-video-restart:focus-visible {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-1px);
  outline: none;
}

.landing-tab-visual-expand {
  position: absolute;
  top: 0.75rem;
  right: 3.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.landing-tab-visual-video:hover .landing-tab-visual-expand,
.landing-tab-visual-video:focus-visible .landing-tab-visual-expand {
  opacity: 1;
  transform: translateY(0);
}

/* On narrow desktops/tablets too narrow to fit fixed text (460px) + min
   video (480px) plus the gap, stack video panels into a single column so
   the video keeps a usable size. Placeholder panels (without video) still
   use the default 1fr / 1.3fr layout above this breakpoint. Range is
   bounded to (769px, 1100px] so the dedicated mobile rule below is the
   sole owner of styling at <=768px. */
@media (min-width: 769px) and (max-width: 1100px) {
  .landing-tab-panel.active:has(.landing-tab-visual-video) {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .landing-tab-panel.active:has(.landing-tab-visual-video) .landing-tab-text {
    order: 2;
  }

  .landing-tab-panel.active:has(.landing-tab-visual-video) .landing-tab-visual-video {
    order: 1;
    min-width: 0;
    width: 100%;
    max-width: 720px;
    justify-self: center;
  }
}

@media (max-width: 768px) {
  .landing-tab-visual-expand {
    opacity: 1;
    transform: none;
    font-size: 0.65rem;
    padding: 0.3rem 0.55rem;
  }

  .landing-video-restart {
    width: 2rem;
    height: 2rem;
  }

  /* On mobile the panel collapses to a single column; the video extends
     edge-to-edge across the viewport (escaping both the section and tab-
     panels horizontal padding) to maximize viewing area. Borders and
     border-radius are dropped so the bleed feels intentional rather than
     a clipped card. The inline aspect-ratio attribute drives height.
     The selector matches the specificity of the 1100px rule above so it
     wins on mobile via source order. */
  .landing-tab-panel.active:has(.landing-tab-visual-video) {
    grid-template-columns: 1fr;
  }

  /* Collapse all the vertical gap between the tab pills and the video so
     the page background does not leak through as a white band. The video
     is full-bleed so any margin/padding above it reads as a stark stripe. */
  .landing-tabs {
    margin-bottom: 1rem !important;
  }
  .landing-tab-panels {
    margin-top: 0.85rem !important;
  }
  .landing-carousel-wrapper {
    margin-top: 0 !important;
  }

  .landing-tab-panel.active:has(.landing-tab-visual-video) .landing-tab-visual-video,
  .landing-tab-visual.landing-tab-visual-video {
    height: auto;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    justify-self: stretch;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

.landing-section:nth-child(even) .landing-tab-visual {
  background: var(--landing-surface);
}

/* ----------------------------------------------------------------------------
   Video loading indicator
   ----------------------------------------------------------------------------
   Spinner + label centered over a semi-transparent dark scrim. Hidden by
   default; revealed when the parent video container has `is-video-loading`.
   The scrim works on both light backgrounds (hero, tab visuals) and the
   dark modal backdrop, so a single style serves all three contexts.
---------------------------------------------------------------------------- */
.landing-video-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: rgba(15, 22, 41, 0.55);
  color: #fff;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.is-video-loading .landing-video-loader {
  opacity: 1;
}

.landing-video-loader-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  animation: landingVideoSpin 0.85s linear infinite;
}

.landing-video-loader-label {
  font-family: var(--landing-font);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

@keyframes landingVideoSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .landing-video-loader-spinner {
    width: 28px;
    height: 28px;
    border-width: 2.5px;
  }
  .landing-video-loader-label {
    font-size: 0.65rem;
  }
}

/* ============================================================================
   CANDIDATE SECTION: MANIFESTO
   "Relative intelligence for astute investors" - centered editorial callout.
   ============================================================================ */

.landing-manifesto {
  position: relative;
  padding: 6.5rem 2rem;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(118, 185, 0, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(66, 133, 244, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--landing-surface) 0%, var(--landing-surface-alt) 100%);
  border-top: 1px solid var(--landing-border);
  border-bottom: 1px solid var(--landing-border);
  overflow: hidden;
}

.landing-manifesto-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.landing-manifesto-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--landing-primary);
  background: var(--landing-primary-subtle);
  border: 1px solid hsl(214 80% 85%);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
}

.landing-manifesto-headline {
  font-family: var(--landing-font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--landing-ink);
  margin: 0 0 1.75rem;
}

.landing-manifesto-headline em {
  font-style: italic;
  background: linear-gradient(100deg, #76B900 0%, #4285F4 50%, #2563eb 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: heroHeadlineShimmer 7s ease-in-out infinite;
}

.landing-manifesto-body {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--landing-ink-secondary);
  max-width: 720px;
  margin: 0 auto 1rem;
}

.landing-manifesto-body strong {
  color: var(--landing-ink);
  font-weight: 600;
}

/* ============================================================================
   CANDIDATE SECTION: WHY RELATIVE PERFORMANCE MATTERS
   Two-column "deep why" section, complements the existing problem/solution.
   ============================================================================ */

/* ============================================================================
   STATS STRIP
   ============================================================================ */

.landing-stats {
  padding: 4rem 2rem;
  background: var(--landing-surface);
  border-top: 1px solid var(--landing-border);
  border-bottom: 1px solid var(--landing-border);
}

.landing-stats-inner {
  max-width: var(--landing-content-max);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.landing-stat {
  text-align: center;
}

.landing-stat-value {
  font-family: var(--landing-font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--landing-ink);
  line-height: 1.2;
}

.landing-stat-label {
  font-size: 1rem;
  color: var(--landing-ink-tertiary);
  margin-top: 0.25rem;
  letter-spacing: 0.01em;
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.landing-footer {
  padding: 2.5rem 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--landing-ink-tertiary);
}

.landing-footer-inner {
  max-width: var(--landing-content-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.landing-footer-links {
  display: flex;
  gap: 1.25rem;
}

.landing-footer-links a {
  color: var(--landing-ink-tertiary);
  text-decoration: none;
  transition: color 0.15s;
}

.landing-footer-links a:hover {
  color: var(--landing-ink-secondary);
}

/* ============================================================================
   MOBILE MODAL
   ============================================================================ */

.landing-mobile-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--landing-surface);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.landing-mobile-modal.active {
  display: flex;
  flex-direction: column;
  animation: modalFadeIn 0.25s ease;
}

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

.landing-mobile-modal-content {
  padding: 3.5rem 1.75rem 2.5rem;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.landing-mobile-modal-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--landing-ink-tertiary);
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}

.landing-mobile-modal-close:hover {
  color: var(--landing-ink);
}

.landing-mobile-modal-content h2 {
  font-family: var(--landing-font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--landing-ink);
  margin-bottom: 1rem;
  line-height: 1.25;
}

.landing-mobile-modal-content p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--landing-ink-secondary);
  margin-bottom: 0.75rem;
}

.landing-mobile-modal-hint {
  font-weight: 600;
  color: var(--landing-ink) !important;
  margin-top: 0.5rem;
  margin-bottom: 1.25rem !important;
}

.landing-mobile-modal-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.landing-mobile-modal-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 320px;
  padding: 0.95rem 1.25rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--landing-gradient-start), var(--landing-gradient-end));
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(9, 105, 218, 0.25);
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.landing-mobile-modal-copy:hover {
  box-shadow: 0 6px 18px rgba(9, 105, 218, 0.35);
}

.landing-mobile-modal-copy:active {
  transform: scale(0.98);
}

.landing-mobile-modal-copy.is-copied {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
}

.landing-mobile-modal-copy-feedback {
  font-size: 0.85rem;
  color: #16a34a;
  font-weight: 600;
  min-height: 1.2em;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.landing-mobile-modal-copy-feedback.is-visible {
  opacity: 1;
}

.landing-mobile-modal-or {
  font-size: 0.9rem !important;
  color: var(--landing-ink-tertiary) !important;
  margin: 0.5rem 0 1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.landing-mobile-modal-video {
  width: 100%;
  margin-top: 0.5rem;
}

.landing-mobile-modal-video .landing-hero-video-placeholder {
  aspect-ratio: 2392 / 2160;
  max-height: 70vh;
  margin: 0 auto;
}

.landing-mobile-modal-video .landing-hero-video {
  object-fit: cover;
}

/* ============================================================================
   MOBILE
   ============================================================================ */

@media (max-width: 768px) {
  :root {
    --landing-section-padding: 4rem 0;
    --landing-content-max: 100%;
  }

  .landing-hero {
    padding: 4rem 1rem 3rem;
  }

  .landing-hero-headline {
    padding: 0;
  }

  .landing-story {
    padding: 3rem 1.5rem;
  }

  .landing-story-label {
    font-size: 1.4rem;
  }

  .landing-story-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .landing-story-claim {
    margin-top: 1.8rem;
    font-size: 1.3rem;
    line-height: 1.38;
  }

  .landing-quote-carousel {
    padding: 2.75rem 0.9rem 3rem;
  }

  .landing-quote-carousel-header {
    margin-bottom: 1.35rem;
  }

  .landing-quote-carousel-stage {
    position: relative;
    display: block;
  }

  .landing-quote-carousel-title {
    font-size: 2rem;
    line-height: 1.12;
  }

  .landing-quote-carousel-subtitle {
    max-width: 24rem;
    font-size: 1rem;
    line-height: 1.45;
  }

  .landing-quote-card {
    padding: 1.75rem 1.35rem 1.55rem;
    border-radius: 20px;
  }

  .landing-quote-card::before {
    left: 0.9rem;
    top: 0.55rem;
    font-size: 3.9rem;
  }

  .landing-quote-text {
    font-size: 1.62rem;
    line-height: 1.3;
  }

  .landing-quote-author,
  .landing-quote-context,
  .landing-quote-carousel-counter {
    font-size: 0.88rem;
  }

  .landing-quote-carousel-arrow {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 34px;
    z-index: 3;
    transform: translateY(-50%);
  }

  .landing-quote-carousel-arrow:hover,
  .landing-quote-carousel-arrow:focus-visible {
    transform: translateY(-50%) scale(1.02);
  }

  .landing-quote-carousel-arrow-prev {
    left: -0.55rem;
  }

  .landing-quote-carousel-arrow-next {
    right: -0.55rem;
  }

  .landing-quote-carousel-slides {
    margin: 0;
  }

  .landing-quote-carousel-footer {
    margin-top: 0.85rem;
  }

  /* Why section mobile: stack vertically with horizontal dividers */
  .landing-why {
    padding: 4rem 1.25rem;
  }

  .landing-why-headline {
    font-size: 2.1rem;
  }

  .landing-why-lead {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
  }

  .landing-why-points {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .landing-why-points li {
    padding: 0;
  }

  .landing-why-points li + li::before {
    /* Switch from vertical to horizontal divider on mobile */
    left: 10%;
    right: 10%;
    top: -0.875rem;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      var(--landing-border) 20%,
      var(--landing-border) 80%,
      transparent 100%
    );
  }

  .landing-why-point-num {
    font-size: 1.75rem;
  }

  .landing-why-point-title {
    font-size: 1.35rem;
  }

  .landing-story-card {
    padding: 1.5rem 1.75rem;
  }

  .landing-story-card p {
    font-size: 1rem;
  }

  /* At a Glance: collapse the 4-up grid into a single column on phones */
  .landing-glance {
    padding: 3.5rem 1.25rem 4rem;
  }

  .landing-glance-header {
    margin-bottom: 2.25rem;
  }

  .landing-glance-headline {
    font-size: 1.85rem;
  }

  .landing-glance-subtitle {
    font-size: 1rem;
  }

  .landing-glance-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .landing-glance-card {
    padding: 1.4rem 1.5rem 1.3rem;
  }

  .landing-glance-card-title {
    font-size: 1.1rem;
  }

  .landing-glance-card-body {
    font-size: 0.95rem;
  }

  .landing-nav-cta {
    display: none;
  }

  .landing-nav-inner {
    justify-content: center;
  }

  .landing-hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.5rem;
    text-align: center;
  }

  .landing-hero-headline {
    grid-column: 1;
    font-size: 2.8rem;
    margin-bottom: 1.25rem;
  }

  .landing-hero-copy {
    grid-column: 1;
    grid-row: auto;
    text-align: center;
  }

  .landing-hero-media {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
    align-self: auto;
    width: 100vw;
    max-width: 100vw;
    justify-self: stretch;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .landing-hero-media .landing-hero-video-placeholder {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    min-height: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .landing-hero-bottom {
    grid-column: 1;
    grid-row: auto;
    text-align: center;
    margin-top: 0;
  }

  .landing-hero-bullets {
    gap: 0.75rem;
    text-align: left;
  }

  .landing-hero-bullets li {
    font-size: 1rem;
    padding-left: 2.25rem;
  }

  .landing-hero-bullets li::before {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.85rem;
  }

  .landing-hero-badges-label {
    font-size: 0.7rem;
  }

  .landing-hero-badges {
    justify-content: center;
    gap: 0.35rem;
  }

  .landing-badge {
    padding: 0.3rem 0.65rem 0.3rem 0.5rem;
    font-size: 0.7rem;
    gap: 0.3rem;
  }

  .landing-badge-icon {
    width: 12px;
    height: 12px;
  }

  .landing-hero-cta-group {
    align-items: center;
  }

  .landing-section-inner {
    padding: 0 1.25rem;
  }

  .landing-tab-panel.active {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .landing-tab-text {
    order: 2;
  }

  .landing-tab-visual {
    order: 1;
  }

  .landing-tab-btn {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
  }

  /* Tab bar: scrollable with edge padding so first/last aren't clipped,
     plus a fade-out gradient on right edge to hint at horizontal scrolling. */
  .landing-tabs {
    position: relative;
  }

  .landing-tab-bar {
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0 1.25rem;
    scroll-padding: 0 1.25rem;
  }

  .landing-tabs::before,
  .landing-tabs::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 8px;
    width: 24px;
    pointer-events: none;
    z-index: 2;
  }

  .landing-tabs::before {
    left: 0;
    background: linear-gradient(to right, var(--landing-surface), transparent);
  }

  .landing-tabs::after {
    right: 0;
    background: linear-gradient(to left, var(--landing-surface), transparent);
  }

  .landing-section:nth-child(even) .landing-tabs::before {
    background: linear-gradient(to right, var(--landing-surface-alt), transparent);
  }

  .landing-section:nth-child(even) .landing-tabs::after {
    background: linear-gradient(to left, var(--landing-surface-alt), transparent);
  }

  /* Once the visual goes full-bleed, these edge fades sit on top of the
     video and look like white side borders. Hide them on mobile. */
  .landing-tabs::before,
  .landing-tabs::after {
    display: none;
  }

  .landing-tab-title {
    font-size: clamp(1.65rem, 5.8vw, 1.95rem);
    line-height: 1.2;
  }

  .landing-tab-features li {
    font-size: 1rem;
  }

  /* -- Carousel arrows ---------------------------------------------------- */
  .landing-carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--landing-surface);
    border: 1.5px solid var(--landing-border);
    color: var(--landing-primary);
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .landing-carousel-arrow:active {
    transform: translateY(-50%) scale(0.92);
    background: var(--landing-primary-subtle);
  }

  .landing-carousel-arrow-prev {
    left: -0.25rem;
  }

  .landing-carousel-arrow-next {
    right: -0.25rem;
  }

  /* First-time hint animation */
  @keyframes carouselArrowHint {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    20% { transform: translateY(-50%) translateX(6px); }
    40% { transform: translateY(-50%) translateX(0); }
    60% { transform: translateY(-50%) translateX(6px); }
    80% { transform: translateY(-50%) translateX(0); }
  }

  .landing-carousel-arrow--hint {
    animation: carouselArrowHint 1.4s ease-in-out;
    box-shadow: 0 0 0 0 rgba(9, 105, 218, 0.6), 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .landing-carousel-arrow--hint::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--landing-primary);
    opacity: 0.6;
    animation: carouselArrowPulse 1.4s ease-out;
    pointer-events: none;
  }

  @keyframes carouselArrowPulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  /* -- Carousel footer (counter + dots) ----------------------------------- */
  .landing-carousel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: 0 1.25rem;
  }

  .landing-carousel-counter {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--landing-ink-tertiary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }

  .landing-carousel-dots {
    display: flex;
    gap: 0.45rem;
    align-items: center;
  }

  .landing-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--landing-border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .landing-carousel-dot.active {
    width: 22px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--landing-gradient-start), var(--landing-gradient-end));
  }

  /* Push panel content away from arrow buttons on mobile so they don't overlap */
  .landing-tab-panels {
    padding: 0 2.75rem;
  }

  .landing-stats-inner {
    gap: 1.5rem 2rem;
  }

  .landing-footer-inner {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Manifesto + Why mobile */
  .landing-manifesto {
    padding: 4rem 1.25rem;
  }

  .landing-manifesto-body {
    font-size: 1.05rem;
  }

  /* Speed section mobile */
  .landing-speed {
    padding: 4rem 1.25rem;
  }

  .landing-speed-sub {
    font-size: 1.05rem;
    margin-bottom: 2rem;
  }

  .landing-speed-stats {
    gap: 1.5rem 2rem;
  }

  .landing-speed-stat {
    min-width: 130px;
  }

  .landing-speed-orb {
    filter: blur(60px);
    opacity: 0.32;
  }
}

@media (max-width: 480px) {
  .landing-hero-headline {
    font-size: 2.4rem;
  }

  .landing-hero-cta {
    width: 100%;
    justify-content: center;
  }

  .landing-badge {
    font-size: 0.65rem;
    padding: 0.25rem 0.55rem;
  }

  .landing-tab-panel.active {
    gap: 1.25rem;
  }

  .landing-tab-title {
    font-size: 1.9rem;
    line-height: 1.18;
  }

  .landing-tab-features li {
    font-size: 0.95rem;
  }
}

/* ============================================================================
   FEATURE-VIDEO MODAL
   Triggered by clicking an "At a Glance" card with a data-video attribute.
   Almost-full-screen on desktop, edge-to-edge on mobile, dark backdrop with
   a soft blur. The single <video> element is reused; src is set per click.
   ============================================================================ */

.landing-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.landing-video-modal[aria-hidden="false"] {
  display: flex;
  animation: landingVideoModalFade 0.18s ease-out;
}

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

.landing-video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 22, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.landing-video-modal-frame {
  position: relative;
  width: 100%;
  max-width: 1200px;
  max-height: calc(100vh - 5rem);
  background: #0a0e1a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}

.landing-video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem 0.85rem 1.4rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-video-modal-title {
  margin: 0;
  font-family: var(--landing-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: -0.005em;
}

.landing-video-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.landing-video-modal-close:hover,
.landing-video-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
  outline: none;
}

.landing-video-modal-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.landing-video-modal-video {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  display: block;
  background: #000;
}

body.landing-modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .landing-video-modal {
    padding: 0;
  }

  .landing-video-modal-frame {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .landing-video-modal-video {
    max-height: calc(100vh - 4rem);
  }

  .landing-video-modal-stage .landing-video-restart {
    top: 0.85rem;
    right: 0.85rem;
  }

  .landing-glance-card-play {
    top: 0.7rem;
    right: 0.7rem;
    padding: 0.25rem 0.55rem 0.25rem 0.5rem;
    font-size: 0.6rem;
  }

  .landing-glance-tip {
    font-size: 0.85rem;
    padding: 0.4rem 0.85rem;
  }
}