/* ==========================================================================
   ZYNLUME - MONO. Monochrome minimal interface layer.
   1 tokens - 2 base - 3 nav - 4 hero
   ========================================================================== */

/* 1 - TOKENS */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --bg: #060606;
  --bg-soft: #0a0a0a;
  --surface: #0d0d0d;
  --surface-2: #111111;
  --text: #f6f6f4;
  --text-dim: #a3a3a0;
  --text-faint: #6e6e6b;
  --line: rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.38);
  --accent: #fff;
  --violet: #fff;
  --cyan: #fff;
  --green: #fff;
  --danger: #fff;
  --grad: #fff;
  --glow-soft: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 60px rgba(255, 255, 255, 0.05);
  --glow-hover: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 70px rgba(255, 255, 255, 0.09);
  --radius: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 2 - BASE */
*, *::before, *::after {
  box-sizing: border-box;
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
}

a, a:hover, a:focus, a:visited, a:active,
button, .btn, .btn-quiet, .btn-ghost, .btn-primary, .btn-lg, .btn-sm,
.nav-links a, .nav-links a:hover, .brand, .brand:hover,
.hero-actions a, .mono-actions a, .dl-btn, .dl-btn *,
.footer-grid a, .footer-col a, .footer-col a:hover,
h1, h2, h3, h4, h5, h6, p, span, b, strong, em, i, small, label, div {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
}

html { scroll-behavior: smooth; background: #060606; color-scheme: dark; }

body {
  background: #060606 !important;
  color: var(--text) !important;
  font-family: var(--font);
  letter-spacing: -0.011em;
  overflow-x: hidden;
}

::selection { background: #fff; color: #000; }

:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }

.page-grid {
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  mask-image: linear-gradient(to bottom, #000 0, transparent 70%);
  pointer-events: none !important;
}

.cosmic-ambient {
  background: radial-gradient(circle at 70% 12%, rgba(255, 255, 255, 0.07), transparent 30%) !important;
  animation: breathe 12s ease-in-out infinite;
  pointer-events: none !important;
}

.scroll-progress {
  background: #fff !important;
  height: 1px !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.6) !important;
}

.skip { background: #fff !important; color: #000 !important; }

/* 3 - NAVIGATION */
.topnav,
#site .topnav {
  position: fixed !important;
  top: 14px !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: min(1140px, calc(100% - 32px)) !important;
  max-width: 1140px !important;
  transform: none !important;
  -webkit-transform: none !important;
  background: rgba(6, 6, 6, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  z-index: 100 !important;
}

.nav-row,
#site .nav-row {
  min-height: 64px !important;
  height: 64px !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: inherit !important;
  box-sizing: border-box !important;
}

.brand b,
.brand b span {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 15px;
}

.brand-symbol {
  border: 1px solid var(--line) !important;
  background: #0b0b0b !important;
  box-shadow: var(--glow-soft) !important;
  filter: grayscale(1);
}
.brand-symbol i { border-color: #fff !important; background: #fff !important; }
.brand-symbol i:nth-child(2) { animation: spin 9s linear infinite; }
.brand-symbol i:nth-child(3) { animation: pulse 2.8s ease-in-out infinite; }

.nav-links { gap: 30px; }
.nav-links a {
  color: var(--text-dim) !important;
  font-size: 13.5px;
  position: relative;
  transition: color 0.25s var(--ease);
}
.nav-links a::after {
  display: none !important;
  content: none !important;
}
.nav-links a:hover { color: #fff !important; }
.nav-links a:hover::after { display: none !important; content: none !important; }

.theme-toggle { display: none !important; }

.btn, .icon-btn, .menu-button, .button {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  background-image: none !important;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn { font-weight: 640; letter-spacing: -0.01em; }
.btn-primary, .btn-grad, .button-primary {
  background: #fff !important;
  background-image: none !important;
  color: #060606 !important;
  border-color: #fff !important;
}
.btn-primary:hover, .btn-grad:hover, .button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.26) !important;
}
.btn-quiet, .btn-ghost, .icon-btn, .menu-button {
  background: rgba(255, 255, 255, 0.02) !important;
  color: #fff !important;
}
.btn-quiet:hover, .btn-ghost:hover, .icon-btn:hover, .menu-button:hover {
  border-color: var(--line-strong) !important;
  box-shadow: var(--glow-soft) !important;
}
.btn-danger { background: transparent !important; color: #fff !important; border-color: var(--line-strong) !important; }

/* 4 - HERO */
.hero { min-height: 780px; padding: 176px 0 96px !important; }
.hero > .hero-layout { display: none !important; }

.mono-hero {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  gap: 76px;
  align-items: center;
}

.mono-copy { position: relative; z-index: 2; }

.mono-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--text-dim);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mono-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
  animation: pulse 2.8s ease-in-out infinite;
}

.mono-copy h1 {
  margin: 0 !important;
  max-width: 840px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  font-size: clamp(54px, 6.6vw, 98px) !important;
  line-height: 0.93 !important;
  letter-spacing: -0.065em !important;
  text-wrap: balance;
}

.mono-copy p {
  max-width: 580px;
  margin: 30px 0 0;
  color: var(--text-dim) !important;
  font-size: 18px;
  line-height: 1.65;
}

.mono-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.mono-note { margin-top: 22px; color: var(--text-faint); font-size: 13px; }

.mono-orbit {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 45%);
  box-shadow: 0 0 120px rgba(255, 255, 255, 0.055);
  animation: breathe 9s ease-in-out infinite;
}
.mono-orbit::before,
.mono-orbit::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: spin 16s linear infinite;
}
.mono-orbit::after { inset: 30%; animation-duration: 10s; animation-direction: reverse; }

.mono-core {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 24px;
  background: #0a0a0a;
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
  animation: float 4.5s ease-in-out infinite;
}
.mono-core svg { width: 42px; height: 42px; }
.mono-core svg * {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mono-node {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 2px solid #060606;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.85);
}
.mono-node.one { top: 12%; left: 50%; animation: pulse 2.6s ease-in-out infinite; }
.mono-node.two { right: 12%; top: 52%; animation: pulse 2.3s ease-in-out infinite 0.5s; }
.mono-node.three { left: 20%; bottom: 16%; animation: pulse 3s ease-in-out infinite 1s; }

.platform-strip {
  padding: 24px 0 !important;
  background: #060606 !important;
  border-block: 1px solid var(--line-soft) !important;
}
.platform-strip span,
.platform-strip small {
  color: var(--text-faint) !important;
  filter: grayscale(1);
  letter-spacing: 0.08em;
}

/* 5 - SECTION RHYTHM */
.section { padding: 128px 0 !important; }
.section-intro { max-width: 720px; }
.section-intro.centered { max-width: 720px; margin-inline: auto; text-align: center; }

.kicker {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--text-dim) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-dim) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
}

