/* Marketing storefront - light-mode only visual contract (CODING-CONVENTIONS.md #19).
   Do not reference --lvxd-* app tokens from lvxd-onboarding.css / lvxd-workspace.css here -
   this stylesheet is intentionally self-contained so the storefront never inherits dark mode. */

:root {
  --lvxd-sf-canvas: linear-gradient(180deg, oklch(99.3% 0.002 260) 0%, oklch(97.3% 0.006 260) 100%);
  --lvxd-sf-surface: oklch(100% 0 0);
  --lvxd-sf-surface-tint: oklch(98.2% 0.004 260);
  --lvxd-sf-border: oklch(94.5% 0.003 286.32);
  --lvxd-sf-text: oklch(21% 0.01 264);
  --lvxd-sf-text-muted: oklch(48% 0.014 264);
  /* 62% measured ~3.6:1 against --lvxd-sf-surface (white) - below WCAG AA's
     4.5:1 for normal-size text, and this token is used for real small-print
     content (pricing fineprint, footnotes), not decorative. Darkened to 56%
     (~4.65:1), same hue/chroma, to pass AA while staying visually "faint". */
  --lvxd-sf-text-faint: oklch(56% 0.012 264);
  --lvxd-sf-accent: oklch(56% 0.19 259.8);
  --lvxd-sf-accent-soft: oklch(95% 0.03 259.8);
  --lvxd-sf-danger: oklch(55% 0.22 25);
  --lvxd-sf-danger-soft: oklch(96% 0.03 25);
  --lvxd-sf-warning: oklch(58% 0.16 75);
  --lvxd-sf-warning-soft: oklch(96% 0.05 85);
  --lvxd-sf-success: oklch(58% 0.14 155);
  --lvxd-sf-success-soft: oklch(96% 0.04 155);
  --lvxd-sf-shadow-sm: 0 1px 2px oklch(21% 0.01 264 / 6%);
  --lvxd-sf-shadow-md: 0 12px 32px oklch(21% 0.01 264 / 8%);
  --lvxd-sf-radius: 18px;

  /* Named, centralised tokens for the values below that used to be scattered literal
     hex/rgba - kept as their exact original values (not re-derived in oklch) since there's
     no browser available in this environment to visually verify a colour-space conversion
     against the live marketing site; a future pass with visual verification can convert
     these to true oklch if desired. */
  --lvxd-sf-primary-grad-start: #1b84ff;
  --lvxd-sf-primary-grad-end: #0a6ee0;
  --lvxd-sf-primary-shadow: rgba(27, 132, 255, .45);
  --lvxd-sf-primary-shadow-hover: rgba(27, 132, 255, .55);
  --lvxd-sf-halo-purple: #7239ea;
  --lvxd-sf-sheen-white: rgba(255, 255, 255, .5);
  --lvxd-sf-white-btn-text: #0a6ee0;
  --lvxd-sf-white-btn-shadow: rgba(0, 0, 0, .25);
  --lvxd-sf-panel-shadow: rgba(15, 23, 42, .16);
  --lvxd-sf-ticker-shadow: rgba(15, 23, 42, .18);
  --lvxd-sf-securebadge-shadow: rgba(11, 20, 55, .35);
  --lvxd-sf-badge-recommended-bg: #eff6ff;
  --lvxd-sf-badge-recommended-text: #1b84ff;
  --lvxd-sf-badge-free-bg: #e9fbf0;
  --lvxd-sf-badge-free-text: #0f7a3d;
  --lvxd-sf-badge-new-bg: #fff7e6;
  --lvxd-sf-badge-new-text: #a86b00;
}

.lvxd-storefront-body {
  margin: 0;
  color: var(--lvxd-sf-text);
  background: var(--lvxd-sf-canvas);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

.lvxd-sf-main a:not(.lvxd-sf-btn) { text-decoration: none; color: inherit; }
.lvxd-sf-main * { box-sizing: border-box; }
/* The nav (_StorefrontNav.cshtml) renders as a sibling of <main>, not inside it, so the reset
   above never reaches its links (brand mark, mega-menu items, Pricing/Compliance) - without this
   they fall back to default browser link styling (blue, underlined). */
.lvxd-sf-nav a:not(.lvxd-sf-btn) { text-decoration: none; color: inherit; }
.lvxd-sf-nav * { box-sizing: border-box; }

/* Scroll reveal: fade + translateY on scroll-into-view, matching the design handoff's lvxRevealUp
   mount animation (LivexHub Funnel.dc.html - every section intro fades up as it appears). The
   handoff's version fires once on mount because its whole page is a single re-rendered app shell;
   here sections are scrolled to on a real multi-section page, so it's IntersectionObserver-driven
   instead (initScrollReveal in lvxd-storefront.js) - same trigger mechanism already used for the
   hero stat-band count-up. */
.lvxd-sf-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lvxd-sf-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.lvxd-sf-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-reveal { opacity: 1; transform: none; transition: none; }
  .lvxd-sf-footer-brand:hover .lvxd-sf-footer-brand-mark { animation: none; }
  .lvxd-sf-footer-cert, .lvxd-sf-footer-cert:hover { transition: none; transform: none; }
}

/* Nav */
.lvxd-sf-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(100% 0 0 / 82%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lvxd-sf-border);
  transition: box-shadow .25s ease;
}
.lvxd-sf-nav.lvxd-sf-nav-scrolled { box-shadow: var(--lvxd-sf-shadow-sm); }
.lvxd-sf-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  /* Anchors the mobile burger dropdown to the centered inner rail, not the full nav width. */
  position: relative;
}
.lvxd-sf-brand { display: flex; align-items: center; gap: 10px; margin-right: 8px; cursor: pointer; }
.lvxd-sf-brand-mark { width: 26px; height: 26px; object-fit: contain; }
/* Official Livex wordmark (glow-dark) rather than a text "Livex" - the storefront is
   light-mode only, so the dark lockup is the correct variant. Height-locked so the
   ~3.9:1 lockup keeps its aspect next to the 26px nib. */
.lvxd-sf-brand-name { height: 26px; width: auto; display: block; object-fit: contain; }

.lvxd-sf-nav-links { display: flex; align-items: center; gap: 6px; flex: 1; }
.lvxd-sf-nav-item { position: relative; }
.lvxd-sf-nav-link {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--lvxd-sf-text-muted);
  font-weight: 600;
  font-size: 14.5px;
  transition: color .15s ease, background .15s ease;
}
.lvxd-sf-nav-link:hover { color: var(--lvxd-sf-text); background: var(--lvxd-sf-surface-tint); }
.lvxd-sf-nav-link i { font-size: 15px; transition: transform .2s ease; }
.lvxd-sf-has-mega.lvxd-sf-mega-open .lvxd-sf-nav-link i { transform: rotate(180deg); }

.lvxd-sf-mega {
  position: absolute;
  top: calc(100% + 10px);
  left: -16px;
  width: 520px;
  background: var(--lvxd-sf-surface);
  border: 1px solid var(--lvxd-sf-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px oklch(21% 0.01 264 / 18%);
  padding: 14px;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  /* visibility:hidden also removes the menu's links from the keyboard tab order while closed;
     delayed so it only flips after the fade-out, and cancelled instantly on open. */
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.lvxd-sf-has-mega.lvxd-sf-mega-open .lvxd-sf-mega {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
.lvxd-sf-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lvxd-sf-mega-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 11px;
  transition: background .15s ease;
}
.lvxd-sf-mega-item:hover { background: var(--lvxd-sf-surface-tint); }
.lvxd-sf-mega-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lvxd-sf-mega-icon img { width: 18px; height: 18px; }
.lvxd-sf-mega-name { display: block; font-weight: 800; font-size: 13px; }
.lvxd-sf-mega-value {
  display: block; font-size: 11px; color: var(--lvxd-sf-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lvxd-sf-mega-footer {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--lvxd-sf-accent);
  background: var(--lvxd-sf-surface-tint);
  padding: 11px;
  margin-top: 8px;
  border-radius: 11px;
  transition: background .18s ease;
}
.lvxd-sf-mega-footer:hover { background: var(--lvxd-sf-accent-soft); }
@media (max-width: 700px) {
  .lvxd-sf-mega { width: 320px; }
  .lvxd-sf-mega-grid { grid-template-columns: 1fr; }
}

.lvxd-sf-nav-cta { display: flex; align-items: center; gap: 18px; }
.lvxd-sf-nav-login {
  font-size: 13.5px; font-weight: 600; color: var(--lvxd-sf-text-muted);
  transition: color .15s ease;
}
.lvxd-sf-nav-login:hover { color: var(--lvxd-sf-text); }

.lvxd-sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.lvxd-sf-btn:active { transform: translateY(1px) scale(.98); }
.lvxd-sf-btn-ghost { color: var(--lvxd-sf-text); background: transparent; border-color: var(--lvxd-sf-border); }
.lvxd-sf-btn-ghost:hover { background: var(--lvxd-sf-surface-tint); }
.lvxd-sf-btn-tour { background: var(--lvxd-sf-surface); transition: border-color .2s ease, transform .2s ease, background .18s ease; }
.lvxd-sf-btn-tour:hover { background: var(--lvxd-sf-surface); border-color: var(--lvxd-sf-accent); transform: translateY(-2px); }
.lvxd-sf-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--lvxd-sf-primary-grad-start), var(--lvxd-sf-primary-grad-end));
  box-shadow: 0 12px 30px var(--lvxd-sf-primary-shadow);
}
.lvxd-sf-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px var(--lvxd-sf-primary-shadow-hover); }

/* Hero primary CTA: glow halo, matching the handoff exactly */
.lvxd-sf-hero-cta-halo { position: relative; display: inline-flex; }
.lvxd-sf-hero-cta-halo .lvxd-sf-btn-lg { padding: 16px 30px; }
.lvxd-sf-hero-cta-halo::before {
  content: ""; position: absolute; inset: -6px; z-index: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--lvxd-sf-primary-grad-start), var(--lvxd-sf-halo-purple));
  filter: blur(16px); opacity: .55;
  animation: lvxd-sf-halo-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
.lvxd-sf-hero-cta-halo .lvxd-sf-btn { position: relative; z-index: 1; }
@keyframes lvxd-sf-halo-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-hero-cta-halo::before { animation: none; }
}

