/* Seele Design Contract: seele-home-v2
 * Asset identity is governed by seele-design-assets.manifest.json and its SHA-256 sidecar.
 * Code4Agent source: 6d36a85d4fd3b3f17ea6eb942071810f302c2ed8:apps/site/src/assets/styles/tokens.css
 * Generated file. Do not edit directly.
 */
:root {
  --seele-bg-void: #101110;
  --seele-bg-base: #141615;
  --seele-bg-raised: #191c1a;
  --seele-bg-high: #222522;
  --seele-bg-peak: #2d322e;
  --seele-ink-0: #f7faf7;
  --seele-ink-1: #e7ece7;
  --seele-ink-2: #aeb8ae;
  --seele-ink-3: #7f8a80;
  --seele-ink-4: #565f57;
  --seele-line-1: rgba(71, 78, 72, 0.9);
  --seele-line-2: rgba(76, 84, 77, 0.5);
  --seele-soul: #8ee66b;
  --seele-soul-dim: #6ec952;
  --seele-soul-bright: #a7ff82;
  --seele-soul-glow: rgba(142, 230, 107, 0.18);
  --seele-soul-ink: #162415;
  --seele-amber: #d9a852;
  --seele-amber-dim: rgba(217, 168, 82, 0.15);
  --seele-danger: #d9534f;
  --seele-danger-dim: rgba(217, 83, 79, 0.12);
  --seele-grid-line: rgba(255, 255, 255, 0.025);
  --seele-font-display: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --seele-font-body: 'Geist', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --seele-font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --seele-font-cn:
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'Source Han Sans CN', sans-serif;
  --seele-fs-hero: clamp(36px, 5vw, 64px);
  --seele-fs-display: clamp(32px, 4.5vw, 56px);
  --seele-fs-h1: 32px;
  --seele-fs-h2: 24px;
  --seele-fs-h3: 20px;
  --seele-fs-lead: 18px;
  --seele-fs-body: 16px;
  --seele-fs-sm: 13px;
  --seele-fs-xs: 11px;
  --seele-r-1: 6px;
  --seele-r-2: 12px;
  --seele-r-3: 16px;
  --seele-r-4: 24px;
  --seele-r-full: 9999px;
  --seele-bp-sm: 640px;
  --seele-bp-md: 860px;
  --seele-bp-lg: 1120px;
  --seele-bp-xl: 1440px;
  --seele-w-prose: 720px;
  --seele-w-narrow: 960px;
  --seele-w-page: 1200px;
  --seele-w-wide: 1440px;
  --seele-h-sm: 28px;
  --seele-h-md: 36px;
  --seele-h-lg: 44px;
  --seele-h-xl: 56px;
  --seele-s-1: 4px;
  --seele-s-2: 8px;
  --seele-s-3: 12px;
  --seele-s-4: 16px;
  --seele-s-5: 24px;
  --seele-s-6: 32px;
  --seele-s-7: 48px;
  --seele-s-8: 64px;
  --seele-s-9: 96px;
  --seele-s-10: 128px;
  --seele-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --seele-ease-in: cubic-bezier(0.55, 0.08, 0.68, 0.53);
  --seele-t-fast: 120ms;
  --seele-t-base: 200ms;
  --seele-t-slow: 400ms;
  --seele-shadow-soft:
    0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --seele-shadow-pop: 0 0 0 1px var(--seele-line-1) inset, 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --seele-shadow-soul: 0 0 0 1px var(--seele-soul) inset, 0 0 32px -4px var(--seele-soul-glow);
  --seele-grid-size: 48px;
}