.section h2,
.section-intro h2,
.final-cta h2 {
  margin: 0;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(36px, 4.4vw, 60px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.05em !important;
  text-wrap: balance;
}

.section-intro p {
  margin-top: 20px;
  color: var(--text-dim) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

/* 6 - ANIMATED MONO ICONS */
.mono-icon {
  display: grid !important;
  place-items: center;
  width: 52px !important;
  height: 52px !important;
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  background: #090909 !important;
  color: #fff !important;
  font-size: 0 !important;
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.03) !important;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.mono-icon svg { width: 24px; height: 24px; display: block; }
.mono-icon svg * {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mono-icon [data-dash] {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: draw 2.8s var(--ease) infinite;
}
.mono-icon [data-spin] { transform-origin: 12px 12px; animation: spin 7s linear infinite; }
.mono-icon [data-blink] { animation: blink 2.4s ease-in-out infinite; }
.mono-icon [data-rise] { animation: rise 3s ease-in-out infinite; }

.feature:hover .mono-icon,
.process-card:hover .mono-icon {
  border-color: var(--line-strong) !important;
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-3px);
}

/* 7 - CARDS AND PRODUCT */
.product-stage,
.studio-shell,
.studio-workspace,
.panel,
.plan,
.feature,
.process-card,
.faq-list details,
.support-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

.feature-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
.feature {
  grid-column: auto !important;
  min-height: 292px !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.feature:hover {
  transform: translateY(-6px) !important;
  border-color: var(--line-strong) !important;
  box-shadow: var(--glow-hover) !important;
}
.feature-no { color: var(--text-faint) !important; font-size: 12px; letter-spacing: 0.16em; }
.feature h3 { margin: 0; font-size: 21px !important; letter-spacing: -0.03em; color: #fff !important; }
.feature p { margin: 0; color: var(--text-dim) !important; line-height: 1.62; }
.feature-icon { margin-top: auto; }

.process-section {
  background: var(--bg-soft) !important;
  border-block: 1px solid var(--line-soft) !important;
}
.process-grid { gap: 18px !important; margin-top: 56px; }
.process-card {
  padding: 34px !important;
  min-height: 250px !important;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.process-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong) !important;
  box-shadow: var(--glow-hover) !important;
}
.process-card > span { color: var(--text-faint) !important; font-size: 12px; letter-spacing: 0.16em; }
.process-card h3 { margin: 0; font-size: 21px; letter-spacing: -0.03em; color: #fff !important; }
.process-card p { margin: 0; color: var(--text-dim) !important; line-height: 1.62; }
.process-line {
  height: 1px !important;
  background: linear-gradient(90deg, #fff, transparent) !important;
  opacity: 0.45;
}

.product-section { padding-top: 128px !important; }
.studio-tabs { background: var(--bg-soft) !important; border-bottom: 1px solid var(--line) !important; }
.studio-tab { color: var(--text-dim) !important; }
.studio-tab.active { background: #fff !important; color: #060606 !important; }
.studio-screen, .studio-form, .studio-output { background: var(--bg-soft) !important; }
.studio-upload, .dropzone {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: #0a0a0a !important;
}
.studio-upload:hover, .dropzone:hover {
  border-color: #fff !important;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.07) !important;
}

/* 8 - DEMO STRIP */
.demo-section { background: var(--bg-soft) !important; border-block: 1px solid var(--line-soft) !important; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.demo-card {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.demo-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: var(--glow-hover);
}
.demo-card video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 9px;
  background: #000;
  filter: grayscale(1) contrast(1.08);
}
.demo-card figcaption { padding: 16px 4px 4px; color: var(--text-dim); font-size: 14px; }

/* 9 - PRICING */
.pricing-section { background: #060606 !important; }
.period-wrap { margin: 40px 0 !important; display: flex; justify-content: center; }
.per-tabs {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
.per-tab { color: var(--text-dim) !important; border-radius: 8px !important; transition: all 0.3s var(--ease); }
.per-tab.active { background: #fff !important; color: #060606 !important; }
.plans { gap: 18px !important; }
.plan { padding: 32px !important; transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.plan.pop, .plan:hover {
  border-color: var(--line-strong) !important;
  box-shadow: var(--glow-hover) !important;
  transform: none !important;
}
.plan .tag { background: #fff !important; color: #060606 !important; border: none !important; }
.plan h3 { letter-spacing: -0.03em; color: #fff !important; }
.plan .price, .plan .amount, .plan .pval {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.plan li, .pdesc { color: var(--text-dim) !important; }
.ck { color: #fff !important; }
.plan-skeleton {
  min-height: 380px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(100deg, #0b0b0b 30%, #131313 50%, #0b0b0b 70%);
  background-size: 240% 100%;
  animation: shimmer 1.8s linear infinite;
}

/* 10 - FAQ */
.faq-layout { gap: 72px !important; }
.faq-list details {
  margin-bottom: 10px !important;
  padding: 0 24px !important;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.faq-list details[open] { border-color: var(--line-strong) !important; background: var(--surface-2) !important; }
.faq-list summary {
  padding: 22px 0 !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  float: right;
  color: var(--text-dim);
  font-weight: 400;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); color: #fff; }
.faq-list p { color: var(--text-dim) !important; line-height: 1.68; padding-bottom: 20px; }
.support-card { margin-top: 28px !important; padding: 20px !important; }
.support-card:hover { border-color: var(--line-strong) !important; box-shadow: var(--glow-soft) !important; }
.support-card b { color: #fff; }
.support-card small { color: var(--text-dim); }

/* 11 - FINAL CTA AND FOOTER */
.final-cta {
  padding: 136px 0 !important;
  background:
    radial-gradient(circle at 50% 110%, rgba(255, 255, 255, 0.09), transparent 46%),
    #060606 !important;
  border-top: 1px solid var(--line-soft) !important;
  text-align: center;
}
.final-cta .wrap { max-width: 860px !important; }
.final-cta p { color: var(--text-dim) !important; font-size: 18px; margin: 20px 0 34px; }

footer, #site footer, #siteFooter {
  background: #050811 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 64px 0 48px !important;
}
.footer-grid, #site .footer-grid {
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr !important;
  gap: 40px 24px !important;
  width: 100% !important;
  max-width: var(--wrap, 1200px) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  align-items: start !important;
}
.footer-grid a, .footer-grid a:hover, .footer-grid a:visited,
.footer-grid nav a, .footer-note, footer p, .to-top, .to-top:hover {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.footer-grid nav b {
  display: block;
  margin-bottom: 14px;
  color: #fff !important;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: none !important;
}
@media (max-width: 960px) {
  .footer-grid, #site .footer-grid {
    grid-template-columns: 1.5fr repeat(2, 1fr) !important;
    gap: 36px 20px !important;
  }
}
@media (max-width: 640px) {
  .footer-grid, #site .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 16px !important;
  }
  .footer-brand-col {
    grid-column: 1 / -1 !important;
    margin-bottom: 8px !important;
  }
}

/* 12 - MODALS, AUTH, FORMS */
.overlay { background: rgba(0, 0, 0, 0.8) !important; backdrop-filter: blur(18px); }
.modal {
  background: #0b0b0b !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 90px rgba(255, 255, 255, 0.08) !important;
}
.modal h3 { letter-spacing: -0.035em; color: #fff !important; }
.modal-sub { color: var(--text-dim) !important; }
.modal-close { color: var(--text-dim) !important; }
.modal-close:hover { color: #fff !important; }

input, select, textarea,
.modal input, .modal select {
  background: #090909 !important;
  color: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-faint) !important; }
.field > span { color: var(--text-dim); font-size: 13px; }

/* Google sign-in: kept fully functional, restyled for the mono system */
.google-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px !important;
  background: #fff !important;
  color: #060606 !important;
  border: 1px solid #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 640;
  filter: none !important;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.google-button:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(255, 255, 255, 0.26); }
.google-button svg { width: 19px; height: 19px; filter: grayscale(1) contrast(1.35); }
.divider { color: var(--text-faint) !important; }
.divider::before, .divider::after { background: var(--line) !important; }
.auth-toggle { color: var(--text-dim) !important; }
.auth-toggle:hover { color: #fff !important; }
.toast { background: #fff !important; color: #060606 !important; border: none !important; }

/* 13 - DASHBOARD */
#dash, .dash-shell, .dash-workspace { background: #060606 !important; }
.dash-rail {
  width: 240px !important;
  padding: 24px 18px !important;
  background: var(--bg-soft) !important;
  border-right: 1px solid var(--line) !important;
}
.dash-rail nav button { border-radius: var(--radius-sm) !important; color: var(--text-dim) !important; }
.dash-rail nav button.active,
.dash-rail nav button:hover { background: #fff !important; color: #060606 !important; }
.dash-rail nav button span { transition: opacity 0.2s var(--ease); }
.dash-rail nav button:hover span { transform: none !important; }
.rail-status, .dash-user, .status-pill {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: #fff !important;
}
.rail-status i, .status-pill i { background: #fff !important; box-shadow: 0 0 12px #fff !important; }
.dash-top {
  background: rgba(6, 6, 6, 0.85) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(16px);
}
.dash-layout { padding: 28px !important; gap: 18px !important; }
.panel { padding: 26px !important; }
.panel h2, .panel h3 { color: #fff !important; }
.channel-list > * { background: #090909 !important; border-color: var(--line) !important; }
.danger-zone { opacity: 0.7; }

/* 14 - MOTION */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1.14); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes rise {
  0%, 100% { transform: translateY(1px); opacity: 0.75; }
  50% { transform: translateY(-2px); opacity: 1; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}
@keyframes draw {
  0% { stroke-dashoffset: 70; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -70; }
}
@keyframes blink {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes shimmer { to { background-position: -240% 0; } }

.reveal, .reveal.in,
.mono-hero, .mono-copy h1, .mono-copy p, .mono-actions {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* 15 - RESPONSIVE */
@media (max-width: 900px) {
  .wrap { width: min(100% - 32px, 720px); }
  .topnav { top: 8px; }
  .nav-row { min-height: 58px; }
  .hero { min-height: auto; padding: 130px 0 72px !important; }
  .mono-hero { grid-template-columns: 1fr; min-height: auto; gap: 52px; padding: 32px 0 16px; }
  .mono-orbit { width: min(420px, 80vw); margin-inline: auto; order: -1; }
  .mono-copy h1 { font-size: clamp(48px, 11vw, 76px) !important; }
  .section { padding: 88px 0 !important; }
  .feature-grid, .process-grid, .demo-grid { grid-template-columns: 1fr !important; }
  .feature { min-height: auto !important; }
  .faq-layout { grid-template-columns: 1fr !important; gap: 40px !important; }
  .dash-rail { width: 84px !important; }
  .dash-rail .brand b, .dash-rail nav button:not(.active) { font-size: 0; }
  .dash-rail nav button span { font-size: 20px; }
  .dash-layout, .dash-side { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .wrap { width: calc(100% - 28px); }
  .topnav { width: calc(100% - 16px) !important; }
  .hero { padding-top: 108px !important; }
  .mono-orbit { width: 230px; }
  .mono-core { width: 72px; height: 72px; border-radius: 19px; }
  .mono-copy h1 { font-size: 46px !important; line-height: 0.96 !important; }
  .mono-copy p { font-size: 16px; margin-top: 22px; }
  .mono-actions { display: grid; margin-top: 28px; }
  .mono-actions .btn { width: 100%; }
  .section { padding: 72px 0 !important; }
  .section h2, .section-intro h2, .final-cta h2 { font-size: 34px !important; }
  .feature, .process-card { padding: 26px !important; }
  .plans { grid-template-columns: 1fr !important; }
  .final-cta { padding: 96px 0 !important; }
  .dash-rail { display: none !important; }
  .dash-layout { padding: 14px !important; }
  .panel { padding: 18px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.zm-anim-icon):not(.cab-ico):not([class*="zm-ico-"]):not(.zm-anim-icon *):not(.cab-ico *) {
    transition-duration: 0.01ms !important;
  }
}

/* ============ 16. HARD MONO OVERRIDE (kills legacy color layers) ============ */
html, body { background: var(--bg) !important; }
#site,
.hero, .mono-hero,
.product-section, .process-section, .pricing-section, .faq-section,
.feature-wide, .metrics, #dash {
  background-image: none !important;
}
#site { background: var(--bg) !important; }
.cosmic-ambient, .hero-stars, .orbit-stage::before, .studio-frame::before,
.feature::before, .process-card::before, .panel::before, .plan::before,
.faq-list details::before, .support-card::before, .scroll-cue { display: none !important; }
.page-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) !important;
  background-size: 88px 88px !important;
  opacity: .5 !important;
}
.scroll-progress { background: #fff !important; box-shadow: 0 0 14px rgba(255,255,255,.35) !important; }
.hero::before, .hero::after { background: none !important; }
.mono-hero::after {
  content: ""; position: absolute; inset: -20% 10% 30% 20%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.07), transparent 70%);
  filter: blur(40px); animation: breathe 9s ease-in-out infinite;
}
.orbit-media img, .studio-shot img, .demo-clip video, .demo-clip img,
.feature img, .final-cta img, .platform-strip img {
  filter: grayscale(1) contrast(1.02) brightness(.94) !important;
}
.feature, .process-card, .plan, .panel, .faq-list details, .support-card, .metrics {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.feature:hover, .process-card:hover, .plan:hover, .faq-list details:hover {
  border-color: var(--line-strong) !important;
  box-shadow: var(--glow-hover) !important;
  transform: translateY(-3px) !important;
}
.faq-list details[open] { background: var(--surface-2) !important; }
.feature-icon, .ch-ic, .mp-ic, .gav {
  background: var(--surface-2) !important; color: var(--text) !important;
  box-shadow: none !important; border: 1px solid var(--line) !important;
}
.kicker, .dash-rail nav button span { color: var(--text-faint) !important; }
.process-card > span, .metrics b, .hero h1 em {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important; text-shadow: none !important;
}
.btn-grad, .btn-primary {
  background: #fff !important; color: #060606 !important; border: 1px solid #fff !important;
}
.btn-grad:hover, .btn-primary:hover { box-shadow: 0 0 32px rgba(255,255,255,.24) !important; }
.btn-ghost { background: transparent !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
.btn-ghost:hover { border-color: var(--line-strong) !important; background: rgba(255,255,255,.04) !important; }
.tag, .price-badge { background: #fff !important; color: #060606 !important; }
.plan.pop { border-color: var(--line-strong) !important; box-shadow: var(--glow-soft) !important; }
.ck { color: var(--text) !important; }
#dash { background: var(--bg) !important; }
.quick-panel { background: var(--surface-2) !important; }

/* reveal must never leave a section blank if the observer never fires */
.motion-ready .reveal, .kinetic-ready .reveal { opacity: 1 !important; filter: none !important; }
.motion-ready .reveal:not(.in) { transform: translateY(0) !important; }

/* ---- 16b. no invisible text, no color leaks ---- */
.kinetic-word, .kinetic-line span, [class*="kinetic"] { opacity: 1 !important; filter: none !important; transform: none !important; }
.faq-section, .final-cta, .platform-strip, .process-section { background-color: var(--bg-soft) !important; }
#site img:not(.brand-mark):not([src$=".svg"]),
#site video, #site canvas {
  filter: grayscale(1) contrast(1.03) brightness(.92) !important;
}

/* ---- 16c. never skip rendering of sections ---- */
section, .section, .final-cta, .platform-strip { content-visibility: visible !important; contain-intrinsic-size: auto !important; }

/* ---- 16d. neutral borders / tags (no blue-violet tints left) ---- */
.plan, .plan.pop, .plan.featured, .plan.lifetime-plan,
.feature, .process-card, .panel, .faq-list details, .support-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.plan.pop { border-color: var(--line-strong) !important; }
.plan .tag, .plan.lifetime-plan .tag { background: #fff !important; color: #060606 !important; }
.feature-icon { background: var(--surface-2) !important; border: 1px solid var(--line) !important; }
.per-tab.active, .per-tabs .active { background: #fff !important; color: #060606 !important; }

/* ---- 16e. final CTA + support card in pure mono ---- */
.final-cta .wrap { filter: grayscale(1) contrast(1.06) brightness(.9) !important; }
.support-card { background: var(--surface) !important; border: 1px solid var(--line) !important; }
.support-card > span { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
.faq-list summary::after, .faq-list details > summary i { color: var(--text-dim) !important; background: transparent !important; }

/* ============ 17. NAVIGATION & READING COMFORT ============ */
html { scroll-behavior: smooth; }
section[id], .final-cta { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

#site .topnav .nav-links a {
  text-decoration: none !important;
  color: var(--text-dim) !important;
  font-size: 13px; letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
#site .topnav .nav-links a:hover,
#site .topnav .nav-links a[aria-current="true"] { color: var(--text) !important; }
#site .topnav .nav-links a::after { display: none !important; content: none !important; }
.topnav { backdrop-filter: blur(14px); }

/* text hierarchy: one bright level, one dim level, nothing bluish */
.section-intro p, .feature p, .process-card p, .plan li, .plan .pdesc,
.faq-list p, .support-card small, .footer-note, .trust-row { color: var(--text-dim) !important; }
.feature h3, .process-card h3, .plan h3, .faq-list summary { color: var(--text) !important; }
.kicker {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text-faint) !important;
}

/* steps read as a sequence, not as three random cards */
.process-grid { counter-reset: step; }
.process-card { position: relative; padding-top: 26px; }
.process-card > span:first-child {
  font-size: 11px; letter-spacing: .18em; color: var(--text-faint) !important;
}
.process-card .process-line { background: var(--line) !important; }
.process-card .mono-icon { margin: 14px 0 18px; }

/* comfortable focus + hit areas */
a, button, summary { outline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid rgba(255,255,255,.7) !important; border-radius: 6px;
}
.faq-list summary { cursor: pointer; padding-block: 18px; }

/* ============ 18. UX LAYER: mobile CTA, price note, back to top ============ */
.price-note {
  margin-top: 14px; text-align: center;
  font-size: 12px; letter-spacing: .01em; color: var(--text-faint);
}
.period-wrap { display: grid; justify-items: center; }

.mono-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
  display: none; gap: 8px; padding: 8px;
  border: 1px solid var(--line); border-radius: 16px;
  background: rgba(10,10,10,.82); backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  transform: translateY(140%); opacity: 0;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.mono-cta .btn { flex: 1; min-height: 46px; }
.mono-cta.show { transform: none; opacity: 1; }
@media (max-width: 780px) { .mono-cta { display: flex; } }
@media (prefers-reduced-motion: reduce) { .mono-cta { transition: none; } }

.to-top {
  display: inline-block; margin-bottom: 10px;
  font-size: 12px; color: var(--text-faint); text-decoration: none;
  transition: color .2s var(--ease);
}
.to-top:hover { color: var(--text); }

/* FAQ rows read like a list, with a calm open/close affordance */
.faq-list details { border: 1px solid var(--line) !important; }
.faq-list details + details { margin-top: 10px; }
.faq-list summary { list-style: none; display: flex; align-items: center; gap: 14px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; margin-left: auto; font-size: 18px; line-height: 1;
  color: var(--text-faint); transition: transform .3s var(--ease), color .2s;
}
.faq-list details[open] summary::after { transform: rotate(45deg); color: var(--text); }

/* keep the last section clear of the floating bar on phones */
@media (max-width: 780px) { footer { padding-bottom: 92px; } }

/* ============ 19. LAST MILE: product mock, step cards, rhythm ============ */
/* the in-page product mock keeps its structure but loses every colour accent */
.studio-frame { filter: grayscale(1) contrast(1.04); }
.studio-frame .btn, .studio-frame [class*="primary"] { color: #060606 !important; }

/* steps: content starts at the top, no dead space inside the card */
.process-card {
  display: grid; align-content: start; gap: 0;
  min-height: 0 !important; padding: 26px 24px 28px !important;
}
.process-card h3 { margin-top: 4px; font-size: 19px; }
.process-card p { margin-top: 8px; font-size: 14px; line-height: 1.65; }
.process-card .process-line { margin: 18px 0 20px; height: 1px; }
.process-card .mono-icon { margin: 16px 0 0; }

/* one vertical rhythm for every section */
.section, .product-section, .process-section, .pricing-section, .faq-section { padding: 112px 0 !important; }
@media (max-width: 780px) {
  .section, .product-section, .process-section, .pricing-section, .faq-section { padding: 72px 0 !important; }
  .section-intro h2 { font-size: clamp(30px, 8vw, 40px) !important; }
}

/* cards share one hover language across the whole page */
.feature, .process-card, .plan, .faq-list details, .support-card {
  transition: transform .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease) !important;
}

/* ============ 20. ABSOLUTE MONO GUARANTEE ============ */
/* every static block is desaturated at the end of the cascade, so no legacy
   colour can ever leak back into the page (white/black stay untouched) */
#site .section,
#site .mono-hero,
#site .hero,
#site .platform-strip,
#site .final-cta,
#site footer { filter: grayscale(1) !important; }
#studio, .product-section { background: var(--bg-soft) !important; box-shadow: none !important; }
.studio-frame { box-shadow: var(--glow-soft) !important; border: 1px solid var(--line) !important; }

/* ============ 21. TRUE BLACK & WHITE ============ */
:root, html[data-theme="dark"], html[data-theme="light"] {
  --bg: #000; --bg-soft: #000; --surface: #000; --surface-2: #070707;
  --canvas: #000; --canvas-2: #000;
  --text: #ffffff; --text-dim: #b6b6b6; --text-faint: #7d7d7d;
  --line: rgba(255,255,255,.16); --line-soft: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.5);
}
html, body, #site, .section, .product-section, .process-section,
.pricing-section, .faq-section, .platform-strip, footer, .topnav, .mobile-menu {
  background: #000 !important;
  background-image: none !important;
}
#site .wrap::before, #site .wrap::after, #site section::before, #site section::after {
  background-image: none !important;
}

/* surfaces are defined by hairlines, not by fills */
.feature, .process-card, .plan, .faq-list details, .support-card, .panel, .studio-frame, .metrics {
  background: #000 !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.feature:hover, .process-card:hover, .plan:hover, .faq-list details:hover, .support-card:hover {
  border-color: rgba(255,255,255,.42) !important;
}

/* buttons: white on black, inverted on hover */
.btn-grad, .btn-primary, .plan.pop .btn {
  background: #fff !important; color: #000 !important;
  border: 1px solid #fff !important; background-image: none !important;
}
.btn-grad:hover, .btn-primary:hover { background: #d8d8d8 !important; }
.btn-ghost, .btn-outline {
  background: transparent !important; color: #fff !important;
  border: 1px solid var(--line) !important;
}
.btn-ghost:hover, .btn-outline:hover { border-color: #fff !important; background: rgba(255,255,255,.06) !important; }

/* one inverted card carries the popular plan */
#site .plan.pop { background: #fff !important; border-color: #fff !important; }
#site .plan.pop h3, #site .plan.pop .price, #site .plan.pop .price b { color: #000 !important; }
#site .plan.pop .pdesc, #site .plan.pop li, #site .plan.pop .price span { color: #303030 !important; }
#site .plan.pop .tag { background: #000 !important; color: #fff !important; border-color: #000 !important; }
#site .plan.pop .ck { color: #000 !important; border-color: #000 !important; }
#site .plan.pop .btn { background: #000 !important; color: #fff !important; border-color: #000 !important; }
#site .plan.pop .btn:hover { background: #262626 !important; }

/* icons, chips, dividers */
.mono-icon svg, .feature-icon svg { stroke: #fff !important; fill: none !important; }
.ck { color: #fff !important; }
.tag, .kicker, .chip, .pill, .preview-chip {
  background: #000 !important; color: #fff !important; border: 1px solid var(--line) !important;
}
.scroll-progress { background: #fff !important; }
hr, .divider, .process-line { background: var(--line) !important; border-color: var(--line) !important; }

/* media stays fully desaturated with a touch more contrast */
#site img, #site video, #site canvas, .studio-frame { filter: grayscale(1) contrast(1.08) !important; }

/* ============ 22. WHITE TOP BAR PANEL + BLACK LOGO + MONOCHROME GLOBE ============ */
#site .topnav, .topnav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#site .topnav .nav-row, .topnav .nav-row {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18) !important;
}
.topnav .brand, .topnav .brand b, .topnav .brand b span, .topnav .brand span,
#site .topnav .brand, #site .topnav .brand b, #site .topnav .brand b span, #site .topnav .brand span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  font-weight: 850 !important;
}
.topnav .brand-symbol, #site .topnav .brand-symbol,
.brand-symbol.zyn-mark, #site .brand-symbol.zyn-mark {
  background: #090d16 !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 10px !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  overflow: hidden !important;
}
.topnav .brand-symbol svg, #site .topnav .brand-symbol svg,
.zyn-mark svg {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
}
#site .topnav .nav-links a { color: #000000 !important; opacity: 0.72 !important; }
#site .topnav .nav-links a:hover,
#site .topnav .nav-links a[aria-current="true"] { color: #000000 !important; opacity: 1 !important; font-weight: 700 !important; }
#site .topnav .nav-links a::after { display: none !important; content: none !important; }

/* Language Trigger Pill: light pill background, black text, black globe icon */
.topnav .icon-btn, .topnav .lang-trigger, #site .topnav .lang-trigger, #dash .lang-trigger {
  background: #f1f2f5 !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.topnav .icon-btn:hover, .topnav .lang-trigger:hover, #site .topnav .lang-trigger:hover, #dash .lang-trigger:hover {
  background: #e6e8ec !important;
  transform: translateY(-1px) !important;
}
.topnav .lang-trigger .lang-current, #site .topnav .lang-trigger .lang-current {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 800 !important;
  display: inline-block !important;
  opacity: 1 !important;
}
.topnav .lang-trigger .chevron, .topnav .lang-trigger .chevron svg,
#site .topnav .lang-trigger .chevron, #site .topnav .lang-trigger .chevron svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Globe icon strictly monochrome black */
.lang-trigger .cab-ico,
.lang-trigger .cab-ico svg,
.lang-trigger .zm-ico-globe,
.lang-trigger .zm-ico-globe svg,
#site .lang-trigger .cab-ico svg,
#site .lang-trigger .zm-ico-globe svg,
#dash .lang-trigger .cab-ico svg,
#dash .lang-trigger .zm-ico-globe svg,
.language-menu .cab-ico svg,
.language-menu .zm-ico-globe svg {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: none !important;
  display: block !important;
  opacity: 1 !important;
}
.lang-trigger .cab-ico svg circle,
.lang-trigger .cab-ico svg path,
.lang-trigger .cab-ico svg line,
.lang-trigger .zm-ico-globe svg circle,
.lang-trigger .zm-ico-globe svg path,
.lang-trigger .zm-ico-globe svg line {
  stroke: #000000 !important;
  fill: none !important;
}

/* Hamburger menu button only on mobile */
@media (min-width: 901px) {
  .topnav .burger, .topnav .menu-button, #site .topnav .menu-button, #site .menu-button {
    display: none !important;
  }
}
@media (max-width: 900px) {
  .topnav .burger, .topnav .menu-button, #site .topnav .menu-button, #site .menu-button {
    display: inline-flex !important;
    background: #f1f2f5 !important;
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
    border-radius: 10px !important;
  }
  .topnav .burger i, .topnav .burger span, .topnav .menu-button i, #site .topnav .menu-button i {
    background: #000000 !important;
  }
}

/* language dropdown: paper white, zero blue */
.lang-dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  box-shadow: 0 26px 60px -18px rgba(0,0,0,.75) !important;
  border-radius: 14px !important; padding: 6px !important;
}
.lang-dropdown .lang-option {
  background: transparent !important; color: #111 !important;
  border: 0 !important; border-radius: 10px !important;
}
.lang-dropdown .lang-option:hover { background: rgba(0,0,0,.07) !important; }
.lang-dropdown .lang-option.active { background: #000 !important; color: #fff !important; }
.lang-dropdown .lang-option > span:first-child,
.lang-dropdown .lang-option b, .lang-dropdown .lang-option i {
  background: #111 !important; color: #fff !important;
  border: 0 !important; border-radius: 6px !important; font-style: normal !important;
}
.lang-dropdown .lang-option.active > span:first-child { background: #fff !important; color: #000 !important; }

/* mobile menu follows the light bar */
.mobile-menu { background: #f2f2f0 !important; border-bottom: 1px solid rgba(0,0,0,.14) !important; }
.mobile-menu a, .mobile-menu button { color: #000 !important; }
.mobile-menu .btn-grad, .mobile-menu .btn-primary { background: #000 !important; color: #fff !important; }

/* ============ 23. DEPTH: LAYERED SECTIONS AND RAISED CARDS ============ */
/* alternating planes so the page reads as stacked layers, still pure grayscale */
#site .section { position: relative; }
#site .product-section, #site .pricing-section { background: #070707 !important; }
#site .process-section, #site .faq-section { background: #000 !important; }
#site .section + .section::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
#site .section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.045), transparent 60%);
}
#site .mono-hero { position: relative; }

/* cards sit above the plane: soft top highlight + deep drop shadow */
.feature, .process-card, .plan, .faq-list details, .support-card, .panel, .studio-frame, .metrics {
  background: linear-gradient(180deg, #151515 0%, #0b0b0b 62%, #080808 100%) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.6),
    0 28px 60px -26px rgba(0,0,0,1) !important;
}
.feature:hover, .process-card:hover, .plan:hover, .support-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 4px 8px rgba(0,0,0,.65),
    0 44px 80px -28px rgba(0,0,0,1) !important;
}
.faq-list details:hover { border-color: rgba(255,255,255,.3) !important; }

/* the popular plan floats highest */
#site .plan.pop {
  background: linear-gradient(180deg, #ffffff 0%, #ededea 100%) !important;
  border-color: #fff !important;
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 50px 90px -30px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.5) !important;
  z-index: 2;
}
#site .plan.pop:hover { transform: translateY(-14px) scale(1.02); }

/* icon chips and buttons get the same physicality */
.mono-icon, .feature-icon {
  background: linear-gradient(180deg, #1b1b1b, #0d0d0d) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 22px -12px #000 !important;
}
#site .btn-primary, #site .btn-grad {
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 16px 34px -16px rgba(255,255,255,.45) !important;
}
#site .btn-primary:active, #site .btn-grad:active { transform: translateY(1px); }

/* the studio mock reads as a real device on the page */
.studio-frame {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 60px 120px -40px rgba(0,0,0,1) !important;
  border-radius: 18px !important;
}
@media (prefers-reduced-motion: reduce) {
  .feature:hover, .process-card:hover, .plan:hover, .support-card:hover { transform: none; }
}

/* ============ 24. LIGHT THEME (mirror of the black & white system) ============ */
html[data-theme="light"] {
  --bg: #ffffff; --bg-soft: #f5f5f3; --surface: #ffffff; --surface-2: #f0f0ee;
  --canvas: #ffffff; --canvas-2: #f5f5f3;
  --text: #0a0a0a; --text-dim: #4d4d4d; --text-faint: #808080;
  --line: rgba(0,0,0,.14); --line-soft: rgba(0,0,0,.07); --line-strong: rgba(0,0,0,.55);
  color-scheme: light;
}
html[data-theme="light"] body,
html[data-theme="light"] #site,
html[data-theme="light"] #site .section,
html[data-theme="light"] #site .process-section,
html[data-theme="light"] #site .faq-section,
html[data-theme="light"] .platform-strip,
html[data-theme="light"] footer { background: #ffffff !important; }
html[data-theme="light"] #site .product-section,
html[data-theme="light"] #site .pricing-section { background: #f5f5f3 !important; }
html[data-theme="light"] #site .section::after {
  background: radial-gradient(120% 60% at 50% 0%, rgba(0,0,0,.05), transparent 60%);
}
html[data-theme="light"] #site .section + .section::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.18), transparent);
}

/* raised paper cards */
html[data-theme="light"] .feature,
html[data-theme="light"] .process-card,
html[data-theme="light"] .plan,
html[data-theme="light"] .faq-list details,
html[data-theme="light"] .support-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .metrics {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f5 100%) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,.06), 0 26px 50px -28px rgba(0,0,0,.55) !important;
}
html[data-theme="light"] .feature:hover,
html[data-theme="light"] .process-card:hover,
html[data-theme="light"] .plan:hover,
html[data-theme="light"] .support-card:hover { border-color: rgba(0,0,0,.4) !important; }

/* the popular plan flips to black */
html[data-theme="light"] #site .plan.pop {
  background: linear-gradient(180deg, #131313 0%, #000 100%) !important;
  border-color: #000 !important;
  box-shadow: 0 50px 90px -34px rgba(0,0,0,.7) !important;
}
html[data-theme="light"] #site .plan.pop h3,
html[data-theme="light"] #site .plan.pop .price,
html[data-theme="light"] #site .plan.pop .price b { color: #fff !important; }
html[data-theme="light"] #site .plan.pop .pdesc,
html[data-theme="light"] #site .plan.pop li,
html[data-theme="light"] #site .plan.pop .price span { color: #c9c9c9 !important; }
html[data-theme="light"] #site .plan.pop .ck { color: #fff !important; }
html[data-theme="light"] #site .plan.pop .tag { background: #fff !important; color: #000 !important; border-color: #fff !important; }
html[data-theme="light"] #site .plan.pop .btn { background: #fff !important; color: #000 !important; border-color: #fff !important; }

/* controls, chips, icons */
html[data-theme="light"] .btn-grad,
html[data-theme="light"] .btn-primary {
  background: #000 !important; color: #fff !important; border-color: #000 !important;
  box-shadow: 0 16px 30px -18px rgba(0,0,0,.8) !important;
}
html[data-theme="light"] .btn-grad:hover, html[data-theme="light"] .btn-primary:hover { background: #262626 !important; }
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .btn-quiet {
  background: transparent !important; color: #000 !important; border: 1px solid rgba(0,0,0,.2) !important;
}
html[data-theme="light"] .tag,
html[data-theme="light"] .kicker,
html[data-theme="light"] .chip,
html[data-theme="light"] .pill,
html[data-theme="light"] .preview-chip,
html[data-theme="light"] .mono-label {
  background: #ffffff !important; color: #111 !important; border: 1px solid rgba(0,0,0,.16) !important;
}
html[data-theme="light"] .mono-icon,
html[data-theme="light"] .feature-icon {
  background: linear-gradient(180deg, #ffffff, #efefec) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  box-shadow: inset 0 1px 0 #fff, 0 10px 20px -14px rgba(0,0,0,.6) !important;
}
html[data-theme="light"] .mono-icon svg,
html[data-theme="light"] .feature-icon svg { stroke: #000 !important; }
html[data-theme="light"] .ck { color: #000 !important; }
html[data-theme="light"] .scroll-progress { background: #000 !important; }
html[data-theme="light"] .faq-list summary::after { color: #666 !important; }
html[data-theme="light"] .faq-list details[open] summary::after { color: #000 !important; }
html[data-theme="light"] a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] summary:focus-visible { outline-color: rgba(0,0,0,.7) !important; }

/* top bar and floating bar on a white page */
html[data-theme="light"] #site .topnav, html[data-theme="light"] .topnav {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(14px) !important;
}
html[data-theme="light"] .mono-cta {
  background: rgba(255,255,255,.94) !important; border-color: rgba(0,0,0,.14) !important;
  box-shadow: 0 18px 50px -22px rgba(0,0,0,.6) !important;
}

/* the dark product mock is inverted so it reads as a light UI */
html[data-theme="light"] .studio-frame,
html[data-theme="light"] #site video,
html[data-theme="light"] #site img { filter: grayscale(1) invert(1) contrast(1.02) !important; }

/* ============ 25. THEME SWITCH IS BACK ============ */
.topnav .theme-toggle, .dash-actions .theme-toggle {
  display: inline-grid !important;
  place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.topnav .theme-toggle:hover { transform: translateY(-1px); }
.topnav .theme-toggle .theme-icon { pointer-events: none; }
html[data-theme="light"] .topnav .theme-toggle {
  background: #000 !important; color: #fff !important; border-color: #000 !important;
}
html[data-theme="dark"] .topnav .theme-toggle {
  background: #fff !important; color: #000 !important; border-color: rgba(0,0,0,.16) !important;
}
@media (max-width: 390px) { .topnav .theme-toggle { display: inline-grid !important; } }

/* ============ 26. LIGHT THEME TYPOGRAPHY ============ */
html[data-theme="light"] #site h1,
html[data-theme="light"] #site h2,
html[data-theme="light"] #site h3,
html[data-theme="light"] #site h4,
html[data-theme="light"] #site b,
html[data-theme="light"] #site strong,
html[data-theme="light"] #site .faq-list summary,
html[data-theme="light"] #site .price,
html[data-theme="light"] #site .price b,
html[data-theme="light"] footer b { color: #0a0a0a !important; }
html[data-theme="light"] #site p,
html[data-theme="light"] #site li,
html[data-theme="light"] #site small,
html[data-theme="light"] #site .pdesc,
html[data-theme="light"] #site .price span,
html[data-theme="light"] footer a,
html[data-theme="light"] footer p { color: #4d4d4d !important; }
html[data-theme="light"] #site .kicker,
html[data-theme="light"] #site .to-top,
html[data-theme="light"] #site .price-note,
html[data-theme="light"] #site .process-card > span:first-child { color: #7a7a7a !important; }
html[data-theme="light"] footer a:hover { color: #000 !important; }
html[data-theme="light"] body { color: #0a0a0a !important; }

/* gradient text fallbacks that were forced white in the dark system */
html[data-theme="light"] #site [class*="grad-text"],
html[data-theme="light"] #site .kinetic-word,
html[data-theme="light"] #site .kinetic-line {
  color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important;
}

/* ============ 27. THE REAL NAV BAR IS .nav-row ============ */
#site .topnav .nav-row, .topnav .nav-row, .topnav.scrolled .nav-row {
  background: #f2f2f0 !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.9) !important;
  backdrop-filter: none !important;
}
#site .topnav .nav-row .brand,
#site .topnav .nav-row .brand b,
#site .topnav .nav-row .brand b span { color: #000 !important; }
#site .topnav .nav-row .brand-symbol i { background: #000 !important; }
#site .topnav .nav-row .nav-links a { color: rgba(0,0,0,.6) !important; }
#site .topnav .nav-row .nav-links a:hover,
#site .topnav .nav-row .nav-links a[aria-current="true"] { color: #000 !important; }
#site .topnav .nav-row .nav-links a::after { display: none !important; content: none !important; }
#site .topnav .nav-row .icon-btn,
#site .topnav .nav-row .lang-trigger,
#site .topnav .nav-row .burger,
#site .topnav .nav-row .menu-button {
  background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#site .topnav .nav-row .icon-btn:hover,
#site .topnav .nav-row .lang-trigger:hover,
#site .topnav .nav-row .burger:hover,
#site .topnav .nav-row .menu-button:hover {
  background: #f4f4f4 !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
#site .topnav .nav-row .burger i, #site .topnav .nav-row .burger span, #site .topnav .nav-row .menu-button i { background: #000000 !important; }
#site .topnav .nav-row .btn-quiet, #site .topnav .nav-row .btn-ghost {
  background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#site .topnav .nav-row .btn-quiet:hover, #site .topnav .nav-row .btn-ghost:hover {
  background: #f4f4f4 !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
#site .topnav .nav-row .btn-primary, #site .topnav .nav-row .btn-grad {
  background: #000000 !important; color: #ffffff !important; border: 1px solid #000000 !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#site .topnav .nav-row .btn-primary:hover, #site .topnav .nav-row .btn-grad:hover {
  background: #222222 !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
#site .topnav .nav-row .chevron { color: #000000 !important; }
html[data-theme="light"] #site .topnav .nav-row {
  background: #ffffff !important;
  box-shadow: 0 16px 40px -26px rgba(0,0,0,.6) !important;
}

/* hero headline: solid ink, never a washed-out gradient */
#site .mono-copy h1, #site .mono-copy h1 * {
  background: none !important; -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html[data-theme="light"] #site .mono-copy h1,
html[data-theme="light"] #site .mono-copy h1 *,
html[data-theme="light"] #site h2, html[data-theme="light"] #site h2 * {
  color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important;
}

/* ============ 28. WORDMARK ON THE LIGHT BAR ============ */
#site .topnav .nav-row .brand b,
#site .topnav .nav-row .brand b span,
html[data-theme="light"] #site .topnav .nav-row .brand b,
html[data-theme="light"] #site .topnav .nav-row .brand b span {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}
#site .topnav .nav-row .brand-symbol {
  background: #000 !important; border-radius: 8px !important;
}
#site .topnav .nav-row .brand-symbol i { background: #fff !important; }

/* ============ 29. PURE WHITE FLOATING TOPBAR ============ */
#site .topnav .nav-row,
.topnav .nav-row,
.topnav.scrolled .nav-row,
html[data-theme="light"] #site .topnav .nav-row,
html[data-theme="light"] .topnav.scrolled .nav-row {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
}
#site .topnav .nav-row .brand b,
#site .topnav .nav-row .brand b span,
html[data-theme="light"] #site .topnav .nav-row .brand b,
html[data-theme="light"] #site .topnav .nav-row .brand b span {
  color: #000000 !important; -webkit-text-fill-color: #000000 !important;
}
html[data-theme="light"] #site .topnav .nav-row .brand-symbol { background: #fff !important; }
html[data-theme="light"] #site .topnav .nav-row .brand-symbol i { background: #000 !important; }
html[data-theme="light"] #site .topnav .nav-row .nav-links a { color: rgba(255,255,255,.66) !important; }
html[data-theme="light"] #site .topnav .nav-row .nav-links a:hover,
html[data-theme="light"] #site .topnav .nav-row .nav-links a[aria-current="true"] { color: #fff !important; }
html[data-theme="light"] #site .topnav .nav-row .nav-links a::after { background: #fff !important; }
html[data-theme="light"] #site .topnav .nav-row .icon-btn,
html[data-theme="light"] #site .topnav .nav-row .lang-trigger,
html[data-theme="light"] #site .topnav .nav-row .burger {
  background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important;
}
html[data-theme="light"] #site .topnav .nav-row .theme-toggle { background: #fff !important; color: #000 !important; border-color: #fff !important; }
html[data-theme="light"] #site .topnav .nav-row .btn-quiet { color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; }
html[data-theme="light"] #site .topnav .nav-row .btn-primary,
html[data-theme="light"] #site .topnav .nav-row .btn-grad { background: #fff !important; color: #000 !important; border-color: #fff !important; }
html[data-theme="light"] #site .topnav .nav-row .chevron,
html[data-theme="light"] #site .topnav .nav-row .lang-current { color: #fff !important; }

/* ============ 30. LANGUAGE MENU, PROPERLY BUILT ============ */
#site .lang-dropdown {
  background: #f4f4f2 !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow: 0 28px 60px -22px rgba(0,0,0,.85) !important;
  backdrop-filter: none !important;
  min-width: 208px !important;
}
#site .lang-dropdown .lang-option {
  display: grid !important;
  grid-template-columns: 28px 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-align: left !important;
  transition: background .16s var(--ease) !important;
}
#site .lang-dropdown .lang-option > span {
  display: grid !important; place-items: center !important;
  width: 28px !important; height: 22px !important;
  background: #0a0a0a !important; color: #fff !important;
  border-radius: 7px !important; border: 0 !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .06em !important;
}
#site .lang-dropdown .lang-option b {
  background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important;
  color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important;
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: -.01em !important;
}
#site .lang-dropdown .lang-option i {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: rgba(0,0,0,.36) !important; font-style: normal !important;
  font-size: 10px !important; letter-spacing: .1em !important;
}
#site .lang-dropdown .lang-option:hover { background: rgba(0,0,0,.06) !important; }
#site .lang-dropdown .lang-option.active,
#site .lang-dropdown .lang-option[aria-checked="true"] { background: rgba(0,0,0,.1) !important; }
html[data-theme="light"] #site .lang-dropdown {
  background: #101010 !important; border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 28px 60px -24px rgba(0,0,0,.6) !important;
}
html[data-theme="light"] #site .lang-dropdown .lang-option > span { background: #fff !important; color: #000 !important; }
html[data-theme="light"] #site .lang-dropdown .lang-option b { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html[data-theme="light"] #site .lang-dropdown .lang-option i { color: rgba(255,255,255,.4) !important; }
html[data-theme="light"] #site .lang-dropdown .lang-option:hover { background: rgba(255,255,255,.1) !important; }
html[data-theme="light"] #site .lang-dropdown .lang-option.active,
html[data-theme="light"] #site .lang-dropdown .lang-option[aria-checked="true"] { background: rgba(255,255,255,.16) !important; }

/* ============ 31. ANIMATED LINE ICONS ON CARDS ============ */
#site .mono-icon, #site .feature-icon, #site .process-card .mono-icon {
  display: grid !important; place-items: center !important;
  width: 46px !important; height: 46px !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #1c1c1c, #0c0c0c) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 26px -16px #000, inset 0 1px 0 rgba(255,255,255,.14) !important;
  color: #fff !important; opacity: 1 !important; overflow: visible !important;
  transition: transform .25s var(--ease), border-color .25s var(--ease) !important;
}
#site .mono-icon svg, #site .feature-icon svg {
  width: 23px !important; height: 23px !important; display: block !important;
  opacity: 1 !important; overflow: visible !important;
}
#site .mono-icon svg *, #site .feature-icon svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
}
#site .mono-icon [data-spin], #site .feature-icon [data-spin] {
  transform-origin: 12px 12px; animation: spin 8s linear infinite !important;
}
#site .mono-icon [data-dash], #site .feature-icon [data-dash] {
  stroke-dasharray: 4 6 !important; animation: draw 3.4s linear infinite !important;
}
#site .mono-icon [data-blink], #site .feature-icon [data-blink] {
  animation: blink 2.2s ease-in-out infinite !important;
}
#site .mono-icon [data-rise], #site .feature-icon [data-rise] {
  animation: rise 3s ease-in-out infinite !important;
}
#site .feature:hover .mono-icon, #site .process-card:hover .mono-icon {
  transform: translateY(-3px) !important; border-color: rgba(255,255,255,.4) !important;
}
html[data-theme="light"] #site .mono-icon,
html[data-theme="light"] #site .feature-icon {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  box-shadow: 0 12px 24px -18px rgba(0,0,0,.55), inset 0 1px 0 #fff !important;
  color: #0a0a0a !important;
}
html[data-theme="light"] #site .feature:hover .mono-icon { border-color: rgba(0,0,0,.42) !important; }

/* ============ 32. PROVIDER MARQUEE ============ */
#site .platform-strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
#site .platform-strip .wrap {
  position: relative !important; overflow: hidden !important;
  width: 100% !important; max-width: 100% !important; padding: 0 !important;
  min-height: 62px !important; display: flex !important; align-items: center !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) !important;
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) !important;
}
#site .marquee-track {
  display: flex !important; width: max-content !important; flex: none !important;
  animation: marquee 46s linear infinite !important;
}
#site .platform-strip:hover .marquee-track { animation-play-state: paused !important; }
#site .marquee-group {
  display: flex !important; align-items: center !important;
  gap: 44px !important; padding-right: 44px !important; flex: none !important;
}
#site .platform-strip small {
  color: var(--text-faint) !important; font-size: 9px !important;
  letter-spacing: .3em !important; text-transform: uppercase !important; white-space: nowrap !important;
}
#site .platform-strip span {
  position: relative !important; white-space: nowrap !important;
  color: var(--text-dim) !important; font-size: 12.5px !important;
  font-weight: 500 !important; letter-spacing: .04em !important;
}
#site .platform-strip span::before {
  content: "" !important; position: absolute !important; left: -24px !important; top: 50% !important;
  width: 4px !important; height: 4px !important; margin-top: -2px !important;
  border-radius: 50% !important; background: var(--line-strong) !important; font-size: 0 !important;
}
html[data-theme="light"] #site .platform-strip span { color: #4d4d4d !important; }
html[data-theme="light"] #site .platform-strip small { color: #8a8a8a !important; }
@media (prefers-reduced-motion: reduce) { #site .marquee-track { animation: none !important; } }

/* ============ 33. PROFESSIONAL FINISH ============ */
/* no smeared halo behind the headline */
#site h1, #site h1 *, #site .mono-copy h1, #site .mono-copy h1 * {
  text-shadow: none !important; filter: none !important;
}

