/* BlindLock shared finish layer: navigation, accessibility and low-power polish. */
:is(h1, h2) { text-wrap: balance; }
h3 { text-wrap: pretty; }
p, li { text-wrap: pretty; }
.feature-card h3 {
  color: #f7f7f8 !important;
  letter-spacing: -.02em !important;
  line-height: 1.25;
}
.feature-card h3 .h3-opt {
  letter-spacing: 0;
  margin-left: .28em;
  font-weight: 650;
  color: #c8c8d2;
}

/* Canonical page shell — match /en/compare.html so nav/content never jump between routes */
html { scrollbar-gutter: stable; }
.page {
  width: min(100%, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box;
}
body { overflow-x: hidden; }
nav.nav {
  margin-bottom: 3rem !important;
}

/* Desktop: nav links perfectly centered in the space between logo and DE/EN. */
@media (min-width: 761px) {
  nav.nav {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    flex-wrap: nowrap;
  }
  nav.nav > .brand {
    flex: 0 0 auto;
  }
  nav.nav > .nav-links {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    padding-inline: .75rem;
  }
  nav.nav > .lang-switch {
    flex: 0 0 auto;
    margin-left: 0 !important;
  }
  nav.nav > .bl-menu-toggle {
    display: none !important;
  }
}

.bl-resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.bl-resource-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: .65rem .85rem;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: var(--text-secondary, #c4c4cc);
  text-decoration: none;
  font-size: .88rem;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.bl-resource-links a:hover {
  color: var(--emerald-light, #6ee7b7);
  border-color: rgba(110,231,183,.28);
  background: rgba(16,185,129,.07);
}

.button:active,
.btn:active,
button:active { transform: translateY(1px) scale(.985); }

/* Keep CTA buttons solid even when :visited (browser purple link color). */
a.button,
a.button:link,
a.button:visited,
a.button:hover,
a.button:active {
  text-decoration: none !important;
}
a.button.button-primary:not(.cta-demo),
a.button.button-primary:not(.cta-demo):link,
a.button.button-primary:not(.cta-demo):visited,
a.button.button-primary:not(.cta-demo):hover,
a.button.button-primary:not(.cta-demo):active {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
  color: #04110d !important;
  -webkit-text-fill-color: #04110d !important;
  border: 1px solid rgba(110, 231, 183, .32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 24px -12px rgba(16,185,129,.6) !important;
}

/* Demo CTA — amber sibling to emerald Lifetime: same size/type language, distinct hue */
a.button.cta-demo,
a.button.cta-demo:link,
a.button.cta-demo:visited,
a.button.cta-demo:hover,
a.button.cta-demo:active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: .66rem 1.4rem !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #e8900c 0%, #f5b035 52%, #f0a01a 100%) !important;
  color: #1a1200 !important;
  -webkit-text-fill-color: #1a1200 !important;
  border: 1px solid rgba(251, 191, 36, .38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 8px 26px -12px rgba(245, 158, 11, .58) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: -.01em !important;
  line-height: 1.15 !important;
}
a.button.cta-demo:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 12px 32px -12px rgba(245, 158, 11, .78) !important;
}

.bl-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong, rgba(255,255,255,.14));
  border-radius: 13px;
  background: rgba(255,255,255,.035);
  color: var(--text, #f4f4f5);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.bl-menu-toggle:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(110,231,183,.38);
}

.bl-menu-toggle-lines,
.bl-menu-toggle-lines::before,
.bl-menu-toggle-lines::after {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 99px;
  background: currentColor;
  transition: transform .22s ease, opacity .22s ease;
}

.bl-menu-toggle-lines { position: relative; }
.bl-menu-toggle-lines::before,
.bl-menu-toggle-lines::after { content: ''; position: absolute; left: 0; }
.bl-menu-toggle-lines::before { transform: translateY(-5px); }
.bl-menu-toggle-lines::after { transform: translateY(5px); }
.bl-menu-toggle[aria-expanded="true"] .bl-menu-toggle-lines { background: transparent; }
.bl-menu-toggle[aria-expanded="true"] .bl-menu-toggle-lines::before { transform: rotate(45deg); }
.bl-menu-toggle[aria-expanded="true"] .bl-menu-toggle-lines::after { transform: rotate(-45deg); }

@media (max-width: 760px) {
  nav.nav[data-bl-nav] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .45rem !important;
  }

  nav.nav[data-bl-nav] > .brand { grid-column: 1; min-width: 0; }
  nav.nav[data-bl-nav] > .lang-switch { grid-column: 2; }
  nav.nav[data-bl-nav] > .bl-menu-toggle { grid-column: 3; display: inline-flex; }

  nav.nav[data-bl-nav] > .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none !important;
    width: 100%;
    margin: .45rem 0 0 !important;
    padding: .55rem;
    overflow: visible !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem !important;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 18px;
    background: rgba(12,12,15,.96);
    box-shadow: 0 22px 55px rgba(0,0,0,.38);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  nav.nav[data-bl-nav] > .nav-links[data-open="true"] { display: grid !important; }

  nav.nav[data-bl-nav] > .nav-links a {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: .65rem .75rem !important;
    border-radius: 12px !important;
    white-space: normal !important;
    line-height: 1.25;
  }

  #particles { display: none !important; }
}

@media (max-width: 430px) {
  nav.nav[data-bl-nav] > .brand img { width: 46px !important; height: 46px !important; }
  nav.nav[data-bl-nav] > .brand .brand-name { font-size: 1rem !important; }
  nav.nav[data-bl-nav] > .lang-switch a { min-width: 48px !important; padding-inline: .65rem !important; }
}

@media (min-width: 900px) and (max-height: 820px) {
  .page > .nav { margin-bottom: 1.75rem; }
  .page > .crumbs { margin-bottom: 1rem; }
  .page > .page-hero { margin-bottom: 1.7rem; }
  .page > .page-hero h1 { font-size: clamp(2.5rem, 5vw, 3.7rem); margin-bottom: .9rem; }
  .page > .page-hero p { line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   Design-system unification (2026-07-19)
   Every page inlines its own token/component block, and two
   generations drifted apart ("new" reference vs. an older
   family with different surface/border tokens, 4.2rem h1 and
   28px cards). bl-site.css loads AFTER those inline blocks, so
   these rules pin the WHOLE site to the reference design
   (hardware-bound-password-vault.html) from one place — no
   per-page edits. Heading overrides stay scoped to the hero
   context so document pages (legal, blog article) keep their
   own scale, and the light checkout funnel keeps its own
   --ink/--panel tokens untouched.
   ============================================================ */
:root {
  --surface: rgba(16, 16, 20, .82);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --text-tertiary: #9b9ba8;
}
/* Single-column page intros stay narrow. The home hero is a 2-column
   grid (copy + .hero-card) and must keep full page width so the card
   sits on the right as designed. */
.page-hero,
.hero:not(:has(.hero-card)) {
  max-width: 860px;
  margin-bottom: 2rem;
}
.hero:has(.hero-card) {
  max-width: none;
  width: 100%;
  margin-bottom: 4rem;
}
.page-hero h1,
.hero:not(:has(.hero-card)) h1 {
  font-size: clamp(2.5rem, 6vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.07em;
  margin-bottom: 1.1rem;
}
.page-hero p,
.hero:not(:has(.hero-card)) p:not(.founders-lead):not(.founders-note):not(.founders-msg),
.lead {
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.85;
  font-weight: 300;
}
.eyebrow { font-weight: 700; margin-bottom: 1.25rem; }
.card, .panel { border-radius: 26px; }

/* Canonical footer shared by every public DE/EN content page. */
footer.site[data-bl-footer="canonical-v1"] {
  position: relative;
  left: 50%;
  width: min(1200px, calc(100vw - 48px));
  max-width: none;
  transform: translateX(-50%);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border, rgba(255,255,255,.1));
  box-sizing: border-box;
  font-size: 16px;
}
footer.site[data-bl-footer="canonical-v1"] .footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-bottom: 2rem;
}
footer.site[data-bl-footer="canonical-v1"] .footer-col {
  min-width: 0;
}
footer.site[data-bl-footer="canonical-v1"] .footer-col h4 {
  margin: 0 0 .9rem;
  color: var(--text-tertiary, #9b9ba8);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
footer.site[data-bl-footer="canonical-v1"] .footer-col > a:not(.brand) {
  display: block;
  padding: .35rem 0;
  color: var(--text-secondary, #c4c4cc);
  font-size: .9rem;
  line-height: 1.45;
  text-decoration: none;
}
footer.site[data-bl-footer="canonical-v1"] .footer-col > a:not(.brand):hover {
  color: var(--emerald-light, #6ee7b7);
}
footer.site[data-bl-footer="canonical-v1"] .footer-about .brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .35rem 0;
  color: var(--text, #f4f4f5);
  text-decoration: none;
}
footer.site[data-bl-footer="canonical-v1"] .footer-about .brand img {
  width: 72px !important;
  height: 72px !important;
}
footer.site[data-bl-footer="canonical-v1"] .footer-about .brand-name {
  color: var(--text, #f4f4f5);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: normal;
}
footer.site[data-bl-footer="canonical-v1"] .footer-about p {
  max-width: 290px;
  margin: .9rem 0 0;
  color: var(--text-tertiary, #9b9ba8);
  font-size: .88rem;
  line-height: 1.75;
}
footer.site[data-bl-footer="canonical-v1"] .footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border, rgba(255,255,255,.1));
  color: var(--text-tertiary, #9b9ba8);
  font-size: .78rem;
}
@media (max-width: 900px) {
  footer.site[data-bl-footer="canonical-v1"] .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  footer.site[data-bl-footer="canonical-v1"] {
    width: calc(100vw - 32px);
  }
  footer.site[data-bl-footer="canonical-v1"] .footer-grid {
    grid-template-columns: 1fr;
  }
}
.feature-section { margin: 0 0 2.4rem; }

/* ============================================================
   Card hover — one consistent system site-wide

   A) Content tiles: quiet emerald border + soft outer glow (CSS only)
   B) Platform tiles (.platform-card, .plat): same CSS edge PLUS WebGL sheen
   C) Content-card icons: box-shadow glow only (no SVG drop-shadow — Safari)
   ============================================================ */
:is(
  .feature-card,
  .feature-mini,
  .why-card,
  .mini-card,
  .mini,
  .step,
  .step-big,
  .layer,
  .plat,
  .tier,
  .contact-card,
  .address-card,
  .pricing-card,
  .post-card,
  .trust-card,
  .status-card,
  .summary-card,
  .platform-card,
  .tk,
  .card,
  .seo-cluster a,
  .link-list a
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
/* Match homepage why-card glass: soft surface, hairline edge, no nested “box in a box” look */
:is(.feature-card, .why-card, .contact-card) {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 18px 50px -28px rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}
:is(
  .feature-card,
  .feature-mini,
  .why-card,
  .mini-card,
  .mini,
  .step,
  .step-big,
  .layer,
  .plat,
  .tier,
  .contact-card,
  .address-card,
  .pricing-card,
  .post-card,
  .trust-card,
  .status-card,
  .summary-card,
  .platform-card,
  .tk,
  .card,
  .seo-cluster a,
  .link-list a
):hover {
  border-color: rgba(110, 231, 183, .32);
  /* The glow hugs the card instead of dripping below it. The previous value
     offset the shadow 22px downwards, so on every card type in this list the
     emerald bled out under the bottom edge. Zero offset keeps it a halo. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 34px -8px rgba(16, 185, 129, .38);
  transform: none;
}

/* Platform detail cards: icon tile brightens with the same edge language. */
.plat .plat-icon {
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.plat:hover .plat-icon {
  background: rgba(16, 185, 129, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 10px 24px -12px rgba(16, 185, 129, .75);
}
.plat:hover .plat-icon svg {
  fill: #eafff7;
  filter: drop-shadow(0 0 7px rgba(110, 231, 183, .55));
}

/* WebGL sheen canvas — platform tiles only (homepage + platforms page). */
.plat-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
}
.platform-card > *:not(.plat-fx),
.plat > *:not(.plat-fx) {
  position: relative;
  z-index: 1;
}
.platform-card .platform-icon {
  transition: fill .25s ease, filter .25s ease;
}
.platform-card:hover .platform-icon {
  fill: #eafff7;
  filter: drop-shadow(0 0 7px rgba(110, 231, 183, .55));
}

/* Icon tiles — glow via box-shadow only.
   Safari/WebKit flickers when animating SVG filter:drop-shadow()
   (esp. with overflow:hidden + isolation on the parent card). */
:is(.feature-card, .why-card, .contact-card, .card) .icon {
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
  transform: none;
}
:is(.feature-card, .why-card, .contact-card, .card) .icon .ico {
  /* No CSS filter on stroked SVGs — Chrome is fine, Safari shows hover artifacts */
  filter: none !important;
  transition: none;
}
:is(.feature-card, .why-card, .contact-card, .card):hover .icon {
  border-color: rgba(110, 231, 183, .5);
  background: radial-gradient(
    120% 120% at 30% 18%,
    rgba(16, 185, 129, .32),
    rgba(16, 185, 129, .08) 55%,
    rgba(255, 255, 255, .02)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 0 1px rgba(110, 231, 183, .12),
    0 8px 22px -10px rgba(16, 185, 129, .7);
  transform: none;
}
:is(.feature-card, .why-card, .contact-card, .card):hover .icon .ico {
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .plat-fx { display: none !important; }
  :is(
    .feature-card,
    .feature-mini,
    .why-card,
    .mini-card,
    .mini,
    .step,
    .step-big,
    .layer,
    .plat,
    .tier,
    .contact-card,
    .address-card,
    .pricing-card,
    .post-card,
    .trust-card,
    .status-card,
    .summary-card,
    .platform-card,
    .card,
    .seo-cluster a,
    .link-list a
  ),
  :is(.feature-card, .why-card, .contact-card, .card) .icon {
    transition: none;
  }
  :is(.feature-card, .why-card, .contact-card, .card):hover .icon {
    transform: none;
  }
  .platform-card:hover .platform-icon,
  .plat:hover .plat-icon svg {
    filter: none;
  }
}

/* ============================================================
   Wordmark — canonical BlindLock colors (overrides per-page drift)
   Rest:  Blind = white, Lock = emerald
   Hover: Blind = emerald, Lock = white
   Markup: <span class="wordmark-blind">Blind</span><span class="wordmark-lock">Lock</span>
   Legacy  Blind<span>Lock</span> still works via :last-child / text node.
   ============================================================ */
.brand-name,
.wordmark-blind,
.wordmark-lock {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}
.brand-name,
.wordmark-blind {
  color: #f4f4f5 !important;
  -webkit-text-fill-color: #f4f4f5 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
}
.brand-name > .wordmark-lock,
.brand-name > span:last-child,
.wordmark-lock {
  background-image: linear-gradient(135deg, #10b981 0%, #6ee7b7 50%, #10b981 100%) !important;
  background-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 .35em rgba(16, 185, 129, .5)) !important;
}
/* Footer must never inherit a stuck/inverted hover look */
footer.site .brand .brand-name,
footer.site .brand .wordmark-blind {
  color: #f4f4f5 !important;
  -webkit-text-fill-color: #f4f4f5 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
}
footer.site .brand .brand-name > .wordmark-lock,
footer.site .brand .brand-name > span:last-child,
footer.site .brand .wordmark-lock {
  background-image: linear-gradient(135deg, #10b981 0%, #6ee7b7 50%, #10b981 100%) !important;
  background-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 .35em rgba(16, 185, 129, .5)) !important;
}
/* Hover invert — nav, footer, and hero lockup */
.brand:hover .wordmark-blind,
.brand:focus-visible .wordmark-blind,
.brand-lockup:hover .wordmark-blind {
  background-image: linear-gradient(135deg, #10b981 0%, #6ee7b7 50%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 .35em rgba(16, 185, 129, .5)) !important;
}
/* Legacy markup Blind<span>Lock</span>: paint parent for Blind, then force Lock white */
.brand:hover .brand-name:not(:has(.wordmark-blind)),
.brand:focus-visible .brand-name:not(:has(.wordmark-blind)) {
  background-image: linear-gradient(135deg, #10b981 0%, #6ee7b7 50%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 .35em rgba(16, 185, 129, .5)) !important;
}
.brand:hover .wordmark-lock,
.brand:focus-visible .wordmark-lock,
.brand:hover .brand-name > span:last-child,
.brand:focus-visible .brand-name > span:last-child,
.brand-lockup:hover .wordmark-lock,
footer.site .brand:hover .wordmark-lock,
footer.site .brand:hover .brand-name > span:last-child,
footer.site .brand:focus-visible .wordmark-lock,
footer.site .brand:focus-visible .brand-name > span:last-child {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  filter: none !important;
}
/* When using explicit Blind span, keep parent neutral on hover */
.brand:hover .brand-name:has(.wordmark-blind),
.brand:focus-visible .brand-name:has(.wordmark-blind),
footer.site .brand:hover .brand-name:has(.wordmark-blind),
footer.site .brand:focus-visible .brand-name:has(.wordmark-blind) {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: #f4f4f5 !important;
  color: #f4f4f5 !important;
  filter: none !important;
}
footer.site .brand:hover .wordmark-blind,
footer.site .brand:focus-visible .wordmark-blind {
  background-image: linear-gradient(135deg, #10b981 0%, #6ee7b7 50%, #10b981 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 .35em rgba(16, 185, 129, .5)) !important;
}

/* Mirror the low-height hero tweak (existing rule only covered
   the older .page-hero class; the reference family uses .hero). */
@media (min-width: 900px) and (max-height: 820px) {
  .page > .hero:not(:has(.hero-card)),
  .page > .page-hero { margin-bottom: 1.7rem; }
  .page > .hero:not(:has(.hero-card)) h1,
  .page > .page-hero h1 { font-size: clamp(2.5rem, 5vw, 3.7rem); margin-bottom: .9rem; }
  .page > .hero:not(:has(.hero-card)) p,
  .page > .page-hero p { line-height: 1.7; }
}

/* Global ambient top glow (green shimmer) — 2026-07-22.
   `html body` (specificity 0,0,2) overrides each page's inline `body{}`
   background regardless of <style>/<link> order, so every page gets the
   same premium top-down emerald glow. Opt out with body.no-ambient. */
html body {
  /* Soft top-down emerald shimmer, IDENTICAL on every page. A LINEAR (vertical)
     fade with eased alpha stops — never radial — so there is no circular
     geometry and therefore no concentric ring/banding artifacts.
     The emerald layer is anchored to the top with a FIXED pixel height and does
     NOT scale with page length, so short and long pages render the exact same
     shimmer (previously the % stops stretched with body height, making long
     pages look far more prominent than short ones). Opt out with
     body.no-ambient. (The thin `.top-line` is separate and unchanged.) */
  background-color: var(--bg, #09090b);
  background-image:
    linear-gradient(to bottom,
      rgba(16, 185, 129, 0.12) 0,
      rgba(16, 185, 129, 0.086) 12%,
      rgba(16, 185, 129, 0.056) 24%,
      rgba(16, 185, 129, 0.034) 37%,
      rgba(16, 185, 129, 0.019) 50%,
      rgba(16, 185, 129, 0.009) 64%,
      rgba(16, 185, 129, 0.003) 80%,
      transparent 100%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 820px;
}
body.no-ambient {
  background: var(--bg, #09090b);
}

/* ── Founders list — inline pre-launch signup (2026-07-22) ───────────────
   Self-contained premium form. Uses hard emerald fallbacks so it renders
   identically on every page regardless of that page's inline :root tokens.
   Markup: <form class="founders-form" data-bl-founders> wired by bl-site.js. */
.founders-form {
  margin: 1.25rem 0 0;
  padding: 1.25rem 1.35rem 1.15rem;
  max-width: 36rem;
  border: 1px solid rgba(63,63,70,.55);
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(16,185,129,.12), transparent 58%),
    rgba(17,17,19,.88);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 22px 50px -28px rgba(0,0,0,.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Same Inter stack as body / feature cards — not Plus Jakarta (display only) */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.founders-form[data-bl-founders="disabled"] .founders-row,
.founders-form[data-bl-founders="disabled"] .founders-consent { opacity: .55; pointer-events: none; }
/* Beat .headline-copy p / .hero p (font-weight:300) — same Inter as body copy */
.founders-form .founders-lead,
p.founders-lead {
  margin: 0 0 1rem !important;
  max-width: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: .95rem !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  line-height: 1.65 !important;
  color: var(--text-secondary, #c4c4cc) !important;
}
.founders-form .founders-lead strong,
p.founders-lead strong {
  color: #6ee7b7 !important;
  font-weight: 600 !important;
  letter-spacing: -.015em;
  -webkit-text-fill-color: #6ee7b7;
}
.founders-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.founders-input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: .78rem 1rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #fafafa;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(63,63,70,.7);
  border-radius: 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.founders-input::placeholder {
  color: #71717a;
  font-weight: 500;
  letter-spacing: -.01em;
  opacity: .85;
}
.founders-input:focus {
  border-color: rgba(16,185,129,.65);
  box-shadow: 0 0 0 3px rgba(16,185,129,.16);
  background: rgba(0,0,0,.4);
}
.founders-submit {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -.01em;
}
.founders-consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: .95rem 0 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.55;
  color: #a1a1aa;
  cursor: pointer;
}
.founders-consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: .18rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #10b981;
  cursor: pointer;
}
.founders-consent a {
  color: #6ee7b7;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.founders-form .founders-note,
p.founders-note {
  margin: .8rem 0 0 !important;
  max-width: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: .76rem !important;
  font-weight: 400 !important;
  letter-spacing: -.005em !important;
  line-height: 1.5 !important;
  color: #71717a !important;
}
/* Honeypot — hidden from humans, visible to naive bots. */
.founders-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.founders-msg {
  margin: .85rem 0 0;
  padding: .6rem .75rem;
  font-size: .82rem;
  line-height: 1.45;
  border-radius: 10px;
  border: 1px solid transparent;
}
.founders-msg[data-tone="error"] { color: #fecaca; background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.30); }
.founders-msg[data-tone="info"]  { color: #cbd5e1; background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.25); }
.founders-msg[data-tone="ok"]    { color: #a7f3d0; background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); }
@media (max-width: 560px) {
  .founders-row { flex-direction: column; }
  .founders-submit { width: 100%; }
}

/* Founders submit — render IDENTICALLY to the premium "Coming soon" CTA
   (.cta-sheen): rich emerald gradient, hairline emerald border, inner highlight
   and soft glow. Self-contained so it matches on every page regardless of that
   page's inline styles. Also kills the browser's default grey focus ring that
   appears on a mouse click on a <button> (links don't show it), keeping only a
   clean emerald ring for keyboard focus. */
.founders-submit.button,
.founders-submit.button-primary {
  background: linear-gradient(135deg, #0fa873 0%, #34d399 55%, #10b981 100%);
  color: #04110d;
  border: 1px solid rgba(110, 231, 183, .35);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 26px -12px rgba(16,185,129,.65);
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
}
.founders-submit.button:hover {
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 32px -12px rgba(16,185,129,.85);
}
.founders-submit.button:focus { outline: none; }
.founders-submit.button:focus-visible {
  border-radius: 999px;
  outline: 2px solid rgba(110, 231, 183, .9);
  outline-offset: 2px;
}

/* ── Global background FX (particle network + dot grid + top line) — 2026-07-22 ─
   The 33 marketing pages ship this inline; these global rules cover EVERY other
   page so the animated background is identical site-wide. bl-site.js injects the
   markup where it's missing (skips pages that already have it, and .no-ambient
   / reduced-motion). Values mirror the marketing pages exactly. */
#particles {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .7;
}
.bg-effects {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.dot-grid {
  position: absolute; inset: 0; opacity: .025;
  background-image: radial-gradient(circle at 1px 1px, var(--text-tertiary, #9b9ba8) 1px, transparent 0);
  background-size: 32px 32px;
}
.top-line {
  position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 100;
  pointer-events: none; opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,.12) 18%,
    var(--emerald, #10b981) 50%, rgba(16,185,129,.12) 82%, transparent);
}
@media (prefers-reduced-motion: reduce) { #particles { display: none; } }

/* Canonical DE/EN selector — identical on every localized page. */
.lang-switch[data-bl-lang-switch="canonical-v1"] {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid var(--border-strong, rgba(255,255,255,.14));
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.lang-switch[data-bl-lang-switch="canonical-v1"] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px !important;
  min-height: 38px;
  padding: 0 .9rem !important;
  border-radius: 0;
  color: var(--text-secondary, #c4c4cc);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
nav.nav[data-bl-nav] > .lang-switch[data-bl-lang-switch="canonical-v1"] a {
  min-width: 60px !important;
  padding-inline: .9rem !important;
}
.lang-switch[data-bl-lang-switch="canonical-v1"] a:hover {
  color: var(--text-primary, #f4f4f5);
  text-decoration: none;
  background: rgba(255,255,255,.045);
}
.lang-switch[data-bl-lang-switch="canonical-v1"] a.active,
.lang-switch[data-bl-lang-switch="canonical-v1"] a[aria-current="page"] {
  color: #04110d;
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}
.lang-switch[data-bl-lang-switch="canonical-v1"] a:focus-visible {
  position: relative;
  z-index: 1;
  border-radius: 999px;
  outline: 2px solid #a7f3d0;
  outline-offset: -3px;
}
.bl-language-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 1.5rem;
}