@supports (color: oklch(0.82 0.18 130)) {
  :root {
    --seele-bg-void: oklch(0.11 0.004 140);
    --seele-bg-base: oklch(0.14 0.005 140);
    --seele-bg-raised: oklch(0.17 0.006 140);
    --seele-bg-high: oklch(0.21 0.008 140);
    --seele-bg-peak: oklch(0.26 0.01 140);
    --seele-ink-0: oklch(0.98 0.005 120);
    --seele-ink-1: oklch(0.92 0.005 120);
    --seele-ink-2: oklch(0.72 0.008 120);
    --seele-ink-3: oklch(0.55 0.01 120);
    --seele-ink-4: oklch(0.38 0.01 120);
    --seele-line-1: oklch(0.28 0.012 140 / 0.9);
    --seele-line-2: oklch(0.3 0.012 140 / 0.5);
    --seele-soul: oklch(0.82 0.18 130);
    --seele-soul-dim: oklch(0.7 0.16 130);
    --seele-soul-bright: oklch(0.9 0.2 130);
    --seele-soul-glow: oklch(0.82 0.18 130 / 0.18);
    --seele-soul-ink: oklch(0.15 0.05 140);
    --seele-amber: oklch(0.78 0.14 70);
    --seele-amber-dim: oklch(0.78 0.14 70 / 0.15);
    --seele-danger: oklch(0.68 0.19 25);
    --seele-danger-dim: oklch(0.68 0.19 25 / 0.12);
    --seele-grid-line: oklch(1 0 0 / 0.025);
  }
}
/* Shared page foundation. Loaded only by templates that opt into the contract. */
:where([data-seele-design-contract='seele-home-v2']) {
  min-width: 0;
  margin: 0;
  background: var(--seele-bg-void);
  color: var(--seele-ink-1);
  font-family: var(--seele-font-body);
  font-size: var(--seele-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where([data-seele-design-contract='seele-home-v2']) *,
:where([data-seele-design-contract='seele-home-v2']) *::before,
:where([data-seele-design-contract='seele-home-v2']) *::after {
  box-sizing: border-box;
}

.seele-grid-backdrop {
  background:
    linear-gradient(var(--seele-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--seele-grid-line) 1px, transparent 1px), var(--seele-bg-void);
  background-size: var(--seele-grid-size) var(--seele-grid-size);
}

.seele-container,
.seele-container--narrow,
.seele-container--prose,
.seele-container--wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--seele-s-6);
}

.seele-container {
  max-width: var(--seele-w-page);
}
.seele-container--narrow {
  max-width: var(--seele-w-narrow);
}
.seele-container--prose {
  max-width: var(--seele-w-prose);
}
.seele-container--wide {
  max-width: var(--seele-w-wide);
}

.seele-section {
  padding-block: var(--seele-s-9);
}

.seele-section--tight {
  padding-block: var(--seele-s-8);
}

.seele-display,
.seele-heading {
  margin-block: 0;
  color: var(--seele-ink-0);
  font-family: var(--seele-font-display);
  text-wrap: balance;
}

.seele-display {
  font-size: var(--seele-fs-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.seele-prose {
  color: var(--seele-ink-1);
  font-size: var(--seele-fs-body);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.seele-prose :where(h2, h3) {
  color: var(--seele-ink-0);
  font-family: var(--seele-font-display);
  line-height: 1.2;
  text-wrap: balance;
}

.seele-prose :where(a) {
  color: var(--seele-soul-bright);
  text-decoration-color: var(--seele-soul-dim);
  text-decoration-color: color-mix(in oklch, var(--seele-soul) 55%, transparent);
  text-underline-offset: 0.2em;
}

@media (max-width: 860px) {
  .seele-container,
  .seele-container--narrow,
  .seele-container--prose,
  .seele-container--wide {
    padding-inline: var(--seele-s-5);
  }

  .seele-section {
    padding-block: var(--seele-s-8);
  }
  .seele-section--tight {
    padding-block: var(--seele-s-7);
  }
}

@media (max-width: 640px) {
  .seele-container,
  .seele-container--narrow,
  .seele-container--prose,
  .seele-container--wide {
    padding-inline: var(--seele-s-4);
  }

  .seele-section {
    padding-block: var(--seele-s-7);
  }
  .seele-section--tight {
    padding-block: var(--seele-s-6);
  }
}

/* Shared components are deliberately namespaced; page templates own composition. */
.seele-button {
  display: inline-flex;
  min-height: var(--seele-h-lg);
  align-items: center;
  justify-content: center;
  gap: var(--seele-s-2);
  padding-inline: var(--seele-s-5);
  border: 1px solid transparent;
  border-radius: var(--seele-r-2);
  font: 600 var(--seele-fs-body) / 1 var(--seele-font-body);
  text-decoration: none;
  cursor: pointer;
}

.seele-button--primary {
  background: var(--seele-soul);
  color: var(--seele-soul-ink);
  box-shadow: var(--seele-shadow-soul);
}

.seele-button--secondary {
  border-color: var(--seele-line-1);
  background: var(--seele-bg-raised);
  color: var(--seele-ink-1);
}

.seele-card {
  min-width: 0;
  border: 1px solid var(--seele-line-2);
  border-radius: var(--seele-r-3);
  background: var(--seele-bg-raised);
  box-shadow: var(--seele-shadow-soft);
}

.seele-chip {
  display: inline-flex;
  min-height: var(--seele-h-sm);
  align-items: center;
  gap: var(--seele-s-2);
  padding-inline: var(--seele-s-3);
  border: 1px solid var(--seele-line-2);
  border-radius: var(--seele-r-full);
  background: var(--seele-bg-raised);
  color: var(--seele-ink-2);
  font: 500 var(--seele-fs-sm) / 1 var(--seele-font-body);
}

.seele-field {
  width: 100%;
  min-height: var(--seele-h-lg);
  padding-inline: var(--seele-s-4);
  border: 1px solid var(--seele-line-1);
  border-radius: var(--seele-r-2);
  background: var(--seele-bg-base);
  color: var(--seele-ink-1);
  font: inherit;
}

.seele-site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid var(--seele-line-2);
  background: rgba(16, 17, 16, 0.92);
  background: color-mix(in oklch, var(--seele-bg-void) 92%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* One navigation shell shared by every SEO page type. */
.seele-site-header .feature-header,
.seele-site-header .header-shell,
.seele-site-footer .footer-inner,
.seele-site-footer .footer-shell {
  width: min(var(--seele-w-page), calc(100% - 48px));
  margin-inline: auto;
}
.seele-site-header .feature-header,
.seele-site-header .header-shell {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--seele-s-6);
}
.seele-site-header .seele-brand,
.seele-site-header .brand,
.seele-site-footer .seele-brand,
.seele-site-footer .brand {
  flex: 0 0 auto;
  color: var(--seele-ink-0);
  font: 700 18px/1 var(--seele-font-display);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.seele-site-header .feature-nav,
.seele-site-header .main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 32px);
  flex: 1;
}
.seele-site-header .feature-nav a,
.seele-site-header .main-nav a,
.seele-site-header .nav-link {
  color: var(--seele-ink-2);
  font-size: 13px;
  text-decoration: none;
  transition: color 160ms ease;
}
.seele-site-header .feature-nav a:hover,
.seele-site-header .main-nav a:hover,
.seele-site-header .nav-link:hover {
  color: var(--seele-ink-0);
}
.seele-site-header .feature-header-cta,
.seele-site-header .primary-button,
.seele-site-header .btn-login {
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: var(--seele-r-2);
}
.seele-site-footer .footer-inner,
.seele-site-footer .footer-shell {
  padding-block: var(--seele-s-8);
}
.seele-site-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--seele-s-6);
}
.seele-site-footer .footer-inner nav,
.seele-site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.seele-site-footer .footer-inner nav a,
.seele-site-footer .footer-links a {
  color: var(--seele-ink-2);
  font-size: 13px;
  text-decoration: none;
}
.seele-site-footer .footer-inner nav a:hover,
.seele-site-footer .footer-links a:hover {
  color: var(--seele-soul-bright);
}

