/* ============================================================
   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);
  --scrollbar-size: 0.625rem;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(26, 26, 26, 0.26);
  --scrollbar-thumb-hover: rgba(26, 26, 26, 0.42);
  --scrollbar-thumb-active: rgba(26, 26, 26, 0.56);
  --corp-header-bg: color-mix(in srgb, var(--site-bg) 98%, var(--site-text) 2%);
  --corp-card-bg: color-mix(in srgb, var(--site-bg) 97%, var(--site-text) 1%);
  --corp-card-bg-strong: color-mix(in srgb, var(--site-bg) 99%, var(--site-text) 1%);
  --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) 98%, var(--site-text) 1%);
  --corp-chip-bg: color-mix(in srgb, var(--site-bg) 96%, var(--site-text) 1%);
  --corp-surface-blur: none;
  --corp-shadow: 0 18px 54px rgba(20, 24, 24, 0.08);
  --corp-shadow-soft: 0 10px 30px rgba(20, 24, 24, 0.055);
  --corp-radius: 8px;
  --site-shell-max: 1240px;
  --site-studio-shell-max: var(--site-shell-max);
  --site-shell-pad: clamp(1rem, 3vw, 2rem);
  --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"] {
  --scrollbar-thumb: rgba(237, 237, 237, 0.24);
  --scrollbar-thumb-hover: rgba(237, 237, 237, 0.38);
  --scrollbar-thumb-active: rgba(237, 237, 237, 0.5);
  --corp-header-bg: color-mix(in srgb, var(--site-bg) 96%, var(--site-text) 4%);
  --corp-card-bg: color-mix(in srgb, var(--site-bg) 94%, var(--site-text) 3%);
  --corp-card-bg-strong: color-mix(in srgb, var(--site-bg) 97%, var(--site-text) 3%);
  --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) 95%, var(--site-text) 3%);
  --corp-chip-bg: color-mix(in srgb, var(--site-bg) 93%, var(--site-text) 4%);
  --corp-shadow: 0 18px 56px rgba(0, 0, 0, 0.36);
  --corp-shadow-soft: 0 10px 34px rgba(0, 0, 0, 0.24);
}

html {
  color-scheme: light;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

[data-theme="dark"] {
  color-scheme: dark;
}

* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
  background: transparent;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-width: 2.5rem;
  min-height: 2.5rem;
  background-color: var(--scrollbar-thumb);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

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

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

body:not(.login-page):not(:has(.dash-main)) .page:has(.site-header) {
  max-width: var(--site-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--site-shell-pad) !important;
  padding-right: var(--site-shell-pad) !important;
}

body[data-pg-state]:not(.login-page) .page:has(.site-header) {
  max-width: var(--site-studio-shell-max) !important;
}

body:not(.login-page) :is(
  .page,
  .page-main,
  main,
  section,
  header,
  footer,
  .site-header,
  .site-footer,
  .nav-inner,
  .hero,
  .product-hero,
  .pricing-hero,
  .blog-hero,
  .docs-hero,
  .thesis-hero,
  .agents-hero,
  .landing-hero,
  .page-hero,
  .section,
  .product-section,
  .pricing-section,
  .content-section,
  .cards-grid,
  .feature-grid,
  .pricing-grid,
  .proof-grid,
  .format-grid,
  .interface-grid,
  .blog-layout,
  .pg-shell,
  .pg-disconnected-host,
  .pg-connected-host
) {
  min-width: 0;
}

body:not(.login-page) :is(img, video, canvas, table, pre) {
  max-width: 100%;
}

body:not(.login-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--site-bg);
}

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: none;
  -webkit-backdrop-filter: none;
}

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;
}

@media (min-width: 721px) {
  body:not(.login-page):not([data-pg-state]) :is(
    .hero,
    .product-hero,
    .pricing-hero,
    .blog-hero,
    .docs-hero,
    .thesis-hero,
    .agents-hero,
    .landing-hero,
    .page-hero
  ) {
    min-height: clamp(34rem, 72svh, 48rem) !important;
  }
}

@media (min-width: 1200px) and (min-height: 900px) {
  body:not(.login-page):not([data-pg-state]) {
    --site-large-stage-top: clamp(4.75rem, 7vh, 5.25rem);
  }

  body:not(.login-page):not([data-pg-state]) :is(.page > .hero, main > .hero) {
    min-height: calc(100svh - 4.25rem) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding-top: var(--site-large-stage-top) !important;
  }

  body:not(.login-page):not([data-pg-state]) :is(.page > .blog-hero, .page > .thesis-hero, .agents-hero) {
    padding-top: var(--site-large-stage-top) !important;
  }

  body:not(.login-page):not([data-pg-state]) .page > #hero.hero {
    padding-top: clamp(5.25rem, 7.4vh, 5.75rem) !important;
  }
}

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: none;
  -webkit-backdrop-filter: none;
  background-clip: padding-box;
}

body:not(.login-page) :is(
  .pill,
  .badge,
  .tag,
  .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: none;
  -webkit-backdrop-filter: none;
  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: none;
  -webkit-backdrop-filter: none;
}

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: var(--site-bg) !important;
}

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;
}

body:not(.login-page) .product-section .product-hero {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

body:not(.login-page) .product-section .product-hero::before {
  content: none !important;
}

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

  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) #hero.hero {
    min-height: calc(100dvh - var(--header-h)) !important;
    padding-top: 1.05rem !important;
    padding-bottom: 1rem !important;
  }

  body:not(.login-page) #hero .hero-layout {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  body:not(.login-page) #hero .hero-eyebrow {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.65rem;
  }

  body:not(.login-page) #hero .hero-headline {
    font-size: 2rem !important;
    letter-spacing: 0 !important;
    line-height: 1.02 !important;
    margin-bottom: 0.55rem;
  }

  body:not(.login-page) #hero .hero-growth {
    font-size: 0.64rem;
    line-height: 1.35;
    margin-bottom: 0.75rem;
  }

  body:not(.login-page) #hero .hero-context-graph {
    height: clamp(120px, 18dvh, 150px);
    margin: 0.35rem 0 1.2rem;
  }

  body:not(.login-page) #hero .hero-sub {
    font-size: 0.9rem;
    line-height: 1.42;
    margin-bottom: 0.55rem;
  }

  body:not(.login-page) #hero .hero-punchline {
    font-size: 0.92rem;
    line-height: 1.4;
    margin-bottom: 0.9rem;
  }
}

@media (max-width: 720px) and (min-height: 680px) {
  body:not(.login-page) #hero .hero-layout {
    min-height: calc(100dvh - var(--header-h) - 6.4rem);
  }

  body:not(.login-page) #hero .hero-ctas {
    margin-bottom: max(0.75rem, env(safe-area-inset-bottom));
    margin-top: auto;
  }
}

@media (max-width: 720px) and (min-height: 760px) {
  body:not(.login-page) #hero.hero {
    padding-top: 1.35rem !important;
    padding-bottom: 1.25rem !important;
  }

  body:not(.login-page) #hero .hero-eyebrow {
    margin-bottom: 0.8rem;
  }

  body:not(.login-page) #hero .hero-headline {
    margin-bottom: 0.7rem;
  }

  body:not(.login-page) #hero .hero-growth {
    margin-bottom: 1rem;
  }

  body:not(.login-page) #hero .hero-context-graph {
    height: clamp(155px, 22dvh, 210px);
    margin-top: 0.45rem;
    margin-bottom: 1.75rem;
  }

  body:not(.login-page) #hero .hero-sub {
    margin-bottom: 0.75rem;
  }

  body:not(.login-page) #hero .hero-punchline {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 720px) and (min-height: 680px) and (max-height: 819px) {
  body:not(.login-page) #hero .hero-context-graph {
    height: clamp(185px, 28dvh, 230px);
    margin-top: 0.55rem;
    margin-bottom: 1.95rem;
  }
}

@media (max-width: 720px) and (min-width: 380px) and (min-height: 820px) {
  body:not(.login-page) #hero.hero {
    padding-top: 1.65rem !important;
  }

  body:not(.login-page) #hero .hero-growth {
    margin-bottom: 1.15rem;
  }

  body:not(.login-page) #hero .hero-context-graph {
    height: clamp(260px, 32dvh, 285px);
    margin-top: 0.6rem;
    margin-bottom: 2.35rem;
  }

  body:not(.login-page) #hero .hero-sub {
    margin-bottom: 0.95rem;
  }

  body:not(.login-page) #hero .hero-punchline {
    margin-bottom: 1.55rem;
  }
}

@media (max-width: 720px) and (min-height: 880px) {
  body:not(.login-page) #hero.hero {
    padding-top: 2.25rem !important;
  }

  body:not(.login-page) #hero .hero-eyebrow {
    margin-bottom: 0.95rem;
  }

  body:not(.login-page) #hero .hero-headline {
    margin-bottom: 0.85rem;
  }

  body:not(.login-page) #hero .hero-growth {
    margin-bottom: 1.35rem;
  }

  body:not(.login-page) #hero .hero-context-graph {
    height: clamp(245px, 32dvh, 310px);
    margin-top: 0.75rem;
    margin-bottom: 2.85rem;
  }

  body:not(.login-page) #hero .hero-sub {
    margin-bottom: 1.1rem;
  }

  body:not(.login-page) #hero .hero-punchline {
    margin-bottom: 1.85rem;
  }
}

@media (max-width: 720px) and (min-height: 900px) {
  body:not(.login-page) #hero.hero {
    padding-top: 2.55rem !important;
  }

  body:not(.login-page) #hero .hero-growth {
    margin-bottom: 1.5rem;
  }

  body:not(.login-page) #hero .hero-context-graph {
    height: clamp(285px, 36dvh, 345px);
    margin-top: 0.8rem;
    margin-bottom: 3.25rem;
  }

  body:not(.login-page) #hero .hero-sub {
    margin-bottom: 1.2rem;
  }

  body:not(.login-page) #hero .hero-punchline {
    margin-bottom: 2rem;
  }
}

@media (max-width: 340px), (max-width: 720px) and (max-height: 620px) {
  body:not(.login-page) #hero.hero {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  body:not(.login-page) #hero .hero-eyebrow {
    font-size: 0.6rem !important;
    margin-bottom: 0.35rem;
  }

  body:not(.login-page) #hero .hero-headline {
    font-size: 1.72rem !important;
    margin-bottom: 0.3rem;
  }

  body:not(.login-page) #hero .hero-growth {
    font-size: 0.56rem;
    margin-bottom: 0.35rem;
  }

  body:not(.login-page) #hero .hero-context-graph {
    height: 100px;
    margin-bottom: 0.4rem;
  }

  body:not(.login-page) #hero .hero-sub {
    font-size: 0.78rem;
    line-height: 1.3;
    margin-bottom: 0.3rem;
  }

  body:not(.login-page) #hero .hero-punchline {
    font-size: 0.8rem;
    line-height: 1.28;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 720px) {
  body:not(.login-page) .blog-hero {
    padding-top: clamp(1.45rem, 5vh, 2rem) !important;
    padding-bottom: 0.9rem !important;
  }
}