/* Reusable button sheen sweep (hero CTA + final CTA band's white button) */
.lvxd-sf-btn-sheen { position: relative; overflow: hidden; }
.lvxd-sf-btn-sheen::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--lvxd-sf-sheen-white), transparent);
  animation: lvxd-sf-btn-sheen 3.4s ease-in-out infinite;
}
.lvxd-sf-btn-sheen-slow::after { animation-duration: 3.6s; }
@keyframes lvxd-sf-btn-sheen {
  0% { transform: translateX(-150%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-btn-sheen::after { animation: none; }
}
.lvxd-sf-btn-lg { padding: 14px 26px; font-size: 15.5px; border-radius: 13px; }
.lvxd-sf-btn-lg.lvxd-sf-btn-primary, .lvxd-sf-btn-lg.lvxd-sf-btn-white { font-weight: 800; }
.lvxd-sf-btn-sm { padding: 10px 18px; font-size: 13.5px; border-radius: 10px; }
.lvxd-sf-btn-white { color: var(--lvxd-sf-white-btn-text); background: #fff; box-shadow: 0 10px 24px var(--lvxd-sf-white-btn-shadow); }
.lvxd-sf-btn-white:hover { transform: translateY(-2px); }

.lvxd-sf-nav-burger {
  display: none;
  appearance: none;
  background: none;
  border: 1px solid var(--lvxd-sf-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 18px;
  cursor: pointer;
}
@media (max-width: 860px) {
  .lvxd-sf-nav-links { display: none; }
  .lvxd-sf-nav-burger { display: inline-flex; }
  .lvxd-sf-nav-open .lvxd-sf-nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 24px;
    right: 24px;
    background: var(--lvxd-sf-surface);
    padding: 12px 16px;
    border: 1px solid var(--lvxd-sf-border);
    border-radius: 14px;
    box-shadow: var(--lvxd-sf-shadow-md);
  }
}

/* Hero */
.lvxd-sf-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 24px 88px;
  text-align: center;
  background:
    radial-gradient(1100px 520px at 78% 8%, oklch(56% 0.19 289.8 / 10%), transparent 60%),
    radial-gradient(900px 460px at 12% 20%, oklch(56% 0.19 259.8 / 12%), transparent 62%);
}
/* masked dot-grid texture, faded toward the hero edges so it reads as a soft backdrop
   rather than a hard-edged pattern */
.lvxd-sf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(oklch(21% 0.01 264 / 5%) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(900px 500px at 50% 30%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(900px 500px at 50% 30%, #000, transparent 80%);
}
.lvxd-sf-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
  animation: lvxd-sf-float 16s ease-in-out infinite;
}
.lvxd-sf-hero-blob-a { width: 360px; height: 360px; top: -120px; left: 8%; background: radial-gradient(circle, oklch(56% 0.19 259.8 / 30%), transparent 68%); }
.lvxd-sf-hero-blob-b { width: 340px; height: 340px; top: 20px; right: 4%; background: radial-gradient(circle, oklch(56% 0.19 289.8 / 24%), transparent 68%); animation-delay: -6s; animation-direction: reverse; }
.lvxd-sf-hero-blob-c { width: 420px; height: 420px; bottom: -160px; left: 38%; background: radial-gradient(circle, oklch(58% 0.14 155 / 16%), transparent 70%); animation-delay: -4s; }
@keyframes lvxd-sf-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, 30px) scale(1.06); }
}
.lvxd-sf-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.lvxd-sf-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--lvxd-sf-text-muted);
  background: var(--lvxd-sf-surface);
  border: 1px solid var(--lvxd-sf-border);
  box-shadow: var(--lvxd-sf-shadow-sm);
  padding: 7px 15px; border-radius: 22px; margin-bottom: 22px;
}
.lvxd-sf-hero-title { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; margin: 0 0 20px; }
.lvxd-sf-hero-title-accent {
  background: linear-gradient(135deg, var(--lvxd-sf-accent), oklch(50% 0.2 289));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lvxd-sf-hero-sub { font-size: 17px; color: var(--lvxd-sf-text-muted); line-height: 1.6; margin: 0 auto 34px; max-width: 500px; }
.lvxd-sf-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.lvxd-sf-btn-tour-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--lvxd-sf-accent-soft); color: var(--lvxd-sf-accent); font-size: 12px;
}
.lvxd-sf-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%; background: oklch(62% 0.18 155);
  animation: lvxd-sf-pulse-soft 2.4s ease-in-out infinite;
}

.lvxd-sf-hero-social { display: flex; align-items: center; gap: 10px; justify-content: center; }
@media (min-width: 960px) { .lvxd-sf-hero-social { justify-content: flex-start; } }
.lvxd-sf-hero-social-avatars { display: flex; }
.lvxd-sf-hero-social-avatars span {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--lvxd-sf-surface);
  margin-left: -9px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
}
.lvxd-sf-hero-social-avatars span:first-child { margin-left: 0; }
.lvxd-sf-hero-social-copy { font-size: 12.5px; color: var(--lvxd-sf-text-faint); }
.lvxd-sf-hero-social-copy strong { color: var(--lvxd-sf-text-muted); }

/* Animated stat band */
.lvxd-sf-stat-band-wrap { max-width: 1160px; margin: 26px auto 8px; padding: 0 24px; }
.lvxd-sf-stat-band {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 26px;
  border-radius: 20px; color: #fff; text-align: center;
  background: linear-gradient(120deg, oklch(21% 0.05 264), color-mix(in oklch, var(--lvxd-sf-accent) 45%, oklch(21% 0.05 264)), oklch(21% 0.05 264));
  background-size: 200% 200%;
  animation: lvxd-sf-grad-shift 12s ease infinite;
}
@media (min-width: 700px) { .lvxd-sf-stat-band { grid-template-columns: repeat(4, 1fr); } }
.lvxd-sf-stat-band strong { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.lvxd-sf-stat-band span { display: block; font-size: 12px; color: oklch(100% 0 0 / 70%); margin-top: 4px; }
@keyframes lvxd-sf-grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-stat-band { animation: none; }
}

/* Hero grid: copy + floating product-range panel (design-fidelity pass) */
.lvxd-sf-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 56px;
  max-width: 1160px; margin: 0 auto; align-items: center;
}
@media (min-width: 960px) {
  .lvxd-sf-hero-grid { grid-template-columns: 1.05fr .95fr; text-align: left; }
  .lvxd-sf-hero-sub { margin: 20px 0 34px; }
  .lvxd-sf-hero-actions, .lvxd-sf-hero-proof { justify-content: flex-start; }
}
.lvxd-sf-hero-copy { max-width: 620px; margin: 0 auto; }
@media (min-width: 960px) { .lvxd-sf-hero-copy { margin: 0; } }

/* Rotating headline word */
.lvxd-sf-hero-rotate { display: block; height: 1.1em; overflow: hidden; }
.lvxd-sf-hero-rotate-track {
  display: flex; flex-direction: column;
  animation: lvxd-sf-roll 10s infinite;
}
.lvxd-sf-hero-rotate-track span {
  height: 1.1em; line-height: 1.1em;
  /* No text-shadow here. The words are stacked 1.1em apart inside a 1.1em overflow:hidden
     viewport, so a downward glow on the row above lands inside the visible row - "accounting"
     (green) was smearing over "e-signatures" (purple). Any blur wide enough to read is also
     wide enough to cross the clip, and the visible word can't be targeted from this stack, so
     the effect can't be rescued by shrinking it. */
}
.lvxd-sf-hero-rotate-payments { color: oklch(56% 0.19 259.8); }
.lvxd-sf-hero-rotate-books { color: oklch(62% 0.18 155); }
.lvxd-sf-hero-rotate-sign { color: oklch(50% 0.2 289); }
.lvxd-sf-hero-rotate-desk { color: oklch(72% 0.16 75); }
.lvxd-sf-hero-rotate-flow { color: oklch(69% 0.13 224); }
@keyframes lvxd-sf-roll {
  /* translateY() percentages are relative to this element's OWN height (all 6 stacked
     words, not one word) - using em (relative to font-size, same as each word's 1.1em
     row height) avoids that self-relative trap. */
  0%, 18%  { transform: translateY(0em); }
  20%, 38% { transform: translateY(-1.1em); }
  40%, 58% { transform: translateY(-2.2em); }
  60%, 78% { transform: translateY(-3.3em); }
  80%, 98% { transform: translateY(-4.4em); }
  100%     { transform: translateY(-5.5em); }
}

/* Floating product-range panel */
/* 500px, not 420px: the design's hero panel is ~515px wide, and that width is what lets Nib
   overlap the card's left edge without covering the first column's stat line. Narrower and
   either he clears the panel (and stops overlapping) or he sits on "18 signed". */