.seele-site-footer {
  border-top: 1px solid var(--seele-line-2);
  background: var(--seele-bg-base);
  color: var(--seele-ink-2);
}

.seele-cta,
.feature-cta,
.article-cta,
.compare-final-cta {
  border-block: 1px solid var(--seele-line-2);
  background:
    radial-gradient(circle at 82% 18%, var(--seele-soul-glow), transparent 28rem),
    var(--seele-bg-base);
}

.seele-faq,
.faq-list,
.runtime-faq,
.compare-faq-list {
  border-top: 1px solid var(--seele-line-1);
}

.seele-faq :where(details, .faq-item, .runtime-faq-item),
.faq-list :where(details, .faq-item, .runtime-faq-item),
.runtime-faq :where(details, .faq-item, .runtime-faq-item),
.compare-faq-list :where(details, .faq-item, .runtime-faq-item) {
  border-bottom: 1px solid var(--seele-line-2);
}

.seele-media,
.article-image,
.feature-card-media,
.compare-proof-media,
.image-carousel-stage {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--seele-line-2);
  border-radius: var(--seele-r-3);
  background: var(--seele-bg-raised);
}

.seele-media :where(img, video),
.article-image :where(img, video),
.feature-card-media :where(img, video),
.compare-proof-media :where(img, video),
.image-carousel-stage :where(img, video) {
  display: block;
  width: 100%;
  height: auto;
}

.seele-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--seele-s-2);
  color: var(--seele-soul-bright);
  font: 500 var(--seele-fs-xs) / 1 var(--seele-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seele-eyebrow::before {
  width: var(--seele-s-2);
  height: var(--seele-s-2);
  background: var(--seele-soul);
  content: '';
}

:where(.seele-button, .seele-field, [data-seele-design-contract='seele-home-v2'] a):focus-visible {
  outline: 2px solid var(--seele-soul);
  outline-offset: 3px;
}

@media (hover: hover) {
  .seele-button--primary:hover {
    background: var(--seele-soul-bright);
  }
  .seele-button--secondary:hover {
    background: var(--seele-bg-high);
  }
  .seele-card:hover {
    border-color: var(--seele-line-1);
  }
}

@media (max-width: 640px) {
  .seele-button--mobile-wide {
    width: 100%;
  }
}

/* Motion is state feedback only. Critical SEO content never starts hidden. */
.seele-button,
.seele-card,
.seele-field {
  transition:
    color var(--seele-t-fast) var(--seele-ease-out),
    background-color var(--seele-t-fast) var(--seele-ease-out),
    border-color var(--seele-t-fast) var(--seele-ease-out),
    box-shadow var(--seele-t-base) var(--seele-ease-out),
    transform var(--seele-t-base) var(--seele-ease-out);
}

@media (hover: hover) {
  .seele-card:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-seele-design-contract='seele-home-v2']) *,
  :where([data-seele-design-contract='seele-home-v2']) *::before,
  :where([data-seele-design-contract='seele-home-v2']) *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* V2 wordmark uses a tightly cropped 2x raster: never upscale or translate it. */
