/* ============================================
   OPTION C — Minimal Light
   Light hero, split layout, compact icon features,
   cursor-tracking ripple, editorial feel
   ============================================ */

/* Hero — Light background, split layout */
.hero--light {
  background: #FAFBFE !important;
  min-height: auto !important;
  padding: 7rem 0 4rem !important;
}

.hero--light .hero__title {
  color: var(--color-text) !important;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -0.035em;
}

/* ============ CINEMATIC SHIMMER — same family as ShimmeringAppTitle in
   the macOS app. A bright band sweeps left-to-right through a text-shaped
   mask once per cycle, then stays invisible until the next loop. The host
   element keeps its base color (so the text is fully readable for SEO and
   from the very first paint); the shimmer is purely a pseudo-element
   overlay clipped to the text shape — disabling it has zero visual cost.

   The host needs a `data-text` attribute matching its text content so the
   pseudo-element can render the same letterforms as the mask source. */
.cinematic-shine {
  position: relative;
  display: inline-block;
}
.cinematic-shine::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.05) 42%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0.32) 58%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: 250% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  filter: blur(0.6px);
  opacity: 0;
  animation: cinematic-shine 15s ease-in-out infinite;
}
.cinematic-shine--delayed::after { animation-delay: 2s; }
/* Third stage in the cascade — used by the pricing-card "Buy Now" CTA.
   Fires 3 seconds after the second stage (the hero), so 5s total delay. */
.cinematic-shine--cascade-3::after { animation-delay: 5s; }
/* Variant for elements whose base text is white/light. The default white
   shimmer would be invisible against white letterforms (white on white).
   This swaps the band for a deep-navy tint at moderate alpha, so the
   letters briefly dim into a polished-metal ribbon as the band passes
   through, then return to solid white. The text's actual color does not
   change — the pseudo just overlays a translucent darker fill clipped
   to the text shape during the sweep window. */
.cinematic-shine--on-light::after {
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(8, 24, 60, 0.10) 42%,
    rgba(8, 24, 60, 0.62) 50%,
    rgba(8, 24, 60, 0.24) 58%,
    transparent 70%
  );
}
/* Full-button cinematic shimmer — for solid CTAs where text-clipped shimmer
   would be invisible (e.g. white text on a colored fill). The band sweeps
   across the entire button surface, clipped to the button's bounds via
   overflow:hidden. Reuses the same `cinematic-shine` keyframes so it stays
   in cascade sync with the text shimmers (Nav 0s → Hero 2s → Buy Now 5s). */
.cinematic-shine-btn {
  position: relative;
  overflow: hidden;
}
.cinematic-shine-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.10) 42%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.22) 58%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: 250% 0;
  background-repeat: no-repeat;
  opacity: 0;
  animation: cinematic-shine 15s ease-in-out infinite;
  animation-delay: 4s;
  border-radius: inherit;
  z-index: 1;
  filter: blur(1px);
}
.cinematic-shine-btn.cinematic-shine--paused::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .cinematic-shine-btn::after { animation: none; display: none; }
}

/* Toggled by main.js via IntersectionObserver — pauses the CSS animation
   when the host element scrolls out of view. Zero work while paused; the
   browser stops sampling the animation. Resumes from where it stopped. */
.cinematic-shine.cinematic-shine--paused::after { animation-play-state: paused; }

/* Sweep band travels left → right by reducing background-position from 250%
   (peak off-screen-left) down to -50% (peak off-screen-right). The visible
   sweep occupies ~40% of the cycle (~6s of 15s) so the band crosses the
   text slowly enough to read like a film light. The remaining 60% is the
   quiet period between loops. */
@keyframes cinematic-shine {
  0%   { background-position: 250% 0; opacity: 0; }
  2%   { opacity: 1; }
  42%  { background-position: -50% 0; opacity: 1; }
  46%  { opacity: 0; }
  100% { background-position: -50% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-shine::after { animation: none; display: none; }
}

.hero--light .hero__subtitle {
  color: var(--color-text-muted) !important;
  font-size: 1.0625rem;
}

.hero__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  text-align: left !important;
}

.hero__left .hero__ctas {
  justify-content: flex-start !important;
}

.hero--light .btn--outline {
  color: var(--color-text) !important;
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  backdrop-filter: none !important;
}

.hero--light .btn--outline:hover {
  background: var(--color-bg-alt) !important;
  color: var(--color-text) !important;
  border-color: rgba(0,0,0,0.15) !important;
}