.lvxd-sf-hero-panel { position: relative; max-width: 500px; margin: 0 auto; }
@media (min-width: 960px) { .lvxd-sf-hero-panel { margin: 0; } }
.lvxd-sf-hero-panel-card {
  position: relative; background: var(--lvxd-sf-surface);
  border: 1px solid var(--lvxd-sf-border); border-radius: 20px;
  box-shadow: 0 30px 70px var(--lvxd-sf-panel-shadow); padding: 18px;
  animation: lvxd-sf-float 6s ease-in-out infinite;
}
.lvxd-sf-hero-panel-head { display: flex; align-items: center; gap: 9px; padding: 2px 4px 14px; }
.lvxd-sf-hero-panel-title { font-size: 13px; font-weight: 800; color: var(--lvxd-sf-text); }
.lvxd-sf-hero-panel-sub { font-size: 10.5px; color: var(--lvxd-sf-text-faint); margin-top: 2px; }
.lvxd-sf-hero-panel-pill {
  margin-left: auto; padding: 3px 9px; border-radius: 7px;
  background: var(--lvxd-sf-accent-soft); color: var(--lvxd-sf-accent);
  font-size: 10px; font-weight: 800;
}
.lvxd-sf-hero-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lvxd-sf-hero-panel-tile {
  border: 1px solid var(--lvxd-sf-border); border-radius: 13px; padding: 13px;
  animation: lvxd-sf-tile-pop .55s ease both;
  opacity: 0;
}
.lvxd-sf-hero-panel-tile-1 { animation-delay: .35s; }
.lvxd-sf-hero-panel-tile-2 { animation-delay: .5s; }
.lvxd-sf-hero-panel-tile-3 { animation-delay: .65s; }
.lvxd-sf-hero-panel-tile-4 { animation-delay: .8s; }
@keyframes lvxd-sf-tile-pop {
  0% { opacity: 0; transform: translateY(6px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.lvxd-sf-hero-panel-tile-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 9px; font-size: 17px;
}
.lvxd-sf-hero-panel-tile-icon img { width: 20px; height: 20px; object-fit: contain; }
.lvxd-sf-hero-panel-tile-icon-blue { background: oklch(56% 0.19 259.8 / 14%); color: oklch(56% 0.19 259.8); }
.lvxd-sf-hero-panel-tile-icon-green { background: oklch(62% 0.18 155 / 14%); color: oklch(62% 0.18 155); }
.lvxd-sf-hero-panel-tile-icon-purple { background: oklch(50% 0.2 289 / 14%); color: oklch(50% 0.2 289); }
.lvxd-sf-hero-panel-tile-icon-cyan { background: oklch(69% 0.13 224 / 14%); color: oklch(69% 0.13 224); }
.lvxd-sf-hero-panel-tile-name { font-size: 12px; font-weight: 800; color: var(--lvxd-sf-text); }
.lvxd-sf-hero-panel-tile-stat { font-size: 11px; color: var(--lvxd-sf-text-faint); margin-top: 2px; }

/* Floating "live" ticker chip */
.lvxd-sf-hero-ticker {
  position: absolute; top: -20px; right: -12px; width: 224px;
  padding: 11px 13px; border-radius: 14px; background: var(--lvxd-sf-surface);
  box-shadow: 0 16px 38px var(--lvxd-sf-ticker-shadow);
  animation: lvxd-sf-float 5s ease-in-out .6s infinite;
}
.lvxd-sf-hero-ticker-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--lvxd-sf-text-faint);
}
.lvxd-sf-hero-ticker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: oklch(62% 0.18 155); animation: lvxd-sf-pulse-soft 1.8s ease-in-out infinite;
}
.lvxd-sf-hero-ticker-window { height: 38px; overflow: hidden; margin-top: 6px; }
.lvxd-sf-hero-ticker-track { animation: lvxd-sf-tick 11s infinite; }
.lvxd-sf-hero-ticker-row {
  height: 38px; display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; color: var(--lvxd-sf-text); line-height: 1.2;
}
.lvxd-sf-hero-ticker-icon {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.lvxd-sf-hero-ticker-icon img { width: 14px; height: 14px; object-fit: contain; }
@keyframes lvxd-sf-tick {
  0%, 18%  { transform: translateY(0%); }
  25%, 43% { transform: translateY(-25%); }
  50%, 68% { transform: translateY(-50%); }
  75%, 93% { transform: translateY(-75%); }
  100%     { transform: translateY(-75%); }
}
@keyframes lvxd-sf-pulse-soft {
  0%, 100% { opacity: 1; } 50% { opacity: .35; }
}

/* Floating "one secure login" badge */
.lvxd-sf-hero-securebadge {
  position: absolute; bottom: -18px; left: -12px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 12px;
  background: oklch(21% 0.05 264); color: #fff;
  box-shadow: 0 12px 30px var(--lvxd-sf-securebadge-shadow);
  font-size: 12px; font-weight: 700;
  animation: lvxd-sf-float 5.5s ease-in-out 1s infinite;
}
.lvxd-sf-hero-securebadge-icon {
  width: 20px; height: 20px; border-radius: 6px;
  background: linear-gradient(135deg, oklch(50% 0.2 289), oklch(56% 0.19 259.8));
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
}

@media (max-width: 639px) {
  .lvxd-sf-hero-ticker, .lvxd-sf-hero-securebadge {
    position: static; width: auto; margin: 14px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-hero-rotate-track, .lvxd-sf-hero-ticker-track,
  .lvxd-sf-hero-panel-card, .lvxd-sf-hero-ticker, .lvxd-sf-hero-securebadge,
  .lvxd-sf-hero-ticker-dot, .lvxd-sf-hero-panel-tile {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* Section head (shared by Why now / Why Livex / Build your stack / Catalog / Plans) */
.lvxd-sf-section-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.lvxd-sf-section-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lvxd-sf-accent); background: var(--lvxd-sf-accent-soft);
  padding: 5px 13px; border-radius: 999px; margin-bottom: 4px;
}
.lvxd-sf-section-kicker-warm { color: oklch(48% 0.15 45); background: oklch(94% 0.06 55); }
.lvxd-sf-section-head h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; margin: 10px 0 12px; letter-spacing: -.01em; }
.lvxd-sf-section-head p { color: var(--lvxd-sf-text-muted); font-size: 15.5px; line-height: 1.6; margin: 0; }

/* Why now */
.lvxd-sf-whynow { max-width: 1160px; margin: 64px auto 0; padding: 0 24px; }
.lvxd-sf-whynow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .lvxd-sf-whynow-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.lvxd-sf-whynow-card {
  padding: 26px; border-radius: 18px; background: var(--lvxd-sf-surface);
  border: 1px solid var(--lvxd-sf-border); box-shadow: var(--lvxd-sf-shadow-sm);
  transition: transform .22s ease;
}
.lvxd-sf-whynow-card:hover { transform: translateY(-4px); }
.lvxd-sf-whynow-stat {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--lvxd-sf-text);
}
.lvxd-sf-whynow-stat span {
  font-size: 12.5px; font-weight: 700; color: var(--lvxd-sf-text-faint);
  text-transform: uppercase; letter-spacing: .03em;
}
.lvxd-sf-whynow-card p { font-size: 13.5px; color: var(--lvxd-sf-text-muted); line-height: 1.6; margin: 0; }

/* Why Livex */
.lvxd-sf-whylivex { max-width: 1160px; margin: 64px auto 0; padding: 0 24px; }
.lvxd-sf-whylivex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
@media (min-width: 700px) { .lvxd-sf-whylivex-grid { grid-template-columns: 1fr 1fr; } }
.lvxd-sf-whylivex-card {
  display: flex; gap: 16px; padding: 24px; border-radius: 18px;
  background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border);
  box-shadow: var(--lvxd-sf-shadow-sm); transition: transform .22s ease;
}
.lvxd-sf-whylivex-card:hover { transform: translateY(-4px); }
.lvxd-sf-whylivex-icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  background: var(--lvxd-sf-accent-soft); color: var(--lvxd-sf-accent);
}
.lvxd-sf-whylivex-card h3 { font-size: 16px; font-weight: 800; margin: 0; color: var(--lvxd-sf-text); }
.lvxd-sf-whylivex-card p { font-size: 13px; color: var(--lvxd-sf-text-muted); margin: 7px 0 0; line-height: 1.6; }

