/**
 * Marketing homepage v2 (index.html) -- complete visual rebuild, index.html-
 * exclusive. Every class here is NEW; nothing here touches or is touched by
 * the shared .top-nav/.nav-item/.site-footer/.card-glass/.btn-solid/
 * .btn-outline/.status-dot/renewal-badge rules in main.css, all of which
 * stay exactly as they are for the pages that still depend on them
 * (help.html's own copy of .top-nav; dashboard.html/settings.html/
 * admin-dashboard.html's .btn-solid/.btn-outline/.status-dot; terms.html/
 * privacy.html/help.html's renewal-badge). New tokens are prefixed --mkt-*
 * for the same reason -- this is a fresh, additive palette, not a change to
 * any existing --bg-primary/--accent-primary/--app-* token's value.
 *
 * .top-nav and .nav-item ARE still applied (dual-classed) on this page's
 * navbar links purely so js/marketing-nav.js's existing active-item
 * click-highlighting selector keeps matching them with zero changes to
 * that shared file -- every visual property is fully re-defined by the
 * .mkt-nav-item classes below, which win on cascade order (this file loads
 * after main.css).
 */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-variable.3100e775e8.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Homepage 10/10 redesign layer (light-first, dark-capable)
   ------------------------------------------------------------------------- */
body.mkt-body {
  --mkt-green: #059669;
  --mkt-green-strong: #008a4c;
  --mkt-green-soft: #e8f8ef;
  --mkt-blue: #1268f3;
  --mkt-blue-soft: #eaf2ff;
  --mkt-purple: #7c3aed;
  --mkt-purple-soft: #f1eaff;
  --mkt-orange: #f59e0b;
  --mkt-orange-soft: #fff5db;
  --mkt-red: #ef4444;
  --mkt-red-soft: #fff0f0;
  --mkt-bg: #f7f9fc;
  --mkt-surface: #ffffff;
  --mkt-surface-soft: #f3f7fb;
  --mkt-text: #071431;
  --mkt-muted: #31405c;
  --mkt-muted-2: #64748b;
  --mkt-border: #dce4ef;
  --mkt-shadow: 0 20px 60px rgba(7, 20, 49, 0.08);
  --mkt-shadow-soft: 0 12px 35px rgba(7, 20, 49, 0.06);
  --mkt-ring: 0 0 0 4px rgba(5, 150, 105, 0.14);
  color: var(--mkt-text);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(16, 185, 129, 0.16), transparent 28rem),
    radial-gradient(circle at 9% 42%, rgba(18, 104, 243, 0.07), transparent 24rem),
    var(--mkt-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

@media (prefers-color-scheme: dark) {
  body.mkt-body {
    --mkt-bg: #090f1d;
    --mkt-surface: #101827;
    --mkt-surface-soft: #121d30;
    --mkt-text: #f7fbff;
    --mkt-muted: #c4cfdf;
    --mkt-muted-2: #94a3b8;
    --mkt-border: rgba(148, 163, 184, 0.25);
    --mkt-green-soft: rgba(5, 150, 105, 0.17);
    --mkt-blue-soft: rgba(18, 104, 243, 0.14);
    --mkt-purple-soft: rgba(124, 58, 237, 0.14);
    --mkt-orange-soft: rgba(245, 158, 11, 0.15);
    --mkt-red-soft: rgba(239, 68, 68, 0.15);
    --mkt-shadow: 0 22px 70px rgba(0, 0, 0, 0.3);
    --mkt-shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.22);
    background:
      radial-gradient(circle at 78% 18%, rgba(16, 185, 129, 0.14), transparent 28rem),
      radial-gradient(circle at 8% 44%, rgba(18, 104, 243, 0.12), transparent 24rem),
      var(--mkt-bg);
  }
}

:root[data-theme="dark"] body.mkt-body {
  --mkt-bg: #090f1d;
  --mkt-surface: #101827;
  --mkt-surface-soft: #121d30;
  --mkt-text: #f7fbff;
  --mkt-muted: #c4cfdf;
  --mkt-muted-2: #94a3b8;
  --mkt-border: rgba(148, 163, 184, 0.25);
  --mkt-green-soft: rgba(5, 150, 105, 0.17);
  --mkt-blue-soft: rgba(18, 104, 243, 0.14);
  --mkt-purple-soft: rgba(124, 58, 237, 0.14);
  --mkt-orange-soft: rgba(245, 158, 11, 0.15);
  --mkt-red-soft: rgba(239, 68, 68, 0.15);
  --mkt-shadow: 0 22px 70px rgba(0, 0, 0, 0.3);
  --mkt-shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.22);
  background:
    radial-gradient(circle at 78% 18%, rgba(16, 185, 129, 0.14), transparent 28rem),
    radial-gradient(circle at 8% 44%, rgba(18, 104, 243, 0.12), transparent 24rem),
    var(--mkt-bg);
}

body.mkt-body *,
body.mkt-body *::before,
body.mkt-body *::after {
  box-sizing: border-box;
}

body.mkt-body a {
  color: inherit;
}

.mkt-container {
  width: min(100% - 48px, 1440px);
  margin-inline: auto;
}

.mkt-navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 74px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 0 36px;
  border-bottom: 1px solid var(--mkt-border);
  background: color-mix(in srgb, var(--mkt-surface) 92%, transparent);
  backdrop-filter: blur(18px);
}

.mkt-nav-logo,
.mkt-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--mkt-text);
  font-weight: 850;
  font-size: 1.75rem;
  letter-spacing: 0;
  text-decoration: none;
}

.mkt-nav-logo svg,
.mkt-footer-logo svg {
  width: 34px;
  height: 34px;
}

.mkt-nav-logo::first-letter,
.mkt-footer-logo::first-letter {
  color: var(--mkt-text);
}

.mkt-nav-center {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 34px;
}

.mkt-nav-item {
  border: 0;
  background: transparent;
  color: var(--mkt-text);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 0;
  cursor: pointer;
}

.mkt-nav-item:hover,
.mkt-nav-item:focus-visible {
  color: var(--mkt-green);
}

.mkt-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 8px;
  border: 1px solid var(--mkt-border);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.mkt-btn:focus-visible {
  outline: none;
  box-shadow: var(--mkt-ring);
}

.mkt-btn-solid {
  color: #ffffff;
  border-color: var(--mkt-green-strong);
  background: linear-gradient(180deg, #12b76a, var(--mkt-green-strong));
  box-shadow: 0 12px 24px rgba(5, 150, 105, 0.22);
}

.mkt-btn-solid:hover {
  background: linear-gradient(180deg, #10a862, #04784b);
}

.mkt-btn-outline {
  color: var(--mkt-green-strong);
  background: color-mix(in srgb, var(--mkt-surface) 86%, transparent);
  border-color: color-mix(in srgb, var(--mkt-green) 42%, var(--mkt-border));
}

.mkt-btn-outline:hover {
  background: var(--mkt-green-soft);
  border-color: var(--mkt-green);
}

.mkt-btn-lg {
  min-height: 56px;
  padding-inline: 34px;
  font-size: 1.02rem;
}

.mkt-hero {
  padding: 64px 0 56px;
}

.mkt-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(620px, 1.16fr);
  align-items: center;
  gap: clamp(34px, 5vw, 76px);
}

.mkt-hero-kicker,
.mkt-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  color: var(--mkt-green-strong);
  background: var(--mkt-green-soft);
  border: 1px solid color-mix(in srgb, var(--mkt-green) 20%, transparent);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.mkt-hero-kicker svg,
.mkt-hero-badge svg {
  width: 18px;
  height: 18px;
}

.mkt-hero-title {
  max-width: 690px;
  margin: 32px 0 22px;
  color: var(--mkt-text);
  font-size: clamp(3.25rem, 5vw, 6.25rem);
  line-height: 1.07;
  letter-spacing: 0;
  font-weight: 900;
}

.mkt-accent {
  display: inline-block;
  color: var(--mkt-green-strong);
  position: relative;
}

.mkt-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8%;
  bottom: -7px;
  height: 5px;
  border-radius: 999px;
  background: var(--mkt-green);
  transform: rotate(-3deg);
}

.mkt-hero-sub,
.mkt-section-lede {
  color: var(--mkt-muted);
  font-size: 1.12rem;
}

.mkt-hero-sub {
  max-width: 620px;
  margin: 0 0 30px;
}

.mkt-hero-cta-row,
.mkt-final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.mkt-hero-badges {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 22px;
  margin-top: 42px;
}

.mkt-hero-badge {
  display: inline-grid;
  grid-template-columns: 28px auto;
  align-items: center;
  gap: 8px;
  color: var(--mkt-muted);
  font-weight: 700;
  font-size: 0.9rem;
}

.mkt-hero-badge svg {
  color: var(--mkt-green);
}

.mkt-product-preview {
  min-width: 0;
}

.mkt-preview-window {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--mkt-border);
  background: var(--mkt-surface);
  box-shadow: var(--mkt-shadow);
}

.mkt-preview-topbar {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  border-bottom: 1px solid var(--mkt-border);
}

.mkt-preview-topbar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ef4444;
}

.mkt-preview-topbar span:nth-child(2) { background: #f59e0b; }
.mkt-preview-topbar span:nth-child(3) { background: #22c55e; }

.mkt-preview-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 470px;
}

.mkt-preview-side {
  padding: 24px 18px;
  border-right: 1px solid var(--mkt-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mkt-preview-brand,
.mkt-preview-side span,
.mkt-preview-secure {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mkt-preview-brand {
  margin-bottom: 14px;
  color: var(--mkt-text);
  font-weight: 900;
  font-size: 1.05rem;
}

.mkt-preview-side > span {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--mkt-muted);
  font-weight: 700;
  font-size: 0.9rem;
}

.mkt-preview-side > span.is-active {
  color: var(--mkt-green-strong);
  background: var(--mkt-green-soft);
}

.mkt-preview-side svg,
.mkt-preview-grid svg,
.mkt-preview-secure svg {
  width: 24px;
  height: 24px;
  color: var(--mkt-green);
}

.mkt-preview-main {
  padding: 28px 32px 30px;
}

.mkt-preview-main h2 {
  margin: 0 0 24px;
  color: var(--mkt-text);
  font-size: 1.45rem;
  text-align: center;
}

.mkt-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mkt-preview-grid article,
.mkt-feature-card,
.mkt-platform-grid article,
.mkt-price-card-surface,
.mkt-how-step-surface {
  border: 1px solid var(--mkt-border);
  background: color-mix(in srgb, var(--mkt-surface) 96%, transparent);
  box-shadow: var(--mkt-shadow-soft);
}

.mkt-preview-grid article {
  min-height: 130px;
  border-radius: 14px;
  padding: 22px;
}

.mkt-preview-grid h3,
.mkt-feature-card h3,
.mkt-platform-grid h3,
.mkt-how-step h3 {
  margin: 12px 0 8px;
  color: var(--mkt-text);
  font-size: 1rem;
  line-height: 1.25;
}

.mkt-preview-grid p,
.mkt-feature-card p,
.mkt-platform-grid p,
.mkt-how-step p {
  margin: 0;
  color: var(--mkt-muted);
  font-size: 0.95rem;
}

.mkt-preview-secure {
  margin-top: 22px;
  border-radius: 12px;
  background: var(--mkt-green-soft);
  color: var(--mkt-green-strong);
  padding: 16px 20px;
  font-weight: 800;
}

#features,
#how-it-works,
#pricing {
  padding: 48px 0 56px;
}

.mkt-section-header {
  text-align: center;
  margin: 0 auto 30px;
  max-width: 840px;
}

.mkt-section-header .mkt-eyebrow {
  margin-inline: auto;
  border: 0;
  background: transparent;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mkt-section-title {
  margin: 12px 0 10px;
  color: var(--mkt-text);
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: 0;
  font-weight: 900;
}

.mkt-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.mkt-feature-card {
  min-height: 205px;
  border-radius: 14px;
  padding: 30px 26px;
}

.mkt-feature-icon,
.mkt-price-icon,
.mkt-security-visual,
.mkt-how-icon,
.mkt-platform-grid article > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 18px;
  background: var(--mkt-green-soft);
  color: var(--mkt-green);
}

.mkt-feature-icon,
.mkt-price-icon,
.mkt-how-icon,
.mkt-platform-grid article > span:first-child {
  width: 58px;
  height: 58px;
}

.mkt-feature-icon svg,
.mkt-price-icon svg,
.mkt-how-icon svg,
.mkt-platform-grid article > span:first-child svg {
  width: 31px;
  height: 31px;
}

.mkt-security-band {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 34px;
  align-items: center;
  margin-top: 28px;
  padding: 38px;
  border: 1px solid var(--mkt-border);
  border-radius: 18px;
  background: linear-gradient(100deg, var(--mkt-green-soft), color-mix(in srgb, var(--mkt-surface) 82%, transparent));
  box-shadow: var(--mkt-shadow-soft);
}

.mkt-security-visual {
  width: 132px;
  height: 132px;
  margin-inline: auto;
  border-radius: 32px;
  box-shadow: 0 24px 45px rgba(5, 150, 105, 0.18);
}

.mkt-security-visual svg {
  width: 76px;
  height: 76px;
}

.mkt-security-copy h2 {
  margin: 0 0 8px;
  color: var(--mkt-text);
  font-size: 2rem;
}

.mkt-security-copy p {
  margin: 0 0 22px;
  color: var(--mkt-muted);
  font-size: 1.05rem;
}

.mkt-security-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.mkt-security-grid span {
  color: var(--mkt-muted);
  border-left: 1px solid var(--mkt-border);
  padding-left: 16px;
}

.mkt-security-grid span:first-child {
  border-left: 0;
  padding-left: 0;
}

.mkt-security-grid strong {
  display: block;
  color: var(--mkt-text);
}

.mkt-how-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 30px auto 52px;
  max-width: 1200px;
}

.mkt-how-step {
  position: relative;
}

.mkt-how-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 72px;
  left: calc(100% + 6px);
  width: 18px;
  border-top: 3px dotted var(--mkt-green);
}

.mkt-how-step-surface {
  min-height: 255px;
  border-radius: 16px;
  padding: 34px 28px;
  text-align: center;
  position: relative;
}

.mkt-how-number {
  position: absolute;
  left: 22px;
  bottom: 22px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--mkt-green);
  color: #ffffff;
  font-weight: 900;
}

.mkt-how-icon {
  width: 82px;
  height: 82px;
  margin-inline: auto;
  border-radius: 50%;
}

.mkt-how-icon svg {
  width: 42px;
  height: 42px;
}

.mkt-platform-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.mkt-platform-grid article {
  min-height: 138px;
  border-radius: 14px;
  padding: 24px;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  column-gap: 18px;
}

.mkt-platform-grid article > span:first-child {
  grid-row: span 2;
  width: 60px;
  height: 60px;
}

.mkt-pricing-toggle {
  width: min(100%, 520px);
  margin: 0 auto 26px;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  padding: 6px;
  border: 1px solid var(--mkt-border);
  border-radius: 14px;
  background: var(--mkt-surface);
  box-shadow: var(--mkt-shadow-soft);
}

.mkt-pricing-toggle-btn {
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  color: var(--mkt-muted);
  background: transparent;
  font-weight: 800;
}

.mkt-pricing-toggle-btn.is-active {
  color: #ffffff;
  background: var(--mkt-green);
}

.mkt-pricing-toggle-badge {
  display: inline-flex;
  margin-left: 8px;
  color: var(--mkt-green-strong);
  background: var(--mkt-green-soft);
  border-radius: 999px;
  padding: 3px 9px;
}

