/* ============================================================
   SYNORB - Site-wide corporate uplift
   Shared visual layer inspired by the sign-in page.
   ============================================================ */

:root {
  --site-bg: var(--bg, #fafafa);
  --site-text: var(--text, #1a1a1a);
  --site-line-strong: var(--line-strong, rgba(0, 0, 0, 0.12));
  --site-mono: var(--font-mono, "IBM Plex Mono", "SFMono-Regular", Consolas, monospace);
  --corp-grid-size: 4.5rem;
  --corp-header-bg: color-mix(in srgb, var(--site-bg) 93%, transparent);
  --corp-card-bg: color-mix(in srgb, var(--site-bg) 91%, transparent);
  --corp-card-bg-strong: color-mix(in srgb, var(--site-bg) 95%, transparent);
  --corp-panel-bg: color-mix(in srgb, var(--site-bg) 94%, var(--site-text) 2%);
  --corp-panel-soft: color-mix(in srgb, var(--site-bg) 97%, var(--site-text) 1%);
  --corp-field-bg: color-mix(in srgb, var(--site-bg) 94%, transparent);
  --corp-chip-bg: color-mix(in srgb, var(--site-bg) 88%, transparent);
  --corp-surface-blur: blur(18px);
  --corp-shadow: 0 24px 80px rgba(20, 24, 24, 0.1);
  --corp-shadow-soft: 0 18px 54px rgba(20, 24, 24, 0.075);
  --corp-radius: 8px;
  --body-size: 1rem;
  --small-size: 0.9rem;
  --micro-size: 0.78rem;
  --mono-size: 0.72rem;
  --h1-size: clamp(2.6rem, 4.45vw, 4rem);
  --h2-size: clamp(1.55rem, 2.4vw, 2.15rem);
  --section-space: clamp(4.5rem, 9vh, 7rem);
}

[data-theme="dark"] {
  --corp-header-bg: color-mix(in srgb, var(--site-bg) 88%, transparent);
  --corp-card-bg: color-mix(in srgb, var(--site-bg) 88%, transparent);
  --corp-card-bg-strong: color-mix(in srgb, var(--site-bg) 92%, transparent);
  --corp-panel-bg: color-mix(in srgb, var(--site-bg) 91%, var(--site-text) 3%);
  --corp-panel-soft: color-mix(in srgb, var(--site-bg) 95%, var(--site-text) 2%);
  --corp-field-bg: color-mix(in srgb, var(--site-bg) 91%, transparent);
  --corp-chip-bg: color-mix(in srgb, var(--site-bg) 86%, transparent);
  --corp-shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
  --corp-shadow-soft: 0 18px 64px rgba(0, 0, 0, 0.32);
}

body:not(.login-page) {
  position: relative;
  font-size: var(--body-size);
  line-height: 1.62;
  background: var(--site-bg) !important;
}

body:not(.login-page) .page {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

body:not(.login-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--site-text) 5%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--site-text) 4%, transparent) 0 1px, transparent 1px 100%),
    var(--site-bg);
  background-size: var(--corp-grid-size) var(--corp-grid-size), var(--corp-grid-size) var(--corp-grid-size), auto;
}

body:not(.login-page) main,
body:not(.login-page) :is(
  .hero,
  .section,
  .section-viewport,
  .section-viewport-compact,
  .product-section,
  .pricing-section,
  .contracts-section,
  .page-section,
  .content-section
) {
  background-color: transparent !important;
}

body:not(.login-page)::selection {
  background: color-mix(in srgb, var(--site-text) 12%, transparent);
  color: var(--site-text);
}

body:not(.login-page) :is(.site-header, .top-bar) {
  border-bottom: 1px solid var(--site-line-strong) !important;
  background: var(--corp-header-bg) !important;
  backdrop-filter: var(--corp-surface-blur);
  -webkit-backdrop-filter: var(--corp-surface-blur);
}

body:not(.login-page) .nav-brand {
  letter-spacing: 0.11em !important;
}

body:not(.login-page) .nav-links a,
body:not(.login-page) .footer-group a,
body:not(.login-page) .footer-social a,
body:not(.login-page) .footer-bottom a {
  letter-spacing: 0;
}