/* Build your stack (interactive/gamified) */
.lvxd-sf-stack { max-width: 1160px; margin: 56px auto 0; padding: 0 24px; }
.lvxd-sf-stack-allsoon { max-width: 620px; margin: 0 0 20px; padding: 14px 18px; border-radius: 12px; background: var(--lvxd-sf-surface); border: 1.5px dashed var(--lvxd-sf-border); color: var(--lvxd-sf-text-muted); font-size: 14px; font-weight: 600; }
.lvxd-sf-stack-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
@media (min-width: 960px) { .lvxd-sf-stack-grid { grid-template-columns: 1fr 320px; } }
.lvxd-sf-stack-picker { display: grid; grid-template-columns: 1fr; gap: 13px; }
@media (min-width: 620px) { .lvxd-sf-stack-picker { grid-template-columns: 1fr 1fr; } }
.lvxd-sf-stack-card {
  position: relative; cursor: pointer; display: flex; align-items: center; gap: 13px;
  padding: 16px; border-radius: 15px; text-align: left; font: inherit;
  background: var(--lvxd-sf-surface); border: 1.5px solid var(--lvxd-sf-border);
  box-shadow: var(--lvxd-sf-shadow-sm);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, border-color .28s ease;
}
.lvxd-sf-stack-card:disabled {
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none;
}
.lvxd-sf-stack-card-soon .lvxd-sf-stack-card-price {
  color: var(--lvxd-sf-text-faint);
}
.lvxd-sf-stack-card-icon {
  position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: linear-gradient(135deg, var(--lvxd-sf-stack-accent), var(--lvxd-sf-stack-accent-2, var(--lvxd-sf-stack-accent)));
  color: #fff;
  box-shadow: 0 6px 14px color-mix(in oklch, var(--lvxd-sf-stack-accent) 35%, transparent);
  transition: all .25s ease;
}
.lvxd-sf-stack-card-icon img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.lvxd-sf-stack-card-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  border: 2px solid var(--lvxd-sf-stack-accent); opacity: 0; pointer-events: none;
}
.lvxd-sf-stack-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lvxd-sf-stack-card-name { font-size: 14.5px; font-weight: 800; color: var(--lvxd-sf-text); }
.lvxd-sf-stack-card-tagline { font-size: 12px; color: var(--lvxd-sf-text-muted); margin-top: 2px; }
.lvxd-sf-stack-card-price { font-size: 13px; font-weight: 800; color: var(--lvxd-sf-stack-accent); flex-shrink: 0; }
.lvxd-sf-stack-card-check {
  position: absolute; top: 11px; right: 11px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--lvxd-sf-border); background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.lvxd-sf-stack-card-check i { font-size: 11px; color: #fff; opacity: 0; transition: opacity .2s ease; }
.lvxd-sf-stack-card[aria-pressed="true"] {
  border-color: var(--lvxd-sf-stack-accent);
  box-shadow: 0 10px 24px color-mix(in oklch, var(--lvxd-sf-stack-accent) 25%, transparent);
  transform: translateY(-2px);
}
.lvxd-sf-stack-card[aria-pressed="true"] .lvxd-sf-stack-card-icon::after {
  opacity: 1; animation: lvxd-sf-ring-pulse 1.4s ease-out infinite;
}
.lvxd-sf-stack-card[aria-pressed="true"] .lvxd-sf-stack-card-check {
  border-color: var(--lvxd-sf-stack-accent); background: var(--lvxd-sf-stack-accent);
}
.lvxd-sf-stack-card[aria-pressed="true"] .lvxd-sf-stack-card-check i { opacity: 1; }
@keyframes lvxd-sf-ring-pulse {
  0% { transform: scale(.8); opacity: .7; }
  100% { transform: scale(2); opacity: 0; }
}

.lvxd-sf-stack-summary {
  position: sticky; top: 84px; border-radius: 18px; overflow: hidden;
  background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border);
  box-shadow: 0 18px 44px rgba(15,23,42,.1);
}
.lvxd-sf-stack-summary-head {
  padding: 18px 20px; color: #fff;
  background: linear-gradient(135deg, oklch(21% 0.05 264), color-mix(in oklch, var(--lvxd-sf-accent) 45%, oklch(21% 0.05 264)));
}
.lvxd-sf-stack-summary-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: oklch(100% 0 0 / 65%); }
.lvxd-sf-stack-summary-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: oklch(62% 0.18 155);
  animation: lvxd-sf-pulse-soft 1.8s ease-in-out infinite;
}
.lvxd-sf-stack-summary-total { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.lvxd-sf-stack-summary-permo { font-size: 14px; font-weight: 600; color: oklch(100% 0 0 / 70%); }
.lvxd-sf-stack-summary-count { font-size: 12px; color: oklch(100% 0 0 / 70%); margin-top: 3px; }
.lvxd-sf-stack-summary-body { padding: 16px 20px; }

.lvxd-sf-stack-ready { margin-bottom: 16px; padding: 13px 14px; border-radius: 13px; background: var(--lvxd-sf-surface-tint); transition: background .3s ease; }
.lvxd-sf-stack-ready-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.lvxd-sf-stack-ready-tier { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: oklch(58% 0.16 75); }
.lvxd-sf-stack-ready-tier i { color: oklch(58% 0.16 75); font-size: 15px; }
.lvxd-sf-stack-ready-pct { font-size: 11px; font-weight: 700; color: var(--lvxd-sf-text-faint); }
.lvxd-sf-stack-ready-bar { position: relative; height: 8px; border-radius: 6px; background: var(--lvxd-sf-border); overflow: hidden; }
.lvxd-sf-stack-ready-bar-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 6px;
  background: linear-gradient(90deg, oklch(56% 0.19 259.8), oklch(50% 0.2 289), oklch(62% 0.18 155));
  transition: width .5s cubic-bezier(.34,1.56,.64,1);
}
.lvxd-sf-stack-ready-bar-fill.lvxd-sf-stack-sheen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 60%), transparent);
  animation: lvxd-sf-sheen 1.8s ease-in-out infinite;
}
@keyframes lvxd-sf-sheen {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.lvxd-sf-stack-ready-milestones { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
.lvxd-sf-stack-milestone { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lvxd-sf-stack-milestone-dot {
  width: 20px; height: 20px; border-radius: 50%; background: var(--lvxd-sf-border); color: transparent;
  display: flex; align-items: center; justify-content: center; transition: all .3s ease;
}
.lvxd-sf-stack-milestone-dot i { font-size: 11px; }
.lvxd-sf-stack-milestone span:last-child { font-size: 9px; font-weight: 700; color: var(--lvxd-sf-text-faint); transition: color .3s ease; }
.lvxd-sf-stack-milestone.lvxd-sf-stack-milestone-hit .lvxd-sf-stack-milestone-dot { background: oklch(62% 0.18 155); color: #fff; }
.lvxd-sf-stack-milestone.lvxd-sf-stack-milestone-hit span:last-child { color: oklch(45% 0.14 155); }
.lvxd-sf-stack-ready-hint { text-align: center; font-size: 10.5px; font-weight: 600; color: oklch(58% 0.16 75); margin-top: 10px; }

.lvxd-sf-stack-avatars { display: flex; align-items: center; margin-bottom: 14px; }
.lvxd-sf-stack-avatars[hidden] { display: none; }
.lvxd-sf-stack-avatar {
  width: 30px; height: 30px; border-radius: 9px; margin-right: -8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(15,23,42,.12);
}

.lvxd-sf-stack-trial {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 11px;
  background: oklch(94% 0.06 155); color: oklch(35% 0.1 155); font-size: 11.5px; font-weight: 600; margin-bottom: 14px;
}
.lvxd-sf-stack-trial i { color: oklch(45% 0.14 155); flex-shrink: 0; }
.lvxd-sf-stack-cta {
  width: 100%; justify-content: center;
  padding: 14px; border-radius: 12px; font-size: 14.5px; font-weight: 800;
  box-shadow: 0 8px 20px rgba(27,132,255,.35);
}
.lvxd-sf-stack-footnote { text-align: center; font-size: 11px; color: var(--lvxd-sf-text-faint); margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-stack-card, .lvxd-sf-stack-card-icon, .lvxd-sf-stack-card-icon::after, .lvxd-sf-stack-card-check,
  .lvxd-sf-stack-ready-bar-fill, .lvxd-sf-stack-ready-bar-fill::after, .lvxd-sf-stack-milestone-dot,
  .lvxd-sf-stack-summary-dot {
    transition: none !important; animation: none !important;
  }
}

/* Value props */
.lvxd-sf-values { max-width: 1160px; margin: 64px auto 0; padding: 0 24px; }
.lvxd-sf-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .lvxd-sf-values-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.lvxd-sf-value-card {
  padding: 26px; border-radius: 18px; background: var(--lvxd-sf-surface);
  border: 1px solid var(--lvxd-sf-border); box-shadow: var(--lvxd-sf-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lvxd-sf-value-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(15,23,42,.12); }
.lvxd-sf-value-icon {
  width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--lvxd-sf-accent-soft); color: var(--lvxd-sf-accent); font-size: 21px; margin-bottom: 16px;
}
.lvxd-sf-value-card h3 { font-size: 16.5px; font-weight: 800; margin: 0; color: var(--lvxd-sf-text); }
.lvxd-sf-value-card p { font-size: 13.5px; color: var(--lvxd-sf-text-muted); margin: 8px 0 0; line-height: 1.55; }

/* Catalog (product showcase) */
.lvxd-sf-catalog { max-width: 1200px; margin: 64px auto 0; padding: 0 24px 100px; }

.lvxd-sf-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .lvxd-sf-product-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
}
.lvxd-sf-product-card {
  background: var(--lvxd-sf-surface);
  border: 1px solid var(--lvxd-sf-border);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  scroll-margin-top: 100px;
}
.lvxd-sf-product-card-corner {
  position: absolute; top: -30px; right: -30px; width: 90px; height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lvxd-sf-accent), var(--lvxd-sf-accent-2, var(--lvxd-sf-accent)));
  opacity: .5; pointer-events: none;
}
.lvxd-sf-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(15,23,42,.13);
  border-color: color-mix(in oklch, var(--lvxd-sf-accent) 35%, var(--lvxd-sf-border));
}
.lvxd-sf-product-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.lvxd-sf-product-card-link:focus-visible {
  outline: 2px solid var(--lvxd-sf-accent);
  outline-offset: 2px;
}
.lvxd-sf-product-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lvxd-sf-surface-tint);
  color: var(--lvxd-sf-text-faint);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.lvxd-sf-product-icon {
  position: relative; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--lvxd-sf-accent) 16%, white),
    color-mix(in oklch, var(--lvxd-sf-accent-2, var(--lvxd-sf-accent)) 16%, white));
  color: var(--lvxd-sf-accent);
  margin-bottom: 14px;
}
.lvxd-sf-product-icon i { font-size: 22px; }
.lvxd-sf-product-icon img { position: relative; width: 24px; height: 24px; }
.lvxd-sf-pill { font-size: 12.5px; font-weight: 700; color: var(--lvxd-sf-text-muted); background: var(--lvxd-sf-surface-tint); border: 1px solid var(--lvxd-sf-border); padding: 5px 11px; border-radius: 999px; }
.lvxd-sf-pill-free { color: oklch(45% 0.14 155); background: oklch(94% 0.06 155); border-color: oklch(88% 0.08 155); }
.lvxd-sf-product-name { position: relative; font-size: 15px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.lvxd-sf-product-value { position: relative; font-size: 12.5px; color: var(--lvxd-sf-text-muted); line-height: 1.45; margin: 5px 0 0; min-height: 34px; }
.lvxd-sf-product-price { position: relative; font-size: 12.5px; font-weight: 800; color: var(--lvxd-sf-accent); margin-top: 10px; }

/* Testimonials marquee */
.lvxd-sf-testimonials { padding: 48px 0 8px; overflow: hidden; background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--lvxd-sf-accent) 4%, transparent)); }
.lvxd-sf-testimonials-head { text-align: center; font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 24px; padding: 0 24px; }
.lvxd-sf-testimonials-track {
  display: flex; width: max-content; gap: 18px;
  animation: lvxd-sf-marquee 34s linear infinite;
}
.lvxd-sf-testimonials-track:hover { animation-play-state: paused; }
/* Few featured reviews: no marquee loop needed - static, centered, wrapping row (no duplicate set). */
.lvxd-sf-testimonials-track.is-static { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
.lvxd-sf-testimonial-card {
  width: 360px; flex-shrink: 0; padding: 22px; border-radius: 16px;
  background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border);
  box-shadow: var(--lvxd-sf-shadow-sm);
}
.lvxd-sf-testimonial-stars { display: flex; align-items: center; gap: 2px; margin-bottom: 12px; color: oklch(78% 0.15 85); font-size: 13px; }
.lvxd-sf-testimonial-stars span { margin-left: 6px; font-size: 11.5px; font-weight: 800; color: var(--lvxd-sf-text-muted); }
.lvxd-sf-testimonial-quote { font-size: 14px; line-height: 1.6; margin: 0; }
.lvxd-sf-testimonial-who { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.lvxd-sf-testimonial-who > span:last-child { display: flex; flex-direction: column; }
.lvxd-sf-testimonial-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
}
.lvxd-sf-testimonial-name { font-size: 13px; font-weight: 800; }
.lvxd-sf-testimonial-role { font-size: 11.5px; color: var(--lvxd-sf-text-faint); }
@keyframes lvxd-sf-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-testimonials-track { animation: none; overflow-x: auto; }
}

/* CTA band */
.lvxd-sf-cta-band { max-width: 1160px; margin: 56px auto 70px; padding: 0 24px; text-align: center; }
.lvxd-sf-cta-band-inner {
  padding: 56px 40px; border-radius: 24px;
  background: linear-gradient(130deg, oklch(21% 0.05 264), color-mix(in oklch, var(--lvxd-sf-accent) 55%, oklch(21% 0.05 264)), oklch(21% 0.05 264));
  color: #fff;
}
.lvxd-sf-cta-band-animated {
  position: relative; overflow: hidden;
  background-size: 200% 200%;
  animation: lvxd-sf-grad-shift 14s ease infinite;
}
.lvxd-sf-cta-band-animated > *:not(.lvxd-sf-cta-band-blob) { position: relative; z-index: 1; }
.lvxd-sf-cta-band-blob { position: absolute; border-radius: 50%; filter: blur(6px); z-index: 0; animation: lvxd-sf-blob 14s ease-in-out infinite; }
.lvxd-sf-cta-band-blob-a { right: -40px; top: -40px; width: 220px; height: 220px; background: oklch(56% 0.19 259.8 / 30%); }
.lvxd-sf-cta-band-blob-b { left: -30px; bottom: -50px; width: 200px; height: 200px; background: oklch(50% 0.2 289 / 28%); animation-duration: 18s; animation-direction: reverse; }
@keyframes lvxd-sf-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-14px, 12px) scale(1.08); }
}
.lvxd-sf-cta-band h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin: 0 0 10px; }
.lvxd-sf-cta-band p { color: oklch(100% 0 0 / 85%); margin: 14px auto 26px; max-width: 480px; font-size: 15.5px; }
.lvxd-sf-cta-band-animated .lvxd-sf-btn-white { padding: 15px 30px; border-radius: 12px; font-size: 15px; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.lvxd-sf-cta-band-actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-cta-band-animated, .lvxd-sf-cta-band-blob { animation: none !important; }
}
.lvxd-sf-btn-on-dark { color: #fff; border-color: oklch(100% 0 0 / 25%); background: oklch(100% 0 0 / 12%); }
.lvxd-sf-btn-on-dark:hover { background: oklch(100% 0 0 / 20%); }

/* primary CTA sitting on the dark band inverts to a white pill (per the design handoff) -
   the site-wide blue-on-white .lvxd-sf-btn-primary would be nearly invisible against this
   background, plus the handoff's sheen sweep across it. */
.lvxd-sf-cta-band-actions .lvxd-sf-btn-primary {
  position: relative;
  overflow: hidden;
  color: var(--lvxd-sf-accent);
  background: #fff;
  box-shadow: 0 12px 30px oklch(0% 0 0 / 28%);
}
.lvxd-sf-cta-band-actions .lvxd-sf-btn-primary:hover { box-shadow: 0 18px 40px oklch(0% 0 0 / 32%); }
.lvxd-sf-cta-band-actions .lvxd-sf-btn-primary::after {
  content: "";
  position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, oklch(56% 0.19 259.8 / 25%), transparent);
  animation: lvxd-sf-btn-sheen 3.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-cta-band-actions .lvxd-sf-btn-primary::after { animation: none !important; }
}