.mkt-pricing-row-label {
  margin: 28px 0 14px;
  color: var(--mkt-green-strong);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mkt-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.mkt-price-card {
  min-width: 0;
}

.mkt-price-card-surface {
  height: 100%;
  border-radius: 18px;
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mkt-price-card.is-featured .mkt-price-card-surface {
  border-color: color-mix(in srgb, var(--mkt-green) 58%, var(--mkt-border));
  box-shadow: 0 28px 70px rgba(5, 150, 105, 0.16);
}

.mkt-price-card.is-plus .mkt-price-icon {
  color: var(--mkt-purple);
  background: var(--mkt-purple-soft);
}

.mkt-price-card.is-lite .mkt-price-icon {
  color: var(--mkt-green);
}

.mkt-price-card.is-max .mkt-price-icon {
  color: var(--mkt-orange);
  background: var(--mkt-orange-soft);
}

.mkt-price-badge {
  margin-top: 14px;
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--mkt-green-strong);
  background: var(--mkt-green-soft);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mkt-price-card.is-plus .mkt-price-badge {
  color: var(--mkt-purple);
  background: var(--mkt-purple-soft);
}

.mkt-price-card.is-max .mkt-price-badge {
  color: #b45309;
  background: var(--mkt-orange-soft);
}

.mkt-price-card h3 {
  margin: 16px 0 4px;
  color: var(--mkt-text);
  font-size: 1.65rem;
}

.mkt-price-subtitle {
  min-height: 24px;
  margin: 0 0 22px;
  color: var(--mkt-muted);
}

.mkt-price-amount {
  width: 100%;
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--mkt-border);
  color: var(--mkt-text);
  font-size: 2.65rem;
  font-weight: 900;
}

.mkt-price-per {
  color: var(--mkt-muted);
  font-size: 1rem;
  font-weight: 700;
}

.mkt-price-features {
  width: 100%;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  text-align: left;
  display: grid;
  gap: 13px;
}

.mkt-price-features li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--mkt-text);
  font-weight: 700;
}

.mkt-price-features li [data-icon] svg {
  width: 18px;
  height: 18px;
  color: var(--mkt-green);
  margin-top: 2px;
}

.mkt-price-card .mkt-btn {
  width: 100%;
  margin-top: auto;
}

.mkt-price-trial-notice {
  margin: 18px 0 0;
  color: var(--mkt-muted);
  font-size: 0.85rem;
  text-align: left;
}

.mkt-final-cta {
  padding: 42px 0 72px;
}

.mkt-final-cta-inner {
  border: 1px solid var(--mkt-border);
  border-radius: 18px;
  background: var(--mkt-surface);
  box-shadow: var(--mkt-shadow-soft);
  padding: 42px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}

.mkt-final-cta h2 {
  margin: 0 0 8px;
  color: var(--mkt-text);
  font-size: 2rem;
}

.mkt-final-cta p {
  margin: 0;
  color: var(--mkt-muted);
}

.mkt-footer {
  border-top: 1px solid var(--mkt-border);
  background: color-mix(in srgb, var(--mkt-surface) 88%, transparent);
  padding: 42px 0 28px;
}

.mkt-footer .mkt-container {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 38px;
}

.mkt-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.mkt-footer-col h4 {
  margin: 0 0 12px;
  color: var(--mkt-text);
}

.mkt-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.mkt-footer-col a {
  color: var(--mkt-muted);
  text-decoration: none;
}

.mkt-footer-bottom {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid var(--mkt-border);
  color: var(--mkt-muted);
}

@media (max-width: 1180px) {
  .mkt-navbar {
    grid-template-columns: auto auto;
  }

  .mkt-nav-center {
    display: none;
  }

  .mkt-hero-inner {
    grid-template-columns: 1fr;
  }

  .mkt-product-preview {
    max-width: 900px;
    margin-inline: auto;
  }

  .mkt-feature-grid,
  .mkt-how-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mkt-how-step::after {
    display: none;
  }

  .mkt-platform-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mkt-security-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mkt-container {
    width: min(100% - 32px, 1440px);
  }

  .mkt-navbar {
    padding-inline: 18px;
    gap: 14px;
  }

  .mkt-nav-logo {
    font-size: 1.35rem;
  }

  .mkt-nav-logo svg {
    width: 28px;
    height: 28px;
  }

  .mkt-nav-actions {
    gap: 8px;
  }

  .mkt-nav-actions .mkt-btn {
    min-height: 40px;
    padding-inline: 14px;
  }

  .mkt-hero {
    padding-top: 42px;
  }

  .mkt-hero-title {
    font-size: clamp(2.65rem, 12vw, 4.2rem);
  }

  .mkt-hero-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mkt-preview-shell {
    grid-template-columns: 1fr;
  }

  .mkt-preview-side {
    display: none;
  }

  .mkt-preview-main {
    padding: 24px;
  }

  .mkt-preview-grid,
  .mkt-feature-grid,
  .mkt-how-steps,
  .mkt-security-band,
  .mkt-final-cta-inner {
    grid-template-columns: 1fr;
  }

  .mkt-platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mkt-security-grid {
    grid-template-columns: 1fr;
  }

  .mkt-security-grid span,
  .mkt-security-grid span:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .mkt-pricing-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 0 16px;
  }

  .mkt-price-card {
    flex: 0 0 min(84vw, 360px);
    scroll-snap-align: center;
  }

  .mkt-final-cta-inner {
    text-align: left;
    padding: 30px;
  }

  .mkt-footer .mkt-container,
  .mkt-footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .mkt-container {
    width: min(100% - 24px, 1440px);
  }

  .mkt-navbar {
    min-height: 66px;
  }

  .mkt-nav-actions .mkt-btn {
    padding-inline: 12px;
  }

  .mkt-btn-lg {
    width: 100%;
  }

  .mkt-hero-kicker {
    width: 100%;
    justify-content: flex-start;
  }

  .mkt-hero-badges {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .mkt-preview-main h2,
  .mkt-section-title {
    text-align: left;
  }

  .mkt-section-header {
    text-align: left;
  }

  .mkt-section-header .mkt-eyebrow {
    margin-inline: 0;
  }

  .mkt-platform-grid {
    grid-template-columns: 1fr;
  }

  .mkt-platform-grid article {
    grid-template-columns: 58px 1fr;
  }
}

/* Typed as a <number> so the browser can actually interpolate it across
   a transition -- an untyped custom property only ever jump-cuts between
   values, which is why .mkt-mock-ring's conic-gradient needs this to
   animate the Protection Score ring smoothly (marketing-motion.js sets
   --score-pct directly) instead of snapping between each cycled value. */
@property --score-pct {
  syntax: "<number>";
  inherits: true;
  initial-value: 92;
}

:root {
  --mkt-bg: #0B0D10;
  --mkt-bg-2: #111418;
  --mkt-card: #13171C;
  --mkt-green: #39FF88;
  --mkt-green-hover: #56FF9C;
  --mkt-glow: rgba(57, 255, 136, 0.25);
  --mkt-text: #FFFFFF;
  --mkt-muted: #B5BEC7;
  --mkt-muted-2: #7F8A94;
  --mkt-card-fill: rgba(255, 255, 255, 0.03);
  --mkt-card-border: rgba(255, 255, 255, 0.08);
  --mkt-navbar-bg: rgba(17, 20, 24, 0.78);
  --mkt-blur: 18px;
  --mkt-font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mkt-max-width: 1280px;
  --mkt-radius-pill: 999px;
  --mkt-radius-card: 20px;
  --mkt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mkt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

/* Ambient background: a very faint radial wash of the brand green behind
   the hero, plus a barely-there noise texture over the flat base color --
   both intentionally near-invisible (a genuinely flat #0B0D10 read as
   inert; this keeps the same near-black without looking like a solid
   fill). Fixed attachment so the wash doesn't visibly repeat/tile as the
   page scrolls past it. SVG noise is a data URI (no extra asset request)
   at ~3% opacity -- purely textural, never competes with content. */
body.mkt-body {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(57, 255, 136, 0.05), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>"),
    var(--mkt-bg);
  background-attachment: fixed;
  color: var(--mkt-text);
  font-family: var(--mkt-font);
  line-height: 1.15;
}

.mkt-container {
  width: 100%;
  max-width: var(--mkt-max-width);
  margin: 0 auto;
  padding: 0 32px;
}

.mkt-body section {
  padding: 120px 0;
}

@media (max-width: 768px) {
  .mkt-body section {
    padding: 72px 0;
  }
  .mkt-container {
    padding: 0 20px;
  }
}

.mkt-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkt-green);
  margin: 0 0 16px;
}

.mkt-section-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--mkt-text);
}

.mkt-section-lede {
  font-size: 18px;
  font-weight: 400;
  color: var(--mkt-muted);
  max-width: 60ch;
  margin: 0 0 64px;
}

.mkt-section-header {
  text-align: center;
}

.mkt-section-header .mkt-section-title,
.mkt-section-header .mkt-section-lede {
  margin-left: auto;
  margin-right: auto;
}

/* Scroll-triggered fade-up (js/marketing-motion.js toggles .is-visible;
   prefers-reduced-motion users get full opacity immediately, no motion
   at all -- see that file's own guard). */
.mkt-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--mkt-ease), transform 0.6s var(--mkt-ease);
}

.mkt-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .mkt-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Navbar ───────────────────────────────────────────────────────────── */

.mkt-navbar {
  position: sticky;
  top: 16px;
  z-index: 1000;
  width: min(1100px, 94%);
  height: 72px;
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px 0 26px;
  background: rgba(14, 18, 24, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--mkt-radius-pill);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 16px 40px -15px rgba(0, 0, 0, 0.55),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
  transition: height 0.35s var(--mkt-ease), top 0.35s var(--mkt-ease),
    background 0.35s var(--mkt-ease), border-color 0.35s var(--mkt-ease),
    box-shadow 0.35s var(--mkt-ease), backdrop-filter 0.35s var(--mkt-ease);
}

/* Shrinks smoothly + darkens + deepens its shadow past the scroll
   threshold (marketing-motion.js toggles this class) -- a genuine height
   change, not just a color swap, so "shrink" reads as literal, not
   figurative. */
.mkt-navbar.is-scrolled {
  top: 10px;
  height: 62px;
  background: rgba(11, 14, 19, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.75),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);
}

.mkt-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mkt-text);
  text-decoration: none;
  font-weight: 800;
  font-size: 17px;
  flex: 0 0 auto;
}

.mkt-nav-logo svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.mkt-nav-center {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
}

/* flex-direction: row is NOT redundant here -- this element is
   dual-classed "nav-item mkt-nav-item" (see this file's own top-of-file
   comment on why) purely so js/marketing-nav.js's shared active-item
   selector still matches; main.css's own .nav-item sets flex-direction:
   column (for ITS icon-over-label stacked layout elsewhere in the app),
   which this rule never used to reset. Since this element is a flex
   item inside .mkt-nav-center (display:flex), the browser blockifies
   its specified inline-flex down to flex for the computed value either
   way -- fine on its own -- but the leaked column direction made
   align-items: center align on the WRONG (horizontal) axis, pinning the
   label text to the box's top edge instead of vertically centering it.
   That's what made the hover pill/underline look oversized/misaligned
   relative to the text: the pill was correctly sized to the full box,
   but the text wasn't centered inside it. */
.mkt-nav-item {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--mkt-radius-pill);
  color: var(--mkt-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: color 250ms ease, background 250ms ease, border-color 250ms ease;
}

/* A small underline bar, not a filled bubble -- grows in from the
   center on hover/active, never a giant glowing circle. */
.mkt-nav-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--mkt-green);
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transition: transform 250ms var(--mkt-ease), opacity 250ms ease;
}

.mkt-nav-item:hover {
  color: var(--mkt-text);
  background: rgba(57, 255, 136, 0.08);
  border-color: rgba(57, 255, 136, 0.18);
}

.mkt-nav-item:hover::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* Active page: ONLY a small glowing underline, no pill fill -- kept
   visually distinct from the :hover treatment above so a selected item
   at rest never reads as a permanently "stuck on" hover bubble. */
.mkt-nav-item.active {
  color: var(--mkt-text);
  background: transparent;
  border-color: transparent;
}

.mkt-nav-item.active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
  box-shadow: 0 0 8px var(--mkt-glow);
}

.mkt-nav-item:focus-visible {
  outline: 2px solid var(--mkt-green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mkt-nav-item,
  .mkt-nav-item::after {
    transition: none;
  }
}

.mkt-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--mkt-radius-pill);
  font-family: var(--mkt-font);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s var(--mkt-ease), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.mkt-btn-solid {
  background: linear-gradient(135deg, var(--mkt-green), var(--mkt-green-hover));
  color: #06130C;
}

/* "Lift" is conveyed by a growing elevation shadow + scale, deliberately
   NOT translateY -- an actual position shift on .mkt-btn:hover previously
   caused a real, shipped flicker bug (tests/test_cta_hover_jitter.js's
   own header: browsers hit-test :hover against the POST-transform box,
   so a cursor resting 1px inside an edge un-hovers/re-hovers in a loop
   once the box moves under it). A shadow that grows in both size and
   vertical offset reads as "lifting off the surface" just as clearly,
   without ever moving the button's own hoverable geometry -- that test
   still passes unmodified with this approach. */
.mkt-btn-solid:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 28px -6px var(--mkt-glow);
  transform: scale(1.02);
}

.mkt-btn-solid:active {
  transform: scale(0.98);
  filter: brightness(0.96);
}

.mkt-btn-outline {
  background: rgba(255, 255, 255, 0.02);
  color: var(--mkt-text);
  border-color: var(--mkt-card-border);
  backdrop-filter: blur(var(--mkt-blur));
  -webkit-backdrop-filter: blur(var(--mkt-blur));
}

/* color: explicit, not just inherited from .mkt-btn-outline's own resting
   value -- this class is also combined with .nav-signup (nav-signup-link
   AND nav-dashboard-link both use it, see index.html), and main.css's
   shared .nav-signup:hover sets color: var(--bg-primary) (near-black),
   correct for THAT class's other use on the solid, bright-green-gradient
   "Sign up" button (.mkt-btn-solid.nav-signup) but unreadable on this
   transparent/glass variant (.mkt-btn-outline.nav-signup, e.g. the
   "Dashboard" button shown to a logged-in visitor) since nothing here
   was overriding it. Equal specificity (.nav-signup:hover and
   .mkt-btn-outline:hover are both one class + :hover), so this file
   loading after main.css is what makes this win -- .nav-signup:hover
   itself is untouched, .mkt-btn-solid.nav-signup keeps its own dark
   hover text exactly as before (that rule already resolves its OWN
   color via .nav-signup:hover with nothing here contesting it). */
.mkt-btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: var(--mkt-text);
  transform: scale(1.02);
}

.mkt-btn-outline:active {
  transform: scale(0.98);
}

.mkt-btn:focus-visible {
  outline: 2px solid var(--mkt-green);
  outline-offset: 2px;
}

.mkt-btn-lg {
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .mkt-btn {
    transition: none;
  }
}

.mkt-nav-actions .mkt-btn {
  height: 40px;
  padding: 0 18px;
}

@media (max-width: 900px) {
  .mkt-nav-center {
    display: none;
  }
}

/* Renewal badge -- reused element/IDs, new positioning/visuals only. */
.mkt-renewal-badge {
  position: fixed;
  top: 100px;
  right: max(24px, calc(50% - 620px));
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--mkt-card-fill);
  border: 1px solid var(--mkt-card-border);
  border-radius: var(--mkt-radius-pill);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 13px;
  color: var(--mkt-muted);
}

.mkt-renewal-badge-plan {
  color: var(--mkt-green);
  font-weight: 700;
}

@media (max-width: 640px) {
  .mkt-renewal-badge {
    display: none;
  }
}

/* Below this width, the wordmark + Log in + Sign up no longer all fit
   alongside each other even with the center nav already hidden (caught
   via an actual horizontal-overflow check at 320px, not by eyeballing --
   the wordmark text and full button padding together genuinely don't
   fit in a 320px screen's worth of pill). Icon-only logo, tighter button
   padding. */
@media (max-width: 420px) {
  /* "DBBackup" is a raw text node inside .mkt-nav-logo (no wrapping
     <span>) -- zeroing the parent's own font-size collapses it without
     needing to touch index.html's markup. */
  .mkt-nav-logo {
    font-size: 0;
  }
  .mkt-nav-logo svg {
    width: 24px;
    height: 24px;
  }
  .mkt-navbar {
    padding: 0 8px 0 16px;
  }
  .mkt-nav-actions .mkt-btn {
    padding: 0 12px;
    font-size: 13px;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.mkt-hero {
  padding-top: 96px;
  padding-bottom: 80px;
  overflow: hidden;
}

.mkt-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 860px;
  margin: 0 auto;
}

.mkt-hero-copy {
  width: 100%;
}

.mkt-hero-title {
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  color: var(--mkt-text);
}

.mkt-hero-title .mkt-accent {
  color: var(--mkt-green);
}

.mkt-hero-sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--mkt-muted);
  max-width: 58ch;
  margin: 0 0 40px;
}

