@layer reset,base,components,utilities;@font-face{font-family:general sans;src:local("General Sans Regular"),local("GeneralSans-Regular");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:general sans;src:local("General Sans Medium"),local("GeneralSans-Medium");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:general sans;src:local("General Sans Semibold"),local("GeneralSans-Semibold");font-weight:600;font-style:normal;font-display:swap}:root{color-scheme:light;--lch-white:100% 0 0;--lch-cream:96.5% 0.015 80;--lch-gray-50:98% 0.003 280;--lch-gray-100:96% 0.005 280;--lch-gray-200:92% 0.01 280;--lch-gray-300:85% 0.01 280;--lch-gray-400:70% 0.015 280;--lch-gray-500:55% 0.015 280;--lch-gray-600:40% 0.02 280;--lch-gray-700:30% 0.02 280;--lch-gray-800:22% 0.02 280;--lch-gray-900:15% 0.04 280;--lch-gray-950:10% 0.03 280;--lch-navy-50:96% 0.01 280;--lch-navy-100:92% 0.02 280;--lch-navy-200:85% 0.03 280;--lch-navy-300:70% 0.05 280;--lch-navy-400:55% 0.06 280;--lch-navy-500:40% 0.06 280;--lch-navy-600:30% 0.05 280;--lch-navy-700:25% 0.04 280;--lch-navy-800:20% 0.04 280;--lch-navy-900:18% 0.04 280;--lch-navy-950:16% 0.04 280;--lch-teal-300:80% 0.08 190;--lch-teal-400:75% 0.09 190;--lch-teal-500:70% 0.1 190;--lch-teal-600:60% 0.1 190;--lch-teal-700:50% 0.09 190;--lch-orange-300:75% 0.14 50;--lch-orange-400:70% 0.16 50;--lch-orange-500:65% 0.18 50;--lch-orange-600:55% 0.18 50;--lch-orange-700:45% 0.16 50;--lch-yellow-300:90% 0.13 90;--lch-yellow-400:86% 0.15 90;--lch-yellow-500:82% 0.17 90;--lch-yellow-600:72% 0.17 90;--lch-yellow-700:62% 0.15 90;--color-canvas:light-dark(oklch(var(--lch-cream)),      oklch(var(--lch-gray-900)));--color-surface:light-dark(oklch(var(--lch-white)),       oklch(var(--lch-gray-800)));--color-ink:light-dark(oklch(var(--lch-gray-900)),    oklch(var(--lch-gray-50)));--color-ink-muted:light-dark(oklch(var(--lch-gray-600)),    oklch(var(--lch-gray-400)));--color-border:light-dark(oklch(var(--lch-gray-200)),    oklch(var(--lch-gray-700)));--color-navy:oklch(var(--lch-navy-900));--color-navy-deep:oklch(var(--lch-navy-950));--color-navy-hover:oklch(var(--lch-navy-700));--color-teal:oklch(var(--lch-teal-500));--color-orange:oklch(var(--lch-orange-500));--color-yellow:oklch(var(--lch-yellow-500));--color-link:oklch(var(--lch-teal-600));--color-icon-muted:oklch(83% 0.05 260);--color-surface-dim:oklch(var(--lch-gray-200) / 0.3);--color-white-alpha-10:oklch(100% 0 0 / 0.1);--color-white-alpha-75:oklch(100% 0 0 / 0.75);--color-white-alpha-80:oklch(100% 0 0 / 0.8);--color-shadow:oklch(0% 0 0 / 0.08);--color-shadow-subtle:oklch(0% 0 0 / 0.06);--color-overlay-subtle:oklch(0% 0 0 / 0.05);--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;--font-sans:"General Sans", system-ui, -apple-system, sans-serif;--font-mono:"Source Code Pro", ui-monospace, monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2.5rem;--text-4xl:3.5rem;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--leading-tight:1.1;--leading-snug:1.3;--leading-normal:1.4;--leading-relaxed:1.6;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-full:9999px;--shadow-md:0 4px 12px var(--color-shadow);--z-navbar:10;--page-max-width:1440px;--page-padding:60px;--navbar-height:93px;--focus-ring-color:var(--color-teal);--focus-ring-offset:2px;--focus-ring-width:2px}@layer reset{*,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    hanging-punctuation: first last;
  }

  body {
    min-height: 100dvh;
    line-height: 1.5;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
  }

  button {
    cursor: pointer;
  }

  input,
  select,
  textarea {
    cursor: text;
  }

  input::placeholder,
  textarea::placeholder {
    opacity: 1;
  }

  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  ul,
  ol {
    list-style: none;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    overflow-wrap: break-word;
  }

  p {
    overflow-wrap: break-word;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  fieldset {
    border: none;
  }

  dialog {
    color: inherit;
  }

  
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}@layer base{html {
    background:
      linear-gradient(
        to bottom,
        var(--color-surface) 0,
        var(--color-surface) var(--navbar-height),
        var(--color-canvas) var(--navbar-height),
        var(--color-canvas) 100%
      );
  }

  body {
    font-family: var(--font-sans);
    font-weight: var(--weight-regular);
    font-size: var(--text-xl);
    line-height: var(--leading-normal);
    color: var(--color-ink);
    background-color: var(--color-canvas);
  }

  h1 {
    font-size: var(--text-4xl);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
  }

  h2 {
    font-size: var(--text-3xl);
    font-weight: var(--weight-regular);
    line-height: 1.2;
  }

  h3 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-medium);
    line-height: 1.2;
  }

  h4 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-regular);
    line-height: 1.2;
  }

  h5 {
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: 1.3;
  }

  h6 {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    line-height: 1.3;
  }

  a {
    transition: opacity 0.2s ease;

    @media (any-hover: hover) {
      &:hover:not(:disabled) {
        opacity: 0.7;
      }
    }
  }

  code,
  pre {
    font-family: var(--font-mono);
    font-size: 0.875em;
  }

  pre {
    overflow-x: auto;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  :focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  ::selection {
    background: oklch(var(--lch-teal-500) / 0.2);
  }

  
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--color-navy);
    color: var(--color-surface);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);

    &:focus {
      top: var(--space-4);
    }
  }
}@layer components{.navbar {
    z-index: var(--z-navbar);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px var(--page-padding);
    background: var(--color-surface);
  }

  .navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
  }

  .navbar__logo {
    display: flex;
    align-items: center;

    & svg { height: 32px; width: 107px; }
    & img { height: 45px; width: auto; }
  }

  .navbar__links {
    display: flex;
    align-items: center;
    gap: 25px;
  }

  .navbar__link {
    font-size: var(--text-lg);
    font-weight: var(--weight-regular);
    color: var(--color-ink);
  }

  .navbar__link--dropdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-lg);
    font-weight: var(--weight-regular);
    color: var(--color-ink);
    padding: 0;
  }

  .navbar__chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .navbar__dropdown {
    position: relative;
  }

  .navbar__dropdown:hover .navbar__chevron,
  .navbar__dropdown:focus-within .navbar__chevron {
    transform: rotate(180deg);
  }

  .navbar__dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 12px;
    z-index: 10;
  }

  .navbar__dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
  }

  .navbar__dropdown:hover .navbar__dropdown-menu,
  .navbar__dropdown:focus-within .navbar__dropdown-menu {
    display: flex;
    flex-direction: column;
  }

  .navbar__dropdown-menu::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px oklch(var(--lch-navy-900) / 8%);
    z-index: -1;
  }

  .navbar__dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 10px 20px;
    font-size: var(--text-base);
    color: var(--color-ink);
    transition: background 0.15s ease;

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        background: color-mix(in srgb, var(--color-ink) 4%, var(--color-surface));
      }
    }

    &:first-child {
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    &:last-child {
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
  }

  .navbar__external-icon {
    flex-shrink: 0;
    opacity: 0.5;
  }

  .navbar__mobile-link--dropdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    padding: 12px 0;
    text-align: left;
  }

  .navbar__chevron--open {
    transform: rotate(180deg);
  }

  .navbar__mobile-children {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .navbar__mobile-child {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-lg);
    color: var(--color-ink-muted);
    padding: 10px 0 10px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  }

  .navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .navbar__github {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink);
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    line-height: 1;

    & svg { width: 16px; height: 16px; flex-shrink: 0; }
  }

  .navbar__github-count {
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-2);
    margin-left: var(--space-1);
  }

  .navbar__discord {
    display: inline-flex;
    align-items: center;
    color: var(--color-ink);

    & svg { width: 24px; height: 24px; }
  }

  .navbar__cta {
    --btn-bg: var(--color-navy);
    --btn-color: var(--color-surface);
    --btn-hover-bg: var(--color-navy-hover);

    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);

    @media (any-hover: hover) {
      &:hover:not(:disabled) {
        opacity: 1;
        background: var(--btn-hover-bg);
      }
    }
  }

  .navbar__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 4px;
    cursor: pointer;
    background: none;
    border: none;
  }

  .navbar__burger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-ink);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .navbar__mobile {
    display: none;
  }

  .navbar__mobile-link {
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);

    @media (any-hover: hover) {
      &:hover { opacity: 1; }
    }
  }

  .navbar__mobile-cta {
    --btn-bg: var(--color-navy);
    --btn-color: var(--color-surface);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    margin-top: 16px;
    background: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);

    @media (any-hover: hover) {
      &:hover { opacity: 1; }
    }
  }
}@layer components{.hero {
    padding: 60px var(--page-padding) 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
  }

  .hero__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    gap: 20px;
  }

  .hero__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 50px;
  }

  .hero__description {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-weight: var(--weight-regular);
  }

  .hero__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }

  .hero__cta {
    --btn-bg: var(--color-navy);
    --btn-color: var(--color-surface);
    --btn-border: var(--color-navy);
    --btn-hover-bg: var(--color-navy-hover);
    --btn-hover-color: var(--color-surface);
    --btn-hover-border: var(--color-navy-hover);

    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    font-weight: var(--weight-regular);

    @media (any-hover: hover) {
      &:hover:not(:disabled) {
        opacity: 1;
        background: var(--btn-hover-bg);
        color: var(--btn-hover-color);
        border-color: var(--btn-hover-border);
      }
    }
  }

  .hero__cta--secondary {
    --btn-bg: transparent;
    --btn-color: var(--color-navy);
    --btn-border: var(--color-navy);
    --btn-hover-bg: var(--color-navy);
    --btn-hover-color: var(--color-surface);
    --btn-hover-border: var(--color-navy);
  }

  .hero__deploy-command {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }

  .hero__visual {
    flex: 0 0 auto;
    width: 420px;
    height: 471px;
    background: var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .hero__visual--image {
    background: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 420px;
    overflow: hidden;
    border-radius: 16px;
  }

  .hero__visual--image img {
    width: 100%;
    height: auto;
  }
}@layer components{.logo-ticker {
    height: 120px;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
  }

  .logo-ticker__track {
    display: flex;
    flex-shrink: 0;
    width: max-content;
    animation: ticker-scroll 90s linear infinite;
    will-change: transform;
  }

  .logo-ticker__set {
    display: flex;
    align-items: center;
    gap: 64px;
    flex-shrink: 0;
    padding-right: 64px;
  }

  .logo-ticker__item {
    flex-shrink: 0;
    height: 28px;

    & img {
      height: 100%;
      width: auto;
      object-fit: contain;
      filter: brightness(0);
      opacity: 0.4;
    }
  }

  @keyframes ticker-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
  }
}@layer components{.features {
    padding: 48px var(--page-padding) 0;
  }

  .features__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin: 0 auto;
  }

  .features__list::after {
    content: "";
    display: block;
  }

  .feature-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 80px;
    position: sticky;
    top: 100px;
    will-change: transform;
    box-shadow: 0 -4px 20px var(--color-shadow-subtle);

    &:nth-child(1) { top: 100px; }
    &:nth-child(2) { top: 120px; }
    &:nth-child(3) { top: 140px; }
    &:nth-child(4) { top: 160px; }
  }

  .feature-card__content {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
  }

  .feature-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);

    & p {
      font-size: var(--text-base);
      font-weight: var(--weight-regular);
      line-height: 1.5;
    }

    & a {
      color: var(--color-accent, oklch(var(--lch-blue-500)));
      text-decoration: underline;
      text-underline-offset: 2px;
    }
  }

  .feature-card__highlights {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .feature-card__highlight-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
  }

  .feature-card__highlight-desc {
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0 0 var(--space-1) 0;
  }

  .feature-card__link {
    --btn-bg: transparent;
    --btn-color: var(--color-ink);
    --btn-border-color: var(--color-ink);
    --btn-hover-bg: var(--color-overlay-subtle);

    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    padding: 8px 20px;
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--radius-md);
    align-self: flex-start;
    margin-top: var(--space-4);

    @media (any-hover: hover) {
      &:hover:not(:disabled) {
        opacity: 1;
        background: var(--btn-hover-bg);
      }
    }
  }

  .feature-card__visual {
    flex: 0 0 auto;
    width: 420px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
  }

  .feature-card__visual--navy-100 { background: oklch(var(--lch-navy-100)); }
  .feature-card__visual--teal-300 { background: oklch(var(--lch-teal-300)); }
  .feature-card__visual--orange-300 { background: oklch(var(--lch-orange-300)); }
  .feature-card__visual--yellow-300 { background: oklch(var(--lch-yellow-300)); }

  .feature-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 40px;
  }

}@layer components{.split-card {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-12);
    box-shadow: var(--shadow-md);
  }

  .split-card--reverse {
    flex-direction: row-reverse;
  }

  .split-card__visual {
    flex: 0 0 45%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .split-card__visual--navy { background: oklch(var(--lch-navy-300)); }
  .split-card__visual--teal { background: var(--color-teal); }
  .split-card__visual--orange { background: var(--color-orange); }
  .split-card__visual--yellow { background: var(--color-yellow); }

  .split-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-8);
  }

  .split-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .split-card__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-teal);
    margin: 0;
  }

  .split-card__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0;
    line-height: var(--leading-tight);
  }

  .split-card__text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0;
  }

  

  .split-card-row {
    display: grid;
    gap: var(--space-8);
  }

  .split-card-row--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .split-card-row--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .split-card-row .split-card {
    flex-direction: column;
    padding: var(--space-8);
    gap: var(--space-6);
  }

  .split-card-row .split-card__visual {
    flex: none;
    width: 100%;
  }

  .split-card-row .split-card__content {
    flex: 1;
  }

  
  .split-card--text-only {
    justify-content: center;
  }

  .split-card__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    padding: 8px 20px;
    background: transparent;
    color: var(--color-ink);
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-md);
    align-self: flex-start;
    margin-block-start: var(--space-2);

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        background: var(--color-overlay-subtle);
      }
    }
  }
}@layer components{.community {
    padding: var(--space-32) var(--page-padding) 0;
    text-align: center;
  }

  .community__inner {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .community__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);

    &::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: var(--radius-full);
      background: var(--color-teal);
    }
  }

  .community__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .community__subtitle {
    font-size: var(--text-lg);
  }

  .community__cards {
    --card-grid-gap: var(--space-5);
  }
}@layer components{.icon-card {
    --icon-card-icon-size: 64px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-10);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
    }
  }

  .icon-card__icon {
    width: var(--icon-card-icon-size);
    height: var(--icon-card-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-icon-muted);

    & svg,
    & img {
      width: var(--icon-card-icon-size);
      height: var(--icon-card-icon-size);
      flex-shrink: 0;
      object-fit: contain;
    }
  }

  .icon-card__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-regular);
  }

  .icon-card__desc {
    font-size: var(--text-base);
    color: var(--color-ink);
    line-height: 1.5;
  }
}@layer components{.newsletter {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 64px var(--page-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .newsletter__title {
    text-align: center;
  }

  .newsletter__form {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .newsletter__input-wrap {
    width: 371px;
    height: 48px;
    background: var(--color-surface);
    border-radius: 10px;
    overflow: hidden;
  }

  .newsletter__input {
    --input-padding-x: 16px;

    width: 100%;
    height: 100%;
    padding: 0 var(--input-padding-x);
    border: none;
    font-size: var(--text-lg);
    background: transparent;
    cursor: text;

    &::placeholder {
      color: var(--color-ink-muted);
    }

    &:focus {
      outline: none;
    }
  }

  .newsletter__submit {
    --btn-bg: var(--color-navy);
    --btn-color: var(--color-surface);
    --btn-hover-bg: var(--color-navy-hover);

    padding: 8px 20px;
    height: 48px;
    background: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    white-space: nowrap;
    flex-shrink: 0;

    @media (any-hover: hover) {
      &:hover:not(:disabled) {
        background: var(--btn-hover-bg);
      }
    }
  }
}@layer components{.footer {
    background: var(--color-navy-deep);
    color: var(--color-surface);
    padding: 100px 100px 40px;
  }

  .footer__inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
  }

  .footer__top {
    display: flex;
    justify-content: space-between;
    gap: var(--space-16);
    margin-bottom: var(--space-16);
  }

  .footer__logo {
    flex-shrink: 0;

    & svg { height: 56px; width: 169px; }
    & img { height: 56px; width: auto; }
  }

  .footer__columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-12);
    flex: 1;
  }

  .footer__column-title {
    font-size: 20px;
    font-weight: var(--weight-regular);
    color: var(--color-surface);
    margin-bottom: 22px;
  }

  .footer__column-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .footer__column-link {
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    color: var(--color-surface);

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        color: var(--color-surface);
      }
    }
  }

  .footer__divider {
    height: 1px;
    background: var(--color-white-alpha-10);
    margin-bottom: var(--space-8);
  }

  .footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer__bottom-left {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .footer__copyright {
    font-size: var(--text-base);
    color: var(--color-surface);
  }

  .footer__legal-link {
    font-size: var(--text-base);
    color: var(--color-white-alpha-75);

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        color: var(--color-white-alpha-80);
      }
    }
  }

  .footer__social {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .footer__social-link {
    color: var(--color-surface);
    display: inline-flex;
    align-items: center;

    & svg { width: 20px; height: 20px; }

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        color: var(--color-surface);
      }
    }
  }
}@layer components{.page-header {
    padding: 60px var(--page-padding) 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 420px;
  }

  .page-header__inner {
    width: 100%;
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .page-header__title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    color: var(--color-ink);
    margin: 0;
  }

  .page-header__subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    font-weight: var(--weight-regular);
    color: var(--color-ink);
    margin: 0;
  }

  .page-header__description {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0;
    max-width: 800px;
  }

  .page-header__actions {
    display: flex;
    gap: var(--space-4);
    margin-block-start: var(--space-2);
  }
}@layer components{.faq-section {
    padding: 80px var(--page-padding) 100px;
  }

  .faq-section__list {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .faq-section__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    text-align: center;
    margin-block-end: var(--space-8);
  }

  .faq-item {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .faq-item__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-ink);

    &::after {
      content: "+";
      font-size: var(--text-2xl);
      font-weight: var(--weight-regular);
      color: var(--color-ink-muted);
      flex-shrink: 0;
      margin-left: var(--space-4);
      transition: transform 0.2s ease;
    }

    &[aria-expanded="true"]::after {
      content: "\2212";
    }
  }

  .faq-item__answer {
    padding: 0 32px 24px;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-ink);

    & a {
      color: var(--color-teal);
      text-decoration: underline;
    }
  }
}@layer components{.prose-section {
    padding: 0 var(--page-padding) 100px;
  }

  .prose {
    max-width: 720px;
    margin: 0 auto;
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-ink);

    & h2 {
      font-size: var(--text-3xl);
      margin-top: var(--space-16);
      margin-bottom: var(--space-6);
    }

    & h3 {
      font-size: var(--text-2xl);
      margin-top: var(--space-12);
      margin-bottom: var(--space-4);
    }

    & p { margin-bottom: var(--space-6); }

    & ul,
    & ol {
      margin-bottom: var(--space-6);
      padding-left: var(--space-6);
    }

    & ul { list-style: disc; }
    & ol { list-style: decimal; }

    & li {
      margin-bottom: var(--space-3);
      line-height: 1.7;
    }

    & a:not(.button) {
      color: var(--color-teal);
      text-decoration: underline;
    }

    & strong { font-weight: var(--weight-semibold); }

    & img {
      border-radius: var(--radius-lg);
      margin: var(--space-8) 0;
    }
  }

  .prose--wide {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
  }

  
  .prose--docs {
    max-width: 900px;
  }

  .prose--docs h1 {
    font-size: 3.125rem;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-block-end: var(--space-8);
  }

  .prose--docs h2 {
    font-size: 2.25rem;
    margin-block-start: var(--space-16);
    padding-block-start: var(--space-4);
  }

  .prose--docs h3 {
    font-size: 1.375rem;
  }

  .prose--docs h4 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-block-start: var(--space-8);
    margin-block-end: var(--space-3);
  }

  .prose--docs h5 {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-block-start: var(--space-6);
    margin-block-end: var(--space-2);
  }

  .prose--docs table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin-block: var(--space-6);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .prose--docs thead {
    display: table-header-group;
  }

  .prose--docs tbody {
    display: table-row-group;
  }

  .prose--docs tr {
    display: table-row;
  }

  .prose--docs th {
    font-weight: var(--weight-semibold);
    background: oklch(var(--lch-navy-100));
    color: var(--color-ink);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
    display: table-cell;
  }

  .prose--docs td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    display: table-cell;
  }

  .prose--docs tr:nth-child(even) td {
    background: oklch(var(--lch-gray-50));
  }

  .prose--docs blockquote {
    background: oklch(var(--lch-gray-100));
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    margin-block: var(--space-6);
    margin-inline: 0;
    border: none;
  }

  .prose--docs blockquote p:last-child {
    margin-block-end: 0;
  }

  .prose--docs img {
    max-width: 100%;
    border-radius: var(--radius-lg);
    margin-block: var(--space-8);
    display: block;
  }

  .prose--docs hr {
    border: none;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-12);
  }
}@layer components{.post-header {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin-inline: auto;
    padding: 48px var(--page-padding) var(--space-8);
  }

  .post-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink-muted);
    text-decoration: none;
    margin-block-end: var(--space-8);
    transition: color 0.15s;
  }

  .post-header__back:hover {
    color: var(--color-ink);
  }

  .post-header__back svg {
    width: 16px;
    height: 16px;
  }

  .post-header__category {
    display: inline-block;
    padding: 2px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-ink);
    color: var(--color-surface);
    border-radius: var(--radius-sm);
    margin-block-end: var(--space-4);
  }

  .post-header__title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--color-ink);
    margin: 0 0 var(--space-6);
    max-width: 800px;
  }

  .post-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .post-header__author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .post-header__author-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    object-fit: cover;
  }

  .post-header__author-name {
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }

  .post-header__author-name a {
    color: inherit;
    text-decoration: none;
  }

  .post-header__author-name a:hover {
    color: var(--color-teal);
  }

  .post-header__separator {
    color: oklch(var(--lch-gray-300));
  }

  
  .post-hero {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin-inline: auto;
    padding-inline: var(--page-padding);
    padding-block-end: var(--space-12);
  }

  .post-hero__image {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }

  
  .post-single {
    max-width: 72ch;
    margin-inline: auto;
    padding-inline: var(--page-padding);
  }

  
  .post-taxonomies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-8);
    border-block-start: 1px solid var(--color-border);
  }

  .post-taxonomies__tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    background: oklch(var(--lch-gray-100));
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }

  .post-taxonomies__tag:hover {
    background: var(--color-ink);
    color: var(--color-surface);
  }
}@layer components{.page-posts-list main {
    padding-block-start: 88px;
  }

  
  .blog-hero {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin-inline: auto;
    padding-inline: var(--page-padding);
    padding-block-end: var(--space-16);
  }

  .blog-hero__link {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    padding: var(--space-12) var(--space-16);
    background: oklch(var(--lch-navy-200));
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s;
  }

  .blog-hero__link:hover {
    box-shadow: 0 8px 30px var(--color-shadow);
  }

  .blog-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .blog-hero__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
  }

  .blog-hero__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    color: var(--color-ink);
    margin: 0;
  }

  .blog-hero__date {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .blog-hero__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-md);
  }

  
  .blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin-inline: auto;
    padding-inline: var(--page-padding);
    padding-block-end: var(--space-10);
  }

  .blog-filters__pill {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: transparent;
    color: var(--color-ink-muted);
    border: 1px solid oklch(var(--lch-gray-200));
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }

  .blog-filters__pill:hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }

  .blog-filters__pill--active {
    background: var(--color-ink);
    color: var(--color-surface);
    border-color: var(--color-ink);
  }

  
  .blog-grid {
    --card-grid-gap: var(--space-5);
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin-inline: auto;
    padding-inline: var(--page-padding);
    padding-block-end: var(--space-16);
  }

  
  .blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s, transform 0.25s;
  }

  .blog-card:hover {
    box-shadow: 0 8px 30px var(--color-shadow);
    transform: translateY(-2px);
  }

  .blog-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }

  .blog-card__image--placeholder {
    background: oklch(var(--lch-gray-100));
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
  }

  .blog-card__image--placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--color-icon-muted);
  }

  .blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    flex: 1;
  }

  .blog-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .blog-card__badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-ink);
    color: var(--color-surface);
    border-radius: var(--radius-sm);
    margin-inline-start: auto;
  }

  .blog-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-ink);
    margin: 0;
  }
}@layer components{.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    padding: 2rem 0;
    margin: 0;
  }

  .pagination-item {
    display: flex;
  }

  .pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: 0.75rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-muted);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
  }

  .pagination-link:hover {
    background: oklch(var(--lch-gray-100));
    color: var(--color-ink);
  }

  .pagination-item-current .pagination-link {
    background: var(--color-navy);
    color: var(--color-surface);
    font-weight: 700;
  }

  .pagination-link svg {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
  }

  .pagination-link-previous,
  .pagination-link-next {
    font-weight: 600;
    color: var(--color-navy);
  }

  .pagination-link-first,
  .pagination-link-last {
    color: oklch(var(--lch-gray-400));
  }

  .pagination-link-first:hover,
  .pagination-link-last:hover {
    color: var(--color-navy);
  }
}@layer components{.docs-layout {
    display: grid;
    grid-template-columns: 1fr;
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding-inline: var(--page-padding);
    padding-block: 3rem 2rem;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .docs-layout {
      grid-template-columns: 280px 1fr;
      gap: 3rem;
    }
  }

  
  .docs-sidebar {
    overflow-y: auto;
    padding-block-end: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  @media (min-width: 768px) {
    .docs-sidebar {
      position: sticky;
      top: calc(var(--navbar-height) + var(--space-4));
      align-self: start;
      max-height: calc(100vh - var(--navbar-height) - var(--space-8));
    }
  }

  
  .docs-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .docs-nav__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-ink-muted);
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
    flex: 1;
  }

  .docs-nav__link:hover {
    background: oklch(var(--lch-gray-100));
    color: var(--color-ink);
  }

  .docs-nav__link--active {
    background: oklch(var(--lch-navy-100));
    color: var(--color-navy);
    font-weight: var(--weight-semibold);
  }

  .docs-nav__link--active:hover {
    background: oklch(var(--lch-navy-200));
  }

  .docs-nav__link--section {
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    padding: var(--space-3) var(--space-3);
  }

  .docs-nav__link--subsection {
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }

  .docs-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: oklch(var(--lch-gray-400));
    transition: background 0.15s;
    flex-shrink: 0;
  }

  .docs-nav__toggle:hover {
    background: oklch(var(--lch-gray-100));
  }

  .docs-nav__toggle svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
  }

  .docs-nav__chevron--open {
    transform: rotate(90deg);
  }

  .docs-nav__children {
    padding-inline-start: var(--space-4);
    border-inline-start: 1px solid var(--color-border);
    margin-inline-start: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  
  .docs-cards {
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding-inline: var(--page-padding);
    padding-block: var(--space-8);
  }

  
  .docs-sheet-trigger {
    display: none;
  }

  
  .docs-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: oklch(0% 0 0 / 0.4);
    z-index: 40;
  }

  
  .docs-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 24px oklch(0% 0 0 / 0.12);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 50;
    padding-block-end: var(--space-8);
  }

  
  .docs-sheet--closed {
    transform: translateY(100%);
  }

  .docs-sheet--open {
    transform: translateY(0);
  }

  .docs-sheet--entering,
  .docs-sheet--leaving {
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  
  .docs-sheet__handle {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0;
    cursor: grab;
  }

  .docs-sheet__pill {
    display: block;
    width: 36px;
    height: 4px;
    background: oklch(var(--lch-gray-300));
    border-radius: var(--radius-full);
  }

  
  .docs-sheet__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-ink-muted);
    transition: background 0.15s ease;
  }

  .docs-sheet__close:hover {
    background: oklch(var(--lch-gray-100));
  }

  
  .docs-sheet__nav {
    padding: 0 var(--space-6);
  }
}@layer components{.splash {
    padding-block: 3rem;
  }

  @media (min-width: 768px) {
    .splash {
      padding-block: 4rem;
    }

    .page-exoscale .splash {
      padding-block: 100px;
    }
  }

  .splash--grey {
    background: oklch(var(--lch-gray-100));
  }

  .page-exoscale .splash--white {
    background: transparent;
  }

  .splash--white {
    background: var(--color-surface);
  }

  .splash--card .splash__inner {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    padding: 80px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 -4px 20px var(--color-shadow-subtle);
  }

  .splash__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding-inline: var(--page-padding);
    align-items: center;
  }

  @media (min-width: 768px) {
    .splash__inner {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }

    .splash__inner--reverse {
      direction: rtl;
    }

    .splash__inner--reverse > * {
      direction: ltr;
    }
  }

  .splash__inner > :only-child {
    grid-column: 1 / -1;
  }

  .splash__image {
    width: 100%;
    border-radius: 8px;
  }

  .splash__content h2 {
    margin-block-end: 1rem;
  }

  
  .cta-card {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8);
    background: oklch(var(--lch-navy-100));
    border-radius: var(--radius-lg);
    margin-block: var(--space-8);
    max-width: var(--page-max-width);
    margin-inline: auto;
  }

  .cta-card__image {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
  }

  .prose .cta-card__image,
  .prose--docs .cta-card__image {
    width: 64px;
    margin: 0;
    border-radius: 0;
    display: inline;
  }

  .cta-card__content h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    color: var(--color-ink);
  }

  .cta-card__content p {
    margin: 0 0 var(--space-4);
    color: var(--color-ink-muted);
  }

  

  .contact-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 80px;
    box-shadow: 0 -4px 20px var(--color-shadow-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .contact-card__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-teal);
    margin: 0;
  }

  .contact-card__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0;
    line-height: var(--leading-tight);
  }

  .contact-card__text {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0;
    max-width: 640px;
  }

  .contact-card__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    margin-block-start: var(--space-4);
  }

  .contact-card__column h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0 0 var(--space-4);
  }

  .contact-card__column ul {
    list-style: disc;
    padding-inline-start: var(--space-5);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .contact-card__column li {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
  }

  .contact-card__action {
    margin-block-start: var(--space-4);
  }

  
  .facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding-block: 2rem;
  }

  .facts-grid__item {
    padding: 1.5rem;
    background: oklch(var(--lch-gray-100));
    border-radius: 12px;
  }

  .facts-grid__icon {
    margin-block-end: 1rem;
    color: var(--color-navy);
  }

  .facts-grid__icon svg {
    width: 2rem;
    height: 2rem;
  }

  .facts-grid__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-block-end: 0.5rem;
  }

  .facts-grid__content {
    color: var(--color-ink-muted);
    line-height: 1.6;
  }

  
  .note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    margin-block: var(--space-6);
    border-inline-start: 4px solid;
  }

  .note--info {
    background: oklch(0.95 0.02 230);
    border-color: oklch(0.55 0.15 230);
  }

  .note--tip {
    background: oklch(0.95 0.02 145);
    border-color: oklch(0.55 0.15 145);
  }

  .note--warning {
    background: oklch(0.95 0.05 80);
    border-color: oklch(0.6 0.15 80);
  }

  .note--important {
    background: oklch(0.95 0.03 25);
    border-color: oklch(0.55 0.15 25);
  }

  .note__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.125rem;
  }

  .note__icon img {
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .note__content p:last-child {
    margin-block-end: 0;
  }

  
  .diagonal-separator {
    display: block;
    width: 100%;
    height: auto;
  }

  
  .footnote-number {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    vertical-align: super;
    color: var(--color-navy);
    cursor: default;
  }

  .footnote_item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    border-block-end: 1px solid var(--color-border);
  }

  .footnote_item:last-child {
    border-block-end: none;
  }

  .footnote_item-number {
    flex-shrink: 0;
  }

  .footnote_item-inner p:last-child {
    margin-block-end: 0;
  }

  
  .embed-responsive {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
}@layer components{.form-control {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: var(--text-base);
    font-family: inherit;
    line-height: 1.5;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
  }

  .form-control:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px oklch(var(--lch-navy-300) / 0.3);
  }

  .form-control::placeholder {
    color: oklch(var(--lch-gray-400));
  }

  textarea.form-control {
    min-height: 6rem;
    resize: vertical;
  }

  select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-inline-end: 2.5rem;
  }

  .form-group {
    margin-block-end: 1rem;
  }

  .form-group label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    margin-block-end: 0.375rem;
    color: var(--color-ink);
  }

  .invalid-feedback {
    display: none;
    font-size: var(--text-sm);
    color: oklch(0.55 0.15 25);
    margin-block-start: 0.25rem;
  }

  .form-control:invalid:not(:placeholder-shown) ~ .invalid-feedback {
    display: block;
  }

  
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: var(--text-base);
    font-weight: 600;
    font-family: inherit;
    line-height: 1.5;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }

  .button-primary {
    background: var(--color-navy);
    color: var(--color-surface);
    border-color: var(--color-navy);
  }

  .button-primary:hover {
    background: var(--color-navy-hover);
    border-color: var(--color-navy-hover);
  }

  .button-secondary {
    background: transparent;
    color: var(--color-navy);
    border-color: var(--color-navy);
  }

  .button-secondary:hover {
    background: var(--color-navy);
    color: var(--color-surface);
  }

  
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  
  .form-honeypot {
    position: absolute;
    left: -9999px;
  }

  
  .form-warning {
    color: oklch(0.55 0.15 25);
  }

  
  .form-loader {
    width: 36px;
    aspect-ratio: 1;
    display: grid;
    -webkit-mask: conic-gradient(from 15deg, #0000, #000);
    animation: form-loader-spin 1s infinite steps(12);
  }

  .form-loader,
  .form-loader::before,
  .form-loader::after {
    background:
      radial-gradient(closest-side at 50% 12.5%, #f03355 96%, #0000) 50% 0 / 20% 80% repeat-y,
      radial-gradient(closest-side at 12.5% 50%, #f03355 96%, #0000) 0 50% / 80% 20% repeat-x;
  }

  .form-loader::before,
  .form-loader::after {
    content: "";
    grid-area: 1 / 1;
    transform: rotate(30deg);
  }

  .form-loader::after {
    transform: rotate(60deg);
  }

  @keyframes form-loader-spin {
    100% { transform: rotate(1turn); }
  }
}@layer components{.form-layout {
    display: grid;
    grid-template-columns: 4fr 5fr;
    gap: var(--space-24);
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding: var(--space-8) var(--page-padding) var(--space-16);
  }

  .form-layout__form p {
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin-block-end: var(--space-4);
  }

  .form-layout__details {
    padding-block-start: 0;
  }
}@layer components{.search-backdrop {
    position: fixed;
    inset: 0;
    background: oklch(0% 0 0 / 0.4);
    z-index: 60;
  }

  

  .search-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: oklch(var(--lch-gray-100));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;

    &:hover {
      background: oklch(var(--lch-gray-200));
    }
  }

  .search-trigger__icon {
    flex-shrink: 0;
    color: var(--color-ink-muted);
  }

  .search-trigger__text {
    flex: 1;
    text-align: left;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .search-trigger__kbd {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-1);
    font-family: inherit;
    line-height: 1.4;
  }

  

  .search-modal {
    position: fixed;
    top: var(--space-16);
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 2 * var(--page-padding)));
    max-height: min(480px, 70vh);
    margin: 0;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px oklch(0% 0 0 / 0.16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 70;
  }

  

  .search-modal__header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .search-modal__input {
    width: 100%;
    border: none;
    font-size: var(--text-lg);
    background: transparent;
    color: var(--color-ink);
    outline: none;
    font-family: inherit;

    &::placeholder {
      color: var(--color-ink-muted);
    }
  }

  

  .search-filters {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    white-space: nowrap;
  }

  .search-filters__pill {
    display: inline-flex;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--color-ink-muted);
    font-family: inherit;

    &:hover {
      background: oklch(var(--lch-gray-100));
    }
  }

  .search-filters__pill--active {
    background: oklch(var(--lch-navy-100));
    color: var(--color-navy);

    &:hover {
      background: oklch(var(--lch-navy-100));
    }
  }

  

  .search-results {
    overflow-y: auto;
    flex: 1;
    padding: var(--space-2);
  }

  .search-results__section {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-muted);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
  }

  

  .search-result {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
  }

  .search-result--active {
    background: oklch(var(--lch-gray-100));
  }

  .search-result__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }

  .search-result__excerpt {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    line-height: var(--leading-relaxed);
    margin-top: var(--space-1);

    & mark {
      background: oklch(var(--lch-yellow-300));
      color: var(--color-ink);
      padding-inline: 2px;
      border-radius: 2px;
    }
  }

  .search-result__breadcrumb {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    margin-top: var(--space-1);
  }

  

  .search-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  

  .search-loading {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  

  .search-fab {
    display: none;
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 30;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-navy);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.2);
    align-items: center;
    justify-content: center;
  }

}@layer components{.showcase {
    max-width: var(--page-max-width);
    margin-inline: auto;
    padding: 0 var(--page-padding) var(--space-24);
  }

  .showcase__section {
    padding-block: var(--space-12);
    border-block-end: 1px solid var(--color-border);
  }

  .showcase__section:last-child {
    border-block-end: none;
  }

  .showcase__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-medium);
    margin-block-end: var(--space-8);
  }

  .showcase__subtitle {
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--color-ink-muted);
    margin-block-start: var(--space-8);
    margin-block-end: var(--space-4);
  }

  .showcase__subtitle:first-of-type {
    margin-block-start: 0;
  }

  

  .showcase__grid {
    display: grid;
    gap: var(--space-4);
  }

  .showcase__grid--swatches {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .showcase__grid--radius {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .showcase__grid--cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .showcase__grid--lists {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .showcase__grid--line-heights {
    grid-template-columns: 1fr 1fr;
  }

  

  .showcase__swatch {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-end;
    padding: var(--space-2);
    min-height: 80px;
  }

  .showcase__swatch-label {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    background: oklch(100% 0 0 / 0.85);
    color: oklch(var(--lch-gray-900));
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    line-height: 1.4;
  }

  .showcase__swatch-label--light {
    background: oklch(0% 0 0 / 0.6);
    color: oklch(var(--lch-white));
  }

  

  .showcase__specimen {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
  }

  .showcase__specimen p {
    margin-block-end: var(--space-3);
  }

  .showcase__specimen p:last-child {
    margin-block-end: 0;
  }

  .showcase__line-height-demo {
    font-size: var(--text-base);
    max-width: 400px;
  }

  

  .showcase__spacing-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .showcase__spacing-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .showcase__spacing-label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    min-width: 120px;
    flex-shrink: 0;
  }

  .showcase__spacing-bar {
    height: 24px;
    background: var(--color-teal);
    border-radius: var(--radius-sm);
    min-width: 4px;
  }

  

  .showcase__radius-box {
    background: var(--color-surface);
    border: 2px solid var(--color-navy);
    padding: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
  }

  

  .showcase__shadow-box {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
  }

  

  .showcase__button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
  }

  

  .showcase__form-demo {
    max-width: 480px;
  }

  

  .showcase__notes-demo {
    max-width: 700px;
  }

  .showcase__notes-demo .note:first-child {
    margin-block-start: 0;
  }

  

  .showcase__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
  }

  .showcase__card h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    margin-block-end: var(--space-3);
  }

  .showcase__card p {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin: 0;
  }

  .showcase__card--flat {
    box-shadow: none;
  }

  .showcase__card--navy {
    background: var(--color-navy);
    border-color: var(--color-navy);
  }

  .showcase__card--navy h3 {
    color: oklch(var(--lch-white));
  }

  .showcase__card--navy p {
    color: var(--color-white-alpha-75);
  }

  

  .showcase__component-demo {
    max-width: 700px;
  }

  

  .showcase__grid--lottie {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .showcase__lottie-card {
    background: oklch(var(--lch-navy-900));
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .showcase__lottie-player {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .showcase__lottie-player svg {
    width: 100% !important;
    height: 100% !important;
  }

  .showcase__lottie-label {
    padding: var(--space-3) var(--space-4);
    color: oklch(var(--lch-white));
    font-size: var(--text-sm);
    text-align: center;
    width: 100%;
    background: oklch(var(--lch-navy-950));
  }

}@layer components{.pricing-section {
    padding: var(--space-16) var(--page-padding) var(--space-20);
  }

  .pricing-section__inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
  }

  .pricing-section__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    text-align: center;
    margin: 0 0 var(--space-4);
  }

  .pricing-section__subtitle {
    font-size: var(--text-lg);
    color: var(--color-ink-muted);
    text-align: center;
    margin: 0 0 var(--space-12);
  }

  

  .pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-block-end: var(--space-12);
  }

  .pricing-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    font-family: inherit;
    color: var(--color-ink-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    transition: color 0.2s;
  }

  .pricing-toggle__label--active {
    color: var(--color-ink);
  }

  .pricing-toggle__switch {
    position: relative;
    width: 48px;
    height: 26px;
    background: var(--color-navy);
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    padding: 3px;
    flex-shrink: 0;
  }

  .pricing-toggle__knob {
    display: block;
    width: 20px;
    height: 20px;
    background: oklch(var(--lch-white));
    border-radius: var(--radius-full);
    transition: transform 0.2s ease;
  }

  .pricing-toggle__knob--right {
    transform: translateX(22px);
  }

  .pricing-toggle__badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: oklch(var(--lch-white));
    background: var(--color-teal);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  

  .pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .pricing-cards--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 950px;
    margin-inline: auto;
  }

  .pricing-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-8);
    text-align: center;
  }

  .pricing-card--featured {
    border-color: var(--color-navy);
    border-width: 2px;
    box-shadow: 0 8px 32px var(--color-shadow);
  }

  .pricing-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: oklch(var(--lch-white));
    background: var(--color-navy);
    padding: 4px 16px;
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  .pricing-card__header {
    margin-block-end: var(--space-6);
  }

  .pricing-card__tier {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0 0 var(--space-1);
  }

  .pricing-card__sub {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin: 0;
  }

  .pricing-card__price {
    margin-block-end: var(--space-6);
  }

  .pricing-card__amount {
    font-size: var(--text-4xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    line-height: 1;
  }

  .pricing-card__period {
    font-size: var(--text-base);
    color: var(--color-ink-muted);
    margin-inline-start: var(--space-1);
  }

  .pricing-card__cta {
    display: block;
    width: 100%;
    margin-block-end: var(--space-3);
  }

  .pricing-card__billing-note {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-6);
    min-height: 1.5em;
  }

  .pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--space-6);

    & li {
      padding: var(--space-2) 0;
      font-size: var(--text-sm);
      color: var(--color-ink);
      padding-inline-start: var(--space-6);
      position: relative;
    }

    & li::before {
      content: "\2713";
      position: absolute;
      left: 0;
      color: var(--color-teal);
      font-weight: var(--weight-semibold);
    }
  }

  

  .pricing-comparison {
    padding: 0 var(--page-padding) var(--space-20);
    background: var(--color-canvas);
  }

  .pricing-comparison__inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
  }

  .pricing-comparison__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    text-align: center;
    margin: 0 0 var(--space-12);
    color: var(--color-ink);
  }

  .pricing-comparison__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pricing-comparison__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
  }

  .pricing-comparison__table thead th {
    text-align: center;
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    padding: var(--space-4) var(--space-6);
    border-block-end: 2px solid var(--color-border);
    color: var(--color-ink);
  }

  .pricing-comparison__table thead th:first-child {
    text-align: left;
  }

  .pricing-comparison__table tbody td {
    padding: var(--space-3) var(--space-6);
    border-block-end: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-ink);
  }

  .pricing-comparison__table tbody td:first-child {
    text-align: left;
    color: var(--color-ink-muted);
  }

  .pricing-comparison__group-row td {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink);
    background: color-mix(in srgb, var(--color-navy) 4%, var(--color-canvas));
    padding: var(--space-3) var(--space-6);
  }

  .pricing-comparison__check {
    color: var(--color-teal);
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
  }

  

  .pricing-comparison__tip {
    position: relative;
    cursor: help;
    border-block-end: 1px dashed var(--color-ink-muted);
  }

  .pricing-comparison__tip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--color-navy);
    color: oklch(var(--lch-white));
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    line-height: var(--leading-snug);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    width: max-content;
    max-width: 280px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .pricing-comparison__tip:hover::after {
    opacity: 1;
  }

  

  .pricing-cta {
    background: var(--color-navy);
    padding: var(--space-20) var(--page-padding);
  }

  .pricing-cta__inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
    text-align: center;
  }

  .pricing-cta__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: oklch(var(--lch-white));
    margin: 0 0 var(--space-4);
  }

  .pricing-cta__subtitle {
    font-size: var(--text-xl);
    color: var(--color-white-alpha-75);
    margin: 0 0 var(--space-10);
  }

  .pricing-cta__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
  }

  .pricing-cta__button--light {
    background: oklch(var(--lch-white));
    color: var(--color-navy);
    border-color: oklch(var(--lch-white));
  }

  .pricing-cta__button--light:hover {
    background: oklch(var(--lch-gray-100));
    border-color: oklch(var(--lch-gray-100));
  }

  .pricing-cta__button--outline {
    background: transparent;
    color: oklch(var(--lch-white));
    border-color: var(--color-white-alpha-75);
  }

  .pricing-cta__button--outline:hover {
    background: oklch(var(--lch-white) / 0.1);
    border-color: oklch(var(--lch-white));
  }
}@layer components{.compare-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .compare-cards .pricing-card {
    text-align: left;
  }

  

  .compare-comparison {
    padding-block-start: var(--space-20);
  }

  

  .compare-vs {
    padding: var(--space-16) var(--page-padding) var(--space-20);
    background: color-mix(in srgb, var(--color-navy) 4%, var(--color-canvas));
  }

  .compare-vs__inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
    text-align: center;
  }

  .compare-vs__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-10);
  }

  .compare-vs__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color 0.2s;
  }

  .compare-vs__link:hover {
    border-color: var(--color-navy);
  }

  .compare-vs__link-vs {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}@layer components{.career-section {
    padding: var(--space-16) var(--page-padding) var(--space-20);
  }

  .career-section--surface {
    background: var(--color-surface);
  }

  .career-section__inner {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin: 0 auto;
  }

  .career-section__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0 0 var(--space-6);
  }

  .career-section__text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0;
    max-width: 720px;
  }

  

  .career-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    margin-block-start: var(--space-10);
  }

  .career-value {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .career-value__icon {
    color: var(--color-teal);
    line-height: 1;
  }

  .career-value__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0;
  }

  .career-value__text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0;
  }

  

  .career-principles {
    list-style: none;
    padding: 0;
    margin: var(--space-8) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .career-principles li {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink);
    padding-inline-start: var(--space-8);
    position: relative;

    &::before {
      content: "\2192";
      position: absolute;
      left: 0;
      color: var(--color-teal);
      font-weight: var(--weight-semibold);
    }

    & a {
      color: var(--color-ink);
      text-decoration: underline;
      text-decoration-color: var(--color-border);
      text-underline-offset: 3px;
    }
  }

  

  .career-category {
    margin-block-end: var(--space-10);

    &:last-child {
      margin-block-end: 0;
    }
  }

  .career-category__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }

  .career-job {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-ink);
    transition: background 0.15s;

    &:hover {
      opacity: 1;
      background: var(--color-surface);
    }

    &:hover .career-job__arrow {
      transform: translateX(4px);
    }
  }

  .career-job__title {
    flex: 1;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
  }

  .career-job__badges {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
  }

  .career-job__arrow {
    flex-shrink: 0;
    color: var(--color-ink-muted);
    transition: transform 0.15s;
  }

  .career-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  .career-badge--level {
    background: color-mix(in srgb, var(--color-teal) 12%, var(--color-canvas));
    color: oklch(var(--lch-teal-700));
  }

  .career-badge--location {
    background: color-mix(in srgb, var(--color-navy) 8%, var(--color-canvas));
    color: var(--color-navy);
  }

  .career-badge--remote {
    background: color-mix(in srgb, var(--color-orange) 10%, var(--color-canvas));
    color: oklch(var(--lch-orange-700));
  }

  .career-job--empty {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    font-style: italic;
    padding: var(--space-4) var(--space-5);
    margin: 0;
  }

  

  .career-cta {
    background: var(--color-navy);
    padding: var(--space-20) var(--page-padding);
  }

  .career-cta__inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
    text-align: center;
  }

  .career-cta__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: oklch(var(--lch-white));
    margin: 0 0 var(--space-4);
  }

  .career-cta__subtitle {
    font-size: var(--text-xl);
    color: var(--color-white-alpha-75);
    margin: 0 0 var(--space-10);
  }

  .career-cta__button--outline {
    background: transparent;
    color: oklch(var(--lch-white));
    border-color: var(--color-white-alpha-75);
  }

  .career-cta__button--outline:hover {
    background: oklch(var(--lch-white) / 0.1);
    border-color: oklch(var(--lch-white));
  }
}@layer components{.partner-section {
    padding: var(--space-20) var(--page-padding);
  }

  .partner-section__inner {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin: 0 auto;
  }

  .partner-section__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0 0 var(--space-6);
  }

  .partner-section__text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0;
    max-width: 720px;
  }

  .partner-section--centered {
    text-align: center;
  }

  .partner-section--centered .partner-section__text {
    margin-inline: auto;
  }

  

  .partner-intro {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-8);
    max-width: 800px;
  }

  .partner-cta-row {
    display: flex;
    gap: var(--space-4);
  }

  

  .partner-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-block-start: var(--space-12);
  }

  .partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    text-decoration: none;
    background: var(--color-navy);
    transition: transform 0.2s, box-shadow 0.2s;

    &:hover {
      opacity: 1;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px var(--color-shadow);
    }
  }

  .partner-logo__img {
    max-height: 48px;
    max-width: 75%;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.2s;
  }

  .partner-logo:hover .partner-logo__img {
    opacity: 1;
  }

  .partner-logo--native .partner-logo__img {
    filter: none;
    opacity: 1;
    border-radius: var(--radius-md);
  }

  .partner-section--centered .split-card-row {
    text-align: left;
    margin-block-start: var(--space-12);
  }

  

  .partner-track__best-for {
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }

  

  .partner-listing {
    padding: var(--space-12) var(--page-padding) var(--space-20);
  }

  .partner-listing__inner {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin: 0 auto;
  }

  

  .partner-grid {
    margin-block-start: var(--space-8);
  }

  

  .partner-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-decoration: none;
    color: var(--color-ink);
    transition: transform 0.2s, box-shadow 0.2s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px var(--color-shadow);
    }
  }

  .partner-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: var(--color-navy);
    margin-block-end: var(--space-4);
  }

  .partner-card__img {
    max-height: 48px;
    max-width: 75%;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
  }

  .partner-card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0 0 var(--space-2);
  }

  .partner-card__description {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0;
  }
}@layer components{[x-cloak] {
    display: none !important;
  }

  

  .page-secrets .page-header {
    min-height: auto;
    padding-block-end: var(--space-10);
  }

  

  .secrets-section {
    padding: var(--space-16) var(--page-padding);
  }

  .secrets-section__inner {
    max-width: 720px;
    margin: 0 auto;
  }

  .secrets-section--wide {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin: 0 auto;
  }

  .secrets-section--centered {
    text-align: center;
  }

  

  .secrets-section__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0 0 var(--space-4);
  }

  .secrets-section__text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0 auto;
    max-width: 640px;
  }

  

  .secrets-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-12);
    box-shadow: var(--shadow-md);
  }

  .secrets-card__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0 0 var(--space-8);
  }

  

  .secrets-field {
    margin-block-end: var(--space-6);
  }

  .secrets-field__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink-muted);
    margin-block-end: var(--space-2);
  }

  .secrets-field__hint {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-3);
  }

  .secrets-textarea {
    display: block;
    width: 100%;
    min-height: 140px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    font-family: inherit;
    line-height: var(--leading-relaxed);
    color: var(--color-ink);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;

    &:focus {
      outline: none;
      border-color: var(--color-teal);
      box-shadow: 0 0 0 3px oklch(var(--lch-teal-300) / 0.3);
    }

    &::placeholder {
      color: oklch(var(--lch-gray-400));
    }
  }

  

  .secrets-radios {
    display: flex;
    gap: var(--space-6);
  }

  .secrets-radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-ink);
  }

  .secrets-radio input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: border-color 0.15s;
    position: relative;
    flex-shrink: 0;

    &:checked {
      border-color: var(--color-teal);
    }

    &:checked::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 10px;
      height: 10px;
      border-radius: var(--radius-full);
      background: var(--color-teal);
    }
  }

  

  .secrets-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-ink);
    margin-block-end: var(--space-8);
  }

  .secrets-checkbox input[type="checkbox"] {
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
    flex-shrink: 0;

    &:checked {
      background: var(--color-teal);
      border-color: var(--color-teal);
    }

    &:checked::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 3px;
      width: 12px;
      height: 7px;
      border-left: 2.5px solid white;
      border-bottom: 2.5px solid white;
      transform: rotate(-45deg);
    }
  }

  

  .secrets-submit {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    font-family: inherit;
    color: oklch(var(--lch-white));
    background: var(--color-teal);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;

    &:hover:not(:disabled) {
      background: oklch(var(--lch-teal-600));
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    & svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }

  

  .secrets-result {
    display: flex;
    gap: var(--space-3);
    margin-block: var(--space-6);
  }

  .secrets-result__url {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--color-ink);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  

  .secrets-message {
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-ink);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0 0 var(--space-6);
    overflow-x: auto;
  }

  

  .secrets-status {
    font-size: var(--text-sm);
    color: var(--color-teal);
    margin: 0;
  }

  .secrets-error {
    font-size: var(--text-sm);
    color: oklch(0.55 0.15 25);
    margin: var(--space-4) 0 0;
  }

  .secrets-back {
    display: inline-block;
    margin-block-start: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-teal);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
    padding: 0;

    &:hover {
      color: oklch(var(--lch-teal-600));
    }
  }

  

  .secrets-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-block-start: var(--space-12);
  }

  .secrets-feature {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-md);
  }

  .secrets-feature__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
  }

  .secrets-feature__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .secrets-feature__icon--teal {
    background: oklch(var(--lch-teal-300) / 0.2);
    color: oklch(var(--lch-teal-600));
  }

  .secrets-feature__icon--orange {
    background: oklch(var(--lch-orange-300) / 0.2);
    color: oklch(var(--lch-orange-600));
  }

  .secrets-feature__icon--navy {
    background: oklch(var(--lch-navy-300) / 0.2);
    color: oklch(var(--lch-navy-400));
  }

  .secrets-feature__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0 0 var(--space-2);
  }

  .secrets-feature__text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0;
  }
}@layer components{.gcr-problem {
    padding: var(--space-16) var(--page-padding) var(--space-20);
  }

  .gcr-problem__inner {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin: 0 auto;
    text-align: center;
  }

  .gcr-problem__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0 0 var(--space-3);
  }

  .gcr-problem__subtitle {
    font-size: var(--text-lg);
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-12);
    max-width: 640px;
    margin-inline: auto;
  }

  .gcr-problem__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    text-align: left;
  }

  .gcr-problem__item {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
  }

  .gcr-problem__item-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin: 0 0 var(--space-2);
  }

  .gcr-problem__item-text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-muted);
    margin: 0;
  }

  

  .gcr-positioning {
    padding: 0 var(--page-padding) var(--space-16);
  }

  .gcr-positioning__inner {
    max-width: calc(var(--page-max-width) - 2 * var(--page-padding));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
}@layer utilities{.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hidden { display: none; }

  

  .text-xs { font-size: var(--text-xs); }
  .text-sm { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg { font-size: var(--text-lg); }
  .text-xl { font-size: var(--text-xl); }
  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-muted { color: var(--color-ink-muted); }

  

  .link {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-color: oklch(var(--lch-teal-600) / 0.4);
    text-underline-offset: 2px;

    &:hover {
      text-decoration-color: var(--color-link);
      opacity: 1;
    }
  }

  

  .block { display: block; }
  .inline-flex { display: inline-flex; }
  .flex { display: flex; }
  .grid { display: grid; }

  

  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }

  

  .gap-1 { gap: var(--space-1); }
  .gap-2 { gap: var(--space-2); }
  .gap-3 { gap: var(--space-3); }
  .gap-4 { gap: var(--space-4); }
  .gap-6 { gap: var(--space-6); }
  .gap-8 { gap: var(--space-8); }

  

  .p-0 { padding: 0; }
  .p-4 { padding: var(--space-4); }
  .p-6 { padding: var(--space-6); }
  .p-8 { padding: var(--space-8); }

  .m-0 { margin: 0; }
  .mx-auto { margin-inline: auto; }
  .mt-4 { margin-top: var(--space-4); }
  .mt-8 { margin-top: var(--space-8); }
  .mb-4 { margin-bottom: var(--space-4); }
  .mb-8 { margin-bottom: var(--space-8); }

  

  .w-full { width: 100%; }

  

  @media (any-hover: none) and (pointer: coarse) {
    .hide-on-touch { display: none; }
  }

  @media (any-hover: hover) and (pointer: fine) {
    .show-on-touch { display: none; }
  }

  

  .card-grid {
    --card-grid-gap: var(--space-6);
    display: grid;
    gap: var(--card-grid-gap);
  }

  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}@media(max-width:1024px){.card-grid--3,.card-grid--4{grid-template-columns:repeat(2,1fr)}.blog-hero__link{gap:var(--space-8);padding:var(--space-8)var(--space-10)}:root{--page-padding:32px}.hero__inner{flex-direction:column;text-align:center;gap:40px}.hero__content{align-items:center}.hero__actions{align-items:center}.hero__visual{width:100%;max-width:400px;height:auto;aspect-ratio:16/9}.feature-card{padding:48px;gap:40px}.splash--card .splash__inner{padding:48px}.feature-card__content{flex:0 0 50%}.feature-card__visual{width:280px}.footer{padding:60px 32px 40px}.footer__top{flex-direction:column;gap:var(--space-10)}.footer__columns{grid-template-columns:repeat(2,1fr)}.compare-cards{grid-template-columns:repeat(2,1fr);max-width:none}.career-values{grid-template-columns:repeat(2,1fr)}.secrets-features{grid-template-columns:repeat(2,1fr)}.partner-logos{grid-template-columns:repeat(2,1fr)}.gcr-problem__grid{grid-template-columns:1fr}.gcr-problem{padding:var(--space-10)var(--page-padding)var(--space-12)}.split-card{padding:var(--space-8);gap:var(--space-8)}.split-card-row--3{grid-template-columns:repeat(2,1fr)}.pricing-cards{grid-template-columns:1fr;max-width:480px;margin-inline:auto}.pricing-cards--two{max-width:480px}}@media(max-width:768px){:root{--page-padding:20px;--text-4xl:2.25rem;--text-3xl:1.75rem;--text-2xl:1.25rem}.navbar{padding:12px var(--page-padding)}.navbar__logo img{height:32px}.navbar__links{display:none}.navbar__dropdown-menu{display:none!important}.navbar__cta{display:none}.navbar__burger{display:flex}.navbar__mobile{display:flex;flex-direction:column;position:fixed;top:56px;left:0;right:0;bottom:0;background:var(--color-canvas);padding:24px var(--page-padding);gap:8px;z-index:var(--z-navbar)}.hero{padding:40px var(--page-padding)}.hero__deploy-command{font-size:14px}.hero__visual{width:100%;max-width:300px;height:auto;aspect-ratio:1/1}.logo-ticker{justify-content:flex-start;gap:32px;padding:0 var(--page-padding);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;&::-webkit-scrollbar { display:none; }}.logo-ticker__item{width:80px;height:28px}.features{padding:60px var(--page-padding)0}.feature-card{flex-direction:column;padding:32px;gap:32px;position:relative;top:auto;box-shadow:none}.splash--card .splash__inner{padding:32px}.contact-card{padding:32px}.contact-card__columns{grid-template-columns:1fr;gap:var(--space-6)}.feature-card__content{flex:none;width:100%}.feature-card__visual{width:100%;aspect-ratio:4/3;order:-1}.card-grid--2,.card-grid--3,.card-grid--4{grid-template-columns:1fr}.community{padding:80px var(--page-padding)0}.community__inner{gap:40px}.community__cards{--card-grid-gap:var(--space-4)}.icon-card{padding:var(--space-8)}.newsletter{padding:48px var(--page-padding)}.newsletter__form{flex-direction:column;width:100%}.newsletter__input-wrap{width:100%}.newsletter__submit{width:100%}.footer{padding:48px var(--page-padding)32px}.footer__columns{grid-template-columns:repeat(2,1fr);gap:var(--space-8)}.footer__bottom{flex-direction:column;gap:var(--space-4);text-align:center}.footer__bottom-left{flex-direction:column;gap:var(--space-2)}.blog-hero__link{grid-template-columns:1fr;padding:var(--space-8)}.blog-hero__image{order:-1}.page-posts-list main{padding-block-start:48px}.post-header{padding-block-start:48px}.page-header{padding:40px var(--page-padding);min-height:auto}.docs-layout{padding-inline:var(--page-padding);padding-block:1rem;gap:1rem}.docs-sidebar{display:none}.search-trigger{display:none}.search-fab{display:flex}.search-modal{top:var(--space-4);width:calc(100vw - 2 * var(--page-padding))}.docs-sheet-trigger{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-ink-muted);background:0 0;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;margin-block-end:var(--space-4)}.docs-sheet-trigger svg{flex-shrink:0}.prose--docs{font-size:var(--text-sm)}.prose--docs h1{margin-block-end:var(--space-4)}.prose--docs h2{margin-block-start:var(--space-10);padding-block-start:var(--space-2)}.prose--docs table{font-size:var(--text-xs);width:100%}.prose--docs img{margin-block:var(--space-4);border-radius:var(--radius-md)}.prose--docs blockquote{padding:var(--space-3)var(--space-4)}.faq-item__question{padding:20px 24px;font-size:1rem}.faq-item__answer{padding:0 24px 20px;font-size:.875rem}.prose-section{padding:0 var(--page-padding)60px}.form-layout{grid-template-columns:1fr;gap:var(--space-8)}.compare-cards{grid-template-columns:1fr;max-width:480px;margin-inline:auto}.career-values{grid-template-columns:1fr}.career-section{padding:var(--space-10)var(--page-padding)var(--space-12)}.secrets-section{padding:var(--space-10)var(--page-padding)}.secrets-card{padding:var(--space-8)}.secrets-features{grid-template-columns:1fr}.secrets-radios{flex-direction:column;gap:var(--space-3)}.secrets-result{flex-direction:column}.partner-section{padding:var(--space-10)var(--page-padding)var(--space-12)}.partner-logos{grid-template-columns:1fr}.partner-listing{padding:var(--space-10)var(--page-padding)var(--space-12)}.career-job{flex-wrap:wrap}.career-job__badges{flex-wrap:wrap}.career-cta{padding:var(--space-12)var(--page-padding)}.split-card{flex-direction:column;padding:var(--space-6);gap:var(--space-6)}.split-card--reverse{flex-direction:column}.split-card__visual{flex:none;width:100%}.split-card-row--2,.split-card-row--3{grid-template-columns:1fr}.pricing-section{padding:var(--space-10)var(--page-padding)var(--space-12)}.pricing-comparison__table{font-size:var(--text-sm)}.pricing-cta{padding:var(--space-12)var(--page-padding)}.pricing-cta__actions{flex-direction:column;align-items:center}}@media(max-width:480px){:root{--text-4xl:1.875rem;--text-3xl:1.5rem}.feature-card{padding:24px;gap:24px}.splash--card .splash__inner{padding:24px}.footer__columns{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.pricing-card__amount{font-size:var(--text-3xl)}}