/* Eyebrow with chip */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.hero__eyebrow-chip {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  padding: 0.2rem 0.625rem;
  border-radius: 980px;
  background: rgba(51, 102, 204, 0.08);
  border: 1px solid rgba(51, 102, 204, 0.15);
}

/* BETA chip — amber tone signals "in development / expect rough edges"
   without being alarming the way red would. Sits next to the standard
   eyebrow chip in the hero so visitors see the status before reading
   the title. The aria-label spells out "Beta release" for screen
   readers (the visible "BETA" alone reads as an acronym). */
.hero__eyebrow-chip--beta {
  color: #b45309;
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.30);
  letter-spacing: 0.10em;
}

/* Trust line */
.hero__trust {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Dual-display container */
.hero__displays {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

/* Device SVG illustration */
.hero__device {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__device-svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.08));
  /* Allow the sun-ray aura around the popover to paint past the SVG's
     CSS box. The rays are drawn at user-space coords that extend ~140
     units past the popover centre, which exceeds the 0..220 viewBox
     bounds in some directions. Without this, the rays clip hard at
     the SVG's edge — defeating the "visible outside the screen" intent.
     Layout is unaffected: the SVG's box still respects max-width, only
     the painted area extends. */
  overflow: visible;
}

/* Vertical ultra-wide (Corsair Xeneon Edge style) */
.hero__device--vertical {
  flex-shrink: 0;
}

.hero__device-svg--vertical {
  max-width: 100px;
  height: auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.12));
}

/* ═══ Hero TG menu popover ═══════════════════════════════════════════
   The menu-bar status item + drop-down popover that mirror the real
   app. Auto-opens on a loop so first-time visitors see the product
   surface within a few seconds. The icon pulses gently between
   open/close cycles to advertise interactivity without being noisy.

   transform-box: fill-box anchors the scale at the popover's own
   bounding box (top-center via transform-origin) so it grows from the
   menu icon rather than from the SVG origin. */

.hero-menu-icon {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: hero-menu-icon-pulse 3.4s ease-in-out infinite;
}
@keyframes hero-menu-icon-pulse {
  0%, 70%, 100% { filter: drop-shadow(0 0 0 rgba(91,155,245,0)); transform: scale(1); }
  78%, 86%      { filter: drop-shadow(0 0 3.5px rgba(91,155,245,0.95)); transform: scale(1.05); }
}

.hero-menu-popover {
  transform-box: fill-box;
  transform-origin: 80% 0%;
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
  animation: hero-menu-popover-cycle 13s ease-in-out infinite;
  animation-delay: 1.6s;
  /* SVG drop-shadow for the godlike halo. We layer this on top of the
     in-SVG ellipse halo: the SVG halo gives the soft blue bloom; this
     filter adds the crisp depth shadow underneath the popover body. */
  filter: drop-shadow(0 6px 18px rgba(91, 155, 245, 0.35))
          drop-shadow(0 2px 6px rgba(20, 30, 60, 0.45));
}
@keyframes hero-menu-popover-cycle {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.9); }
  6%   { opacity: 1; transform: translateY(0) scale(1.02); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(0) scale(1); }
  68%  { opacity: 0; transform: translateY(-4px) scale(0.95); }
  100% { opacity: 0; transform: translateY(-6px) scale(0.9); }
}

/* Light-ray aura behind the popover. Continuous slow rotation handled
   by SMIL inside the SVG; this keyframe drives only the opacity so the
   aura appears with the popover and fades out with it. The peak is
   intentionally lower than the popover body so the rays read as
   ambient atmosphere rather than as competing UI. */
.hero-menu-rays {
  opacity: 0;
  animation: hero-menu-rays-cycle 13s ease-in-out infinite;
  animation-delay: 1.6s;
  /* mix-blend: screen makes the rays read as light ON the dark monitor
     surface — bright pixels brighten the underlying gradient instead
     of replacing it. Falls back to normal blending on browsers that
     don't support it (still looks fine, just less ethereal). */
  mix-blend-mode: screen;
}
@keyframes hero-menu-rays-cycle {
  0%, 100% { opacity: 0; }
  6%       { opacity: 0.65; }   /* matches popover open frame */
  10%      { opacity: 0.9; }
  60%      { opacity: 0.9; }
  68%      { opacity: 0; }      /* fade out with popover close */
}