body:not(.login-page) .nav-cta,
body:not(.login-page) .btn-primary,
body:not(.login-page) .btn-submit,
body:not(.login-page) .button-primary,
body:not(.login-page) .tier-option-cta a,
body:not(.login-page) .side-link,
body:not(.login-page) .cta-link {
  border-radius: 6px !important;
  box-shadow: none !important;
}

body:not(.login-page) .theme-toggle,
body:not(.login-page) .nav-menu-btn,
body:not(.login-page) .nav-overlay-close {
  background: var(--corp-chip-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body:not(.login-page) h1,
body:not(.login-page) .hero-headline,
body:not(.login-page) .hero-title,
body:not(.login-page) .blog-title,
body:not(.login-page) .page-title,
body:not(.login-page) .docs-title,
body:not(.login-page) .section-title,
body:not(.login-page) .pricing-title,
body:not(.login-page) .product-title {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.02 !important;
}

body:not(.login-page) h1,
body:not(.login-page) .hero-headline,
body:not(.login-page) .blog-title,
body:not(.login-page) .page-title,
body:not(.login-page) .docs-title,
body:not(.login-page) .pricing-title {
  font-size: var(--h1-size) !important;
}

body:not(.login-page) h2,
body:not(.login-page) .section-title,
body:not(.login-page) .format-title,
body:not(.login-page) .side-title {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body:not(.login-page) .eyebrow,
body:not(.login-page) .hero-eyebrow,
body:not(.login-page) .section-label,
body:not(.login-page) .post-meta,
body:not(.login-page) .pill,
body:not(.login-page) .metric-label,
body:not(.login-page) .tag,
body:not(.login-page) .badge,
body:not(.login-page) .domain-label,
body:not(.login-page) .feature-label,
body:not(.login-page) .form-label {
  font-family: var(--site-mono) !important;
  font-size: var(--mono-size) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

body:not(.login-page) .hero,
body:not(.login-page) .product-hero,
body:not(.login-page) .pricing-hero,
body:not(.login-page) .blog-hero,
body:not(.login-page) .docs-hero,
body:not(.login-page) .thesis-hero,
body:not(.login-page) .agents-hero,
body:not(.login-page) .landing-hero,
body:not(.login-page) .page-hero {
  position: relative;
}

body:not(.login-page) .hero::before,
body:not(.login-page) .product-hero::before,
body:not(.login-page) .pricing-hero::before,
body:not(.login-page) .blog-hero::before,
body:not(.login-page) .docs-hero::before,
body:not(.login-page) .thesis-hero::before,
body:not(.login-page) .agents-hero::before,
body:not(.login-page) .landing-hero::before,
body:not(.login-page) .page-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--site-line-strong), transparent);
  pointer-events: none;
}

body:not(.login-page) :is(
  .agent-box,
  .card,
  .card-subtle,
  .cadence-card,
  .tile,
  .digest-card,
  .explainer-card,
  .export-card,
  .feature-card,
  .format-card,
  .format-item,
  .faq-card,
  .interface-card,
  .proof-card,
  .profile-card,
  .side-card,
  .featured-card,
  .post-row,
  .post-banner,
  .blog-card,
  .claim-item,
  .agent-card,
  .plan-card,
  .plan-tile,
  .tier,
  .tier-option,
  .pricing-card,
  .domain-card,
  .domain-cell,
  .spec-card,
  .schema-card,
  .stat-card,
  .metric-card,
  .metric,
  .mini-cell,
  .volume-card,
  .stream-cell,
  .source-card,
  .source-channel-row,
  .flow-step,
  .gateway-card,
  .manifest-card,
  .manifest-console,
  .manifest-panel,
  .manifests-panel,
  .manifest-tile,
  .example-card,
  .code-card,
  .rest-card,
  .endpoint-card,
  .endpoint,
  .tool-example,
  .use-card,
  .use-case,
  .nl-card,
  .status-card,
  .auth-card,
  .synorb-card,
  .synorb-panel,
  .jobs-panel,
  .human-panel,
  .primitive-panel,
  .upgrade-inline-card
) {
  border-color: var(--site-line-strong) !important;
  border-radius: var(--corp-radius) !important;
  background: var(--corp-card-bg) !important;
  box-shadow: var(--corp-shadow-soft);
  backdrop-filter: var(--corp-surface-blur);
  -webkit-backdrop-filter: var(--corp-surface-blur);
  background-clip: padding-box;
}

body:not(.login-page) :is(
  pre,
  code,
  table,
  .code-block,
  .code-panel,
  .code-pre,
  .code-zone,
  .terminal,
  .console-body,
  .console-head,
  .command,
  .curl-box,
  .agent-curl,
  .schema-block,
  .schema-grid,
  .json-block,
  .key-table,
  .listening-table,
  .param-table,
  .manifest-display,
  .manifest-view,
  .manifest-view-pretty,
  .output-panel,
  .output-panel-body,
  .response,
  .response-preview,
  .try-response,
  .try-response-body,
  .transcript-preview,
  .scroll-box,
  .swagger-ui :is(.opblock, .opblock-body, .scheme-container, section.models, .model-container, .responses-wrapper, .responses-inner, table, textarea)
) {
  border-radius: 6px;
  background: var(--corp-panel-soft) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-clip: padding-box;
}

body:not(.login-page) :is(
  .pill,
  .badge,
  .tag,
  .cadence-pill,
  .toc-badge,
  .code-badge,
  .tier-tag,
  .referrer-badge,
  .test-live-pill,
  .pg-status-pill,
  .plan-tab,
  .blog-tab,
  .domain-btn
) {
  background: var(--corp-chip-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-clip: padding-box;
}

body:not(.login-page) :is(
  input,
  textarea,
  select
) {
  border-color: var(--site-line-strong) !important;
  border-radius: 6px !important;
  background: var(--corp-field-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:not(.login-page) :is(input, textarea, select):focus {
  border-color: var(--site-text) !important;
  background: var(--corp-card-bg-strong) !important;
}

body:not(.login-page) .site-footer {
  border-top: 1px solid var(--site-line-strong) !important;
  background: transparent !important;
  backdrop-filter: none;
}

body:not(.login-page) .nav-overlay {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--site-text) 5%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--site-text) 4%, transparent) 0 1px, transparent 1px 100%),
    var(--site-bg) !important;
  background-size: var(--corp-grid-size) var(--corp-grid-size), var(--corp-grid-size) var(--corp-grid-size), auto;
}