/* ---- Hero CTA Buttons ---- */
#site .mono-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

#site .mono-actions a[href="#studio"],
#site .mono-actions .hero-product-btn,
#site .mono-actions .btn-ghost {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#site .mono-actions a[href="#studio"]:hover,
#site .mono-actions .hero-product-btn:hover,
#site .mono-actions .btn-ghost:hover {
  background: #f4f4f4 !important;
  border-color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* ---- Trust Row: High-Contrast, Clean Elevated Chips ---- */
#site .mono-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 14px !important;
  margin-top: 24px !important;
}

#site .mono-trust .trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}

#site .mono-trust .trust-item:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  transform: translateY(-1px) !important;
}

#site .mono-trust .trust-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

#site .mono-trust .trust-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
}

html[data-theme="light"] #site .mono-trust .trust-item {
  background: rgba(10, 10, 10, 0.05) !important;
  border-color: rgba(10, 10, 10, 0.15) !important;
  color: #111111 !important;
}

html[data-theme="light"] #site .mono-trust .trust-icon {
  color: #111111 !important;
}

/* typography discipline */
#site h2 { letter-spacing: -.045em !important; text-wrap: balance; }
#site h3 { letter-spacing: -.02em !important; }
#site p { max-width: 68ch; text-wrap: pretty; }
#site .price, #site .price b, #site [data-preview-price], #site [data-preview-total] {
  font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important;
}
#site .feature-no, #site .process-card > span:first-child {
  font-variant-numeric: tabular-nums; letter-spacing: .12em;
}

/* controls: consistent height, honest pressed state */
#site .btn { transition: transform .16s var(--ease), background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease) !important; }
#site .btn:active { transform: translateY(1px) scale(.995) !important; }
#site .btn-lg { min-height: 50px !important; padding: 0 26px !important; display: inline-flex !important; align-items: center !important; }
#site .stepper input { font-variant-numeric: tabular-nums !important; }

/* focus that is visible but not loud */
#site a:focus-visible, #site button:focus-visible, #site input:focus-visible,
#site select:focus-visible, #site textarea:focus-visible, #site summary:focus-visible {
  outline: 2px solid currentColor !important; outline-offset: 3px !important; border-radius: 8px;
}
::selection { background: #fff; color: #000; }
html[data-theme="light"] ::selection { background: #000; color: #fff; }

/* footer: quieter, better aligned */
#site footer { border-top: 1px solid var(--line-soft) !important; }
#site footer a { text-decoration: none !important; transition: color .2s var(--ease) !important; }
#site .to-top {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-size: 12.5px !important; letter-spacing: .02em !important;
}

/* scrollbar in the product mock and page */
#site * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
#site *::-webkit-scrollbar { width: 8px; height: 8px; }
#site *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
#site *::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 720px) {
  #site .mono-trust { gap: 8px 16px; font-size: 12px; margin-top: 18px; }
}

/* ============ 34. NO STRAY UNDERLINES ============ */
#site .topnav a, #site .nav-links a, #site .btn, #site .mono-cta a,
#site .to-top, #site .lang-option, #site footer a, #site .brand {
  text-decoration: none !important;
}
#site .nav-links a:hover, #site footer a:hover { text-decoration: none !important; }