/* CTA band - row layout (Compliance page: text left, action right, per design handoff) */
.lvxd-sf-cta-band-row.lvxd-sf-cta-band { max-width: none; margin: 0; padding: 0 24px 60px; text-align: left; }
.lvxd-sf-cta-band-row .lvxd-sf-cta-band-inner {
  max-width: 1080px; margin: 0 auto; padding: 28px 32px; border-radius: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.lvxd-sf-cta-band-row h2 { font-size: 20px; margin: 0; }
.lvxd-sf-cta-band-row p { font-size: 13.5px; margin: 6px 0 0; }
.lvxd-sf-cta-band-row .lvxd-sf-cta-band-actions { justify-content: flex-start; flex-shrink: 0; }
.lvxd-sf-cta-band-row .lvxd-sf-btn-white { padding: 14px 26px; border-radius: 12px; font-size: 14.5px; font-weight: 800; }

/* Footer */
/* The footer was the only storefront section with no motion and no hover state at all - every
   other band has float, sheen, pulse or lift. What follows uses that same vocabulary; the one
   thing deliberately left inert is the ISO mark itself, which must never be animated or
   transformed (DESIGN-OVERRIDES.md) - the pill around it moves, the mark does not. */
.lvxd-sf-footer { position: relative; border-top: 1px solid var(--lvxd-sf-border); padding: 44px 24px 22px; }

/* A brand-coloured glow along the top edge, brightest in the middle - the same trick the CTA
   band uses to stop a flat rule reading as a dead end. */
.lvxd-sf-footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lvxd-sf-accent), transparent);
  opacity: .45; pointer-events: none;
}

/* Nib is the mark here, so let him react - a small hop and tilt on hover. Below 120px he is
   a logo, not the figure, so the placement floor does not apply. */
.lvxd-sf-footer-brand { cursor: default; }
.lvxd-sf-footer-brand-mark { transition: transform .25s ease; }
.lvxd-sf-footer-brand:hover .lvxd-sf-footer-brand-mark {
  animation: lvxd-sf-footer-nib-hop 1.1s ease-in-out infinite;
}

@keyframes lvxd-sf-footer-nib-hop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-4px) rotate(-9deg); }
  62% { transform: translateY(0) rotate(7deg); }
}
/* All three tracks are content-sized, so no track can reserve width it isn't using, and the band is
   980px - narrow enough that brand + links + Nib fill it at both two and three link columns (three
   needs ~956px). Three shapes were tried and rejected before this one, all of them variations on
   reserving space for content that isn't there: `2fr` for the middle track (held a column of width
   after the feature-flagged Company column stopped rendering), `justify-content: space-between`
   (split the same slack into two voids, one after the blurb and one before Nib), and a trailing
   `1fr` pinning Nib to the band edge (moved the whole void between the last column and Nib). The
   column count here is flag-dependent, so anything that hardcodes it will drift again. */
.lvxd-sf-footer-top {
  max-width: 980px; margin: 0 auto; padding-bottom: 26px;
  display: grid; grid-template-columns: minmax(240px, auto) auto auto;
  align-items: end; gap: 40px;
}
/* Matches footer-top's band, not the 1200px the rest of the page uses - this rule draws the divider
   above the copyright, and a divider wider than the content it sits under looks like a mistake. */
.lvxd-sf-footer-bottom {
  max-width: 980px; margin: 0 auto; padding-top: 18px;
  border-top: 1px solid var(--lvxd-sf-border);
  display: flex; align-items: center; justify-content: center;
}
.lvxd-sf-footer-brandcol { align-self: start; }
.lvxd-sf-footer-blurb {
  margin: 10px 0 16px; max-width: 300px;
  font-size: 13px; line-height: 1.6; color: var(--lvxd-sf-text-muted);
}

/* Flex, not a fixed 3-track grid: the column count is feature-flag dependent, and `repeat(3, ...)`
   kept the third track's width after the Company column stopped rendering. Wraps on its own at
   narrow widths, which is why the 720px breakpoint below no longer needs to restate the tracks. */
.lvxd-sf-footer-links { display: flex; flex-wrap: wrap; gap: 28px 56px; align-self: start; }
.lvxd-sf-footer-linkcol { display: flex; flex-direction: column; gap: 9px; min-width: 120px; }
/* Matches .lvxd-sf-eyebrow's 12.5px/600 rather than the 11.5px/800 uppercase-and-tracked label this
   used to be - that was the only small-caps label in the storefront and it out-weighted the links
   beneath it. One deliberate difference from the eyebrow: the colour is the primary text token, not
   muted, because the links below it are already muted and a muted heading at this size would leave
   weight as the only thing separating a column head from its contents. */
.lvxd-sf-footer-linkcol h3 {
  margin: 0 0 5px; font-size: 12.5px; font-weight: 600;
  color: var(--lvxd-sf-text);
}
.lvxd-sf-footer-linkcol a {
  font-size: 13.5px; color: var(--lvxd-sf-text-muted); text-decoration: none;
  transition: color .15s ease, transform .15s ease;
  width: fit-content;
}
.lvxd-sf-footer-linkcol a:hover { color: var(--lvxd-sf-accent); transform: translateX(3px); }

/* Nib closes the page out. He sets the footer's height rather than fitting into it - the
   placement floor is 120px and anything smaller has to be dropped, not shrunk. */
.lvxd-sf-footer-nib { align-self: end; }

@media (max-width: 1100px) {
  /* Nib is dropped below this width, so the third track carries nothing - 1fr lets it absorb the
     slack the band no longer needs, keeping brand and links together on the left. */
  .lvxd-sf-footer-top { grid-template-columns: minmax(240px, auto) auto 1fr; }
  .lvxd-sf-footer-nib { display: none; }
}

@media (max-width: 720px) {
  .lvxd-sf-footer-top { grid-template-columns: 1fr; gap: 28px; }
}
.lvxd-sf-footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.lvxd-sf-footer-brand-mark { width: 20px; height: 20px; object-fit: contain; }
.lvxd-sf-footer-brand-name { height: 20px; width: auto; display: block; object-fit: contain; }
.lvxd-sf-footer-copy { font-size: 13px; color: var(--lvxd-sf-text-faint); }
.lvxd-sf-footer-cert {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 8px; border-radius: 999px;
  background: var(--lvxd-sf-accent-soft);
  border: 1px solid color-mix(in oklch, var(--lvxd-sf-accent) 22%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lvxd-sf-footer-cert:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--lvxd-sf-accent) 48%, transparent);
  box-shadow: 0 8px 22px color-mix(in oklch, var(--lvxd-sf-accent) 20%, transparent);
}
/* The ISO mark itself - no tinted disc behind it and no border-radius crop. The certification
   mark must be reproduced unmodified, so it gets a plain transparent box at its documented
   footer size (30px) and the pill's own 8px left padding as clear space. */
.lvxd-sf-footer-cert-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  /* A plain white plate, not a tint. The mark is largely white itself and washed out against
     the pill's accent-soft fill - DESIGN-OVERRIDES.md forbids a busy or dark backing for
     exactly this reason. The plate backs the mark; it never recolours or crops it. */
  background: #fff;
}
.lvxd-sf-footer-cert-mark img { width: 30px; height: 30px; object-fit: contain; }
.lvxd-sf-footer-cert-text { display: flex; flex-direction: column; line-height: 1.25; }
.lvxd-sf-footer-cert-text strong { font-size: 12.5px; font-weight: 700; color: var(--lvxd-sf-text); }
.lvxd-sf-footer-cert-text small { font-size: 11px; color: var(--lvxd-sf-text-muted); }

/* Toast (login / workspace stub affordance) */
.lvxd-sf-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--lvxd-sf-text);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--lvxd-sf-shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}
.lvxd-sf-toast.lvxd-sf-toast-show { opacity: 1; transform: translate(-50%, 0); }

/* Pricing page */
.lvxd-sf-pricing-hero { max-width: 660px; margin: 0 auto; padding: 52px 24px 8px; text-align: center; }
.lvxd-sf-pricing-hero .lvxd-sf-eyebrow {
  background: var(--lvxd-sf-badge-free-bg); color: var(--lvxd-sf-badge-free-text); border-color: transparent; box-shadow: none;
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 5px 13px;
}
.lvxd-sf-pricing-hero h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -.02em; margin: 14px 0 12px; }
.lvxd-sf-pricing-hero p { color: var(--lvxd-sf-text-muted); font-size: 16px; line-height: 1.6; margin: 0; }
.lvxd-sf-pricing-hub-note {
  display: inline-flex; align-items: center; gap: 9px; margin: 22px auto 0;
  padding: 9px 16px; border-radius: 12px; background: var(--lvxd-sf-accent-soft);
  border: 1px solid var(--lvxd-sf-border); font-size: 12.5px; font-weight: 700; color: var(--lvxd-sf-text);
}
.lvxd-sf-pricing-hub-note strong { color: var(--lvxd-sf-accent); }