body:not(.login-page) .blog-layout,
body:not(.login-page) .proof-grid,
body:not(.login-page) .format-grid,
body:not(.login-page) .interface-grid,
body:not(.login-page) .pricing-grid,
body:not(.login-page) .tiers,
body:not(.login-page) .cards-grid,
body:not(.login-page) .feature-grid {
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

body:not(.login-page) .pill.dark,
body:not(.login-page) .badge.dark,
body:not(.login-page) .tag.dark {
  background: var(--site-text) !important;
  color: var(--site-bg) !important;
}

body:not(.login-page) .page-main,
body:not(.login-page) main {
  position: relative;
}

@media (max-width: 720px) {
  :root {
    --h1-size: clamp(2rem, 10vw, 2.7rem);
    --corp-grid-size: 3.35rem;
  }

  body:not(.login-page) :is(.site-header, .top-bar) {
    background: var(--corp-card-bg-strong) !important;
  }

  body:not(.login-page) :is(.hero-headline, h1, .blog-title, .page-title, .docs-title) {
    line-height: 1.05 !important;
  }

  body:not(.login-page) :is(
    .hero,
    .product-hero,
    .pricing-hero,
    .blog-hero,
    .docs-hero,
    .thesis-hero,
    .agents-hero,
    .landing-hero,
    .page-hero
  ) {
    min-height: auto !important;
    max-width: 100%;
    padding-top: clamp(3.25rem, 10vh, 5rem) !important;
    padding-bottom: clamp(3rem, 8vh, 4.75rem) !important;
  }

  body:not(.login-page) :is(
    .hero-sub,
    .hero-copy,
    .subtitle,
    .section-copy,
    .page-intro,
    .docs-subtitle,
    .pricing-subtitle
  ) {
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  body:not(.login-page) .cadence-switcher {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  body:not(.login-page) .cadence-pill {
    width: 100%;
    min-width: 0;
  }
}