/* styles.css */
/* VanityFilter product site: palette and surfaces mirror the app (app/ui/theme.py). */

:root {
  --bg: #0e0e15;
  --bg-deep: #0a0a10;
  --surface: #16161f;
  --surface-2: #1e1e2b;
  --border: #2a2a3c;
  --text: #e9e9f2;
  --dim: #8f8fa8;
  --faint: #6b6b82;
  --blue: #4d7cfe;
  --violet: #7c5cff;
  --pink: #d84fd0;
  --grad: linear-gradient(90deg, var(--blue), var(--violet) 55%, var(--pink));
  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --container: 1240px;
  --page-gutter: 24px;
  --radius: 14px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: none; }
/* Text links fade to the lavender at the base of the Buy Now button (2026-09-24, owner). Links with a class keep their own hover. */
a:not([class]) { transition: color 0.2s ease; }
a:not([class]):hover, a:not([class]):focus-visible { color: #c8b5ef; }
@media (prefers-reduced-motion: reduce) { a:not([class]) { transition: none; } }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(124, 92, 255, 0.45); color: #fff; }
section[id], main[id] { scroll-margin-top: 80px; }

/* Scrollbar, matching the app */
* { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--page-gutter); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 14, 21, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand .brand-logo { display: block; width: 180px; height: auto; max-width: 100%; border-radius: 0; }
.brand { flex-shrink: 0; }
.nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--dim); font-size: 0.92rem; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--violet); }
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.18s ease, top 0.18s ease, background-color 0.18s ease;
}
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before,
.nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }
.nav.is-open .nav-toggle-icon { background: transparent; }
.nav.is-open .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 767px) {
  .nav-inner { position: relative; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-left: 0;
    padding: 12px 24px 20px;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: rgba(14, 14, 21, 0.98);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }
  .nav.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .nav-links a:not(.btn) {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--dim);
    font-size: 1rem;
  }
  .nav-links a:not(.btn):hover,
  .nav-links a:not(.btn):focus-visible { background: var(--surface); color: var(--text); }
  .nav-links .btn { width: 100%; margin-top: 6px; }
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
  padding: 12px 26px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn:hover { border-color: var(--violet); text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--grad); border: none; color: #fff; box-shadow: 0 4px 24px rgba(124, 92, 255, 0.35); }
.btn-primary:hover { box-shadow: 0 6px 32px rgba(124, 92, 255, 0.5); }
.btn-small { padding: 8px 18px; font-size: 0.88rem; }

/* ---------- shared section furniture ---------- */
.section { padding: 96px 0; }
.section + .section { border-top: 1px solid rgba(42, 42, 60, 0.55); }

.eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--violet); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--grad); border-radius: 1px; }

.section h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; margin: 14px 0 10px;
}
.section .lede { color: var(--dim); }

/* ---------- reveals ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
/* Without JS the observer that adds .in never runs and every section stays
   invisible (all 12 on the home page). Reader modes, some AI crawlers and
   screenshot tools do not run JS, so show everything when .js is absent. */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { padding: 84px 0 96px; overflow: hidden; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto;  height: 130%;
  background:
    radial-gradient(38% 45% at 18% 22%, rgba(77, 124, 254, 0.13), transparent 70%),
    radial-gradient(34% 42% at 82% 30%, rgba(216, 79, 208, 0.10), transparent 70%),
    radial-gradient(40% 50% at 55% 80%, rgba(124, 92, 255, 0.08), transparent 72%);
  pointer-events: none;
}
.hero .container { position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.hero h1 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(2.5rem, 5.4vw, 3.9rem); line-height: 1.06; margin: 18px 0 20px;
}
.hero .sub { color: var(--dim); font-size: 1.12rem; max-width: none; }
.hero-ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-meta {
  margin-top: 30px; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase;
}
.hero-meta span + span::before { content: "·"; margin: 0 10px; color: var(--border); }

/* ---------- the signature: app window recreation ---------- */
.appwin {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 92, 255, 0.06);
  overflow: hidden; position: relative;
}
.appwin::before { content: ""; display: block; height: 2px; background: var(--grad); }
.appwin-title {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  font-size: 0.8rem; color: var(--dim); border-bottom: 1px solid var(--border);
}
.appwin-title img { width: 16px; height: 16px; border-radius: 4px; }
.appwin-title .win-btns { margin-left: auto; display: flex; gap: 14px; color: var(--faint); font-size: 0.7rem; }

.appwin-preview {
  position: relative; background: var(--bg-deep); height: 250px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.appwin-preview .face { width: 42%; position: relative; }
.appwin-preview .face img { filter: drop-shadow(0 12px 32px rgba(124, 92, 255, 0.25)); border-radius: 18%; }
.appwin-preview .face .mask-tint {
  position: absolute; inset: 0; border-radius: 18%;
  background: radial-gradient(ellipse 52% 62% at 52% 50%, rgba(124, 92, 255, 0.55), transparent 72%);
  opacity: 0; animation: maskIn 1.2s ease 1.4s forwards;
}
@keyframes maskIn { to { opacity: 1; } }

.scanline {
  position: absolute; left: 8%; right: 8%; height: 2px;
  background: var(--grad); box-shadow: 0 0 18px rgba(124, 92, 255, 0.8);
  top: 12%; opacity: 0; animation: scan 1.35s ease-in-out 0.25s 1;
}
@keyframes scan {
  0% { top: 12%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 86%; opacity: 0; }
}

.face-chip {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text);
  background: rgba(22, 22, 31, 0.9); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 999px;
  opacity: 0; transform: scale(0.85); animation: chipIn 0.35s ease 1.15s forwards;
}
.face-chip b { color: var(--violet); }
@keyframes chipIn { to { opacity: 1; transform: scale(1); } }