/* ============ 35. ANIMATED BRAND MARK ============ */
#site .brand-symbol.zyn-mark, .brand-symbol.zyn-mark {
  background: none !important; border: 0 !important; box-shadow: none !important;
  width: 30px !important; height: 30px !important; flex: 0 0 30px !important;
  display: inline-grid !important; place-items: center !important;
  border-radius: 0 !important; overflow: visible !important;
  transition: transform .4s cubic-bezier(.22,.61,.36,1) !important;
}
.brand-symbol.zyn-mark.small { width: 22px !important; height: 22px !important; flex-basis: 22px !important; }
.brand-symbol.zyn-mark.modal-logo { width: 44px !important; height: 44px !important; flex-basis: 44px !important; margin-bottom: 10px !important; }
.brand-symbol.zyn-mark svg { width: 100% !important; height: 100% !important; display: block !important; overflow: visible !important; }
.zyn-mark svg * { fill: none; stroke: currentColor; }
.zyn-mark .zm-ring {
  stroke-width: 1.5; opacity: .32; stroke-dasharray: 34 16;
  transform-origin: 20px 20px; animation: zm-spin 18s linear infinite;
}
.zyn-mark .zm-ring2 {
  stroke-width: 1; opacity: .16; stroke-dasharray: 2 7;
  transform-origin: 20px 20px; animation: zm-spin 12s linear infinite reverse;
}
.zyn-mark .zm-z {
  stroke-width: 3.2; stroke-linecap: square; stroke-linejoin: miter;
  stroke-dasharray: 64; stroke-dashoffset: 64;
  animation: zm-draw 1.6s cubic-bezier(.22,.61,.36,1) .1s forwards;
}
.zyn-mark .zm-orbit { transform-origin: 20px 20px; animation: zm-spin 7s linear infinite; }
.zyn-mark .zm-dot { fill: currentColor; stroke: none; }
a.brand:hover .zyn-mark { transform: rotate(-6deg) scale(1.04) !important; }
a.brand:hover .zyn-mark .zm-z { animation: zm-draw .9s cubic-bezier(.22,.61,.36,1) forwards; }
a.brand:hover .zyn-mark .zm-orbit { animation-duration: 2.4s; }
a.brand:hover .zyn-mark .zm-ring { opacity: .62; }
@keyframes zm-spin { to { transform: rotate(360deg); } }
@keyframes zm-draw { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }

/* the mark inherits ink from its context */
#site .topnav .nav-row .brand-symbol.zyn-mark { color: #000 !important; background: none !important; }
html[data-theme="light"] #site .topnav .nav-row .brand-symbol.zyn-mark { color: #fff !important; background: none !important; }
#site footer .brand-symbol.zyn-mark { color: #fff !important; }
html[data-theme="light"] #site footer .brand-symbol.zyn-mark { color: #0a0a0a !important; }
#site .brand-symbol.zyn-mark.modal-logo { color: #fff !important; }
html[data-theme="light"] #site .brand-symbol.zyn-mark.modal-logo { color: #0a0a0a !important; }
#site .mini-brand .brand-symbol.zyn-mark { color: #fff !important; }
html[data-theme="light"] #site .mini-brand .brand-symbol.zyn-mark { color: #0a0a0a !important; }
@media (prefers-reduced-motion: reduce) {
  .zyn-mark svg * { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ============ 36. MORE ANIMATED ICONS ============ */
:root {
  --ico-q: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H12l-5 4v-4H4V5Z'/%3E%3C/svg%3E");
  --ico-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 4v16'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5 5L20 6'/%3E%3C/svg%3E");
}

#site .plan-icon { margin: 0 0 14px !important; }
#site .cta-icon { margin: 0 auto 18px !important; }
#site .support-icon {
  width: 40px !important; height: 40px !important; flex: 0 0 40px !important;
  border-radius: 11px !important;
}
#site .support-icon svg { width: 20px !important; height: 20px !important; }
#site .upload-icon.mono-icon {
  width: 42px !important; height: 42px !important; border-radius: 12px !important;
  font-size: 0 !important; flex: 0 0 42px !important;
}
#site .upload-icon.mono-icon svg { width: 21px !important; height: 21px !important; }
#site .plan.pop .plan-icon,
html[data-theme="light"] #site .plan.pop .plan-icon {
  background: #fff !important; color: #0a0a0a !important;
  border-color: rgba(255,255,255,.55) !important;
}
#site .plan:hover .plan-icon, #site .support-card:hover .support-icon,
#site .studio-upload:hover .upload-icon.mono-icon { transform: translateY(-3px) !important; }

/* hero trust row: hairline icons, no chip */
#site .mono-trust {
  display: flex !important; flex-wrap: wrap !important;
  gap: 8px 22px !important; align-items: center !important;
}
#site .mono-trust > span[data-i18n] { display: inline-flex !important; align-items: center !important; }
#site .trust-icon {
  width: 15px !important; height: 15px !important; flex: 0 0 15px !important;
  display: inline-grid !important; place-items: center !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; margin-right: 7px !important;
  color: inherit !important; opacity: .82 !important;
}
#site .trust-icon svg { width: 15px !important; height: 15px !important; display: block !important; overflow: visible !important; }
#site .trust-icon svg * {
  fill: none !important; stroke: currentColor !important; stroke-width: 1.7 !important;
  stroke-linecap: round !important; stroke-linejoin: round !important;
}
#site .trust-icon [data-dash] { stroke-dasharray: 4 6 !important; animation: draw 3.6s linear infinite !important; }
#site .trust-icon [data-spin] { transform-origin: 12px 12px; animation: spin 9s linear infinite !important; }
#site .trust-icon [data-blink] { animation: blink 2.4s ease-in-out infinite !important; }
#site .trust-icon [data-rise] { animation: rise 3s ease-in-out infinite !important; }

/* every eyebrow gets a live pulse */
#site .kicker::before, #site .mono-label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 8px; vertical-align: 1px;
  animation: pulse 2.4s ease-in-out infinite;
}

/* FAQ rows carry a breathing question glyph */
#site .faq-list summary::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px; margin-right: 12px;
  background: currentColor; opacity: .45;
  -webkit-mask: var(--ico-q) center/contain no-repeat;
  mask: var(--ico-q) center/contain no-repeat;
  animation: breathe 4.5s ease-in-out infinite;
}
#site .faq-list details[open] summary::before { opacity: .95; }

/* footer column headers */
#site footer nav > b::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px;
  background: currentColor; opacity: .4;
  -webkit-mask: var(--ico-dot) center/contain no-repeat;
  mask: var(--ico-dot) center/contain no-repeat;
  animation: spin 14s linear infinite;
}

/* plan checkmarks draw themselves in */
#site .plan li .ck {
  font-size: 0 !important; background: none !important; border: 0 !important;
  width: 15px !important; height: 15px !important; flex: 0 0 15px !important;
  display: inline-grid !important; place-items: center !important;
}
#site .plan li .ck::before {
  content: ""; display: block; width: 15px; height: 15px;
  background: currentColor; opacity: .85;
  -webkit-mask: var(--ico-check) center/contain no-repeat;
  mask: var(--ico-check) center/contain no-repeat;
  animation: ck-draw .75s cubic-bezier(.22,.61,.36,1) both;
}
#site .plan li:nth-child(2) .ck::before { animation-delay: .12s; }
#site .plan li:nth-child(3) .ck::before { animation-delay: .24s; }
#site .plan li:nth-child(4) .ck::before { animation-delay: .36s; }
@keyframes ck-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  #site .kicker::before, #site .mono-label::before,
  #site .faq-list summary::before, #site footer nav > b::before,
  #site .plan li .ck::before, #site .trust-icon svg * { animation: none !important; }
}

/* ============ 37. LIGHT THEME READABILITY ============ */
html[data-theme="light"] #site {
  --text-dim: #4c4d51 !important;
  --muted: #4c4d51 !important;
  --text-soft: #4c4d51 !important;
}
html[data-theme="light"] #site input::placeholder,
html[data-theme="light"] #site textarea::placeholder { color: #6c6d71 !important; }

/* the studio mock becomes a light device instead of washed-out grey */
html[data-theme="light"] #site .studio-frame { filter: grayscale(1) contrast(1.02) !important; background: #fff !important; }
html[data-theme="light"] #site .studio-frame,
html[data-theme="light"] #site .studio-shell,
html[data-theme="light"] #site .studio-workspace,
html[data-theme="light"] #site .studio-nav,
html[data-theme="light"] #site .studio-main,
html[data-theme="light"] #site .studio-preview,
html[data-theme="light"] #site .studio-screen,
html[data-theme="light"] #site .studio-form,
html[data-theme="light"] #site .studio-output,
html[data-theme="light"] #site .studio-tabs,
html[data-theme="light"] #site .studio-topbar,
html[data-theme="light"] #site .studio-upload,
html[data-theme="light"] #site .brief-field textarea,
html[data-theme="light"] #site .studio-options select,
html[data-theme="light"] #site .stepper,
html[data-theme="light"] #site .stepper input {
  background: #fff !important;
  color: #0a0a0a !important;
  border-color: rgba(0,0,0,.14) !important;
}
html[data-theme="light"] #site .studio-frame h2,
html[data-theme="light"] #site .studio-frame h3,
html[data-theme="light"] #site .studio-frame h4,
html[data-theme="light"] #site .studio-frame b,
html[data-theme="light"] #site .studio-frame strong,
html[data-theme="light"] #site .studio-frame input,
html[data-theme="light"] #site .studio-frame textarea,
html[data-theme="light"] #site .studio-frame select,
html[data-theme="light"] #site .studio-frame option,
html[data-theme="light"] #site .studio-frame .price,
html[data-theme="light"] #site .studio-frame .stepper input { color: #0a0a0a !important; }
html[data-theme="light"] #site .studio-frame p,
html[data-theme="light"] #site .studio-frame li,
html[data-theme="light"] #site .studio-frame span,
html[data-theme="light"] #site .studio-frame label,
html[data-theme="light"] #site .studio-frame label > span,
html[data-theme="light"] #site .studio-frame .pdesc,
html[data-theme="light"] #site .studio-frame .studio-tab,
html[data-theme="light"] #site .studio-frame .saved span { color: #45464a !important; }
html[data-theme="light"] #site .studio-frame small,
html[data-theme="light"] #site .studio-frame .kicker,
html[data-theme="light"] #site .studio-frame .studio-hint,
html[data-theme="light"] #site .studio-frame .hint { color: #5b5c60 !important; }

/* controls keep real contrast inside the mock */
html[data-theme="light"] #site .studio-frame .btn-primary,
html[data-theme="light"] #site .studio-frame .btn-grad,
html[data-theme="light"] #site .studio-frame [class*="primary"] {
  background: #0a0a0a !important; border: 1px solid #0a0a0a !important;
}
html[data-theme="light"] #site .studio-frame .btn-primary,
html[data-theme="light"] #site .studio-frame .btn-primary *,
html[data-theme="light"] #site .studio-frame .btn-grad,
html[data-theme="light"] #site .studio-frame .btn-grad * { color: #fff !important; }
html[data-theme="light"] #site .studio-frame .btn-quiet,
html[data-theme="light"] #site .studio-frame .btn-ghost,
html[data-theme="light"] #site .studio-frame .stepper button {
  background: #fff !important; color: #0a0a0a !important;
  border: 1px solid rgba(0,0,0,.18) !important;
}
html[data-theme="light"] #site .studio-nav button.active { background: #0a0a0a !important; border-color: #0a0a0a !important; }
html[data-theme="light"] #site .studio-nav button.active,
html[data-theme="light"] #site .studio-nav button.active b,
html[data-theme="light"] #site .studio-nav button.active * { color: #fff !important; }
html[data-theme="light"] #site .studio-frame .saved i { background: #0a0a0a !important; }

/* the phone stays a dark device on purpose — it is the product shot */
html[data-theme="light"] #site .studio-frame .phone-preview {
  background: #0a0a0a !important; border-color: rgba(0,0,0,.3) !important;
}
html[data-theme="light"] #site .studio-frame .phone-preview,
html[data-theme="light"] #site .studio-frame .phone-preview *,
html[data-theme="light"] #site .studio-frame .phone-preview strong,
html[data-theme="light"] #site .studio-frame .phone-preview em { color: #fff !important; }
html[data-theme="light"] #site .studio-frame .phone-preview .preview-art i { background: rgba(255,255,255,.55) !important; }

/* body copy and small print across the page */
html[data-theme="light"] #site .faq-list p,
html[data-theme="light"] #site .plan li,
html[data-theme="light"] #site .pdesc,
html[data-theme="light"] #site .section-intro p,
html[data-theme="light"] #site .process-card p,
html[data-theme="light"] #site .feature p,
html[data-theme="light"] #site .mono-copy p { color: #3f4044 !important; }
html[data-theme="light"] #site .mono-trust,
html[data-theme="light"] #site .mono-trust span,
html[data-theme="light"] #site .price-note,
html[data-theme="light"] #site footer p,
html[data-theme="light"] #site footer a { color: #4c4d51 !important; }
html[data-theme="light"] #site .kicker,
html[data-theme="light"] #site .mono-label { color: #2c2d31 !important; }
html[data-theme="light"] #site .metrics b,
html[data-theme="light"] #site .metrics strong { color: #0a0a0a !important; }
html[data-theme="light"] #site .metrics small,
html[data-theme="light"] #site .metrics span { color: #4c4d51 !important; }

/* ============ 38. PRICE LEGIBILITY IN BOTH THEMES ============ */
/* prices used clipped gradients and vanished on their own cards */
#site .plan .price,
#site .plan .price b,
#site .plan .price span,
#site .plan [data-preview-price] {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
  font-variant-numeric: tabular-nums !important;
}
#site .plan .price, #site .plan .price b, #site .plan [data-preview-price] { color: #fff !important; }
#site .plan .price span { color: rgba(255,255,255,.62) !important; }
#site .plan.pop .price, #site .plan.pop .price b, #site .plan.pop [data-preview-price] { color: #0a0a0a !important; }
#site .plan.pop .price span { color: rgba(10,10,10,.6) !important; }

html[data-theme="light"] #site .plan .price,
html[data-theme="light"] #site .plan .price b,
html[data-theme="light"] #site .plan [data-preview-price] { color: #0a0a0a !important; }
html[data-theme="light"] #site .plan .price span { color: rgba(10,10,10,.58) !important; }
html[data-theme="light"] #site .plan.pop .price,
html[data-theme="light"] #site .plan.pop .price b,
html[data-theme="light"] #site .plan.pop [data-preview-price] { color: #fff !important; }
html[data-theme="light"] #site .plan.pop .price span { color: rgba(255,255,255,.66) !important; }

/* plan tags stay readable on their own card */
#site .plan .tag { background: #fff !important; color: #0a0a0a !important; border: 0 !important; }
#site .plan.pop .tag { background: #0a0a0a !important; color: #fff !important; }
html[data-theme="light"] #site .plan .tag { background: #0a0a0a !important; color: #fff !important; }
html[data-theme="light"] #site .plan.pop .tag { background: #fff !important; color: #0a0a0a !important; }

/* per-period totals and plan copy */
#site .plan .pdesc, #site .plan [data-preview-total] { color: rgba(255,255,255,.62) !important; }
#site .plan.pop .pdesc, #site .plan.pop [data-preview-total] { color: rgba(10,10,10,.62) !important; }
html[data-theme="light"] #site .plan .pdesc,
html[data-theme="light"] #site .plan [data-preview-total] { color: #4c4d51 !important; }
html[data-theme="light"] #site .plan.pop .pdesc,
html[data-theme="light"] #site .plan.pop [data-preview-total] { color: rgba(255,255,255,.7) !important; }
#site .plan li { color: rgba(255,255,255,.82) !important; }
#site .plan.pop li { color: rgba(10,10,10,.84) !important; }
html[data-theme="light"] #site .plan li { color: #3f4044 !important; }
html[data-theme="light"] #site .plan.pop li { color: rgba(255,255,255,.86) !important; }
#site .plan h3 { color: #fff !important; }
#site .plan.pop h3 { color: #0a0a0a !important; }
html[data-theme="light"] #site .plan h3 { color: #0a0a0a !important; }
html[data-theme="light"] #site .plan.pop h3 { color: #fff !important; }

/* ============ 39. LIGHT THEME: LAST DARK POCKETS ============ */
/* leftover dark panels inside the light layout */
html[data-theme="light"] #site .render-row,
html[data-theme="light"] #site .studio-frame .render-row,
html[data-theme="light"] #site .queue-row,
html[data-theme="light"] #site .studio-frame .panel,
html[data-theme="light"] #site .studio-frame .card {
  background: #f7f7f5 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}
html[data-theme="light"] #site .render-row b,
html[data-theme="light"] #site .render-row strong { color: #0a0a0a !important; }
html[data-theme="light"] #site .render-row small,
html[data-theme="light"] #site .render-row span { color: #4c4d51 !important; }

/* billing period switch */
html[data-theme="light"] #site .per-tabs {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.14) !important;
}
html[data-theme="light"] #site .per-tab { color: #4c4d51 !important; background: transparent !important; }
html[data-theme="light"] #site .per-tab.active {
  background: #0a0a0a !important; color: #fff !important; border-color: #0a0a0a !important;
}
#site .per-tabs { border: 1px solid rgba(255,255,255,.16) !important; }
#site .per-tab { color: rgba(255,255,255,.66) !important; }
#site .per-tab.active { background: #fff !important; color: #0a0a0a !important; }

/* small print that was too pale on white */
html[data-theme="light"] #site .preview-head i,
html[data-theme="light"] #site .marquee-group small,
html[data-theme="light"] #site .feature-no,
html[data-theme="light"] #site .process-card > span:first-child { color: #5b5c60 !important; }
html[data-theme="light"] #site .to-top { color: #3f4044 !important; }
html[data-theme="light"] #site .marquee-group span { color: #34353a !important; }