.lvxd-sf-billing-toggle-wrap { display: flex; justify-content: center; margin: 22px 0 10px; }
.lvxd-sf-billing-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  border-radius: 12px; background: var(--lvxd-sf-surface-tint); border: 1px solid var(--lvxd-sf-border);
}
.lvxd-sf-billing-toggle button {
  appearance: none; border: none; font: inherit; cursor: pointer;
  padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 800;
  color: var(--lvxd-sf-text-muted); background: transparent; transition: background .18s ease, color .18s ease;
}
.lvxd-sf-billing-toggle button[aria-pressed="true"] { color: #fff; background: var(--lvxd-sf-accent); }
.lvxd-sf-billing-save {
  margin: 0 8px 0 4px; padding: 3px 9px; border-radius: 7px;
  background: var(--lvxd-sf-badge-free-bg); color: var(--lvxd-sf-badge-free-text); font-size: 10.5px; font-weight: 800;
}

.lvxd-sf-tier-grid {
  max-width: 1200px; margin: 26px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: stretch;
}
@media (max-width: 980px) {
  .lvxd-sf-tier-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
.lvxd-sf-tier-card {
  display: flex; flex-direction: column; padding: 22px 18px; border-radius: 18px;
  background: var(--lvxd-sf-surface); border: 1.5px solid var(--lvxd-sf-border);
  box-shadow: var(--lvxd-sf-shadow-sm); transition: transform .25s ease;
}
.lvxd-sf-tier-card:hover { transform: translateY(-5px); }
.lvxd-sf-tier-card-popular {
  background: linear-gradient(160deg, oklch(21% 0.05 264), oklch(30% 0.09 259.8));
  border-color: transparent; color: #fff;
}
.lvxd-sf-tier-badge {
  align-self: flex-start; padding: 3px 10px; border-radius: 7px;
  background: oklch(100% 0 0 / 16%); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px;
}
.lvxd-sf-tier-name { font-size: 15px; font-weight: 800; }
.lvxd-sf-tier-card-popular .lvxd-sf-tier-name { color: #fff; }
.lvxd-sf-tier-price-row { display: flex; align-items: baseline; gap: 3px; margin-top: 9px; }
.lvxd-sf-tier-price { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.lvxd-sf-tier-per { font-size: 12px; color: var(--lvxd-sf-text-faint); }
.lvxd-sf-tier-card-popular .lvxd-sf-tier-per { color: oklch(100% 0 0 / 65%); }
.lvxd-sf-tier-subnote { font-size: 10.5px; font-weight: 600; color: var(--lvxd-sf-text-faint); margin-top: 3px; }
.lvxd-sf-tier-card-popular .lvxd-sf-tier-subnote { color: oklch(100% 0 0 / 60%); }
.lvxd-sf-tier-blurb { font-size: 12px; color: var(--lvxd-sf-text-muted); margin-top: 8px; line-height: 1.45; min-height: 52px; }
.lvxd-sf-tier-card-popular .lvxd-sf-tier-blurb { color: oklch(100% 0 0 / 80%); }
.lvxd-sf-tier-card .lvxd-sf-btn {
  margin: 4px 0 16px; justify-content: center;
  padding: 11px; border-radius: 10px; font-size: 13px; font-weight: 800;
}
.lvxd-sf-tier-card .lvxd-sf-btn:hover { transform: translateY(-1px); }
.lvxd-sf-tier-card-popular .lvxd-sf-btn-ghost { background: #fff; color: var(--lvxd-sf-accent); border-color: transparent; }
.lvxd-sf-tier-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lvxd-sf-tier-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--lvxd-sf-text-muted); }
.lvxd-sf-tier-feats i { flex-shrink: 0; margin-top: 2px; color: var(--lvxd-sf-accent); }
.lvxd-sf-tier-card-popular .lvxd-sf-tier-feats li { color: oklch(100% 0 0 / 90%); }
.lvxd-sf-tier-card-popular .lvxd-sf-tier-feats i { color: #7fd0ff; }
.lvxd-sf-pricing-fineprint { text-align: center; margin: 22px 24px 0; font-size: 12.5px; color: var(--lvxd-sf-text-faint); }

/* degrade gracefully if the plan/product lookup SPs return no rows (SP failure) rather than
   rendering an empty grid on a public marketing page */
.lvxd-sf-pricing-unavailable {
  max-width: 720px; margin: 26px auto 0; padding: 22px 24px; border-radius: 16px; text-align: center;
  background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border); box-shadow: var(--lvxd-sf-shadow-sm);
}
.lvxd-sf-pricing-unavailable i { font-size: 24px; color: var(--lvxd-sf-text-faint); }
.lvxd-sf-pricing-unavailable p { margin: 8px 0 0; font-size: 14px; color: var(--lvxd-sf-text-muted); line-height: 1.55; }
.lvxd-sf-pricing-unavailable a { color: var(--lvxd-sf-accent); font-weight: 700; }
.lvxd-sf-alacarte-empty { text-align: center; margin: 0; padding: 20px; font-size: 13.5px; color: var(--lvxd-sf-text-muted); }

[data-lvxd-sf-billing="annual"] .lvxd-sf-billing-monthly-only { display: none; }
[data-lvxd-sf-billing="monthly"] .lvxd-sf-billing-annual-only { display: none; }

.lvxd-sf-alacarte-wrap { max-width: 900px; margin: 0 auto; padding: 20px 24px 20px; }
.lvxd-sf-alacarte-head { text-align: center; margin-bottom: 22px; }
.lvxd-sf-alacarte-head h2 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.lvxd-sf-alacarte-head p { max-width: 480px; margin: 10px auto 0; font-size: 14px; color: var(--lvxd-sf-text-muted); line-height: 1.5; }
.lvxd-sf-alacarte-list { border: 1px solid var(--lvxd-sf-border); border-radius: 16px; overflow: hidden; background: var(--lvxd-sf-surface); box-shadow: var(--lvxd-sf-shadow-sm); }
.lvxd-sf-alacarte-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--lvxd-sf-border); }
.lvxd-sf-alacarte-row:last-child { border-bottom: none; }
.lvxd-sf-alacarte-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--lvxd-sf-accent) 18%, transparent),
    color-mix(in oklch, var(--lvxd-sf-accent-2, var(--lvxd-sf-accent)) 18%, transparent));
  color: var(--lvxd-sf-accent);
}
.lvxd-sf-alacarte-icon img { width: 20px; height: 20px; }
.lvxd-sf-alacarte-name { font-size: 14px; font-weight: 800; }
.lvxd-sf-alacarte-cat { font-size: 11.5px; color: var(--lvxd-sf-text-faint); }
.lvxd-sf-alacarte-price { font-size: 15px; font-weight: 800; color: var(--lvxd-sf-accent); }
.lvxd-sf-alacarte-per { font-size: 11px; color: var(--lvxd-sf-text-faint); }
.lvxd-sf-alacarte-soon { font-size: 12px; font-weight: 700; color: var(--lvxd-sf-text-faint); text-transform: uppercase; letter-spacing: 0.03em; }

.lvxd-sf-cmp-wrap { max-width: 1200px; margin: 0 auto; padding: 60px 24px 20px; }
.lvxd-sf-cmp-wrap h2 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; text-align: center; }
.lvxd-sf-cmp-intro { text-align: center; margin: 0 0 28px; color: var(--lvxd-sf-text-muted); font-size: 16px; line-height: 1.6; }

.lvxd-sf-cmp-container {
  overflow-x: auto;
  border: 1px solid var(--lvxd-sf-border);
  border-radius: 16px;
  background: var(--lvxd-sf-surface);
  box-shadow: var(--lvxd-sf-shadow-sm);
}

.lvxd-sf-cmp-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  background: var(--lvxd-sf-surface);
}

.lvxd-sf-cmp-row {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  border-bottom: 1px solid var(--lvxd-sf-border);
}

.lvxd-sf-cmp-row:last-child { border-bottom: none; }

.lvxd-sf-cmp-head {
  background: var(--lvxd-sf-surface-tint);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2px solid var(--lvxd-sf-border);
}

.lvxd-sf-cmp-head-sticky { box-shadow: 0 2px 8px oklch(21% 0.01 264 / 4%); }

/* Category grouping */
.lvxd-sf-cmp-category { display: contents; }

.lvxd-sf-cmp-category-header {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  background: oklch(97% 0.003 260);
  border-bottom: 2px solid var(--lvxd-sf-border);
  border-top: 1px solid var(--lvxd-sf-border);
}

.lvxd-sf-cmp-category-header:first-of-type { border-top: none; }

.lvxd-sf-cmp-category-title {
  padding: 16px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lvxd-sf-text-faint);
  grid-column: 1 / -1;
}

/* Cells */
.lvxd-sf-cmp-cell {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.lvxd-sf-cmp-header-label {
  color: var(--lvxd-sf-text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 800;
}

.lvxd-sf-cmp-head .lvxd-sf-cmp-header-label {
  color: var(--lvxd-sf-text-faint);
}

.lvxd-sf-cmp-head .lvxd-sf-cmp-cell:not(:first-child) {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--lvxd-sf-text);
  justify-content: center;
  padding: 14px 12px;
}

.lvxd-sf-cmp-feature-label {
  color: var(--lvxd-sf-text);
  font-size: 13px;
  font-weight: 600;
}

.lvxd-sf-cmp-row .lvxd-sf-cmp-cell:not(:first-child) {
  justify-content: center;
  padding: 14px 12px;
}

.lvxd-sf-cmp-icon-check {
  color: oklch(58% 0.14 155);
  font-size: 18px;
  line-height: 1;
}

/* Legend */
.lvxd-sf-cmp-dash {
  color: var(--lvxd-sf-text-faint);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

.lvxd-sf-cmp-note {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--lvxd-sf-text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lvxd-sf-cmp-legend-check i,
.lvxd-sf-cmp-legend-dash {
  display: inline-flex;
  align-items: center;
}

.lvxd-sf-cmp-legend-check i {
  color: oklch(58% 0.14 155);
  font-size: 14px;
}

.lvxd-sf-cmp-legend-separator {
  color: var(--lvxd-sf-border);
}

/* Mobile responsiveness */
@media (max-width: 900px) {
  .lvxd-sf-cmp-wrap { padding: 40px 16px 20px; }
  .lvxd-sf-cmp-wrap h2 { font-size: 24px; }

  .lvxd-sf-cmp-row,
  .lvxd-sf-cmp-head,
  .lvxd-sf-cmp-category-header {
    grid-template-columns: 1.8fr repeat(5, 0.8fr);
    min-width: 700px;
  }

  .lvxd-sf-cmp-cell { padding: 12px 10px; font-size: 12px; }
  .lvxd-sf-cmp-feature-label { font-size: 12px; }
  .lvxd-sf-cmp-category-title { padding: 12px 10px; font-size: 11px; }
}

@media (max-width: 640px) {
  .lvxd-sf-cmp-row,
  .lvxd-sf-cmp-head,
  .lvxd-sf-cmp-category-header {
    grid-template-columns: 1.5fr repeat(5, 0.75fr);
    min-width: 600px;
  }

  .lvxd-sf-cmp-cell { padding: 10px 8px; font-size: 11px; }
  .lvxd-sf-cmp-feature-label { font-size: 11px; }
  .lvxd-sf-cmp-category-title { padding: 10px 8px; font-size: 10px; }
  .lvxd-sf-cmp-head .lvxd-sf-cmp-cell:not(:first-child) { font-size: 11px; padding: 10px 6px; }
  .lvxd-sf-cmp-icon-check { font-size: 16px; }
}

/* Compliance page */
.lvxd-sf-compliance-hero {
  max-width: 660px; margin: 0 auto; padding: 52px 24px 30px; text-align: center;
  background: radial-gradient(900px 420px at 50% -60px, oklch(97% 0.02 259.8), transparent 65%);
}
.lvxd-sf-compliance-hero h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -.02em; margin: 14px 0 12px; }
.lvxd-sf-compliance-hero p { color: var(--lvxd-sf-text-muted); font-size: 16px; line-height: 1.6; margin: 0; }

.lvxd-sf-compliance-cards {
  max-width: 1120px; margin: 0 auto; padding: 10px 24px 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px;
}
.lvxd-sf-compliance-card { background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border); border-radius: var(--lvxd-sf-radius); padding: 26px; }
.lvxd-sf-compliance-icon {
  width: 46px; height: 46px; border-radius: 13px; font-size: 22px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.lvxd-sf-compliance-card h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.lvxd-sf-compliance-card > p { font-size: 14.5px; color: var(--lvxd-sf-text-muted); line-height: 1.6; margin: 0 0 16px; }
.lvxd-sf-compliance-list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--lvxd-sf-border); display: flex; flex-direction: column; gap: 10px; }
.lvxd-sf-compliance-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--lvxd-sf-text-muted); }
.lvxd-sf-compliance-list i { color: var(--lvxd-sf-accent); }