.seele-wordmark {
  width: 48px;
  height: auto;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.seele-wordmark img {
  width: 48px;
  height: auto;
  max-width: 100%;
  display: block;
}
.seele-wordmark--footer,
.seele-wordmark--footer img {
  width: 48px;
}

/* Acquisition heroes own the first viewport; the shared header overlays them. */
:where([data-seele-design-contract='seele-home-v2'] body) {
  min-width: 0;
  margin: 0;
}
:where(html[data-feature-template='seele-tool-v2'] .seele-site-header),
:where(html[data-feature-template='seele-image-v2'] .seele-site-header) {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
}

/* Current SEO shell markup shared by every page family. */
.seele-header__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--seele-s-6);
}
.seele-primary-nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 32px);
}
.seele-primary-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--seele-ink-2);
  font-size: 14px;
  text-decoration: none;
}
.seele-primary-nav a:hover,
.seele-primary-nav a[aria-current='page'] {
  color: var(--seele-ink-0);
}
.seele-primary-nav a[aria-current='page'] {
  box-shadow: inset 0 -2px var(--seele-soul);
}
.seele-header__actions {
  display: flex;
  align-items: center;
  gap: var(--seele-s-3);
}
.seele-header__cta {
  min-height: 44px;
}
.seele-mobile-menu {
  position: relative;
  display: none;
}
.seele-mobile-menu summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--seele-line-1);
  border-radius: var(--seele-r-2);
  cursor: pointer;
  list-style: none;
}
.seele-mobile-menu summary::-webkit-details-marker {
  display: none;
}
.seele-mobile-menu summary span,
.seele-mobile-menu summary span::before,
.seele-mobile-menu summary span::after {
  width: 18px;
  height: 1px;
  display: block;
  background: var(--seele-ink-0);
  content: '';
}
.seele-mobile-menu summary span {
  position: relative;
}
.seele-mobile-menu summary span::before {
  position: absolute;
  top: -6px;
}
.seele-mobile-menu summary span::after {
  position: absolute;
  top: 6px;
}
.seele-mobile-menu nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(280px, calc(100vw - 32px));
  display: grid;
  padding: var(--seele-s-2);
  border: 1px solid var(--seele-line-1);
  border-radius: var(--seele-r-3);
  background: var(--seele-bg-raised);
  box-shadow: var(--seele-shadow-pop);
}
.seele-mobile-menu nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding-inline: var(--seele-s-3);
  border-radius: var(--seele-r-2);
  color: var(--seele-ink-1);
  text-decoration: none;
}
.seele-footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr);
  gap: clamp(48px, 8vw, 96px);
  padding-block: var(--seele-s-8);
}
.seele-footer__brand {
  min-width: 0;
}
.seele-footer__brand p {
  max-width: 36ch;
  margin: var(--seele-s-4) 0 0;
  color: var(--seele-ink-2);
  line-height: 1.65;
}
.seele-footer__links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--seele-s-5);
}
.seele-footer__links h2 {
  margin: 0 0 var(--seele-s-3);
  color: var(--seele-ink-0);
  font: 600 var(--seele-fs-sm)/1.2 var(--seele-font-body);
}
.seele-footer__links a {
  min-height: 32px;
  display: flex;
  align-items: center;
  color: var(--seele-ink-2);
  font-size: 13px;
  text-decoration: none;
}
.seele-footer__links a:hover {
  color: var(--seele-soul-bright);
}
.seele-footer__bottom {
  padding-block: var(--seele-s-4);
  border-top: 1px solid var(--seele-line-2);
  color: var(--seele-ink-3);
  font-size: 12px;
}
@media (max-width: 900px) {
  .seele-primary-nav {
    display: none;
  }
  .seele-mobile-menu {
    display: block;
  }
  .seele-footer__top {
    grid-template-columns: 1fr;
  }
  .seele-footer__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .seele-header__inner {
    gap: var(--seele-s-2);
  }
  .seele-header__cta {
    min-height: 38px;
    padding-inline: var(--seele-s-3);
  }
  .seele-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}