@media (prefers-reduced-motion: reduce) {
  .hero-menu-icon { animation: none; }
  .hero-menu-popover {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* Hide rays under reduced-motion rather than leaving a static
     starburst — a frozen ray pattern over the popover would read as
     a graphic glitch, not a deliberate decoration. */
  .hero-menu-rays { opacity: 0; }
}

/* Nav — always dark text for light hero page */
.nav__logo { color: var(--color-text) !important; }
.nav__links a { color: var(--color-text-muted) !important; }
.nav__links a:hover { color: var(--color-text) !important; }
.nav__hamburger span { background: var(--color-text) !important; }

/* Download button — always clear bg, dark text. Fight liquid-glass inline styles */
.nav__cta,
.nav__cta.liquid-glass,
.btn.nav__cta {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-text) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
}

.nav__cta:hover,
.nav__cta.liquid-glass:hover,
.btn.nav__cta:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--color-text) !important;
}

/* Hide elements from base design not used here */
.hero__bg-glow, .hero__app-icon, .hero__illustration, .hero__badges, .hero__meta,
.features__grid, .features__highlights, .steps__grid, .step__connector, .pricing__card,
.feature-list, .feature-row, .feature-compact, .compat__featured, .compat__brands,
.compat__requirements, .footer__grid, .footer__bottom, .footer__minimal, .footer__top,
.footer__bottom-bar {
  display: none !important;
}

/* Section spacing — airy below hero */
.section--tight { padding: 2.5rem 0 !important; }

/* ============ GESTURE GRID — 4x2 with real icons, no borders ============ */
.gesture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
  max-width: 920px;
  margin: 1.25rem auto 0;
}

.gesture-grid__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  transition: background 0.2s;
}

.gesture-grid__item:hover {
  background: var(--color-bg-alt);
}

/* The OUTER box is always 40×40 so the text label after the icon starts
   at the same x-position across every card — important for visual line-up
   in both the 4-column desktop and 2-column mobile layouts. The drawn
   icon content can still be smaller (32×32) for shapes the designer
   wanted denser visual weight on; we shrink the IMAGE inside the box via
   padding rather than shrinking the box itself. object-fit:contain
   respects the content area so the SVG scales to fit inside the padding. */
.gesture-grid__icon {
  flex-shrink: 0;
  display: block;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  object-fit: contain;
}

.gesture-grid__icon--compact {
  /* Box stays 40×40; padding gives a 32×32 inner content area so the icon
     renders at its intended denser size (40 − 2×4 = 32). */
  padding: 4px;
}

.gesture-grid__item strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.gesture-grid__item span {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.tools-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  max-width: 680px;
  margin: 0.875rem auto 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.tools-strip__label {
  font-weight: 700;
  color: var(--color-text);
}

.tools-strip span:not(.tools-strip__label) {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}

/* ============ HIGHLIGHTS ROW — 3 airy columns ============ */
.highlights-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.highlight-block__icon {
  color: var(--color-accent);
  margin-inline: auto;
  margin-bottom: 0.625rem;
}

.highlight-block h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.highlight-block p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 260px;
  margin-inline: auto;
}

/* Xeneon banner — full width, horizontal */
.xeneon-banner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.xeneon-banner__left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.xeneon-banner__badge {
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  background: var(--color-accent);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}

.xeneon-banner__left h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}

.xeneon-banner__desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Smaller section subtitle */
.section__subtitle {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.375rem;
}

/* ============ PRICING TIERS (Personal [default] + legacy Business) ============ */
.pricing-faq-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  max-width: 1040px;
  margin: 1.75rem auto 0;
}

.pricing-faq-split__offer {
  width: 100%;
  max-width: 470px;
  justify-self: start;
  padding: 0.6rem 0 1rem;
}

.pricing-faq-split__faq {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.pricing-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: stretch;
  margin: 2rem auto 3rem;
  max-width: 920px;
}

/* Single-column variant used since the volume card was moved into a modal.
   Centers the Personal card cleanly instead of letting it stretch full-width. */
.pricing-tiers--single {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0 0 1rem;
}

/* Small discreet link that replaces the former second column. */
.pricing-secondary-link {
  text-align: left;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  max-width: none;
  padding-left: 0.125rem;
}

.pricing-secondary-link a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

.pricing-secondary-link a:hover {
  text-decoration: underline;
}

.pricing-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  background: #FFFFFF;
  border: 1px solid rgba(31, 42, 71, 0.11);
  border-radius: var(--radius-lg);
  text-align: left;
  box-shadow: 0 18px 40px rgba(31, 42, 71, 0.08);
}