/* ============ 40. BRAND MARK v2 — S EMBLEM (animated, mono) ============ */
.zyn-mark { transition: transform .45s cubic-bezier(.22,.61,.36,1) !important; }
.zyn-mark svg { overflow: visible !important; }
.zyn-mark .zm-ring,
.zyn-mark .zm-arc,
.zyn-mark .zm-ring2,
.zyn-mark .zm-s,
.zyn-mark .zm-glint,
.zyn-mark .zm-spark {
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform-box: view-box;
  transform-origin: 20px 20px;
}
.zyn-mark .zm-ring {
  stroke-width: 1.5 !important; opacity: .3 !important;
  stroke-dasharray: none !important; animation: none !important;
}
.zyn-mark .zm-arc {
  stroke-width: 1.8 !important; opacity: .95 !important;
  stroke-dasharray: 22 76 !important;
  animation: zm-sweep 5.2s linear infinite !important;
}
.zyn-mark .zm-ring2 {
  stroke-width: 1 !important; opacity: .2 !important;
  stroke-dasharray: 1.5 5.5 !important;
  animation: zm-sweep 26s linear infinite reverse !important;
}
.zyn-mark .zm-s {
  stroke-width: 3.2 !important; opacity: .86 !important;
  stroke-dasharray: 34 !important;
  animation: zm-ink 1.5s cubic-bezier(.65,0,.35,1) both !important;
}
.zyn-mark .zm-glint {
  stroke-width: 3.5 !important;
  stroke-dasharray: 5 60 !important; opacity: 0;
  animation: zm-shine 3.8s ease-in-out 1.2s infinite !important;
}
.zyn-mark .zm-orbit {
  transform-box: view-box; transform-origin: 20px 20px;
  animation: zm-sweep 7.5s linear infinite !important;
}
.zyn-mark .zm-dot { fill: currentColor !important; stroke: none !important; opacity: .9 !important; }
.zyn-mark .zm-spark {
  stroke-width: 1.3 !important; opacity: 0;
  transform-origin: 31.4px 9.3px;
  animation: zm-twinkle 3.8s ease-in-out .7s infinite !important;
}
@keyframes zm-sweep { to { transform: rotate(360deg); } }
@keyframes zm-ink { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@keyframes zm-shine {
  0%   { stroke-dashoffset: 42; opacity: 0; }
  10%  { opacity: 1; }
  52%  { stroke-dashoffset: -28; opacity: .95; }
  66%, 100% { stroke-dashoffset: -28; opacity: 0; }
}
@keyframes zm-twinkle {
  0%, 70%, 100% { opacity: 0; transform: scale(.55); }
  80% { opacity: .95; transform: scale(1.15); }
}
.brand:hover .zyn-mark { transform: rotate(-7deg) scale(1.06) !important; }
.brand:hover .zyn-mark .zm-s { animation: zm-ink .85s cubic-bezier(.65,0,.35,1) both !important; }
.brand:hover .zyn-mark .zm-arc { animation-duration: 1.7s !important; }
.brand:hover .zyn-mark .zm-orbit { animation-duration: 2.6s !important; }
@media (prefers-reduced-motion: reduce) {
  .zyn-mark .zm-arc, .zyn-mark .zm-ring2, .zyn-mark .zm-s,
  .zyn-mark .zm-glint, .zyn-mark .zm-orbit, .zyn-mark .zm-spark {
    animation: none !important; stroke-dashoffset: 0 !important; opacity: .85;
  }
  .zyn-mark .zm-glint, .zyn-mark .zm-spark { opacity: 0; }
}

/* ============ 41. EVERY ICON MOVES ============ */
:root {
  --ico-moon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.5%2014.8A8.6%208.6%200%201%201%209.4%203.6a6.9%206.9%200%200%200%2011.1%2011.2Z'/%3E%3C/svg%3E");
  --ico-sun: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.1'/%3E%3Cpath%20d='M12%202v2.6M12%2019.4V22M2%2012h2.6M19.4%2012H22M5.1%205.1l1.9%201.9M17%2017l1.9%201.9M18.9%205.1L17%207M7%2017l-1.9%201.9'/%3E%3C/svg%3E");
  --ico-globe: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M3%2012h18M12%203c2.7%202.8%202.7%2015.4%200%2018M12%203c-2.7%202.8-2.7%2015.4%200%2018'/%3E%3C/svg%3E");
  --ico-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012h14M12.5%206l6%206-6%206'/%3E%3C/svg%3E");
}

/* every stroke inside every icon draws itself and erases continuously */
#site .mono-icon svg > *,
#site .feature-icon svg > *,
#site .plan-icon svg > *,
#site .cta-icon svg > *,
#site .support-icon svg > *,
#site .upload-icon svg > *,
#site .trust-icon svg > * {
  stroke-dasharray: 68 !important;
  animation: zmStrokeFlow 2.6s ease-in-out infinite !important;
  animation-delay: 0s !important;
  animation-play-state: running !important;
  filter: none !important;
}

/* icon chips breathe simultaneously - 100% Synchronized */
#site .mono-icon {
  animation: ico-bob 4.2s ease-in-out infinite !important;
  animation-delay: 0s !important;
  animation-play-state: running !important;
}
#site .feature:nth-child(n) .mono-icon,
#site .process-card:nth-child(n) .mono-icon { animation-delay: 0s !important; }

/* theme switch: animated sun / moon */
#site .topnav .theme-toggle,
#site .dash-actions .theme-toggle {
  font-size: 0 !important;
  display: inline-grid !important; place-items: center !important;
}
#site .topnav .theme-toggle .theme-icon,
#site .dash-actions .theme-toggle .theme-icon { font-size: 0 !important; }
#site .topnav .theme-toggle::before,
#site .dash-actions .theme-toggle::before {
  content: "" !important; display: block !important;
  width: 17px !important; height: 17px !important;
  background: currentColor !important;
  -webkit-mask: var(--ico-moon) center / contain no-repeat;
          mask: var(--ico-moon) center / contain no-repeat;
  animation: ico-tilt 5s ease-in-out infinite !important;
}
html[data-theme="light"] #site .topnav .theme-toggle::before,
html[data-theme="light"] #site .dash-actions .theme-toggle::before {
  -webkit-mask: var(--ico-sun) center / contain no-repeat;
          mask: var(--ico-sun) center / contain no-repeat;
  animation: ico-spin-slow 11s linear infinite !important;
}
#site .theme-toggle:hover::before { animation-duration: 1.6s !important; }
@keyframes ico-tilt {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50%      { transform: rotate(10deg) scale(1.08); }
}
@keyframes ico-spin-slow { to { transform: rotate(360deg); } }

/* language switch: slowly spinning globe + chevron that flips when open */
#site .topnav .lang-trigger {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
}
#site .topnav .lang-trigger::before {
  content: "" !important; flex: none !important;
  width: 14px !important; height: 14px !important;
  background: currentColor !important;
  -webkit-mask: var(--ico-globe) center / contain no-repeat;
          mask: var(--ico-globe) center / contain no-repeat;
  animation: ico-spin-slow 16s linear infinite !important;
}
#site .topnav .lang-trigger:hover::before { animation-duration: 3.4s !important; }
#site .topnav .lang-trigger .chevron {
  transition: transform .3s cubic-bezier(.22,.61,.36,1) !important;
}
#site .topnav .lang-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg) !important; }
#site .lang-dropdown .lang-option i { animation: ico-fade 3s ease-in-out infinite !important; }

/* FAQ rows: pulsing bubble, breathing toggle */
#site .faq-list summary::before { animation: ico-pulse 2.9s ease-in-out infinite !important; }
#site .faq-list details:nth-child(2n) summary::before { animation-delay: .5s !important; }
#site .faq-list details:nth-child(3n) summary::before { animation-delay: 1s !important; }
#site .faq-list summary::after { animation: ico-fade 2.6s ease-in-out infinite !important; }
#site .faq-list details[open] summary::after { animation: none !important; }
@keyframes ico-pulse {
  0%, 100% { transform: scale(1); opacity: .5; }
  50%      { transform: scale(1.14); opacity: 1; }
}
@keyframes ico-fade {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* section kickers keep their live dot; footer headings get one too */
#site .kicker::before,
#site .mono-label::before { animation: ico-pulse 2.4s ease-in-out infinite !important; }
#site footer nav > b::before { animation: ico-fade 3.2s ease-in-out infinite !important; }

/* primary actions get a nudging arrow */
#site .mono-actions .btn::after,
#site .final-cta .btn-primary::after,
#site .topnav .nav-row .btn-primary::after {
  content: "" !important; flex: none !important;
  width: 15px !important; height: 15px !important; margin-left: 8px !important;
  background: currentColor !important;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
          mask: var(--ico-arrow) center / contain no-repeat;
  animation: ico-nudge 2s ease-in-out infinite !important;
}
#site .mono-actions .btn,
#site .final-cta .btn-primary,
#site .topnav .nav-row .btn-primary {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
#site .topnav .nav-row .btn-primary::after { width: 13px !important; height: 13px !important; margin-left: 6px !important; }
#site .mono-actions .btn:hover::after,
#site .final-cta .btn-primary:hover::after,
#site .topnav .nav-row .btn-primary:hover::after { animation-duration: .9s !important; }
@keyframes ico-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  #site .mono-icon, #site .mono-icon svg > *, #site .trust-icon svg > *,
  #site .theme-toggle::before, #site .lang-trigger::before,
  #site .faq-list summary::before, #site .faq-list summary::after,
  #site .kicker::before, #site .mono-label::before, #site footer nav > b::before,
  #site .mono-actions .btn::after, #site .final-cta .btn-primary::after,
  #site .topnav .nav-row .btn-primary::after {
    animation: none !important; stroke-dashoffset: 0 !important; opacity: 1;
  }
}

/* ============ 42. CONTRAST OUTLINES FOR EVERY BLOCK ============ */
/* dark theme: light hairlines. light theme: dark hairlines. */
#site .feature,
#site .process-card,
#site .plan,
#site .faq-list details,
#site .support-card,
#site .studio-frame,
#site .studio-upload,
#site .brief-field,
#site .per-tabs,
#site .stepper,
#site .saved,
#site .render-row,
#site .preview-chip,
#site .metric,
#site .final-cta,
#site .lang-dropdown,
#site .mono-icon {
  border: 1px solid rgba(255, 255, 255, .22) !important;
}
#site .feature:hover,
#site .process-card:hover,
#site .plan:hover,
#site .faq-list details:hover,
#site .support-card:hover {
  border-color: rgba(255, 255, 255, .46) !important;
}
#site .faq-list details[open] { border-color: rgba(255, 255, 255, .5) !important; }

html[data-theme="light"] #site .feature,
html[data-theme="light"] #site .process-card,
html[data-theme="light"] #site .plan,
html[data-theme="light"] #site .faq-list details,
html[data-theme="light"] #site .support-card,
html[data-theme="light"] #site .studio-frame,
html[data-theme="light"] #site .studio-upload,
html[data-theme="light"] #site .brief-field,
html[data-theme="light"] #site .per-tabs,
html[data-theme="light"] #site .stepper,
html[data-theme="light"] #site .saved,
html[data-theme="light"] #site .metric,
html[data-theme="light"] #site .final-cta,
html[data-theme="light"] #site .lang-dropdown,
html[data-theme="light"] #site .mono-icon {
  border: 1px solid rgba(10, 10, 10, .18) !important;
}
html[data-theme="light"] #site .feature:hover,
html[data-theme="light"] #site .process-card:hover,
html[data-theme="light"] #site .plan:hover,
html[data-theme="light"] #site .faq-list details:hover,
html[data-theme="light"] #site .support-card:hover {
  border-color: rgba(10, 10, 10, .38) !important;
}
html[data-theme="light"] #site .faq-list details[open] { border-color: rgba(10, 10, 10, .42) !important; }

/* inverted surfaces need the opposite hairline */
#site .plan.pop { border-color: rgba(10, 10, 10, .2) !important; }
html[data-theme="light"] #site .plan.pop { border-color: rgba(255, 255, 255, .3) !important; }
#site .phone-preview,
html[data-theme="light"] #site .phone-preview { border: 1px solid rgba(255, 255, 255, .26) !important; }
#site .plan.pop .mono-icon,
#site .plan.pop .plan-icon { border-color: rgba(10, 10, 10, .24) !important; }
html[data-theme="light"] #site .plan.pop .mono-icon,
html[data-theme="light"] #site .plan.pop .plan-icon { border-color: rgba(255, 255, 255, .34) !important; }
html[data-theme="light"] #site .studio-frame .mono-icon,
html[data-theme="light"] #site .studio-frame .upload-icon { border-color: rgba(10, 10, 10, .2) !important; }

/* section rhythm: a readable divider between blocks */
#site .platform-strip { border-top: 1px solid rgba(255, 255, 255, .16) !important; border-bottom: 1px solid rgba(255, 255, 255, .16) !important; }
html[data-theme="light"] #site .platform-strip { border-top: 1px solid rgba(10, 10, 10, .14) !important; border-bottom: 1px solid rgba(10, 10, 10, .14) !important; }

/* seamless provider marquee: four groups, shift exactly half the track */
#site .marquee-track { animation: marquee-mono 64s linear infinite !important; }
#site .platform-strip:hover .marquee-track { animation-play-state: paused !important; }
@keyframes marquee-mono { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { #site .marquee-track { animation: none !important; } }

/* ============ 43. BRAND MARK v2.1 — bolder, symmetric S ============ */
.zyn-mark .zm-s { stroke-width: 3.4 !important; stroke-dasharray: 42 !important; opacity: .9 !important; }
.zyn-mark .zm-glint { stroke-width: 3.6 !important; stroke-dasharray: 6 70 !important; }
.zyn-mark .zm-ring { stroke-width: 1.6 !important; opacity: .34 !important; }
.zyn-mark .zm-arc { stroke-width: 1.9 !important; }
@keyframes zm-ink { from { stroke-dashoffset: 42; } to { stroke-dashoffset: 0; } }
@keyframes zm-shine {
  0%   { stroke-dashoffset: 50; opacity: 0; }
  10%  { opacity: 1; }
  52%  { stroke-dashoffset: -34; opacity: .95; }
  66%, 100% { stroke-dashoffset: -34; opacity: 0; }
}
.brand:hover .zyn-mark .zm-s { animation: zm-ink .9s cubic-bezier(.65,0,.35,1) both !important; }

/* ============ 44. THEME ICON SHOWS THE TARGET THEME ============ */
#site .topnav .theme-toggle::before,
#site .dash-actions .theme-toggle::before {
  -webkit-mask: var(--ico-sun) center / contain no-repeat;
          mask: var(--ico-sun) center / contain no-repeat;
  animation: ico-spin-slow 11s linear infinite !important;
}
html[data-theme="light"] #site .topnav .theme-toggle::before,
html[data-theme="light"] #site .dash-actions .theme-toggle::before {
  -webkit-mask: var(--ico-moon) center / contain no-repeat;
          mask: var(--ico-moon) center / contain no-repeat;
  animation: ico-tilt 5s ease-in-out infinite !important;
}

/* ============ 45. MOBILE: LAYOUT, ORDER, PERFORMANCE ============ */
@media (max-width: 760px) {
  /* --- final CTA: no more stretched planet photo, clean mono panel --- */
  #site .final-cta { padding: 54px 0 66px !important; }
  #site .final-cta .wrap {
    min-height: 0 !important;
    padding: 46px 20px 44px !important;
    border-radius: 22px !important;
    background-image: radial-gradient(130% 100% at 50% 0%, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 62%) !important;
    background-color: #070707 !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center top !important;
    box-shadow: none !important;
    filter: none !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
  }
  html[data-theme="light"] #site .final-cta .wrap {
    background-image: radial-gradient(130% 100% at 50% 0%, rgba(0, 0, 0, .07), rgba(0, 0, 0, 0) 62%) !important;
    background-color: #fff !important;
    border: 1px solid rgba(10, 10, 10, .18) !important;
  }
  #site .final-cta .wrap::before,
  #site .final-cta .wrap::after { display: none !important; }
  #site .final-cta h2 { font-size: 31px !important; text-shadow: none !important; line-height: 1.06 !important; }
  #site .final-cta p { font-size: 15px !important; }
  #site .final-cta .btn-primary { width: 100% !important; }

  /* --- trust row: icon + label pairs on a grid, nothing crawls apart --- */
  /* --- trust row: clean flex list of trust-items on mobile --- */
  #site .mono-trust {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-top: 20px !important;
  }
  #site .mono-trust .trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  }
  #site .mono-trust .trust-icon {
    width: 16px !important; height: 16px !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: none !important; box-shadow: none !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  #site .mono-trust .trust-icon svg { width: 15px !important; height: 15px !important; display: block !important; }

  /* --- FAQ: the support card sits under the questions on mobile --- */
  #site .faq-layout { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  #site .faq-layout .section-intro { display: contents !important; }
  #site .faq-layout .section-intro .kicker { order: 1 !important; }
  #site .faq-layout .section-intro h2 { order: 2 !important; margin: 12px 0 10px !important; }
  #site .faq-layout .section-intro > p { order: 3 !important; margin: 0 0 22px !important; }
  #site .faq-layout .faq-list { order: 4 !important; }
  #site .faq-layout .support-card { order: 5 !important; margin: 20px 0 0 !important; width: 100% !important; max-width: none !important; }

  /* --- performance: only paint what is on screen --- */
  #site section,
  #site .section,
  #site .final-cta,
  #site .platform-strip,
  #site footer {
    content-visibility: auto !important;
    contain-intrinsic-size: auto 760px !important;
  }
  /* no live blur layers on mobile GPUs */
  #site .nav-row, #site .mobile-menu, #site .studio-frame, #site .modal, #site .overlay,
  #site .mono-cta, #site .platform-strip, #site .platform-strip .wrap,
  #site .mobile-conversion-bar, #site .lang-dropdown, #site .toast {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  /* heavy filters and glows off; grayscale stays only on real media */
  #site .studio-frame, #site .final-cta .wrap, #site .feature, #site .plan,
  #site .process-card, #site .faq-list details, #site .support-card {
    filter: none !important;
    box-shadow: none !important;
  }
  #site img, #site video, #site canvas { filter: grayscale(1) !important; }
  html[data-theme="light"] #site img { filter: grayscale(1) invert(1) contrast(1.02) !important; }
  /* fewer, calmer moving parts */
  #site .marquee-track { animation-duration: 44s !important; will-change: transform !important; }
  #site .mono-orbit::before, #site .mono-orbit::after { animation-duration: 26s !important; }
  #site .mono-icon { animation-duration: 8s !important; }
  #site .mono-icon svg > * { animation-duration: 6s !important; }
  #site .zyn-mark .zm-ring2, #site .zyn-mark .zm-spark { display: none !important; }
  /* smoother touch scrolling */
  #site, #site * { -webkit-tap-highlight-color: transparent; }
  #site .btn, #site .icon-btn, #site .lang-trigger, #site .theme-toggle,
  #site .per-tab, #site .faq-list summary { touch-action: manipulation !important; }
  #site .feature:hover, #site .process-card:hover, #site .plan:hover,
  #site .faq-list details:hover, #site .studio-frame:hover { transform: none !important; }
}

/* very small phones: tighter type, single-column actions */
@media (max-width: 430px) {
  #site .mono-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  #site .mono-actions .btn { width: 100% !important; }
  #site .final-cta h2 { font-size: 28px !important; }
  #site .mono-trust > span:not(.trust-icon) { font-size: 12.5px !important; }
}

/* ============ 46. DESKTOP NAV: ONE ICON SIZE, NOTHING OVERLAPS ============ */
/* legacy .btn::after is an absolutely positioned shine layer — my arrow must flow inline */
#site .mono-actions .btn::after,
#site .final-cta .btn-primary::after,
#site .topnav .nav-row .btn-primary::after {
  position: static !important;
  inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  border: 0 !important; border-radius: 0 !important;
  background-image: none !important;
  background-color: currentColor !important;
  opacity: 1 !important;
  box-shadow: none !important;
  width: 15px !important; height: 15px !important;
  flex: none !important;
}
#site .topnav .nav-row .btn-primary::after { width: 14px !important; height: 14px !important; margin-left: 7px !important; }

/* real flex bar: brand | links | actions, no absolute centering that collides */
#site .topnav .nav-row {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 18px !important;
}
#site .topnav .nav-row .nav-links {
  position: static !important; left: auto !important; transform: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex: 1 1 auto !important; min-width: 0 !important; gap: 4px !important;
}
#site .topnav .nav-row .nav-links a {
  padding: 8px 12px !important; white-space: nowrap !important;
  font-size: 13.5px !important; text-decoration: none !important;
}
#site .topnav .nav-row .nav-actions {
  flex: none !important; display: flex !important; align-items: center !important; gap: 8px !important;
}