.mkt-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.mkt-hero-cta-note {
  font-size: 13px;
  color: var(--mkt-muted);
}

.mkt-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mkt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--mkt-card-fill);
  border: 1px solid var(--mkt-card-border);
  border-radius: var(--mkt-radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 500;
  color: var(--mkt-muted);
}

.mkt-hero-badge svg {
  width: 18px;
  height: 18px;
  color: var(--mkt-green);
  filter: drop-shadow(0 0 6px rgba(62, 243, 140, 0.35));
  flex: 0 0 auto;
}

/* ── Provider logos ───────────────────────────────────────────────────── */

.mkt-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (min-width: 640px) {
  .mkt-logos-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1024px) {
  .mkt-logos-grid {
    grid-template-columns: repeat(9, 1fr);
  }
}

.mkt-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 8px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.mkt-logo-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--mkt-card-border);
}

/* "Rises" via the SVG child's own translateY, not the item's -- the item
   itself (which receives :hover) never moves, so its hoverable geometry
   stays stable. Same technique this page's shared main.css already uses
   for .nav-item's own hover lift (see that rule's own comment), applied
   here rather than duplicated onto .mkt-logo-item directly. */
.mkt-logo-item svg {
  width: 40px;
  height: 40px;
  color: var(--mkt-muted);
  transition: color 0.25s ease, transform 0.25s var(--mkt-ease), filter 0.25s ease;
}

.mkt-logo-item:hover svg {
  color: var(--logo-brand-color, var(--mkt-green));
  transform: translateY(-4px);
  filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--logo-brand-color, var(--mkt-green)) 45%, transparent));
}

.mkt-logo-name {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  color: var(--mkt-muted);
  text-align: center;
  padding-bottom: 6px;
}

.mkt-logo-name::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--mkt-green);
  transform: translateX(-50%);
  transition: width 0.25s var(--mkt-ease);
}

.mkt-logo-item:hover .mkt-logo-name::after {
  width: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .mkt-logo-item,
  .mkt-logo-item svg,
  .mkt-logo-name::after {
    transition: none;
  }
}

/* ── Why DBBackup ─────────────────────────────────────────────────────── */
/* Full premium rebuild (brief: "Apple/Stripe/Linear-level enterprise
   polish"). Deep-charcoal section background with a faint brand-green
   radial wash + the same noise-texture data URI body.mkt-body's own
   background already uses (no new asset, same restrained ~3.5% opacity
   so it reads as texture, not visible grain). overflow: hidden here is
   the same defense-in-depth #how-it-works already has for its own
   border-beam's filter: drop-shadow() -- that filter paints beyond its
   element's layout box, which can count toward page-level horizontal
   scrollWidth at narrow viewports even though it never shows in
   getBoundingClientRect(). Styled via the #features ID directly (no
   extra class on the <section> itself) -- matches #how-it-works/
   #compatibility/#pricing's own established convention on this page,
   and avoids a real collision found the hard way: tests/
   test_compat_strip.js's own section-order check reads
   `s.className || s.id`, so a section carrying BOTH an id and a class
   would have silently reported its class instead of "features" there,
   breaking that check. */
#features {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(46, 234, 143, 0.07), transparent 65%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>"),
    #0B0F14;
}

/* Overrides scoped to just this section's heading/lede -- .mkt-section-
   title/.mkt-section-lede are SHARED with the How It Works and Pricing
   section headers (css comment further down / index.html), so the base
   classes stay untouched; these modifier classes only add what this
   section's own brief calls for. */
.mkt-why-title {
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 700;
}

.mkt-why-title-gradient {
  background: linear-gradient(90deg, #2EEA8F, #32D7FF);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.mkt-why-lede {
  font-size: 22px;
  color: #B8C0CC;
}

.mkt-why-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .mkt-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .mkt-why-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Problem -> risk -> solution -> value: a small accent-color story arc
   (see index.html's own comment on this grid). --why-accent drives the
   icon/accent-line/hover-glow colors; --beam-color/--beam-delay drive
   the border-beam below (own custom properties, not reusing
   --why-accent 1:1, purely so a future edit to one doesn't silently
   retint the other) -- both inherit from here down through
   .mkt-why-card-surface same as any descendant. Delay staggered by a
   flat 2.5s per card (spec: "offset ~2.5s"); with 4 cards and a 10s
   shared duration, 2.5s is exactly 1/4 of the loop, so all four peaks
   stay permanently 2.5s apart, evenly spread around the cycle, never
   simultaneous -- stronger than the 3-card sections' "never evenly
   divides" proof, this one is exact by construction. */
.mkt-why-card.is-problem {
  --why-accent: #2EEA8F;
  --beam-color: #2EEA8F;
  --beam-delay: 0s;
}
.mkt-why-card.is-risk {
  --why-accent: #F5A623;
  --beam-color: #F5A623;
  --beam-delay: 2.5s;
}
.mkt-why-card.is-solution {
  --why-accent: #10B981;
  --beam-color: #10B981;
  --beam-delay: 5s;
}
.mkt-why-card.is-value {
  --why-accent: #3B82F6;
  --beam-color: #3B82F6;
  --beam-delay: 7.5s;
}

/* Outer grid item: keeps .mkt-fade-up's own scroll-reveal transition
   (opacity + transform, near the top of this file) completely
   untouched and is the ONLY thing that ever receives :hover -- but it
   NEVER transforms itself on hover. See index.html's own comment on
   this section for why: every hover effect (lift, border-beam glow
   boost, shimmer, icon float) lives on the CHILD .mkt-why-card-surface
   instead, so the element whose :hover match matters can never have its
   own geometry move under the cursor. */
.mkt-why-card {
  height: 100%;
}

/* Sets ONLY transition-delay (not the full `transition` shorthand), so
   it layers on top of .mkt-fade-up's own transition-property/duration/
   timing-function rather than replacing them -- a longhand property
   from a higher-specificity selector (class + :nth-child) beats a
   shorthand-implied default from a plain class regardless of source
   order. Only opacity is delayed; transform stays 0s so the fade-up's
   own translateY(24px)->0 reveal (its only use of transform now that
   hover moved to the child) never visibly lags card to card. */
.mkt-why-card:nth-child(2) { transition-delay: 0.08s, 0s; }
.mkt-why-card:nth-child(3) { transition-delay: 0.16s, 0s; }
.mkt-why-card:nth-child(4) { transition-delay: 0.24s, 0s; }

/* The actual glassmorphic card box -- background/border/blur/shadow all
   live here, not on the outer .mkt-why-card, so they can transition
   independently of the outer's own scroll-reveal transition. overflow:
   hidden clips the border-beam ring (::before below) to this box's own
   26px-rounded shape; box-shadow itself is NOT clipped by an element's
   own overflow: hidden (a separate paint step, per spec), so the hover
   glow still reads outside the card. text-align/align-items: center
   centers the icon, heading, body copy, and accent-line horizontally
   (icon was previously pinned to the top-left corner -- centering
   matches #how-it-works' own cards and reads more premium/intentional
   than a left-aligned icon floating above left-aligned text). */
.mkt-why-card-surface {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: 36px 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.65);
  transition: transform 300ms var(--mkt-ease), border-color 300ms ease-in-out,
    box-shadow 300ms ease-in-out;
}

.mkt-why-card:hover .mkt-why-card-surface {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--why-accent) 45%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--why-accent) 30%, transparent),
    0 24px 50px -28px rgba(0, 0, 0, 0.65);
}

/* Same conic-gradient + typed --angle + mask-exclude border-beam
   technique as #how-it-works' own .mkt-how-step-surface::before (that
   file's own comment on it explains the full mechanics/why -- not
   repeated here) -- @property --angle and @keyframes mkt-beam-spin are
   declared once, further down this file, and apply globally by name
   regardless of source order, same as @keyframes always have. 30%/60%
   idle/peak alpha (not a literal "10-15% brighter" figure) and a
   narrow ~24deg comet arc are the SAME deliberately-visible values
   #how-it-works' own border-beam was fixed to use after a real bug: a
   smaller alpha gap measured out to an imperceptible rendered pixel
   delta despite being a correct relative percentage (see that file's
   own comment on .mkt-how-step-surface::before for the full writeup
   and pixel-diff numbers -- that selector has since been bumped
   further/more aggressively several more times; this one, deliberately,
   has not). */
.mkt-why-card-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  --beam-idle-alpha: 30%;
  --beam-peak-alpha: 60%;
  background: conic-gradient(
    from var(--angle),
    color-mix(in srgb, var(--beam-color, var(--mkt-green)) var(--beam-idle-alpha), transparent) 0deg,
    color-mix(in srgb, var(--beam-color, var(--mkt-green)) var(--beam-idle-alpha), transparent) 336deg,
    color-mix(in srgb, var(--beam-color, var(--mkt-green)) var(--beam-peak-alpha), transparent) 348deg,
    color-mix(in srgb, var(--beam-color, var(--mkt-green)) var(--beam-idle-alpha), transparent) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 3px var(--beam-color, var(--mkt-green)));
  animation: mkt-beam-spin 10s linear infinite;
  animation-delay: var(--beam-delay, 0s);
}

/* Hover: "+15% glow intensity" -- both idle and peak alpha bumped by
   the same ~15-17% relative amount (30->35%, 60->70%), so the whole
   ring reads modestly brighter on hover while the traveling comet
   keeps the same relative contrast against its own idle ring. */
.mkt-why-card:hover .mkt-why-card-surface::before {
  --beam-idle-alpha: 35%;
  --beam-peak-alpha: 70%;
}

/* 60x60px glass icon container (spec), floating gently at rest, drift
   widening slightly on hover ("icon floats slightly more"). Centered
   horizontally via .mkt-why-card-surface's own text-align: center +
   align-items: center (see that rule's own comment) rather than a
   wrapper -- an earlier version wrapped this in .mkt-why-icon-wrap
   solely to confine a hover shimmer sweep to the icon zone; that
   shimmer effect was REMOVED entirely (Farshad report: a horizontal
   white/gray band sweeping behind the icon on hover, the same bug
   class as one already fixed and removed on #how-it-works -- see that
   section's own comment on .mkt-how-scanline for the full history),
   which also removed the wrapper's only reason to exist. */
.mkt-why-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 0 16px -4px var(--why-accent);
  color: var(--why-accent);
  margin-bottom: 20px;
  flex: 0 0 auto;
  animation: mkt-why-icon-float 5.5s ease-in-out infinite;
}

@keyframes mkt-why-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.mkt-why-card:hover .mkt-why-icon {
  animation: mkt-why-icon-float-hover 3.5s ease-in-out infinite;
}

@keyframes mkt-why-icon-float-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.mkt-why-icon svg {
  width: 28px;
  height: 28px;
}

.mkt-why-card-surface h3 {
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 14px;
  color: #F5F7FA;
}

.mkt-why-card-surface p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: #AEB6C2;
  margin: 0;
  max-width: 34ch;
}

/* Hidden until hover (opacity: 0 at rest), fading in/out on the same
   250-350ms ease-in-out timing already used for this card's other
   hover transitions (.mkt-why-card-surface's own border-color/
   box-shadow transition above) -- was previously always-visible and
   left-aligned; margin: 0 auto centers it now that the whole surface
   uses text-align: center, and .mkt-why-card-surface's align-items:
   center centers the icon/heading/body the same way. */
.mkt-why-accent-line {
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: var(--why-accent);
  margin: 24px auto 0;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.mkt-why-card:hover .mkt-why-accent-line {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mkt-why-card-surface {
    transition: none;
  }
  .mkt-why-card-surface::before {
    animation: none;
  }
  .mkt-why-accent-line {
    transition: none;
  }
  .mkt-why-icon,
  .mkt-why-card:hover .mkt-why-icon {
    animation: none;
  }
}

/* ── Why DBBackup: trust-badge row ───────────────────────────────────────
   4 items, thin vertical dividers between them on wide viewports;
   stacks to a single column with no dividers below 768px (a vertical
   divider between STACKED rows would read as a stray line attached to
   the wrong neighbor, same breakpoint .mkt-why-grid's own tablet step
   already uses). */
.mkt-trust-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mkt-trust-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 32px;
}

.mkt-trust-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-50%);
}

.mkt-trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--mkt-green);
  flex: 0 0 auto;
}

.mkt-trust-icon svg {
  width: 20px;
  height: 20px;
}

.mkt-trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mkt-trust-title {
  font-size: 15px;
  font-weight: 600;
  color: #F5F7FA;
}

.mkt-trust-sub {
  font-size: 13px;
  color: #8A93A0;
}

@media (max-width: 767px) {
  .mkt-trust-row {
    flex-direction: column;
    gap: 20px;
  }
  .mkt-trust-item:not(:first-child)::before {
    display: none;
  }
}

/* ── How It Works ─────────────────────────────────────────────────────── */
/* Redesigned twice: first pass replaced a horizontal connecting line with
   three premium cards + connector arrows/flowing-light between them;
   this pass removes those connectors entirely (a Farshad report called
   them "broken") in favor of a single-layer animated neon border-beam
   directly on each card -- no lines between cards at all anymore. */

/* Safety net for .mkt-how-step-surface::before's own filter: drop-shadow() (see
   its own comment below): filter effects legitimately paint beyond an
   element's layout box, and that painted "ink overflow" can count
   toward document.documentElement.scrollWidth even though
   getBoundingClientRect() never shows it -- a real page-level
   horizontal-overflow regression here once already (tests/
   test_products_dropdown.js's own responsive checks caught it against
   an earlier, heavier two-layer version of this effect). .mkt-hero has
   this exact same `overflow: hidden` for its own .mkt-hero-glow, for
   the identical reason. Plenty of headroom on every axis (120px
   vertical section padding, 20-32px .mkt-container side padding) for
   the beam's small glow to still read as intended -- this only stops
   it from ever reaching all the way to the true viewport edge. */
#how-it-works {
  overflow: hidden;
}