.view-chips { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 6px; }
.view-chips span {
  font-size: 0.68rem; font-family: var(--font-mono); color: var(--faint);
  border: 1px solid var(--border); background: rgba(22, 22, 31, 0.9);
  padding: 4px 10px; border-radius: 999px;
}
.view-chips .active { color: #fff; background: var(--grad); border-color: transparent; }

.appwin-controls { padding: 16px 18px 18px; display: grid; gap: 12px; }
.ctl { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 12px; }
.ctl label { font-size: 0.78rem; color: var(--dim); }
.ctl .val { font-family: var(--font-mono); font-size: 0.7rem; color: var(--faint); text-align: right; }
.track { height: 4px; background: var(--border); border-radius: 2px; position: relative; }
.track .fill {
  position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 2px; background: var(--grad);
  animation: fillIn 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.5s backwards;
}
.track .fill::after {
  content: ""; position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%; background: var(--text); border: 2px solid var(--violet);
}
@keyframes fillIn { from { width: 0; } }

.appwin-foot { display: flex; align-items: center; gap: 12px; padding: 0 18px 18px; }
.appwin-foot .start {
  font-size: 0.82rem; font-weight: 600; color: #fff; background: var(--grad);
  border-radius: 8px; padding: 7px 22px;
}
.appwin-foot .bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.appwin-foot .bar i { display: block; height: 100%; width: 38%; background: var(--grad); border-radius: 3px; }
.appwin-foot .pct { font-family: var(--font-mono); font-size: 0.68rem; color: var(--faint); }

/* ---------- protected strip ---------- */
.protected { text-align: center; }
.protected .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.protected .chips span {
  border: 1px solid var(--border); background: var(--surface); color: var(--dim);
  border-radius: 999px; padding: 8px 18px; font-size: 0.92rem;
}
.protected .chips span::before { content: "✓ "; color: var(--violet); font-weight: 700; }

/* ---------- features ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 24px; width: 34px; height: 2px; background: var(--grad);
}
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; margin-bottom: 8px; letter-spacing: -0.01em; }
.new-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  background: var(--grad); border-radius: 999px; padding: 3px 8px;
}
.card p { color: var(--dim); font-size: 0.95rem; line-height: 1.6; }
.card { transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.card:hover {
  border-color: rgba(124, 92, 255, 0.55); transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(124, 92, 255, 0.12);
}
.card:hover::before { width: 100%; left: 0; transition: width 0.35s ease, left 0.35s ease; }

/* ---------- before/after compare ---------- */
.compare-wrap { max-width: 860px; margin: 44px auto 0; }
.compare {
  --pos: 50%;
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); cursor: ew-resize; touch-action: none;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  user-select: none; -webkit-user-select: none;
}
.compare img { width: 100%; height: auto; pointer-events: none; }
.compare .after {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.compare .divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  background: var(--grad); transform: translateX(-1px);
  box-shadow: 0 0 16px rgba(124, 92, 255, 0.7);
}
.compare-handle {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(14, 14, 21, 0.85); border: 1px solid var(--violet);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 0.8rem; letter-spacing: 0.08em;
  backdrop-filter: blur(4px); cursor: ew-resize;
}
.compare-handle::before { content: "◂ ▸"; opacity: 0.9; }
@keyframes handlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.55); }
  50% { box-shadow: 0 0 0 12px rgba(124, 92, 255, 0); }
}
.compare-handle { animation: handlePulse 2.2s ease-out 3; }
.compare .tag {
  position: absolute; top: 14px; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  background: rgba(14, 14, 21, 0.82); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 999px; pointer-events: none;
}
.compare .tag-before { left: 14px; }
.compare .tag-after { right: 14px; color: #fff; background: var(--grad); border: none; }
.compare-caption {
  margin-top: 18px; text-align: center; color: var(--faint);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
}
.compare-note { text-align: center; color: var(--dim); margin-top: 10px; font-size: 0.95rem; }

.preset-pills { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.preset-pills button {
  font-family: var(--font-body); font-weight: 600; font-size: 0.88rem;
  color: var(--dim); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 20px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.preset-pills button:hover { color: var(--text); border-color: var(--violet); transform: translateY(-1px); }
.preset-pills button.active { color: #fff; background: var(--grad); border-color: transparent; }

/* Primary demo: wide interactive centerpiece with a live measured readout */
#demo { position: relative; }
#demo::before {
  content: ""; position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  width: min(1100px, 92%); height: 60%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(124, 92, 255, 0.18), transparent 70%);
  filter: blur(30px);
}
#demo .container { position: relative; z-index: 1; }
.compare-hero { max-width: var(--container); }
.demo-readout {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  margin-top: 24px; flex-wrap: wrap;
}
.demo-stat { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.demo-stat-num {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(2.8rem, 6vw, 4.2rem); font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.demo-stat-label {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin-top: 10px; max-width: 20ch;
}
.demo-readout-copy { max-width: none; }
.demo-readout .compare-caption { margin-top: 0; text-align: left; }
.demo-readout .compare-note { margin-top: 8px; text-align: left; }
.demo-crop-label { display: block; text-align: center; margin: 56px 0 -20px; }
@media (max-width: 640px) {
  .demo-readout { flex-direction: column; align-items: center; gap: 16px; }
  .demo-stat { align-items: center; }
  .demo-readout-copy { max-width: none; }
  .demo-readout .compare-caption, .demo-readout .compare-note { text-align: center; }
}

.cards-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .cards-2 { grid-template-columns: 1fr; } }

/* Why-section intro: copy left, live before/after demo right */
.why-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.why-demo .compare-note { text-align: left; }
@media (max-width: 960px) { .why-top { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- how it works ---------- */
/* How-it-works: a render pipeline: a rail draws across, stages light up in order */
.pipeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.pipe-rail {
  position: absolute; top: 16px; left: 16px; right: 16px; height: 2px; z-index: 0;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}
.reveal.in .pipe-rail { transform: scaleX(1); }
.pipe-stage {
  position: relative; z-index: 1;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in .pipe-stage { opacity: 1; transform: none; }
.reveal.in .pipe-stage:nth-child(2) { transition-delay: 0.1s; }
.reveal.in .pipe-stage:nth-child(3) { transition-delay: 0.4s; }
.reveal.in .pipe-stage:nth-child(4) { transition-delay: 0.7s; }
.reveal.in .pipe-stage:nth-child(5) { transition-delay: 1.0s; }
.pipe-node {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 16px;
  background: var(--bg); border: 1px solid var(--violet);
  box-shadow: 0 0 0 6px var(--bg), 0 0 14px rgba(124, 92, 255, 0.35);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--text);
}
.pipe-visual {
  aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; position: relative;
  border: 1px solid var(--border); background: var(--surface); margin-bottom: 14px;
}
.pipe-stage h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin: 0 0 6px; }
.pipe-stage p { color: var(--dim); font-size: 0.93rem; }

.pv-open { display: flex; align-items: center; justify-content: center; }
.pv-drop { text-align: center; border: 1.5px dashed var(--border); border-radius: 8px; padding: 14px 16px; }
.pv-file { display: block; font-family: var(--font-mono); font-size: 0.64rem; color: var(--dim); margin-bottom: 9px; }
.pv-chips { display: flex; gap: 5px; justify-content: center; }
.pv-chips span {
  font-family: var(--font-mono); font-size: 0.56rem; color: var(--faint);
  border: 1px solid var(--border); padding: 2px 7px; border-radius: 999px;
}

.pv-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-facebox {
  position: absolute; border: 1.5px solid var(--violet); border-radius: 6px;
  box-shadow: 0 0 12px rgba(124, 92, 255, 0.5);
  opacity: 0; transition: opacity 0.4s ease 0.9s;
}
.reveal.in .pv-facebox { opacity: 1; }
.pv-count {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); background: rgba(14, 14, 21, 0.85); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 999px;
}

.pv-tune { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 0 16px; }
.pv-ctl {
  display: grid; grid-template-columns: 52px 1fr 32px; gap: 8px; align-items: center;
  font-family: var(--font-mono); font-size: 0.58rem; color: var(--dim);
}
.pv-ctl b { font-weight: 400; color: var(--faint); text-align: right; }
.pv-track { height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pv-track i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 999px; transition: width 0.7s ease 1.1s; }
.reveal.in .pv-track i { width: var(--w); }

.pv-export { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 0 16px; }
.pv-render { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pv-render i { display: block; height: 100%; width: 0; background: var(--grad); transition: width 1.1s ease 1.3s; }
.reveal.in .pv-render i { width: 100%; }
.pv-exchips { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-exchips span {
  font-family: var(--font-mono); font-size: 0.58rem; color: var(--faint);
  border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px;
}
.pv-exchips .ok { color: #7ee2a8; border-color: rgba(126, 226, 168, 0.4); }

/* ---------- specs ---------- */
.specs-panel {
  margin-top: 44px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 38px; font-family: var(--font-mono);
}
.specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 48px; }
.spec { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px dashed rgba(42, 42, 60, 0.7); padding-bottom: 12px; }
.spec dt { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.spec dd { font-size: 0.82rem; color: var(--text); text-align: right; }

/* ---------- pricing ---------- */
.deal-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  background: var(--grad); border-radius: 999px; padding: 5px 14px;
}
.deal-line { margin-top: 18px; color: var(--dim); font-size: 0.92rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price-row { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: 18px; }
.price-old { color: var(--faint); font-size: 1.3rem; text-decoration: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.price { font-family: var(--font-display); font-weight: 700; font-size: 3.2rem; letter-spacing: -0.02em; line-height: 1; }
.price sup { font-size: 1.4rem; font-weight: 600; margin-left: 2px; }
.price-terms { color: var(--faint); font-size: 0.88rem; margin-top: 6px; }
.buy-card .deal-badge { margin-bottom: 16px; }
.buy-card {
  margin: 44px auto 0; max-width: 480px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 42px 38px; position: relative; overflow: hidden;
}
.buy-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); }
.buy-card h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.buy-card ul { list-style: none; margin: 22px 0 28px; color: var(--dim); display: grid; gap: 10px; font-size: 0.97rem; }
.buy-card li::before { content: "✓  "; color: var(--violet); font-weight: 700; }
.buy-card .note { margin-top: 16px; font-size: 0.85rem; color: var(--faint); }

/* ---------- faq ---------- */
.faq { max-width: none; margin: 40px auto 0; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 20px 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--violet); font-size: 1.3rem; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--dim); padding: 0 4px 22px; max-width: none; }

/* ---------- contact form ---------- */
.contact-form { margin-top: 36px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.form-grid label { display: grid; gap: 7px; }
.form-grid .form-full { grid-column: 1 / -1; }
.form-grid span { font-size: 0.86rem; color: var(--dim); font-weight: 500; }
.form-grid span em { color: var(--faint); font-style: normal; }
.form-grid input, .form-grid select, .form-grid textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: var(--font-body); font-size: 0.98rem;
  padding: 11px 14px; width: 100%;
}
.form-grid textarea { resize: vertical; min-height: 140px; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18);
}
.form-grid select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.form-small { margin-top: 14px; color: var(--faint); font-size: 0.85rem; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.form-banner {
  border-radius: 10px; padding: 18px 22px; margin: 26px 0; font-size: 0.98rem;
  border: 1px solid var(--border); background: var(--surface); color: var(--dim);
}
.form-banner a { margin-left: 8px; }
.form-banner-ok { border-color: rgba(124, 92, 255, 0.6); }
.form-banner-ok strong { color: var(--text); }
.form-banner-err { border-color: var(--pink); color: var(--text); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 48px 0 40px; }
.footer-ad-area {
  display: grid;
  justify-items: center;
  margin: 0 auto 44px;
}
.footer-ad-area:has(.signal-slot[style*="display: none"]) { display: none; }
.footer-ad-frame {
  display: flex;
  width: 760px;
  max-width: 100%;
  min-height: 122px;
  padding: 15px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0, rgba(124, 92, 255, 0.1), transparent 58%),
    var(--bg-deep);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}
.footer-ad-frame .signal-slot {
  width: 728px;
  min-height: 90px;
  flex: 0 0 auto;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; }
.footer .brand { opacity: 0.9; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-left: auto; }
.footer-links a { color: var(--dim); font-size: 0.9rem; }
.footer-links a:hover { color: var(--text); }
.footer .legal { color: var(--faint); font-size: 0.82rem; }
.footer .legal a { color: var(--faint); text-decoration: underline; }

@media (max-width: 767px) {
  .footer-ad-area { margin-bottom: 36px; }
  .footer-ad-frame {
    width: 320px;
    min-height: 270px;
    padding: 9px;
  }
  .footer-ad-frame .signal-slot {
    width: 300px;
    min-height: 250px;
  }
}

/* ---------- legal pages ---------- */
.doc { max-width: var(--container); margin: 0 auto; padding: 72px var(--page-gutter) 96px; }
.doc h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 2rem; margin: 10px 0 6px; }
.doc .doc-meta { color: var(--faint); font-family: var(--font-mono); font-size: 0.78rem; margin-bottom: 40px; }
.doc h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin: 38px 0 12px; }
.doc p, .doc li { color: var(--dim); margin-bottom: 14px; }
.doc ul { padding-left: 22px; margin-bottom: 14px; }
.doc table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.93rem; overflow-wrap: anywhere; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--dim); vertical-align: top; }
.doc th { color: var(--text); font-family: var(--font-display); font-weight: 600; }
.doc code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
.doc .backlink { font-family: var(--font-mono); font-size: 0.78rem; }

/* ---------- in-article before/after slider ---------- */
.article-compare { margin: 30px 0; }
.article-compare .compare { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }

/* ---------- recent articles cards ---------- */
.article-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.article-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.article-card:hover, .article-card:focus-visible {
  border-color: var(--violet); transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38); text-decoration: none; outline: none;
}
.article-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-bottom: 1px solid var(--border); }
.article-card-body { padding: 16px 18px 20px; }
.article-card-tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); }
.article-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.3; margin-top: 8px; color: var(--text); }

/* ---------- two-column layout with recent-articles sidebar (articles + changelog) ---------- */
.article-layout { max-width: var(--container); margin: 0 auto; padding: 0 var(--page-gutter); display: grid;
  grid-template-columns: minmax(0, 1fr) 300px; gap: 50px; align-items: start; }
.article-layout .doc { max-width: 100%; margin: 0; padding: 40px 0 64px; }
.sidebar { position: sticky; top: var(--vf-nav-offset, 132px); padding-top: 48px; padding-bottom: 48px; }
.sidebar-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 20px 6px; }
.sidebar-heading { font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--dim); margin-bottom: 14px; }
.side-article { display: grid; grid-template-columns: 84px 1fr; gap: 13px; padding: 14px 0;
  border-top: 1px solid var(--border); text-decoration: none; align-items: start; }
