/* Shared site chrome. Page styles must not redefine the header or its controls. */
@font-face {
  font-family: Manrope;
  src: url('assets/manrope.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: D-DIN;
  src: url('assets/d-din.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --site-header-height: 104px;
  --site-header-pad: clamp(24px, 5vw, 96px);
}
.header {
  position: fixed; inset: 0 0 auto; z-index: 20; width: 100%;
  height: var(--site-header-height); padding: 0 var(--site-header-pad);
  display: flex; align-items: center; justify-content: space-between;
  isolation: isolate; color: #fafbf6;
  font: 550 14px/1.5 Manrope, sans-serif;
  letter-spacing: normal;
}
.header::before {
  content: ''; position: absolute; inset: 0 0 -28px; z-index: -1;
  pointer-events: none; background: rgba(6,10,13,.96);
  -webkit-mask-image: linear-gradient(#000 0 calc(100% - 28px),transparent);
  mask-image: linear-gradient(#000 0 calc(100% - 28px),transparent);
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .header::before {
    background: rgba(6,10,13,.76);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    backdrop-filter: blur(20px) saturate(130%);
  }
}
.header .brand {
  display: flex; align-items: center; min-height: 44px; flex-shrink: 0;
  color: inherit; text-decoration: none;
}
.header .brand .header-wordmark {
  display: block; width: auto; height: 22px; flex-shrink: 0; fill: currentColor;
}
.header nav { display: flex; align-items: center; gap: 40px; font: inherit; }
.header nav > a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; font: inherit; letter-spacing: normal; white-space: nowrap;
  text-decoration: none; opacity: 1; transition: opacity .3s ease;
}
.header nav > a:not(.header-cta):hover { color: inherit; opacity: .65; }
.header nav > a[aria-current='page'] { color: inherit; }
.header nav > a[aria-current='page']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 1px; background: currentColor; opacity: .7;
}
.header .locale {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 44px; margin: 0 0 0 8px; padding: 10px 4px;
  border: 0; border-radius: 0; background: none; color: inherit;
  font: 600 12px/18px Manrope, sans-serif; letter-spacing: normal; cursor: pointer;
}
.header .header-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; min-height: 44px; min-width: 0; padding: 0 16px;
  border: 1px solid rgba(240,240,250,.35); border-radius: 4px;
  background: rgba(0,0,0,.5); color: #f0f0fa;
  font: 400 12px/12px D-DIN, sans-serif; letter-spacing: normal;
  text-transform: uppercase; text-align: center; white-space: nowrap;
  box-shadow: none; transform: none; opacity: 1;
  transition: background .5s cubic-bezier(.19,1,.22,1),color .5s cubic-bezier(.19,1,.22,1);
}
.header .header-cta:hover { background: #f0f0fa; color: #000; opacity: 1; transform: none; }
.header .header-cta:active, .header .locale:active { transform: none; }
.header a:focus-visible, .header button:focus-visible { outline: 2px solid #fafbf6; outline-offset: 4px; }
.header ::selection { background: #fafbf6; color: #060a0d; }
.header .header-cta-short { display: none; }
body.pricing-page .page { padding-top: calc(var(--site-header-height) + 28px); }
body.platform-page .outer { padding-top: calc(var(--site-header-height) + 8px); }
@media (max-width: 1100px) {
  .header nav { gap: 22px; }
}
@media (max-width: 900px) {
  :root { --site-header-height: 80px; }
  .header nav { gap: 16px; }
  .header nav > a.nav-secondary { display: none; }
}
@media (max-height: 760px) and (min-width: 901px) {
  :root { --site-header-height: 88px; }
}
@media (max-width: 600px) {
  :root { --site-header-height: 108px; --site-header-pad: 22px; }
  .header {
    display: grid; grid-template-columns: max-content max-content minmax(0,1fr) max-content max-content;
    grid-template-rows: 52px 36px; gap: 0 14px; align-content: center;
  }
  .header > .brand { grid-column: 1 / 4; grid-row: 1; justify-self: start; }
  .header nav { display: contents; }
  .header nav > .header-cta { grid-column: 4; grid-row: 1; padding-inline: 13px; }
  .header .locale { grid-column: 5; grid-row: 1; margin: 0; min-width: 28px; padding-inline: 0; }
  .header nav > .platform-link { grid-column: 1; grid-row: 2; min-height: 36px; font-size: 12px; }
  .header nav > .pricing-link { grid-column: 2; grid-row: 2; min-height: 36px; font-size: 12px; }
  .header .header-cta-label { display: none; }
  .header .header-cta-short { display: inline; }
}
@media (max-width: 380px) {
  :root { --site-header-pad: 18px; }
  .header { column-gap: 12px; }
  .header .header-cta { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .header nav > a, .header .header-cta { transition: none; }
}

/* Light frosted glass on Pricing, using the same shared header geometry. */
.pricing-page .header { color: #172010; }
.pricing-page .header::before {
  inset: 0; background: rgba(248,248,244,.96);
  -webkit-mask-image: none; mask-image: none;
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .pricing-page .header::before { background: rgba(248,248,244,.64); }
}
.pricing-page .header .header-cta {
  background: rgba(255,255,255,.12); border-color: rgba(23,32,16,.32); color: #172010;
}
.pricing-page .header .header-cta:hover { background: #172010; color: #f8f8f4; }
.pricing-page .header a:focus-visible, .pricing-page .header button:focus-visible { outline-color: #172010; }
.pricing-page .header ::selection { background: #172010; color: #f8f8f4; }
/* The expanded workspace starts directly below the shared header. */
.platform-page.is-exploring .header::before {
  inset: 0; -webkit-mask-image: none; mask-image: none;
}