.mkt-how-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 900px) {
  .mkt-how-steps {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

/* Split outer/inner hover structure -- same established pattern as
   #features' own .mkt-why-card / .mkt-why-card-surface split (see
   index.html's comment on that pair for the full "why": the element
   whose :hover match matters must never be the one whose geometry
   moves, or a cursor sitting near an edge can un-hover/re-hover in an
   infinite flicker loop). Previously .mkt-how-step itself was BOTH the
   :hover-matching element AND the one transform: scale(1.02)'d on
   hover -- unlike the flicker bug (scale() from the center is edge-
   safe, so that specific failure mode never hit), a real Farshad
   report ("title/description text briefly jitters before settling")
   traced to this same self-referencing setup: hovering the card
   reflows/repaints its own text at a new sub-pixel scale on every
   animation frame while that SAME box is also what the browser is
   continuously hit-testing to decide whether :hover still applies,
   and any timing hiccup in that loop (GPU compositing, layout
   thrashing from the mask+filter already forcing their own stacking
   context) reads as text jitter. .mkt-how-step (outer) now only ever
   carries .mkt-fade-up's own scroll-reveal opacity/transform and the
   :hover TRIGGER; every visual hover effect (scale, border-color,
   box-shadow, the border-beam ring itself) moved to the new child
   .mkt-how-step-surface below, so the box that grows under the
   cursor is never the box being hover-matched. */
.mkt-how-step {
  height: 100%;
  /* Shared by all 3 cards -- only --beam-color/--beam-delay vary per
     step below (spec: "identical animation algorithm/keyframe
     structure, only color differs; same glow intensity"). 10s full
     loop -- within the spec'd 9-12s "slow, calm" range, not a fast
     pulse. --beam-idle-alpha/--beam-peak-alpha below are also fixed,
     non-per-card values, so glow intensity is identical too. Set here
     (outer) rather than the inner surface purely so it sits alongside
     the per-step color assignments below -- inherits down into
     .mkt-how-step-surface and its own ::before either way. */
  --beam-duration: 10s;
}

.mkt-how-step-surface {
  position: relative;
  /* Defense-in-depth alongside #how-it-works' own overflow: hidden
     above: guarantees the border-beam pseudo-element (::before below)
     can never visually extend past this card's own rounded-rectangle
     shape. */
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 36px 28px;
  background: var(--mkt-card-fill);
  border: 1px solid var(--mkt-card-border);
  border-radius: var(--mkt-radius-card);
  /* Glass card surface + resting depth -- two small, purely additive
     polish gaps found while auditing this section against a "premium
     rendering architecture" brief (Apple/Stripe/Linear/Raycast/Vercel/
     Cloudflare-grade minimal elegance), neither touching the hover/
     jitter mechanics documented below at all:
     (1) backdrop-filter was present on every OTHER glass surface on
     this page (.mkt-why-card-surface's own blur(20px), Pricing's
     blur(28-32px), even this card's own .mkt-how-icon at blur(16px))
     but missing here -- this card was the one flat exception, not a
     deliberate choice (no comment anywhere says otherwise). Added at
     the same blur(20px) as its direct sibling, .mkt-why-card-surface,
     for a consistent "glass" register across both card sections.
     (2) box-shadow was already IN this element's own transition list
     (right below) so it would animate smoothly on hover, but never had
     a resting-state value to transition FROM -- the card was flat
     until the exact moment of hover. A soft, static ambient shadow at
     rest (same shape/tone as .mkt-why-card-surface's own resting
     shadow) gives these cards real depth even before interaction,
     matching how Stripe/Linear-style cards always read as slightly
     "risen," never flat-until-touched. */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.65);
  /* border-color/box-shadow/background match transform's own 350ms
     var(--mkt-ease) exactly, same reasoning as .mkt-why-card-surface's
     own transition above -- properties on the SAME element should
     finish together. No opacity here: that's the OUTER .mkt-how-step's
     own .mkt-fade-up scroll-reveal property now, never a hover-driven
     one on this inner element. Never `transition: all` -- an explicit
     list keeps this element from ever accidentally transitioning a
     property (font-size, letter-spacing, ...) that would touch text
     rendering. */
  transition: transform 350ms var(--mkt-ease), border-color 350ms var(--mkt-ease),
    box-shadow 350ms var(--mkt-ease), background 350ms var(--mkt-ease);
  /* Fixes a real Farshad report (text visibly wobbles/shimmers for a
     brief moment on hover before settling). Two layered causes, both
     addressed here:

     (1) will-change: transform pre-promotes this element to its own
     GPU compositing layer in the RESTING state, not first-triggered by
     :hover -- paying that one-time promotion cost up front instead of
     on the hover transition's own first frame (a first-frame layer-
     promotion flash was the original root cause tests/test_cta_hover_
     jitter.js's own frame-by-frame bounding-rect sampler couldn't
     catch, since it measures LAYOUT position, not what's actually
     painted).

     (2) The hover transform itself was scale(1.02) -- a scale forces
     the browser to re-RASTERIZE the text at a new effective size on
     every intermediate frame of the transition (continuously
     interpolating sub-pixel glyph hinting for 350-500ms), which is
     what "shimmer" literally is. translateY(-5px) below replaces it:
     translation only ever MOVES an already-rasterized layer bitmap,
     never re-rasterizes it, so text pixels are bit-for-bit identical
     before/during/after the hover transition. backface-visibility:
     hidden is the classic companion fix for the same class of WebKit/
     Blink transformed-element flicker, and -webkit-font-smoothing/
     -moz-osx-font-smoothing keep glyph antialiasing IDENTICAL across
     the layer-promotion boundary (inherited by the h3/p/label text
     below) instead of the browser silently switching rendering modes
     once this element is promoted. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Per-step color only -- duration/glow are shared above, delay is
   staggered by a flat 3s per card (spec range: 2.5-3s) so the three
   beams are visibly out of phase. With an IDENTICAL 10s duration on
   all three, an offset of 3s never evenly divides it (10 % 3 = 1 != 0),
   so a constant 3s (and 6s) gap between cards NEVER coincides again
   once it doesn't coincide at t=0 -- the three peak moments (see
   .mkt-how-step-surface::before's own comment on the conic-gradient's stops)
   stay permanently interleaved, never simultaneous, for as long as the
   page is open. */
.mkt-how-step.is-connect {
  --beam-color: #22C55E;
  --beam-delay: 0s;
}

.mkt-how-step.is-backup {
  --beam-color: #06B6D4;
  --beam-delay: 3s;
}

.mkt-how-step.is-restore {
  --beam-color: #3B82F6;
  --beam-delay: 6s;
}

/* Animated neon border-beam: ONE thin conic-gradient ring, masked down
   to just its own thickness by subtracting the content-box from the
   border-box (the standard "gradient border" technique -- a real
   `border` can't itself be an animated gradient). Single layer only --
   no second, blurred duplicate element behind it; the glow is a single
   small filter: drop-shadow() call on this SAME element, tight enough
   to read as "neon" without stacking a whole extra blurred box.

   The angle is animated via the --angle custom property (registered
   below as a typed <angle> so the browser can actually interpolate it),
   fed into the gradient's own `from var(--angle)` -- NOT via
   transform: rotate() on the element itself. That distinction matters:
   a rounded-RECTANGLE mask is not rotationally symmetric the way a
   circle is, so rotating the whole element (mask included) via
   transform tilts the ring's own shape away from the card's actual,
   never-rotating border at any angle that isn't a multiple of 90deg --
   the ring's now-diagonal edge cuts visibly across the static card,
   exactly the "random diagonal line through the card" bug this
   replaces. Animating --angle instead only rotates WHERE the light
   sits within the gradient's color function; the mask (and therefore
   the ring's shape) never moves, staying perfectly aligned with the
   card's real rounded-rectangle border for the entire loop.

   The ring is never fully transparent: --beam-idle-alpha (30%) tints
   the WHOLE ring at all times as the "resting/idle glow", and a
   traveling comet arc peaks at --beam-peak-alpha (60%).

   That peak value is a deliberate, DOCUMENTED deviation from an
   earlier brief's literal "10-15% brighter than idle" figure -- kept
   at first (34%, a 13.3% relative bump), but a Farshad report ("no
   visible motion, just a static colored border") turned out to be
   real: measured directly (Playwright screenshots of the live ring,
   sampled seconds apart, diffed pixel-by-pixel along the border) the
   idle-to-peak transition at 30/34% only ever produced a combined
   |dR|+|dG|+|dB| delta of ~14 out of a possible 765 -- alpha
   compositing over this card's near-black background is roughly
   linear at low alpha, so output_peak - output_idle scales with the
   RAW percentage-point gap (4 points), not the relative ratio (13%);
   a 10-15%-relative bump at these alpha levels is mathematically
   incapable of producing a humanly perceptible change, regardless of
   how it's phrased. Doubling the peak (30% -> 60%, a 26-point gap)
   was verified the same way to produce a clearly visible delta.
   Narrowing the transition's angular width (330deg/336deg -> 348deg
   below, was 300deg -> 330deg) also concentrates that brightness into
   a compact ~24deg comet instead of a smeared 60deg region, so the
   eye reads it as a single traveling highlight, not a slow diffuse
   pulse -- still translucent (peak not opaque) and still a single
   un-stacked layer, so it stays "premium," not garish.

   Bumped again, +30% relative on both values (30->39%, 60->78%) --
   a Farshad report ("present and animating, but still too faint")
   after the 30/60% fix above. Applied to BOTH idle and peak so their
   ratio (and therefore the comet's relative contrast against its own
   idle ring) stays exactly 2:1, unchanged -- this is a flat brightness
   increase, not a contrast change.

   Bumped a THIRD time, this time deliberately abandoning the "small
   relative percentage, ratio preserved" approach entirely -- a Farshad
   report against the LIVE deployment (screenshot from infracherry.com,
   not a local build) confirmed the 39%/78% fix above was genuinely
   deployed (verified by fetching the live stylesheet directly, ruling
   out a stale-deploy explanation) but still read as "barely visible."
   Root cause this time wasn't the alpha gap's math -- it was the glow
   mechanism itself: filter: drop-shadow(0 0 3px ...) has only a 3px
   blur radius, so even a fully-opaque peak paints a glow too tight to
   read as "neon" at normal viewing distance/scale, the same way a
   3px-blurred light source looks like a hard-edged smudge rather than
   a glow. Peak alpha went to 100% (fully opaque at the comet's tip)
   and idle alpha to 60%, with the blur radius up from 3px to 12px.

   Bumped a FOURTH time, explicitly "~10x, dramatic, not incremental"
   per a Farshad report that 60%/100%/12px was STILL too faint on this
   specific section (the #features/.mkt-why-card-surface::before beam a
   few hundred lines up is a separate, unrelated selector, untouched by
   any of these bumps -- confirmed pixel-identical before/after by a
   direct screenshot diff each round). Peak alpha (100%) has no
   headroom left, so this round's "10x" comes from the two properties
   that still had massive headroom: blur radius 12px -> 60px (5x), and
   the ring's own thickness (padding, i.e. how wide a band the mask
   carves out of the gradient before drop-shadow ever touches it)
   2px -> 4px (2x) -- roughly an order of magnitude more painted+blurred
   "neon" area overall, while idle alpha only nudged up (60% -> 75%).

   FIFTH change, idle alpha ONLY: 75% -> 20%, a real course-correction
   rather than another bump. Verified first (computed-style angle
   sampled twice 600ms apart, plus a screenshot sequence) that the
   animation itself was genuinely running, ruling out a stuck/paused
   keyframe -- it was. The actual bug: 75% idle vs. 100% peak is only a
   25-point gap, and at these already-high alpha levels both ends read
   as "fully lit" against this card's near-black background, so the
   whole ring painted as one uniform bright outline with no
   perceptible motion, exactly the visual regression a Farshad report
   described ("looks like a static bright border, not a moving light").
   100-point gap now (20% resting vs. 100% peak) restores the comet as
   a clearly distinct highlight against a genuinely subtle idle ring --
   peak alpha, blur radius, ring thickness, duration, stagger, and
   colors are all untouched. Still ONE filter: drop-shadow() call on
   this ONE pseudo-element -- no second blurred layer stacked behind
   it. Selector renamed .mkt-how-step::before -> .mkt-how-step-surface::
   before as part of an earlier task's OTHER fix (the outer/inner hover
   split below) -- still scoped to these 3 cards only, still cannot
   cascade to .mkt-why-card-surface::before, a completely different
   class name. */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.mkt-how-step-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px;
  --beam-idle-alpha: 20%;
  --beam-peak-alpha: 100%;
  background: conic-gradient(
    from var(--angle),
    color-mix(in srgb, var(--beam-color, var(--mkt-green)) var(--beam-idle-alpha), transparent) 0deg,
    color-mix(in srgb, var(--beam-color, var(--mkt-green)) var(--beam-idle-alpha), transparent) 336deg,
    color-mix(in srgb, var(--beam-color, var(--mkt-green)) var(--beam-peak-alpha), transparent) 348deg,
    color-mix(in srgb, var(--beam-color, var(--mkt-green)) var(--beam-idle-alpha), transparent) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  /* will-change: filter -- this pseudo-element already animates via a
     typed custom property (--angle) feeding a conic-gradient, which
     genuinely repaints this element every frame (background-image
     isn't a directly-composited property the way transform/opacity
     are); the explicit hint here promotes IT to its own independent
     GPU compositing layer so that per-frame repaint stays confined to
     this pseudo-element alone and can never bleed into repainting the
     surrounding text -- the architectural split the border-beam
     (Layer 1) and typography (Layer 4) need to stay truly isolated
     from each other. */
  will-change: filter;
  filter: drop-shadow(0 0 60px var(--beam-color, var(--mkt-green)));
  transition: filter 350ms var(--mkt-ease);
  animation: mkt-beam-spin var(--beam-duration, 10s) linear infinite;
  animation-delay: var(--beam-delay, 0s);
}

@keyframes mkt-beam-spin {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

/* Hover: "slightly stronger neon glow" (spec) -- widens the SAME single
   drop-shadow's blur radius rather than touching --beam-idle-alpha/
   --beam-peak-alpha (already at their sensible extremes -- see this
   selector's own comment above), so the boost is a smooth, native
   `filter` transition (no @property registration needed the way
   animating a color-mix() percentage smoothly would require) and never
   risks looking like a second, stacked glow layer. */
.mkt-how-step:hover .mkt-how-step-surface::before {
  filter: drop-shadow(0 0 72px var(--beam-color, var(--mkt-green)));
}

@media (prefers-reduced-motion: reduce) {
  .mkt-how-step-surface::before {
    animation: none;
  }
}

/* Stagger only opacity's delay -- .mkt-how-step (outer) only ever
   transitions opacity/transform via .mkt-fade-up's own base rule now
   (transform here is PURELY the scroll-reveal translateY, never a
   hover-driven property -- see .mkt-how-step-surface below for the
   split that makes this safe), so unlike the single combined 4-property
   list this used to need, a 2-value list (opacity, transform) covers
   exactly what .mkt-fade-up itself transitions. nth-of-type(2)/(3), not
   (3)/(5) -- with the connector divs removed, .mkt-how-steps' only
   children are the three .mkt-how-step divs themselves now. */
.mkt-how-step:nth-of-type(2) { transition-delay: 0.1s, 0s; }
.mkt-how-step:nth-of-type(3) { transition-delay: 0.2s, 0s; }

/* translateY-only lift (spec: never scale() on hover -- see this rule's
   own text-rendering comment above on .mkt-how-step-surface for the
   full "why"). Combined with a brighter border, a deeper two-layer
   shadow, and a barely-there background brighten (spec: "slightly
   brighter surface") via the same per-card --beam-color the icon/border
   already use, so the whole hover state reads as ONE coherent "this
   card lifted toward you," not several unrelated property changes. */
.mkt-how-step:hover .mkt-how-step-surface {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.18);
  background: color-mix(in srgb, var(--beam-color, var(--mkt-green)) 4%, var(--mkt-card-fill));
  /* Second layer is the EXACT same shadow as this element's own resting
     state above (0 24px 50px -28px rgba(0,0,0,0.65)) -- it never
     visually changes on hover, only the new colored glow layer in
     front of it does, so box-shadow's 350ms transition only has one
     layer actually animating rather than crossfading two different
     dark shadows at once. Same "resting shadow unchanged, glow layer
     added" pattern .mkt-why-card-surface's own hover rule already uses. */
  box-shadow: 0 28px 48px -20px var(--mkt-glow), 0 24px 50px -28px rgba(0, 0, 0, 0.65);
}

.mkt-how-step-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkt-green);
  margin-bottom: 16px;
}

/* Glass icon container, replacing the old plain number circle -- the
   icon (database/shield-check/rotate-ccw, filled in by index.html's own
   buildLucideIcon() script) is now the card's visual centerpiece, not a
   number. Colored per step via --beam-color (already unique per card
   above), so the icon glow uses the SAME palette as the border-beam
   rather than a second, separately-defined color set.

   Idle float + glow-breathe (spec: "elegant floating... almost
   invisible... similar to Apple VisionOS," same recipe already proven
   on Pricing's own .mkt-price-icon) replace the old hover-ONLY lift --
   the float now runs continuously, at rest AND hovered; hover changes
   ONLY the glow (a separate, brighter breathe keyframe swapped in
   below), never the icon's own position, per this section's own
   (deliberately more restrained than Pricing's) spec: "Hover should
   only increase glow intensity slightly." No `transition` property
   here at all -- transform/box-shadow are ALWAYS driven by one of the
   two keyframe animations below, never by a discrete hover transition
   (an animation wins over a transition on the same property regardless
   of specificity, so a leftover `transition: box-shadow` here would be
   silently ineffective). */
.mkt-how-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--beam-color, var(--mkt-green));
  will-change: transform;
  animation: mkt-how-icon-float 4.5s ease-in-out infinite,
    mkt-how-icon-breathe 6s ease-in-out infinite;
}

.mkt-how-icon svg {
  width: 26px;
  height: 26px;
}

@keyframes mkt-how-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes mkt-how-icon-breathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 14px -4px var(--beam-color, var(--mkt-green));
  }
  50% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 20px -4px var(--beam-color, var(--mkt-green));
  }
}

/* Hover: glow only, position UNCHANGED (spec) -- the float keyframe
   above keeps running exactly as-is; only the breathe animation swaps
   to a brighter pair of resting/peak values. */
.mkt-how-step:hover .mkt-how-icon {
  animation: mkt-how-icon-float 4.5s ease-in-out infinite,
    mkt-how-icon-breathe-hover 6s ease-in-out infinite;
}