.side-article:first-of-type { border-top: none; padding-top: 2px; }
.side-article img { width: 84px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; }
.side-article-tag { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); }
.side-article h3 { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; line-height: 1.28; color: var(--text); margin-top: 3px; }
.side-article:hover h3 { color: var(--violet); text-decoration: none; }

/* Spanish sidebar launch offer: fills the space reserved for article cards 4 and 5. */
.sidebar-promo {
  position: relative; isolation: isolate; display: flex; min-height: 270px; overflow: hidden;
  flex-direction: column; align-items: flex-start; margin: 14px -7px 12px; padding: 20px;
  border: 1px solid rgba(124, 92, 255, 0.58); border-radius: 12px; color: var(--text);
  background:
    radial-gradient(circle at 84% 14%, rgba(77, 124, 254, 0.32), transparent 42%),
    linear-gradient(145deg, rgba(30, 27, 62, 0.98), rgba(12, 12, 23, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.32);
  text-decoration: none; transition: transform .18s, border-color .18s, box-shadow .18s;
}
.sidebar-promo::before {
  content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.16;
  background: url('/assets/vanityfilter-skingrid-05.webp') center / cover no-repeat;
  mix-blend-mode: screen;
}
.sidebar-promo:hover, .sidebar-promo:focus-visible {
  transform: translateY(-3px); border-color: var(--pink); text-decoration: none; outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 40px rgba(0, 0, 0, 0.42), 0 0 28px rgba(124, 92, 255, 0.16);
}
.sidebar-promo-kicker {
  font-family: var(--font-mono); font-size: 0.58rem; line-height: 1.35; letter-spacing: 0.1em;
  text-transform: uppercase; color: #b8c7ff;
}
.sidebar-promo-logo { width: 58px; height: 58px; margin: 14px 0 12px; border-radius: 13px; box-shadow: 0 8px 24px rgba(77, 124, 254, 0.3); }
.sidebar-promo-title { max-width: 11ch; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.12; letter-spacing: -0.025em; }
.sidebar-promo-copy { margin-top: 8px; color: #d0d0dc; font-size: 0.82rem; line-height: 1.4; }
.sidebar-promo-copy b { color: #fff; font-family: var(--font-mono); letter-spacing: 0.04em; }
.sidebar-promo-price { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-family: var(--font-display); }
.sidebar-promo-price s { color: var(--faint); font-size: 0.82rem; }
.sidebar-promo-price b { font-size: 1.3rem; color: #fff; }
.sidebar-promo-cta {
  display: inline-flex; margin-top: auto; padding: 8px 11px; border-radius: 8px;
  background: var(--grad); color: #fff; font-family: var(--font-display); font-size: 0.74rem; font-weight: 600;
}

/* ---------- page header with background image (changelog etc.) ---------- */
.page-header { border-bottom: 1px solid var(--border); background-color: var(--bg);
  background-image: linear-gradient(90deg, rgba(14,14,21,0.97) 0%, rgba(14,14,21,0.82) 46%, rgba(14,14,21,0.5) 100%), url('/assets/skin-grid-header.webp');
  background-size: cover; background-position: right center; background-repeat: no-repeat; }
.page-header .container { max-width: var(--container); padding: 62px var(--page-gutter); }
.page-header h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.08; margin: 12px 0 10px; }
.page-header .lede { color: var(--dim); font-size: 1.08rem; max-width: none; margin: 0; }
/* Header background variants: pick one of the skin-grid crops with a .ph-N class */
.page-header.ph-1 { background-image: linear-gradient(90deg, rgba(14,14,21,0.97) 0%, rgba(14,14,21,0.82) 46%, rgba(14,14,21,0.5) 100%), url('/assets/vanityfilter-skingrid-01.webp'); }
.page-header.ph-2 { background-image: linear-gradient(90deg, rgba(14,14,21,0.97) 0%, rgba(14,14,21,0.82) 46%, rgba(14,14,21,0.5) 100%), url('/assets/vanityfilter-skingrid-02.webp'); }
.page-header.ph-3 { background-image: linear-gradient(90deg, rgba(14,14,21,0.97) 0%, rgba(14,14,21,0.82) 46%, rgba(14,14,21,0.5) 100%), url('/assets/vanityfilter-skingrid-03.webp'); }
.page-header.ph-4 { background-image: linear-gradient(90deg, rgba(14,14,21,0.97) 0%, rgba(14,14,21,0.82) 46%, rgba(14,14,21,0.5) 100%), url('/assets/vanityfilter-skingrid-04.webp'); }
.page-header.ph-5 { background-image: linear-gradient(90deg, rgba(14,14,21,0.97) 0%, rgba(14,14,21,0.82) 46%, rgba(14,14,21,0.5) 100%), url('/assets/vanityfilter-skingrid-05.webp'); }

/* ---------- changelog entries ---------- */
.changelog { padding-top: 8px; }
.release { padding: 26px 0 30px; border-top: 1px solid var(--border); }
.release:first-of-type { border-top: none; padding-top: 8px; }
.release-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.release-ver { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 500; color: var(--text); }
.release-badge { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--grad); border-radius: 999px; padding: 3px 10px; }
.release-date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); }
.release h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 6px 0 12px; }
.release h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); margin: 18px 0 8px; }
.release ul { list-style: none; padding: 0; margin: 0; }
.release li { position: relative; padding-left: 20px; margin-bottom: 8px; color: var(--dim); line-height: 1.55; }
.release li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
/* Upcoming / in-development release: a boxed roadmap card with an outlined badge */
.release.release-upcoming { background: rgba(124, 92, 255, 0.06); border: 1px solid rgba(124, 92, 255, 0.30); border-radius: var(--radius); padding: 22px 24px 24px; margin-bottom: 26px; }
.release-badge.badge-soon { background: transparent; color: var(--violet); border: 1px solid var(--violet); padding: 2px 9px; }
.release .release-note { color: var(--dim); font-size: 0.95rem; margin: 2px 0 6px; }
/* Purchase actions: payment buttons lead, creator code and legal details stay secondary. */
.buy-row { display: flex; gap: 10px; }
.buy-row > .btn { flex: 1 1 0; min-width: 0; }
.creator-code-action { margin-top: 10px; text-align: center; }
.creator-code-link {
  appearance: none; border: 0; background: transparent; color: var(--dim); cursor: pointer;
  font: inherit; font-size: 0.82rem; line-height: 1.2; padding: 5px 8px;
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px;
}
.creator-code-link:hover { color: var(--text); text-decoration-color: var(--violet); }
.creator-code-link:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 5px; }
.creator-code-link.code-applied { color: #5fd38a; text-decoration-color: #5fd38a; }
.buy-legal {
  margin-top: 16px; text-align: left; background: rgba(124, 92, 255, 0.035);
  border: 1px solid var(--border); border-radius: 9px;
}
.buy-legal summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 12px; color: var(--faint); font-size: 0.78rem; line-height: 1.45;
}
.buy-legal summary::-webkit-details-marker { display: none; }
.buy-legal summary::marker { content: ""; }
.buy-legal-toggle {
  flex: 0 0 auto; color: var(--violet); font-family: var(--font-mono); font-size: 0.68rem;
  white-space: nowrap;
}
.buy-legal-toggle::after { content: "›"; display: inline-block; margin-left: 5px; transition: transform 0.16s ease; }
.buy-legal[open] .buy-legal-toggle::after { transform: rotate(90deg); }
.buy-legal-body { border-top: 1px solid var(--border); padding: 11px 12px 13px; }
.buy-legal-body p { margin: 0; color: var(--faint); font-size: 0.8rem; line-height: 1.55; }
.code-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.code-modal[hidden] { display: none; }
.code-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 6, 10, 0.86); backdrop-filter: blur(6px); }
.code-modal-box { position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 26px 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.code-modal-box h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 6px; }
.code-modal-sub { color: var(--dim); font-size: 0.95rem; margin: 0 0 18px; }
.code-modal-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1;
  background: transparent; border: 0; color: var(--dim); cursor: pointer; border-radius: 8px; }