/* every control in the bar is the same height, every icon the same box */
#site .topnav .nav-row .theme-toggle,
#site .topnav .nav-row .burger,
#site .topnav .nav-row .icon-btn {
  width: 40px !important; height: 40px !important;
  padding: 0 !important; border-radius: 12px !important;
  display: inline-grid !important; place-items: center !important;
}
#site .topnav .nav-row .lang-trigger {
  width: auto !important; height: 40px !important;
  padding: 0 11px !important; border-radius: 12px !important;
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  font-size: 12.5px !important; letter-spacing: .06em !important;
}
#site .topnav .nav-row .theme-toggle::before,
#site .topnav .nav-row .lang-trigger::before {
  width: 16px !important; height: 16px !important;
}
#site .topnav .nav-row .lang-trigger .lang-current { font-size: 12.5px !important; font-weight: 600 !important; }
#site .topnav .nav-row .lang-trigger .chevron { font-size: 11px !important; opacity: .55 !important; line-height: 1 !important; }
#site .topnav .nav-row .btn {
  height: 40px !important; padding: 0 16px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 13.5px !important;
}
#site .topnav .nav-row .btn-primary { padding: 0 18px !important; }

/* tighter bar on smaller laptops so the links never touch the controls */
@media (max-width: 1220px) {
  #site .topnav .nav-row .nav-links a { padding: 8px 8px !important; font-size: 13px !important; }
  #site .topnav .nav-row .nav-links { gap: 2px !important; }
  #site .topnav .nav-row .btn-primary::after { display: none !important; }
}
@media (max-width: 1080px) {
  #site .topnav .nav-row .lang-trigger::before { display: none !important; }
  #site .topnav .nav-row .lang-trigger { padding: 0 9px !important; }
  #site .topnav .nav-row .btn { padding: 0 13px !important; font-size: 13px !important; }
}
#site .topnav .nav-row .theme-toggle,
#site .topnav .nav-row .burger,
#site .topnav .nav-row .icon-btn,
#site .topnav .nav-row .lang-trigger,
#site .topnav .nav-row .btn { box-sizing: border-box !important; }
#site .topnav .nav-row .theme-toggle, #site .topnav .nav-row .burger { min-width: 40px !important; max-width: 40px !important; }

/* ============ 47. NO ARROWS ON BUTTONS, ALIGNED ICONS, SANE MOBILE BAR ============ */
/* every pseudo-icon on buttons is gone — arrows in text (↓) stay, they are real text */
#site .btn::after,
#site .mono-actions .btn::after,
#site .final-cta .btn-primary::after,
#site .topnav .nav-row .btn-primary::after,
#site .mobile-conversion-bar .btn::after,
#site .support-card::after {
  content: none !important;
  display: none !important;
}

/* trust row: kill the legacy grey bullet inside icon chips, center the glyph */
#site .mono-trust .trust-icon::before,
#site .mono-trust .trust-icon::after,
#site .mono-trust > span::before {
  content: none !important;
  display: none !important;
}
#site .mono-trust .trust-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 18px !important; height: 18px !important;
  padding: 0 !important; border: 0 !important; background: none !important;
  align-self: center !important;
}
#site .mono-trust .trust-icon svg {
  width: 16px !important; height: 16px !important;
  display: block !important;
}
#site .mono-trust { align-items: center !important; }
#site .mono-trust > span:not(.trust-icon) { align-self: center !important; }

/* ---- Authenticated / Guest User Visibility ---- */
body.is-logged-in #site .desktop-auth,
html.is-logged-in #site .desktop-auth,
body.is-logged-in #site #mobileAuthBlock,
html.is-logged-in #site #mobileAuthBlock {
  display: none !important;
}

body.is-logged-in #site #userNavPill,
html.is-logged-in #site #userNavPill,
body.is-logged-in #site .user-nav-btn,
html.is-logged-in #site .user-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  width: auto !important;
  min-width: unset !important;
  padding: 0 14px 0 6px !important;
  gap: 8px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  color: #000000 !important;
  cursor: pointer !important;
  user-select: none !important;
  font-family: inherit !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

body.is-logged-in #site #userNavPill:hover,
html.is-logged-in #site #userNavPill:hover,
body.is-logged-in #site .user-nav-btn:hover,
html.is-logged-in #site .user-nav-btn:hover {
  background: #f4f4f4 !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

#site .user-nav-label {
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  color: #000000 !important;
}

#site .user-nav-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 8px !important;
  background: #000000 !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

#site .user-nav-ico svg {
  width: 15px !important;
  height: 15px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2.2 !important;
}

body.is-logged-in #site #mobileNavProfileBtn,
html.is-logged-in #site #mobileNavProfileBtn,
body.is-logged-in #site .mobile-prof-btn,
html.is-logged-in #site .mobile-prof-btn {
  display: flex !important;
}

body:not(.is-logged-in) #site #userNavPill,
html:not(.is-logged-in) #site #userNavPill,
body:not(.is-logged-in) #site .user-nav-btn,
html:not(.is-logged-in) #site .user-nav-btn,
body:not(.is-logged-in) #site #mobileNavProfileBtn,
html:not(.is-logged-in) #site #mobileNavProfileBtn,
body:not(.is-logged-in) #site .mobile-prof-btn,
html:not(.is-logged-in) #site .mobile-prof-btn {
  display: none !important;
}

body:not(.is-logged-in) #site .desktop-auth {
  display: inline-flex !important;
}

/* ---- mobile top bar: brand + language + theme + burger, nothing else ---- */
@media (max-width: 900px) {
  #site .topnav .nav-row {
    gap: 10px !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  #site .topnav .nav-row .nav-links { display: none !important; }
  #site .topnav .nav-row .desktop-auth { display: none !important; }
  #site .topnav .nav-row .nav-actions {
    flex: 0 0 auto !important; width: auto !important;
    margin-left: auto !important; gap: 6px !important;
    justify-content: flex-end !important;
  }
  #site .topnav .nav-row .menu-button {
    display: inline-grid !important; place-items: center !important;
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  #site .topnav .nav-row .lang-trigger { padding: 0 9px !important; }
  #site .topnav .nav-row .lang-trigger::before { display: none !important; }
  #site .topnav .nav-row .brand b { font-size: 15px !important; letter-spacing: .12em !important; }
  #site .topnav .nav-row .brand { gap: 9px !important; }
  #site .topnav .nav-row .brand .zyn-mark { width: 26px !important; height: 26px !important; }
}

/* ---- bottom conversion bar: opaque, two clean lines, one button ---- */
#site .mobile-conversion-bar {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 10px 9px 14px !important;
  background-color: #0b0b0b !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 60%) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 14px 30px -14px rgba(0,0,0,.9) !important;
  isolation: isolate !important;
}
#site .mobile-conversion-bar > div { min-width: 0 !important; }
#site .mobile-conversion-bar small {
  display: block !important;
  font-size: 10.5px !important; line-height: 1.25 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.62) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
#site .mobile-conversion-bar strong {
  display: block !important;
  font-size: 15px !important; line-height: 1.2 !important;
  color: #fff !important; white-space: nowrap !important;
}
#site .mobile-conversion-bar .btn {
  flex: none !important; height: 38px !important; padding: 0 16px !important;
  font-size: 13px !important; white-space: nowrap !important;
}
html[data-theme="light"] #site .mobile-conversion-bar {
  background-color: #fff !important;
  background-image: linear-gradient(180deg, #fff, #f3f3f1) !important;
  border-color: rgba(10,10,10,.2) !important;
  box-shadow: 0 1px 0 #fff inset, 0 12px 26px -16px rgba(10,10,10,.4) !important;
}
html[data-theme="light"] #site .mobile-conversion-bar small { color: rgba(10,10,10,.6) !important; }
html[data-theme="light"] #site .mobile-conversion-bar strong { color: #0a0a0a !important; }

/* ============ 48. VOLUME: LAYERED SURFACES, LIFTED BUTTONS ============ */
:root { --vol-ease: cubic-bezier(.22,.61,.36,1); }

/* --- dark theme surfaces --- */
#site .feature,
#site .process-card,
#site .plan,
#site .faq-list details,
#site .support-card,
#site .studio-frame,
#site .mono-cta,
#site .preview-chip,
#site .platform-strip,
#site .final-cta .wrap {
  background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 46%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.11) inset,
    0 -1px 0 rgba(0,0,0,.5) inset,
    0 2px 5px rgba(0,0,0,.45),
    0 22px 44px -24px rgba(0,0,0,.9) !important;
  transition: transform .3s var(--vol-ease), box-shadow .3s var(--vol-ease), border-color .3s var(--vol-ease) !important;
}
#site .feature:hover,
#site .process-card:hover,
#site .plan:hover,
#site .support-card:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 3px 8px rgba(0,0,0,.5),
    0 30px 56px -26px rgba(0,0,0,.95) !important;
}
#site .plan.pop {
  background-image: linear-gradient(180deg, #ffffff, #ececea) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 10px rgba(0,0,0,.5),
    0 34px 60px -26px rgba(0,0,0,.95) !important;
}
#site .phone-preview {
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 30px 60px -26px rgba(0,0,0,.95),
    0 4px 12px rgba(0,0,0,.5) !important;
}
#site .topnav .nav-row {
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 10px 30px -16px rgba(0,0,0,.55) !important;
}

/* --- light theme surfaces --- */
html[data-theme="light"] #site .feature,
html[data-theme="light"] #site .process-card,
html[data-theme="light"] #site .plan,
html[data-theme="light"] #site .faq-list details,
html[data-theme="light"] #site .support-card,
html[data-theme="light"] #site .studio-frame,
html[data-theme="light"] #site .mono-cta,
html[data-theme="light"] #site .preview-chip,
html[data-theme="light"] #site .platform-strip {
  background-image: linear-gradient(180deg, #ffffff, #f3f3f1) !important;
  box-shadow:
    0 1px 0 #fff inset,
    0 1px 2px rgba(10,10,10,.07),
    0 16px 34px -22px rgba(10,10,10,.4) !important;
}
html[data-theme="light"] #site .feature:hover,
html[data-theme="light"] #site .process-card:hover,
html[data-theme="light"] #site .plan:hover,
html[data-theme="light"] #site .support-card:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 1px 0 #fff inset,
    0 2px 4px rgba(10,10,10,.1),
    0 24px 44px -22px rgba(10,10,10,.48) !important;
}
html[data-theme="light"] #site .plan.pop {
  background-image: linear-gradient(180deg, #1b1b1b, #0a0a0a) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 3px 8px rgba(10,10,10,.28),
    0 30px 54px -22px rgba(10,10,10,.55) !important;
}

/* --- buttons get real physicality --- */
#site .btn {
  transition: transform .18s var(--vol-ease), box-shadow .18s var(--vol-ease), background-color .2s var(--vol-ease) !important;
}
#site .btn-primary {
  background-image: linear-gradient(180deg, #2a2a2a, #0a0a0a 62%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 1px 2px rgba(0,0,0,.4),
    0 12px 24px -12px rgba(0,0,0,.75) !important;
}
#site .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 2px 4px rgba(0,0,0,.42),
    0 18px 32px -12px rgba(0,0,0,.85) !important;
}
#site .btn-primary:active { transform: translateY(0) !important; box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 2px 6px rgba(0,0,0,.5) !important; }
#site .btn-quiet,
#site .icon-btn,
#site .theme-toggle,
#site .lang-trigger,
#site .menu-button {
  background-image: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 70%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.13) inset,
    0 1px 2px rgba(0,0,0,.32),
    0 8px 18px -12px rgba(0,0,0,.6) !important;
}
#site .btn-quiet:hover, #site .icon-btn:hover, #site .theme-toggle:hover, #site .lang-trigger:hover, #site .menu-button:hover {
  transform: translateY(-2px) !important;
}
#site .btn-quiet:active, #site .icon-btn:active, #site .theme-toggle:active, #site .lang-trigger:active, #site .menu-button:active {
  transform: translateY(0) !important;
}
html[data-theme="light"] #site .btn-primary {
  background-image: linear-gradient(180deg, #232323, #0a0a0a 64%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 1px 2px rgba(10,10,10,.24),
    0 14px 26px -14px rgba(10,10,10,.55) !important;
}
html[data-theme="light"] #site .btn-quiet,
html[data-theme="light"] #site .icon-btn,
html[data-theme="light"] #site .theme-toggle,
html[data-theme="light"] #site .lang-trigger,
html[data-theme="light"] #site .menu-button {
  background-image: linear-gradient(180deg, #fff, #f1f1ef) !important;
  box-shadow:
    0 1px 0 #fff inset,
    0 1px 2px rgba(10,10,10,.1),
    0 8px 16px -12px rgba(10,10,10,.35) !important;
}

/* --- mobile: volume stays, but one cheap shadow layer per element --- */
@media (max-width: 760px) {
  html #site .feature,
  html #site .process-card,
  html #site .plan,
  html #site .faq-list details,
  html #site .support-card,
  html #site .studio-frame,
  html #site .mono-cta,
  html #site .platform-strip,
  html #site .final-cta .wrap {
    box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 10px 22px -14px rgba(0,0,0,.85) !important;
  }
  html[data-theme="light"] #site .feature,
  html[data-theme="light"] #site .process-card,
  html[data-theme="light"] #site .plan,
  html[data-theme="light"] #site .faq-list details,
  html[data-theme="light"] #site .support-card,
  html[data-theme="light"] #site .studio-frame,
  html[data-theme="light"] #site .mono-cta,
  html[data-theme="light"] #site .platform-strip,
  html[data-theme="light"] #site .final-cta .wrap {
    box-shadow: 0 1px 0 #fff inset, 0 10px 20px -14px rgba(10,10,10,.4) !important;
  }
  html #site .btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 16px -10px rgba(0,0,0,.7) !important; }
  html #site .feature:hover, html #site .process-card:hover, html #site .plan:hover, html #site .support-card:hover { transform: none !important; }
}

/* ============ 49. BUTTON VOLUME WITHOUT KILLING CONTRAST + LIVELIER FAQ ICONS ============ */
/* the primary button is white on dark pages and black on light ones, so depth must be
   painted with translucent light/shade layers instead of a fixed dark gradient */
#site .btn-primary,
#site .final-cta .btn-primary,
#site .mono-actions .btn-primary,
#site .topnav .nav-row .btn-primary,
#site .mobile-conversion-bar .btn-primary,
html[data-theme="light"] #site .btn-primary,
html[data-theme="light"] #site .final-cta .btn-primary,
html[data-theme="light"] #site .mono-actions .btn-primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 46%, rgba(0,0,0,.12)) !important;
  background-blend-mode: normal !important;
}
#site .btn,
#site .btn *,
#site .btn:hover,
#site .btn:focus,
#site .btn:hover * {
  text-decoration: none !important;
  text-underline-offset: 0 !important;
}

/* quiet + icon buttons: same trick, one sheen layer that works on any base tone */
#site .btn-quiet,
#site .plan .btn,
#site .icon-btn,
#site .theme-toggle,
#site .lang-trigger,
#site .menu-button,
html[data-theme="light"] #site .btn-quiet,
html[data-theme="light"] #site .plan .btn,
html[data-theme="light"] #site .icon-btn,
html[data-theme="light"] #site .theme-toggle,
html[data-theme="light"] #site .lang-trigger,
html[data-theme="light"] #site .menu-button {
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 52%, rgba(0,0,0,.07)) !important;
}
/* the nav primary lost its depth to an older rule — give it back explicitly */
#site .topnav .nav-row .btn-primary {
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 1px 2px rgba(0,0,0,.3),
    0 10px 20px -12px rgba(0,0,0,.6) !important;
}
#site .plan .btn {
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 1px 2px rgba(0,0,0,.3),
    0 8px 18px -12px rgba(0,0,0,.55) !important;
}
html[data-theme="light"] #site .plan .btn {
  box-shadow:
    0 1px 0 #fff inset,
    0 1px 2px rgba(10,10,10,.1),
    0 8px 16px -12px rgba(10,10,10,.32) !important;
}
html[data-theme="light"] #site .plan.pop .btn-primary {
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 2px 6px rgba(0,0,0,.4) !important;
}

/* ---- FAQ: the message icon actually talks now ---- */
@keyframes ico-chat {
  0%   { transform: translateY(0) scale(1) rotate(0deg); opacity: .78; }
  18%  { transform: translateY(-2.5px) scale(1.14) rotate(-6deg); opacity: 1; }
  34%  { transform: translateY(0) scale(.96) rotate(3deg); opacity: .92; }
  50%  { transform: translateY(-1.5px) scale(1.07) rotate(-3deg); opacity: 1; }
  68%  { transform: translateY(0) scale(1) rotate(0deg); opacity: .84; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: .78; }
}
@keyframes ico-bounce {
  0%, 100% { transform: translateY(0); opacity: .6; }
  45%      { transform: translateY(3px); opacity: 1; }
}
#site .faq-list summary::before {
  animation: ico-chat 1.75s var(--vol-ease) infinite !important;
  transform-origin: 50% 60% !important;
  will-change: transform, opacity;
}
#site .faq-list details:nth-child(2) summary::before { animation-delay: .18s !important; }
#site .faq-list details:nth-child(3) summary::before { animation-delay: .36s !important; }
#site .faq-list details:nth-child(4) summary::before { animation-delay: .54s !important; }
#site .faq-list details:nth-child(5) summary::before { animation-delay: .72s !important; }
#site .faq-list details:nth-child(6) summary::before { animation-delay: .9s !important; }
#site .faq-list summary:hover::before,
#site .faq-list details[open] summary::before {
  animation-duration: .95s !important;
  opacity: 1 !important;
}
/* chevron bounces only while closed — the open state uses a static rotation */
#site .faq-list details:not([open]) summary::after {
  animation: ico-bounce 1.45s var(--vol-ease) infinite !important;
}
#site .faq-list details[open] summary::after {
  animation: none !important;
  opacity: 1 !important;
}

/* ============ 50. ICON DEAD-CENTER IN THE THEME BUTTON + READABLE BAR TEXT ============ */
/* the JS glyph (☀/☾) is an anonymous grid item in cell 1/1, so the mask icon was
   auto-placed into a second cell and sat off-centre. Force both into the same cell. */
#site .topnav .theme-toggle,
#site .topnav .nav-row .theme-toggle {
  display: grid !important;
  grid-template: 1fr / 1fr !important;
  place-items: center !important;
  place-content: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative !important;
}
#site .topnav .theme-toggle::before,
#site .topnav .nav-row .theme-toggle::before {
  grid-area: 1 / 1 !important;
  place-self: center !important;
  margin: 0 !important;
}
#site .topnav .lang-trigger::before { flex: none !important; align-self: center !important; }

/* bottom bar text: readable, not decorative grey */
#site .mobile-conversion-bar small {
  color: rgba(255,255,255,.92) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  opacity: 1 !important;
}
#site .mobile-conversion-bar strong {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
html[data-theme="light"] #site .mobile-conversion-bar small { color: rgba(10,10,10,.8) !important; }
html[data-theme="light"] #site .mobile-conversion-bar strong { color: #0a0a0a !important; }
#site .mobile-conversion-bar .btn-primary {
  background-color: #fff !important;
  color: #0a0a0a !important;
  border-color: #fff !important;
  font-weight: 700 !important;
}
html[data-theme="light"] #site .mobile-conversion-bar .btn-primary {
  background-color: #0a0a0a !important;
  color: #fff !important;
  border-color: #0a0a0a !important;
}

/* ============ 51. THEME ICON STOPS CREEPING (desktop + mobile) ============ */
/* it was not a centring bug only: the mask rotated a full 360deg (ico-spin-slow in light,
   ico-tilt in dark), so the sun/moon visually crawled inside the pill. Pin the icon with
   absolute centring — margins, not transforms — so no animation can move it, and swap the
   endless rotation for a calm breath. Rotation now happens only as a hover flip. */