@keyframes mkt-how-icon-breathe-hover {
  0%, 100% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.1),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 22px -2px var(--beam-color, var(--mkt-green));
  }
  50% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.1),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 28px -2px var(--beam-color, var(--mkt-green));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-how-icon,
  .mkt-how-step:hover .mkt-how-icon {
    animation: none;
  }
}

.mkt-how-step h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--mkt-text);
}

.mkt-how-step p {
  font-size: 15px;
  line-height: 1.55;
  max-width: 26ch;
  margin: 0;
  color: var(--mkt-muted);
}

/* ── Pricing ──────────────────────────────────────────────────────────── */

/* Monthly/Yearly toggle -- Monthly is the only functional state; Yearly
   carries the `disabled` attribute (index.html), so this is styling for
   an inert control, not a real interaction to wire up. */
.mkt-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  margin: 0 auto 48px;
  padding: 4px;
  background: var(--mkt-card-fill);
  border: 1px solid var(--mkt-card-border);
  border-radius: var(--mkt-radius-pill);
}

.mkt-pricing-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--mkt-radius-pill);
  border: none;
  background: transparent;
  color: var(--mkt-muted);
  font-family: var(--mkt-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.mkt-pricing-toggle-btn.is-active {
  background: var(--mkt-green);
  color: #06130C;
}

.mkt-pricing-toggle-btn:focus-visible {
  outline: 2px solid var(--mkt-green);
  outline-offset: 2px;
}

.mkt-pricing-toggle-btn:disabled {
  cursor: not-allowed;
  color: var(--mkt-muted-2);
  opacity: 0.7;
}

.mkt-pricing-toggle-badge {
  padding: 2px 8px;
  border-radius: var(--mkt-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--mkt-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mkt-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 768px) {
  .mkt-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Intermediate tablet step (spec: "2-3 cards per row") between the 2-up
   breakpoint above and the 5-up desktop one below -- without this, a
   1000-1199px viewport would jump straight from 2 columns to 5,
   skipping the "3" the brief explicitly asks for. */
@media (min-width: 1000px) {
  .mkt-pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .mkt-pricing-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Two-row pricing layout (migrations/041_add_plus_plan.sql's Plus tier):
   each row is its own .mkt-pricing-grid[data-pricing-row] with EXACTLY 3
   cards (js/marketing-pricing.js's PRICING_ROWS) -- higher specificity
   (attribute selector) than the flat 5-up rule directly above, so a
   3-card row sits at 3 columns from the tablet breakpoint onward instead
   of stretching toward a 5-up layout meant for a single flat row of every
   plan. Row label sits centered above its own grid, small/uppercase to
   read as a sub-heading, not a competing section title. */
@media (min-width: 1000px) {
  .mkt-pricing-grid[data-pricing-row] {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mkt-pricing-row-label {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mkt-muted);
  margin: 0 0 28px;
}

.mkt-pricing-row-label:not(:first-of-type) {
  margin-top: 104px;
  margin-bottom: 32px;
}

/* "Compare Plans" button -- sits directly under the section lede,
   opens #compare-plans-modal (js/marketing-compare-plans.js). Same
   .mkt-btn.mkt-btn-outline base every other secondary CTA on this page
   already uses; the extra top margin separates it from the lede text
   above, and the bottom margin (12-16px spacing convention used
   elsewhere on this page, e.g. .mkt-pricing-row-label's own gap from
   its grid) keeps it from touching .mkt-pricing-toggle directly below
   -- that toggle's own margin-top is 0 (its 48px margin is bottom-only,
   for the price grid below IT), so without this the two controls
   visually ran together with no gap at all. */
.mkt-compare-plans-btn {
  position: relative;
  margin: 20px 0 16px;
  /* Self-contained, same reasoning as .mkt-why-card-surface/.mkt-how-
     step-surface's own overflow: hidden a few hundred lines up: keeps
     the neon border-beam ring's drop-shadow glow (see ::before below)
     clipped tightly to this button's own pill shape, never spilling
     out into the page -- no second, section-level overflow: hidden
     needed the way those cards' outer sections have (#features/
     #how-it-works) since this is one small, centered, already-inset
     button, not a multi-card grid running close to the section's own
     edges. */
  overflow: hidden;
  /* Neon color: the exact same info-blue the Admin Dashboard's
     "About [Page]" button convention uses (.admin-about-btn / .admin-
     badge, css/admin-dashboard.css) -- var(--app-info) there resolves
     to #3B82F6 (css/variables.css). This page loads no dashboard CSS
     at all, so the raw hex is used directly rather than importing that
     variable -- same approach .mkt-how-step.is-restore already takes a
     few hundred lines up, which happens to use this identical value. */
  --beam-color: #3B82F6;
}

/* Animated neon border-beam -- the SAME single-layer conic-gradient
   ring technique as .mkt-how-step-surface::before above (see that
   rule's own extensive comment for the full mask/drop-shadow mechanics
   and why each value was chosen the way it was): one thin masked ring
   plus one drop-shadow filter call, no second blurred layer, no heavy
   filter stack. --angle and @keyframes mkt-beam-spin are already
   registered/defined above for that same selector -- reused as-is here
   rather than re-declared, since @property registrations and
   @keyframes are global, not selector-scoped. Ring thickness (2px,
   half the cards' 4px) and blur radius (10px, a small fraction of the
   cards' tuned-up 60px) are both scaled down from the cards' own
   values to match this element's much smaller scale (a 44px-tall pill
   button, not a 300+px card) -- keeps the effect a "subtle, slow
   pulse" per spec rather than the cards' deliberately more dramatic
   treatment, and stays lightweight (one small conic-gradient + one
   small drop-shadow, painted only within this button's own tiny box
   thanks to the overflow: hidden above). Idle/peak alpha (20%/100%)
   and the 10s duration are copied unchanged from the cards' own
   already-tuned values for visual consistency site-wide. */
.mkt-compare-plans-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  --beam-idle-alpha: 20%;
  --beam-peak-alpha: 100%;
  background: conic-gradient(
    from var(--angle),
    color-mix(in srgb, var(--beam-color) var(--beam-idle-alpha), transparent) 0deg,
    color-mix(in srgb, var(--beam-color) var(--beam-idle-alpha), transparent) 336deg,
    color-mix(in srgb, var(--beam-color) var(--beam-peak-alpha), transparent) 348deg,
    color-mix(in srgb, var(--beam-color) var(--beam-idle-alpha), transparent) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  will-change: filter;
  filter: drop-shadow(0 0 10px var(--beam-color));
  transition: filter 350ms var(--mkt-ease);
  animation: mkt-beam-spin 10s linear infinite;
}

/* Hover: same "slightly stronger neon glow" convention as .mkt-how-step:
   hover .mkt-how-step-surface::before above -- widens the same single
   drop-shadow's blur radius, nothing else. */
.mkt-compare-plans-btn:hover::before {
  filter: drop-shadow(0 0 16px var(--beam-color));
}

/* Reduced motion: a clean, uniformly-lit static ring rather than
   freezing mid-rotation (which would leave one small bright arc fixed
   at a single point plus a mostly-dim ring the rest of the way around
   -- correct for the cards, where that's simply an unmodified freeze
   of an already-large, more elaborate effect, but a small button
   reads that fixed bright spot as an odd artifact rather than "a
   static neon border"). Overriding the background to a flat, solid
   color-mix tint gives an even, calm, non-animated neon-colored
   border instead, matching the spec'd reduced-motion fallback
   literally. */
@media (prefers-reduced-motion: reduce) {
  .mkt-compare-plans-btn::before {
    animation: none;
    background: color-mix(in srgb, var(--beam-color) 70%, transparent);
  }
}

/* Compare-plans modal -- self-contained (this page loads no dashboard
   CSS), built from the same --mkt-* tokens every other component on this
   page already uses, rather than a second, inconsistent design system. */
.mkt-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 5, 6, 0.72);
  backdrop-filter: blur(6px);
}

.mkt-modal-overlay[hidden] {
  display: none;
}

.mkt-modal {
  width: 100%;
  max-width: 1100px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--mkt-card);
  border: 1px solid var(--mkt-card-border);
  border-radius: var(--mkt-radius-card);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.mkt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--mkt-card-border);
  flex-shrink: 0;
}

.mkt-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--mkt-text);
}

.mkt-modal-close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--mkt-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 200ms ease, background 200ms ease;
}

.mkt-modal-close:hover,
.mkt-modal-close:focus-visible {
  color: var(--mkt-text);
  background: rgba(255, 255, 255, 0.08);
}

.mkt-modal-body {
  overflow: auto;
  padding: 0;
  flex: 1;
}

.mkt-compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mkt-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  white-space: nowrap;
}

/* Header Columns */
.mkt-compare-table thead th {
  position: sticky;
  top: 0;
  background: #0B101B;
  color: var(--mkt-text);
  z-index: 10;
  padding: 20px 14px 16px;
  border-bottom: 1px solid var(--mkt-card-border);
  vertical-align: bottom;
  text-align: center;
  transition: background 200ms ease;
}

.mkt-compare-table thead th:first-child {
  text-align: left;
  min-width: 230px;
  width: 250px;
  background: #0B101B;
  z-index: 11;
  padding-left: 24px;
}

.mkt-compare-corner-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mkt-text);
  letter-spacing: -0.01em;
}

.mkt-compare-corner-sub {
  font-size: 12px;
  color: var(--mkt-muted);
  margin-top: 3px;
  font-weight: 400;
}

/* Header Plan Card Elements */
.mkt-compare-th {
  min-width: 130px;
}

.mkt-compare-th-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.mkt-compare-plan-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--plan-accent, var(--mkt-green)) 15%, transparent);
  color: var(--plan-accent, var(--mkt-green));
  border: 1px solid color-mix(in srgb, var(--plan-accent, var(--mkt-green)) 30%, transparent);
}

.mkt-compare-plan-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.mkt-compare-plan-emoji {
  font-size: 16px;
  line-height: 1;
}

.mkt-compare-plan-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--mkt-text);
  letter-spacing: -0.01em;
}

.mkt-compare-plan-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--mkt-text);
  letter-spacing: -0.02em;
}

.mkt-compare-price-per {
  font-size: 12px;
  font-weight: 400;
  color: var(--mkt-muted);
}

.mkt-compare-cta {
  margin-top: 4px;
  width: 100%;
  max-width: 116px;
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
}

/* Pro Column Special Emphasis */
.mkt-compare-table th.is-pro {
  background: color-mix(in srgb, var(--mkt-green) 8%, #0B101B);
  border-left: 1px solid color-mix(in srgb, var(--mkt-green) 30%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--mkt-green) 30%, transparent);
  box-shadow: 0 -4px 20px color-mix(in srgb, var(--mkt-green) 15%, transparent);
}

.mkt-compare-table th.is-pro .mkt-compare-plan-badge {
  background: var(--mkt-green);
  color: #040810;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.mkt-compare-table td.is-pro-col {
  background: color-mix(in srgb, var(--mkt-green) 4%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--mkt-green) 18%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--mkt-green) 18%, transparent);
}

/* Table Rows & Cells */
.mkt-compare-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  color: var(--mkt-muted);
  transition: background 150ms ease, color 150ms ease;
}

.mkt-compare-table td:first-child {
  text-align: left;
  padding-left: 24px;
  color: var(--mkt-text);
  font-weight: 500;
  white-space: normal;
}

.mkt-compare-table tbody tr {
  transition: background 150ms ease;
}

.mkt-compare-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

.mkt-compare-table tbody tr:hover td.is-pro-col {
  background: color-mix(in srgb, var(--mkt-green) 7%, transparent);
}

.mkt-compare-table tbody tr:hover td:first-child {
  color: var(--mkt-text);
}

/* Label Cell Layout & Icons */
.mkt-compare-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mkt-compare-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--mkt-muted);
  flex-shrink: 0;
  transition: all 150ms ease;
}

.mkt-compare-table tbody tr:hover .mkt-compare-row-icon {
  color: var(--mkt-green);
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
}

.mkt-compare-row-icon svg {
  width: 15px;
  height: 15px;
}

.mkt-compare-label-text {
  font-size: 13px;
  line-height: 1.3;
}

/* Tooltip Trigger & Popover */
.mkt-compare-info-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  cursor: help;
  margin-left: 2px;
  transition: color 150ms ease;
}

.mkt-compare-info-btn svg {
  width: 14px;
  height: 14px;
}

.mkt-compare-info-btn:hover,
.mkt-compare-info-btn:focus-visible {
  color: var(--mkt-green);
}

.mkt-compare-info-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #18181B;
  color: #E4E4E7;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 100;
  text-align: left;
}

.mkt-compare-info-btn:hover::after,
.mkt-compare-info-btn:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Value Formatting & Hierarchy */
.mkt-compare-val {
  font-weight: 700;
  color: #F3F4F6;
  font-size: 13.5px;
}

.mkt-compare-badge-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 600;
  color: var(--mkt-text);
}

/* Check & Dash Indicators */
.mkt-compare-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mkt-green);
  font-weight: 700;
  font-size: 15px;
}

.mkt-compare-check-icon {
  width: 16px;
  height: 16px;
  color: var(--mkt-green);
  display: inline-block;
  vertical-align: middle;
}

.mkt-compare-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.22);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}

/* Mobile: horizontal snap carousel (spec) instead of a single stacked
   column -- each card is most of the viewport wide and snaps to center
   as the visitor swipes, rather than a long vertical scroll through 5
   full-height cards. Negative margin + matching padding bleeds the
   scroll track to the true viewport edges (so the next/previous card
   peeks in from the side, the standard "there's more, keep scrolling"
   affordance) while .mkt-container's own side padding still applies to
   everything else in this section. Scrollbar hidden (still fully
   scrollable/swipeable via touch or trackpad -- only the visible
   scrollbar chrome is suppressed, same "clean" bar this page's brief
   asks for elsewhere) since a thin gray OS scrollbar under 5 glowing
   glass cards reads as a debugging artifact, not a deliberate carousel. */
@media (max-width: 767px) {
  .mkt-pricing-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    margin: 0 -20px;
    padding: 4px 20px 12px;
    scrollbar-width: none;
  }
  .mkt-pricing-grid::-webkit-scrollbar {
    display: none;
  }
  .mkt-price-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

/* Per-plan identity tokens (spec: "each card should have its own
   identity while remaining visually consistent") -- one accent color
   drives the icon glow, badge color, hover border/shadow tint, and (for
   is-easy/is-lite/is-pro/is-max) a very subtle background tint via
   color-mix() further down, all from this single source per card so
   nothing drifts out of sync. Free stays fully neutral (no background
   color-mix rule at all, see .mkt-price-card-surface's own background
   below) -- spec: "neutral charcoal background." Colors deliberately
   desaturated/soft (never a saturated gradient anywhere in this
   section, per the brief) -- Pro's "emerald" is a visibly deeper,
   calmer green than Free's own brand --mkt-green specifically so the
   two read as distinct tiers, not the same color reused. */
.mkt-price-card.is-free {
  --plan-accent: var(--mkt-green);
}
.mkt-price-card.is-easy {
  --plan-accent: #2DD4BF;
}
.mkt-price-card.is-plus {
  --plan-accent: #818CF8;
}
.mkt-price-card.is-lite {
  --plan-accent: #22D3EE;
}
.mkt-price-card.is-pro {
  --plan-accent: #10B981;
}
.mkt-price-card.is-max {
  --plan-accent: #D4AF6A;
}

.mkt-price-card {
  height: 100%;
}

/* Split outer/inner hover structure -- same established pattern as
   #features'/#how-it-works' own cards (see index.html's own comment on
   .mkt-why-card-surface for the full "why": the element whose :hover
   match matters must never be the one whose geometry moves). .mkt-
   price-card (outer) only ever carries .mkt-fade-up's scroll-reveal +
   the :hover trigger; every visual hover effect (scale, lift,
   border/shadow/background brightening) lives here on the inner
   .mkt-price-card-surface instead -- this is what lets the hover spec
   below combine BOTH scale(1.025) and translateY(-6px) safely: a
   directional translate on the same box that also receives :hover is
   exactly the flicker-loop bug tests/test_cta_hover_jitter.js exists to
   catch (a cursor resting near an edge un-hovers/re-hovers as the box
   moves out from under it), which is why the OLD single-element version
   of this card was scale-only with a bottom transform-origin (see git
   history) rather than a real lift. will-change: transform is set up
   front, in the resting rule -- a real Farshad report on #how-it-works'
   own identical scale+long-duration combination traced to a first-frame
   GPU-layer-promotion artifact otherwise (see that section's own
   comment on .mkt-how-step-surface for the full writeup); pre-promoting
   here avoids ever shipping that bug on this section too. */