.code-modal-close:hover { color: var(--text); background: var(--surface-2); }
.promo-row { display: flex; gap: 8px; }
.promo-input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.04em; padding: 11px 13px; }
.promo-input:focus { outline: none; border-color: var(--violet); }
.promo-input::placeholder { color: var(--faint); letter-spacing: 0; }
.promo-msg { font-size: 0.85rem; line-height: 1.4; margin: 10px 0 0; }
.promo-ok { color: #5fd38a; }
.promo-err { color: #f7768e; }
.release .fixlist li::before { background: var(--border); }

/* ---------- fixed article share rail ---------- */
.share-rail {
  position: fixed; left: 0; top: 50%; z-index: 45; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 7px 9px 6px; background: rgba(22, 22, 31, 0.94);
  border: 1px solid var(--border); border-left: 0; border-radius: 0 14px 14px 0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42); backdrop-filter: blur(10px);
}
.share-rail-label {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  writing-mode: vertical-rl; transform: rotate(180deg); margin: 2px 0 3px;
}
.share-rail-links { display: flex; flex-direction: column; gap: 6px; }
.share-link {
  --share-color: var(--violet); display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; background: var(--share-color); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.share-link:hover, .share-link:focus-visible {
  transform: translateX(3px); filter: brightness(1.12); text-decoration: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--share-color) 42%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.share-link img { width: 19px; height: 19px; filter: brightness(0) invert(1); }
.share-link-facebook { --share-color: #0866ff; }
.share-link-x { --share-color: #000; }
.share-link-linkedin { --share-color: #0a66c2; }
.share-link-reddit { --share-color: #ff4500; }
.share-link-pinterest { --share-color: #bd081c; }
.share-link-bluesky { --share-color: #1185fe; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .article-cards { grid-template-columns: repeat(3, 1fr); }
  .article-layout { grid-template-columns: 1fr; gap: 24px; }
  .sidebar { position: static; padding-top: 4px; }
  .article-layout .doc { padding-bottom: 32px; }
  .pipeline { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .pipe-rail { display: none; }
  .reveal.in .pipe-stage:nth-child(n) { transition-delay: 0.1s; }
  .specs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .section { padding: 68px 0; }
  .cards { grid-template-columns: 1fr; }
  .article-cards { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 68px; }
  .specs-panel { padding: 26px 20px; }
  .spec { flex-direction: column; gap: 4px; }
  .spec dd { text-align: left; }
  .share-rail {
    left: 50%; top: auto; bottom: 10px; transform: translateX(-50%); flex-direction: row;
    gap: 7px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 14px;
    max-width: calc(100vw - 20px);
  }
  .share-rail-label { writing-mode: horizontal-tb; transform: none; margin: 0 2px; }
  .share-rail-links { flex-direction: row; gap: 5px; }
  .share-link { width: 34px; height: 34px; border-radius: 9px; }
  .share-link:hover, .share-link:focus-visible { transform: translateY(-2px); }
  .share-link img { width: 17px; height: 17px; }
}

/* Lit-edge button: the homepage hero card's orbiting border light, sized for a control. */
@property --edge-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes edge-orbit { to { --edge-angle: 360deg; } }
a.btn-edge, button.btn-edge {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #b5a4e338;
  border-radius: 10px;
  background: linear-gradient(125deg, #171827fa, #0e1423fa);
  box-shadow: 0 6px 18px #0004;
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out, border-color 200ms ease-out;
}
.btn-edge::before,
.btn-edge::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--edge-angle), transparent 0deg 235deg, #8975ec44 275deg, #ad94ff 315deg, #daf6ff 337deg, #ffffff 343deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: edge-orbit 5s linear infinite;
  animation-delay: var(--edge-delay, 0s);
  transition: opacity 200ms ease-out;
}
.btn-edge::after {
  inset: -3px;
  padding: 3px;
  filter: blur(4px);
  opacity: .55;
}
.btn-edge [aria-hidden="true"] { display: inline-block; transition: transform 200ms ease-out; }
:is(a, button).btn-edge:hover,
:is(a, button).btn-edge:focus-visible {
  transform: translateY(-2px);
  border-color: #ad94ff66;
  background: linear-gradient(125deg, #221f3cfa, #141b33fa);
  box-shadow: 0 10px 26px #0006, 0 0 22px #8975ec3d;
  text-decoration: none;
}
.btn-edge:hover::after,
.btn-edge:focus-visible::after { opacity: 1; }
.btn-edge:hover [aria-hidden="true"],
.btn-edge:focus-visible [aria-hidden="true"] { transform: translate(2px, -2px); }
.btn-edge:active { transform: translateY(0); }
/* On a standard .btn, keep the button's own size and weight and add only the lit edge. */
a.btn.btn-edge { min-height: 0; padding: 12px 26px; font-size: 0.98rem; font-weight: 600; }
a.btn.btn-small.btn-edge { padding: 8px 18px; font-size: 0.88rem; }
@media (prefers-reduced-motion: reduce) {
  .btn-edge::before, .btn-edge::after { animation: none; }
  .btn-edge, .btn-edge [aria-hidden="true"] { transition: none; }
  .btn-edge:hover, .btn-edge:focus-visible { transform: none; }
}
/* assets/site-finish.css */
/* Shared footer and FAQ product rail. Column boundaries, not paragraph caps. */
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.48fr);gap:32px;align-items:start;margin-top:36px}
.faq-layout>.faq{width:100%;margin:0}.faq-layout .faq details{padding-inline:20px}.faq-layout .faq summary{gap:20px}
.faq-promo{min-width:0;overflow:hidden;border:1px solid #afa0ea55;border-radius:24px;background:linear-gradient(145deg,#24233e,#111321 70%);box-shadow:0 18px 60px #0005}
.faq-promo-art{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;padding:34px 24px 22px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#926aff60,transparent 70%)}
.promo-orbit{position:absolute;z-index:-1;width:230px;height:230px;border:1px solid #b99bff66;border-radius:50%;box-shadow:0 0 65px #996eff33,inset 0 0 40px #6b88ff22;transform:rotateX(35deg) rotate(-25deg)}
.promo-orbit::after{content:'';position:absolute;inset:-20px;border:1px solid #90a9ff33;border-radius:50%}
.promo-icon{border-radius:22px;box-shadow:0 12px 38px #0007;transition:transform .6s ease}
.promo-screen{width:100%;height:auto;margin:20px 0 0;border:1px solid #b4a5f188;border-radius:9px;box-shadow:0 14px 30px #0006;transform:perspective(600px) rotateY(-7deg);transition:transform .6s ease}
.promo-product{margin-top:22px;font:600 1.6rem/1.2 var(--font-display);color:#f1edff;letter-spacing:-.04em}
.faq-promo-copy{padding:26px;border-top:1px solid #b4a5f125}.faq-promo-copy h3{font:600 1.35rem/1.25 var(--font-display);margin:0 0 16px}.faq-promo-copy p{color:var(--dim);margin-bottom:24px}.faq-promo-copy .btn{width:100%;white-space:normal;gap:10px}
.faq-promo:hover .promo-icon,.faq-promo:focus-within .promo-icon{transform:translateY(-7px) rotate(-4deg)}.faq-promo:hover .promo-screen,.faq-promo:focus-within .promo-screen{transform:perspective(600px) rotateY(0)}
.faq-promo-art::after{content:'';position:absolute;pointer-events:none;inset:-60%;background:linear-gradient(110deg,transparent 43%,#d5c6ff14 50%,transparent 57%);transform:translateX(-60%);animation:promo-light 4s ease-out 1}@keyframes promo-light{to{transform:translateX(60%)}}
.footer .footer-shell{border:1px solid #b6a2e642;border-radius:28px;padding:42px;background:radial-gradient(ellipse at 90% 0,#6652a32b,transparent 48%),linear-gradient(140deg,#171722f5,#0d101cf7);box-shadow:0 28px 80px #0004;overflow:hidden}
.footer .footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}.footer .brand .brand-logo{width:225px}.footer-studio p{color:var(--dim);margin:22px 0 18px}.footer-studio-link{color:#c8b8ff;font-size:.95rem}
.footer-waitlist{position:relative;border:1px solid #baa4ed38;border-radius:19px;background:#b59bf908;padding:26px}.footer-waitlist h2,.footer-navigation h2{font:600 1.2rem/1.3 var(--font-display);margin:0 0 12px}.footer-waitlist p{color:var(--dim);margin-bottom:20px}.footer-mac-mark{position:absolute;top:15px;right:22px;color:#bd9df736;font-size:2rem}.footer-mac-actions{display:flex;flex-wrap:wrap;gap:10px}.footer-mac-actions .btn{flex:1 1 145px;padding:12px;gap:10px;background:#1a192b;border-color:#c2a4f54d}
.footer-navigation{margin-top:36px;padding-top:28px;border-top:1px solid #bba3e329}.footer .footer-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0 0}.footer .footer-links a{display:flex;align-items:center;justify-content:center;padding:12px 10px;min-height:46px;border:1px solid #b2a4d530;border-radius:9px;text-align:center;background:#c8bbff05;transition:background .2s,border-color .2s}.footer .footer-links a:hover,.footer .footer-links a:focus-visible{background:#9e80f51c;border-color:#c1a6fa80}
.footer .footer-ad-area{display:flex;flex-direction:column;align-items:center;margin:30px -42px 0;padding:22px 20px;border-top:1px solid #bba3e325;border-bottom:1px solid #bba3e325;background:#06081255}.footer .footer-ad-area:has(.signal-slot[style*="display: none"]){display:none}.footer-ad-label{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}.footer .footer-ad-frame{border:0;border-radius:8px;padding:0;background:transparent;box-shadow:none}.footer-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:22px 0 0}.footer .legal{margin:0;text-align:left;flex:1 1 240px}
@media(max-width:850px){.faq-layout{grid-template-columns:minmax(0,1fr)}.faq-promo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}.faq-promo-copy{border-top:0;border-left:1px solid #b4a5f125;align-self:center}.footer .footer-top{grid-template-columns:minmax(0,1fr);gap:28px}.footer .footer-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:540px){.footer .footer-shell{padding:24px 18px;border-radius:20px}.footer .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}.footer .footer-ad-area{margin-inline:-18px;padding-inline:8px}.footer-waitlist{padding:22px 18px}.faq-promo{display:block}.faq-promo-art{min-height:230px}.promo-screen{max-width:300px}.faq-promo-copy{border-left:0;border-top:1px solid #b4a5f125}}
@media(prefers-reduced-motion:reduce){.faq-promo *,.faq-promo-art::after{animation:none!important;transition:none!important}.faq-promo:hover .promo-icon,.faq-promo:focus-within .promo-icon{transform:none}}


.wl-modal select{width:100%;padding:12px;margin-bottom:18px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;font:inherit}
/* assets/mobile-controls.css */
/* Site-owned mobile shell. Existing checkout and support handlers stay in place. */
.vf-mobile-dock { display: none; }
@media (max-width: 720px) {
  html.vf-mobile-ui { scroll-padding-bottom: 106px; }
  html.vf-mobile-ui body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  html.vf-mobile-ui .vf-mobile-dock {
    display: block; position: fixed; z-index: 2147482998;
    left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom, 0px));
    height: 66px; border: 1px solid #aca2e433; border-radius: 23px;
    background: #12121eeF; backdrop-filter: blur(18px);
    box-shadow: 0 8px 35px #0006, inset 0 1px 0 #ffffff09;
    pointer-events: none;
  }
  html.vf-mobile-ui .vf-buy-flyout,
  html.vf-mobile-ui[lang^='es'] .vf-buy-flyout {
    left: calc(50% + 3px); right: 21px;
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 9px);
    width: calc(50% - 24px); height: 48px; min-height: 48px; padding: 0 10px;
    border: 1px solid #ffffff19; border-radius: 15px;
    background: linear-gradient(115deg, #4d73ff, #9658e7 68%, #bc4ecb);
    color: #fff; box-shadow: 0 3px 13px #6354d52e;
    font: 650 14px/1.15 var(--font-display, system-ui), sans-serif;
    letter-spacing: 0; text-transform: none; transition: filter .15s ease;
    visibility: visible; pointer-events: auto;
  }
  html.vf-mobile-ui .garden-at-buy .vf-buy-flyout:not(:focus-visible) { visibility: visible; pointer-events: auto; }
  html.vf-mobile-ui .vf-buy-flyout:hover { filter: brightness(1.1); }
  html.vf-mobile-ui .garden-motion { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: 34px; height: 34px; opacity: .8; }
  /* Sharing belongs to the article, not a second fixed toolbar over this dock. */
  html.vf-mobile-ui .share-rail { position: static; transform: none; width: fit-content; max-width: calc(100% - 28px); margin: 20px auto; flex-direction: row; }
  html.vf-mobile-ui .share-rail-links { flex-direction: row; flex-wrap: wrap; }
  html.vf-mobile-ui .share-rail-label { writing-mode: horizontal-tb; transform: none; }
  html.vf-mobile-ui.vf-mobile-overlay .vf-mobile-dock,
  html.vf-mobile-ui.vf-mobile-overlay .vf-buy-flyout,
  html.vf-mobile-ui.vf-mobile-overlay .garden-motion,
  html.vf-mobile-ui.vf-mobile-other-dialog .vf-mobile-dock,
  html.vf-mobile-ui.vf-mobile-other-dialog .vf-buy-flyout,
  html.vf-mobile-ui.vf-mobile-other-dialog .garden-motion,
  html.vf-mobile-ui.vf-mobile-keyboard .vf-mobile-dock,
  html.vf-mobile-ui.vf-mobile-keyboard .vf-buy-flyout { visibility: hidden; pointer-events: none; }
  html.vf-mobile-ui .vf-buy-modal {
    inset: auto; left: var(--vf-view-left, 0px); top: var(--vf-view-top, 0px);
    width: var(--vf-view-width, 100%); height: var(--vf-view-height, 100dvh);
    padding: 0; align-items: stretch; overscroll-behavior: none;
  }
  html.vf-mobile-ui .vf-buy-box {
    width: 100%; height: 100%; max-height: none; min-height: 0;
    display: grid; grid-template-rows: auto auto minmax(0, 1fr);
    padding: max(20px, env(safe-area-inset-top, 0px)) 0 0;
    border: 0; border-radius: 0; overflow: hidden; background: #10111c;
  }
  html.vf-mobile-ui .vf-buy-heading { grid-row: 1; margin: 0; padding: 3px 60px 19px 20px; text-align: left; font-size: 1.35rem; line-height: 1.25; }
  html.vf-mobile-ui .vf-buy-close { position: absolute; top: max(10px, env(safe-area-inset-top, 0px)); right: 10px; float: none; margin: 0; width: 44px; height: 44px; border: 1px solid #ffffff15; border-radius: 50%; background: #ffffff08; color: #eeeaf9; }
  html.vf-mobile-ui .vf-buy-tabs { grid-row: 2; width: calc(100% - 24px); margin: 0 12px 14px; }
  html.vf-mobile-ui .vf-buy-tab { min-width: 0; flex: 1 1 0; padding: 9px 4px; font-size: .76rem; }
  html.vf-mobile-ui .vf-buy-grid { grid-row: 3; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 0 12px max(24px, env(safe-area-inset-bottom, 0px)); scroll-padding: 18px; }
  html.vf-mobile-ui .vf-buy-actions { grid-template-columns: 1fr; }
  html.vf-mobile-ui .vf-buy-actions .btn { min-height: 50px; font-size: .95rem; border-radius: 12px; }
  html.vf-mobile-ui .vf-code-input { font-size: 16px; min-height: 48px; }
  html.vf-mobile-ui .vf-code-apply { min-height: 46px; }
  html.vf-mobile-ui .vf-buy-creator { min-height: 44px; }
  html.vf-mobile-ui .vf-buy-tab:focus-visible { outline-offset: -3px; }
  html.vf-mobile-ui.vf-mobile-keyboard .vf-buy-box { padding-top: 8px; }
  html.vf-mobile-ui.vf-mobile-keyboard .vf-buy-heading { padding-bottom: 13px; }
  html.vf-mobile-ui.vf-mobile-keyboard .vf-buy-close { top: 4px; }
}
/* assets/moonlit-garden.css */
/* Sales-page setting. Existing app palette and product media are preserved. */
.garden-theme { background: #090b15; }
.garden-theme body { background: transparent; isolation: isolate; --dim: #b1b1c5; --faint: #9292aa; }
.moonlit-garden { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; background: #090b15; }
.garden-scene { position: absolute; top: 0; left: 0; width: 100%; height: max(230lvh, 200vw); will-change: transform; }
.garden-scene picture, .garden-scene img { display: block; width: 100%; height: 100%; }
.garden-scene img { object-fit: fill; }
.garden-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(9,11,21,.06),rgba(9,11,21,.45) 22%,rgba(9,11,21,.62) 50%,rgba(9,11,21,.42) 78%,rgba(9,11,21,.06)); }
.garden-mist { position: absolute; inset: -10%; opacity: .38; background: radial-gradient(ellipse at 14% 60%,rgba(121,109,190,.12),transparent 36%),radial-gradient(ellipse at 90% 35%,rgba(108,144,214,.1),transparent 40%); }
.garden-fireflies { position: absolute; inset: 0; opacity: var(--firefly-visibility,.15); }
.garden-fireflies i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #f4e6ab; box-shadow: 0 0 6px 2px #e9d49166,0 0 20px 5px #d2b6f522; animation: garden-drift var(--d) ease-in-out var(--delay) infinite; }
@keyframes garden-drift { 0%,100% { opacity: .1; transform: translate3d(0,12px,0); } 35% { opacity: .85; } 60% { opacity: .25; transform: translate3d(var(--drift),-22px,0); } 80% { opacity: .6; } }
.garden-bird { position: absolute; left: 0; top: 14%; width: 50px; height: 25px; color: #030610; opacity: 0; }
.garden-bird svg { width: 100%; height: 100%; filter: drop-shadow(0 0 1px #737cad55); }
.bird-wing-left,.bird-wing-right { transform-origin: 40px 23px; }
.is-flying .bird-wing-left { animation: garden-wing-left .55s ease-in-out infinite alternate; }
.is-flying .bird-wing-right { animation: garden-wing-right .55s ease-in-out infinite alternate; }
@keyframes garden-wing-left { to { transform: rotate(-19deg) scaleY(.55); } }
@keyframes garden-wing-right { to { transform: rotate(19deg) scaleY(.55); } }
.moonlit-garden.is-paused * { animation-play-state: paused !important; }
.garden-motion { position: fixed; z-index: 45; bottom: 18px; left: 18px; width: 44px; height: 44px; border: 1px solid #c1b6e933; border-radius: 50%; display: grid; place-items: center; color: #c0bad3; background: #0b0d18e6; cursor: pointer; transition: color .2s,border-color .2s; }
.garden-motion[hidden] { display: none; }
.garden-motion:hover { color: white; border-color: #b6a4e599; }
.garden-motion svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.garden-play-icon,.garden-motion[aria-pressed="true"] .garden-pause-icon { display: none; }
.garden-motion[aria-pressed="true"] .garden-play-icon { display: block; }
.garden-theme .nav { background: #0a0b15db; border-bottom-color: #b5a4e31c; }
.garden-theme .hero, .garden-theme .vc-page .vc-hero { background: transparent; border-bottom: 0; padding: 72px 0 80px; }
.garden-theme .hero::before { display: none; }
.garden-theme .hero > .container, .garden-theme .vc-hero > .container { max-width: var(--container); }
.garden-theme .hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 64px; min-height: 590px; }
.garden-theme .hero h1 { font-size: clamp(2.6rem,5.2vw,4.5rem); letter-spacing: -.055em; line-height: 1.045; margin: 20px 0 24px; }
.garden-theme .hero .sub { max-width: none; font-size: 1.16rem; line-height: 1.7; color: #c2bed2; }
.garden-theme .grad-text { background-image: linear-gradient(105deg,#7795ff,#aa85f8 55%,#e9a1dc); }
.garden-theme .eyebrow { color: #b29bef; font-size: .7rem; letter-spacing: .16em; }
.garden-theme .hero-ctas { gap: 12px; margin-top: 28px; }
.garden-theme .hero-ctas .btn { min-height: 50px; }
.garden-theme .hero-ctas .btn:last-child:not(:first-child) { background: transparent; border-color: transparent; padding-inline: 10px; color: #bdb7cf; }
.garden-theme .hero-meta { margin-top: 24px; letter-spacing: .07em; line-height: 1.9; }
.garden-theme .hero-demo { position: relative; max-width: 420px; width: 100%; justify-self: end; }
.garden-theme .hero-demo::before { content: ''; position: absolute; inset: -13px -13px 44px; border: 1px solid #c8b9fa30; border-radius: 27px; pointer-events: none; }
.garden-theme .hero-demo .compare { border-radius: 18px; border-color: #b8a5ee50; box-shadow: 0 25px 70px #0007,0 0 70px #7c5cff14; }
.garden-theme .hero-demo .compare-note { font-size: .76rem; line-height: 1.6; color: #b8b1ca; margin-top: 17px; }
.garden-theme .section, .garden-theme .vc-section { padding: 92px 0; background: transparent; border: 0; }
.garden-theme .section > .container, .garden-theme .vc-section > .container { position: relative; }
.garden-theme .section + .section > .container::before, .garden-theme .vc-section + .vc-section > .container::before { content: ''; position: absolute; top: -92px; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg,transparent,#c0b0e629,transparent); }
.garden-theme .section h2,.garden-theme .vc-page h2 { font-size: clamp(1.9rem,3.4vw,3rem); letter-spacing: -.04em; line-height: 1.14; }
.garden-theme .section .lede { max-width: none; color: #b9b5c9; }
.garden-theme #demo .compare-wrap { margin-top: 32px; }
.garden-theme .compare { border-color: #ae9fd83d; }
.garden-theme .demo-crop-label { margin-top: 66px; }
.garden-theme .demo-stat { margin-top: 25px; }
.garden-theme .card,.garden-theme .vc-feature,.garden-theme .vc-requirements,.garden-theme .vc-free { background: linear-gradient(140deg,#171623ee,#10121fe8); border-color: #b0a0db29; }
.garden-theme .card::before { background: linear-gradient(90deg,#93a0df,#bca1dc); }
.garden-theme .card:hover { border-color: #bba9e45e; box-shadow: 0 12px 35px #0004; }
.garden-theme .vc-crosslink { background: #111320c9; border-color: #bba8e12b; padding: 22px 28px; }
.garden-theme .vc-crosslink-band { margin: 0; }
.garden-theme .protected { padding: 54px 0; }
.garden-theme .protected .container { max-width: var(--container); text-align: center; }
.garden-theme .protected p { margin-inline: auto; }
.garden-theme .protected .chips { justify-content: center; }
.garden-theme .protected .chips span { background: #171626d9; }
.garden-theme #previews .pv-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.garden-theme #previews .pv-thumb { background: #10111edd; border-color: #b3a1dd38; }
.garden-theme #how .pipeline { background: #0e101abb; padding: 32px 22px; border: 1px solid #b4a1df25; border-radius: 22px; }
.garden-theme #features .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
.garden-theme #features .card { padding: 28px; }
.garden-theme #features .card:first-child { grid-column: 1/-1; max-width: none; }
.garden-theme #features .card:first-child p { max-width: none; }
.garden-theme #buy { padding-top: 100px; padding-bottom: 130px; background: radial-gradient(ellipse at 50% 55%,#736caa13,transparent 65%); }
.garden-theme #buy > .container > .eyebrow,.garden-theme #buy > .container > h2 { display: block; text-align: center; }
.garden-theme #buy .eyebrow::before { display: none; }
.garden-theme #buy .buy-card { background: linear-gradient(155deg,#262137f5,#131423f7); border-color: #b29be878; box-shadow: 0 24px 90px #0005,0 0 60px #9f8bdd0d; }
.garden-theme #buy .demo-card { background: #12131fea; border-color: #b19bdc38; }
.garden-theme .faq details { background: #11121fe8; border-color: #ae9bcc2d; }
.garden-theme .footer { background: #090b14b8; border-color: #bba8e129; padding-bottom: 90px; }
.garden-theme .vc-hero-grid { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 50px; min-height: 550px; }
.garden-theme .vc-page h1 { font-size: clamp(2.6rem,4.6vw,4rem); line-height: 1.08; letter-spacing: -.05em; }
.garden-theme .vc-intro { font-size: 1.1rem; color: #c0bacf; line-height: 1.7; }
.garden-theme .vc-hero-free { color: #d6c7e6; font-size: .9rem; margin-top: 18px; }
.garden-theme .vc-hero-proof { display: block; margin: 30px 0; padding: 0 12px; }
.garden-theme .vc-hero-proof .vc-product-shot { border-radius: 18px; border-color: #b6a5e665; box-shadow: 0 28px 70px #0006,0 0 70px #8f74dd12; }
.garden-theme .vc-hero-proof .vc-product-shot + .vc-product-shot { width: 66%; margin: -18px -12px 0 auto; border-width: 4px; border-color: #171726; }
.garden-theme .vc-hero-proof .vc-product-shot:hover { z-index: 2; }
.garden-theme .vc-apps span { background: #171626dc; border-color: #b6a5d43b; }
.garden-theme .vc-section-alt { background: #0c0d1766; }
.garden-theme .vc-page #buy .vc-feature { padding: 35px; }
.garden-theme .vc-page #buy .vc-feature:last-child { border-color: #b4a0e56e; background: linear-gradient(145deg,#282239ef,#141522f5); }
.garden-theme .vc-page #buy .vc-feature > p:nth-of-type(2) { font: 600 2.8rem/1.5 var(--font-display); color: #f0eafb; letter-spacing: -.05em; margin-top: 15px; }
.garden-theme .vc-page #buy .vc-feature h3 { font-size: 1.4rem; }
.garden-theme .mac-bar { background: #11121bc7; color: #a9a4bb; border-top: 1px solid #b9a1de20; }
.garden-theme .mac-bar-inner { padding: 20px 24px; }
.garden-theme .mac-bar-text { color: #a9a4bb; font-size: .85rem; }
.garden-theme .mac-bar-btn { color: #c8bfdc; background: transparent; border-color: #c7b5e742; font-family: var(--font-body); font-size: .8rem; }
.garden-theme .mac-bar:hover .mac-bar-btn { background: #bba8dd12; }
.garden-deep-dive { width: min(calc(var(--container) - 2 * var(--page-gutter)),calc(100% - 2 * var(--page-gutter))); margin: 0 auto 14px; border: 1px solid #b6a4db30; border-radius: 16px; background: #10121ee6; }
.garden-deep-dive > summary,.garden-extra-example > summary { padding: 22px 26px; cursor: pointer; font-family: var(--font-display); font-size: 1.05rem; color: #d1c7e3; }
.garden-deep-dive[open] > summary { border-bottom: 1px solid #b6a4db30; }
.garden-deep-dive > .section { padding: 30px 0 45px; }
.garden-extra-example { margin-top: 35px; border: 1px solid #b6a4db30; border-radius: 16px; background: #10121ebb; }
.garden-extra-example > summary { font-size: .92rem; }
.garden-extra-example[open] { padding: 0 24px 26px; }
.garden-extra-example[open] > summary { padding-inline: 0; }
/* The scene is still an attractive backdrop with no script; no content is hidden. */
@media(max-width:1100px) {
  .garden-theme .nav-inner { position: relative; }
  .garden-theme .nav-toggle { display: inline-flex; }
  .garden-theme .nav-links { position: absolute; top: 64px; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 12px 24px 20px; border: 1px solid #b5a4e32b; border-top: 0; border-radius: 0 0 14px 14px; background: #0e0f1bfa; box-shadow: 0 20px 40px #0006; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .18s,transform .18s,visibility .18s; }
  .garden-theme .nav.is-open .nav-links { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .garden-theme .nav-links a:not(.btn) { display: block; padding: 10px 12px; border-radius: 8px; font-size: 1rem; }
  .garden-theme .nav-links .btn { width: 100%; margin-top: 6px; }
}
@media(min-width:1450px) { .garden-theme .hero > .container,.garden-theme .vc-hero > .container { max-width: var(--container); } .garden-theme .hero-demo { max-width: 450px; } }
@media(max-width:1000px) and (min-width:701px) { .garden-theme .hero-grid,.garden-theme .vc-hero-grid { gap: 32px; } .garden-theme .hero h1 { font-size: 3.4rem; } .garden-theme .hero-meta span { display: block; } .garden-theme .hero-meta span + span::before { display: none; } }
@media(max-width:700px) {
  .garden-theme .garden-at-buy .vf-buy-flyout:not(:focus-visible) { visibility: hidden; pointer-events: none; }
  .garden-scene { height: 220lvh; }
  .garden-scene img { object-fit: cover; }
  .garden-shade { background: linear-gradient(90deg,#090b1540,#090b1588 25%,#090b1599 65%,#090b1540); }
  .garden-fireflies i:nth-child(n+5),.garden-bird { display: none; }
  .garden-theme .hero,.garden-theme .vc-page .vc-hero { padding: 35px 0 54px; }
  .garden-theme .hero-grid,.garden-theme .vc-hero-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; min-height: 0; }
  .garden-theme .hero-grid > div:first-child,.garden-theme .vc-hero-grid > div:first-child { display: contents; }
  .garden-theme .hero .eyebrow,.garden-theme .vc-hero .eyebrow { order: 0; font-size: .62rem; }
  .garden-theme .hero h1,.garden-theme .vc-page h1 { order: 1; font-size: clamp(2.3rem,9.3vw,3.1rem); margin: 16px 0 18px; max-width: 600px; }
  .garden-theme .hero .sub { order: 2; font-size: 1rem; line-height: 1.65; }
  .garden-theme .hero-ctas { order: 3; margin: 20px 0 26px; gap: 9px; }
  .garden-theme .hero-ctas .btn { padding: 11px 14px; font-size: .9rem; min-height: 46px; }
  .garden-theme .hero-ctas .btn:last-child { display: none; }
  .garden-theme .hero-demo { order: 4; max-width: 350px; justify-self: center; margin-top: 8px; }
  .garden-theme .hero-demo .compare { aspect-ratio: 1.15; }
  .garden-theme .hero-demo .compare img { height: 100%; object-fit: cover; object-position: 50% 37%; }
  .garden-theme .hero-demo::before { inset: -8px -8px 49px; border-radius: 22px; }
  .garden-theme .hero-meta { order: 5; font-size: .62rem; margin-top: 20px; text-align: center; }
  .garden-theme .launch-note { order: 6; margin-top: 15px; }
  .garden-theme .vc-intro { order: 5; font-size: 1rem; }
  .garden-theme .vc-hero-free { order: 3; font-size: .84rem; margin-top: 13px; }
  .garden-theme .vc-hero .vc-actions { order: 4; margin: 18px 0 25px; }
  .garden-theme .vc-hero .vc-actions .btn { width: auto; flex: 1 1 auto; padding: 12px 16px; }
  .garden-theme .vc-hero-proof { order: 2; margin: 4px 0 8px; padding: 0; }
  .garden-theme .vc-hero-proof .vc-product-shot + .vc-product-shot { margin-right: -3px; }
  .garden-theme .vc-release { order: 6; font-size: .76rem; margin-top: 16px; }
  .garden-theme .section,.garden-theme .vc-section { padding: 60px 0; }
  .garden-theme .section + .section > .container::before,.garden-theme .vc-section + .vc-section > .container::before { top: -60px; }
  .garden-theme .section h2,.garden-theme .vc-page h2 { font-size: 2rem; }
  .garden-theme #features .cards,.garden-theme #previews .pv-grid { grid-template-columns: minmax(0,1fr); }
  .garden-theme .protected { padding: 35px 0; }
  .garden-theme #buy { padding: 70px 0 85px; }
  .garden-theme .vc-page #buy .vc-feature { padding: 26px; }
  .garden-theme #buy .buy-card,.garden-theme #buy .demo-card { padding: 30px 24px; }
  .garden-theme #buy .buy-row { display: flex; flex-direction: column; gap: 10px; }
  .garden-theme #buy .buy-row .btn { width: 100%; min-height: 48px; padding: 13px 16px; }
  .garden-theme .vc-crosslink { padding: 20px; gap: 16px; }
  .garden-theme .vc-crosslink img { width: 45px; height: 45px; }
  .garden-motion { bottom: 16px; left: 12px; }
}
@media(prefers-reduced-motion:reduce) { .garden-fireflies,.garden-bird,.garden-lightning-bugs { display: none; } .garden-scene { will-change: auto; } }

/* ---- Vertical rhythm, 2026-09-13: one spacing system for every primary-page section. ----
   Section padding 92px, one divider rule, eyebrow->heading 14px, heading->lede 10px,
   copy->content block 40px, copy->action row 32px, text after an action row 24px. */
.garden-theme { --vr-section: 92px; --vr-heading: 14px; --vr-lede: 10px; --vr-block: 40px; --vr-action: 32px; --vr-after: 24px; }
.garden-theme :is(.section,.film-section,.tour-section,.siw-close,.feature-row,.feature-cards,.protected,#buy) { padding: var(--vr-section) 0; border-top: 0; }
.garden-theme :is(.section,.film-section,.tour-section,.siw-close,.feature-row,.feature-cards) > .container { position: relative; }
.garden-theme :is(.section,.film-section,.tour-section,.siw-close,.feature-row,.feature-cards) ~ :is(.section,.film-section,.tour-section,.siw-close,.feature-row,.feature-cards) > .container::before { content: ''; position: absolute; top: calc(-1 * var(--vr-section)); left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg,transparent,#c0b0e629,transparent); }
.garden-theme :is(.section,.film-section,.tour-section,.feature-row,.feature-cards,.page-header) .eyebrow + :is(h1,h2) { margin-top: var(--vr-heading); margin-bottom: var(--vr-lede); }
.garden-theme :is(.section,.film-section,.tour-section,.feature-row,.feature-cards,.page-header) :is(h1,h2) + :is(p,.lede) { margin-top: 0; }
.garden-theme .film-copy p, .garden-theme .tour-head p { margin-bottom: 0; }
.garden-theme :is(.chips,.proof-grid,.pv-grid,.pipeline,.cards,.compare-wrap,.specs-panel,.faq-layout,.article-cards,.buy-grid,.feature-points) { margin-top: var(--vr-block); }
.garden-theme #demo .compare-wrap, .garden-theme .homepage-proof .proof-grid, .garden-theme #technology .cards, .garden-theme .lede-after-block { margin-top: var(--vr-block); }
.garden-theme .film-gallery .film-copy, .garden-theme .tour-head { margin-bottom: var(--vr-block); }
.garden-theme :is(.hero-ctas,.section-actions,.feature-watch,.feature-cta,.siw-cta), .garden-theme #demo-film .film-copy .btn { margin-top: var(--vr-action); }
.garden-theme :is(.hero-meta,.siw-next,.proof-provenance) { margin-top: var(--vr-after); }
@media(max-width:700px) {
  .garden-theme { --vr-section: 60px; --vr-block: 32px; --vr-action: 24px; }
  .garden-theme :is(.section,.film-section,.tour-section,.siw-close,.feature-row,.feature-cards,.protected,#buy) { padding: var(--vr-section) 0; }
}
/* The VanityCam crosslink is a second .container inside #buy: no section divider (it cut across the
   price cards), and one content-block gap above it instead of a cramped 16px plus 32px extra below. */
.garden-theme #buy > .vc-crosslink-buy::before { content: none; }
.garden-theme #buy > .vc-crosslink-buy { margin-top: var(--vr-block); padding-bottom: 0; }
/* assets/product-navigation.css */
/* Shared chrome. One quiet accent per product; no foreground effects. */
html{scroll-padding-top:var(--vf-nav-offset,132px)}
:is(section,main,h2,details)[id]{scroll-margin-top:16px}
#vf-site-nav{--nav-accent:#c5a8f1;--nav-rgb:178,143,227;background:linear-gradient(110deg,#101220f5,#171526f5 60%,#101320f5);border-bottom:1px solid #b9a5e22b;backdrop-filter:blur(18px);box-shadow:0 5px 28px #03050a35}
#vf-site-nav[data-product="vanitycam"]{--nav-accent:#a3dfdc;--nav-rgb:124,200,200}
#vf-site-nav .nav-inner{position:relative;z-index:2;max-width:var(--container);height:76px;gap:26px}
#vf-site-nav .brand-logo{width:178px}
#vf-site-nav .nav-links{gap:8px}
#vf-site-nav .nav-links a:not(.btn){display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 13px;border:1px solid transparent;border-radius:12px;font-size:.9rem;font-weight:600;color:#c8c5d7;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
#vf-site-nav .nav-links a:not(.btn):hover{background:#d1bafb0b;color:#fff;border-color:#b6a3d72b}
#vf-site-nav .nav-links .nav-product{position:relative}
#vf-site-nav .nav-product img{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 0 5px #c3a6fb25)}
#vf-site-nav .nav-links a[aria-current]{color:#f5efff;background:rgba(var(--nav-rgb),.095);border-color:rgba(var(--nav-rgb),.35);box-shadow:inset 0 1px 0 #ffffff0c,0 0 20px rgba(var(--nav-rgb),.07)}
#vf-site-nav .nav-product[aria-current]::after{content:'';position:absolute;bottom:-1px;left:25%;right:25%;height:1px;background:var(--nav-accent);box-shadow:0 0 8px var(--nav-accent)}
#vf-site-nav .nav-language{margin-left:4px;font-size:.75rem!important;letter-spacing:.05em}
#vf-site-nav .nav-language svg{fill:none;stroke:currentColor;stroke-width:1.3}
#vf-site-nav .nav-links .btn{margin-left:7px;border-radius:12px;min-height:42px;box-shadow:0 0 22px #a16bd322}
#vf-site-nav a:focus-visible,#vf-site-nav button:focus-visible{outline:2px solid var(--nav-accent);outline-offset:4px}
#vf-site-nav .product-subnav{position:relative;z-index:1;background:linear-gradient(100deg,#241d35f5,#1b192afa 60%,#181b2cfa);border-top:1px solid #bca0e72a;animation:product-menu-arrive .42s cubic-bezier(.2,.7,.2,1) both}
#vf-site-nav[data-product="vanitycam"] .product-subnav{background:linear-gradient(100deg,#152b30f7,#15232bfa 60%,#191e2afa);border-top-color:#9ed6d02a}
#vf-site-nav .product-subnav-inner{max-width:var(--container);display:flex;align-items:center;gap:30px;min-height:49px}
#vf-site-nav .product-subnav-name{display:flex;align-items:center;gap:10px;color:var(--nav-accent);font-size:.7rem;font-weight:600;letter-spacing:.055em;white-space:nowrap;min-width:178px}
#vf-site-nav .nav-spark{font-size:16px;text-shadow:0 0 12px rgba(var(--nav-rgb),.65)}
#vf-site-nav .product-subnav-links{display:flex;align-items:center;gap:8px}
#vf-site-nav .product-subnav-links a{display:flex;align-items:center;gap:22px;min-height:40px;padding:6px 14px;color:#bdb5cf;font-size:.8rem;border-radius:8px;border:1px solid transparent;white-space:nowrap;transition:background .2s,color .2s}
#vf-site-nav .product-subnav-links a span{font-size:.75rem;opacity:.35;transition:opacity .2s,transform .2s}
#vf-site-nav .product-subnav-links a:hover,#vf-site-nav .product-subnav-links a[aria-current]{color:#f6f0ff;background:rgba(var(--nav-rgb),.09);text-decoration:none}
#vf-site-nav .product-subnav-links a:hover span{opacity:.85;transform:translate(1px,-1px)}
@keyframes product-menu-arrive{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1101px){#vf-site-nav .nav-toggle{display:none}#vf-site-nav .nav-links{position:static;display:flex;flex-direction:row;opacity:1;visibility:visible;pointer-events:auto;transform:none;background:transparent;padding:0;border:0;box-shadow:none;margin-left:auto}}
@media(max-width:1100px){
 #vf-site-nav .nav-inner{height:70px}
 #vf-site-nav .nav-toggle{display:inline-flex;border-color:#b5a1dc40;background:#211e32;box-shadow:inset 0 1px 0 #ffffff0b}
 #vf-site-nav .nav-links{position:absolute;top:70px;left:12px;right:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch;padding:16px;margin:0;border:1px solid #bca4e743;border-radius:0 0 18px 18px;background:#121321;box-shadow:0 24px 40px #0008;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);max-height:calc(100dvh - 100px);overflow:auto}
 #vf-site-nav.is-open .nav-links{opacity:1;visibility:visible;pointer-events:auto;transform:none}
 #vf-site-nav.is-open .product-subnav{visibility:hidden}
 #vf-site-nav .nav-links a:not(.btn){justify-content:flex-start;min-height:48px;padding:10px 12px;background:#ffffff03;border-color:#ffffff0c}
 #vf-site-nav .nav-links .btn{margin:0;min-height:48px;width:auto}
 #vf-site-nav .nav-language{margin:0}
 #vf-site-nav .product-subnav-inner{gap:12px;min-height:50px}
 #vf-site-nav .product-subnav-name{min-width:0;font-size:.66rem}
 #vf-site-nav .product-subnav-links{gap:2px;min-width:0;overflow-x:auto;scrollbar-width:thin;padding:3px 0}
 #vf-site-nav .product-subnav-links a{gap:9px;padding:5px 10px;font-size:.76rem;min-height:40px}
}
@media(max-width:540px){
 #vf-site-nav .nav-inner{padding-inline:var(--page-gutter)}
 #vf-site-nav .brand-logo{width:162px}
 #vf-site-nav .product-subnav-inner{padding-inline:var(--page-gutter);gap:6px}
 #vf-site-nav .product-subnav-name{font-size:0;min-width:18px;gap:0}
 #vf-site-nav .product-subnav-links{flex:1;justify-content:space-between}
 #vf-site-nav .product-subnav-links a{gap:6px;padding-inline:8px;font-size:.73rem}
}
@media(prefers-reduced-motion:reduce){#vf-site-nav .product-subnav{animation:none}#vf-site-nav a,#vf-site-nav a span,#vf-site-nav .nav-links{transition:none!important}}
html:not(.js) #vf-site-nav .nav-toggle{display:none}
@media(max-width:1100px){html:not(.js) #vf-site-nav .nav-inner{height:auto;flex-wrap:wrap;padding-block:12px}html:not(.js) #vf-site-nav .nav-links{position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;width:100%}}
/* assets/product-footer.css */
/* Product-aware companion to the moonlit header. */
#vf-site-footer{--footer-accent:#c5a8f1;--footer-rgb:178,143,227}
#vf-site-footer[data-product="vanitycam"]{--footer-accent:#a3dfdc;--footer-rgb:124,200,200}
#vf-site-footer .footer-shell{position:relative;padding:32px;background:radial-gradient(ellipse at 8% 0,rgba(var(--footer-rgb),.12),transparent 48%),linear-gradient(135deg,#151522fa,#0d121cfa);border-color:rgba(var(--footer-rgb),.3);box-shadow:0 24px 70px #0005,inset 0 1px 0 #ffffff09}
#vf-site-footer .footer-shell::before{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,var(--footer-accent),transparent);box-shadow:0 0 18px var(--footer-accent);pointer-events:none}
#vf-site-footer .footer-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#vf-site-footer .footer-product-card{--card-accent:#c5a8f1;--card-rgb:178,143,227;position:relative;display:flex;flex-direction:column;overflow:hidden;min-width:0;padding:26px;border:1px solid rgba(var(--card-rgb),.22);border-radius:20px;background:linear-gradient(125deg,rgba(var(--card-rgb),.06),#11152270);transition:border-color .3s,box-shadow .3s}
#vf-site-footer .footer-product-card[data-product="vanitycam"]{--card-accent:#a3dfdc;--card-rgb:124,200,200}
#vf-site-footer .footer-product-card.is-current{border-color:rgba(var(--card-rgb),.42);background:radial-gradient(ellipse at 95% 0,rgba(var(--card-rgb),.12),transparent 70%),#15182570}
#vf-site-footer .footer-product-card::after{content:'';position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 44%,rgba(var(--card-rgb),.07) 50%,transparent 56%);transform:translateX(-85%);pointer-events:none}
#vf-site-footer .footer-product-card:hover::after,#vf-site-footer .footer-product-card:focus-within::after{animation:footer-moonlight 1.2s ease-out both}
#vf-site-footer .footer-product-card:hover,#vf-site-footer .footer-product-card:focus-within{border-color:rgba(var(--card-rgb),.55);box-shadow:0 0 26px rgba(var(--card-rgb),.07)}
#vf-site-footer .footer-product-title{display:flex;align-items:center;gap:12px;color:#f4efff;text-decoration:none}
#vf-site-footer .footer-product-title img{object-fit:contain;filter:drop-shadow(0 0 9px rgba(var(--card-rgb),.25))}
#vf-site-footer .footer-product-title h2{margin:0;font:600 1.35rem/1.2 var(--font-display);letter-spacing:-.035em}
#vf-site-footer .footer-spark{margin-left:auto;color:var(--card-accent);font-size:17px;text-shadow:0 0 12px var(--card-accent);transition:transform .5s}
#vf-site-footer .footer-product-card:hover .footer-spark{transform:rotate(90deg)}
#vf-site-footer .footer-product-card p{max-width:none;color:#bcb9ca;font-size:.95rem;line-height:1.65;margin:18px 0 22px}
#vf-site-footer .footer-product-resources{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0}
#vf-site-footer .footer-product-resources a{gap:16px;padding:10px 13px;justify-content:space-between;font-size:.83rem;min-height:44px;background:rgba(var(--card-rgb),.045);border-color:rgba(var(--card-rgb),.2)}
#vf-site-footer .footer-product-resources a span{color:var(--card-accent);opacity:.55}
#vf-site-footer .footer-discover{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding:12px 16px;min-height:46px;border-radius:10px;border:1px solid rgba(var(--card-rgb),.35);background:rgba(var(--card-rgb),.08);color:var(--card-accent);font-weight:600;font-size:.9rem;transition:background .2s}
#vf-site-footer .footer-discover:hover{background:rgba(var(--card-rgb),.16);text-decoration:none}
#vf-site-footer .footer-top{margin-top:30px;padding-top:30px;gap:36px;border-top:1px solid rgba(var(--footer-rgb),.17)}
#vf-site-footer .footer-studio-name{display:inline-flex;align-items:center;gap:14px;font:600 1.15rem/1.4 var(--font-display);color:#ece7f7}
#vf-site-footer .footer-studio-name span{color:var(--footer-accent);font-size:.85rem}
#vf-site-footer .footer-studio p{margin-top:16px;max-width:none;font-size:.95rem}
#vf-site-footer .footer-studio-link{color:var(--footer-accent);font-size:.85rem}
#vf-site-footer .footer-waitlist{border-color:rgba(var(--footer-rgb),.2);background:rgba(var(--footer-rgb),.035);padding:22px}
#vf-site-footer .footer-waitlist h2{font-size:1.05rem}
#vf-site-footer .footer-waitlist p{font-size:.9rem}
#vf-site-footer .footer-mac-actions .btn{font-size:.85rem;border-radius:10px;border-color:rgba(var(--footer-rgb),.25);background:#171a28}
#vf-site-footer .footer-navigation{margin-top:28px;padding-top:24px;border-color:rgba(var(--footer-rgb),.17)}
#vf-site-footer .footer-navigation h2{font-size:.75rem;letter-spacing:.08em;color:var(--footer-accent)}
#vf-site-footer .footer-navigation .footer-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#vf-site-footer .footer-navigation :is(a,button){font:500 .82rem/1.4 var(--font-body,inherit);color:#c5c0d2;padding:10px 14px;min-height:44px;border:1px solid #b2a4d527;border-radius:10px;background:#c8bbff04;cursor:pointer;transition:background .2s,border-color .2s}
#vf-site-footer .footer-navigation :is(a,button):hover{background:rgba(var(--footer-rgb),.1);border-color:rgba(var(--footer-rgb),.4);color:#fff}
#vf-site-footer .footer-language{margin-left:auto}
#vf-site-footer .footer-ad-area{margin-inline:-32px;border-color:rgba(var(--footer-rgb),.15);background:#070b124d}
#vf-site-footer .footer-social{display:flex;align-items:center;gap:2px;margin-left:auto}
#vf-site-footer .footer-social a{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(var(--footer-rgb),.2);background:rgba(var(--footer-rgb),.045);text-decoration:none;transition:transform .35s ease,border-color .3s,box-shadow .3s,background .3s}
#vf-site-footer .footer-social a::after{content:'';position:absolute;inset:-60%;background:linear-gradient(110deg,transparent 42%,rgba(var(--footer-rgb),.38) 50%,transparent 58%);transform:translateX(-90%);pointer-events:none}
#vf-site-footer .footer-social a:hover,#vf-site-footer .footer-social a:focus-visible{transform:translateY(-3px);border-color:rgba(var(--footer-rgb),.6);background:rgba(var(--footer-rgb),.14);box-shadow:0 10px 24px #0006,0 0 22px rgba(var(--footer-rgb),.32);text-decoration:none}
#vf-site-footer .footer-social a:hover::after,#vf-site-footer .footer-social a:focus-visible::after{animation:footer-moonlight .9s ease-out both}
#vf-site-footer .footer-social img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(var(--footer-rgb),.22));transition:transform .35s ease,filter .3s}
#vf-site-footer .footer-social a:hover img,#vf-site-footer .footer-social a:focus-visible img{transform:scale(1.08);filter:drop-shadow(0 0 12px var(--footer-accent))}
#vf-site-footer :is(a,button):focus-visible{outline:2px solid var(--footer-accent);outline-offset:4px}
@keyframes footer-moonlight{to{transform:translateX(85%)}}
@media(max-width:760px){#vf-site-footer .footer-products{grid-template-columns:minmax(0,1fr)}#vf-site-footer .footer-top{grid-template-columns:minmax(0,1fr);gap:26px}#vf-site-footer .footer-language{margin-left:0}}
@media(max-width:540px){#vf-site-footer .footer-shell{padding:22px 16px}#vf-site-footer .footer-product-card{padding:22px 18px}#vf-site-footer .footer-product-title h2{font-size:1.2rem}#vf-site-footer .footer-ad-area{margin-inline:-16px}#vf-site-footer .footer-navigation .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#vf-site-footer .footer-navigation :is(a,button){font-size:.78rem}#vf-site-footer .footer-waitlist{padding:20px 18px}}
@media(prefers-reduced-motion:reduce){#vf-site-footer *,#vf-site-footer *::after{animation:none!important;transition:none!important}#vf-site-footer .footer-product-card:hover .footer-spark,#vf-site-footer .footer-social a:hover,#vf-site-footer .footer-social a:focus-visible,#vf-site-footer .footer-social a:hover img{transform:none}}
/* assets/primary-actions.css */
/* One readable action treatment across pages, navigation and injected checkout UI. */
:root {
  --action-ink: #21152f;
  --action-face: #c8b5ef;
  --action-light: #e3d7fa;
  --action-edge: #e9ddff;
  --action-glow: #b19ae83d;
}
/* The nav ID also outranks historical page-local nav link color overrides. */
:is(.btn.btn-primary, #vf-site-nav .nav-links .btn-primary, .vf-buy-flyout) {
  color: var(--action-ink);
  -webkit-text-fill-color: var(--action-ink);
  background: linear-gradient(175deg, var(--action-light), var(--action-face));
  border: 1px solid var(--action-edge);
  border-radius: 12px;
  font-weight: 700;
  text-shadow: none;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #ffffff80, 0 3px 10px #05071350, 0 0 20px var(--action-glow);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
:is(.btn.btn-primary, #vf-site-nav .nav-links .btn-primary, .vf-buy-flyout):hover {
  color: var(--action-ink);
  background: linear-gradient(175deg, #efe6ff, #d5c3f7);
  border-color: #f4ecff;
  box-shadow: inset 0 1px 0 #ffffff99, 0 5px 14px #05071360, 0 0 26px #b19ae855;
  transform: translateY(-1px);
  text-decoration: none;
  filter: none;
}
:is(.btn.btn-primary, #vf-site-nav .nav-links .btn-primary, .vf-buy-flyout):focus-visible {
  outline: 2px solid #f3ebff;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px #171321, 0 0 26px #b19ae855;
}
:is(.btn.btn-primary, #vf-site-nav .nav-links .btn-primary, .vf-buy-flyout):active {
  transform: translateY(0);
  background: #c8b5ef;
  box-shadow: inset 0 2px 5px #21152f24, 0 0 12px var(--action-glow);
}
body .vf-buy-flyout {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}
@media (prefers-reduced-motion: reduce) {
  :is(.btn.btn-primary, #vf-site-nav .nav-links .btn-primary, .vf-buy-flyout) { transition: none; }
  :is(.btn.btn-primary, #vf-site-nav .nav-links .btn-primary, .vf-buy-flyout):hover { transform: none; }
}
@media (forced-colors: active) {
  :is(.btn.btn-primary, #vf-site-nav .nav-links .btn-primary, .vf-buy-flyout) {
    color: ButtonText; -webkit-text-fill-color: ButtonText;
    background: ButtonFace; border: 2px solid ButtonText; box-shadow: none;
  }
}