#site .topnav .theme-toggle,
#site .topnav .nav-row .theme-toggle,
#site .dash-actions .theme-toggle {
  position: relative !important;
  overflow: hidden !important;
}
@keyframes tt-breathe {
  0%, 100% { transform: scale(1); opacity: .92; }
  50%      { transform: scale(1.11); opacity: 1; }
}
@keyframes tt-flip {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(180deg) scale(1.06); }
}
#site .topnav .theme-toggle::before,
#site .topnav .nav-row .theme-toggle::before,
#site .dash-actions .theme-toggle::before,
html[data-theme="light"] #site .topnav .theme-toggle::before,
html[data-theme="light"] #site .topnav .nav-row .theme-toggle::before,
html[data-theme="light"] #site .dash-actions .theme-toggle::before {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  margin: -8px 0 0 -8px !important;
  grid-area: auto !important;
  place-self: auto !important;
  transform-origin: 50% 50% !important;
  animation: tt-breathe 3.6s ease-in-out infinite !important;
  will-change: transform;
}
#site .theme-toggle:hover::before,
#site .topnav .nav-row .theme-toggle:hover::before {
  animation: tt-flip .55s var(--vol-ease) both !important;
}
#site .theme-toggle:active::before { animation: tt-flip .3s var(--vol-ease) both !important; }

/* the language globe keeps its slow spin, but strictly around its own centre */
#site .topnav .lang-trigger::before,
#site .topnav .nav-row .lang-trigger::before {
  transform-origin: 50% 50% !important;
  animation-duration: 14s !important;
}
@media (prefers-reduced-motion: reduce) {
  #site .topnav .theme-toggle::before,
  #site .topnav .lang-trigger::before { animation: none !important; }
}

/* ============================================================
   §52 SOFT CORNERS — no sharp rectangles anywhere
   Every bordered pill, chip, panel, list and answer block gets
   the same rounded language as the rest of the UI.
   ============================================================ */

:root {
  --r-pill: 999px;
  --r-soft: 16px;
  --r-inner: 12px;
  --r-panel: 20px;
}

/* --- label pills: fully rounded ------------------------------ */
#site .mono-label,
html[data-theme="light"] #site .mono-label,
#site .kicker,
#site .tag,
#site .chip,
#site .pill,
#site .preview-chip,
html[data-theme="light"] #site .preview-chip,
#site .saved,
html[data-theme="light"] #site .saved,
#site .feature-no,
#site .integrations-label,
#site .per-tabs,
html[data-theme="light"] #site .per-tabs,
#site .per-tab,
#site [class*="chip"],
#site [class*="badge"],
#site [class*="pill"] {
  border-radius: var(--r-pill) !important;
}

/* pills need breathing room once they are round */
#site .mono-label,
html[data-theme="light"] #site .mono-label {
  padding: 7px 16px 7px 14px !important;
}
#site .saved,
html[data-theme="light"] #site .saved {
  padding: 4px 11px 4px 9px !important;
}
#site .preview-chip,
html[data-theme="light"] #site .preview-chip {
  padding: 3px 10px !important;
}
#site .per-tabs { padding: 4px !important; }
#site .per-tab { border-radius: var(--r-pill) !important; }

/* --- panels and answer blocks -------------------------------- */
#site .brief-field,
html[data-theme="light"] #site .brief-field,
#site .render-row,
html[data-theme="light"] #site .render-row,
#site .plan ul,
#site .plan > ul,
#site .faq-list details > p,
#site .faq-list details > div,
#site .support-card,
#site .studio-nav,
html[data-theme="light"] #site .studio-nav,
#site .studio-preview,
html[data-theme="light"] #site .studio-preview,
#site .studio-main,
#site .process-card,
#site .feature-card,
#site .mono-card,
#site .lang-dropdown,
#site .mobile-menu,
#site .toast {
  border-radius: var(--r-soft) !important;
}

#site .brief-field { padding: 14px 16px 12px !important; }
#site .plan ul { padding: 14px 16px !important; }
#site .faq-list details > p { padding: 14px 18px 16px !important; }

/* --- form controls ------------------------------------------- */
#site input,
#site textarea,
#site select,
html[data-theme="light"] #site input,
html[data-theme="light"] #site textarea,
html[data-theme="light"] #site select {
  border-radius: var(--r-inner) !important;
}

/* stepper: rounded shell, rounded end caps, no square buttons */
#site .stepper,
html[data-theme="light"] #site .stepper {
  border-radius: var(--r-pill) !important;
  overflow: hidden !important;
}
#site .stepper button,
html[data-theme="light"] #site .studio-frame .stepper button {
  border-radius: var(--r-pill) !important;
}
#site .stepper input,
html[data-theme="light"] #site .stepper input {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* --- device frame and larger surfaces ------------------------ */
#site .phone-preview,
html[data-theme="light"] #site .phone-preview {
  border-radius: 26px !important;
}
#site .studio-frame { border-radius: var(--r-panel) !important; overflow: hidden !important; }
#site .final-cta .wrap { border-radius: var(--r-panel) !important; }
#site .modal { border-radius: var(--r-panel) !important; }

/* --- never round full-bleed structure ------------------------ */
#site > section,
#site section.section,
#site section.platform-strip,
#site footer,
.overlay {
  border-radius: 0 !important;
}

/* mobile: same softness, slightly tighter radii */
@media (max-width: 760px) {
  #site .brief-field,
  #site .plan ul,
  #site .faq-list details > p,
  #site .studio-nav,
  #site .studio-preview,
  #site .support-card { border-radius: 14px !important; }
  #site .final-cta .wrap { border-radius: 18px !important; }
  #site .mono-label { padding: 6px 14px 6px 12px !important; }
}

/* ============================================================
   §53 STICKY CONVERSION BAR ON DESKTOP TOO
   §47 turned the bar into a grid without a media query, so on
   desktop it fell into the document flow as a full-width strip
   (legacy CSS only made it position: fixed under 760px).
   Now it is a floating capsule pinned to the bottom-right on
   desktop and to the bottom edge on mobile, always visible.
   ============================================================ */

/* the close button must always win over the grid display */
#site .mobile-conversion-bar[hidden] { display: none !important; }

/* three real columns everywhere: text | button | close */
#site .mobile-conversion-bar {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-auto-flow: column !important;
}
#site .mobile-conversion-bar > [data-mobile-cta-close] {
  flex: none !important;
  width: 32px !important; height: 32px !important;
  min-width: 32px !important; min-height: 32px !important;
  display: grid !important; place-items: center !important;
  padding: 0 !important;
  font-size: 16px !important; line-height: 1 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.85) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
  touch-action: manipulation !important;
  transition: color .2s var(--vol-ease), background .2s var(--vol-ease), transform .2s var(--vol-ease) !important;
}
#site .mobile-conversion-bar > [data-mobile-cta-close]:hover {
  color: #fff !important;
  background: rgba(255,255,255,.2) !important;
  transform: rotate(90deg) !important;
}
html[data-theme="light"] #site .mobile-conversion-bar > [data-mobile-cta-close] {
  border-color: rgba(10,10,10,.16) !important;
  background: rgba(10,10,10,.05) !important;
  color: rgba(10,10,10,.6) !important;
}
html[data-theme="light"] #site .mobile-conversion-bar > [data-mobile-cta-close]:hover {
  color: #0a0a0a !important;
  background: rgba(10,10,10,.1) !important;
}

@keyframes cbar-rise {
  from { transform: translateY(130%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- desktop / tablet: floating capsule, bottom-right ---------- */
@media (min-width: 761px) {
  #site .mobile-conversion-bar {
    position: fixed !important;
    left: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    top: auto !important;
    width: auto !important;
    max-width: min(560px, calc(100vw - 48px)) !important;
    margin: 0 !important;
    z-index: 420 !important; /* under .overlay (500) so modals still cover it */
    gap: 16px !important;
    padding: 10px 12px 10px 22px !important;
    border-radius: 999px !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.12) inset,
      0 22px 50px -18px rgba(0,0,0,.92),
      0 6px 18px -10px rgba(0,0,0,.7) !important;
    animation: cbar-rise .55s var(--vol-ease) both !important;
    will-change: transform !important;
  }
  html[data-theme="light"] #site .mobile-conversion-bar {
    box-shadow:
      0 1px 0 #fff inset,
      0 20px 44px -20px rgba(10,10,10,.42),
      0 6px 16px -10px rgba(10,10,10,.28) !important;
  }
  #site .mobile-conversion-bar small {
    font-size: 10.5px !important;
    letter-spacing: .12em !important;
  }
  #site .mobile-conversion-bar strong { font-size: 16px !important; }
  #site .mobile-conversion-bar .btn {
    height: 42px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
  }
  /* nothing in the footer hides behind the capsule */
  #site footer { padding-bottom: 108px !important; }
}

/* ---------- mobile: keep the full-width bar, just tidy ---------- */
@media (max-width: 760px) {
  #site .mobile-conversion-bar {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 420 !important;
    gap: 10px !important;
    padding: 9px 10px 9px 14px !important;
  }
  #site .mobile-conversion-bar > [data-mobile-cta-close] {
    width: 26px !important; height: 26px !important; font-size: 14px !important;
  }
  #site footer { padding-bottom: 96px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #site .mobile-conversion-bar { animation: none !important; }
}

/* --- one sticky CTA, not two ---------------------------------
   .mono-cta is a second fixed bar (z-index 900, mobile only) that sat
   right on top of .mobile-conversion-bar at y ~768 vs 778 - this is the
   "Start free" text that used to ghost through the Lifetime price.
   The conversion capsule now covers both desktop and mobile, so the old
   duplicate is retired. */
#site .mono-cta,
#site .mono-cta.show,
html[data-theme="light"] #site .mono-cta { display: none !important; }

/* ============================================================
   §54 ANIMATED HAIRLINES + NO STRIP UNDER BUTTON TEXT
   a) any underline/strip under button labels is killed in every state
   b) the thin divider from the process cards now exists in the feature
      cards too, and in both places a light segment travels along it
   ============================================================ */

/* --- a) no line under button labels -------------------------- */
#site .btn,
#site .btn:link,
#site .btn:visited,
#site .btn:hover,
#site .btn:focus,
#site .btn:focus-visible,
#site .btn:active,
#site .btn *,
#site .btn:hover *,
#site .btn:focus *,
#site .btn:active *,
#site .btn span,
#site .btn b,
#site .btn em {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none;
}
/* the button itself keeps its own border and depth shadow */
#site .btn { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
#site .btn::first-line { text-decoration: none !important; }
/* legacy underline drawn as a background stripe on links inside buttons */
#site .btn > span,
#site .btn > b {
  background-image: none !important;
  background-color: transparent !important;
}

/* --- b) animated hairlines ----------------------------------- */
@keyframes line-travel {
  from { background-position: -140% 0, 0 0; }
  to { background-position: 240% 0, 0 0; }
}
@keyframes line-draw {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

/* the old coloured lineGrow overlay stays off */
#site .process-card .process-line::after { display: none !important; }

#site .process-card .process-line,
#site .feature h3::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 18%, rgba(255,255,255,0) 36%),
    linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.07)) !important;
  background-size: 240% 1px, 100% 1px !important;
  background-repeat: no-repeat !important;
  background-position: -140% 0, 0 0 !important;
  transform-origin: left center !important;
  animation: line-draw .8s var(--vol-ease) both, line-travel 3.4s linear infinite !important;
}

/* feature cards: the divider sits between icon and title, like in the steps */
#site .feature h3::before {
  margin: 0 0 16px !important;
}
#site .feature h3 { position: relative !important; }

/* staggered so the three cards do not pulse in lockstep */
#site .process-grid .process-card:nth-child(2) .process-line,
#site .feature-grid .feature:nth-child(2) h3::before { animation-delay: .12s, .55s !important; }
#site .process-grid .process-card:nth-child(3) .process-line,
#site .feature-grid .feature:nth-child(3) h3::before { animation-delay: .24s, 1.1s !important; }
#site .feature-grid .feature:nth-child(4) h3::before { animation-delay: .36s, 1.65s !important; }
#site .feature-grid .feature:nth-child(5) h3::before { animation-delay: .48s, 2.2s !important; }

/* hover: the light runs faster and brighter */
#site .process-card:hover .process-line,
#site .feature:hover h3::before {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 18%, rgba(255,255,255,0) 36%),
    linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.12)) !important;
  animation: line-draw .8s var(--vol-ease) both, line-travel 1.5s linear infinite !important;
}

/* light theme: dark ink instead of white light */
html[data-theme="light"] #site .process-card .process-line,
html[data-theme="light"] #site .feature h3::before {
  background-image:
    linear-gradient(90deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.75) 18%, rgba(10,10,10,0) 36%),
    linear-gradient(90deg, rgba(10,10,10,.26), rgba(10,10,10,.06)) !important;
}
html[data-theme="light"] #site .process-card:hover .process-line,
html[data-theme="light"] #site .feature:hover h3::before {
  background-image:
    linear-gradient(90deg, rgba(10,10,10,0) 0%, #0a0a0a 18%, rgba(10,10,10,0) 36%),
    linear-gradient(90deg, rgba(10,10,10,.42), rgba(10,10,10,.1)) !important;
}

@media (max-width: 760px) {
  #site .feature h3::before { margin: 0 0 13px !important; }
  #site .process-card .process-line,
  #site .feature h3::before { animation-duration: .8s, 4.4s !important; }
}

@media (prefers-reduced-motion: reduce) {
  #site .process-card .process-line,
  #site .feature h3::before {
    animation: none !important;
    background-image: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.07)) !important;
    background-size: 100% 1px !important;
    transform: none !important;
    opacity: 1 !important;
  }
  html[data-theme="light"] #site .process-card .process-line,
  html[data-theme="light"] #site .feature h3::before {
    background-image: linear-gradient(90deg, rgba(10,10,10,.26), rgba(10,10,10,.06)) !important;
  }
}

/* §54b the base hairline must stay readable across its whole width
   (the first pass faded to .07 on the right and disappeared) */
#site .process-card .process-line,
#site .feature h3::before {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 18%, rgba(255,255,255,0) 36%),
    linear-gradient(90deg, rgba(255,255,255,.36), rgba(255,255,255,.16)) !important;
}
html[data-theme="light"] #site .process-card .process-line,
html[data-theme="light"] #site .feature h3::before {
  background-image:
    linear-gradient(90deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.8) 18%, rgba(10,10,10,0) 36%),
    linear-gradient(90deg, rgba(10,10,10,.3), rgba(10,10,10,.13)) !important;
}

/* ============================================================
   §55 UNIVERSAL ZERO UNDERLINES ACROSS ALL TEXT & PLATFORM
   ============================================================ */
*,
*::before,
*::after,
a, a:link, a:visited, a:hover, a:focus, a:active,
button, button *,
span, p, h1, h2, h3, h4, h5, h6, b, strong, em, i,
.nav-links a, .nav-links a:hover, .nav-links a[aria-current="true"],
.to-top, .footer a, .footer p, .footer b,
.trust-item, .trust-item *,
.feature *, .process-card *, .pricing-card *, .faq-item *,
.mono-trust *, .mono-actions * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
  -webkit-text-decoration-skip: none !important;
  text-decoration-skip-ink: none !important;
}

/* ============================================================
   §56 FULL-WIDTH UNIFIED WORKSPACE & REFERRAL SECTION
   ============================================================ */
#site .workspace-section {
  width: 100% !important;
  padding: 60px 0 80px !important;
}

#site .workspace-section .wrap {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

#site .workspace-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  margin-top: 32px !important;
}

#site .workspace-card {
  width: 100% !important;
  background: #111111 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  padding: 26px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  box-sizing: border-box !important;
}

#site .workspace-card.referrals-card,
#site #liveRefPanel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

#site .ref-input-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

#site .ref-link-input {
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 46px !important;
  background: #060606 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-family: ui-monospace, monospace !important;
  font-size: 13.5px !important;
  padding: 0 16px !important;
  outline: none !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

#site .ref-copy-btn {
  height: 46px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 0 24px !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

#site .ref-copy-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #000000 !important;
  color: #000000 !important;
}

#site .ref-copy-btn:hover {
  background: #f0f0f0 !important;
  border-color: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

#site .ref-stats-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

#site .ref-stat-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
}

#site .ref-stat-pill b {
  color: #ffffff !important;
  font-weight: 800 !important;
}

#site .claim-box {
  display: grid !important;
  grid-template-columns: 1fr 260px !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-sizing: border-box !important;
  align-items: center !important;
}

#site .claim-box input {
  width: 100% !important;
  height: 46px !important;
  background: #060606 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  padding: 0 16px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

#site .claim-box input:focus {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

#site .claim-box button,
#site .claim-box .btn,
#site #liveClaimGift,
#dash #liveClaimGift,
#site [data-action="claimGiftLive"],
#dash [data-action="claimGiftLive"],
#site #claimGift,
#dash #claimGift,
#dash .claim-box button,
#dash .claim-box .btn,
#site .lic-actions .btn,
#site .lic-actions button {
  width: 100% !important;
  height: 46px !important;
  padding: 0 24px !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

#site .claim-box button:hover,
#site .claim-box .btn:hover,
#site #liveClaimGift:hover,
#dash #liveClaimGift:hover,
#site [data-action="claimGiftLive"]:hover,
#dash [data-action="claimGiftLive"]:hover,
#site #claimGift:hover,
#dash #claimGift:hover,
#dash .claim-box button:hover,
#dash .claim-box .btn:hover,
#site .lic-actions .btn:hover,
#site .lic-actions button:hover {
  background: #f0f0f0 !important;
  border-color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

@media (max-width: 860px) {
  #site .workspace-grid {
    grid-template-columns: 1fr !important;
  }
  #site .claim-box {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   §57 FOOTER LAYOUT & HIGH-CONTRAST MONOCHROME GRID
   ============================================================ */
#siteFooter,
#site #siteFooter {
  background: #060606 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 60px 0 40px !important;
  color: #ffffff !important;
}

#site .footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1.3fr 1.2fr 1fr !important;
  gap: 32px 24px !important;
  align-items: start !important;
}

#site .footer-brand-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#site .footer-brand-col .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

#site .footer-brand-col .brand b {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

#site .footer-brand-col .to-top {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: color 0.15s ease !important;
  margin-top: 4px !important;
}

#site .footer-brand-col .to-top:hover {
  color: #ffffff !important;
}

#site .footer-brand-col p {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin: 0 !important;
}

#site .footer-nav-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#site .footer-nav-col b {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

#site .footer-nav-col a {
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}

#site .footer-nav-col a:hover {
  color: #ffffff !important;
  transform: translateX(2px) !important;
}

@media (max-width: 900px) {
  #site .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  #site .footer-brand-col {
    grid-column: 1 / -1 !important;
    margin-bottom: 10px !important;
  }
}

@media (max-width: 540px) {
  #site .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ============================================================
   §58 DEDICATED DASHBOARD FULL-WIDTH STRETCH & ZERO UNDERLINES
   ============================================================ */
#dash,
#dash *,
#dash a,
#dash button,
#dash span,
#dash div,
#dash small,
#dash b,
#dash strong,
#dash p,
#dash h1,
#dash h2,
#dash h3,
#dash h4,
#dash input,
#dash textarea,
#dash select {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
}

#dash {
  width: 100% !important;
  min-height: 100vh !important;
  background: #060606 !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
}

#dash .dash-shell {
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#dash .dash-workspace {
  width: 100% !important;
  min-width: 0 !important;
  background: #060606 !important;
  display: flex !important;
  flex-direction: column !important;
}

#dash .dash-top {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #0b0b0b !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 18px 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#dash .dash-layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 1720px !important;
  margin: 0 auto !important;
  padding: 28px 32px 80px !important;
  box-sizing: border-box !important;
  align-items: start !important;
}