.mkt-price-card-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 34px 26px;
  background: rgba(20, 24, 28, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 24px 60px -25px rgba(0, 0, 0, 0.75),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.09);
  transform-origin: 50% 60%;
  transition: transform 350ms var(--mkt-ease), border-color 350ms var(--mkt-ease),
    box-shadow 350ms var(--mkt-ease), background 350ms var(--mkt-ease);
  will-change: transform;
}

.mkt-price-card.is-free .mkt-price-card-surface {
  background: color-mix(in srgb, var(--plan-accent) 2.5%, rgba(20, 24, 28, 0.62));
  box-shadow: 0 24px 60px -25px rgba(0, 0, 0, 0.75),
              0 0 35px -18px color-mix(in srgb, var(--plan-accent) 15%, transparent),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.08);
}
.mkt-price-card.is-easy .mkt-price-card-surface {
  background: color-mix(in srgb, var(--plan-accent) 3.5%, rgba(20, 24, 28, 0.62));
  box-shadow: 0 24px 60px -25px rgba(0, 0, 0, 0.75),
              0 0 38px -18px color-mix(in srgb, var(--plan-accent) 18%, transparent),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.09);
}
.mkt-price-card.is-plus .mkt-price-card-surface {
  background: color-mix(in srgb, var(--plan-accent) 4%, rgba(20, 24, 28, 0.62));
  box-shadow: 0 24px 60px -25px rgba(0, 0, 0, 0.75),
              0 0 40px -18px color-mix(in srgb, var(--plan-accent) 20%, transparent),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.09);
}
.mkt-price-card.is-lite .mkt-price-card-surface {
  background: color-mix(in srgb, var(--plan-accent) 4%, rgba(20, 24, 28, 0.62));
  box-shadow: 0 24px 60px -25px rgba(0, 0, 0, 0.75),
              0 0 42px -18px color-mix(in srgb, var(--plan-accent) 20%, transparent),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.09);
}

.mkt-price-card:hover .mkt-price-card-surface {
  transform: scale(1.025) translateY(-6px);
  border-color: color-mix(in srgb, var(--plan-accent) 55%, rgba(255, 255, 255, 0.22));
  box-shadow: 0 35px 75px -24px color-mix(in srgb, var(--plan-accent) 38%, transparent),
              0 30px 60px -25px rgba(0, 0, 0, 0.75),
              inset 0 1px 2px 0 rgba(255, 255, 255, 0.22);
  background: color-mix(in srgb, var(--plan-accent) 8.5%, rgba(20, 24, 28, 0.68));
}

.mkt-price-card.is-featured {
  margin-top: 0;
  margin-bottom: 0;
}

.mkt-price-card.is-featured .mkt-price-card-surface {
  padding-top: 48px;
  padding-bottom: 48px;
  background: color-mix(in srgb, var(--plan-accent) 6.5%, rgba(20, 24, 28, 0.72));
  border: 1px solid color-mix(in srgb, var(--plan-accent) 55%, var(--mkt-card-border));
  box-shadow: 0 0 85px -15px color-mix(in srgb, var(--plan-accent) 50%, transparent),
              0 28px 70px -25px rgba(0, 0, 0, 0.85),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.22);
}

.mkt-price-card.is-max .mkt-price-card-surface {
  background: color-mix(in srgb, var(--plan-accent) 4%, rgba(14, 16, 20, 0.75));
  box-shadow: 0 0 48px -18px color-mix(in srgb, var(--plan-accent) 24%, transparent),
              0 24px 60px -25px rgba(0, 0, 0, 0.8),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
}

/* 64x64 glass icon container (spec) -- same established glassmorphism
   recipe as .mkt-how-icon/.mkt-why-icon (inset highlight + outer colored
   glow via box-shadow, backdrop blur, thin border), just larger and
   circular instead of a rounded square. The floating animation is
   deliberately tiny (3px, 4.5s, ease-in-out) -- spec: "should feel
   almost invisible... similar to Apple VisionOS interface elements," a
   completely different register from .mkt-how-icon's own faster/bigger
   hover-only lift. A second, independent animation on the SAME element
   "breathes" the glow's blur radius very slightly (spec: "Glow: breathes
   slightly") -- two comma-separated animations touching different
   properties (transform vs. box-shadow) never conflict.

   flex-shrink: 0 -- ROOT CAUSE of a real bug, found via actual DevTools
   Protocol measurement (getComputedStyle + getBoundingClientRect), not
   guessed: this element is a flex child of .mkt-price-card-surface
   (display:flex; flex-direction:column). Pro's card (.is-featured) has
   46px top/bottom padding on that surface vs every other plan's 34px --
   24px more -- inside a surface height that's stretched equal across the
   whole grid row (.mkt-pricing-grid's align-items:stretch). That 24px
   padding deficit has to come from somewhere: without flex-shrink:0, this
   was the one flex child with a large enough explicit height (64px) to
   visibly absorb nearly all of it, rendering at computed height:40px
   width:64px (confirmed via DevTools) -- a squished oval, not a circle,
   ONLY on the featured/Pro card, since no other plan's padding creates
   enough of a deficit to trigger any shrinkage at all. Nothing about the
   glyph/emoji itself was ever the problem; two earlier attempts to fix
   this by transforming the glyph (both reverted) were treating the
   symptom on the wrong element. */
.mkt-price-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--plan-accent);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 0 26px -6px var(--plan-accent);
  animation: mkt-price-icon-float 4.5s ease-in-out infinite,
    mkt-price-icon-breathe 6s ease-in-out infinite;
}

/* Plan icon is a plain emoji glyph (js/marketing-pricing.js), not an SVG
   or image asset -- given the same colored glow every other glow element
   on this page uses, just via `filter: drop-shadow` instead of `box-
   shadow` (drop-shadow follows the glyph's own alpha shape, which is
   what you want for a non-rectangular character; box-shadow would only
   ever draw a rectangle/circle around its BOX). Two stacked drop-shadows
   (tight + wide) echo .mkt-price-icon's own inset+outer box-shadow
   layering immediately above, so the glyph reads as part of the same
   glow system as its glass container, not a flat sticker sitting inside
   it. Color is var(--plan-accent), same token every other per-card
   accent (badge, border, container glow) already uses -- never a color
   introduced just for this.

   Fixed-size SQUARE box (equal width/height), not just font-size on a
   bare inline span: guarantees every plan's icon sits in the exact same
   centered, square footprint before the glow is applied, regardless of
   whatever a specific glyph's own natural rendered proportions happen to
   be -- the SAME rule for all 6 plans, no per-plan override. */
.mkt-price-icon-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  filter:
    drop-shadow(0 0 3px var(--plan-accent))
    drop-shadow(0 0 12px var(--plan-accent));
}

/* The actual character + font-size live on this INNER span, not the
   outer glow box above. Same rule for all 6 plans -- Pro previously had
   a per-plan `transform: scaleY(1.3)` override here to correct the
   diamond emoji's own wider-than-tall proportions, but that made it
   render too large/misaligned relative to the other 5 icons' identical,
   un-transformed sizing. Removed: every plan (including Pro) now shares
   this exact, unmodified rule -- pixel-identical circle size, icon size,
   and centering across all 6 cards, matching Lite/Free/Easy/Max's own
   already-correct rendering. Only the emoji CHARACTER differs per plan
   (PLAN_META.emoji, js/marketing-pricing.js) -- no CSS override at all. */
.mkt-price-icon-emoji-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
}

/* Plus only: an extra gold ring around its icon circle (its own spec --
   every other plan keeps the plain glass-border container untouched).
   A separate ::after ring, not a box-shadow addition, specifically so it
   never gets clobbered by .mkt-price-icon's own float/breathe keyframes
   above, which already own that element's box-shadow property at every
   animation frame -- this pseudo-element's border is independent of
   those and simply rides along with the same floating parent. */
.mkt-price-card.is-plus .mkt-price-icon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #D4AF37;
  pointer-events: none;
}

@keyframes mkt-price-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes mkt-price-icon-breathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 26px -6px var(--plan-accent);
  }
  50% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 34px -6px var(--plan-accent);
  }
}

/* Hover (spec: "floating animation continues... glow becomes slightly
   brighter... icon moves upward an additional 2px"): the float keyframe
   itself is shifted up by 2px (0/100% -2px, 50% -5px, the SAME 3px
   amplitude just riding a higher baseline) rather than replaced, so the
   motion truly "continues" instead of snapping to a new animation
   phase; the breathe animation is left running unchanged, and the
   resting glow values it animates between are simply brighter. */
.mkt-price-card:hover .mkt-price-icon {
  animation: mkt-price-icon-float-hover 4.5s ease-in-out infinite,
    mkt-price-icon-breathe-hover 6s ease-in-out infinite;
}

@keyframes mkt-price-icon-float-hover {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(-5px); }
}

@keyframes mkt-price-icon-breathe-hover {
  0%, 100% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.1),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 34px -4px var(--plan-accent);
  }
  50% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.1),
      inset 0 -2px 4px rgba(0, 0, 0, 0.2),
      0 0 44px -4px var(--plan-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-price-icon,
  .mkt-price-card:hover .mkt-price-icon {
    animation: none;
  }
}

/* Tier badge (spec: pill, uppercase, small, subtle) -- every card now
   gets one (previously only Pro's "Best Value" did), colored per plan
   via the same --plan-accent token the icon glow uses. Pro's stays
   "visually strongest" (spec) via a touch more opacity/border strength
   and a faint glow of its own, not a different shape or size -- the
   badge SYSTEM is consistent across all 5 tiers, only Pro's own
   instance is turned up slightly. */
.mkt-price-badge {
  align-self: center;
  padding: 5px 14px;
  margin-bottom: 16px;
  border-radius: var(--mkt-radius-pill);
  background: color-mix(in srgb, var(--plan-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--plan-accent) 32%, transparent);
  color: var(--plan-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 300ms ease-in-out;
}

.mkt-price-card.is-pro .mkt-price-badge {
  background: color-mix(in srgb, var(--plan-accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--plan-accent) 45%, transparent);
  box-shadow: 0 0 16px -4px var(--plan-accent);
}

.mkt-price-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--mkt-text);
}

/* Short premium subtitle under the plan name (spec) -- replaces the
   previous tagline-under-the-price copy ("For side projects", etc.)
   with new, shorter copy positioned right under the title instead;
   deliberately subtle typography (small, muted, no bold) so it reads as
   a quiet descriptor, not competing with the title or the price for
   attention. */
.mkt-price-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: var(--mkt-muted-2);
  letter-spacing: 0.01em;
  margin: 0 0 20px;
}

.mkt-price-amount {
  font-size: 34px;
  font-weight: 800;
  color: var(--mkt-text);
  margin-bottom: 24px;
}

.mkt-price-amount .mkt-price-per {
  font-size: 14px;
  font-weight: 400;
  color: var(--mkt-muted);
}

.mkt-price-features {
  align-self: stretch;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  text-align: left;
}

.mkt-price-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--mkt-muted);
  line-height: 1.4;
}

/* Contextual per-feature icons (spec) replace one repeated green
   checkmark for every line -- js/marketing-icons.js picks the actual
   shape per line from each placeholder's data-icon attribute
   (index.html). Deliberately LOW visual weight and a single muted color
   for all of them (spec: "Low visual weight... Same premium outline
   style") -- the shapes now differ per feature, but their color/weight
   stays uniform and quiet, letting the plan's own accent color do the
   only "branding" via the icon container/badge/border instead. */
/* Sized/flex-pinned on the SPAN placeholder, not the <svg> it holds --
   the span (js/marketing-icons.js's own append target) is the ACTUAL
   direct flex-item child of li here; the svg is only a GRANDCHILD, so
   flex/width properties on the svg itself are inert (only a flex
   container's own direct children become flex items, per spec). A real
   bug this shape once had: with no explicit sizing on the span, its
   default flex-shrink: 1 let it shrink below 17px whenever a long
   feature line (e.g. Free's "Encrypted off-site storage") wrapped to 2
   lines and the row's anonymous text flex-item pushed back -- confirmed
   by a real rendered-width measurement (14.28px, not 17px) in
   tests/test_pricing_redesign.js before this fix. */
.mkt-price-features li [data-icon] {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.mkt-price-features li svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--mkt-muted-2);
}

/* font-size dialed down from .mkt-btn's own 16px base -- "Protect My
   Database" (Pro's own button copy) is the longest of the 5 new labels
   and wrapped to 2 uneven lines at the base size inside a ~210px-wide
   card. min-height (not a fixed height) keeps every OTHER, shorter
   label at the same visual size while still letting this one specific
   label wrap cleanly with real padding above/below if a narrower
   viewport ever makes it wrap again, instead of clipping/cramming. */
.mkt-price-card .mkt-btn {
  width: 100%;
  min-height: 48px;
  font-size: 14px;
  font-weight: 600;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  border-radius: var(--mkt-radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 250ms var(--mkt-ease), box-shadow 250ms var(--mkt-ease),
    background 250ms var(--mkt-ease), border-color 250ms var(--mkt-ease);
}

.mkt-price-card .mkt-btn.mkt-btn-outline {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
  color: var(--mkt-text);
}

.mkt-price-card .mkt-btn.mkt-btn-outline:hover {
  background: color-mix(in srgb, var(--plan-accent) 15%, rgba(255, 255, 255, 0.06));
  border-color: color-mix(in srgb, var(--plan-accent) 50%, rgba(255, 255, 255, 0.25));
  box-shadow: 0 14px 35px -8px color-mix(in srgb, var(--plan-accent) 45%, transparent),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.mkt-price-card.is-pro .mkt-btn {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #040810;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, #34D399 60%, transparent);
  box-shadow: 0 10px 30px -8px rgba(16, 185, 129, 0.5),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.35);
}

.mkt-price-card.is-pro .mkt-btn:hover {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  box-shadow: 0 16px 40px -6px rgba(16, 185, 129, 0.7),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.45);
}

/* Free plan's own retention-degradation disclosure (js/marketing-
   pricing.js's buildFreeTrialNotice(), inside the Free card only) --
   deliberately small/muted, below the CTA button: real information a
   prospective signup should be able to find, not a headline warning. */
.mkt-price-trial-notice {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--mkt-muted-2);
}

/* ── Final CTA ────────────────────────────────────────────────────────── */

.mkt-final-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 128px 0;
}

.mkt-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, var(--mkt-glow), transparent 70%);
  pointer-events: none;
  animation: mkt-glow-breathe 8s ease-in-out infinite;
}

.mkt-final-cta-inner {
  position: relative;
  z-index: 1;
}

.mkt-final-cta h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--mkt-text);
}

.mkt-final-cta p {
  font-size: 18px;
  color: var(--mkt-muted);
  margin: 0 0 44px;
}

/* Button "breathing": a slow, ambient glow-intensity pulse (never a size
   change -- see .mkt-btn-solid:hover's own comment on why this page's
   buttons never use a hit-test-affecting transform for an ALWAYS-ON
   animation, that reasoning applies doubly here since breathing runs
   continuously, not just on a deliberate hover). Paused on hover so the
   button's own hover transition (box-shadow lift) takes over cleanly
   instead of the two competing for the same property every frame. */
.mkt-final-cta .mkt-btn-solid {
  animation: mkt-cta-breathe 3s ease-in-out infinite;
}

.mkt-final-cta .mkt-btn-solid:hover {
  animation-play-state: paused;
}

@keyframes mkt-cta-breathe {
  0%, 100% { box-shadow: 0 0 0 0 var(--mkt-glow); }
  50% { box-shadow: 0 0 36px 6px var(--mkt-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-final-cta::before,
  .mkt-final-cta .mkt-btn-solid {
    animation: none;
  }
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.mkt-footer {
  border-top: 1px solid var(--mkt-card-border);
  padding: 80px 0 40px;
}

.mkt-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 56px;
  color: var(--mkt-text);
  text-decoration: none;
  font-weight: 800;
  font-size: 17px;
}

.mkt-footer-logo svg {
  width: 24px;
  height: 24px;
}

.mkt-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  .mkt-footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mkt-footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mkt-text);
  margin: 0 0 20px;
}