.lvxd-sf-compliance-badges {
  max-width: 1080px; margin: 0 auto; padding: 6px 24px 20px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media (max-width: 900px) {
  .lvxd-sf-compliance-badges { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.lvxd-sf-compliance-badge {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border); border-radius: 14px;
  box-shadow: var(--lvxd-sf-shadow-sm);
}
.lvxd-sf-compliance-badge-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lvxd-sf-accent-soft); color: var(--lvxd-sf-accent);
}
.lvxd-sf-compliance-badge div { display: flex; flex-direction: column; min-width: 0; }
.lvxd-sf-compliance-badge strong { font-size: 13px; font-weight: 800; }
.lvxd-sf-compliance-badge span { font-size: 11.5px; color: var(--lvxd-sf-text-faint); }

.lvxd-sf-compliance-icon-amber { background: oklch(78% 0.16 75 / 14%); color: oklch(58% 0.16 75); }
.lvxd-sf-compliance-icon-cyan { background: oklch(70% 0.12 220 / 14%); color: oklch(50% 0.12 220); }

.lvxd-sf-compliance-secgrid-wrap { max-width: 1120px; margin: 0 auto; padding: 36px 24px 20px; }
.lvxd-sf-compliance-secgrid-header { max-width: 560px; margin: 0 auto 24px; text-align: center; }
.lvxd-sf-compliance-secgrid-header h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.lvxd-sf-compliance-secgrid-header p { color: var(--lvxd-sf-text-muted); font-size: 14px; line-height: 1.55; margin: 10px 0 0; }
.lvxd-sf-compliance-secgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
}
.lvxd-sf-compliance-seccard { background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border); border-radius: 16px; padding: 22px; transition: transform .22s ease; }
.lvxd-sf-compliance-seccard:hover { transform: translateY(-4px); }
.lvxd-sf-compliance-seccard h3 { font-size: 15px; font-weight: 800; margin: 0 0 8px; }
.lvxd-sf-compliance-seccard p { font-size: 12.5px; color: var(--lvxd-sf-text-muted); line-height: 1.55; margin: 0; }

.lvxd-sf-compliance-popia-wrap { max-width: 1120px; margin: 0 auto; padding: 36px 24px 20px; }
.lvxd-sf-compliance-popia {
  border-radius: 20px; border: 1px solid var(--lvxd-sf-border); padding: 34px 32px;
  background: linear-gradient(135deg, oklch(97% 0.03 155), oklch(97% 0.02 259.8));
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: center;
}
.lvxd-sf-compliance-popia-copy .lvxd-sf-pill {
  background: #fff; border-color: transparent; color: oklch(45% 0.14 155);
  font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 5px 12px;
}
.lvxd-sf-compliance-popia-copy h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 14px 0 0; }
.lvxd-sf-compliance-popia-copy p { color: var(--lvxd-sf-text-muted); font-size: 14px; line-height: 1.6; margin: 12px 0 0; }
.lvxd-sf-compliance-popia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lvxd-sf-compliance-popia-card { background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border); border-radius: 13px; padding: 16px; }
.lvxd-sf-compliance-popia-card strong { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--lvxd-sf-text); }
.lvxd-sf-compliance-popia-card strong i { color: oklch(62% 0.18 155); }
.lvxd-sf-compliance-popia-card span { display: block; font-size: 12px; color: var(--lvxd-sf-text-muted); margin-top: 7px; line-height: 1.5; }
@media (max-width: 760px) {
  .lvxd-sf-compliance-popia { grid-template-columns: 1fr; }
  .lvxd-sf-compliance-popia-grid { grid-template-columns: 1fr 1fr; }
}

.lvxd-sf-compliance-faq-wrap { max-width: 760px; margin: 0 auto; padding: 36px 24px 60px; }
.lvxd-sf-compliance-faq-wrap h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 22px; text-align: center; }
.lvxd-sf-compliance-faq { display: flex; flex-direction: column; gap: 11px; }
.lvxd-sf-compliance-faq details { border: 1px solid var(--lvxd-sf-border); border-radius: 14px; background: var(--lvxd-sf-surface); overflow: hidden; box-shadow: var(--lvxd-sf-shadow-sm); }
.lvxd-sf-compliance-faq summary { padding: 16px 18px; font-size: 14.5px; font-weight: 700; color: var(--lvxd-sf-text); cursor: pointer; list-style: none; }
.lvxd-sf-compliance-faq summary::-webkit-details-marker { display: none; }
.lvxd-sf-compliance-faq summary::after {
  content: '\002B'; float: right; color: var(--lvxd-sf-accent); font-weight: 800;
  display: inline-block; transition: transform .25s ease;
}
.lvxd-sf-compliance-faq details[open] summary::after { transform: rotate(45deg); }
.lvxd-sf-compliance-faq p {
  margin: 0; padding: 0 18px 16px; font-size: 13.5px; color: var(--lvxd-sf-text-muted); line-height: 1.6;
  animation: lvxd-sf-faq-fade-up .25s ease both;
}
@keyframes lvxd-sf-faq-fade-up {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-compliance-faq summary::after { transition: none; }
  .lvxd-sf-compliance-faq p { animation: none; }
}

/* Legal / policy pages (Privacy Notice, etc.) */
.lvxd-sf-legal { max-width: 720px; margin: 0 auto; padding: 64px 24px 96px; }
.lvxd-sf-legal h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; margin: 0 0 8px; }
.lvxd-sf-legal .lvxd-sf-legal-updated { font-size: 13px; color: var(--lvxd-sf-text-faint); margin: 0 0 36px; }
.lvxd-sf-legal h2 { font-size: 19px; font-weight: 700; margin: 36px 0 10px; }
.lvxd-sf-legal p, .lvxd-sf-legal li { font-size: 15px; line-height: 1.65; color: var(--lvxd-sf-text-muted); }
.lvxd-sf-legal ul { margin: 10px 0; padding-left: 22px; }
.lvxd-sf-legal li { margin: 4px 0; }
.lvxd-sf-legal strong { color: var(--lvxd-sf-text); }
.lvxd-sf-legal-note {
  margin: 28px 0 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--lvxd-sf-surface-tint);
  border: 1px solid var(--lvxd-sf-border);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lvxd-sf-text-muted);
}

/* Contact-sales form */
.lvxd-sf-form { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; }
.lvxd-sf-form-label { font-size: 13.5px; font-weight: 700; color: var(--lvxd-sf-text); margin-top: 14px; }
.lvxd-sf-form-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1.5px solid var(--lvxd-sf-border);
  border-radius: 10px;
  outline: none;
  color: var(--lvxd-sf-text);
  background: var(--lvxd-sf-surface);
}
.lvxd-sf-form-input:focus { border-color: var(--lvxd-sf-accent); box-shadow: 0 0 0 4px var(--lvxd-sf-accent-soft); }
.lvxd-sf-form-textarea { height: auto; min-height: 100px; padding: 12px 14px; resize: vertical; }
.lvxd-sf-form button[type="submit"] { margin-top: 22px; align-self: flex-start; }
/* Honeypot (SubmitReview.cshtml) - hidden off-screen, not display:none, so it stays in a bot's
   form-fillable DOM while never being visible/reachable for a real visitor. */
.lvxd-sf-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* SubmitReview.cshtml - same card treatment as .lvxd-sf-tier-card/.lvxd-sf-compliance-faq details
   (border + --lvxd-sf-surface + --lvxd-sf-shadow-sm), constrained to a form-friendly width instead
   of the page's full grid width. */
.lvxd-sf-review-form-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 36px 36px;
  border: 1px solid var(--lvxd-sf-border);
  border-radius: 16px;
  background: var(--lvxd-sf-surface);
  box-shadow: var(--lvxd-sf-shadow-sm);
}
.lvxd-sf-review-form-card .lvxd-sf-form { margin-top: 8px; }

/* Products page */
.lvxd-sf-products-hero { max-width: 660px; margin: 0 auto; padding: 52px 24px 8px; text-align: center; }
.lvxd-sf-products-hero .lvxd-sf-eyebrow {
  background: var(--lvxd-sf-accent-soft); color: var(--lvxd-sf-accent); border-color: transparent; box-shadow: none;
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 5px 13px;
}
.lvxd-sf-products-hero h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -.02em; margin: 14px 0 12px; }
.lvxd-sf-products-hero p { color: var(--lvxd-sf-text-muted); font-size: 16px; line-height: 1.6; margin: 0; }

.lvxd-sf-spotlight-wrap { max-width: 1160px; margin: 22px auto 0; padding: 0 24px; }
.lvxd-sf-spotlight {
  position: relative; overflow: hidden; border-radius: 22px; padding: 34px 36px;
  background: linear-gradient(130deg, oklch(21% 0.05 264), oklch(30% 0.09 259.8));
  color: #fff; display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center;
}
.lvxd-sf-spotlight-blob {
  position: absolute; right: -60px; bottom: -70px; width: 260px; height: 260px; border-radius: 50%;
  background: color-mix(in oklch, var(--lvxd-sf-spotlight-accent, oklch(58% 0.22 15)) 28%, transparent);
  filter: blur(20px); animation: lvxd-sf-blob 16s ease-in-out infinite;
}
.lvxd-sf-spotlight-copy { position: relative; }
.lvxd-sf-spotlight-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 20px;
  background: oklch(100% 0 0 / 14%); font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 14px;
}
.lvxd-sf-spotlight-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lvxd-sf-spotlight-accent, oklch(58% 0.22 15)); animation: lvxd-sf-pulse-soft 1.8s ease-in-out infinite; }
.lvxd-sf-spotlight-copy h2 { margin: 0; font-size: clamp(22px, 3vw, 29px); font-weight: 800; letter-spacing: -.02em; }
.lvxd-sf-spotlight-name { color: var(--lvxd-sf-spotlight-accent-2, var(--lvxd-sf-spotlight-accent, oklch(72% 0.18 15))); }
.lvxd-sf-spotlight-copy p { margin: 12px 0 0; max-width: 440px; font-size: 14.5px; line-height: 1.6; opacity: .85; }
.lvxd-sf-spotlight-feats { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.lvxd-sf-spotlight-feat { display: flex; align-items: center; gap: 8px; font-size: 12.5px; opacity: .92; }
.lvxd-sf-spotlight-feat i { color: var(--lvxd-sf-spotlight-accent-2, var(--lvxd-sf-spotlight-accent, oklch(72% 0.18 15))); }
.lvxd-sf-spotlight-copy .lvxd-sf-btn { margin-top: 22px; }
.lvxd-sf-spotlight-copy .lvxd-sf-btn-white {
  padding: 13px 24px; border-radius: 12px; font-size: 14px; font-weight: 800;
  color: #0b1437; box-shadow: none;
}
.lvxd-sf-spotlight-icon-wrap { position: relative; display: flex; justify-content: center; }
.lvxd-sf-spotlight-icon {
  width: 140px; height: 140px; border-radius: 34px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--lvxd-sf-spotlight-accent, oklch(58% 0.22 15)), var(--lvxd-sf-spotlight-accent-2, var(--lvxd-sf-spotlight-accent, oklch(72% 0.18 15))));
  box-shadow: 0 24px 60px color-mix(in oklch, var(--lvxd-sf-spotlight-accent, oklch(58% 0.22 15)) 45%, transparent);
  animation: lvxd-sf-float 5s ease-in-out infinite;
}
.lvxd-sf-spotlight-icon img { width: 60px; height: 60px; }
@media (max-width: 760px) {
  .lvxd-sf-spotlight { grid-template-columns: 1fr; text-align: center; }
  .lvxd-sf-spotlight-feats { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-spotlight-blob, .lvxd-sf-spotlight-dot, .lvxd-sf-spotlight-icon { animation: none; }
}

.lvxd-sf-pgrid-wrap { max-width: 1160px; margin: 40px auto 0; padding: 0 24px 20px; }
.lvxd-sf-pgrid-tabs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }
.lvxd-sf-pgrid-tab {
  display: flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 11px;
  border: none; font: inherit; cursor: pointer; font-size: 13px; font-weight: 700;
  background: var(--lvxd-sf-surface-tint); color: var(--lvxd-sf-text-muted);
  transition: background .2s ease, color .2s ease;
}
.lvxd-sf-pgrid-tab span { font-size: 10.5px; opacity: .7; }
.lvxd-sf-pgrid-tab[aria-pressed="true"] { background: var(--lvxd-sf-accent); color: #fff; }
.lvxd-sf-pgrid-tab:focus-visible,
.lvxd-sf-pcard-see:focus-visible,
.lvxd-sf-pcard-trailer:focus-visible {
  outline: 2px solid var(--lvxd-sf-accent); outline-offset: 2px; border-radius: 11px;
}

.lvxd-sf-pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px) { .lvxd-sf-pgrid { grid-template-columns: 1fr; } }