#dash .dash-main,
#dash .dash-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#dash .panel,
#dash .license-panel,
#dash .quick-panel,
#dash .referrals-panel,
#dash .danger-zone {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #111111 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  padding: 26px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

#dash .lic-card {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #161616 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  margin-top: 14px !important;
}

#dash .lic-state {
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

#dash .lic-state.lic-none {
  background: #181818 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

#dash .lic-state.lic-active {
  background: #152718 !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
}

#dash .dl-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  margin-top: 16px !important;
}

#dash .dl-btn,
.dl-btn,
button.dl-btn,
a.dl-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 18px 14px !important;
  background: #0c0c0c !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  transition: all 0.18s ease !important;
}

#dash .dl-btn *,
.dl-btn *,
button.dl-btn *,
a.dl-btn * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  border-bottom: none !important;
}

#dash .dl-btn:hover,
.dl-btn:hover {
  background: #1c1c1c !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

#dash .dl-btn .dl-ic {
  font-size: 22px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
}

#dash .dl-btn .dl-ic svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #ffffff !important;
}

#dash .dl-btn .dl-title,
#dash .dl-btn b {
  font-size: 13.5px !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
  display: block !important;
  text-decoration: none !important;
}

#dash .dl-btn .dl-sub,
#dash .dl-btn small {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  display: block !important;
  text-decoration: none !important;
}

@media (max-width: 1100px) {
  #dash .dash-layout {
    grid-template-columns: 1fr !important;
    padding: 24px 20px 60px !important;
    gap: 20px !important;
  }
  #dash .dash-shell {
    grid-template-columns: 1fr !important;
  }
  #dash .dash-rail {
    display: none !important;
  }
}

.studio-footer > div,
.studio-estimate {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: -0.01em !important;
}
.studio-estimate .estimate-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #38bdf8 !important;
  flex-shrink: 0 !important;
}
.studio-estimate .estimate-icon svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
}

/* ============ STRICT MOBILE RESPONSIVE ENGINE (<= 900px) ============ */
@media (max-width: 900px) {
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* Wrap containment */
  .wrap, #site .wrap, #dash .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* 1. Header: Hide desktop nav links and desktop auth buttons, show burger */
  #site .topnav {
    width: 100% !important;
    max-width: 100% !important;
  }
  #site .topnav .nav-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
  }
  #site .topnav .nav-links,
  #site .topnav .desktop-auth,
  #site .nav-links,
  #site .desktop-auth {
    display: none !important;
  }
  #site .topnav .menu-button,
  #site .menu-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 2. Hero Section: Single-Column Vertical Stack */
  #site .hero {
    min-height: auto !important;
    padding: 100px 0 40px !important;
  }
  #site .mono-hero,
  .mono-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 36px !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 20px 0 !important;
  }
  #site .mono-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  #site .mono-copy h1 {
    font-size: clamp(32px, 8.5vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
    width: 100% !important;
  }
  #site .mono-copy p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 16px auto 0 !important;
    width: 100% !important;
  }
  #site .mono-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  #site .mono-actions .btn {
    width: 100% !important;
    font-size: 15px !important;
  }
  #site .mono-trust {
    justify-content: center !important;
    width: 100% !important;
    margin-top: 20px !important;
  }

  /* 3. Hero Showcase / Phone Preview */
  #site .hero-showcase,
  .hero-showcase {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  #site .hero-phone-frame {
    width: 100% !important;
    max-width: 300px !important;
    height: 480px !important;
    margin: 0 auto !important;
  }

  /* 4. Studio / Workspace layout on mobile */
  #site .studio-frame {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #site .studio-main,
  #site .studio-output {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5. Dashboard Cabinet layout */
  #dash .dash-shell {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #dash .dash-rail {
    display: none !important;
  }
  #dash .dash-layout {
    grid-template-columns: 1fr !important;
    padding: 14px 12px 60px !important;
    gap: 14px !important;
    width: 100% !important;
  }
  #dash .dash-main,
  #dash .dash-side {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ========================================================
   WHITE FLOATING TOPBAR PANEL + FULL-WIDTH BUTTON ENGINE
   ======================================================== */

#site .topnav,
.topnav {
  position: fixed !important;
  inset: 12px 0 auto !important;
  left: 12px !important;
  right: 12px !important;
  width: calc(100% - 24px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  z-index: 100 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#site .topnav .nav-row,
.topnav .nav-row {
  background: #ffffff !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18) !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Crisp Black Brand Wordmark & Symbol on White Topbar */
#site .topnav .brand,
.topnav .brand,
.brand,
#site .brand b,
.brand b,
.brand span,
#site .brand b span,
.topnav .brand b span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 850 !important;
  font-size: 16px !important;
  letter-spacing: -0.3px !important;
  word-spacing: 0px !important;
  text-decoration: none !important;
  border-bottom: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#site .topnav .brand-symbol,
.topnav .brand-symbol,
.brand-symbol.zyn-mark,
#site .brand-symbol.zyn-mark {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

#site .topnav .brand-symbol svg,
.topnav .brand-symbol svg,
.brand-symbol svg {
  stroke: #000000 !important;
  color: #000000 !important;
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

/* Nav links on White Floating Panel */
#site .topnav .nav-links a,
.nav-links a {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  opacity: 0.78 !important;
  font-weight: 650 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease !important;
}

#site .topnav .nav-links a:hover,
.nav-links a:hover,
#site .topnav .nav-links a[aria-current="true"],
.nav-links a[aria-current="true"] {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  font-weight: 750 !important;
}

/* Language Switcher Trigger Pill */
.lang-trigger,
#site .lang-trigger,
#dash .lang-trigger,
.icon-btn.lang-trigger,
#site .topnav .lang-trigger,
.topnav .lang-trigger {
  background: #f1f2f5 !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

.lang-trigger *,
#site .lang-trigger *,
#dash .lang-trigger *,
.icon-btn.lang-trigger *,
#site .topnav .lang-trigger * {
  color: #000000 !important;
  stroke: #000000 !important;
}

.lang-trigger .cab-ico svg,
.lang-trigger .zm-ico-globe svg,
#site .lang-trigger svg,
#dash .lang-trigger svg,
.icon-btn.lang-trigger svg,
.lang-trigger svg,
#site .topnav .lang-trigger svg {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.lang-trigger .lang-current,
#site .topnav .lang-trigger .lang-current {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.lang-trigger .chevron svg,
#site .topnav .lang-trigger .chevron svg {
  stroke: #000000 !important;
  stroke-width: 2.5 !important;
  width: 9px !important;
  height: 9px !important;
  display: block !important;
}

/* User Account Pill in top bar */
#userNavPill,
.user-nav-btn,
#site #userNavPill,
#site .user-nav-btn,
.topnav #userNavPill,
.topnav .user-nav-btn {
  background: #f1f2f5 !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px 0 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
}

#userNavPill .user-nav-label,
.user-nav-btn .user-nav-label {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

#userNavPill .user-nav-ico,
.user-nav-btn .user-nav-ico {
  background: #000000 !important;
  color: #ffffff !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#userNavPill .user-nav-ico svg,
.user-nav-btn .user-nav-ico svg {
  stroke: #ffffff !important;
  fill: none !important;
  width: 14px !important;
  height: 14px !important;
}

/* Menu Burger Button (Light Box with Crisp Black Lines) */
.menu-button,
#site .menu-button,
#site .topnav .menu-button,
.topnav .menu-button {
  background: #f1f2f5 !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  cursor: pointer !important;
}

.menu-button i,
#site .menu-button i,
#site .topnav .menu-button i,
.topnav .menu-button i {
  background: #000000 !important;
  height: 2.5px !important;
  width: 18px !important;
  border-radius: 2px !important;
  position: absolute !important;
  left: 10px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.menu-button i:first-child,
#site .menu-button i:first-child,
#site .topnav .menu-button i:first-child,
.topnav .menu-button i:first-child {
  top: 13px !important;
}

.menu-button i:last-child,
#site .menu-button i:last-child,
#site .topnav .menu-button i:last-child,
.topnav .menu-button i:last-child {
  top: 22px !important;
}

.menu-button.open i:first-child,
#site .menu-button.open i:first-child {
  transform: translateY(4.5px) rotate(45deg) !important;
}

.menu-button.open i:last-child,
#site .menu-button.open i:last-child {
  transform: translateY(-4.5px) rotate(-45deg) !important;
}

/* ========================================================
   FULL-WIDTH BUTTON STRETCHING — NO EMPTY GAPS
   ======================================================== */

/* Hero CTA buttons: first 2 buttons 50%/50% side-by-side, 3rd button 100% full width */
#site .mono-actions,
.mono-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#site .mono-actions .btn,
#site .mono-actions a.btn,
.mono-actions .btn,
.mono-actions a.btn {
  flex: 1 1 calc(50% - 6px) !important;
  min-width: 150px !important;
  min-height: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Third button (Посмотреть продукт) spans full width */
#site .mono-actions .btn-ghost,
#site .mono-actions .hero-product-btn,
#site .mono-actions a[href="#studio"],
.mono-actions .btn-ghost,
.mono-actions .hero-product-btn,
.mono-actions a[href="#studio"] {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
}

/* Final CTA section button: full width */
#site .final-cta .btn,
.final-cta .btn {
  width: 100% !important;
  max-width: 520px !important;
  min-height: 54px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Gate modal download buttons: stretch evenly */
.gate-downloads,
#site .gate-downloads {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.gate-downloads .btn,
#site .gate-downloads .btn {
  flex: 1 1 50% !important;
  min-height: 46px !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Mobile auth block buttons */
.mobile-auth-block,
#site .mobile-auth-block {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mobile-auth-block .btn,
#site .mobile-auth-block .btn {
  flex: 1 1 50% !important;
  min-height: 46px !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Sticky bottom CTA bar buttons */
.mono-cta,
#site .mono-cta,
[data-mono-cta] {
  display: flex !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

.mono-cta .btn,
#site .mono-cta .btn,
[data-mono-cta] .btn {
  flex: 1 1 50% !important;
  min-height: 44px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Pricing plan buttons */
#site .plan .btn,
.plan .btn {
  width: 100% !important;
  min-height: 48px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Download section buttons */
#site #download .btn,
#site .download-section .btn,
#download .btn {
  flex: 1 1 50% !important;
  min-height: 48px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Mobile screen optimization (< 600px) */
@media (max-width: 600px) {
  #site .mono-actions,
  .mono-actions {
    flex-direction: column !important;
  }

  #site .mono-actions .btn,
  #site .mono-actions a.btn,
  .mono-actions .btn,
  .mono-actions a.btn {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-height: 50px !important;
  }

  .gate-downloads,
  #site .gate-downloads {
    flex-direction: column !important;
  }

  .gate-downloads .btn,
  #site .gate-downloads .btn {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .mobile-auth-block,
  #site .mobile-auth-block {
    flex-direction: column !important;
  }

  .mobile-auth-block .btn,
  #site .mobile-auth-block .btn {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* Zero Underline Enforcer */
#site a,
#site a *,
#site a:hover,
#site a:hover *,
#site a:focus,
#site a:focus *,
#site a:active,
#site a:active *,
#site a:visited,
#site a:visited *,
a, a *, a:hover, a:hover *, a:focus, a:focus *, a:active, a:active *, a:visited, a:visited *,
.support-card,
.support-card *,
.support-card b,
.support-card small,
#site .support-card,
#site .support-card *,
#site .support-card b,
#site .support-card small,
#siteFooter,
#siteFooter *,
#site #siteFooter a,
#site #siteFooter a *,
.footer-grid a,
.footer-grid a *,
.footer-nav-col a,
.footer-nav-col a *,
.footer-brand-col a,
.footer-brand-col a *,
.to-top,
.to-top *,
#site .mono-actions a,
#site .mono-actions a *,
.mono-actions a,
.mono-actions a *,
#site .btn,
#site .btn *,
.btn,
.btn * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  text-decoration-style: none !important;
  text-decoration-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Strict Desktop PC Hide for Burger Menu Button */
@media (min-width: 901px) {
  #site .topnav .nav-row .menu-button,
  #site .topnav .menu-button,
  #site .menu-button,
  .topnav .menu-button,
  .menu-button,
  .btn-menu,
  #site .mobile-menu,
  .mobile-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ============================================================================
   FLAWLESS VECTOR ICON ENGINE (100% COMPLETE PATHS - ZERO STUCK/BROKEN LINES)
   All icons render crisp, complete vector geometry with smooth micro-motion
   ============================================================================ */

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

@keyframes zmPulseGlow {
  0%, 100% {
    opacity: 0.85;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* 1. Universal Vector Rendering for ALL SVGs across Landing and Cabinet */
.zm-anim-icon,
.cab-ico,
.mono-icon,
.user-nav-ico,
.mup-ico,
.upload-icon,
.estimate-icon,
.feature-icon,
.faq-ico,
.support-icon,
.cta-icon,
.btn-ico,
[class*="zm-ico-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

/* Continuous Seamless Laser Vector Drawing Engine */
@keyframes zmStrokeDraw {
  0% {
    stroke-dashoffset: 75;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.cab-ico {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

.cab-ico svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  overflow: visible !important;
  filter: none !important;
}

.mono-icon svg,
.zm-anim-icon svg,
.btn-ico svg,
.feature-icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  overflow: visible !important;
  filter: none !important;
}

/* Continuous Fluid Vector Stroke Drawing on all paths */
.zm-anim-icon svg path,
.zm-anim-icon svg line,
.zm-anim-icon svg polyline,
.zm-anim-icon svg polygon,
.zm-anim-icon svg rect,
.zm-anim-icon svg circle,
.cab-ico svg path,
.cab-ico svg line,
.cab-ico svg polyline,
.cab-ico svg polygon,
.cab-ico svg rect,
.cab-ico svg circle,
.mono-icon svg path,
.mono-icon svg line,
.mono-icon svg polyline,
.mono-icon svg polygon,
.mono-icon svg rect,
.mono-icon svg circle,
.btn-ico svg path,
.btn-ico svg line,
.btn-ico svg polyline,
.btn-ico svg polygon,
.btn-ico svg rect,
.btn-ico svg circle,
.user-nav-ico svg path,
.user-nav-ico svg line,
.user-nav-ico svg circle,
.mup-ico svg path,
.mup-ico svg circle,
.faq-ico svg path,
.faq-ico svg line,
.faq-ico svg polyline,
.faq-ico svg polygon,
.faq-ico svg rect,
.faq-ico svg circle,
.support-icon svg path,
.support-icon svg line,
.support-icon svg circle,
.cta-icon svg path,
.cta-icon svg line,
.cta-icon svg circle,
.feature-icon svg path,
.feature-icon svg line,
.feature-icon svg rect,
.feature-icon svg circle,
.dash-rail nav button svg path,
.dash-rail nav button svg line,
.dash-rail nav button svg polyline,
.dash-rail nav button svg polygon,
.dash-rail nav button svg rect,
.dash-rail nav button svg circle,
.dash-actions svg path,
.dash-actions svg line,
.dash-actions svg polyline,
.dash-actions svg circle,
.desktop-auth svg path,
.desktop-auth svg line,
.desktop-auth svg polyline,
.desktop-auth svg circle,
.mobile-auth-block svg path,
.mobile-auth-block svg line,
.mobile-auth-block svg polyline,
.mobile-auth-block svg circle,
.profile-menu-actions svg path,
.profile-menu-actions svg line,
.profile-menu-actions svg polyline,
.profile-menu-actions svg polygon,
.profile-menu-actions svg rect,
.profile-menu-actions svg circle,
[class*="zm-ico-"] svg path,
[class*="zm-ico-"] svg line,
[class*="zm-ico-"] svg polyline,
[class*="zm-ico-"] svg polygon,
[class*="zm-ico-"] svg rect,
[class*="zm-ico-"] svg circle {
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 60 15 !important;
  animation: zmStrokeDraw 2.6s linear infinite !important;
  animation-play-state: running !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  will-change: stroke-dashoffset !important;
}

/* Preserve filled shapes where intended (dots, play button in youtube, crown gems) */
.cab-ico svg [fill="currentColor"],
.mono-icon svg [fill="currentColor"],
.zm-anim-icon svg [fill="currentColor"],
.cab-ico svg circle.zm-dot,
.admin-live-pill .live-dot {
  fill: currentColor !important;
}

/* Red Vector Stroke for Delete Account / Trash */
.zm-ico-trash svg path,
.zm-ico-trash svg polyline,
.zm-ico-trash svg line,
[data-cab-icon="trash"] svg path,
[data-cab-icon="trash"] svg polyline,
[data-cab-icon="trash"] svg line,
[data-action="deleteAccount"] svg path,
[data-action="deleteAccount"] svg polyline,
[data-action="deleteAccount"] svg line,
.btn-danger-ghost svg path,
.btn-danger-ghost svg polyline,
.btn-danger-ghost svg line,
.danger-zone svg path,
.danger-zone svg polyline,
.danger-zone svg line {
  stroke: #ef4444 !important;
}

/* Clean Continuous Spin for Wheels/Orbits */
[data-spin],
svg [data-spin],
.zm-anim-icon svg [data-spin],
.cab-ico svg [data-spin],
.mono-icon svg [data-spin] {
  animation: zmSpinWheel 6s linear infinite !important;
  transform-origin: center center !important;
  transform-box: fill-box !important;
  will-change: transform !important;
}

/* Strict Monochrome Palette for Cabinet Top Actions (Dark pills on white topbar) */
#dash .dash-actions .btn-quiet,
#dash .dash-actions .lang-trigger,
#dash .dash-actions [data-action="showSite"],
#dash .dash-actions [data-action="logout"] {
  background: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border-radius: 9999px !important;
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
}

#dash .dash-actions .btn-quiet *,
#dash .dash-actions .lang-trigger *,
#dash .dash-actions [data-action="showSite"] *,
#dash .dash-actions [data-action="logout"] * {
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
  stroke: #09090b !important;
}

/* ============================================================================
   MOBILE ACCOUNT BUTTON PERFECT CENTERING FIX
   ============================================================================ */

#site #userNavPill,
#site .user-nav-btn,
#userNavPill,
.user-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px 0 10px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

#site #userNavPill:hover,
#site .user-nav-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}

#site #userNavPill .user-nav-label,
#site .user-nav-btn .user-nav-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

#site #userNavPill .user-nav-ico,
#site .user-nav-btn .user-nav-ico {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

#site #userNavPill .user-nav-ico svg,
#site .user-nav-btn .user-nav-ico svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2 !important;
  display: block !important;
}

/* Mobile Icon-Only Mode: Symmetrical Square/Capsule with Perfectly Centered Icon */
@media (max-width: 820px) {
  #site #userNavPill,
  #site .user-nav-btn,
  #userNavPill,
  .user-nav-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  #site #userNavPill .user-nav-label,
  #site .user-nav-btn .user-nav-label,
  #userNavPill .user-nav-label,
  .user-nav-btn .user-nav-label {
    display: none !important;
  }

  #site #userNavPill .user-nav-ico,
  #site .user-nav-btn .user-nav-ico,
  #userNavPill .user-nav-ico,
  .user-nav-btn .user-nav-ico {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #site #userNavPill .user-nav-ico svg,
  #site .user-nav-btn .user-nav-ico svg,
  #userNavPill .user-nav-ico svg,
  .user-nav-btn .user-nav-ico svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    margin: 0 auto !important;
    stroke: #ffffff !important;
    fill: none !important;
  }
}