.pricing-minimal {
  max-width: 470px;
  justify-self: start;
  padding: 2rem 1.75rem 1.75rem;
  background: #FFFFFF;
  border: 1px solid rgba(31, 42, 71, 0.11);
  box-shadow: 0 18px 40px rgba(31, 42, 71, 0.08);
  border-radius: var(--radius-lg);
  text-align: left;
}

.pricing-minimal .btn {
  width: 100%;
}

/* Row that holds the pair of stacked pill badges ("Limited time" +
   "Introductory price"). Flex so they sit side-by-side with a small gap,
   wrapping on narrow viewports. */
.pricing-tier__badge-row {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.875rem;
}

.pricing-tier__badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Green badge — matches the "success"/"on-sale" semantic the user wants.
     Using an Apple-style muted-green palette so it reads as a positive
     highlight rather than an alarm / warning (which the prior orange
     implied). */
  color: #047857;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.26);
}
/* When the badges live inside .pricing-tier__badge-row they don't need
   their own bottom margin — the row handles spacing from the next element. */
.pricing-tier__badge-row .pricing-tier__badge { margin-bottom: 0; }

/* "Limited time" variant — blue so it reads as urgency/callout while
   staying on the brand accent palette (same hue as primary CTAs). */
.pricing-tier__badge--limited {
  color: var(--color-accent);
  background: rgba(51, 102, 204, 0.08);
  border-color: rgba(51, 102, 204, 0.22);
}

.pricing-tier__badge--alt {
  color: var(--color-text);
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

.pricing-tier__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.pricing-tier__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
  line-height: 1;
}

.pricing-tier__price-old {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.pricing-tier__price-new {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.pricing-tier__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.pricing-tier__cta {
  width: 100%;
  margin-top: auto;
}

.pricing-tier__note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.75rem;
  line-height: 1.5;
}

/* ── Bulk calculator (inside business tier) ── */
.bulk-calc {
  margin-bottom: 1rem;
}

.bulk-calc__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.bulk-calc__input-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.bulk-calc__step {
  width: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}

.bulk-calc__step:hover {
  background: rgba(0, 0, 0, 0.04);
}

.bulk-calc__input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  -moz-appearance: textfield;
}

.bulk-calc__input::-webkit-outer-spin-button,
.bulk-calc__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bulk-calc__input:focus {
  border-color: var(--color-accent);
}
.bulk-calc__input:focus-visible {
  outline: 2px solid #1A2550;
  outline-offset: 2px;
}

.bulk-calc__breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.875rem 1rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

.bulk-calc__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.bulk-calc__row--total {
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

/* ── FAQ (now full-width below pricing tiers) ── */
.faq-minimal {
  max-width: 720px;
  margin-inline: auto;
}

.pricing-faq-split__faq h3,
.faq-minimal h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-faq-split__faq h3 {
  text-align: left;
}

.faq-minimal h3 {
  text-align: center;
}

.faq-minimal .faq__question {
  font-size: 0.9375rem;
  padding: 0.75rem 0;
}

.pricing-faq-split__faq .faq__item {
  margin-inline: 0;
  padding-inline: 0;
}

.faq-minimal .faq__answer p {
  font-size: 0.875rem;
}

/* ============ FOOTER ============ */
.footer--light {
  background: var(--color-bg-alt) !important;
  padding: 2.5rem 0 1.25rem !important;
}

.footer__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.footer__brand { display: flex; flex-direction: column; gap: 0.5rem; }

.footer__logo-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.footer__logo-row img {
  flex-shrink: 0;
  align-self: center;
  /* Pull the icon up a few pixels so its optical centre aligns with the
     capital-letter band of "Touchscreen Gestures" — the shadow under the
     rounded-square mark weights the bbox downward and makes strict
     geometric centering feel low. */
  margin-top: -2px;
  /* Subtle cast shadow so the icon lifts off the light footer background
     without competing with the logo's own internal gradient. Using
     drop-shadow (not box-shadow) so it follows the rounded-square alpha
     shape instead of bleeding past the icon corners. */
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.1));
}

.footer__logo-row strong {
  font-size: 0.875rem;
  color: var(--color-text);
  /* Override .footer strong { margin-bottom: var(--space-sm); display: block }
     inherited from the base dark-footer rule. The block margin throws off
     align-items:center in the flex row, making the icon sit visually low
     relative to the text it's supposed to flank. */
  margin: 0;
  display: inline;
  line-height: 1.1;
}