/* Reviews page grid - static (non-marquee) layout reusing the testimonial card's own
   .lvxd-sf-testimonial-* internals (stars/quote/who/avatar), see .lvxd-sf-testimonial-card above. */
.lvxd-sf-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .lvxd-sf-reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lvxd-sf-reviews-grid { grid-template-columns: 1fr; } }
.lvxd-sf-review-card {
  width: auto; flex: none; padding: 22px; border-radius: 16px;
  background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border); box-shadow: var(--lvxd-sf-shadow-sm);
}
.lvxd-sf-review-card-hidden { display: none; }
.lvxd-sf-review-card { transition: transform .25s ease, box-shadow .25s ease; }
.lvxd-sf-review-card:hover { transform: translateY(-4px); box-shadow: var(--lvxd-sf-shadow-md); }
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-review-card { transition: none; }
  .lvxd-sf-review-card:hover { transform: none; }
}

/* Reviews-page "wall of love" summary ------------------------------------- */
.lvxd-sf-review-summary {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 32px; align-items: center;
  padding: 26px 28px; margin-bottom: 22px; border-radius: 18px;
  background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border); box-shadow: var(--lvxd-sf-shadow-sm);
}
@media (max-width: 720px) { .lvxd-sf-review-summary { grid-template-columns: 1fr; gap: 22px; text-align: center; } }
.lvxd-sf-review-summary-score { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lvxd-sf-review-summary-avg { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--lvxd-sf-text); }
.lvxd-sf-review-summary-stars { display: flex; gap: 3px; color: oklch(78% 0.15 85); font-size: 18px; }
.lvxd-sf-review-summary-count { font-size: 13px; color: var(--lvxd-sf-text-muted); text-align: center; }
.lvxd-sf-review-summary-count strong { color: var(--lvxd-sf-text); font-weight: 800; }
.lvxd-sf-review-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--lvxd-sf-success, oklch(52% 0.15 155));
  background: color-mix(in oklch, var(--lvxd-sf-success, oklch(52% 0.15 155)) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--lvxd-sf-success, oklch(52% 0.15 155)) 30%, transparent);
}
.lvxd-sf-review-badge i { font-size: 13px; }

.lvxd-sf-review-summary-dist { display: flex; flex-direction: column; gap: 9px; }
.lvxd-sf-review-dist-row { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 12px; }
.lvxd-sf-review-dist-label { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--lvxd-sf-text-muted); }
.lvxd-sf-review-dist-label i { color: oklch(78% 0.15 85); font-size: 12px; }
.lvxd-sf-review-dist-track { height: 9px; border-radius: 999px; background: var(--lvxd-sf-surface-tint, color-mix(in oklch, var(--lvxd-sf-border) 55%, transparent)); overflow: hidden; }
.lvxd-sf-review-dist-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--lvxd-sf-accent, #1b84ff), color-mix(in oklch, var(--lvxd-sf-accent, #1b84ff) 60%, #17c653));
  transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.lvxd-sf-review-summary.is-inview .lvxd-sf-review-dist-fill { width: var(--lvxd-sf-dist-pct, 0%); }
.lvxd-sf-review-dist-count { font-size: 12.5px; font-weight: 700; color: var(--lvxd-sf-text-muted); text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .lvxd-sf-review-dist-fill { transition: none; }
}
.lvxd-sf-pcard {
  position: relative; overflow: hidden; padding: 24px; border-radius: 18px;
  background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border); box-shadow: var(--lvxd-sf-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lvxd-sf-pcard:hover { transform: translateY(-5px); box-shadow: var(--lvxd-sf-shadow-md); }
.lvxd-sf-pcard.lvxd-sf-pcard-hidden { display: none; }
.lvxd-sf-pcard-glow {
  position: absolute; top: -40px; right: -40px; width: 130px; height: 130px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lvxd-sf-accent), var(--lvxd-sf-accent-2, var(--lvxd-sf-accent)));
  opacity: .45;
}
.lvxd-sf-pcard-top { position: relative; display: flex; align-items: flex-start; gap: 14px; }
.lvxd-sf-pcard-icon {
  width: 50px; height: 50px; flex-shrink: 0; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--lvxd-sf-accent) 20%, transparent),
    color-mix(in oklch, var(--lvxd-sf-accent-2, var(--lvxd-sf-accent)) 20%, transparent));
  color: var(--lvxd-sf-accent);
}
.lvxd-sf-pcard-icon img { width: 26px; height: 26px; }
.lvxd-sf-pcard-heading { flex: 1; min-width: 0; }
.lvxd-sf-pcard-name-row { display: flex; align-items: center; gap: 9px; }
.lvxd-sf-pcard-name { font-size: 17px; font-weight: 800; color: var(--lvxd-sf-text); }
.lvxd-sf-pcard-badge {
  padding: 2px 8px; border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: .02em;
  background: color-mix(in oklch, var(--lvxd-sf-accent) 18%, transparent); color: var(--lvxd-sf-accent);
}
/* Badge colour is keyed to badge TYPE, not the product's own accent - matches the handoff's
   fixed Recommended/Free/New/Coming-soon colour scheme regardless of which product carries it. */
.lvxd-sf-pcard-badge[data-badge="Recommended"] { background: var(--lvxd-sf-badge-recommended-bg); color: var(--lvxd-sf-badge-recommended-text); }
.lvxd-sf-pcard-badge[data-badge="Free"] { background: var(--lvxd-sf-badge-free-bg); color: var(--lvxd-sf-badge-free-text); }
.lvxd-sf-pcard-badge[data-badge="New"] { background: var(--lvxd-sf-badge-new-bg); color: var(--lvxd-sf-badge-new-text); }
.lvxd-sf-pcard-badge[data-badge="Coming soon"] { background: var(--lvxd-sf-surface-tint); color: var(--lvxd-sf-text-faint); }
.lvxd-sf-pcard-cat { font-size: 12px; color: var(--lvxd-sf-text-faint); margin-top: 2px; }
.lvxd-sf-pcard-price { text-align: right; flex-shrink: 0; font-size: 14px; font-weight: 800; color: var(--lvxd-sf-accent); }
.lvxd-sf-pcard-tagline { position: relative; font-size: 13.5px; color: var(--lvxd-sf-text-muted); margin: 14px 0 0; line-height: 1.5; }
.lvxd-sf-pcard-feats { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.lvxd-sf-pcard-feats div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--lvxd-sf-text-muted); }
.lvxd-sf-pcard-feats i { color: var(--lvxd-sf-accent); flex-shrink: 0; }
.lvxd-sf-pcard-actions {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--lvxd-sf-border);
}
/* No trailer video -> only the See-it/Coming-soon CTA remains; keep it right-aligned. */
.lvxd-sf-pcard-actions > :only-child { margin-left: auto; }
.lvxd-sf-pcard-trailer {
  display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 9px;
  border: none; font: inherit; cursor: pointer; background: var(--lvxd-sf-surface-tint);
  color: var(--lvxd-sf-text); font-size: 12.5px; font-weight: 700; transition: background .18s ease;
}
.lvxd-sf-pcard-trailer:hover { background: color-mix(in oklch, var(--lvxd-sf-accent) 15%, transparent); }
.lvxd-sf-pcard-trailer-play {
  width: 20px; height: 20px; border-radius: 50%; background: var(--lvxd-sf-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 9px;
}
.lvxd-sf-pcard-see {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px;
  background: color-mix(in oklch, var(--lvxd-sf-accent) 18%, transparent); color: var(--lvxd-sf-accent);
  font-size: 12.5px; font-weight: 800; transition: transform .18s ease;
}
.lvxd-sf-pcard-see:hover { transform: translateX(2px); }
.lvxd-sf-pcard-see-disabled { opacity: .6; cursor: default; }

.lvxd-sf-pgrid-cta { text-align: center; margin-top: 34px; }
.lvxd-sf-pgrid-cta-note { margin-top: 11px; font-size: 12.5px; color: var(--lvxd-sf-text-faint); }

/* "Great alone. Unstoppable together." synergy section */
.lvxd-sf-synergy { background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--lvxd-sf-accent) 5%, transparent)); padding: 52px 24px; }
.lvxd-sf-synergy-head { max-width: 1000px; margin: 0 auto; text-align: center; }
.lvxd-sf-synergy-head h2 { margin: 0; font-size: clamp(24px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.lvxd-sf-synergy-head p { margin: 11px auto 0; max-width: 520px; font-size: 15px; color: var(--lvxd-sf-text-muted); line-height: 1.55; }
.lvxd-sf-synergy-grid {
  max-width: 1000px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left;
}
@media (max-width: 760px) { .lvxd-sf-synergy-grid { grid-template-columns: 1fr; } }
.lvxd-sf-synergy-card { padding: 22px; border-radius: 16px; background: var(--lvxd-sf-surface); border: 1px solid var(--lvxd-sf-border); box-shadow: var(--lvxd-sf-shadow-sm); }
.lvxd-sf-synergy-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.lvxd-sf-synergy-card h3 { font-size: 15px; font-weight: 800; margin: 0; color: var(--lvxd-sf-text); }
.lvxd-sf-synergy-card p { font-size: 13px; color: var(--lvxd-sf-text-muted); margin: 6px 0 0; line-height: 1.5; }