.mkt-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mkt-footer-col a {
  color: var(--mkt-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s ease;
}

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

.mkt-footer-social {
  display: flex;
  gap: 12px;
}

.mkt-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mkt-card-fill);
  border: 1px solid var(--mkt-card-border);
  color: var(--mkt-muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mkt-footer-social a:hover {
  color: var(--mkt-text);
  border-color: rgba(255, 255, 255, 0.2);
}

.mkt-footer-social svg {
  width: 18px;
  height: 18px;
}

.mkt-footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--mkt-card-border);
  text-align: center;
  font-size: 13px;
  color: var(--mkt-muted);
}

/* Final cascade for the new homepage markup. Kept at EOF so the legacy
   marketing-v2 rules above cannot pull the redesign back into the older
   dark/neon composition. */
html:has(body.mkt-body) {
  overflow-x: hidden;
}

body.mkt-body {
  --mkt-bg: #f7f9fc;
  --mkt-surface: #ffffff;
  --mkt-surface-soft: #f3f7fb;
  --mkt-text: #071431;
  --mkt-muted: #31405c;
  --mkt-border: #dce4ef;
  --mkt-card-fill: #ffffff;
  --mkt-card-border: #dce4ef;
  --mkt-green: #059669;
  --mkt-green-strong: #008a4c;
  --mkt-green-soft: #e8f8ef;
  --mkt-blue-soft: #eaf2ff;
  --mkt-purple-soft: #f1eaff;
  --mkt-orange-soft: #fff5db;
  --mkt-shadow: 0 20px 60px rgba(7, 20, 49, 0.08);
  --mkt-shadow-soft: 0 12px 35px rgba(7, 20, 49, 0.06);
  color: var(--mkt-text);
  background:
    radial-gradient(circle at 78% 18%, rgba(16, 185, 129, 0.16), transparent 28rem),
    radial-gradient(circle at 9% 42%, rgba(18, 104, 243, 0.07), transparent 24rem),
    var(--mkt-bg);
}

@media (prefers-color-scheme: dark) {
  body.mkt-body {
    --mkt-bg: #090f1d;
    --mkt-surface: #101827;
    --mkt-surface-soft: #121d30;
    --mkt-text: #f7fbff;
    --mkt-muted: #c4cfdf;
    --mkt-border: rgba(148, 163, 184, 0.25);
    --mkt-card-fill: #101827;
    --mkt-card-border: rgba(148, 163, 184, 0.25);
    --mkt-green-soft: rgba(5, 150, 105, 0.17);
    --mkt-blue-soft: rgba(18, 104, 243, 0.14);
    --mkt-purple-soft: rgba(124, 58, 237, 0.14);
    --mkt-orange-soft: rgba(245, 158, 11, 0.15);
  }
}

:root[data-theme="dark"] body.mkt-body {
  --mkt-bg: #090f1d;
  --mkt-surface: #101827;
  --mkt-surface-soft: #121d30;
  --mkt-text: #f7fbff;
  --mkt-muted: #c4cfdf;
  --mkt-border: rgba(148, 163, 184, 0.25);
  --mkt-card-fill: #101827;
  --mkt-card-border: rgba(148, 163, 184, 0.25);
  --mkt-green-soft: rgba(5, 150, 105, 0.17);
  --mkt-blue-soft: rgba(18, 104, 243, 0.14);
  --mkt-purple-soft: rgba(124, 58, 237, 0.14);
  --mkt-orange-soft: rgba(245, 158, 11, 0.15);
}

body.mkt-body .mkt-container {
  width: min(100% - 48px, 1440px);
  margin-inline: auto;
}

body.mkt-body .mkt-navbar {
  grid-template-columns: auto 1fr auto;
  min-height: 74px;
  padding: 0 36px;
  border-bottom: 1px solid var(--mkt-border);
  background: color-mix(in srgb, var(--mkt-surface) 92%, transparent);
  backdrop-filter: blur(18px);
}

body.mkt-body .mkt-nav-logo,
body.mkt-body .mkt-footer-logo {
  color: var(--mkt-text);
  font-size: 1.75rem;
  letter-spacing: 0;
}

body.mkt-body .mkt-nav-center {
  justify-self: center;
  display: flex;
  gap: 34px;
}

body.mkt-body .mkt-nav-item {
  color: var(--mkt-text);
  background: transparent;
  font-weight: 700;
}

body.mkt-body .mkt-nav-item:hover,
body.mkt-body .mkt-nav-item:focus-visible {
  color: var(--mkt-green);
}

body.mkt-body .mkt-btn {
  min-height: 44px;
  border-radius: 8px;
  letter-spacing: 0;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body.mkt-body .mkt-btn-solid {
  color: #ffffff;
  border-color: var(--mkt-green-strong);
  background: linear-gradient(180deg, #12b76a, var(--mkt-green-strong));
  box-shadow: 0 12px 24px rgba(5, 150, 105, 0.22);
}

body.mkt-body .mkt-btn-outline {
  color: var(--mkt-green-strong);
  background: color-mix(in srgb, var(--mkt-surface) 86%, transparent);
  border-color: color-mix(in srgb, var(--mkt-green) 42%, var(--mkt-border));
}

body.mkt-body .mkt-hero {
  padding: 64px 0 56px;
  overflow: visible;
}

body.mkt-body .mkt-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(620px, 1.16fr);
  align-items: center;
  gap: clamp(34px, 5vw, 76px);
  max-width: none;
}

body.mkt-body .mkt-hero-title {
  max-width: 690px;
  margin: 32px 0 22px;
  font-size: clamp(3.25rem, 5vw, 6.25rem);
  line-height: 1.07;
  letter-spacing: 0;
}

body.mkt-body .mkt-hero-title .mkt-accent {
  color: var(--mkt-green-strong);
}

body.mkt-body .mkt-hero-sub {
  max-width: 620px;
  margin: 0 0 30px;
  font-size: 1.12rem;
}

body.mkt-body .mkt-hero-cta-row {
  margin-bottom: 0;
}

body.mkt-body .mkt-hero-badges {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 22px;
  margin-top: 42px;
}

body.mkt-body .mkt-hero-badge {
  display: inline-grid;
  grid-template-columns: 28px auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  color: var(--mkt-muted);
  font-weight: 700;
}

body.mkt-body .mkt-product-preview {
  min-width: 0;
}

body.mkt-body .mkt-preview-window,
body.mkt-body .mkt-price-card-surface,
body.mkt-body .mkt-feature-card,
body.mkt-body .mkt-platform-grid article,
body.mkt-body .mkt-how-step-surface {
  border: 1px solid var(--mkt-border);
  background: var(--mkt-surface);
  box-shadow: var(--mkt-shadow-soft);
}

body.mkt-body .mkt-preview-window {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--mkt-shadow);
}

body.mkt-body .mkt-preview-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 470px;
}

body.mkt-body .mkt-preview-main {
  padding: 28px 32px 30px;
}

body.mkt-body .mkt-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.mkt-body .mkt-preview-grid article {
  min-height: 130px;
  border-radius: 14px;
  padding: 22px;
}

body.mkt-body #features,
body.mkt-body #how-it-works,
body.mkt-body #pricing {
  padding: 48px 0 56px;
}

body.mkt-body .mkt-section-header {
  max-width: 840px;
  margin: 0 auto 30px;
  text-align: center;
}

body.mkt-body .mkt-section-title {
  margin: 12px 0 10px;
  color: var(--mkt-text);
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: 0;
}

body.mkt-body .mkt-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

body.mkt-body .mkt-feature-card {
  min-height: 205px;
  border-radius: 14px;
  padding: 30px 26px;
}

body.mkt-body .mkt-security-band {
  grid-template-columns: 230px 1fr;
  margin-top: 28px;
  padding: 38px;
  border: 1px solid var(--mkt-border);
  border-radius: 18px;
  background: linear-gradient(100deg, var(--mkt-green-soft), color-mix(in srgb, var(--mkt-surface) 82%, transparent));
  box-shadow: var(--mkt-shadow-soft);
}

body.mkt-body .mkt-how-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  max-width: 1200px;
}

body.mkt-body .mkt-how-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 72px;
  left: calc(100% + 6px);
  width: 18px;
  border-top: 3px dotted var(--mkt-green);
  display: block;
}

body.mkt-body .mkt-how-step-surface {
  min-height: 255px;
  border-radius: 16px;
  text-align: center;
}

body.mkt-body .mkt-how-step.is-validate {
  --beam-color: #22c55e;
}

body.mkt-body .mkt-how-step.is-validate .mkt-how-step-surface::before {
  animation-delay: 6s;
}

body.mkt-body .mkt-how-step.is-restore .mkt-how-step-surface::before {
  animation-delay: 9s;
}

body.mkt-body .mkt-how-icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--mkt-green-soft);
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
}

body.mkt-body .mkt-how-icon svg {
  width: 42px;
  height: 42px;
}

body.mkt-body .mkt-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1160px;
  margin-inline: auto;
}

body.mkt-body .mkt-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  overflow: visible;
}

body.mkt-body .mkt-price-card-surface {
  height: 100%;
  border-radius: 18px;
  text-align: center;
}

body.mkt-body .mkt-price-icon {
  color: var(--mkt-green);
  background: var(--mkt-green-soft);
}

body.mkt-body .mkt-price-card.is-easy .mkt-price-badge,
body.mkt-body .mkt-price-card.is-lite .mkt-price-badge,
body.mkt-body .mkt-price-card.is-pro .mkt-price-badge {
  color: var(--mkt-green);
  background: var(--mkt-green-soft);
}

body.mkt-body .mkt-price-card.is-plus .mkt-price-icon,
body.mkt-body .mkt-price-card.is-plus .mkt-price-badge {
  color: #7c3aed;
  background: var(--mkt-purple-soft);
}

body.mkt-body .mkt-price-card.is-max .mkt-price-icon,
body.mkt-body .mkt-price-card.is-max .mkt-price-badge {
  color: #f59e0b;
  background: var(--mkt-orange-soft);
}

body.mkt-body .mkt-final-cta-inner {
  grid-template-columns: 1fr auto;
  border: 1px solid var(--mkt-border);
  border-radius: 18px;
  background: var(--mkt-surface);
  box-shadow: var(--mkt-shadow-soft);
}

body.mkt-body .mkt-footer {
  border-top: 1px solid var(--mkt-border);
  background: color-mix(in srgb, var(--mkt-surface) 88%, transparent);
}

body.mkt-body .mkt-footer .mkt-container {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 38px;
}

body.mkt-body .mkt-footer-bottom {
  grid-column: 1 / -1;
  text-align: left;
  border-top: 1px solid var(--mkt-border);
}

@media (max-width: 1180px) {
  body.mkt-body .mkt-navbar {
    grid-template-columns: auto auto;
  }

  body.mkt-body .mkt-nav-center {
    display: none;
  }

  body.mkt-body .mkt-hero-inner {
    grid-template-columns: 1fr;
  }

  body.mkt-body .mkt-product-preview {
    max-width: 900px;
    margin-inline: auto;
  }

  body.mkt-body .mkt-feature-grid,
  body.mkt-body .mkt-how-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mkt-body .mkt-how-step:not(:last-child)::after {
    display: none;
  }

  body.mkt-body .mkt-platform-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.mkt-body .mkt-container {
    width: min(100% - 32px, 1440px);
  }

  body.mkt-body .mkt-preview-shell,
  body.mkt-body .mkt-preview-grid,
  body.mkt-body .mkt-feature-grid,
  body.mkt-body .mkt-how-steps,
  body.mkt-body .mkt-security-band,
  body.mkt-body .mkt-final-cta-inner {
    grid-template-columns: 1fr;
  }

  body.mkt-body .mkt-preview-side {
    display: none;
  }

  body.mkt-body .mkt-platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mkt-body .mkt-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  body.mkt-body .mkt-footer .mkt-container,
  body.mkt-body .mkt-footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  body.mkt-body .mkt-container {
    width: min(100% - 24px, 1440px);
  }

  body.mkt-body .mkt-navbar {
    gap: 8px;
    padding-inline: 12px;
  }

  body.mkt-body .mkt-nav-logo {
    gap: 8px;
    font-size: 1.35rem;
  }

  body.mkt-body .mkt-nav-logo svg {
    width: 26px;
    height: 26px;
  }

  body.mkt-body .mkt-nav-actions {
    gap: 6px;
  }

  body.mkt-body .mkt-nav-actions .mkt-btn {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 0.9rem;
  }

  body.mkt-body .mkt-hero-title {
    font-size: clamp(2.65rem, 12vw, 4.2rem);
  }

  body.mkt-body .mkt-hero-badges,
  body.mkt-body .mkt-platform-grid {
    grid-template-columns: 1fr;
  }

  body.mkt-body .mkt-pricing-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
  }

  body.mkt-body .mkt-price-card {
    flex: 0 0 min(82vw, 340px);
    scroll-snap-align: center;
  }

  body.mkt-body .mkt-section-header,
  body.mkt-body .mkt-preview-main h2,
  body.mkt-body .mkt-section-title {
    text-align: left;
  }
}

/* -------------------------------------------------------------------------
   Final homepage art-direction layer
   -------------------------------------------------------------------------
   This single scoped layer normalizes the homepage after the older marketing
   experiments above. It keeps the light-first app-shell language, then maps
   dark mode intentionally through the same component variables.
*/
body.mkt-body {
  --mkt-page: #f8fafc;
  --mkt-page-wash: #eefdf6;
  --mkt-surface: #ffffff;
  --mkt-surface-soft: #f2f7fb;
  --mkt-surface-elevated: #ffffff;
  --mkt-text: #071431;
  --mkt-muted: #334155;
  --mkt-muted-2: #64748b;
  --mkt-border: #dbe4ef;
  --mkt-border-strong: #c7d3e2;
  --mkt-green: #059669;
  --mkt-green-strong: #047857;
  --mkt-green-soft: #e8f8ef;
  --mkt-blue: #1268f3;
  --mkt-blue-soft: #eaf2ff;
  --mkt-purple: #7c3aed;
  --mkt-purple-soft: #f1eaff;
  --mkt-orange: #f59e0b;
  --mkt-orange-soft: #fff5db;
  --mkt-danger: #dc2626;
  --mkt-radius-sm: 8px;
  --mkt-radius: 14px;
  --mkt-radius-lg: 18px;
  --mkt-shadow: 0 22px 70px rgba(7, 20, 49, 0.1);
  --mkt-shadow-soft: 0 14px 40px rgba(7, 20, 49, 0.07);
  --mkt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--mkt-text);
  background:
    radial-gradient(circle at 82% 12%, rgba(16, 185, 129, 0.14), transparent 26rem),
    radial-gradient(circle at 12% 40%, rgba(18, 104, 243, 0.06), transparent 24rem),
    linear-gradient(180deg, var(--mkt-page), #ffffff 44%, var(--mkt-page) 100%);
}

@media (prefers-color-scheme: dark) {
  body.mkt-body {
    --mkt-page: #08111f;
    --mkt-page-wash: #0c1a2a;
    --mkt-surface: #101827;
    --mkt-surface-soft: #132033;
    --mkt-surface-elevated: #111c2d;
    --mkt-text: #f8fbff;
    --mkt-muted: #cbd5e1;
    --mkt-muted-2: #94a3b8;
    --mkt-border: rgba(148, 163, 184, 0.26);
    --mkt-border-strong: rgba(203, 213, 225, 0.34);
    --mkt-green: #10b981;
    --mkt-green-strong: #34d399;
    --mkt-green-soft: rgba(5, 150, 105, 0.18);
    --mkt-blue-soft: rgba(18, 104, 243, 0.16);
    --mkt-purple-soft: rgba(124, 58, 237, 0.17);
    --mkt-orange-soft: rgba(245, 158, 11, 0.16);
    --mkt-shadow: 0 24px 76px rgba(0, 0, 0, 0.36);
    --mkt-shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.28);
    background:
      radial-gradient(circle at 82% 12%, rgba(16, 185, 129, 0.16), transparent 26rem),
      radial-gradient(circle at 12% 40%, rgba(18, 104, 243, 0.14), transparent 24rem),
      linear-gradient(180deg, var(--mkt-page), #0b1423 48%, var(--mkt-page) 100%);
  }
}