.footer__ver {
  font-size: 0.5625rem;
  color: var(--color-text-muted);
  opacity: 0.7;
  /* Flex align-items:center on the logo row centres each child by box, but
     the tiny version label sits visually higher than the brand wordmark's
     cap-height midline because the small box has proportionally more
     leading below than above the glyphs. Nudge the version a couple of
     pixels down so its baseline reads as the optical centre of the
     "Touchscreen Gestures" wordmark next to it. */
  position: relative;
  top: 2px;
}

.footer__desc {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  max-width: 280px;
  opacity: 0.8;
}

.footer__links-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer__links-col strong {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.125rem;
}

.footer__links-col a {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: color 0.2s;
}

.footer__links-col a:hover { color: var(--color-text); }

.footer__bar {
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.625rem;
  color: var(--color-text-muted);
}

.footer__bar .footer__trademarks {
  width: 100%;
  margin-top: 0.5rem;
}

/* Base .footer__trademarks in style.css sets color to rgba(255,255,255,0.25),
   intended for the dark footer variant. On the light footer that's near-
   invisible — override to the muted dark-grey used elsewhere in the
   light footer bar so the legal/trademark line is actually readable. */
.footer--light .footer__trademarks {
  color: var(--color-text-muted);
  opacity: 0.85;
}

/* Trademarks notice shown immediately above the footer as its own block —
   separates the legal attribution from copyright / links while keeping it
   visually understated. Muted text + tight line-height so it reads as
   fine-print without competing with the real footer content above or below.
   Generous vertical padding so the fine-print sits as its own breathing
   block rather than being squished between sections. */
.trademarks-notice {
  padding: 2.75rem 0 2.25rem;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.trademarks-notice p {
  font-size: 0.625rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  opacity: 0.85;
  max-width: 960px;
  margin: 0 auto;
}

/* ============ USE CASES TRIGGER ============ */
.usecases-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}

.usecases-trigger:hover { opacity: 0.7; }

/* ============ USE CASES MODAL ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open {
  display: flex;
  animation: modal-fade-in 0.25s ease-out;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  position: relative;
  width: 90%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: 20px;
  border: 1px solid var(--color-border);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
  padding: 2rem;
  animation: modal-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-pop-in {
  from { transform: translateY(30px) scale(0.92); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 1.125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
  z-index: 1;
}

.modal__close:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.modal__header {
  margin-bottom: 1.5rem;
}

.modal__header h2 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

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

.modal__category {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  grid-column: 1 / -1;
}

.modal__category:first-child {
  margin-top: 0;
}

.modal__cat-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  padding: 0.15rem 0.5rem;
  background: rgba(51, 102, 204, 0.06);
  border-radius: 4px;
}

.modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.usecase {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  transition: background 0.2s, border-color 0.2s;
}

.usecase:hover {
  background: var(--color-bg-alt);
  border-color: rgba(0, 0, 0, 0.1);
}

.usecase__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--color-accent);
  padding: 4px;
  background: rgba(51, 102, 204, 0.06);
  border-radius: 8px;
}

.usecase__icon svg {
  width: 100%;
  height: 100%;
}

.usecase__text h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.usecase__text p {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ============ SUPPORT MODAL ============ */
.support__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.support__section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.support__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.support__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.support__field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
}

.support__field input,
.support__field select,
.support__field textarea {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition);
  resize: vertical;
}

.support__field input:focus,
.support__field select:focus,
.support__field textarea:focus {
  border-color: var(--color-accent);
}
.support__field input:focus-visible,
.support__field select:focus-visible,
.support__field textarea:focus-visible {
  outline: 2px solid #1A2550;
  outline-offset: 2px;
}

.support__field input::placeholder,
.support__field textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.support__submit {
  align-self: flex-start;
  margin-top: 0.75rem;
}

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

.support__note a {
  color: var(--color-accent);
}

.download-capture {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.25rem 0;
}

.download-capture__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.download-capture__field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
}

.download-capture__field input {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition);
}

.download-capture__field input:focus {
  border-color: var(--color-accent);
}
.download-capture__field input:focus-visible {
  outline: 2px solid #1A2550;
  outline-offset: 2px;
}

.download-capture__field input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.download-capture__turnstile {
  min-height: 70px;
}

.download-capture__fineprint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Modal scrollbar */
.modal::-webkit-scrollbar { width: 6px; }
.modal::-webkit-scrollbar-track { background: transparent; }
.modal::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }


/* ============ RESPONSIVE ============ */
/* Drop the gesture grid from 4 to 2 columns at 1024px (not 768px) —
   at 769–1024px four ~230px columns are barely enough for the icon +
   label and the grid feels stretched. Two centered columns capped at
   540px looks visually balanced from 320px all the way up to 1024px. */
@media (max-width: 1024px) {
  .gesture-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 540px;
  }
}

@media (max-width: 768px) {
  .hero__split {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center !important;
  }

  .hero__left .hero__ctas { justify-content: center !important; }
  .hero__trust { justify-content: center; }
  /* display:flex (not the default inline-flex from line 172) so the
     eyebrow takes its own line in the column flow. Without this, at
     642–768px the eyebrow's inline-flex sits next to the h1 (which is
     inline-block via .cinematic-shine), and "Touch your Mac." floats
     up onto the eyebrow's row instead of breaking below. */
  .hero__eyebrow { display: flex; justify-content: center; }
  .hero__right { order: -1; }
  .hero__device-svg { max-width: 300px; }
  .hero__displays { justify-content: center; }
  .hero__device-svg--vertical { max-width: 65px; }

  .feature-compact {
    grid-template-columns: 1fr;
  }

  .feature-compact__row {
    border-right: none !important;
  }

  .feature-compact__row:nth-child(5) {
    border-bottom: 1px solid var(--color-border);
  }

  .feature-compact__row:last-child {
    border-bottom: none;
  }

  .steps-minimal { flex-direction: column; }
  .step-min__arrow { transform: rotate(90deg); }

  .highlights-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .xeneon-banner { flex-direction: column; text-align: center; gap: 0.75rem; }
  .xeneon-banner__left { flex-direction: column; gap: 0.375rem; }
  .pricing-faq-split { grid-template-columns: 1fr; gap: 1.75rem; max-width: 480px; }
  .pricing-faq-split__offer,
  .pricing-minimal { max-width: none; }
  .pricing-faq-split__offer { padding: 0; }
  .pricing-tiers { grid-template-columns: 1fr; gap: 1.25rem; max-width: 480px; }
  .pricing-tier { padding: 1.5rem 1.25rem 1.25rem; }
  .pricing-tier__price-new { font-size: 2.5rem; }
  .pricing-secondary-link { text-align: center; padding-left: 0; }
  .pricing-faq-split__faq h3 { text-align: center; }
  .modal { padding: 1.5rem; max-height: 90vh; }
  .modal__grid { grid-template-columns: 1fr; }
  .usecases-trigger { justify-content: center; width: 100%; }
  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  .footer__brand { grid-column: 1 / -1; text-align: center; }
  .footer__brand .footer__logo-row { justify-content: center; }
  .footer__desc { margin-inline: auto; text-align: center; }
  .footer__links-col { align-items: center; text-align: center; }
  .footer__bar { flex-direction: column; gap: 0.25rem; text-align: center; }
}


/* ═══ HERO SHADOW VARIANT — APPLE KEYNOTE DEPTH ═══════════════════ */
.hero--light {
  position: relative;
  background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFE 45%, #EEF1F8 100%) !important;
  overflow: hidden;
}
.hero--light::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Soft vignette — darkens corners subtly to focus the eye on centre */
  background: radial-gradient(ellipse 90% 70% at center, transparent 55%, rgba(20, 30, 60, 0.06) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero--light .container { position: relative; z-index: 1; }
.hero__device-svg {
  /* Three-layer shadow: micro contact + mid distance + far ambient.
     Each layer is offset further down with a softer blur — gives the
     monitor real "lift off the page". */
  filter:
    drop-shadow(0 4px 8px rgba(20, 30, 60, 0.07))
    drop-shadow(0 16px 28px rgba(20, 30, 60, 0.10))
    drop-shadow(0 36px 64px rgba(20, 30, 60, 0.14)) !important;
}
.hero__device-svg--vertical {
  filter:
    drop-shadow(0 3px 6px rgba(20, 30, 60, 0.07))
    drop-shadow(0 12px 22px rgba(20, 30, 60, 0.10))
    drop-shadow(0 26px 48px rgba(20, 30, 60, 0.14)) !important;
}
.hero--light .hero__title {
  text-shadow: 0 1px 2px rgba(20, 30, 60, 0.05);
}


/* ═══ HERO GLOW — WIDE STAGE ═══════════════════════════════════════ */
.hero--light::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 35% at 50% 80%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 38%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}