:root[data-theme="dark"] body.mkt-body {
  --mkt-page: #08111f;
  --mkt-page-wash: #0c1a2a;
  --mkt-surface: #101827;
  --mkt-surface-soft: #132033;
  --mkt-surface-elevated: #111c2d;
  --mkt-text: #f8fbff;
  --mkt-muted: #cbd5e1;
  --mkt-muted-2: #94a3b8;
  --mkt-border: rgba(148, 163, 184, 0.26);
  --mkt-border-strong: rgba(203, 213, 225, 0.34);
  --mkt-green: #10b981;
  --mkt-green-strong: #34d399;
  --mkt-green-soft: rgba(5, 150, 105, 0.18);
  --mkt-blue-soft: rgba(18, 104, 243, 0.16);
  --mkt-purple-soft: rgba(124, 58, 237, 0.17);
  --mkt-orange-soft: rgba(245, 158, 11, 0.16);
  --mkt-shadow: 0 24px 76px rgba(0, 0, 0, 0.36);
  --mkt-shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.28);
  background:
    radial-gradient(circle at 82% 12%, rgba(16, 185, 129, 0.16), transparent 26rem),
    radial-gradient(circle at 12% 40%, rgba(18, 104, 243, 0.14), transparent 24rem),
    linear-gradient(180deg, var(--mkt-page), #0b1423 48%, var(--mkt-page) 100%);
}

body.mkt-body .mkt-container {
  width: min(100% - 56px, 1480px);
}

body.mkt-body .mkt-navbar {
  position: sticky;
  top: 0;
  min-height: 76px;
  padding-inline: clamp(22px, 3vw, 42px);
  border-bottom: 1px solid var(--mkt-border);
  background: color-mix(in srgb, var(--mkt-surface-elevated) 92%, transparent);
  box-shadow: 0 1px 0 rgba(7, 20, 49, 0.02);
  backdrop-filter: blur(18px) saturate(150%);
}

body.mkt-body .mkt-nav-logo {
  font-size: clamp(1.45rem, 2vw, 1.85rem);
}

body.mkt-body .mkt-nav-center {
  gap: clamp(18px, 2.4vw, 34px);
}

body.mkt-body .mkt-nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 4px;
  color: var(--mkt-text);
  font-size: 0.96rem;
}

body.mkt-body .mkt-nav-item:hover,
body.mkt-body .mkt-nav-item:focus-visible,
body.mkt-body .mkt-nav-item.active {
  color: var(--mkt-green-strong);
}

body.mkt-body .mkt-btn,
body.mkt-body .nav-user-menu-wrap .user-menu {
  border-radius: var(--mkt-radius-sm);
  transition:
    background-color 180ms var(--mkt-ease),
    border-color 180ms var(--mkt-ease),
    color 180ms var(--mkt-ease),
    box-shadow 180ms var(--mkt-ease),
    transform 180ms var(--mkt-ease);
}

body.mkt-body .mkt-btn:hover,
body.mkt-body .nav-user-menu-wrap .user-menu:hover {
  transform: translateY(-1px);
}

body.mkt-body .mkt-btn:focus-visible,
body.mkt-body .nav-user-menu-wrap .user-menu:focus-visible,
body.mkt-body .nav-user-menu-wrap .user-dropdown [role="menuitem"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.16);
}

body.mkt-body .nav-user-menu-wrap {
  position: relative;
}

body.mkt-body .nav-user-menu-wrap .user-menu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 12px 4px 6px;
  border: 1px solid var(--mkt-border);
  background: var(--mkt-surface-elevated);
  color: var(--mkt-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body.mkt-body .nav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--mkt-green-strong);
  background: var(--mkt-green-soft);
  font-size: 0.85rem;
  font-weight: 850;
}

body.mkt-body #nav-user-email {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mkt-body .nav-user-menu-wrap .chevron {
  width: 16px;
  height: 16px;
  color: var(--mkt-muted-2);
}

body.mkt-body .nav-user-menu-wrap .user-menu[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--mkt-green) 42%, var(--mkt-border));
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12);
}

body.mkt-body .nav-user-menu-wrap .user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 1000;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius);
  background: var(--mkt-surface-elevated);
  color: var(--mkt-text);
  box-shadow: var(--mkt-shadow);
}

body.mkt-body .nav-user-menu-wrap .user-dropdown [role="menuitem"] {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--mkt-radius-sm);
  background: transparent;
  color: var(--mkt-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}

body.mkt-body .nav-user-menu-wrap .user-dropdown [role="menuitem"]:hover {
  background: var(--mkt-green-soft);
  color: var(--mkt-green-strong);
}

body.mkt-body .nav-user-menu-wrap .user-dropdown [role="menuitem"]:disabled {
  color: var(--mkt-muted-2);
  cursor: not-allowed;
  opacity: 0.72;
}

body.mkt-body .nav-user-menu-wrap .menu-divider {
  height: 1px;
  margin: 8px 4px;
  border: 0;
  background: var(--mkt-border);
}

body.mkt-body .mkt-hero {
  padding: clamp(54px, 7vw, 92px) 0 clamp(46px, 6vw, 76px);
}

body.mkt-body .mkt-hero-inner {
  grid-template-columns: minmax(0, 0.9fr) minmax(560px, 1.1fr);
  gap: clamp(36px, 5vw, 86px);
}

body.mkt-body .mkt-hero-title {
  max-width: 700px;
  margin: 28px 0 20px;
  font-size: clamp(3rem, 3.45vw, 4rem);
  line-height: 1.08;
}

body.mkt-body .mkt-hero-line {
  display: block;
}

body.mkt-body .mkt-hero-title .mkt-accent {
  color: var(--mkt-green-strong);
}

body.mkt-body .mkt-hero-sub {
  max-width: 620px;
  color: var(--mkt-muted);
  font-size: clamp(1.02rem, 1.1vw, 1.16rem);
}

body.mkt-body .mkt-hero-kicker,
body.mkt-body .mkt-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--mkt-green-strong);
  background: var(--mkt-green-soft);
  border: 1px solid color-mix(in srgb, var(--mkt-green) 22%, var(--mkt-border));
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

body.mkt-body .mkt-hero-kicker {
  padding: 11px 16px;
  letter-spacing: 0.02em;
  text-transform: none;
}

body.mkt-body .mkt-eyebrow {
  padding: 0;
  border: 0;
  background: transparent;
}

body.mkt-body .mkt-preview-window,
body.mkt-body .mkt-feature-card,
body.mkt-body .mkt-how-step-surface,
body.mkt-body .mkt-platform-grid article,
body.mkt-body .mkt-price-card-surface,
body.mkt-body .mkt-security-band,
body.mkt-body .mkt-final-cta-inner {
  border-color: var(--mkt-border);
  background: var(--mkt-surface-elevated);
  box-shadow: var(--mkt-shadow-soft);
}

body.mkt-body .mkt-preview-window {
  border-radius: var(--mkt-radius-lg);
  box-shadow: var(--mkt-shadow);
}

body.mkt-body .mkt-preview-shell {
  grid-template-columns: 210px 1fr;
  min-height: 510px;
}

body.mkt-body .mkt-preview-side {
  gap: 5px;
  padding: 22px 16px;
  border-right: 1px solid var(--mkt-border);
  background: color-mix(in srgb, var(--mkt-surface-soft) 55%, var(--mkt-surface-elevated));
}

body.mkt-body .mkt-preview-side > span {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--mkt-muted);
  font-size: 0.84rem;
  font-weight: 750;
}

body.mkt-body .mkt-preview-side > span.is-active {
  color: var(--mkt-green-strong);
  background: var(--mkt-green-soft);
}

body.mkt-body .mkt-preview-side svg {
  width: 17px;
  height: 17px;
}

body.mkt-body .mkt-preview-main h2,
body.mkt-body .mkt-section-title,
body.mkt-body .mkt-security-copy h2,
body.mkt-body .mkt-final-cta h2 {
  color: var(--mkt-text);
}

body.mkt-body .mkt-section-lede,
body.mkt-body .mkt-feature-card p,
body.mkt-body .mkt-platform-grid p,
body.mkt-body .mkt-how-step p,
body.mkt-body .mkt-security-copy p,
body.mkt-body .mkt-final-cta p {
  color: var(--mkt-muted);
}

body.mkt-body #features,
body.mkt-body #how-it-works,
body.mkt-body #pricing {
  padding: clamp(54px, 6vw, 82px) 0;
  color: var(--mkt-text);
  background: transparent;
}

body.mkt-body #features::before,
body.mkt-body #features::after,
body.mkt-body #how-it-works::before,
body.mkt-body #how-it-works::after,
body.mkt-body #pricing::before,
body.mkt-body #pricing::after {
  display: none;
}

body.mkt-body .mkt-feature-card,
body.mkt-body .mkt-platform-grid article {
  border-radius: var(--mkt-radius);
  transition: transform 180ms var(--mkt-ease), border-color 180ms var(--mkt-ease), box-shadow 180ms var(--mkt-ease);
}

body.mkt-body .mkt-feature-card:hover {
  border-color: color-mix(in srgb, var(--mkt-green) 36%, var(--mkt-border));
  box-shadow: var(--mkt-shadow);
  transform: translateY(0);
}

body.mkt-body .mkt-platform-grid article:hover {
  border-color: color-mix(in srgb, var(--mkt-green) 36%, var(--mkt-border));
  box-shadow: var(--mkt-shadow);
  transform: translateY(-2px);
}

body.mkt-body .mkt-feature-icon,
body.mkt-body .mkt-security-visual,
body.mkt-body .mkt-how-icon {
  color: var(--mkt-green-strong);
  background: var(--mkt-green-soft);
  border-radius: 14px;
}

body.mkt-body .mkt-security-band {
  background:
    linear-gradient(100deg, var(--mkt-green-soft), color-mix(in srgb, var(--mkt-surface-elevated) 88%, transparent));
}

body.mkt-body .mkt-how-steps {
  max-width: 1280px;
  gap: clamp(18px, 2vw, 30px);
}

body.mkt-body .mkt-how-step-surface {
  min-height: 270px;
  padding: 34px 26px;
}

body.mkt-body .mkt-how-step-surface::before {
  display: none;
}

body.mkt-body .mkt-how-icon {
  animation: none;
  box-shadow: none;
}

body.mkt-body .mkt-how-step:hover .mkt-how-icon {
  animation: none;
  box-shadow: none;
}

body.mkt-body .mkt-how-step:hover .mkt-how-step-surface {
  border-color: color-mix(in srgb, var(--mkt-green) 36%, var(--mkt-border));
}

body.mkt-body .mkt-platforms {
  margin-top: clamp(50px, 6vw, 78px);
}

body.mkt-body .mkt-platform-grid article {
  display: grid;
  grid-template-columns: 62px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  min-height: 132px;
  padding: 24px;
}

body.mkt-body .mkt-platform-logo {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--mkt-surface-soft) 76%, transparent);
  border: 1px solid var(--mkt-border);
}

body.mkt-body .mkt-platform-logo img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

body.mkt-body .mkt-platform-grid h3,
body.mkt-body .mkt-platform-grid p {
  margin: 0;
}

body.mkt-body .mkt-pricing-row-label {
  color: var(--mkt-green-strong);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body.mkt-body .mkt-price-card-surface {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  color: var(--mkt-text);
}

body.mkt-body .mkt-price-card.is-free .mkt-price-card-surface,
body.mkt-body .mkt-price-card.is-easy .mkt-price-card-surface,
body.mkt-body .mkt-price-card.is-plus .mkt-price-card-surface,
body.mkt-body .mkt-price-card.is-lite .mkt-price-card-surface,
body.mkt-body .mkt-price-card.is-pro .mkt-price-card-surface,
body.mkt-body .mkt-price-card.is-max .mkt-price-card-surface {
  background: var(--mkt-surface-elevated);
}

body.mkt-body .mkt-price-card.is-featured .mkt-price-card-surface {
  border-color: color-mix(in srgb, var(--mkt-green) 46%, var(--mkt-border));
  box-shadow: 0 18px 56px rgba(5, 150, 105, 0.16);
}

body.mkt-body .mkt-price-features {
  flex: 1;
}

body.mkt-body .mkt-pricing-grid.mkt-fade-up,
body.mkt-body .mkt-pricing-row-label.mkt-fade-up {
  opacity: 1;
  transform: none;
}

body.mkt-body .mkt-price-features li,
body.mkt-body .mkt-price-subtitle,
body.mkt-body .mkt-price-per,
body.mkt-body .mkt-price-trial-notice {
  color: var(--mkt-muted);
}

body.mkt-body .mkt-price-amount,
body.mkt-body .mkt-price-card h3 {
  color: var(--mkt-text);
}

body.mkt-body .mkt-price-card .mkt-btn {
  width: 100%;
  margin-top: 18px;
}

body.mkt-body .mkt-price-card .mkt-btn-outline {
  color: var(--mkt-green-strong);
  background: color-mix(in srgb, var(--mkt-green-soft) 46%, var(--mkt-surface-elevated));
  border-color: color-mix(in srgb, var(--mkt-green) 42%, var(--mkt-border));
}

body.mkt-body .mkt-price-card .mkt-btn-outline:hover {
  color: var(--mkt-green-strong);
  background: var(--mkt-green-soft);
}

body.mkt-body .mkt-price-card .mkt-btn-solid {
  color: #ffffff;
  background: linear-gradient(180deg, #12b76a, var(--mkt-green-strong));
  border-color: var(--mkt-green-strong);
}

body.mkt-body .mkt-final-cta {
  padding: clamp(48px, 6vw, 82px) 0;
}

body.mkt-body .mkt-final-cta-inner {
  padding: clamp(32px, 4vw, 54px);
  background:
    radial-gradient(circle at 12% 18%, rgba(16, 185, 129, 0.14), transparent 18rem),
    var(--mkt-surface-elevated);
}

body.mkt-body .mkt-footer {
  padding: 52px 0 34px;
  color: var(--mkt-muted);
}

body.mkt-body .mkt-footer-col h4 {
  color: var(--mkt-text);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.mkt-body .mkt-footer-col a:hover,
body.mkt-body .mkt-footer-col a:focus-visible {
  color: var(--mkt-green-strong);
}

@media (max-width: 1180px) {
  body.mkt-body .mkt-hero-inner {
    grid-template-columns: 1fr;
  }

  body.mkt-body .mkt-hero-copy {
    max-width: 820px;
  }

  body.mkt-body .mkt-preview-shell {
    grid-template-columns: 190px 1fr;
  }
}

@media (max-width: 900px) {
  body.mkt-body .mkt-container {
    width: min(100% - 32px, 1480px);
  }

  body.mkt-body .mkt-preview-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--mkt-border);
  }

  body.mkt-body .mkt-preview-shell {
    grid-template-columns: 1fr;
  }

  body.mkt-body .mkt-platform-grid article {
    grid-template-columns: 54px 1fr;
    min-height: 120px;
  }
}

@media (max-width: 640px) {
  body.mkt-body .mkt-container {
    width: min(100% - 24px, 1480px);
  }

  body.mkt-body .mkt-navbar {
    min-height: 68px;
    padding-inline: 14px;
  }

  body.mkt-body .mkt-nav-actions {
    gap: 8px;
  }

  body.mkt-body #nav-user-email,
  body.mkt-body #nav-dashboard-link {
    display: none;
  }

  body.mkt-body .mkt-nav-actions .mkt-btn {
    min-height: 40px;
    padding-inline: 12px;
  }

  body.mkt-body .mkt-hero-title {
    font-size: clamp(2.55rem, 13vw, 3.85rem);
  }

  body.mkt-body .mkt-hero-cta-row,
  body.mkt-body .mkt-final-cta-actions {
    align-items: stretch;
  }

  body.mkt-body .mkt-hero-cta-row .mkt-btn,
  body.mkt-body .mkt-final-cta-actions .mkt-btn {
    width: 100%;
  }

  body.mkt-body .mkt-preview-main {
    padding: 22px 18px 24px;
  }

  body.mkt-body .mkt-preview-side {
    grid-template-columns: 1fr;
  }

  body.mkt-body .mkt-platform-grid article {
    grid-template-columns: 58px 1fr;
  }
}