/* Self-hosted variable fonts, woff2 only, latin and latin-ext subsets.
   Files come from the @fontsource-variable packages (OFL licensed):
   Albert Sans (weight axis, upright and italic), Bricolage Grotesque
   (weight and optical size axes), Spline Sans Mono (weight axis, upright and
   italic). Nothing here is fetched from the internet, so the type does not
   change under a page when a CDN does. Regenerate by copying the latin files
   out of the packages and rewriting the family names and paths. */

/* albert-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* albert-sans-latin-wght-normal */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* albert-sans-latin-ext-wght-italic */
@font-face {
  font-family: 'Albert Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* albert-sans-latin-wght-italic */
@font-face {
  font-family: 'Albert Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/user/themes/kahuna-site/fonts/albert-sans-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* bricolage-grotesque-latin-ext-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/user/themes/kahuna-site/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* bricolage-grotesque-latin-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/user/themes/kahuna-site/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* spline-sans-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* spline-sans-mono-latin-wght-normal */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* spline-sans-mono-latin-ext-wght-italic */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* spline-sans-mono-latin-wght-italic */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/user/themes/kahuna-site/fonts/spline-sans-mono-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* YetiSearch Simple Modal CSS
   Lightweight typeahead with grouped results
   Uses shared theme variables from yetisearch-pro-theme.css
*/

/* Modal container */
.ys-simple-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.ys-simple-modal[aria-hidden="true"] {
  display: none;
}

/* Backdrop */
.ys-simple-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ys-overlay-bg);
  backdrop-filter: var(--ys-overlay-blur);
  -webkit-backdrop-filter: var(--ys-overlay-blur);
}

/* Dialog */
.ys-simple-dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 16px;
  background: var(--ys-panel-bg);
  border: 1px solid var(--ys-border);
  border-radius: 12px;
  box-shadow: var(--ys-dialog-shadow);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}

/* Input wrapper */
.ys-simple-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ys-border);
  flex-shrink: 0;
}

.ys-simple-search-icon {
  width: 20px;
  height: 20px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
}

.ys-simple-input-wrapper input {
  flex: 1;
  background: var(--ys-input-bg);
  border: 1px solid var(--ys-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ys-input-text);
  outline: none;
}
.ys-simple-input-wrapper input:focus {
  border-color: var(--ys-accent, var(--ys-border));
}

.ys-simple-input-wrapper input::placeholder {
  color: var(--ys-input-placeholder);
}

.ys-simple-shortcut {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ys-simple-shortcut kbd,
.ys-simple-command kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--ys-kbd-bg);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--ys-kbd-text);
}

/* Results area */
.ys-simple-results {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--ys-scrollbar-thumb) var(--ys-scrollbar-track);
}

.ys-simple-results::-webkit-scrollbar {
  width: 8px;
}

.ys-simple-results::-webkit-scrollbar-track {
  background: var(--ys-scrollbar-track);
}

.ys-simple-results::-webkit-scrollbar-thumb {
  background: var(--ys-scrollbar-thumb);
  border-radius: 4px;
}

.ys-simple-results::-webkit-scrollbar-thumb:hover {
  background: var(--ys-scrollbar-thumb-hover);
}

/* Results header */
.ys-simple-results-header {
  padding: 8px 16px;
  font-size: 0.875rem;
  color: var(--ys-text-secondary);
  border-bottom: 1px solid var(--ys-border);
  background: var(--ys-panel-bg);
  position: sticky;
  top: 0;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Loading state */
.ys-simple-loading {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
}

.ys-simple-spinner {
  width: 24px;
  height: 24px;
  margin: 0 auto 12px;
  animation: ys-simple-spin 1s linear infinite;
  color: var(--ys-accent);
}

.ys-simple-spinner-track {
  opacity: 0.25;
}

.ys-simple-spinner-head {
  opacity: 0.75;
}

@keyframes ys-simple-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Empty state */
.ys-simple-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
  opacity: 1;
  transition: opacity 0.1s ease;
}

.ys-simple-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--ys-text-muted);
}

.ys-simple-empty-hint {
  font-size: 0.875rem;
  margin-top: 4px;
}

.ys-suggestion-link {
  color: var(--ys-accent);
  text-decoration: underline;
  cursor: pointer;
}

.ys-suggestion-link:hover {
  color: var(--ys-accent-hover);
}

/* Type more */
.ys-simple-type-more {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Results list */
.ys-simple-results-list {
  padding: 8px 0;
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Group */
.ys-simple-group {
  margin-bottom: 8px;
}

.ys-simple-group:last-child {
  margin-bottom: 0;
}

.ys-simple-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ys-text-secondary);
  background: var(--ys-panel-bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.ys-simple-group-icon {
  width: 16px;
  height: 16px;
}

/* Result item */
.ys-simple-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ys-simple-result:hover {
  background: var(--ys-result-hover);
}

.ys-simple-result.selected {
  background: var(--ys-result-selected-bg);
  box-shadow: inset 0 0 0 1px var(--ys-result-selected-ring);
}

.ys-simple-result-icon {
  width: 20px;
  height: 20px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.ys-simple-result-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ys-simple-result-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ys-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-simple-result-title mark {
  background: var(--ys-highlight-bg);
  color: var(--ys-highlight-text);
  border-radius: 2px;
  padding: 0 2px;
}

.ys-simple-result-breadcrumb {
  font-size: 0.75rem;
  color: var(--ys-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-simple-result-distance {
  align-self: flex-start;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--ys-kbd-bg);
  color: var(--ys-kbd-text);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: nowrap;
}

.ys-simple-result-snippet {
  font-size: 0.75rem;
  color: var(--ys-text-muted);
  margin-top: 2px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ys-simple-result-snippet mark {
  background: var(--ys-highlight-bg);
  color: var(--ys-highlight-text);
  border-radius: 2px;
  padding: 0 2px;
}

.ys-simple-result-arrow {
  width: 16px;
  height: 16px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
  align-self: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ys-simple-result:hover .ys-simple-result-arrow,
.ys-simple-result.selected .ys-simple-result-arrow {
  opacity: 1;
}

/* Footer */
.ys-simple-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--ys-border);
  font-size: 0.75rem;
  color: var(--ys-text-secondary);
  flex-shrink: 0;
}

.ys-simple-commands {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ys-simple-command {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ys-simple-command kbd + kbd {
  margin-left: 2px;
}

.ys-simple-powered-by a {
  color: var(--ys-accent);
  text-decoration: none;
}

.ys-simple-powered-by a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
  .ys-simple-modal {
    padding-top: 5vh;
  }

  .ys-simple-dialog {
    margin: 0 8px;
    max-height: 90vh;
  }

  .ys-simple-footer {
    flex-direction: column;
    gap: 8px;
  }

  .ys-simple-commands {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: Inter;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: OpenSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/open-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: Geom;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/geom-variable.woff2') format('woff2');
}
@font-face {
  font-family: NunitoSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/nunito-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: UbuntuSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/ubuntu-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: WorkSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/work-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: PublicSans;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/public-sans-variable.woff2') format('woff2');
}
@font-face {
  font-family: Quicksand;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/quicksand-variable.woff2') format('woff2');
}
@font-face {
  font-family: JetBrainsMono;
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/jetbrains-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: FiraCode;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/fireacode-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: IntelOneMono;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/intelone-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: AtkinsonHyperlegibleMono;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/atkins-hyper-legible-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: Inconsolata;
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/user/themes/kahuna-site/fonts/inconsolata-variable.woff2') format('woff2');
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.6);
}
.dark * {
  scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
}
.dark *::-webkit-scrollbar-thumb {
  background: rgba(75, 85, 99, 0.5);
}
.dark *::-webkit-scrollbar-thumb:hover {
  background: rgba(75, 85, 99, 0.7);
}
.prose {
  max-width: none;
  font-size: var(--text-base);
  h1, h2, h3, h4, h5, h6 {
    position: relative;
    scroll-margin-top: calc(var(--spacing) * 24);
    .anchor-link {
      position: absolute;
      left: calc(var(--spacing) * -6);
      color: var(--color-gray-400);
      text-decoration-line: none;
      opacity: 0%;
      transition-property: opacity;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary);
        }
      }
    }
    &:hover .anchor-link {
      opacity: 100%;
    }
  }
  h1 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  h2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  h3 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  h4 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  a {
    color: var(--color-primary);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary-hover);
      }
    }
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-primary-dark);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary-dark-hover);
        }
      }
    }
  }
  ul {
    margin-block: calc(var(--spacing) * 4);
    list-style-type: disc;
    padding-left: calc(var(--spacing) * 6);
  }
  ol {
    margin-block: calc(var(--spacing) * 4);
    list-style-type: decimal;
    padding-left: calc(var(--spacing) * 6);
  }
  li {
    margin-block: calc(var(--spacing) * 1);
  }
  blockquote:not(:has(.md-alert)) {
    margin-block: calc(var(--spacing) * 4);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-primary);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-style: italic;
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  .md-alert {
    margin-block: calc(var(--spacing) * 4);
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-style: normal;
  }
  .md-alert--note {
    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
    }
  }
  .md-alert--tip {
    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
  }
  .md-alert--important {
    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
    }
  }
  .md-alert--warning {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }
  .md-alert--caution {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }
  .md-alert-title {
    margin-top: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    svg {
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
    }
  }
  .md-alert-body {
    > *:first-child {
      margin-top: calc(var(--spacing) * 0);
    }
    > *:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  table {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  thead {
    background-color: var(--color-gray-50);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  td {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .table-striped tr:nth-child(even) {
    background-color: var(--color-gray-50);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
      }
    }
  }
  .table-compact th {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .table-compact td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  :not(pre) > code {
    border-radius: 0.25rem;
    background-color: var(--color-gray-100);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-family: var(--font-mono);
    color: var(--color-accent);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
    &:where(.dark, .dark *) {
      color: var(--color-accent-dark);
    }
    font-size: var(--helios-code-size, var(--text-sm));
  }
  h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
    font-size: inherit !important;
  }
  pre, pre code, pre[class*="language-"], code[class*="language-"] {
    font-family: var(--font-mono) !important;
    font-size: var(--helios-code-size, var(--text-sm)) !important;
  }
  hr {
    margin-block: calc(var(--spacing) * 8);
    border-color: var(--color-gray-200);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  img {
    border-radius: var(--radius-lg);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
.prose-lg {
  font-size: var(--text-lg);
}
.dark body {
  color: var(--color-gray-300);
}
.sidebar-nav {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }
  .nav-item {
    display: block;
    .nav-link {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 2);
      border-radius: var(--radius-md);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      color: var(--color-gray-700);
      &:where(.dark, .dark *) {
        color: var(--color-gray-300);
      }
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-gray-800);
          }
        }
      }
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-900);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            color: var(--color-white);
          }
        }
      }
    }
    .nav-link.active {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
      }
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-primary);
      &:where(.dark, .dark *) {
        color: var(--color-primary-dark);
      }
    }
    .nav-icon {
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
      flex-shrink: 0;
      color: var(--color-gray-400);
      &:where(.dark, .dark *) {
        color: var(--color-gray-500);
      }
    }
    .nav-link.active .nav-icon {
      color: var(--color-primary);
      &:where(.dark, .dark *) {
        color: var(--color-primary-dark);
      }
    }
    .nav-icon svg {
      height: 100%;
      width: 100%;
    }
    .nav-link-container {
      display: flex;
      align-items: center;
      border-radius: var(--radius-md);
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-100);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-gray-800);
          }
        }
      }
    }
    .nav-link-container.active {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
      }
    }
    .nav-link-container .nav-link {
      flex: 1;
      &:hover {
        @media (hover: hover) {
          background-color: transparent;
        }
      }
    }
    .nav-link-container.active .nav-link {
      background-color: transparent;
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-primary);
      &:where(.dark, .dark *) {
        color: var(--color-primary-dark);
      }
    }
    .nav-toggle-btn {
      display: flex;
      height: calc(var(--spacing) * 8);
      width: calc(var(--spacing) * 8);
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-200);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-gray-700);
          }
        }
      }
    }
    .nav-toggle {
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
      color: var(--color-gray-400);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    .nav-toggle.expanded {
      rotate: 90deg;
    }
  }
  .nav-children {
    margin-top: calc(var(--spacing) * 1);
    margin-left: calc(var(--spacing) * 4);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--color-gray-200);
    padding-left: calc(var(--spacing) * 2);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .nav-section {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    text-transform: uppercase;
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
  }
}
.mobile-nav-overlay {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 40;
  background-color: color-mix(in srgb, #000 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.mobile-nav-panel {
  position: fixed;
  top: calc(var(--spacing) * 0);
  bottom: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 50;
  width: calc(var(--spacing) * 80);
  max-width: 85vw;
  background-color: var(--color-white);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-900);
  }
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.mobile-nav-panel.closed {
  --tw-translate-x: -100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  a {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary-dark);
        }
      }
    }
  }
  .separator {
    color: var(--color-gray-400);
    &:where(.dark, .dark *) {
      color: var(--color-gray-600);
    }
  }
  .current {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
}
.prev-next-nav {
  margin-top: calc(var(--spacing) * 12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-200);
  padding-top: calc(var(--spacing) * 8);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  .nav-button {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-primary-dark);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    .label {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      --tw-tracking: var(--tracking-wide);
      letter-spacing: var(--tracking-wide);
      color: var(--color-gray-500);
      text-transform: uppercase;
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    .title {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
  }
  .nav-button.prev {
    text-align: left;
  }
  .nav-button.next {
    margin-left: auto;
    text-align: right;
  }
}
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: calc(infinity * 1px);
  padding: calc(var(--spacing) * 1);
  background-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-700);
  }
}
.theme-toggle-indicator {
  position: absolute;
  top: calc(var(--spacing) * 1);
  left: calc(var(--spacing) * 1);
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-white);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-500);
  }
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  z-index: 0;
}
.theme-toggle-btn {
  position: relative;
  z-index: 10;
  display: flex;
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.theme-toggle-btn:hover {
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-200);
  }
}
.theme-toggle-btn-active {
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.toc-nav {
  .toc-link {
    padding-left: calc(var(--spacing) * 3);
    margin-left: -1px;
    &[data-active="true"] {
      border-color: var(--color-primary);
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-primary);
    }
  }
  ul ul .toc-link {
    padding-left: calc(var(--spacing) * 6);
  }
  ul ul ul .toc-link {
    padding-left: calc(var(--spacing) * 9);
  }
  ul ul ul ul .toc-link {
    padding-left: calc(var(--spacing) * 12);
  }
}
.htmx-indicator {
  opacity: 0%;
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.htmx-request .htmx-indicator {
  opacity: 100%;
}
.htmx-request.htmx-indicator {
  opacity: 100%;
}
.callout {
  margin-block: calc(var(--spacing) * 6);
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  padding-left: calc(var(--spacing) * 4);
  .callout-header {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    .callout-icon {
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
      flex-shrink: 0;
    }
    .callout-title {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-tracking: var(--tracking-wide);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
  }
  .callout-content {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    p:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
    code {
      background-color: color-mix(in srgb, #fff 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #000 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
        }
      }
    }
  }
  &.callout-note {
    border-color: var(--color-blue-500);
    .callout-header {
      color: var(--color-blue-700);
      &:where(.dark, .dark *) {
        color: var(--color-blue-400);
      }
    }
  }
  &.callout-tip {
    border-color: var(--color-green-500);
    .callout-header {
      color: var(--color-green-700);
      &:where(.dark, .dark *) {
        color: var(--color-green-400);
      }
    }
  }
  &.callout-warning {
    border-color: var(--color-amber-500);
    .callout-header {
      color: var(--color-amber-700);
      &:where(.dark, .dark *) {
        color: var(--color-amber-400);
      }
    }
  }
  &.callout-danger {
    border-color: var(--color-red-500);
    .callout-header {
      color: var(--color-red-700);
      &:where(.dark, .dark *) {
        color: var(--color-red-400);
      }
    }
  }
  &.callout-caution {
    border-color: var(--color-red-500);
    .callout-header {
      color: var(--color-red-700);
      &:where(.dark, .dark *) {
        color: var(--color-red-400);
      }
    }
  }
  &.callout-info {
    border-color: var(--color-purple-500);
    .callout-header {
      color: var(--color-purple-700);
      &:where(.dark, .dark *) {
        color: var(--color-purple-400);
      }
    }
  }
  &.callout-important {
    border-color: var(--color-purple-500);
    .callout-header {
      color: var(--color-purple-700);
      &:where(.dark, .dark *) {
        color: var(--color-purple-400);
      }
    }
  }
}
.callout-collapsible {
  cursor: pointer;
  .callout-header {
    -webkit-user-select: none;
    user-select: none;
    .expand-icon {
      margin-left: auto;
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  &[open] .expand-icon {
    rotate: 90deg;
  }
  .callout-content {
    padding-top: calc(var(--spacing) * 2);
  }
}
.api-method {
  display: inline-flex;
  align-items: center;
  border-radius: 0.25rem;
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  &.method-get {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-green-300);
    }
  }
  &.method-post {
    background-color: var(--color-blue-100);
    color: var(--color-blue-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-blue-300);
    }
  }
  &.method-put {
    background-color: var(--color-amber-100);
    color: var(--color-amber-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-amber-300);
    }
  }
  &.method-patch {
    background-color: var(--color-orange-100);
    color: var(--color-orange-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-orange-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-orange-300);
    }
  }
  &.method-delete {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-red-300);
    }
  }
}
.api-endpoint-card {
  margin-block: calc(var(--spacing) * 8);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  .endpoint-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    background-color: var(--color-gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
    .endpoint-path {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      .path-param {
        color: var(--color-primary);
      }
    }
  }
  .endpoint-description {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-600);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
  }
  .endpoint-body {
    padding: calc(var(--spacing) * 4);
  }
}
.api-params {
  margin-block: calc(var(--spacing) * 4);
  .params-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .params-table {
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    th {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      text-align: left;
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      --tw-tracking: var(--tracking-wide);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      background-color: var(--color-gray-50);
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        background-color: var(--color-gray-800);
      }
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    td {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--color-gray-200);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 3);
      vertical-align: top;
      &:where(.dark, .dark *) {
        border-color: var(--color-gray-700);
      }
    }
    .param-name {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    .param-type {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    .param-required {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-red-600);
      &:where(.dark, .dark *) {
        color: var(--color-red-400);
      }
    }
    .param-optional {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-400);
      &:where(.dark, .dark *) {
        color: var(--color-gray-500);
      }
    }
    .param-description {
      color: var(--color-gray-600);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
    .param-default {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      code {
        border-radius: 0.25rem;
        background-color: var(--color-gray-100);
        padding-inline: calc(var(--spacing) * 1);
        &:where(.dark, .dark *) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
}
.api-examples {
  margin-block: calc(var(--spacing) * 6);
  .examples-tabs {
    display: flex;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-200);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    button {
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 2);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 2px;
      border-color: transparent;
      &:hover {
        @media (hover: hover) {
          color: var(--color-gray-700);
        }
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            color: var(--color-gray-300);
          }
        }
      }
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      &.active {
        border-color: var(--color-primary);
        color: var(--color-primary);
      }
    }
  }
  .example-panel {
    display: none;
    padding-top: calc(var(--spacing) * 4);
    &.active {
      display: block;
    }
  }
}
.api-responses {
  margin-block: calc(var(--spacing) * 4);
  .responses-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .response-item {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-gray-200);
    padding-block: calc(var(--spacing) * 2);
    &:first-child {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
    .response-code {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      &.code-2xx {
        color: var(--color-green-600);
        &:where(.dark, .dark *) {
          color: var(--color-green-400);
        }
      }
      &.code-4xx {
        color: var(--color-amber-600);
        &:where(.dark, .dark *) {
          color: var(--color-amber-400);
        }
      }
      &.code-5xx {
        color: var(--color-red-600);
        &:where(.dark, .dark *) {
          color: var(--color-red-400);
        }
      }
    }
    .response-description {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--color-gray-600);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
  }
}
.api-nav-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  .api-method {
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
  }
}
.api-collection-sections section {
  scroll-margin-top: 5rem;
}
.api-collection-section > h2:first-child {
  margin-top: calc(var(--spacing) * 0);
}
kbd {
  font-family: var(--font-sans);
}
.search-modal {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  @media (width >= 40rem) {
    padding-top: 15vh;
  }
  background-color: color-mix(in srgb, #000 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.search-dialog {
  margin-inline: calc(var(--spacing) * 4);
  width: 100%;
  max-width: var(--container-2xl);
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-900);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  display: flex;
  max-height: 80vh;
  flex-direction: column;
}
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-200);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  flex-shrink: 0;
  .search-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    color: var(--color-gray-400);
  }
  input {
    flex: 1;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-gray-900);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &::placeholder {
      color: var(--color-gray-400);
    }
    &:where(.dark, .dark *) {
      &::placeholder {
        color: var(--color-gray-500);
      }
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .search-shortcut {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    kbd {
      border-radius: 0.25rem;
      background-color: var(--color-gray-100);
      padding-inline: calc(var(--spacing) * 1.5);
      padding-block: calc(var(--spacing) * 0.5);
      font-family: var(--font-mono);
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        background-color: var(--color-gray-800);
      }
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
    }
  }
}
.search-results {
  min-height: calc(var(--spacing) * 0);
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 4px;
    &:hover {
      background: rgba(156, 163, 175, 0.5);
    }
  }
  .dark & {
    scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
    &::-webkit-scrollbar-thumb {
      background: rgba(75, 85, 99, 0.5);
      &:hover {
        background: rgba(75, 85, 99, 0.7);
      }
    }
  }
  .search-results-header {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-gray-100);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-800);
    }
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 10;
    background-color: var(--color-white);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
    }
    .search-query-text {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-700);
      &:where(.dark, .dark *) {
        color: var(--color-gray-300);
      }
    }
  }
  .search-empty {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--color-gray-500);
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
    .empty-icon {
      margin-inline: auto;
      margin-bottom: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 12);
      width: calc(var(--spacing) * 12);
      color: var(--color-gray-300);
      &:where(.dark, .dark *) {
        color: var(--color-gray-600);
      }
    }
    .suggestion-link {
      cursor: pointer;
      color: var(--color-primary);
      text-decoration-line: underline;
      &:hover {
        @media (hover: hover) {
          color: var(--color-primary-hover);
        }
      }
    }
  }
  .search-loading {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    .spinner {
      margin-inline: auto;
      margin-bottom: calc(var(--spacing) * 3);
      height: calc(var(--spacing) * 6);
      width: calc(var(--spacing) * 6);
      animation: var(--animate-spin);
      color: var(--color-primary);
    }
  }
  .search-results-list {
    padding-block: calc(var(--spacing) * 2);
  }
  .search-group {
    margin-bottom: calc(var(--spacing) * 2);
    &:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
  .search-group-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-gray-500);
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 5;
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-900) 95%, transparent);
      }
    }
    .group-icon {
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
    }
  }
  .search-result {
    margin-inline: calc(var(--spacing) * 2);
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
          }
        }
      }
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    &.selected {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--color-primary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
        }
      }
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
      }
    }
    .result-icon {
      margin-top: calc(var(--spacing) * 0.5);
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
      flex-shrink: 0;
      color: var(--color-gray-400);
    }
    .result-content {
      display: flex;
      min-width: calc(var(--spacing) * 0);
      flex: 1;
      flex-direction: column;
      gap: calc(var(--spacing) * 0.5);
    }
    .result-title {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--color-gray-900);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      mark {
        border-radius: 0.25rem;
        background-color: var(--color-yellow-200);
        padding-inline: calc(var(--spacing) * 0.5);
        color: inherit;
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
          }
        }
      }
    }
    .result-breadcrumb {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-500);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    .result-snippet {
      margin-top: calc(var(--spacing) * 0.5);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      color: var(--color-gray-600);
      &:where(.dark, .dark *) {
        color: var(--color-gray-400);
      }
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      --tw-leading: var(--leading-relaxed);
      line-height: var(--leading-relaxed);
      mark {
        border-radius: 0.25rem;
        background-color: var(--color-yellow-200);
        padding-inline: calc(var(--spacing) * 0.5);
        color: inherit;
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
          }
        }
      }
    }
    .result-arrow {
      margin-top: calc(var(--spacing) * 0.5);
      height: calc(var(--spacing) * 4);
      width: calc(var(--spacing) * 4);
      flex-shrink: 0;
      color: var(--color-gray-400);
      opacity: 0%;
      transition-property: opacity;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 150ms;
      transition-duration: 150ms;
    }
    &:hover .result-arrow, &.selected .result-arrow {
      opacity: 100%;
    }
  }
}
.search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  .search-commands {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    .command {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 1.5);
      kbd {
        border-radius: 0.25rem;
        background-color: var(--color-gray-100);
        padding-inline: calc(var(--spacing) * 1.5);
        padding-block: calc(var(--spacing) * 0.5);
        font-family: var(--font-mono);
        &:where(.dark, .dark *) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .search-powered-by {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    a {
      color: var(--color-primary);
      &:hover {
        @media (hover: hover) {
          text-decoration-line: underline;
        }
      }
    }
  }
}
.search-trigger {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  background-color: var(--color-gray-100);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  cursor: pointer;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  .search-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .search-placeholder {
    display: none;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    @media (width >= 40rem) {
      display: block;
    }
  }
  .search-kbd {
    display: none;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    @media (width >= 40rem) {
      display: flex;
    }
    kbd {
      border-radius: 0.25rem;
      background-color: var(--color-white);
      padding-inline: calc(var(--spacing) * 1.5);
      padding-block: calc(var(--spacing) * 0.5);
      font-family: var(--font-sans);
      &:where(.dark, .dark *) {
        background-color: var(--color-gray-900);
      }
    }
  }
}
.doc-card {
  margin-bottom: calc(var(--spacing) * 4);
  display: block;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  padding: calc(var(--spacing) * 6);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-card:last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-card[href] {
  cursor: pointer;
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-primary);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
}
.prose a.doc-card:hover {
  text-decoration-line: none;
}
.doc-card-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
  }
  padding: calc(var(--spacing) * 2);
  color: var(--color-primary);
}
.doc-grid {
  margin-block: calc(var(--spacing) * 6);
}
.doc-grid > .doc-card {
  margin-bottom: calc(var(--spacing) * 0);
  height: 100%;
}
ol.doc-steps {
  position: relative;
  margin-block: calc(var(--spacing) * 6);
  margin-left: calc(var(--spacing) * 4);
  list-style-type: none;
  border-left-style: var(--tw-border-style);
  border-left-width: 2px;
  border-color: var(--color-gray-200);
  padding-left: calc(var(--spacing) * 0);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-step {
  position: relative;
  padding-bottom: calc(var(--spacing) * 8);
  padding-left: calc(var(--spacing) * 8);
}
.doc-step:last-child {
  padding-bottom: calc(var(--spacing) * 0);
}
.doc-step-number {
  position: absolute;
  left: calc(var(--spacing) * -4);
  display: flex;
  height: calc(var(--spacing) * 8);
  width: calc(var(--spacing) * 8);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-primary);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}
.doc-step-content {
  padding-top: calc(var(--spacing) * 0.5);
}
.doc-step-content > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-step-content > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-tabs {
  margin-block: calc(var(--spacing) * 6);
}
.doc-tabs-nav {
  display: flex;
  gap: calc(var(--spacing) * 0);
  overflow-x: auto;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-tab-button {
  position: relative;
  margin-bottom: -1px;
  cursor: pointer;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 2px;
  border-color: transparent;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  color: var(--color-gray-600);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      color: var(--color-gray-900);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-200);
      }
    }
  }
}
.doc-tab-button.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  &:where(.dark, .dark *) {
    color: var(--color-primary);
  }
}
.doc-tab-button:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.doc-tab-button:focus-visible {
  border-radius: 0.25rem;
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  &:where(.dark, .dark *) {
    --tw-ring-offset-color: var(--color-gray-900);
  }
}
.doc-tabs-content {
  margin-top: calc(var(--spacing) * 0);
}
.doc-tab-panel {
  display: none;
  padding-block: calc(var(--spacing) * 4);
}
.doc-tab-panel.active {
  display: block;
}
.doc-tab-panel > .prose > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-tab-panel > .prose > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-file-tree {
  margin-block: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-50);
  padding: calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
    }
  }
}
.doc-file-tree-list {
  margin: calc(var(--spacing) * 0);
  list-style-type: none;
  padding: calc(var(--spacing) * 0);
}
.doc-file-tree-list .doc-file-tree-list {
  margin: calc(var(--spacing) * 0);
  padding: calc(var(--spacing) * 0);
  padding-left: calc(var(--spacing) * 6);
}
.doc-file-tree-item {
  position: relative;
  margin: calc(var(--spacing) * 0);
  list-style-type: none;
  padding: calc(var(--spacing) * 0);
  padding-top: 2px;
  padding-bottom: 2px;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item::before {
  content: '';
  position: absolute;
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
  border-color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
  left: -12px;
  top: 0;
  bottom: -4px;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item:first-child::before {
  top: 0;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item:last-child::before {
  bottom: auto;
  height: 15px;
}
.doc-file-tree-list .doc-file-tree-list > .doc-file-tree-item::after {
  content: '';
  position: absolute;
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
  left: -12px;
  top: 13px;
  width: 10px;
}
.doc-file-tree-entry {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.doc-file-tree-icon {
  flex-shrink: 0;
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-file-tree-item.directory > .doc-file-tree-entry > .doc-file-tree-icon {
  color: var(--color-amber-500);
  &:where(.dark, .dark *) {
    color: var(--color-amber-400);
  }
}
.doc-file-tree-name {
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-300);
  }
}
.doc-file-tree-item.highlight > .doc-file-tree-entry > .doc-file-tree-name {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}
.doc-file-tree-comment {
  margin-left: calc(var(--spacing) * 2);
  font-family: var(--font-sans);
  color: var(--color-gray-500);
  font-style: italic;
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-file-tree-item.placeholder > .doc-file-tree-entry {
  color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-file-tree-dots {
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
}
.doc-accordion {
  margin-block: calc(var(--spacing) * 6);
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  overflow: hidden;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-700);
    }
  }
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-accordion-item {
  position: relative;
}
.doc-accordion-trigger {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 4);
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-100);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
        }
      }
    }
  }
}
.doc-accordion-trigger:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.doc-accordion-trigger:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
  --tw-ring-inset: inset;
}
.doc-accordion-title {
  flex: 1;
}
.doc-accordion-chevron {
  margin-left: calc(var(--spacing) * 2);
  flex-shrink: 0;
  color: var(--color-gray-500);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-accordion-item.open > .doc-accordion-trigger > .doc-accordion-chevron {
  rotate: 180deg;
}
.doc-accordion-content {
  overflow: hidden;
  transition-property: max-height;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
  max-height: 0;
}
.doc-accordion-body {
  padding-inline: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 4);
}
.doc-accordion-body > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-accordion-body > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-button {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.doc-button-sm {
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.doc-button:not(.doc-button-sm):not(.doc-button-lg):not(.doc-button-xl) {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.doc-button-lg {
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 2.5);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.doc-button-xl {
  padding-inline: calc(var(--spacing) * 7);
  padding-block: calc(var(--spacing) * 3.5);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.doc-button:not(.doc-button-bordered) {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
}
.doc-button:not(.doc-button-bordered):hover {
  background-color: var(--color-primary-hover);
}
:is(.dark) .doc-button:not(.doc-button-bordered) {
  background-color: var(--color-primary-dark);
  color: var(--color-primary-dark-text);
}
:is(.dark) .doc-button:not(.doc-button-bordered):hover {
  background-color: var(--color-primary-dark-hover);
}
.doc-button:not(.doc-button-bordered).doc-button-blue {
  background-color: var(--color-blue-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-blue:hover {
  background-color: var(--color-blue-600);
}
.doc-button:not(.doc-button-bordered).doc-button-green {
  background-color: var(--color-green-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-green:hover {
  background-color: var(--color-green-600);
}
.doc-button:not(.doc-button-bordered).doc-button-yellow {
  background-color: var(--color-amber-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-yellow:hover {
  background-color: var(--color-amber-600);
}
.doc-button:not(.doc-button-bordered).doc-button-red {
  background-color: var(--color-red-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-red:hover {
  background-color: var(--color-red-600);
}
.doc-button:not(.doc-button-bordered).doc-button-purple {
  background-color: var(--color-purple-500);
  color: var(--color-white);
}
.doc-button:not(.doc-button-bordered).doc-button-purple:hover {
  background-color: var(--color-purple-600);
}
.doc-button:not(.doc-button-bordered).doc-button-plain {
  background-color: var(--color-gray-200);
  color: var(--color-gray-800);
}
.doc-button:not(.doc-button-bordered).doc-button-plain:hover {
  background-color: var(--color-gray-300);
}
:is(.dark) .doc-button:not(.doc-button-bordered).doc-button-plain {
  background-color: var(--color-gray-700);
  color: var(--color-gray-200);
}
:is(.dark) .doc-button:not(.doc-button-bordered).doc-button-plain:hover {
  background-color: var(--color-gray-600);
}
.doc-button-bordered {
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
}
.doc-button-bordered:hover {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}
:is(.dark) .doc-button-bordered:hover {
  background-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary-dark) 10%, transparent);
  }
}
.doc-button-bordered.doc-button-blue {
  border-color: var(--color-blue-500);
  color: var(--color-blue-700);
}
.doc-button-bordered.doc-button-blue:hover {
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-blue {
  color: var(--color-blue-400);
}
.doc-button-bordered.doc-button-green {
  border-color: var(--color-green-500);
  color: var(--color-green-700);
}
.doc-button-bordered.doc-button-green:hover {
  background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-green {
  color: var(--color-green-400);
}
.doc-button-bordered.doc-button-yellow {
  border-color: var(--color-amber-500);
  color: var(--color-amber-700);
}
.doc-button-bordered.doc-button-yellow:hover {
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-yellow {
  color: var(--color-amber-400);
}
.doc-button-bordered.doc-button-red {
  border-color: var(--color-red-500);
  color: var(--color-red-700);
}
.doc-button-bordered.doc-button-red:hover {
  background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-red {
  color: var(--color-red-400);
}
.doc-button-bordered.doc-button-purple {
  border-color: var(--color-purple-500);
  color: var(--color-purple-700);
}
.doc-button-bordered.doc-button-purple:hover {
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-500) 10%, transparent);
  }
}
:is(.dark) .doc-button-bordered.doc-button-purple {
  color: var(--color-purple-400);
}
.doc-button-bordered.doc-button-plain {
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}
.doc-button-bordered.doc-button-plain:hover {
  background-color: var(--color-gray-100);
}
:is(.dark) .doc-button-bordered.doc-button-plain {
  border-color: var(--color-gray-600);
  color: var(--color-gray-300);
}
:is(.dark) .doc-button-bordered.doc-button-plain:hover {
  background-color: var(--color-gray-800);
}
.doc-button-center {
  margin-block: calc(var(--spacing) * 4);
  display: flex;
  justify-content: center;
}
.doc-button-icon {
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  flex-shrink: 0;
}
.doc-button-lg .doc-button-icon {
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.doc-button-xl .doc-button-icon {
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.prose a.doc-button:hover {
  text-decoration-line: none;
}
.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  vertical-align: baseline;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.doc-badge-sm {
  padding-inline: calc(var(--spacing) * 2);
  padding-block: 1px;
  font-size: 0.65rem;
}
.doc-badge-icon {
  height: calc(var(--spacing) * 3);
  width: calc(var(--spacing) * 3);
  flex-shrink: 0;
}
.doc-badge:not(.doc-badge-outline) {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
  }
  color: var(--color-primary);
}
:is(.dark) .doc-badge:not(.doc-badge-outline) {
  background-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary-dark) 20%, transparent);
  }
  color: var(--color-primary-dark);
}
.doc-badge:not(.doc-badge-outline).doc-badge-blue {
  background-color: var(--color-blue-100);
  color: var(--color-blue-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-blue {
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
  }
  color: var(--color-blue-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-green {
  background-color: var(--color-green-100);
  color: var(--color-green-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-green {
  background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
  }
  color: var(--color-green-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-yellow {
  background-color: var(--color-amber-100);
  color: var(--color-amber-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-yellow {
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
  }
  color: var(--color-amber-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-red {
  background-color: var(--color-red-100);
  color: var(--color-red-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-red {
  background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
  }
  color: var(--color-red-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-purple {
  background-color: var(--color-purple-100);
  color: var(--color-purple-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-purple {
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
  }
  color: var(--color-purple-400);
}
.doc-badge:not(.doc-badge-outline).doc-badge-plain {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}
:is(.dark) .doc-badge:not(.doc-badge-outline).doc-badge-plain {
  background-color: var(--color-gray-700);
  color: var(--color-gray-300);
}
.doc-badge-outline {
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: transparent;
}
.doc-badge-outline {
  border-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
  }
  color: var(--color-primary);
}
:is(.dark) .doc-badge-outline {
  border-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-primary-dark) 40%, transparent);
  }
  color: var(--color-primary-dark);
}
.doc-badge-outline.doc-badge-blue {
  border-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-blue-400) 50%, transparent);
  }
  color: var(--color-blue-700);
}
:is(.dark) .doc-badge-outline.doc-badge-blue {
  color: var(--color-blue-400);
}
.doc-badge-outline.doc-badge-green {
  border-color: color-mix(in srgb, oklch(79.2% 0.209 151.711) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-green-400) 50%, transparent);
  }
  color: var(--color-green-700);
}
:is(.dark) .doc-badge-outline.doc-badge-green {
  color: var(--color-green-400);
}
.doc-badge-outline.doc-badge-yellow {
  border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
  }
  color: var(--color-amber-700);
}
:is(.dark) .doc-badge-outline.doc-badge-yellow {
  color: var(--color-amber-400);
}
.doc-badge-outline.doc-badge-red {
  border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-red-400) 50%, transparent);
  }
  color: var(--color-red-700);
}
:is(.dark) .doc-badge-outline.doc-badge-red {
  color: var(--color-red-400);
}
.doc-badge-outline.doc-badge-purple {
  border-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-purple-400) 50%, transparent);
  }
  color: var(--color-purple-700);
}
:is(.dark) .doc-badge-outline.doc-badge-purple {
  color: var(--color-purple-400);
}
.doc-badge-outline.doc-badge-plain {
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}
:is(.dark) .doc-badge-outline.doc-badge-plain {
  border-color: var(--color-gray-600);
  color: var(--color-gray-300);
}
.doc-tooltip {
  position: relative;
  display: inline-flex;
}
.doc-tooltip-underline {
  cursor: help;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  --tw-border-style: dashed;
  border-style: dashed;
  border-color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
}
.doc-tooltip-highlight {
  cursor: help;
  border-radius: 0.25rem;
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
  padding-inline: calc(var(--spacing) * 0.5);
}
:is(.dark) .doc-tooltip-highlight {
  background-color: var(--color-primary-dark);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary-dark) 15%, transparent);
  }
}
.doc-tooltip-plain {
  cursor: help;
}
.doc-tooltip-popup {
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: calc(1/2 * 100%);
  z-index: 50;
  margin-bottom: calc(var(--spacing) * 2);
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-900);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
  color: var(--color-white);
  opacity: 0%;
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 150ms;
  transition-duration: 150ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
:is(.dark) .doc-tooltip-popup {
  background-color: var(--color-gray-700);
}
.doc-tooltip-popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(1/2 * 100%);
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-width: 5px;
  border-style: solid;
  border-color: var(--color-helios-gray-900, var(--color-zinc-900)) transparent transparent transparent;
}
:is(.dark) .doc-tooltip-popup::after {
  border-top-color: var(--color-helios-gray-700, var(--color-zinc-700));
}
.doc-tooltip:hover .doc-tooltip-popup, .doc-tooltip:focus-within .doc-tooltip-popup {
  visibility: visible;
  opacity: 100%;
}
.doc-video {
  position: relative;
  margin-block: calc(var(--spacing) * 6);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-black);
}
.doc-video iframe, .doc-video video {
  position: absolute;
  top: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  height: 100%;
  width: 100%;
}
.doc-video-16x9 {
  padding-bottom: 56.25%;
}
.doc-video-4x3 {
  padding-bottom: 75%;
}
.doc-video-1x1 {
  padding-bottom: 100%;
}
.doc-video-9x16 {
  padding-bottom: 177.78%;
  margin-inline: auto;
  max-width: var(--container-sm);
}
.doc-image {
  margin-block: calc(var(--spacing) * 6);
  text-align: center;
}
.doc-image-lightbox {
  display: inline-block;
  cursor: zoom-in;
}
.prose a.doc-image-lightbox:hover {
  text-decoration-line: none;
}
.doc-image-img {
  margin-bottom: calc(var(--spacing) * 0) !important;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-lg);
}
.doc-image-border {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
}
:is(.dark) .doc-image-border {
  border-color: var(--color-gray-600);
}
.doc-image-shadow {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
:is(.dark) .doc-image-shadow {
  box-shadow: 0 0 20px -3px var(--color-primary-dark, color-mix(in oklab, oklch(62.3% 0.214 259.815) 3000%, transparent)), 0 0 8px -4px var(--color-primary-dark, color-mix(in oklab, oklch(62.3% 0.214 259.815) 2000%, transparent));
}
.doc-image-caption {
  margin-top: calc(var(--spacing) * 2);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-lightbox-overlay {
  visibility: hidden;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, #000 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
  }
  opacity: 0%;
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.doc-lightbox-overlay.active {
  visibility: visible;
  opacity: 100%;
}
.doc-lightbox-close {
  position: absolute;
  top: calc(var(--spacing) * 4);
  right: calc(var(--spacing) * 4);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  padding: calc(var(--spacing) * 2);
  color: color-mix(in srgb, #fff 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-white);
    }
  }
}
.doc-lightbox-close svg {
  pointer-events: none;
}
.doc-lightbox-img {
  max-height: 90vh;
  max-width: 90vw;
  --tw-scale-x: 95%;
  --tw-scale-y: 95%;
  --tw-scale-z: 95%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
  border-radius: var(--radius-lg);
  object-fit: contain;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.doc-lightbox-overlay.active .doc-lightbox-img {
  --tw-scale-x: 100%;
  --tw-scale-y: 100%;
  --tw-scale-z: 100%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.doc-link-card {
  margin-block: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  padding: calc(var(--spacing) * 4);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-primary);
    }
  }
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
}
.prose a.doc-link-card:hover {
  text-decoration-line: none;
}
.doc-link-card-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
  padding: calc(var(--spacing) * 2);
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-link-card-content {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  flex-direction: column;
}
.doc-link-card-title {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-gray-100);
  }
}
.doc-link-card-description {
  margin-top: calc(var(--spacing) * 0.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-link-card-arrow {
  flex-shrink: 0;
  color: var(--color-gray-400);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-link-card:hover .doc-link-card-arrow {
  color: var(--color-primary);
}
.doc-details {
  margin-block: calc(var(--spacing) * 6);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
}
.doc-details-summary {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  -webkit-user-select: none;
  user-select: none;
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-100);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
        }
      }
    }
  }
}
.doc-details-summary::-webkit-details-marker, .doc-details-summary::marker {
  display: none;
}
.doc-details-chevron {
  flex-shrink: 0;
  color: var(--color-gray-500);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.doc-details[open] > .doc-details-summary > .doc-details-chevron {
  rotate: 90deg;
}
.doc-details-content {
  padding-inline: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 4);
}
.doc-details-content > :first-child {
  margin-top: calc(var(--spacing) * 0);
}
.doc-details-content > :last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.doc-kbd-group {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 0.5);
}
.doc-kbd {
  display: inline-flex;
  min-width: 1.5em;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-300);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-500);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-200);
  }
  border-bottom-width: 2px;
}
.doc-kbd-separator {
  margin-inline: 1px;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
}
.doc-copy {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  background-color: var(--color-gray-100);
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 0.5);
  vertical-align: baseline;
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
}
.doc-copy-text {
  background-color: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-800);
  &:where(.dark, .dark *) {
    color: var(--color-gray-200);
  }
}
.doc-copy-btn {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  border-radius: 0.25rem;
  padding: calc(var(--spacing) * 0.5);
  color: var(--color-gray-400);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      color: var(--color-gray-700);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-300);
      }
    }
  }
}
.doc-copy-btn.copied {
  color: var(--color-green-500);
  &:where(.dark, .dark *) {
    color: var(--color-green-400);
  }
}
.contact-wrapper {
  display: grid;
  gap: calc(var(--spacing) * 12);
  @media (width >= 64rem) {
    gap: calc(var(--spacing) * 16);
  }
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .contact-wrapper {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }
}
.contact-intro {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.intro-content h2 {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  @media (width >= 40rem) {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
  margin-bottom: calc(var(--spacing) * 4);
  --tw-border-style: none !important;
  border-style: none !important;
  padding-bottom: calc(var(--spacing) * 0) !important;
}
.intro-content p {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}
.info-card {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 4);
  background-color: var(--color-gray-50);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
    }
  }
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
    }
  }
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.info-card:hover {
  border-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
  }
  &:where(.dark, .dark *) {
    border-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
    }
  }
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  border-radius: var(--radius-lg);
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }
  color: var(--color-primary);
  &:where(.dark, .dark *) {
    color: var(--color-primary-dark);
  }
}
.info-icon svg {
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
}
.info-text {
  display: flex;
  flex-direction: column;
}
.info-label {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.info-value {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.contact-form-container {
  position: relative;
}
.contact-form {
  position: relative;
  padding: calc(var(--spacing) * 6);
  @media (width >= 40rem) {
    padding: calc(var(--spacing) * 8);
  }
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-900);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
    }
  }
  border-radius: var(--radius-2xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
    }
  }
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-900) 5%, transparent) var(--tw-shadow-alpha), transparent);
  }
  &:where(.dark, .dark *) {
    --tw-shadow-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  backdrop-filter: blur(20px);
}
.contact-form::before {
  content: '';
  position: absolute;
  inset-inline: calc(var(--spacing) * 0);
  top: calc(var(--spacing) * 0);
  height: calc(var(--spacing) * 1);
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  background: linear-gradient(90deg, var(--helios-color-primary), var(--helios-color-accent, var(--helios-color-primary)));
}
.contact-form .form-field {
  margin-bottom: calc(var(--spacing) * 6);
}
.contact-form .form-field:last-of-type {
  margin-bottom: calc(var(--spacing) * 8);
}
.contact-form .form-label {
  margin-bottom: calc(var(--spacing) * 2);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-300);
  }
}
.contact-form .form-label.required::after {
  content: ' *';
  color: var(--color-red-500);
  &:where(.dark, .dark *) {
    color: var(--color-red-400);
  }
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="url"], .contact-form select, .contact-form textarea {
  width: 100%;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--color-gray-50);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  border-radius: var(--radius-xl);
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
  &::placeholder {
    color: var(--color-gray-400);
  }
  &:where(.dark, .dark *) {
    &::placeholder {
      color: var(--color-gray-500);
    }
  }
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form input[type="tel"]:focus, .contact-form input[type="url"]:focus, .contact-form select:focus, .contact-form textarea:focus {
  --tw-outline-style: none;
  outline-style: none;
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800) 80%, transparent);
    }
  }
  border-color: var(--color-primary);
  &:where(.dark, .dark *) {
    border-color: var(--color-primary);
  }
  box-shadow: 0 0 0 3px rgba(var(--tw-ring-color), 0.1), 0 0 20px -5px rgba(var(--tw-ring-color), 0.15);
  --tw-ring-color: var(--helios-color-primary);
}
.contact-form input[type="text"]:hover:not(:focus), .contact-form input[type="email"]:hover:not(:focus), .contact-form input[type="tel"]:hover:not(:focus), .contact-form input[type="url"]:hover:not(:focus), .contact-form select:hover:not(:focus), .contact-form textarea:hover:not(:focus) {
  border-color: var(--color-gray-300);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-600);
  }
}
.contact-form select {
  cursor: pointer;
  appearance: none;
  padding-right: calc(var(--spacing) * 10);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
}
.dark .contact-form select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form .form-field.checkboxes {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}
.contact-form input[type="checkbox"] {
  margin-top: calc(var(--spacing) * 0.5);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-gray-300);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-600);
  }
  background-color: var(--color-gray-50);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  color: var(--color-primary);
  cursor: pointer;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.contact-form input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.contact-form input[type="checkbox"]:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
  }
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-outline-style: none;
  outline-style: none;
}
.contact-form .checkboxes label {
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.contact-form .buttons {
  margin-top: calc(var(--spacing) * 8);
}
.contact-form .submit-btn, .contact-form button[type="submit"] {
  width: 100%;
  @media (width >= 40rem) {
    width: auto;
  }
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 3.5);
  background-color: var(--color-primary);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary-hover);
    }
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-primary-dark);
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary-dark-hover);
      }
    }
  }
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 0px;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 25%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.contact-form .submit-btn:hover, .contact-form button[type="submit"]:hover {
  --tw-translate-y: calc(var(--spacing) * -0.5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 30%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.contact-form .submit-btn:active, .contact-form button[type="submit"]:active {
  --tw-translate-y: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.contact-form .submit-btn:focus, .contact-form button[type="submit"]:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-offset-color: var(--color-white);
  --tw-outline-style: none;
  outline-style: none;
  &:where(.dark, .dark *) {
    --tw-ring-offset-color: var(--color-gray-900);
  }
}
.notices {
  margin-bottom: calc(var(--spacing) * 6);
  border-radius: var(--radius-xl);
  padding: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.notices.success.green, .notices.green {
  background-color: var(--color-green-50);
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
    }
  }
  color: var(--color-green-800);
  &:where(.dark, .dark *) {
    color: var(--color-green-300);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-200);
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, oklch(52.7% 0.154 150.069) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-green-700) 50%, transparent);
    }
  }
}
.notices.success.green p, .notices.green p {
  margin: calc(var(--spacing) * 0);
}
.notices.error.red, .notices.red {
  background-color: var(--color-red-50);
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
    }
  }
  color: var(--color-red-800);
  &:where(.dark, .dark *) {
    color: var(--color-red-300);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-200);
  &:where(.dark, .dark *) {
    border-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-700) 50%, transparent);
    }
  }
}
.notices.error.red p, .notices.red p {
  margin: calc(var(--spacing) * 0);
}
.contact-form .form-field.has-error input, .contact-form .form-field.has-error select, .contact-form .form-field.has-error textarea {
  border-color: var(--color-red-500);
  &:where(.dark, .dark *) {
    border-color: var(--color-red-400);
  }
}
.contact-form .form-field .text-danger, .contact-form .form-field .error {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-red-600);
  &:where(.dark, .dark *) {
    color: var(--color-red-400);
  }
}
.contact-form .submit-btn.loading, .contact-form button[type="submit"].loading {
  pointer-events: none;
  opacity: 75%;
}
.contact-form .submit-btn.loading::after, .contact-form button[type="submit"].loading::after {
  content: '';
  margin-left: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: color-mix(in srgb, #fff 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
  }
  border-top-color: var(--color-white);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.contact-form .input-group {
  position: relative;
}
.contact-form .input-group .input-icon {
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing) * 4);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  color: var(--color-gray-400);
  &:where(.dark, .dark *) {
    color: var(--color-gray-500);
  }
  pointer-events: none;
}
.contact-form .input-group input {
  padding-left: calc(var(--spacing) * 12);
}
.contact-form .form-field[data-grav-field="honeypot"] {
  position: absolute;
  left: calc(9999px * -1);
  height: calc(var(--spacing) * 0);
  overflow: hidden;
  opacity: 0%;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.contact-form {
  animation: fadeInUp 0.5s ease-out;
}
.contact-form .form-field {
  animation: fadeInUp 0.4s ease-out;
  animation-fill-mode: both;
}
.contact-form .form-field:nth-child(1) {
  animation-delay: 0.1s;
}
.contact-form .form-field:nth-child(2) {
  animation-delay: 0.15s;
}
.contact-form .form-field:nth-child(3) {
  animation-delay: 0.2s;
}
.contact-form .form-field:nth-child(4) {
  animation-delay: 0.25s;
}
.contact-form .form-field:nth-child(5) {
  animation-delay: 0.3s;
}
.contact-form .buttons {
  animation: fadeInUp 0.4s ease-out 0.35s both;
}
@media (max-width: 640px) {
  .contact-form {
    padding: calc(var(--spacing) * 5);
  }
  .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="url"], .contact-form select, .contact-form textarea {
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .contact-form .submit-btn, .contact-form button[type="submit"] {
    width: 100%;
    padding-block: calc(var(--spacing) * 4);
  }
}
.langswitcher-dropdown {
  position: relative;
}
.langswitcher-trigger {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-600);
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-100);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
      }
    }
  }
  cursor: pointer;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.langswitcher-trigger--open {
  background-color: var(--color-gray-100);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
}
.langswitcher-current {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
}
.langswitcher-menu {
  position: absolute;
  top: 100%;
  right: calc(var(--spacing) * 0);
  margin-top: calc(var(--spacing) * 2);
  min-width: 180px;
  padding-block: calc(var(--spacing) * 1);
  background-color: var(--color-white);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-800);
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200);
  &:where(.dark, .dark *) {
    border-color: var(--color-gray-700);
  }
  border-radius: var(--radius-xl);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  z-index: 50;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.langswitcher-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  text-decoration-line: none;
  color: var(--color-gray-700);
  &:where(.dark, .dark *) {
    color: var(--color-gray-300);
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
  &:where(.dark, .dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
        }
      }
    }
  }
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.langswitcher-item--active {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-primary-dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary-dark) 10%, transparent);
    }
  }
  color: var(--color-gray-900);
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.langswitcher-item-code {
  display: inline-flex;
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 7);
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-size: 10px;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
  &:where(.dark, .dark *) {
    background-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *) {
    color: var(--color-gray-400);
  }
}
.langswitcher-item--active .langswitcher-item-code {
  background-color: var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  }
  color: var(--color-primary);
  &:where(.dark, .dark *) {
    background-color: var(--color-primary-dark);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary-dark) 20%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-primary-dark);
  }
}
.langswitcher-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: var(--helios-font-body, Inter, sans-serif);
    --font-mono: var(--helios-font-code, JetBrainsMono, monospace);
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-orange-900: oklch(40.8% 0.123 38.172);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-gray-50: var(--color-helios-gray-50, var(--color-zinc-50));
    --color-gray-100: var(--color-helios-gray-100, var(--color-zinc-100));
    --color-gray-200: var(--color-helios-gray-200, var(--color-zinc-200));
    --color-gray-300: var(--color-helios-gray-300, var(--color-zinc-300));
    --color-gray-400: var(--color-helios-gray-400, var(--color-zinc-400));
    --color-gray-500: var(--color-helios-gray-500, var(--color-zinc-500));
    --color-gray-600: var(--color-helios-gray-600, var(--color-zinc-600));
    --color-gray-700: var(--color-helios-gray-700, var(--color-zinc-700));
    --color-gray-800: var(--color-helios-gray-800, var(--color-zinc-800));
    --color-gray-900: var(--color-helios-gray-900, var(--color-zinc-900));
    --color-gray-950: var(--color-helios-gray-950, var(--color-zinc-950));
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-zinc-600: oklch(44.2% 0.017 285.786);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-zinc-900: oklch(21% 0.006 285.885);
    --color-zinc-950: oklch(14.1% 0.005 285.823);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-primary: var(--helios-color-primary, #3B82F6);
    --color-primary-hover: var(--helios-color-primary-hover, #2563EB);
    --color-primary-text: var(--helios-color-primary-text, #ffffff);
    --color-primary-dark: var(--helios-color-primary-dark, #60A5FA);
    --color-primary-dark-hover: var(--helios-color-primary-dark-hover, #93C5FD);
    --color-primary-dark-text: var(--helios-color-primary-dark-text, #111827);
    --color-accent: var(--helios-color-accent, #8B5CF6);
    --color-accent-dark: var(--helios-color-accent-dark, #A78BFA);
    --spacing-sidebar: 280px;
    --spacing-toc: 240px;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-50 {
    z-index: 50;
  }
  .order-1 {
    order: 1;
  }
  .order-2 {
    order: 2;
  }
  .order-none {
    order: 0;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-lead);
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }
    :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-links);
      text-decoration: underline;
      font-weight: 500;
    }
    :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-bold);
      font-weight: 600;
    }
    :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: decimal;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: decimal;
    }
    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      list-style-type: disc;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
      font-weight: 400;
      color: var(--tw-prose-counters);
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
      color: var(--tw-prose-bullets);
    }
    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.25em;
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-color: var(--tw-prose-hr);
      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 500;
      font-style: italic;
      color: var(--tw-prose-quotes);
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--tw-prose-quote-borders);
      quotes: "\201C""\201D""\2018""\2019";
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }
    :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: open-quote;
    }
    :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: close-quote;
    }
    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 800;
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 900;
      color: inherit;
    }
    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 700;
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 800;
      color: inherit;
    }
    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }
    :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }
    :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      display: block;
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-weight: 500;
      font-family: inherit;
      color: var(--tw-prose-kbd);
      box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-code);
      font-weight: 600;
      font-size: 0.875em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: "`";
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: "`";
    }
    :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.875em;
    }
    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.9em;
    }
    :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: inherit;
    }
    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-pre-code);
      background-color: var(--tw-prose-pre-bg);
      overflow-x: auto;
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      background-color: transparent;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
      content: none;
    }
    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
      content: none;
    }
    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      width: 100%;
      table-layout: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: 0.875em;
      line-height: 1.7142857;
    }
    :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-th-borders);
    }
    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      vertical-align: bottom;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-td-borders);
    }
    :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-bottom-width: 0;
    }
    :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      vertical-align: baseline;
    }
    :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-top-width: 1px;
      border-top-color: var(--tw-prose-th-borders);
    }
    :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      vertical-align: top;
    }
    :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      text-align: start;
    }
    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      color: var(--tw-prose-captions);
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
    --tw-prose-body: oklch(37.3% 0.034 259.733);
    --tw-prose-headings: oklch(21% 0.034 264.665);
    --tw-prose-lead: oklch(44.6% 0.03 256.802);
    --tw-prose-links: oklch(21% 0.034 264.665);
    --tw-prose-bold: oklch(21% 0.034 264.665);
    --tw-prose-counters: oklch(55.1% 0.027 264.364);
    --tw-prose-bullets: oklch(87.2% 0.01 258.338);
    --tw-prose-hr: oklch(92.8% 0.006 264.531);
    --tw-prose-quotes: oklch(21% 0.034 264.665);
    --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-captions: oklch(55.1% 0.027 264.364);
    --tw-prose-kbd: oklch(21% 0.034 264.665);
    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
    --tw-prose-code: oklch(21% 0.034 264.665);
    --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
    --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
    --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
    --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
    --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
    font-size: 1rem;
    line-height: 1.75;
    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }
    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .prose-lg {
    font-size: 1.125rem;
    line-height: 1.7777778;
    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.2222222em;
      line-height: 1.4545455;
      margin-top: 1.0909091em;
      margin-bottom: 1.0909091em;
    }
    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.6666667em;
      margin-bottom: 1.6666667em;
      padding-inline-start: 1em;
    }
    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 2.6666667em;
      margin-top: 0;
      margin-bottom: 0.8333333em;
      line-height: 1;
    }
    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.6666667em;
      margin-top: 1.8666667em;
      margin-bottom: 1.0666667em;
      line-height: 1.3333333;
    }
    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 1.3333333em;
      margin-top: 1.6666667em;
      margin-bottom: 0.6666667em;
      line-height: 1.5;
    }
    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 0.4444444em;
      line-height: 1.5555556;
    }
    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      border-radius: 0.3125rem;
      padding-top: 0.2222222em;
      padding-inline-end: 0.4444444em;
      padding-bottom: 0.2222222em;
      padding-inline-start: 0.4444444em;
    }
    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
    }
    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8666667em;
    }
    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.875em;
    }
    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.75;
      margin-top: 2em;
      margin-bottom: 2em;
      border-radius: 0.375rem;
      padding-top: 1em;
      padding-inline-end: 1.5em;
      padding-bottom: 1em;
      padding-inline-start: 1.5em;
    }
    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.5555556em;
    }
    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.5555556em;
    }
    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.6666667em;
      margin-bottom: 0.6666667em;
    }
    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.4444444em;
    }
    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0.4444444em;
    }
    :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }
    :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.3333333em;
    }
    :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 1.3333333em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }
    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
    }
    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.3333333em;
    }
    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0.6666667em;
      padding-inline-start: 1.5555556em;
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 3.1111111em;
      margin-bottom: 3.1111111em;
    }
    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.5;
    }
    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0.75em;
      padding-bottom: 0.75em;
      padding-inline-start: 0.75em;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-top: 0.75em;
      padding-inline-end: 0.75em;
      padding-bottom: 0.75em;
      padding-inline-start: 0.75em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 1.7777778em;
      margin-bottom: 1.7777778em;
    }
    :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      font-size: 0.8888889em;
      line-height: 1.5;
      margin-top: 1em;
    }
    :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .\!mt-3 {
    margin-top: calc(var(--spacing) * 3) !important;
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .-mt-8 {
    margin-top: calc(var(--spacing) * -8);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .-ml-2 {
    margin-left: calc(var(--spacing) * -2);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-full {
    height: 100%;
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .max-h-\[calc\(100vh-5rem\)\] {
    max-height: calc(100vh - 5rem);
  }
  .min-h-\[60vh\] {
    min-height: 60vh;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-0\.5 {
    width: calc(var(--spacing) * 0.5);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-\[var\(--helios-sidebar-width\)\] {
    width: var(--helios-sidebar-width);
  }
  .w-\[var\(--helios-toc-width\)\] {
    width: var(--helios-toc-width);
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-\[calc\(var\(--helios-content-width\)-var\(--helios-toc-width\)-2rem\)\] {
    max-width: calc(var(--helios-content-width) - var(--helios-toc-width) - 2rem);
  }
  .max-w-\[var\(--helios-content-width\)\] {
    max-width: var(--helios-content-width);
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-none {
    max-width: none;
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-7 {
    --tw-translate-x: calc(var(--spacing) * 7);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-14 {
    --tw-translate-x: calc(var(--spacing) * 14);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .list-none {
    list-style-type: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .space-y-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-gray-200 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-gray-200);
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-clip {
    overflow-x: clip;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .bg-primary {
    background-color: var(--color-primary);
  }
  .bg-primary\/10 {
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }
  .bg-primary\/15 {
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
    }
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/50 {
    background-color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }
  .text-center {
    text-align: center;
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .\!text-white {
    color: var(--color-white) !important;
  }
  .text-amber-500 {
    color: var(--color-amber-500);
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-primary {
    color: var(--color-primary);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-primary\/25 {
    --tw-shadow-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 25%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .ring-black\/5 {
    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .prose {
    --tw-prose-body: inherit;
    --tw-prose-headings: inherit;
    --tw-prose-invert-body: inherit;
    --tw-prose-invert-headings: inherit;
    --tw-prose-bold: inherit;
    --tw-prose-pre-code: var(--color-gray-200);
    --tw-prose-pre-bg: var(--color-gray-900);
    --tw-prose-code: var(--color-accent);
  }
  .group-hover\:text-primary {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .hover\:-translate-y-0\.5 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:border-primary {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  .hover\:bg-gray-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:text-gray-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }
  .hover\:text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .hover\:\!no-underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: none !important;
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-primary\/30 {
    &:hover {
      @media (hover: hover) {
        --tw-shadow-color: var(--color-primary);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 30%, transparent) var(--tw-shadow-alpha), transparent);
        }
      }
    }
  }
  .focus\:not-sr-only {
    &:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }
  .focus\:absolute {
    &:focus {
      position: absolute;
    }
  }
  .focus\:top-4 {
    &:focus {
      top: calc(var(--spacing) * 4);
    }
  }
  .focus\:left-4 {
    &:focus {
      left: calc(var(--spacing) * 4);
    }
  }
  .focus\:z-50 {
    &:focus {
      z-index: 50;
    }
  }
  .focus\:rounded-lg {
    &:focus {
      border-radius: var(--radius-lg);
    }
  }
  .focus\:bg-primary {
    &:focus {
      background-color: var(--color-primary);
    }
  }
  .focus\:px-4 {
    &:focus {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .focus\:py-2 {
    &:focus {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .focus\:text-white {
    &:focus {
      color: var(--color-white);
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:py-16 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .sm\:pr-6 {
    @media (width >= 40rem) {
      padding-right: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-4xl {
    @media (width >= 40rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .lg\:fixed {
    @media (width >= 64rem) {
      position: fixed;
    }
  }
  .lg\:inset-y-0 {
    @media (width >= 64rem) {
      inset-block: calc(var(--spacing) * 0);
    }
  }
  .lg\:z-30 {
    @media (width >= 64rem) {
      z-index: 30;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:flex-col {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:pr-8 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 8);
    }
  }
  .lg\:pl-\[var\(--helios-sidebar-width\)\] {
    @media (width >= 64rem) {
      padding-left: var(--helios-sidebar-width);
    }
  }
  .dark\:block {
    &:where(.dark, .dark *) {
      display: block;
    }
  }
  .dark\:hidden {
    &:where(.dark, .dark *) {
      display: none;
    }
  }
  .dark\:divide-gray-800 {
    &:where(.dark, .dark *) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-gray-800);
      }
    }
  }
  .dark\:border-gray-600 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-600);
    }
  }
  .dark\:border-gray-700 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-700);
    }
  }
  .dark\:border-gray-800 {
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-800);
    }
  }
  .dark\:bg-amber-900\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-gray-700 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-700);
    }
  }
  .dark\:bg-gray-700\/50 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-700);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
      }
    }
  }
  .dark\:bg-gray-800 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-800);
    }
  }
  .dark\:bg-gray-900 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
    }
  }
  .dark\:bg-gray-900\/50 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-gray-950\/93 {
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-gray-950) 93%, transparent);
      }
    }
  }
  .dark\:bg-green-900\/30 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
      }
    }
  }
  .dark\:bg-green-900\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-green-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-primary-dark {
    &:where(.dark, .dark *) {
      background-color: var(--color-primary-dark);
    }
  }
  .dark\:bg-primary\/15 {
    &:where(.dark, .dark *) {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
      }
    }
  }
  .dark\:bg-red-900\/50 {
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
      }
    }
  }
  .dark\:text-amber-300 {
    &:where(.dark, .dark *) {
      color: var(--color-amber-300);
    }
  }
  .dark\:text-gray-100 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-100);
    }
  }
  .dark\:text-gray-300 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-300);
    }
  }
  .dark\:text-gray-400 {
    &:where(.dark, .dark *) {
      color: var(--color-gray-400);
    }
  }
  .dark\:text-green-300 {
    &:where(.dark, .dark *) {
      color: var(--color-green-300);
    }
  }
  .dark\:text-green-400 {
    &:where(.dark, .dark *) {
      color: var(--color-green-400);
    }
  }
  .dark\:text-primary-dark {
    &:where(.dark, .dark *) {
      color: var(--color-primary-dark);
    }
  }
  .dark\:text-red-300 {
    &:where(.dark, .dark *) {
      color: var(--color-red-300);
    }
  }
  .dark\:text-white {
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .dark\:ring-white\/10 {
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .dark\:prose-invert {
    &:where(.dark, .dark *) {
      --tw-prose-body: var(--tw-prose-invert-body);
      --tw-prose-headings: var(--tw-prose-invert-headings);
      --tw-prose-lead: var(--tw-prose-invert-lead);
      --tw-prose-links: var(--tw-prose-invert-links);
      --tw-prose-bold: var(--tw-prose-invert-bold);
      --tw-prose-counters: var(--tw-prose-invert-counters);
      --tw-prose-bullets: var(--tw-prose-invert-bullets);
      --tw-prose-hr: var(--tw-prose-invert-hr);
      --tw-prose-quotes: var(--tw-prose-invert-quotes);
      --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
      --tw-prose-captions: var(--tw-prose-invert-captions);
      --tw-prose-kbd: var(--tw-prose-invert-kbd);
      --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
      --tw-prose-code: var(--tw-prose-invert-code);
      --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
      --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
      --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
      --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
    }
  }
  .dark\:hover\:border-primary {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: var(--color-primary);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-700 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-700);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-800 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-800\/50 {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
          }
        }
      }
    }
  }
  .dark\:hover\:text-white {
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
}
[x-cloak] {
  display: none !important;
}
.error-code-gradient {
  font-size: clamp(10rem, 30vw, 16rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--helios-color-primary) 0%, var(--helios-color-accent) 50%, var(--helios-color-primary) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease-in-out infinite;
  user-select: none;
}
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@layer base {
  input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
    appearance: none;
    background-color: #fff;
    border-color: var(--color-helios-gray-500, var(--color-zinc-500));
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: oklch(54.6% 0.245 262.881);
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      border-color: oklch(54.6% 0.245 262.881);
    }
  }
  input::placeholder,textarea::placeholder {
    color: var(--color-helios-gray-500, var(--color-zinc-500));
    opacity: 1;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-date-and-time-value {
    min-height: 1.5em;
  }
  ::-webkit-date-and-time-value {
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
  }
  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    print-color-adjust: exact;
  }
  select:where([multiple]),select:where([size]:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    print-color-adjust: unset;
  }
  input:where([type='checkbox']),input:where([type='radio']) {
    appearance: none;
    padding: 0;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: oklch(54.6% 0.245 262.881);
    background-color: #fff;
    border-color: var(--color-helios-gray-500, var(--color-zinc-500));
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
  }
  input:where([type='checkbox']) {
    border-radius: 0px;
  }
  input:where([type='radio']) {
    border-radius: 100%;
  }
  input:where([type='checkbox']):focus,input:where([type='radio']):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: oklch(54.6% 0.245 262.881);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  input:where([type='checkbox']):checked,input:where([type='radio']):checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  input:where([type='checkbox']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='radio']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  input:where([type='checkbox']):indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  input:where([type='file']) {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
  }
  input:where([type='file']):focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-space-y-reverse: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-ease: initial;
      --tw-leading: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-divide-y-reverse: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}
/* YetiSearch Pro Theme Variables
   Shared color palette using Tailwind zinc scale
   Override these variables in your custom CSS for theming
*/

:root {
  /* ═══════════════════════════════════════════════════════════════
     LIGHT MODE (default)
     Using Tailwind zinc scale for neutral grays
     ═══════════════════════════════════════════════════════════════ */

  /* Core palette - Tailwind zinc */
  --ys-zinc-50: #fafafa;
  --ys-zinc-100: #f4f4f5;
  --ys-zinc-200: #e4e4e7;
  --ys-zinc-300: #d4d4d8;
  --ys-zinc-400: #a1a1aa;
  --ys-zinc-500: #71717a;
  --ys-zinc-600: #52525b;
  --ys-zinc-700: #3f3f46;
  --ys-zinc-800: #27272a;
  --ys-zinc-900: #18181b;
  --ys-zinc-950: #09090b;

  /* Accent color */
  --ys-accent: #3b82f6;
  --ys-accent-hover: #2563eb;
  --ys-accent-subtle: rgba(59, 130, 246, 0.1);
  --ys-accent-ring: rgba(59, 130, 246, 0.25);

  /* Semantic colors - Light mode */
  --ys-overlay-bg: rgba(0, 0, 0, 0.5);
  --ys-overlay-blur: blur(4px);

  --ys-dialog-bg: var(--ys-zinc-50);
  --ys-dialog-border: var(--ys-zinc-200);
  --ys-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  --ys-panel-bg: #ffffff;
  --ys-panel-alt: var(--ys-zinc-100);

  --ys-text: var(--ys-zinc-900);
  --ys-text-secondary: var(--ys-zinc-600);
  --ys-text-muted: var(--ys-zinc-400);

  --ys-border: var(--ys-zinc-200);
  --ys-border-subtle: var(--ys-zinc-100);

  --ys-input-bg: transparent;
  --ys-input-text: var(--ys-zinc-900);
  --ys-input-placeholder: var(--ys-zinc-400);

  --ys-result-hover: var(--ys-zinc-100);
  --ys-result-selected-bg: var(--ys-accent-subtle);
  --ys-result-selected-ring: var(--ys-accent-ring);

  --ys-highlight-bg: #fef08a;
  --ys-highlight-text: inherit;

  --ys-kbd-bg: var(--ys-zinc-100);
  --ys-kbd-text: var(--ys-zinc-600);

  --ys-scrollbar-track: transparent;
  --ys-scrollbar-thumb: rgba(161, 161, 170, 0.3);
  --ys-scrollbar-thumb-hover: rgba(161, 161, 170, 0.5);

  /* Segment/toggle controls */
  --ys-segment-bg: transparent;
  --ys-segment-active-bg: var(--ys-zinc-800);
  --ys-segment-active-text: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   Triggered by data-theme="dark", class="dark", or data-ys-theme="dark"
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"],
.dark,
[data-ys-theme="dark"] {
  --ys-overlay-bg: rgba(0, 0, 0, 0.7);

  --ys-dialog-bg: var(--ys-zinc-900);
  --ys-dialog-border: var(--ys-zinc-700);

  --ys-panel-bg: var(--ys-zinc-900);
  --ys-panel-alt: var(--ys-zinc-800);

  --ys-text: var(--ys-zinc-100);
  --ys-text-secondary: var(--ys-zinc-400);
  --ys-text-muted: var(--ys-zinc-500);

  --ys-border: var(--ys-zinc-700);
  --ys-border-subtle: var(--ys-zinc-800);

  --ys-input-text: var(--ys-zinc-100);
  --ys-input-placeholder: var(--ys-zinc-500);

  --ys-result-hover: rgba(63, 63, 70, 0.5);
  --ys-result-selected-bg: rgba(59, 130, 246, 0.15);

  --ys-highlight-bg: rgba(234, 179, 8, 0.35);
  --ys-highlight-text: var(--ys-zinc-100);

  --ys-kbd-bg: var(--ys-zinc-800);
  --ys-kbd-text: var(--ys-zinc-400);

  --ys-scrollbar-thumb: rgba(82, 82, 91, 0.5);
  --ys-scrollbar-thumb-hover: rgba(82, 82, 91, 0.7);

  --ys-segment-active-bg: rgba(255, 255, 255, 0.12);
}
/* ==========================================================================
   KahunaCart brand layer
   --------------------------------------------------------------------------
   Loaded after Helios's compiled Tailwind bundle (build/css/site.css), so on
   equal specificity these rules win.

   Light-only by decision (2026-08-20). Palette taken from the logo SVG fills.

   Nothing here uses Tailwind utilities: Helios compiles Tailwind from its own
   source list, which does not scan this child theme, so any new utility class
   written in these templates would never make it into the bundle. Every style
   below is plain CSS on `kc-` prefixed classes.

   Classes are `kc-`. Custom properties are `--ks-`, and the two prefixes do
   not match on purpose: KahunaCart's own storefront stylesheet
   (plugin://kahunacart/assets/kahunacart.css) declares a `--kc-*` set on
   :root, and it loads after this file on every /shop route. When both used
   `--kc-`, its `--kc-card` and `--kc-mono` overwrote ours store-wide — cards
   went transparent and the mono face fell back to ui-monospace. Never
   introduce a `--kc-*` property here; the storefront owns that name.
   ========================================================================== */

:root {
    /* Brand palette */
    --ks-salt: #FCF6EA;         /* page ground */
    --ks-sand: #F6EAD7;         /* panels, surfaces */
    --ks-sand-soft: #F9F1E1;    /* half a step off Sand, for large tinted areas */
    --ks-sand-deep: #EFDFC4;
    --ks-koa: #2B1C0C;          /* text ink */
    --ks-koa-soft: #5C4A38;     /* secondary text */
    --ks-lagoon: #1A6F83;       /* brand primary, links */
    --ks-lagoon-deep: #14555F;
    --ks-lagoon-mist: #DDEAE8;
    --ks-board: #BC4C11;        /* action color: buttons and big display numbers only; cream text on it reads 4.7:1 */
    --ks-board-deep: #AC4610;
    --ks-amber: #9A6B00;        /* "partial" in the comparison matrix */
    --ks-line: #E4D5BC;
    --ks-card: #FFFCF4;

    /* Type */
    --ks-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif;
    --ks-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
    --ks-mono: "Spline Sans Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Logo art */
    --ks-bus: url("/user/themes/kahuna-site/images/logo.svg");
    --ks-bus-noshadow: url("/user/themes/kahuna-site/images/logo-noshadow.svg");

    /* Chrome metrics */
    --ks-nav-h: 76px;
    --ks-docs-gap: 40px;        /* breathing room above/below the docs columns */

    /* Re-point Helios's own font variables at the brand faces so inherited
       documentation pages pick them up without touching the parent theme. */
    --helios-font-body: var(--ks-body);
    --helios-font-code: var(--ks-mono);
}

/* --------------------------------------------------------------------------
   Global ground
   -------------------------------------------------------------------------- */

.kc-body {
    margin: 0;
    background: var(--ks-salt);
    color: var(--ks-koa);
    font-family: var(--ks-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

/* Content links are Lagoon. `:where()` keeps this at element specificity so any
   component class below (buttons, nav items, footer links) wins without a fight. */
:where(.kc-body) a { color: var(--ks-lagoon); }
.kc-body a:focus-visible,
.kc-body button:focus-visible,
.kc-body summary:focus-visible {
    outline: 3px solid var(--ks-lagoon);
    outline-offset: 2px;
}

.kc-body h1,
.kc-body h2,
.kc-body h3,
.kc-body h4 {
    font-family: var(--ks-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.kc-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.kc-mono { font-family: var(--ks-mono); }

.kc-h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.06;
    margin: 0 0 14px;
}

.kc-kicker {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 12px;
}

.kc-intro {
    color: var(--ks-koa-soft);
    font-size: 17px;
    max-width: 62ch;
    margin: 0 0 40px;
}

.kc-intro.kc-intro-tight { margin-bottom: 8px; }
.kc-intro.kc-intro-flush { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.kc-btn {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: 11px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.kc-btn:hover { background: var(--ks-board-deep); color: #FFF6EA; transform: translateY(-1px); }
.kc-btn-small { padding: 9px 18px; font-size: 14px; border-radius: 9px; }
.kc-btn-large { font-size: 16px; padding: 15px 30px; }
.kc-btn-ghost {
    background: transparent;
    color: var(--ks-koa);
    border: 1.5px solid var(--ks-koa);
}
.kc-btn-ghost:hover { background: var(--ks-sand); color: var(--ks-koa); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Early access ribbon
   -------------------------------------------------------------------------- */

.kc-ribbon {
    background: var(--ks-lagoon-deep);
    color: #F6EAD7;
    font-size: 13.5px;
    text-align: center;
    padding: 9px 16px;
}
.kc-ribbon b { color: #FFD9A8; font-weight: 700; }
.kc-ribbon a { color: #F6EAD7; font-weight: 600; }

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.kc-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(252, 246, 234, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ks-line);
}
.kc-nav-in {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--ks-nav-h);
}
.kc-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    text-decoration: none;
    color: var(--ks-koa);
}
.kc-brand i {
    width: 60px;
    height: 60px;
    background: var(--ks-bus) center / contain no-repeat;
    display: block;
    flex: none;
}
.kc-brand b {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.015em;
}
.kc-brand b em { font-style: normal; color: var(--ks-board); }

.kc-nav-item {
    color: var(--ks-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}
.kc-nav-item:hover { color: var(--ks-lagoon); }

/* A nav item with a menu under it. Hover or keyboard focus opens the menu; the
   padded bridge under the item keeps it open while the pointer travels down. */
.kc-nav-drop { position: relative; }
/* One more item on the row must not fold the CTA onto two lines. */
.kc-nav-in > .kc-btn { white-space: nowrap; }
.kc-nav-drop > .kc-nav-item { display: inline-flex; align-items: center; gap: 4px; }
.kc-nav-drop > .kc-nav-item svg { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.15s; }
.kc-nav-drop:hover > .kc-nav-item svg,
.kc-nav-drop:focus-within > .kc-nav-item svg { transform: rotate(180deg); }
.kc-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -12px;
    padding-top: 10px;
    z-index: 30;
    filter: drop-shadow(0 12px 24px rgba(43, 28, 12, 0.14));
}
.kc-nav-menu a {
    display: block;
    min-width: 190px;
    padding: 9px 14px;
    color: var(--ks-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--ks-card);
    border-left: 1px solid var(--ks-line);
    border-right: 1px solid var(--ks-line);
}
.kc-nav-menu a:first-child { border-top: 1px solid var(--ks-line); border-radius: 12px 12px 0 0; padding-top: 12px; }
.kc-nav-menu a:last-child { border-bottom: 1px solid var(--ks-line); border-radius: 0 0 12px 12px; padding-bottom: 12px; }
.kc-nav-menu a:hover, .kc-nav-menu a:focus-visible { color: var(--ks-lagoon); background: var(--ks-sand-soft); }
.kc-nav-drop:hover .kc-nav-menu,
.kc-nav-drop:focus-within .kc-nav-menu { display: block; }

.kc-nav-burger {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    margin-left: -8px;
    color: var(--ks-koa);
    cursor: pointer;
}
.kc-nav-burger svg { width: 24px; height: 24px; display: block; }

/* --------------------------------------------------------------------------
   Narrow-screen menu
   --------------------------------------------------------------------------
   Below 1024px the inline links leave the bar and a round menu button joins
   the search, cart and account controls at its right end. It drops a sheet
   from under the bar: every top-level item as a big row in the display face,
   the dropdown parents as accordions whose first row is the parent's own page.
   Markup in partials/kc/site-header.html.twig, behaviour in js/site-menu.js.

   The switch sits at 1023px, where the docs sidebar toggle joins the bar, so
   every page's bar changes at the same width and nothing moves between docs
   and the rest. The search icon and the storefront's cart and account
   controls share the row — see the header section of css/kahuna-shop.css,
   which tightens the gap and drops the cart's label to buy the inline links
   more runway before this breakpoint has to take over.
   -------------------------------------------------------------------------- */

/* Same round control as the search icon beside it; dark once open, with the
   three bars folded into an X. */
.kc-menu-toggle {
    display: none;
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    color: var(--ks-koa);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.kc-menu-toggle:hover { background: var(--ks-sand); border-color: #D6C3A4; }
.kc-menu-toggle[aria-expanded="true"] { background: var(--ks-koa); border-color: var(--ks-koa); color: var(--ks-salt); }
.kc-menu-toggle span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 140ms ease;
}
.kc-menu-toggle span:nth-child(1) { transform: translateY(-5px); }
.kc-menu-toggle span:nth-child(3) { transform: translateY(5px); }
.kc-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.kc-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.kc-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* The page behind the open sheet. Under the bar (z-index 50), so the bar's
   controls stay live and undimmed. */
.kc-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(43, 28, 12, 0.36);
}

/* The sheet hangs from the bar's bottom border and scrolls inside whatever
   viewport is left under it (--ks-menu-top is set on open). The clip-path
   end state reaches below the box so the shadow is not cut off. */
.kc-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 1px);
    max-height: calc(100vh - var(--ks-menu-top, 64px));
    max-height: calc(100dvh - var(--ks-menu-top, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ks-salt);
    border-bottom: 1px solid var(--ks-line);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 28px 48px -28px rgba(43, 28, 12, 0.45);
    clip-path: inset(0 0 -80px 0);
}
.kc-menu > .kc-wrap { padding-top: 6px; padding-bottom: 18px; }

.kc-menu-slide {
    transition: clip-path 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 200ms ease;
}
.kc-menu-off { clip-path: inset(0 0 100% 0); transform: translateY(-8px); opacity: 0; }
.kc-menu-fade { transition: opacity 220ms ease; }
.kc-menu-backdrop-off { opacity: 0; }

.kc-menu-list,
.kc-menu-sub ul { list-style: none; margin: 0; padding: 0; }
.kc-menu-list > li + li { border-top: 1px solid var(--ks-line); }

/* One row per top-level item, a link or (for a group) the button that opens it. */
.kc-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 0 2px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--ks-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ks-koa);
    text-decoration: none;
}
.kc-menu-row:hover { color: var(--ks-lagoon); }
/* The page being read, and the section it is in: a Board dot after the label. */
.kc-menu-row:is([aria-current], .kc-menu-here) > span { display: inline-flex; align-items: center; gap: 10px; }
.kc-menu-row:is([aria-current], .kc-menu-here) > span::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ks-board);
}

.kc-menu-chevron,
.kc-menu-out {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 999px;
    color: var(--ks-koa-soft);
    background: var(--ks-sand);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms ease;
}
.kc-menu-out { background: none; padding: 8px; }
.kc-menu-row:hover .kc-menu-chevron { background: var(--ks-sand-deep); }
.kc-open > .kc-menu-row .kc-menu-chevron { transform: rotate(180deg); }

/* A group opens in place: the grid row grows from 0fr to its content, and
   the closed list is hidden from keyboard and screen reader once it has
   finished closing. */
.kc-menu-sub {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 240ms;
}
.kc-open > .kc-menu-sub {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.kc-menu-sub > ul {
    min-height: 0;
    overflow: hidden;
    margin-left: 4px;
}
.kc-menu-sub li:last-child { padding-bottom: 12px; }
.kc-menu-sub a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px 0 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    text-decoration: none;
    border-left: 2px solid var(--ks-line);
    border-radius: 0 10px 10px 0;
}
.kc-menu-sub a:hover { color: var(--ks-lagoon); background: var(--ks-sand-soft); }
/* The rows' left rules make one line down the group; the page being read
   takes a Board stretch of it. */
.kc-menu-sub a[aria-current] { color: var(--ks-koa); border-left-color: var(--ks-board); }
/* The sheet scrolls, so a focus ring drawn outside a row would be clipped. */
.kc-body .kc-menu :focus-visible { outline-offset: -3px; border-radius: 10px; }

/* While open: the page underneath does not scroll, and the cookie consent
   plugin's floating button, which sits above everything, steps aside rather
   than cover the sheet's last row. Only <html> is locked: with <body> hidden
   too, the body becomes the sticky header's scroll container and the header
   scrolls away with the page. */
html.kc-menu-open { overflow: hidden; }
html.kc-menu-open .consent-root { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .kc-menu-slide { transition: opacity 120ms linear; }
    .kc-menu-off { clip-path: inset(0 0 -80px 0); transform: none; }
    .kc-menu-toggle span,
    .kc-menu-chevron,
    .kc-menu-sub,
    .kc-open > .kc-menu-sub { transition: none; }
}

@media (max-width: 1023px) {
    .kc-nav-item, .kc-nav-drop { display: none; }
    .kc-menu-toggle { display: inline-flex; }
}
/* Wide enough for the inline links: the sheet never shows, even for the frame
   before js/site-menu.js closes it on a resize. */
@media (min-width: 1024px) {
    .kc-menu,
    .kc-menu-backdrop { display: none !important; }
}
/* With the inline links showing, space them a little tighter than the rest of
   the bar and keep a clear run between the logo and the first link. Just
   above the breakpoint the brand also steps down a size. */
@media (min-width: 1024px) {
    .kc-nav-in { gap: 22px; }
    .kc-brand { padding-right: 32px; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
    .kc-nav-in { gap: 18px; }
    .kc-brand { padding-right: 20px; }
    .kc-brand i { width: 52px; height: 52px; }
    .kc-brand b { font-size: 23px; }
}
@media (max-width: 900px) {
    .kc-brand i { width: 46px; height: 46px; }
    .kc-brand b { font-size: 21px; }
    .kc-nav-in { height: 64px; gap: 14px; }
}

/* Docs pages keep Helios's mobile sidebar trigger inside the brand bar. */
.kc-nav-docs .kc-nav-burger { display: none; }
@media (max-width: 1023px) {
    .kc-nav-docs .kc-nav-burger { display: block; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.kc-hero { position: relative; overflow: hidden; padding: 72px 0 84px; }
.kc-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}
/* Pre-launch pill above the headline. The dot pulses so it reads as a live
   status rather than a label. */
.kc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 6px 14px 6px 11px;
    border: 1.5px solid var(--ks-board);
    border-radius: 999px;
    background: rgba(202, 84, 21, 0.08);
    color: var(--ks-board-deep);
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.kc-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ks-board);
    animation: kc-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes kc-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
    .kc-badge-dot { animation: none; }
}

.kc-hero h1 {
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.0;
    margin: 0 0 20px;
    max-width: 14ch;
}
.kc-hero h1 em { font-style: normal; color: var(--ks-lagoon); }
.kc-hero-sub { font-size: 18px; color: var(--ks-koa-soft); max-width: 46ch; margin: 0 0 30px; }
.kc-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.kc-ctas-center { justify-content: center; margin-top: 26px; }
.kc-trust {
    margin-top: 34px;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa-soft);
    letter-spacing: 0.03em;
}
.kc-trust b { color: var(--ks-koa); font-weight: 700; }
.kc-hero-art { position: relative; min-height: 340px; }

/* The bus on the beach. .kc-hero-3d is much bigger than the picture's own
   column so the dunes have somewhere to go, and a mask feathers every edge
   into the page: there is no frame to see. It is a fixed size because the
   stills in images/hero/ are pictures of exactly this box: the still is all
   most visits get, and when src/hero-3d runs, its canvas starts on the same
   frame, fades in over the still and then hides it. The box ignores the
   pointer itself, so the headline and buttons it reaches under stay
   clickable; the script listens on .kc-hero-art for the press and on the
   whole hero for the pointer. */
.kc-hero-grid > :first-child { position: relative; z-index: 1; }
.kc-hero-3d {
    position: absolute;
    left: calc(50% - 456px);
    top: calc(50% - 313px);
    width: 960px;
    height: 640px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 44% 64% at 58% 50%, #000 52%, transparent 100%), linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(ellipse 44% 64% at 58% 50%, #000 52%, transparent 100%), linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    mask-composite: intersect;
}
.kc-hero-poster,
.kc-hero-3d canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The fade is FADE_MS in src/hero-3d/main.js: the bus holds still for it. */
.kc-hero-3d canvas { opacity: 0; transition: opacity 400ms ease; }
.kc-hero-3d-on { cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kc-hero-3d-on canvas { opacity: 1; }
.kc-hero-3d-on .kc-hero-poster { visibility: hidden; transition: visibility 0s linear 400ms; }

@media (max-width: 880px) {
    .kc-hero-grid { grid-template-columns: 1fr; }
    .kc-hero-art { min-height: 300px; }
    .kc-hero-3d {
        left: calc(50% - 320px);
        top: calc(50% - 187px);
        width: 640px;
        height: 440px;
        -webkit-mask-image: radial-gradient(ellipse 50% 62% at 50% 50%, #000 56%, transparent 100%), linear-gradient(to bottom, transparent, #000 12%, #000 85%, transparent);
        mask-image: radial-gradient(ellipse 50% 62% at 50% 50%, #000 56%, transparent 100%), linear-gradient(to bottom, transparent, #000 12%, #000 85%, transparent);
    }
}

/* --------------------------------------------------------------------------
   Page hero (standalone pages such as /add-ons)
   -------------------------------------------------------------------------- */

.kc-page-hero { padding: 64px 0 28px; text-align: center; }
.kc-page-hero h1 {
    font-size: clamp(34px, 5.2vw, 54px);
    font-weight: 800;
    line-height: 1.04;
    margin: 0 0 16px;
}
.kc-page-hero h1 em { font-style: normal; color: var(--ks-lagoon); }
.kc-page-hero .kc-kicker { text-align: center; }
.kc-page-hero .kc-intro { margin: 0 auto; text-align: center; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .kc-hero h1,
    .kc-hero .kc-hero-sub,
    .kc-hero .kc-ctas,
    .kc-hero .kc-release-line,
    .kc-hero .kc-trust { animation: kc-rise 600ms ease both; }
    .kc-hero .kc-hero-sub { animation-delay: 80ms; }
    .kc-hero .kc-ctas { animation-delay: 160ms; }
    .kc-hero .kc-release-line { animation-delay: 200ms; }
    .kc-hero .kc-trust { animation-delay: 240ms; }

    @keyframes kc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    .kc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; }
    .kc-reveal.kc-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Stat band
   -------------------------------------------------------------------------- */

.kc-stats { background: var(--ks-lagoon-deep); color: #F6EAD7; }
.kc-stats-in {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 34px 0;
    text-align: center;
}
@media (max-width: 720px) { .kc-stats-in { grid-template-columns: repeat(2, 1fr); } }
.kc-stat .kc-num {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kc-stat .kc-lbl {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A8CBCB;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */

.kc-block { padding: 88px 0; }
.kc-block.kc-tight { padding-top: 64px; }

/* Anchor targets clear the sticky brand bar. */
.kc-body [id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   Plain content page (default template in the site shell)
   -------------------------------------------------------------------------- */

.kc-page .kc-wrap { max-width: 800px; }
.kc-page-head { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--ks-line); }
.kc-page-head h1 { font-size: clamp(32px, 4.6vw, 46px); font-weight: 800; line-height: 1.05; margin: 0 0 14px; }
.kc-page-head .kc-intro { margin-bottom: 0; }

.kc-prose { font-size: 16.5px; color: var(--ks-koa); }
.kc-prose h2 { font-size: 28px; font-weight: 800; margin: 40px 0 12px; }
.kc-prose h3 { font-size: 20px; font-weight: 700; margin: 30px 0 10px; }
.kc-prose p { margin: 0 0 18px; }
.kc-prose ul,
.kc-prose ol { margin: 0 0 18px; padding-left: 22px; }
.kc-prose li { margin-bottom: 8px; }
/* The reset strips list markers; plain lists in prose get theirs back (a list with a class of its own keeps whatever it sets). */
.kc-prose ul:not([class]) { list-style: disc; }
.kc-prose ol:not([class]) { list-style: decimal; }
.kc-prose ul:not([class]) ul:not([class]) { list-style: circle; }
.kc-prose li::marker { color: var(--ks-lagoon); }
.kc-prose code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 6px; padding: 2px 6px; }
.kc-prose pre { background: var(--ks-koa); color: #E8DECF; border-radius: 12px; padding: 18px 20px; overflow-x: auto; }
.kc-prose pre code { background: none; padding: 0; color: inherit; }
.kc-prose blockquote { border-left: 3px solid var(--ks-board); margin: 0 0 18px; padding-left: 18px; color: var(--ks-koa-soft); }
/* A wide markdown table inside prose scrolls in its own box rather than pushing
   the page sideways. `display: block` is what makes overflow apply to a table. */
.kc-prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 18px; }
.kc-prose th,
.kc-prose td { border-bottom: 1px solid var(--ks-line); padding: 10px 12px; text-align: left; }
.kc-prose img { max-width: 100%; height: auto; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Feature / audience cards
   -------------------------------------------------------------------------- */

.kc-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kc-feat-grid.kc-pushed { margin-top: 36px; }
@media (max-width: 960px) { .kc-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kc-feat-grid { grid-template-columns: 1fr; } }

.kc-feat {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.kc-feat:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); }
.kc-feat .kc-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ks-lagoon-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.kc-feat .kc-ic svg {
    width: 22px;
    height: 22px;
    stroke: var(--ks-lagoon-deep);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-feat h3 { font-size: 17.5px; font-weight: 700; margin: 0 0 8px; }
.kc-feat p { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Platform split
   -------------------------------------------------------------------------- */

.kc-platform {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}
.kc-plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .kc-plat-grid { grid-template-columns: 1fr; } }

.kc-plat-points { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.kc-ppoint { display: flex; gap: 14px; }
.kc-ppoint .kc-dot {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ks-lagoon);
    color: #F6EAD7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kc-ppoint .kc-dot svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-ppoint b { display: block; font-size: 15.5px; }
.kc-ppoint span { font-size: 14.5px; color: var(--ks-koa-soft); }

.kc-plat-card {
    background: var(--ks-lagoon-deep);
    color: #E8F0EE;
    border-radius: 20px;
    padding: 34px 32px;
    position: relative;
    overflow: hidden;
}
.kc-plat-card .kc-waves2 { position: absolute; right: -30px; bottom: -20px; width: 340px; opacity: 0.35; pointer-events: none; }
.kc-plat-card h3 { color: #fff; font-size: 22px; font-weight: 800; margin: 0 0 10px; position: relative; }
.kc-plat-card p { font-size: 14.5px; color: #BAD3D2; margin: 0 0 18px; position: relative; }
.kc-plat-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.kc-pstat {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(246, 234, 215, 0.18);
    border-radius: 12px;
    padding: 14px 16px;
}
.kc-pstat .kc-n { font-family: var(--ks-display); font-weight: 800; font-size: 22px; color: #fff; }
.kc-pstat .kc-l {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A8CBCB;
    margin-top: 3px;
}
.kc-plat-card .kc-gravlink {
    position: relative;
    display: inline-block;
    margin-top: 20px;
    color: #FFD9A8;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.kc-plat-card .kc-gravlink:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Admin mockup
   -------------------------------------------------------------------------- */

.kc-admin-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; }
@media (max-width: 880px) { .kc-admin-grid { grid-template-columns: 1fr; } }

.kc-admin-mock {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.10);
    font-size: 12px;
}
.kc-am-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
}
.kc-am-top i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.kc-am-top i:nth-child(1) { background: #CA5415; }
.kc-am-top i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-am-top i:nth-child(3) { background: #1A6F83; }
.kc-am-top .kc-url {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    color: var(--ks-koa-soft);
    background: var(--ks-salt);
    border-radius: 999px;
    padding: 2px 10px;
    margin-left: 6px;
}
.kc-am-body { display: grid; grid-template-columns: 132px 1fr; min-height: 300px; }
.kc-am-side { background: var(--ks-lagoon-deep); color: #BAD3D2; padding: 14px 0; }
.kc-am-side .kc-it { padding: 7px 16px; font-size: 11.5px; font-weight: 600; }
.kc-am-side .kc-it.kc-on {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-left: 3px solid var(--ks-board);
    padding-left: 13px;
}
.kc-am-main { padding: 16px 18px; }
.kc-am-h { font-family: var(--ks-display); font-weight: 700; font-size: 14px; margin: 0 0 12px; }
.kc-am-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kc-am-tile { background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 10px; padding: 10px 12px; }
.kc-am-tile .kc-v { font-family: var(--ks-mono); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.kc-am-tile .kc-k { font-size: 10px; color: var(--ks-koa-soft); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
.kc-am-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ks-line);
    font-size: 11.5px;
}
.kc-am-row:last-child { border-bottom: 0; }
.kc-am-row .kc-id { font-family: var(--ks-mono); color: var(--ks-koa-soft); }
.kc-am-row .kc-who { font-weight: 600; }
.kc-am-row .kc-amt { font-family: var(--ks-mono); margin-left: auto; font-variant-numeric: tabular-nums; }

.kc-pill { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: 0.03em; }
.kc-pill-paid { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-pill-ship { background: #F3DEC9; color: #8A4A12; }
.kc-pill-refund { background: var(--ks-sand-deep); color: var(--ks-koa-soft); }

.kc-checks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kc-checks li { display: flex; gap: 11px; font-size: 15px; align-items: baseline; }
.kc-checks li::before { content: "\2713"; color: var(--ks-lagoon); font-weight: 800; flex: none; }

/* --------------------------------------------------------------------------
   Payment providers
   -------------------------------------------------------------------------- */

.kc-prov-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 800px) { .kc-prov-lanes { grid-template-columns: 1fr; } }

.kc-lane { background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 16px; padding: 22px; }
.kc-lane h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.kc-lane .kc-lane-sub { font-size: 13.5px; color: var(--ks-koa-soft); margin: 0 0 16px; }

.kc-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.kc-chip {
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
    border: 1px solid transparent;
}
.kc-chip.kc-addon { background: var(--ks-sand); color: var(--ks-koa); border-color: var(--ks-line); }
.kc-chip small { font-weight: 600; opacity: 0.75; margin-left: 5px; font-size: 11px; }

.kc-prov-note { font-size: 14px; color: var(--ks-koa-soft); max-width: 72ch; }
.kc-prov-note b { color: var(--ks-koa); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.kc-pricing {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}
.kc-price-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items: stretch; }
@media (max-width: 840px) { .kc-price-grid { grid-template-columns: 1fr; } }

.kc-price-card {
    background: var(--ks-card);
    border: 2px solid var(--ks-koa);
    border-radius: 20px;
    padding: 32px;
    position: relative;
}
.kc-ea-flag {
    position: absolute;
    top: -14px;
    left: 28px;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 5px 14px;
    border-radius: 999px;
}
.kc-price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; }
.kc-price-now {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 58px;
    letter-spacing: -0.03em;
    color: var(--ks-board);
    line-height: 1;
}
.kc-price-was { font-family: var(--ks-mono); font-size: 20px; color: var(--ks-koa-soft); text-decoration: line-through; }
.kc-price-per { font-size: 14px; color: var(--ks-koa-soft); }
.kc-price-card ul { list-style: none; margin: 20px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kc-price-card ul li { display: flex; gap: 11px; font-size: 15px; align-items: baseline; }
.kc-price-card ul li::before { content: "\2713"; color: var(--ks-lagoon); font-weight: 800; flex: none; }

.kc-renew-card {
    background: var(--ks-lagoon-deep);
    color: #E8F0EE;
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.kc-renew-card h3 { color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 12px; }
.kc-renew-card p { font-size: 14.5px; color: #BAD3D2; margin: 0 0 14px; }
.kc-renew-card p b { color: #fff; }
.kc-renew-card p.kc-first { margin-top: 10px; }
.kc-renew-num { font-family: var(--ks-display); font-weight: 800; font-size: 40px; color: #fff; letter-spacing: -0.02em; }
.kc-renew-num small { font-size: 15px; font-weight: 600; color: #A8CBCC; letter-spacing: 0; }
.kc-always {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(246, 234, 215, 0.22);
    font-size: 13.5px;
    color: #FFD9A8;
    font-weight: 600;
}
.kc-addon-note { margin-top: 18px; font-size: 14.5px; color: var(--ks-koa-soft); max-width: 78ch; }
.kc-addon-note b { color: var(--ks-koa); }

/* --------------------------------------------------------------------------
   Try it right now
   --------------------------------------------------------------------------
   One centered callout built like a browser window, with the live demo
   address in the title bar so the URL is the first thing read.
   -------------------------------------------------------------------------- */

.kc-demo-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.10);
}

.kc-demo-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
}
.kc-demo-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; }
.kc-demo-bar i:nth-child(1) { background: #CA5415; }
.kc-demo-bar i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-demo-bar i:nth-child(3) { background: #1A6F83; }

.kc-demo-url {
    flex: 1;
    margin-left: 8px;
    font-family: var(--ks-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ks-lagoon);
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 5px 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 140ms ease, color 140ms ease;
}
.kc-demo-url:hover { color: var(--ks-lagoon-deep); background: var(--ks-lagoon-mist); }

.kc-demo-in { padding: 40px 40px 36px; }
@media (max-width: 640px) { .kc-demo-in { padding: 30px 22px 28px; } }
.kc-demo-in .kc-kicker { margin-bottom: 10px; }
.kc-demo-intro { max-width: 68ch; }

.kc-demo-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 30px 0 34px;
}
@media (max-width: 820px) { .kc-demo-facts { grid-template-columns: 1fr; gap: 20px; } }

.kc-demo-fact .kc-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ks-lagoon);
    color: #F6EAD7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.kc-demo-fact .kc-dot svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-demo-fact b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.kc-demo-fact span { font-size: 14.5px; color: var(--ks-koa-soft); }

.kc-demo-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kc-demo-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-demo-note svg {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: var(--ks-board);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.kc-faq { max-width: 780px; }
.kc-faq.kc-pushed { margin-top: 34px; }
.kc-faq details {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 13px;
    padding: 0 22px;
    margin-bottom: 10px;
}
.kc-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 15.5px;
    padding: 17px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
.kc-faq summary::-webkit-details-marker { display: none; }
.kc-faq summary::after { content: "+"; font-family: var(--ks-mono); color: var(--ks-lagoon); font-size: 19px; }
.kc-faq details[open] summary::after { content: "\2013"; }
.kc-faq details p { margin: 0 0 18px; font-size: 14.5px; color: var(--ks-koa-soft); }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.kc-cta-final { text-align: center; padding: 96px 0 100px; position: relative; overflow: hidden; }
.kc-cta-final h2 { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 14px; }
.kc-cta-final .kc-cta-sub { color: var(--ks-koa-soft); font-size: 17px; max-width: 52ch; margin: 0 auto 30px; }
.kc-cta-final .kc-waves3 { position: absolute; left: -80px; bottom: -30px; width: 480px; opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------------------
   Newsletter band
   --------------------------------------------------------------------------
   Two columns on a sand ground: copy on the left, the inline email row on the
   right. The whole band is bracketed by hairlines so it reads as its own strip
   between the closing CTA and the footer.
   -------------------------------------------------------------------------- */

.kc-news {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
    padding: 64px 0;
}
.kc-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.kc-news-grid .kc-h2 { font-size: clamp(26px, 3.4vw, 36px); }
.kc-news-grid .kc-intro { font-size: 16px; max-width: 44ch; }

.kc-news-side { display: flex; flex-direction: column; justify-content: center; }

.kc-news-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}
.kc-news-input {
    flex: 1 1 240px;
    min-width: 0;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: var(--ks-card);
    border: 1.5px solid var(--ks-line);
    border-radius: 11px;
    padding: 13px 16px;
}
.kc-news-input::placeholder { color: #A08A6E; }
.kc-news-input:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.16);
}
.kc-news-btn { flex: none; white-space: nowrap; }
.kc-news-btn[disabled] { opacity: 0.7; cursor: default; transform: none; }

.kc-news-promise {
    margin: 14px 0 0;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    letter-spacing: 0.03em;
    color: var(--ks-koa-soft);
}

.kc-news-msg {
    margin: 14px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ks-lagoon-deep);
}
.kc-news-msg span { font-family: var(--ks-mono); }
.kc-news-msg-error { color: #A32E12; }

/* Visually hidden, still read out. */
.kc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 860px) {
    .kc-news { padding: 52px 0; }
    .kc-news-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.kc-footer {
    background: var(--ks-koa);
    color: #C9B9A4;
    border-top: 5px solid var(--ks-board);
}
/* Brand column plus one track per link column in the theme config (four).
   The brand takes the widest track; the link columns share the rest equally.
   Under 1100px the brand sits on its own row above the four columns, under
   840px the columns pair up, and under 520px they stack. */
.kc-foot-in { display: grid; grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; padding-top: 56px; padding-bottom: 40px; }
@media (max-width: 1100px) {
    .kc-foot-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kc-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 840px) { .kc-foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-foot-in { grid-template-columns: 1fr; } }

.kc-foot-brand i {
    width: 88px;
    height: 88px;
    background: var(--ks-bus-noshadow) center / contain no-repeat;
    display: block;
    margin-bottom: 12px;
}
.kc-foot-brand b { font-family: var(--ks-display); font-weight: 800; font-size: 19px; color: #F6EAD7; display: block; }
.kc-foot-brand p { font-size: 13.5px; margin: 8px 0 0; max-width: 30ch; }
.kc-foot-logo { display: block; width: 260px; max-width: 100%; margin-bottom: 16px; }
.kc-foot-logo img { display: block; width: 100%; height: auto; }

.kc-footer h3 {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #A08B74;
    margin: 6px 0 14px;
}
.kc-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.kc-footer ul a { color: #E8DECF; text-decoration: none; font-size: 14px; }
.kc-footer ul a:hover { color: #fff; text-decoration: underline; }

.kc-foot-base {
    border-top: 1px solid rgba(246, 234, 215, 0.14);
    padding-top: 20px;
    padding-bottom: 28px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}
.kc-foot-base b { color: #E8DECF; font-weight: 600; }

/* --------------------------------------------------------------------------
   Documentation pages (Helios layout, KahunaCart skin)
   -------------------------------------------------------------------------- */

/* The branded bar above already carries the logo lockup, so the docs sidebar's
   own logo row is redundant. Helios's sidebar partial renders it as the first
   child of the sidebar root. */
.kc-docs-aside > div > div:first-child,
.kc-docs-mobile-panel > div > div:first-child { display: none; }

/* Helios pins the sidebar with `lg:fixed lg:inset-y-0`, which would run it under
   the brand bar and straight over the site footer. Make it a sticky flex child
   instead: it starts below the header and stops at the footer. */
.kc-docs-aside {
    background: var(--ks-salt);
    border-right-color: var(--ks-line);
}
@media (min-width: 1024px) {
    .kc-docs-aside {
        position: sticky;
        top: var(--ks-nav-h);
        height: calc(100vh - var(--ks-nav-h));
        align-self: flex-start;
        z-index: 20;
    }
    /* The content column no longer needs to clear a fixed sidebar. */
    .kc-docs-content { padding-left: 0; }
}

.kc-docs-shell {
    background: var(--ks-card);
    min-height: calc(100vh - var(--ks-nav-h));
}

/* The mobile sidebar drawer has to sit above the sticky brand bar (both are
   z-50 in Helios, and the bar renders later in the DOM). */
.mobile-nav-overlay { z-index: 55; }
.kc-docs-mobile-panel {
    z-index: 60;
    background: var(--ks-salt);
    padding-top: 12px;
}

/* Search icon in the site header, on every page. A round icon button the same
   size as the account control beside it, and it shrinks with it on phones
   (see the header section of css/kahuna-shop.css). */
.kc-nav-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    color: var(--ks-koa);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-nav-search:hover { background: var(--ks-sand); border-color: #D6C3A4; }
.kc-nav-search svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 600px) { .kc-nav-search, .kc-menu-toggle { width: 34px; height: 34px; } }
/* Helios gives the search modal z-50, the same as the sticky brand bar, and the
   bar comes later in the page, so it drew over the modal's backdrop and on a
   phone hid the search box under its link row. Lift the modal above it. */
.search-modal { z-index: 60; }

/* Helios sets the article column's vertical rhythm and pins the TOC rail with
   Tailwind utilities (`py-10`, `top-24`, `max-h-[calc(100vh-7rem)]`) that never
   reach the browser: Tailwind compiles from Helios's own source list, which does
   not scan this child theme. So the column rendered flush against the header and
   the footer, and the TOC's `position: sticky` sat at `top: auto` and never
   stuck. Both are set here in plain CSS instead. */
.kc-docs-main {
    color: var(--ks-koa);
    padding-top: var(--ks-docs-gap);
    padding-bottom: var(--ks-docs-gap);
}

.kc-docs-toc-rail {
    position: sticky;
    top: calc(var(--ks-nav-h) + var(--ks-docs-gap));
    max-height: calc(100vh - var(--ks-nav-h) - (var(--ks-docs-gap) * 2));
    overflow-y: auto;
}

/* The TOC panel carries its own 32px of top padding, which would push "ON THIS
   PAGE" below the breadcrumbs. Drop it and let both columns start on the gap. */
.kc-docs-toc-rail > div { padding-top: 0; }

.kc-docs-main h1,
.kc-docs-main h2,
.kc-docs-main h3,
.kc-docs-main h4,
.kc-docs-main h5,
.kc-docs-main h6 {
    font-family: var(--ks-display);
    letter-spacing: -0.02em;
    color: var(--ks-koa);
}
.kc-docs-main .prose a { color: var(--ks-lagoon); }
.kc-docs-main .prose a:hover { color: var(--ks-lagoon-deep); }
.kc-docs-main .prose code { color: var(--ks-lagoon-deep); }
.kc-docs-main .prose blockquote { border-left-color: var(--ks-board); }
.kc-docs-main .prose thead { border-bottom-color: var(--ks-line); }
.kc-docs-main .prose tbody tr { border-bottom-color: var(--ks-line); }

/* Inline code in the docs.
   ---------------------------------------------------------------------------
   @tailwindcss/typography draws a literal backtick either side of every inline
   `<code>` inside `.prose`, through `content: "`"` on ::before and ::after. On
   this site that reads as a typo: the code chip already has its own ground and
   its own face, so the quotes are noise the author never typed. The plugin's
   own selector is `:where(code):not(:where([class~="not-prose"], ...))`, which
   scores zero specificity, so one plain rule turns both off everywhere `.prose`
   is used: every docs page, and the plain `default` template too. */
.prose code::before,
.prose code::after { content: none; }

/* Tables in the docs.
   ---------------------------------------------------------------------------
   Reference tables carry a `<code>` route or permission in the first columns
   and a sentence in the last. `<code>` has no break opportunity in it, so auto
   table layout hands those columns their whole unbroken width and the prose
   column collapses to a few characters, with the rest of the table scrolled off
   the side. Letting code wrap inside a cell is the whole fix: auto table layout
   can then share the width out in proportion to what each column holds, which
   gives the sentences the room and wraps the routes.

   Helios already makes the table its own horizontal scroll container
   (`display: block; overflow-x: auto` in css/custom/typography.css), so a table
   that is genuinely too wide scrolls inside itself and never pushes the page
   sideways. These rules make that the last resort rather than the first. */
.kc-docs-main .prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
.kc-docs-main .prose table code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Reference cards: the events page and the Twig page.
   ---------------------------------------------------------------------------
   Both are a long list of entries — 130-odd events, 45 Twig functions and
   filters — and each entry is a long identifier, a word or two of kind, and a
   sentence, with the events carrying a payload key list on top. That was four
   table columns each, and four columns do not fit the article column: the
   sentence scrolled off the side and `onKahunaCartRegisterCarrierRateProviders`
   came apart into five-character shreds. A card gives the name a line of its
   own and everything else the full width, and it reads the same at any window
   size.

   Written by gen-dev-reference.py's `reference_card()`, which is why these are
   raw HTML inside a markdown page. The look is the API endpoint card's. */
.kc-docs-main .kc-refs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 28px;
}
.kc-docs-main .kc-ref {
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    background: var(--ks-card);
    padding: 12px 16px 14px;
}
/* Inline flow rather than a flex row: a flex item will not shrink below the
   width of the unbroken name, so the longest of them — 39 characters of
   `onKahunaCartDeclareFeatureCompatibility` — pushed the card sideways on a
   phone. Laid out as text, the tags drop to a second line first, and only a
   name that still cannot fit breaks, at the one point it has to. */
.kc-docs-main .kc-ref-head {
    margin-bottom: 6px;
    line-height: 1.5;
}
.kc-docs-main .kc-ref-name {
    font-family: var(--ks-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}
.kc-docs-main .kc-ref-tag {
    display: inline-block;
    position: relative;
    top: -1px;
    margin-left: 7px;
    font-family: var(--ks-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
}
/* Tinted: the event a plugin raises, and the smaller of the two Twig kinds.
   Everything else — listens, handler method, function — stays neutral, so one
   tinted tag in a run of cards is the one worth stopping on. */
.kc-docs-main .kc-ref-tag--fires,
.kc-docs-main .kc-ref-tag--filter {
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}
.kc-docs-main .kc-ref-what,
.kc-docs-main .kc-ref-detail {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-docs-main .kc-ref-detail {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--ks-line);
    font-size: 14px;
}
.kc-docs-main .kc-ref-label {
    font-family: var(--ks-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin-right: 6px;
}
.kc-docs-main .kc-ref code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    /* A payload runs to a couple of dozen keys, so the line wraps between them
       and a key longer than the line breaks at a word boundary, never mid-word. */
    overflow-wrap: break-word;
    word-break: normal;
}
/* The description is prose, so a key named in it keeps the chip every other
   page gives it. The payload is a list of two dozen names read in one go, and
   a chip either side of every comma leaves the commas floating in the gaps —
   so the keys there are the mono face and the link colour and nothing else. */
.kc-docs-main .kc-ref-detail code {
    background: none;
    padding: 0;
    font-weight: 600;
    color: var(--ks-lagoon-deep);
}

/* --------------------------------------------------------------------------
   API reference (api-collection and api-endpoint pages)
   --------------------------------------------------------------------------
   Helios styles these in css/custom/api.css with Tailwind utilities over its
   own gray ramp. That file is compiled into build/css/site.css, so the layout
   arrives, but the colours are Helios's, and the child theme cannot add
   utilities of its own (see the note at the top of this file). Everything
   below is plain CSS over the brand tokens, loaded after the bundle, and it
   re-skins rather than re-builds: the structure stays Helios's.
   -------------------------------------------------------------------------- */

/* Method badges. Used in three places at three sizes: the endpoint card header,
   the docs sidebar, and the on-this-page TOC. */
.kc-body .api-method {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.kc-body .api-method.method-get,
.kc-body .api-method.method-head {
    background: var(--ks-lagoon-mist);
    border-color: #B9D4D2;
    color: var(--ks-lagoon-deep);
}
.kc-body .api-method.method-post {
    background: #E4EFD9;
    border-color: #C6DDB4;
    color: #3F6B24;
}
.kc-body .api-method.method-put,
.kc-body .api-method.method-patch {
    background: #F7E7C6;
    border-color: #E8CE9B;
    color: #7A5400;
}
.kc-body .api-method.method-delete {
    background: #F7DCCB;
    border-color: #EABE9F;
    color: var(--ks-board-deep);
}

/* The endpoint card */
.kc-body .api-endpoint-card {
    margin: 18px 0 28px;
    border: 1px solid var(--ks-line);
    border-radius: 14px;
    background: var(--ks-card);
    overflow: hidden;
}
.kc-body .api-endpoint-card .endpoint-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--ks-sand-soft);
    border-bottom: 1px solid var(--ks-line);
}
.kc-body .api-endpoint-card .endpoint-path {
    font-family: var(--ks-mono);
    font-size: 13.5px;
    color: var(--ks-koa);
    background: none;
    padding: 0;
    overflow-wrap: anywhere;
}
.kc-body .api-endpoint-card .endpoint-path .path-param { color: var(--ks-board); }
.kc-body .api-endpoint-card .endpoint-permission {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ks-body);
    font-size: 12px;
    color: var(--ks-koa-soft);
    white-space: nowrap;
}
.kc-body .api-endpoint-card .endpoint-permission code {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    background: var(--ks-sand-deep);
    color: var(--ks-koa);
    border-radius: 5px;
    padding: 2px 6px;
}
.kc-body .api-endpoint-card .endpoint-permission.is-public code {
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}
.kc-body .api-endpoint-card .endpoint-description {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ks-line);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .endpoint-description > *:first-child { margin-top: 0; }
.kc-body .api-endpoint-card .endpoint-description > *:last-child { margin-bottom: 0; }
.kc-body .api-endpoint-card .endpoint-description code,
.kc-body .api-endpoint-card .endpoint-response code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    color: var(--ks-koa);
    border-radius: 5px;
    padding: 1px 5px;
}
.kc-body .api-endpoint-card .endpoint-body { padding: 4px 16px 16px; }
/* The description is the last thing in a card with no parameters, so it keeps
   no rule under it. */
.kc-body .api-endpoint-card .endpoint-description:last-child { border-bottom: 0; }

/* Parameter table */
.kc-body .api-endpoint-card .params-title,
.kc-body .api-endpoint-card .responses-title,
.kc-body .api-endpoint-card .response-title {
    margin: 16px 0 8px;
    font-family: var(--ks-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
/* The card clips its own overflow, so the scroll container is the wrapper and
   the table itself stays a table: a `display: block` table shrink-to-fits and
   leaves the header ground stopping short of the card's edge. */
.kc-body .api-endpoint-card .api-params { overflow-x: auto; }
.kc-body .api-endpoint-card .params-table {
    /* The docs-table rule above turns every table in the article column into
       its own scroll container. This one is inside a `not-prose` card and does
       not want that, so it says so. */
    display: table;
    width: 100%;
    min-width: 26rem;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
}
.kc-body .api-endpoint-card .params-table th {
    padding: 8px 10px;
    text-align: left;
    background: var(--ks-sand-soft);
    border-bottom: 1px solid var(--ks-line);
    font-family: var(--ks-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .params-table td {
    padding: 10px;
    border-top: 1px solid var(--ks-line);
    vertical-align: top;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .params-table td:first-child { min-width: 8rem; }
.kc-body .api-endpoint-card .params-table td:last-child { width: 62%; }
.kc-body .api-endpoint-card .param-name {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa);
    overflow-wrap: anywhere;
}
.kc-body .api-endpoint-card .param-type {
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .param-required,
.kc-body .api-endpoint-card .param-optional {
    display: inline-block;
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.kc-body .api-endpoint-card .param-required { color: var(--ks-board-deep); }
.kc-body .api-endpoint-card .param-optional { color: #A08E78; }
.kc-body .api-endpoint-card .param-description { color: var(--ks-koa-soft); }
.kc-body .api-endpoint-card .param-description code,
.kc-body .api-endpoint-card .param-default code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    color: var(--ks-koa);
    border-radius: 4px;
    padding: 1px 5px;
}
.kc-body .api-endpoint-card .param-default,
.kc-body .api-endpoint-card .param-enum {
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--ks-koa-soft);
}

/* Response note */
.kc-body .api-endpoint-card .endpoint-response {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--ks-line);
    border-left: 3px solid var(--ks-lagoon);
    border-radius: 0 10px 10px 0;
    background: var(--ks-sand-soft);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-body .api-endpoint-card .endpoint-response > *:first-child { margin-top: 0; }
.kc-body .api-endpoint-card .endpoint-response > *:last-child { margin-bottom: 0; }

/* Collection page: one section per endpoint, and the closing prose. */
.kc-docs-main .api-collection-section {
    /* Anchor jumps clear the sticky brand bar. Helios's own `mb-16 pb-12`
       leaves a hundred-odd pixels between one endpoint and the next, which is
       more air than these cards want. */
    scroll-margin-top: calc(var(--ks-nav-h) + 16px);
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom-color: var(--ks-line);
}
.kc-docs-main .api-collection-section:last-child { margin-bottom: 0; padding-bottom: 0; }
.kc-docs-main .api-collection-section h2 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 22px;
    margin: 0 0 4px;
}
.kc-docs-main .api-collection-outro { margin-top: 36px; }

/* On-this-page TOC: the endpoint rows carry a method badge, so they need the
   badge to sit on its own line above a long title rather than squashing it. */
.kc-docs-toc .toc-link { display: flex; align-items: baseline; gap: 7px; }
.kc-docs-toc .toc-link .api-method {
    flex: none;
    padding: 1px 5px;
    font-size: 9.5px;
}

/* Docs sidebar: same badge, one size down again. */
.kc-docs-aside .nav-link .api-method,
.kc-docs-mobile-panel .nav-link .api-method {
    margin-right: 6px;
    padding: 1px 5px;
    font-size: 9.5px;
}

/* --------------------------------------------------------------------------
   Code blocks (codesh plugin)
   --------------------------------------------------------------------------
   codesh ships a cool Tailwind-gray chrome (#f3f4f6 surround, gray-300 chips)
   that reads cold against the warm grounds. Its stylesheet loads after this
   one, so every rule here is scoped under `.kc-body` to win on specificity
   rather than order. Syntax token colours are left to the phiki theme.
   -------------------------------------------------------------------------- */

.kc-body .codesh-block {
    background-color: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    box-shadow: 0 4px 10px -2px rgba(43, 28, 12, 0.06);
}

/* phiki writes the code body's background as an inline style, so the pure white
   from its light theme needs `!important` to warm up. Token colours are left to
   the phiki theme. */
.kc-body .codesh-block pre.phiki { background-color: var(--ks-card) !important; }

.kc-body .codesh-block .codesh-header {
    background-color: transparent;
    border-bottom: 1px solid var(--ks-line);
}

.kc-body .codesh-block .codesh-lang {
    color: var(--ks-koa-soft);
    background-color: var(--ks-sand-deep);
}

.kc-body .codesh-block .codesh-title { color: var(--ks-koa); }

.kc-body .codesh-block .codesh-copy,
.kc-body .codesh-group .codesh-copy {
    color: var(--ks-koa-soft);
    background-color: var(--ks-card);
    border-color: var(--ks-line);
}

.kc-body .codesh-block .codesh-copy:hover,
.kc-body .codesh-group .codesh-copy:hover {
    color: var(--ks-lagoon);
    background-color: var(--ks-card);
    border-color: var(--ks-lagoon);
}

/* Sidebar navigation links */
.kc-docs-shell .nav-link { font-family: var(--ks-body); }
.kc-docs-shell .nav-link.active { color: var(--ks-lagoon); }

/* Line the nested group's vertical rule up with the centre of its parent's
   icon: the row's 12px of left padding plus half the 20px icon. Helios's own
   `ml-4` left it 6px short. */
.kc-docs-shell .nav-children,
.kc-docs-mobile-panel .nav-children { margin-left: 22px; }

/* Helios's search trigger and kbd chips */
.kc-body .search-trigger { border-color: var(--ks-line); background: var(--ks-card); color: var(--ks-koa-soft); }
.kc-body .search-trigger:hover { border-color: var(--ks-lagoon); }
.kc-body kbd { border-color: var(--ks-line); background: var(--ks-sand); color: var(--ks-koa-soft); }

/* --------------------------------------------------------------------------
   Light-only guarantees
   --------------------------------------------------------------------------
   Helios ships a dark variant driven by a `dark` class on <html>. This site
   never uses it: the templates hardcode light and js/kahuna.js strips the class
   if a stale localStorage value from another Helios site puts it back. These
   rules are the belt-and-braces so nothing dark can flash through.
   -------------------------------------------------------------------------- */

html.dark .kc-body { background: var(--ks-salt); color: var(--ks-koa); }
html.dark .kc-docs-shell { background: var(--ks-card); color: var(--ks-koa); }
html.dark .kc-docs-aside { background: var(--ks-salt); }

/* --------------------------------------------------------------------------
   Compare pages
   --------------------------------------------------------------------------
   Everything under /compare: the parity matrix (compare-matrix), the index
   cards (compare-cards), hand-written tables (compare-table), long-form prose
   (prose), the verdict pair (compare-verdict), onward links (related) and the
   slim breadcrumb (compare-crumb).

   Plain CSS on `kc-` classes over `--ks-` tokens, hairline borders, 10px
   radii, no shadows and no gradients — the same rules as the rest of the file.

   The one thing worth knowing before editing: a feature row's note lives in a
   SEPARATE <tr> underneath it, not inside the feature cell, so it can run the
   full width of the table. The toggle is a <details> in the feature cell and
   the reveal is `tr:has(.kc-note[open]) + tr.kc-cmp-note` — pure CSS, so the
   notes work with JavaScript off, and a browser without `:has()` simply shows
   every note instead of hiding them.
   -------------------------------------------------------------------------- */

/* ---- token colours -------------------------------------------------------
   One source for the six cell tokens. Glyphs are mono so ✓ / + / ~ / ✗ all
   occupy the same advance and the columns read as columns. */

.kc-cell,
.kc-cmp-legend b {
    font-family: var(--ks-mono);
    font-variant-ligatures: none;
}

/* Cell icons. The text glyph stays in the markup for copy-paste and readers
   without CSS; on screen each token is a 20px disc whose fill says how much of
   the feature is there, with a check or cross masked in front of it. The two
   masks are defined once here as data URIs — nothing is inlined per cell. */
:root {
    --ks-no: #B3412E;
    /* "Official add-on" is available and working, just not in the box, so it
       belongs to the same blue family as "in core" one step lighter — not to
       the warm end of the palette, where it sat next to --ks-no and read at a
       glance as another kind of no. */
    --ks-addon: #3E8FA3;
    --kc-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6 5 12l1.6-1.6 3 3 8.8-8.8L20 6.2z'/%3E%3C/svg%3E");
    --kc-mask-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.6 7.8 13.4 12l4.2 4.2-1.4 1.4-4.2-4.2-4.2 4.2-1.4-1.4L10.6 12 6.4 7.8l1.4-1.4 4.2 4.2 4.2-4.2z'/%3E%3C/svg%3E");
}

.kc-cell[data-token="core"],        .kc-cmp-legend b[data-token="core"]        { color: var(--ks-lagoon); }
.kc-cell[data-token="addon"],       .kc-cmp-legend b[data-token="addon"]       { color: var(--ks-addon); }
.kc-cell[data-token="third_party"], .kc-cmp-legend b[data-token="third_party"] { color: var(--ks-koa-soft); }
.kc-cell[data-token="partial"],     .kc-cmp-legend b[data-token="partial"]     { color: var(--ks-amber); }
.kc-cell[data-token="none"],        .kc-cmp-legend b[data-token="none"]        { color: var(--ks-no); }
.kc-cell[data-token="unknown"],     .kc-cmp-legend b[data-token="unknown"]     { color: var(--ks-koa-soft); }

/* A faint wash of the same colour across the cell, so a column reads at a
   glance even before the icons resolve. Layered as an image so the KahunaCart
   column's own background stays underneath. */
.kc-cell[data-token]        { background-image: linear-gradient(var(--kc-cell-tint, transparent), var(--kc-cell-tint, transparent)); }
.kc-cell[data-token="core"]        { --kc-cell-tint: color-mix(in srgb, var(--ks-lagoon) 11%, transparent); }
.kc-cell[data-token="addon"]       { --kc-cell-tint: color-mix(in srgb, var(--ks-addon) 9%, transparent); }
.kc-cell[data-token="third_party"] { --kc-cell-tint: color-mix(in srgb, var(--ks-koa-soft) 7%, transparent); }
.kc-cell[data-token="partial"]     { --kc-cell-tint: color-mix(in srgb, var(--ks-amber) 10%, transparent); }
.kc-cell[data-token="none"]        { --kc-cell-tint: color-mix(in srgb, var(--ks-no) 5%, transparent); }
.kc-cell[data-token="unknown"]     { --kc-cell-tint: transparent; }

.kc-cell > span[aria-hidden],
.kc-cmp-legend b[data-token] {
    --kc-i-mask: none;
    --kc-i-ink: currentColor;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 0;
    line-height: 16px;
    text-align: center;
}
.kc-cell > span[aria-hidden]::before,
.kc-cmp-legend b[data-token]::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--kc-i-ink);
    -webkit-mask: var(--kc-i-mask) center / contain no-repeat;
    mask: var(--kc-i-mask) center / contain no-repeat;
}

/* In the box: a solid disc with the check knocked out of it. */
.kc-cell[data-token="core"] > span, .kc-cmp-legend b[data-token="core"] {
    background: currentColor; --kc-i-mask: var(--kc-mask-check); --kc-i-ink: var(--ks-card);
}
/* Official add-on: an open ring with a check — there, but not in the box. */
.kc-cell[data-token="addon"] > span, .kc-cmp-legend b[data-token="addon"] {
    --kc-i-mask: var(--kc-mask-check);
}
/* Third-party: the same, dashed, because somebody else maintains it. */
.kc-cell[data-token="third_party"] > span, .kc-cmp-legend b[data-token="third_party"] {
    border-style: dashed; --kc-i-mask: var(--kc-mask-check);
}
/* Partial: half a disc. */
.kc-cell[data-token="partial"] > span, .kc-cmp-legend b[data-token="partial"] {
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.kc-cell[data-token="partial"] > span::before, .kc-cmp-legend b[data-token="partial"]::before { content: none; }
/* Not available: a cross on a faint tint, no ring — absence should not shout. */
.kc-cell[data-token="none"] > span, .kc-cmp-legend b[data-token="none"] {
    border-color: transparent;
    background: color-mix(in srgb, var(--ks-no) 14%, transparent);
    --kc-i-mask: var(--kc-mask-cross);
}
.kc-cell[data-token="none"] > span::before, .kc-cmp-legend b[data-token="none"]::before { inset: -1px; }
/* Unverified: a dotted ring around the question mark itself. */
.kc-cell[data-token="unknown"] > span, .kc-cmp-legend b[data-token="unknown"] {
    border-style: dotted; font-size: 12px; font-weight: 700; font-family: var(--ks-mono);
}
.kc-cell[data-token="unknown"] > span::before, .kc-cmp-legend b[data-token="unknown"]::before { content: none; }

/* ---- legend -------------------------------------------------------------- */

.kc-cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0 0 24px;
    padding: 14px 18px;
    list-style: none;
    background: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
}

.kc-cmp-legend li { display: flex; align-items: center; gap: 8px; }
.kc-cmp-legend b { min-width: 1.5em; text-align: center; font-size: 14px; }

/* ---- expand / collapse --------------------------------------------------- */

.kc-cmp-tools {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
}

.kc-cmp-tool {
    font-family: var(--ks-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 7px 14px;
    cursor: pointer;
}

.kc-cmp-tool:hover { color: var(--ks-lagoon); border-color: var(--ks-lagoon); }

/* ---- platform index (compare-index) --------------------------------------
   The row of "vs" links under the hub's hero: eight pages, one line. */

.kc-cmp-index-block { padding-top: 0; }

.kc-cmp-index {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.kc-cmp-index-label {
    font-family: var(--ks-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin-inline-end: 4px;
}

.kc-cmp-index-link {
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa);
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 7px 14px;
    text-decoration: none;
    white-space: nowrap;
}

.kc-cmp-index-link small {
    font-size: 12px;
    font-weight: 500;
    color: var(--ks-koa-soft);
}

.kc-cmp-index-link:hover { color: var(--ks-lagoon); border-color: var(--ks-lagoon); }

/* ---- groups -------------------------------------------------------------- */

.kc-cmp-groups { display: flex; flex-direction: column; gap: 12px; }

.kc-cmp-group {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    overflow: hidden;
}

.kc-cmp-group > summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    font-family: var(--ks-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    list-style: none;
    background: var(--ks-sand-soft);
}

.kc-cmp-group > summary::-webkit-details-marker { display: none; }

.kc-cmp-group > summary::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-right: 2px solid var(--ks-lagoon);
    border-bottom: 2px solid var(--ks-lagoon);
    transform: rotate(-45deg);
    transition: transform 160ms ease;
}

.kc-cmp-group[open] > summary::before { transform: rotate(45deg); }
.kc-cmp-group > summary:hover { background: var(--ks-sand); }
.kc-cmp-gname { flex: 1 1 auto; }

.kc-cmp-gcount {
    flex: none;
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

/* ---- the scroller -------------------------------------------------------- */

.kc-cmp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.kc-cmp-scroll:focus-visible { outline: 3px solid var(--ks-lagoon); outline-offset: -3px; }

/* ---- the matrix table ---------------------------------------------------- */

/* `separate` rather than `collapse`: a sticky cell in a collapsed table loses
   its borders in WebKit, so every rule is drawn on the cell itself. */
.kc-cmp {
    --kc-cmp-platform-width: 120px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

/* Platform cells form a fixed-width block against the right edge. The feature
   column takes the remaining room, keeping every group aligned even when its
   longest label is much shorter than the group above or below it. */
.kc-cmp:not(.kc-cmp-wide) th.kc-cmp-plat,
.kc-cmp:not(.kc-cmp-wide) td.kc-cell {
    box-sizing: border-box;
    width: var(--kc-cmp-platform-width);
    min-width: var(--kc-cmp-platform-width);
}

.kc-cmp th,
.kc-cmp td {
    border-bottom: 1px solid var(--ks-line);
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}

.kc-cmp tbody tr:last-child > th,
.kc-cmp tbody tr:last-child > td { border-bottom: 0; }

.kc-cmp thead th {
    background: var(--ks-sand);
    font-family: var(--ks-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ks-koa);
    white-space: nowrap;
    /* Sticky against the scroller. `overflow-x: auto` makes .kc-cmp-scroll the
       scroll container on both axes, so this only bites where the table itself
       scrolls vertically — groups are short enough that it rarely has to. */
    position: sticky;
    top: 0;
    z-index: 3;
}

.kc-cmp thead th abbr { text-decoration: none; border-bottom: 1px dotted var(--ks-line); cursor: help; }
.kc-cmp thead th.kc-cmp-plat { text-align: center; }

/* The feature column rides along on horizontal scroll. A sticky cell needs an
   opaque background of its own — `inherit` resolves to transparent here. */
.kc-cmp th.kc-cmp-feat {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 210px;
    max-width: 340px;
    font-weight: 500;
    color: var(--ks-koa);
    background: var(--ks-card);
    border-right: 1px solid var(--ks-line);
}

.kc-cmp thead th.kc-cmp-feat { z-index: 4; background: var(--ks-sand); }
.kc-cmp tbody tr.kc-cmp-alt > th.kc-cmp-feat { background: var(--ks-sand-soft); }
.kc-cmp tbody tr.kc-cmp-alt > td { background: var(--ks-sand-soft); }

/* Ours: a ruled frame down the whole column rather than a fill, so the
   per-token tints read the same in our column as in everybody else's. Drawn
   with inset shadows so it survives either table border model and never
   changes the cell size; the header takes the top edge, the last row the
   bottom one. */
.kc-cmp th.kc-cmp-ours,
.kc-cmp td.kc-cmp-ours {
    box-shadow: inset 2px 0 0 var(--ks-lagoon), inset -2px 0 0 var(--ks-lagoon);
}
.kc-cmp thead th.kc-cmp-ours {
    color: var(--ks-lagoon-deep);
    box-shadow: inset 2px 0 0 var(--ks-lagoon), inset -2px 0 0 var(--ks-lagoon), inset 0 2px 0 var(--ks-lagoon);
}
/* The last feature row, not :last-child — a collapsed note row can follow it. */
.kc-cmp tbody tr.kc-cmp-row-last > td.kc-cmp-ours {
    box-shadow: inset 2px 0 0 var(--ks-lagoon), inset -2px 0 0 var(--ks-lagoon), inset 0 -2px 0 var(--ks-lagoon);
}

.kc-cell,
.kc-cmp td.kc-cell {
    text-align: center;
    vertical-align: middle;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
}

/* ---- notes --------------------------------------------------------------- */

.kc-note { display: block; }
.kc-note > summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}
.kc-note > summary::-webkit-details-marker { display: none; }

.kc-note > summary::after {
    content: "i";
    flex: none;
    order: 2;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    font-family: var(--ks-mono);
    font-size: 10px;
    font-style: normal;
    line-height: 15px;
    text-align: center;
    color: var(--ks-lagoon);
    border: 1px solid var(--ks-lagoon);
    border-radius: 50%;
}

.kc-note[open] > summary::after { background: var(--ks-lagoon); color: var(--ks-salt); }
.kc-note > summary:hover span { color: var(--ks-lagoon); }

/* The note row is in the DOM on every render; `:has()` reveals it. */
.kc-cmp tr.kc-cmp-note { display: none; }
.kc-cmp tbody tr:has(.kc-note[open]) + tr.kc-cmp-note,
.kc-cmp tr.kc-cmp-note:target { display: table-row; }

@supports not selector(:has(*)) {
    .kc-cmp tr.kc-cmp-note { display: table-row; }
}

.kc-cmp tr.kc-cmp-note > td {
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
    padding: 12px 16px;
}

.kc-cmp tr.kc-cmp-note code {
    font-family: var(--ks-mono);
    font-size: 0.92em;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 5px;
    padding: 1px 5px;
}

.kc-cmp tr.kc-cmp-note strong { color: var(--ks-koa); }

/* ---- the matrix on a phone ---------------------------------------------- */

/* Below 720px a twelve-column table cannot work, sticky column or not. The
   table stops being a table: each feature row becomes a card with the label on
   top and one chip per platform underneath (platform name over its mark, from
   the cell's data-plat), KahunaCart first with its lagoon frame. Nothing
   scrolls sideways, and the note toggle in the label keeps working. */
@media (max-width: 720px) {
    /* Only the matrix scroller; compare-table.html.twig shares the class and
       still needs to scroll sideways. */
    .kc-cmp-group > .kc-cmp-scroll { overflow: visible; }
    .kc-cmp,
    .kc-cmp tbody,
    .kc-cmp tr,
    .kc-cmp th,
    .kc-cmp td { display: block; width: auto; min-width: 0; max-width: none; }
    .kc-cmp thead { display: none; }

    .kc-cmp tbody tr.kc-cmp-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 6px;
        padding: 12px 14px 14px;
        border-bottom: 1px solid var(--ks-line);
    }
    .kc-cmp tbody tr.kc-cmp-row-last { border-bottom: 0; }
    .kc-cmp tbody tr.kc-cmp-alt { background: var(--ks-sand-soft); }

    .kc-cmp th.kc-cmp-feat,
    .kc-cmp tbody tr.kc-cmp-alt > th.kc-cmp-feat {
        grid-column: 1 / -1;
        position: static;
        padding: 0 0 6px;
        border: 0;
        background: transparent;
        font-weight: 600;
        font-size: 14px;
    }

    .kc-cmp td.kc-cell,
    .kc-cmp tbody tr.kc-cmp-alt > td.kc-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 7px 4px 6px;
        border: 1px solid var(--ks-line);
        border-radius: 8px;
        background-color: var(--ks-card);
        white-space: normal;
    }
    .kc-cmp td.kc-cell::before {
        content: attr(data-plat);
        order: -1;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--ks-mono);
        font-size: 10.5px;
        letter-spacing: 0.02em;
        color: var(--ks-koa-soft);
    }
    .kc-cmp td.kc-cmp-ours,
    .kc-cmp tbody tr.kc-cmp-row-last > td.kc-cmp-ours { box-shadow: inset 0 0 0 2px var(--ks-lagoon); }
    .kc-cmp td.kc-cmp-ours::before { color: var(--ks-lagoon-deep); font-weight: 700; }

    .kc-cmp tbody tr:has(.kc-note[open]) + tr.kc-cmp-note,
    .kc-cmp tr.kc-cmp-note:target { display: block; }
    .kc-cmp tr.kc-cmp-note > td { padding: 10px 14px 12px; }
}

/* ---- footnotes ----------------------------------------------------------- */

.kc-cmp-foot { margin-top: 40px; }
.kc-cmp-foot h3 { font-size: 20px; font-weight: 700; margin: 0 0 14px; }

.kc-cmp-notes {
    margin: 0;
    padding-left: 24px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-cmp-notes li { margin-bottom: 12px; }
.kc-cmp-notes code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 5px; padding: 1px 5px; }
.kc-cmp-notes strong { color: var(--ks-koa); }

.kc-cmp-fnref {
    display: block;
    font-weight: 600;
    color: var(--ks-koa);
    text-decoration: none;
}

.kc-cmp-fnref:hover { color: var(--ks-lagoon); }

.kc-cmp-verified {
    margin: 22px 0 0;
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}

/* ---- comparison cards ---------------------------------------------------- */

.kc-cmp-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.kc-cmp-cards.kc-pushed { margin-top: 36px; }

@media (min-width: 640px)  { .kc-cmp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kc-cmp-cards { grid-template-columns: repeat(3, 1fr); } }

.kc-cmp-card {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 22px 22px 20px;
}

.kc-cmp-card-ours { background: var(--ks-lagoon-mist); border-color: var(--ks-lagoon); }

.kc-cmp-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.kc-cmp-card h3 a { color: var(--ks-koa); text-decoration: none; }
.kc-cmp-card h3 a:hover { color: var(--ks-lagoon); }

.kc-cmp-card-tag {
    margin: 0 0 16px;
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}

.kc-cmp-bar {
    display: flex;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ks-sand-deep);
}

.kc-cmp-bar span { display: block; height: 100%; }
.kc-cmp-bar span[data-token="core"]        { background: var(--ks-lagoon); }
.kc-cmp-bar span[data-token="addon"]       { background: var(--ks-addon); }
.kc-cmp-bar span[data-token="third_party"] { background: var(--ks-koa-soft); }
.kc-cmp-bar span[data-token="partial"]     { background: var(--ks-amber); }
.kc-cmp-bar span[data-token="none"]        { background: var(--ks-sand-deep); }

.kc-cmp-count {
    margin: 9px 0 14px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

.kc-cmp-verdict { margin: 0 0 16px; font-size: 14.5px; color: var(--ks-koa); }

.kc-cmp-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-lagoon);
    text-decoration: none;
}

.kc-cmp-more:hover { text-decoration: underline; }

/* ---- hand-written table (compare-table) ---------------------------------- */

.kc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    overflow: hidden;
}

.kc-cmp-scroll.kc-pushed { margin-top: 36px; }

.kc-table th,
.kc-table td {
    border-bottom: 1px solid var(--ks-line);
    padding: 13px 16px;
    text-align: left;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

.kc-table thead th {
    background: var(--ks-sand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.kc-table tbody th { font-weight: 600; color: var(--ks-koa); }
.kc-table tbody tr:last-child > th,
.kc-table tbody tr:last-child > td { border-bottom: 0; }
.kc-table .kc-col-ours { background: var(--ks-lagoon-mist); }
.kc-table thead th.kc-col-ours { color: var(--ks-lagoon-deep); }

.kc-table-note {
    margin: 14px 0 0;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
    max-width: 72ch;
}

/* ---- prose module -------------------------------------------------------- */

.kc-prose.kc-pushed { margin-top: 30px; }
.kc-prose-narrow { max-width: 72ch; }
.kc-prose-wide { max-width: none; }

.kc-prose a { color: var(--ks-lagoon); }
.kc-prose strong { font-weight: 700; color: var(--ks-koa); }
.kc-prose h3:first-child { margin-top: 0; }

/* Two columns for the long "here is everything you give up" bullet lists. */
/* A prose block with a `photo:` (the bio on the About page): the photo sits
   above the text on a phone and beside it, top-aligned, from tablet width up. */
.kc-bio { display: grid; gap: 22px; align-items: start; }
.kc-bio.kc-pushed { margin-top: 30px; }
.kc-bio-photo { display: block; width: 160px; height: auto; border-radius: 12px; }
.kc-bio > .kc-prose > :first-child { margin-top: 0; }
@media (min-width: 640px) {
    .kc-bio { grid-template-columns: 160px minmax(0, 1fr); gap: 36px; }
}
.kc-prose-2col { columns: 2; column-gap: 48px; }
.kc-prose-2col > * { break-inside: avoid; }
.kc-prose-2col h3 { break-after: avoid; }

@media (max-width: 760px) {
    .kc-prose-2col { columns: 1; }
}

/* ---- verdict pair -------------------------------------------------------- */

.kc-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kc-verdict.kc-pushed { margin-top: 36px; }

@media (max-width: 760px) {
    .kc-verdict { grid-template-columns: 1fr; }
}

.kc-verdict-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 24px 26px;
}

.kc-verdict-ours { background: var(--ks-lagoon-mist); border-color: var(--ks-lagoon); }
.kc-verdict-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.01em; }
.kc-verdict-card ul { list-style: none; margin: 0; padding: 0; }

.kc-verdict-card li {
    display: flex;
    gap: 11px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ks-koa);
}

.kc-verdict-card li:last-child { margin-bottom: 0; }

.kc-verdict-mark {
    flex: none;
    font-family: var(--ks-mono);
    font-size: 13px;
    line-height: 1.75;
    color: var(--ks-lagoon);
}

.kc-verdict-ours .kc-verdict-mark { color: var(--ks-lagoon-deep); }

/* ---- related links ------------------------------------------------------- */

.kc-block.kc-tight.kc-tighter { padding: 40px 0 56px; }
.kc-h2-small { font-size: clamp(22px, 2.6vw, 28px); }

.kc-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.kc-related-card {
    display: block;
    position: relative;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 16px 40px 16px 18px;
    text-decoration: none;
    color: var(--ks-koa);
}

.kc-related-card:hover { border-color: var(--ks-lagoon); }
.kc-related-card b { display: block; font-size: 15px; font-weight: 700; }
.kc-related-card span { display: block; margin-top: 4px; font-size: 13px; color: var(--ks-koa-soft); }

.kc-related-card em {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--ks-mono);
    font-style: normal;
    color: var(--ks-lagoon);
}

/* ---- ranking ------------------------------------------------------------- */

.kc-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 820px;
    border-top: 1px solid var(--ks-line);
}

.kc-rank.kc-pushed { margin-top: 34px; }

.kc-rank-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 20px 18px 20px 4px;
    border-bottom: 1px solid var(--ks-line);
}

.kc-rank-ours {
    background: var(--ks-lagoon-mist);
    border-radius: 10px;
    padding-left: 18px;
}

/* The place, and it is load-bearing: it comes from the frontmatter, not a
   counter, so a tie or a gap in the ranking still renders honestly. */
.kc-rank-num {
    flex: none;
    width: 2ch;
    font-family: var(--ks-mono);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    color: var(--ks-lagoon);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.kc-rank-ours .kc-rank-num { color: var(--ks-board); }

.kc-rank-body { flex: 1 1 auto; min-width: 0; }
.kc-rank-body h3 { font-size: 19px; font-weight: 700; margin: 0 0 5px; letter-spacing: -0.01em; }
.kc-rank-body h3 a { color: var(--ks-koa); text-decoration: none; }
.kc-rank-body h3 a:hover { color: var(--ks-lagoon); }
.kc-rank-body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ks-koa-soft); }
.kc-rank-ours .kc-rank-body p { color: var(--ks-koa); }

.kc-rank-lens {
    max-width: 820px;
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

/* ---- compare breadcrumb -------------------------------------------------- */

.kc-crumb {
    padding: 26px 0 0;
    font-size: 13px;
    color: var(--ks-koa-soft);
}

.kc-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kc-crumb a { color: var(--ks-koa-soft); text-decoration: none; }
.kc-crumb a:hover { color: var(--ks-lagoon); text-decoration: underline; }
.kc-crumb-sep { color: var(--ks-line); }
.kc-crumb [aria-current="page"] { color: var(--ks-koa); font-weight: 600; }

/* The crumb sits directly above the page hero, so that hero loses its top pad. */
.kc-crumb + .kc-block,
.kc-crumb + .kc-page-hero { padding-top: 22px; }

/* ==========================================================================
   Benchmarks (/benchmarks)
   --------------------------------------------------------------------------
   Everything here reads `config/benchmarks.yaml`, which the harness writes.
   Light-only like the rest of this file — the site sets `helios-theme` to
   light before first paint and strips any dark class, so there is no second
   palette to keep in step. Every figure is `tabular-nums` so a column of
   milliseconds lines up on the decimal point and a reader can scan it.
   ========================================================================== */

.kc-bench-num,
.kc-bench-table td,
.kc-bench-table th { font-variant-numeric: tabular-nums; }

/* ---- hero ---------------------------------------------------------------- */

.kc-bench-stamp {
    max-width: 62ch;
    margin: 22px auto 0;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-bench-stamp code {
    background: var(--ks-sand);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 0.94em;
}

.kc-bench-stamp b { color: var(--ks-board-deep); }

.kc-bench-headline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    max-width: 820px;
    margin: 26px auto 0;
    text-align: left;
}

.kc-bench-figure {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 18px 20px 16px;
}

.kc-bench-figure-name {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-lagoon-deep);
}

.kc-bench-figure-num {
    font-family: var(--ks-mono);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.05;
    color: var(--ks-board);
    font-variant-numeric: tabular-nums;
}

.kc-bench-figure-num em {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--ks-body);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    color: var(--ks-koa-soft);
}

.kc-bench-figure-sub {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

.kc-bench-figure-sub b { color: var(--ks-koa); font-weight: 700; }
.kc-bench-figure-sub span { color: var(--ks-line); }

.kc-bench-figure-ver {
    margin: 6px 0 0;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    color: var(--ks-koa-soft);
}

.kc-bench-note {
    max-width: 62ch;
    margin: 22px auto 0;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
}

/* ---- store size ---------------------------------------------------------- */

.kc-bench-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.kc-bench-stat {
    background: var(--ks-lagoon-mist);
    border: 1px solid var(--ks-lagoon);
    border-radius: 10px;
    padding: 18px 20px;
}

.kc-bench-stat-num {
    font-family: var(--ks-mono);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--ks-lagoon-deep);
    font-variant-numeric: tabular-nums;
}

.kc-bench-stat-lbl {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
}

.kc-bench-substore { margin-top: 34px; }

.kc-bench-substore h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.kc-bench-substore > p {
    margin: 0;
    max-width: 72ch;
    font-size: 14.5px;
    color: var(--ks-koa-soft);
}

.kc-bench-substore code {
    font-family: var(--ks-mono);
    font-size: 0.92em;
    background: var(--ks-sand);
    border-radius: 5px;
    padding: 1px 5px;
}

.kc-bench-rows th[scope="row"] { font-family: var(--ks-mono); font-size: 13.5px; font-weight: 500; }

/* ---- a caveat that must not be missed ------------------------------------ */

.kc-bench-warn {
    margin: 22px 0 0;
    padding: 14px 18px;
    max-width: 82ch;
    background: var(--ks-sand);
    border-left: 4px solid var(--ks-amber);
    border-radius: 0 8px 8px 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ks-koa);
}

.kc-bench-warn b { color: var(--ks-koa); }

.kc-bench-warn code {
    font-family: var(--ks-mono);
    font-size: 0.92em;
    background: var(--ks-card);
    border-radius: 5px;
    padding: 1px 5px;
}

/* ---- one target ---------------------------------------------------------- */

.kc-bench-target + .kc-bench-target { margin-top: 60px; padding-top: 48px; border-top: 1px solid var(--ks-line); }
.kc-bench .kc-bench-target:first-of-type { margin-top: 30px; }

.kc-bench-target-head h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.kc-bench-target-head > p {
    margin: 0 0 8px;
    max-width: 78ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-bench-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
}

.kc-bench-badge-live { background: var(--ks-lagoon); color: #FCF6EA; }

.kc-bench-meta {
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
}

.kc-bench-meta code {
    background: var(--ks-sand);
    border-radius: 5px;
    padding: 1px 5px;
}

/* ---- the environment block ----------------------------------------------- */

.kc-bench-env {
    margin: 18px 0 0;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    overflow: hidden;
}

.kc-bench-env > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
}

.kc-bench-env > summary::-webkit-details-marker { display: none; }

.kc-bench-env > summary::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--ks-lagoon);
    border-bottom: 2px solid var(--ks-lagoon);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.kc-bench-env[open] > summary::before { transform: rotate(45deg); }
.kc-bench-env > summary:hover { background: var(--ks-sand); }
.kc-bench-env .kc-table { border: 0; border-radius: 0; border-top: 1px solid var(--ks-line); }
.kc-bench-env .kc-table td { font-size: 13.5px; color: var(--ks-koa-soft); }

/* ---- a group of routes --------------------------------------------------- */

.kc-bench-group { margin-top: 32px; }

.kc-bench-group h4 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.kc-bench-group-note {
    margin: 0 0 14px;
    max-width: 78ch;
    font-size: 13.5px;
    color: var(--ks-koa-soft);
}

/* ---- the results table --------------------------------------------------- */

.kc-bench-table thead th { vertical-align: bottom; }
.kc-bench-table th.kc-bench-right,
.kc-bench-table td.kc-bench-right { text-align: right; }

.kc-bench-unit {
    display: block;
    margin-top: 2px;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ks-koa-soft);
}

.kc-bench-table tbody th[scope="row"] { font-size: 14.5px; white-space: nowrap; }
.kc-bench-script { vertical-align: top; background: var(--ks-sand-soft); }

.kc-bench-cell {
    text-align: right;
    white-space: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
}

.kc-bench-p95 {
    display: block;
    font-family: var(--ks-mono);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ks-koa);
    font-variant-numeric: tabular-nums;
}

.kc-bench-spread {
    display: block;
    margin-top: 2px;
    font-family: var(--ks-mono);
    font-size: 11px;
    line-height: 1.3;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}

/* The lowest p95 in the row. The tint alone would be the only signal for a
   reader who cannot see it, so the cell also carries a bar on its left edge. */
.kc-bench-fastest {
    background: var(--ks-lagoon-mist);
    box-shadow: inset 3px 0 0 var(--ks-lagoon);
}

.kc-bench-fastest .kc-bench-p95 { color: var(--ks-lagoon-deep); font-weight: 700; }
.kc-bench-missing { background: var(--ks-sand-soft); }
.kc-bench-none { color: var(--ks-koa-soft); opacity: 0.5; font-family: var(--ks-mono); }

/* ---- reproduce recipe ---------------------------------------------------- */

.kc-bench-repro {
    max-width: 72ch;
    margin: 38px 0 0;
    padding: 26px 28px 22px;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
}

.kc-bench-repro h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.kc-bench-repro > p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--ks-koa-soft); }

.kc-bench-recipe {
    counter-reset: kc-bench-step;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.kc-bench-recipe li {
    position: relative;
    padding: 0 0 14px 30px;
    border-left: 2px solid var(--ks-line);
    margin-left: 9px;
}

.kc-bench-recipe li:last-child { padding-bottom: 0; border-left-color: transparent; }

.kc-bench-recipe li::before {
    counter-increment: kc-bench-step;
    content: counter(kc-bench-step);
    position: absolute;
    left: -10px;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ks-lagoon);
    color: #FCF6EA;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    line-height: 18px;
    text-align: center;
}

.kc-bench-recipe code {
    display: block;
    font-family: var(--ks-mono);
    font-size: 13.5px;
    color: var(--ks-koa);
    word-break: break-word;
}

.kc-bench-recipe span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
}

.kc-bench-repo-link { margin: 0; font-size: 14px; color: var(--ks-koa-soft); }
.kc-bench-repo-link a { font-family: var(--ks-mono); font-size: 0.95em; }

/* ---- history ------------------------------------------------------------- */

.kc-bench-history { font-size: 13.5px; }
.kc-bench-history th,
.kc-bench-history td { padding: 10px 13px; white-space: nowrap; }
.kc-bench-history code { font-family: var(--ks-mono); font-size: 0.92em; color: var(--ks-koa-soft); }
.kc-bench-history .kc-bench-badge { font-size: 10.5px; padding: 2px 8px; }

.kc-bench-build { font-size: 12.5px; color: var(--ks-koa-soft); }

/* ---- capacity ------------------------------------------------------------ */

.kc-bench-cap-peak {
    margin: 0 0 12px;
    font-size: 14.5px;
    color: var(--ks-koa);
}

.kc-bench-cap-peak b {
    font-family: var(--ks-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ks-lagoon-deep);
}

.kc-bench-capacity tbody th[scope="row"] { font-size: 14.5px; white-space: nowrap; }

.kc-bench-nocap {
    background: var(--ks-sand-soft);
    color: var(--ks-koa-soft);
    font-size: 13.5px;
}

/* ---- narrow screens ------------------------------------------------------
   The page itself never scrolls sideways: the matrix does, inside its own box. */

@media (max-width: 760px) {
    .kc-compare .kc-cmp-legend { font-size: 12.5px; gap: 6px 16px; }
    .kc-cmp { --kc-cmp-platform-width: 104px; font-size: 13px; }
    .kc-cmp th,
    .kc-cmp td { padding: 8px 10px; }
    .kc-cmp th.kc-cmp-feat { min-width: 168px; max-width: 200px; }
    .kc-cmp-group > summary { font-size: 15.5px; padding: 13px 15px; }
    .kc-cmp-card { padding: 18px 18px 16px; }
    .kc-rank-row { gap: 14px; padding: 16px 12px 16px 4px; }
    .kc-rank-num { font-size: 24px; }
    .kc-bench-table { font-size: 13px; }
    .kc-bench-table th,
    .kc-bench-table td { padding: 9px 11px; }
    .kc-bench-table tbody th[scope="row"] { white-space: normal; min-width: 130px; }
    .kc-bench-p95 { font-size: 14px; }
    .kc-bench-figure-num { font-size: 28px; }
    .kc-bench-target-head h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .kc-cmp-group > summary::before,
    .kc-bench-env > summary::before { transition: none; }
}

/* --------------------------------------------------------------------------
   Consent banner
   --------------------------------------------------------------------------
   grav-plugin-consent ships a neutral palette and inherits the body font, so
   it is already legible here — this block is what makes it look like it
   belongs to KahunaCart rather than merely sitting on top of it.

   Only custom properties. The plugin declares its own defaults inside
   `:where()`, which carries zero specificity, so a plain `.consent-root`
   selector wins no matter which stylesheet the browser loaded last. Nothing
   below touches a plugin class name, so a plugin update cannot break it.

   Note the prefix: `--consent-*` is the plugin's, `--ks-*` is ours, and the
   storefront owns `--kc-*`. Three namespaces, no collisions — which is the
   whole reason the comment at the top of this file exists.
   -------------------------------------------------------------------------- */

.consent-root {
    /* Type — Bricolage for the headings, Albert Sans for everything else,
       matching the rest of the site rather than the browser default. */
    --consent-font: var(--ks-body);
    --consent-font-heading: var(--ks-display);
    --consent-font-mono: var(--ks-mono);

    /* Surfaces. Card over Salt, so the banner reads as paper on the warm
       ground rather than a white rectangle punched through it. */
    --consent-bg: var(--ks-card);
    --consent-bg-sunken: var(--ks-sand-soft);
    --consent-fg: var(--ks-koa);
    --consent-muted: var(--ks-koa-soft);
    --consent-border: var(--ks-line);
    --consent-track: var(--ks-sand-deep);

    /* Board is the action colour everywhere else on the site — the same
       orange as "Notify me at launch" — so Accept and Reject wear it too. */
    --consent-accent: var(--ks-board);
    --consent-accent-hover: var(--ks-board-deep);
    --consent-accent-fg: #FFF6EA;

    /* Lagoon for focus, matching links rather than the button fill. */
    --consent-focus: color-mix(in oklab, var(--ks-lagoon) 55%, transparent);
    --consent-backdrop: color-mix(in oklab, var(--ks-koa) 55%, transparent);

    /* Shape. 11px is the .kc-btn radius; 10px is the panel radius used most
       often across the theme. */
    --consent-radius: 10px;
    --consent-radius-sm: 8px;
    --consent-btn-radius: 11px;
    --consent-shadow:
        0 1px 2px color-mix(in oklab, var(--ks-koa) 8%, transparent),
        0 14px 34px -10px color-mix(in oklab, var(--ks-koa) 26%, transparent);

    --consent-max-width: 1180px;
}

/* ── Contact page ─────────────────────────────────────────────────────── */
.kc-contact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 36px; align-items: start; margin-top: 8px; }
.kc-contact-side { display: grid; gap: 14px; }
.kc-contact-card { background: var(--ks-card); border: 1.5px solid var(--ks-line); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.kc-contact-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--ks-sand); color: var(--ks-lagoon); display: inline-flex; align-items: center; justify-content: center; }
.kc-contact-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.kc-contact-text { display: grid; gap: 3px; min-width: 0; }
.kc-contact-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #A08A6E; }
.kc-contact-value { font-size: 15px; font-weight: 600; color: var(--ks-koa); text-decoration: none; word-break: break-word; }
a.kc-contact-value:hover { color: var(--ks-lagoon); }
.kc-contact-hint { font-size: 14px; color: #6E5A44; line-height: 1.55; margin: 6px 2px 0; }
.kc-contact-form .kc-news-msg { margin: 0 0 18px; }
.kc-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.kc-contact-field { display: grid; gap: 6px; }
.kc-contact-field--wide { grid-column: 1 / -1; }
.kc-contact-field label { font-size: 14px; font-weight: 600; color: var(--ks-koa); }
.kc-contact-field .kc-news-input { flex: none; width: 100%; box-sizing: border-box; }
.kc-contact-field textarea.kc-news-input { resize: vertical; min-height: 150px; line-height: 1.5; }
.kc-contact-field select.kc-news-input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ks-koa) 50%), linear-gradient(135deg, var(--ks-koa) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.kc-contact-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 22px 0 0; }
.kc-contact-note { font-size: 13px; color: #6E5A44; }
@media (max-width: 760px) {
    .kc-contact { grid-template-columns: 1fr; gap: 26px; }
    .kc-contact-grid { grid-template-columns: 1fr; }
}

/* ── Help center: the other ways to get help (templates/helpdesk.html.twig) ── */
.kc-support-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 40px; }
.kc-support-card { background: var(--ks-card); border: 1.5px solid var(--ks-line); border-radius: 14px; padding: 16px; display: flex; align-items: flex-start; gap: 12px; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.kc-support-card:hover { border-color: var(--ks-lagoon); transform: translateY(-2px); }
.kc-support-card .kc-contact-icon { margin-top: 2px; }
.kc-support-text { display: grid; gap: 4px; min-width: 0; }
.kc-support-note { font-size: 13px; color: #6E5A44; line-height: 1.5; }
@media (max-width: 560px) { .kc-support-cards { grid-template-columns: 1fr; } }

/* ── Shop landing, laid out like a pricing page ───────────────────────── */
.kc-shop-plan { margin: 8px 0 12px; }
.kc-shop-plan-name { font-size: 22px; margin: 6px 0 12px; }
.kc-shop-plan-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.kc-shop-plan-actions form.kahunacart-buy.kc-shop-plan-buy { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.kc-shop-plan-more { font-weight: 600; color: var(--ks-lagoon); text-decoration: none; }
.kc-shop-plan-more:hover { text-decoration: underline; }
.kc-renew-link { margin-top: 14px; font-weight: 600; }
.kc-renew-card .kc-renew-link a { color: #fff; text-decoration: none; }
.kc-renew-card .kc-renew-link a:hover { text-decoration: underline; }
.kc-shop-section { margin-top: 56px; }
.kc-shop-section .kc-intro { max-width: 720px; margin-bottom: 22px; }
.kc-shop-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 22px; }
.kc-shop-chip { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--ks-sand); color: var(--ks-koa); }
.kc-shop-chip::before { content: "\2713\00a0"; color: var(--ks-lagoon); }
.kc-shop-faq .kc-faq { max-width: 820px; }
.kc-shop-cta { text-align: center; padding: 40px 0 8px; }
.kc-shop-cta .kc-intro { margin-left: auto; margin-right: auto; }
.kc-shop-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 0; }
@media (max-width: 760px) { .kc-shop-section { margin-top: 40px; } }

/* ── Docs readability fixes from the launch Lighthouse pass (12 Sept 2026) ──
   Alert titles and the previous/next labels were under 4.5:1, and links in
   running text had nothing but colour to tell them apart. */
.md-alert--note > .md-alert-title { color: #24559E; fill: #24559E; }
.md-alert--warning > .md-alert-title { color: #7F5700; fill: #7F5700; }
.md-alert--tip > .md-alert-title { color: #1E6B3A; fill: #1E6B3A; }
.md-alert--important > .md-alert-title { color: #6B3FA0; fill: #6B3FA0; }
.md-alert--caution > .md-alert-title { color: #A83A2A; fill: #A83A2A; }
.prev-next-nav .nav-button .label { color: var(--ks-koa-soft); }
#htmx-article p a:not(.kc-btn):not(.nav-button), #htmx-article li a:not(.kc-btn), #htmx-article td a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
#htmx-article p a:hover, #htmx-article li a:hover, #htmx-article td a:hover { text-decoration-color: currentColor; }

/* The newsroom's own paragraphs, under the hero intro. */
.kc-newsroom-copy { max-width: 760px; margin: 18px auto 0; }
.kc-newsroom-copy p { font-size: 15.5px; line-height: 1.6; color: var(--ks-koa-soft); margin: 0 0 12px; }
.kc-newsroom-copy a { color: var(--ks-lagoon); }

/* ── printing ───────────────────────────────────────────────────────────────
   A printed page is its content. The early-access ribbon, the site header and
   its menu, the footer and the skip link are left off; the page is black on
   white and uses the sheet's whole width rather than the screen's column.
   The shop's own parts are in kahuna-shop.css, and KahunaCart's stylesheet
   leaves its buttons and forms off by itself. */
@media print {
    .kc-ribbon,
    .kc-nav,
    .kc-menu-backdrop,
    .kc-footer,
    .kc-body > a[href="#main-content"] {
        display: none !important;
    }
    html, .kc-body {
        background: #fff !important;
        color: #000 !important;
    }
    .kc-wrap,
    .kc-page .kc-wrap {
        max-width: none;
        padding: 0;
    }
    .kc-body a {
        color: inherit;
        text-decoration: none;
    }
}
/* ==========================================================================
   KahunaCart interior pages: shared pieces
   --------------------------------------------------------------------------
   Loaded on every page after kahuna.css. Holds the framed screenshot used by
   templates/modular/shot.html.twig and shot-grid.html.twig, so the four
   interior pages (platform, features, developers, performance) show a
   picture the same way. Page-specific rules live in kahuna-page-*.css.
   Same rules as kahuna.css: `kc-` classes, `--ks-` properties, light-only.
   ========================================================================== */

/* Browser frame around a screenshot. Bar matches the admin mock-up on the
   homepage (.kc-am-top) so the two read as the same object. */
.kc-frame {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(43, 28, 12, 0.10), 0 2px 6px rgba(43, 28, 12, 0.06);
}
.kc-frame-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
}
.kc-frame-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.kc-frame-bar i:nth-child(1) { background: #CA5415; }
.kc-frame-bar i:nth-child(2) { background: #F6EAD7; border: 1px solid #E4D5BC; }
.kc-frame-bar i:nth-child(3) { background: #1A6F83; }
.kc-frame-url {
    margin-left: 8px;
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-koa-soft);
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 3px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.kc-frame-img { display: block; width: 100%; height: auto; }
.kc-frame-empty { aspect-ratio: 16 / 10; background: var(--ks-sand-soft); }
.kc-frame-pending { display: grid; place-items: center; padding: 24px; box-sizing: border-box; text-align: center; }
.kc-frame-pending span { font-size: 14px; opacity: .65; }

/* Screenshot feature: copy beside a frame. */
.kc-shot-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: center;
}
.kc-shot-flip .kc-shot-grid { grid-template-columns: 1.15fr 0.85fr; }
.kc-shot-flip .kc-shot-copy { order: 2; }
.kc-shot-flip .kc-shot-fig { order: 1; }
.kc-shot-fig { margin: 0; min-width: 0; }
.kc-shot-caption {
    margin-top: 12px;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa-soft);
    text-align: center;
}
.kc-shot-link { margin: 22px 0 0; font-weight: 600; }
.kc-shot-link a { text-decoration: none; }
.kc-shot-link a:hover { text-decoration: underline; }
.kc-h2-small { font-size: clamp(26px, 3.4vw, 36px); }
@media (max-width: 880px) {
    .kc-shot-grid,
    .kc-shot-flip .kc-shot-grid { grid-template-columns: 1fr; gap: 28px; }
    .kc-shot-flip .kc-shot-copy { order: 1; }
    .kc-shot-flip .kc-shot-fig { order: 2; }
}

/* Screenshot gallery. */
.kc-shots-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 22px; margin-top: 8px; }
.kc-shots-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.kc-shots-item { margin: 0; min-width: 0; }
.kc-shots-item figcaption { margin-top: 12px; }
.kc-shots-item figcaption b { display: block; font-family: var(--ks-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.kc-shots-item figcaption b a { color: inherit; text-decoration: none; }
.kc-shots-item figcaption b a:hover { color: var(--ks-lagoon); }
.kc-shots-item figcaption span { display: block; font-size: 14.5px; color: var(--ks-koa-soft); margin-top: 3px; }
@media (max-width: 880px) {
    .kc-shots-grid,
    .kc-shots-grid[data-columns="3"] { grid-template-columns: 1fr; }
}

/* A checklist bullet inside a screenshot section may contain inline <code>.
   kahuna.css lays .kc-checks li out as a flex row, which turns every text
   node into its own flex item and breaks the line around the code; here the
   tick is positioned instead so the bullet flows as one line of text. */
.kc-shot .kc-checks li { display: block; position: relative; padding-left: 24px; }
.kc-shot .kc-checks li::before { position: absolute; left: 0; top: 0; }
.kc-shot .kc-checks li code { font-family: var(--ks-mono); font-size: 0.9em; background: var(--ks-sand); border-radius: 5px; padding: 1px 6px; }

/* Screenshot zoom (js/kahuna-pages.js). The framed picture is clickable; the
   overlay dims the page and the figure grows out of the frame into the middle
   of the screen. Reduced motion: no transition, the picture just appears. */
.kc-zoomable { cursor: zoom-in; }
.kc-zoomable:focus-visible { outline: 3px solid var(--ks-lagoon); outline-offset: 3px; }
.kc-zoom-source { visibility: hidden; }
html.kc-zoom-open { overflow: hidden; }
.kc-zoom {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    background: rgba(43, 28, 12, 0);
    cursor: zoom-out;
    transition: background 320ms ease;
}
.kc-zoom.kc-zoom-in { background: rgba(43, 28, 12, 0.82); }
.kc-zoom-fig {
    margin: 0;
    max-width: min(1600px, 92vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform-origin: center center;
    will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {
    .kc-zoom-fig { transition: transform 380ms cubic-bezier(0.22, 0.9, 0.36, 1), opacity 240ms ease; }
}
.kc-zoom-img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 40px);
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
    background: var(--ks-card);
}
.kc-zoom-cap {
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: #E8DECF;
    text-align: center;
}
.kc-zoom-close {
    position: fixed;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(246, 234, 215, 0.14);
    color: #F6EAD7;
    font-size: 28px;
    line-height: 44px;
    cursor: pointer;
}
.kc-zoom-close:hover { background: rgba(246, 234, 215, 0.28); }
.kc-zoom-close:focus-visible { outline: 3px solid #FFD9A8; outline-offset: 2px; }

/* ==========================================================================
   Add-on cards (templates/modular/addons-cards.html.twig)
   --------------------------------------------------------------------------
   The /add-ons index: three cards, each an icon, a name that links, a pitch,
   three points and an arrow link. Same card metrics as .kc-cmp-card so the
   two grids read as one family.
   ========================================================================== */

.kc-addon-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.kc-addon-cards.kc-pushed { margin-top: 36px; }

@media (min-width: 720px)  { .kc-addon-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .kc-addon-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .kc-addon-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }

.kc-addon-card {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 24px 22px 20px;
}

.kc-addon-art {
    display: grid;
    place-items: center;
    background: var(--ks-salt);
    border-radius: 7px;
    margin-bottom: 22px;
    padding: 8px;
}
.kc-addon-art img { display: block; width: 180px; max-width: 100%; height: auto; }

.kc-page-hero-art img { display: block; width: 200px; height: auto; margin: 0 auto 24px; }
.kc-page-hero-copy { min-width: 0; }
.kc-page-hero-note { margin: 18px auto 0; max-width: 60ch; font-size: 14px; color: var(--ks-koa-soft); }

@media (min-width: 800px) {
    .kc-page-hero--art .kc-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
        align-items: center;
        gap: 48px;
    }
    .kc-page-hero--art .kc-page-hero-copy { grid-column: 1; grid-row: 1; }
    .kc-page-hero-art { grid-column: 2; grid-row: 1; }
    .kc-page-hero-art img { width: 100%; margin: 0; }
    .kc-page-hero--art,
    .kc-page-hero--art .kc-kicker,
    .kc-page-hero--art .kc-intro { text-align: left; }
    .kc-page-hero--art .kc-intro { margin: 0; }
    .kc-page-hero--art .kc-ctas { justify-content: flex-start; }
    .kc-page-hero--art .kc-page-hero-note { margin-left: 0; text-align: left; }
}

.kc-addon-card .kc-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ks-lagoon-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.kc-addon-card .kc-ic svg {
    width: 22px;
    height: 22px;
    stroke: var(--ks-lagoon-deep);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kc-addon-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.kc-addon-card h3 a { color: var(--ks-koa); text-decoration: none; }
.kc-addon-card h3 a:hover { color: var(--ks-lagoon); }

.kc-addon-soon { margin: -2px 0 10px; }
.kc-addon-badge {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--ks-lagoon-deep);
    background: var(--ks-lagoon-mist);
    border: 1px solid var(--ks-lagoon-mist);
}

.kc-addon-pitch { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--ks-koa); }

.kc-addon-points {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ks-line);
}

.kc-addon-points li {
    position: relative;
    padding: 10px 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
}

.kc-addon-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--ks-lagoon);
}

.kc-addon-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-lagoon);
    text-decoration: none;
}

.kc-addon-more:hover { text-decoration: underline; }

.kc-addon-note {
    margin: 22px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}

.kc-addon-note a { color: var(--ks-lagoon); }

@media (max-width: 640px) {
    .kc-addon-card { padding: 20px 18px 18px; }
}

/* ---- /affiliates: the program block -------------------------------------
   The KahunaCart Affiliates add-on's program block, from the theme's copy of
   its partial (partials/kahunacart-affiliates/program.html.twig), drawn as a
   fact card: the terms as label and value rows in the /features facts style,
   then the Apply button. The terms list is the add-on's own markup (a <ul> of
   <li><strong>label</strong><span>value</span></li>), so these rules name its
   classes. The add-on's stylesheet is not loaded on this page. */

.kc-aff-program-wrap.kc-pushed { margin-top: 36px; }
.kc-aff-program-wrap { max-width: 880px; }

.kc-aff-program {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 26px 30px 24px;
}
.kc-aff-program .kahunacart-affiliates-terms {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kc-aff-program .kahunacart-affiliates-terms > li {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 14px;
    align-items: baseline;
    margin: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--ks-line);
}
.kc-aff-program .kahunacart-affiliates-terms > li:first-child { padding-top: 0; }
.kc-aff-program .kahunacart-affiliates-terms > li > strong {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    line-height: 1.5;
}
.kc-aff-program .kahunacart-affiliates-terms > li > span {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ks-koa);
}
.kc-aff-program-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 22px 0 0;
}
.kc-aff-program-actions span,
.kc-aff-program-closed {
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-aff-program-closed { margin: 18px 0 0; }
.kc-aff-program-wrap .kc-aff-program-terms { border-top: 0; padding-top: 0; margin-top: 16px; }

@media (max-width: 640px) {
    .kc-aff-program { padding: 20px 20px 18px; }
    .kc-aff-program .kahunacart-affiliates-terms > li { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
}
/* ==========================================================================
   KahunaCart /platform page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css. Everything here is scoped to
   the two templates only this page uses, templates/modular/plat-compare and
   plat-stack, under .kc-plat-compare and .kc-plat-stack. The homepage's
   platform split already owns .kc-plat-grid, .kc-plat-points, .kc-plat-card
   and .kc-plat-stats in kahuna.css, so nothing here reuses those names.
   Same rules as kahuna.css: `kc-` classes, `--ks-` properties, light-only.
   ========================================================================== */

.kc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Hosted cart vs KahunaCart on Grav
   --------------------------------------------------------------------------
   A three-column grid drawn as a table: the item, the hosted answer, ours.
   Our column sits on a Lagoon mist tint so the eye lands there. Below 760px
   each row stacks and every cell repeats its column heading from data-col.
   -------------------------------------------------------------------------- */

.kc-plat-compare-table {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(43, 28, 12, 0.04);
}
.kc-plat-compare-table.kc-pushed { margin-top: 36px; }

.kc-plat-compare-head,
.kc-plat-compare-row {
    display: grid;
    grid-template-columns: 200px 1fr 1.15fr;
}
.kc-plat-compare-row { border-top: 1px solid var(--ks-line); }
.kc-plat-compare-row:hover { background: var(--ks-sand-soft); }

.kc-plat-compare-cell {
    padding: 18px 22px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
    min-width: 0;
}
.kc-plat-compare-head .kc-plat-compare-cell {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 16px 22px;
    background: var(--ks-sand);
}
.kc-plat-compare-head .kc-plat-compare-hosted { color: var(--ks-koa-soft); }
.kc-plat-compare-head .kc-plat-compare-ours { color: var(--ks-lagoon-deep); background: var(--ks-lagoon-mist); }

.kc-plat-compare-row .kc-plat-compare-label {
    font-family: var(--ks-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    line-height: 1.3;
}
.kc-plat-compare-row .kc-plat-compare-ours {
    color: var(--ks-koa);
    background: rgba(221, 234, 232, 0.35);
    border-left: 1px solid var(--ks-line);
}
.kc-plat-compare-row:hover .kc-plat-compare-ours { background: rgba(221, 234, 232, 0.6); }
.kc-plat-compare-cell code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    border-radius: 6px;
    padding: 1px 6px;
}

.kc-plat-compare-note {
    margin: 16px 4px 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
    max-width: 78ch;
}

@media (max-width: 960px) {
    .kc-plat-compare-head,
    .kc-plat-compare-row { grid-template-columns: 160px 1fr 1.15fr; }
    .kc-plat-compare-cell { padding: 16px 18px; font-size: 14.5px; }
}

@media (max-width: 760px) {
    .kc-plat-compare-head { display: none; }
    .kc-plat-compare-row { grid-template-columns: 1fr; }
    .kc-plat-compare-row .kc-plat-compare-label {
        padding: 18px 20px 4px;
        font-size: 17px;
    }
    .kc-plat-compare-row .kc-plat-compare-hosted,
    .kc-plat-compare-row .kc-plat-compare-ours {
        padding: 10px 20px 16px;
        border-left: 0;
    }
    .kc-plat-compare-row .kc-plat-compare-ours {
        background: rgba(221, 234, 232, 0.35);
        border-top: 1px solid var(--ks-line);
    }
    .kc-plat-compare-row [data-col]::before {
        content: attr(data-col);
        display: block;
        font-family: var(--ks-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ks-koa-soft);
        margin-bottom: 6px;
        padding-top: 8px;
    }
    .kc-plat-compare-row .kc-plat-compare-ours::before { color: var(--ks-lagoon-deep); }
}

/* --------------------------------------------------------------------------
   The stack
   --------------------------------------------------------------------------
   The homepage draws this diagram small inside a dark card. Here it is the
   section: a Sand band with the layers at full width on a light ground, the
   theme in Koa ink on top, content in a plain card beside commerce in Lagoon,
   the admin on mist, the API on a dashed outline.
   -------------------------------------------------------------------------- */

.kc-plat-stack {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}

.kc-plat-stack-diagram {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 860px;
    margin: 0 auto;
}
.kc-plat-stack-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.kc-plat-layer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 68px;
    padding: 18px 24px;
    border-radius: 14px;
    border: 1px solid var(--ks-line);
    background: var(--ks-card);
    color: var(--ks-koa);
    text-align: center;
}
.kc-plat-layer b {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.kc-plat-layer span {
    font-family: var(--ks-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--ks-koa-soft);
}

.kc-plat-layer-theme { background: var(--ks-koa); border-color: var(--ks-koa); color: #FFF6EA; }
.kc-plat-layer-theme span { color: #D8C8B2; }
.kc-plat-layer-grav { padding-top: 22px; padding-bottom: 22px; }
.kc-plat-layer-store { background: var(--ks-lagoon); border-color: var(--ks-lagoon); color: #fff; padding-top: 22px; padding-bottom: 22px; }
.kc-plat-layer-store span { color: #CFE3E1; }
.kc-plat-layer-admin { background: var(--ks-lagoon-mist); border-color: #C9DDDA; }
.kc-plat-layer-admin span { color: var(--ks-lagoon-deep); }
.kc-plat-layer-api { background: transparent; border-style: dashed; border-color: var(--ks-koa-soft); }

/* What lives where. */
.kc-plat-stack-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 860px;
    margin: 40px auto 0;
}
.kc-plat-stack-list {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 26px 22px;
}
.kc-plat-stack-list h3 {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-plat-stack-files h3 { color: var(--ks-koa-soft); }
.kc-plat-stack-db h3 { color: var(--ks-lagoon-deep); }
.kc-plat-stack-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kc-plat-stack-list li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ks-koa);
}
.kc-plat-stack-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--ks-sand-deep);
    border: 1px solid var(--ks-line);
}
.kc-plat-stack-db li::before { background: var(--ks-lagoon); border-color: var(--ks-lagoon); }
.kc-plat-stack-list code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    border-radius: 6px;
    padding: 1px 6px;
}

.kc-plat-stack-note {
    max-width: 860px;
    margin: 18px auto 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-plat-stack-note code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 6px;
    padding: 1px 6px;
}

@media (max-width: 640px) {
    .kc-plat-stack-split { grid-template-columns: 1fr; }
    .kc-plat-stack-lists { grid-template-columns: 1fr; margin-top: 32px; }
    .kc-plat-layer { padding: 16px 18px; min-height: 60px; }
    .kc-plat-layer b { font-size: 16.5px; }
}
/* ==========================================================================
   KahunaCart /features page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css, so everything here sits under
   a `kc-featp-*` class. The shot sections and the hero come from the shared
   templates; this file adds the jump bar, the fact lists, the add-on tag and
   the honest-gaps grid. kc- classes, --ks- properties, light-only.
   ========================================================================== */

/* ---- jump bar ------------------------------------------------------------ */

.kc-featp-nav {
    position: sticky;
    top: var(--ks-featp-top, var(--ks-nav-h));
    z-index: 40;
    margin-top: 36px;
    background: rgba(252, 246, 234, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
    transition: transform 240ms ease, opacity 240ms ease;
}
.kc-featp-nav-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}
.kc-featp-nav-in {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 9px;
    padding-bottom: 9px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.kc-featp-nav-in::-webkit-scrollbar { display: none; }
.kc-featp-nav-label {
    flex: none;
    margin-right: 10px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-featp-nav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--ks-koa-soft);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.kc-featp-nav a svg {
    flex: none;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-featp-nav a:hover { color: var(--ks-koa); background: var(--ks-sand); }
.kc-featp-nav a.kc-featp-on {
    color: #FCF6EA;
    background: var(--ks-lagoon);
    border-color: var(--ks-lagoon);
}

/* Anchor targets after the bar clear both the brand bar and the jump bar. */
.kc-featp-nav ~ section[id] { scroll-margin-top: calc(var(--ks-featp-top, var(--ks-nav-h)) + 52px); }

/* Fallbacks for the brand bar's second row of links when the script has not
   measured it: 76 + 43 down to 1000px, 64 + 43 below 900px. */
@media (max-width: 1000px) {
    .kc-featp-nav { top: var(--ks-featp-top, 119px); }
    .kc-featp-nav ~ section[id] { scroll-margin-top: calc(var(--ks-featp-top, 119px) + 44px); }
}
@media (max-width: 900px) {
    .kc-featp-nav { top: var(--ks-featp-top, 108px); margin-top: 28px; }
    .kc-featp-nav-label { display: none; }
    .kc-featp-nav-in { gap: 4px; padding-top: 8px; padding-bottom: 8px; }
    .kc-featp-nav a { padding: 7px 12px; font-size: 13.5px; }
    .kc-featp-nav ~ section[id] { scroll-margin-top: calc(var(--ks-featp-top, 108px) + 44px); }
}

/* ---- fact list ----------------------------------------------------------- */

.kc-featp-facts { padding: 0 0 88px; }
.kc-shot + .kc-featp-facts { margin-top: -44px; }

.kc-featp-facts-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 26px 30px 24px;
}
.kc-featp-facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 44px;
    margin: 0;
}
.kc-featp-facts-grid > div {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--ks-line);
}
.kc-featp-facts-grid > div:first-child,
.kc-featp-facts-grid > div:nth-child(2) { padding-top: 0; }
.kc-featp-facts-grid > div:last-child,
.kc-featp-facts-grid > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
.kc-featp-facts-grid dt {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    line-height: 1.5;
}
.kc-featp-facts-grid dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ks-koa);
}
.kc-featp-facts-note {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--ks-koa-soft);
}
.kc-featp-facts-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 22px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ks-line);
    font-size: 14.5px;
    font-weight: 600;
}
.kc-featp-facts-links span {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-featp-facts-links a { text-decoration: none; }
.kc-featp-facts-links a:hover { text-decoration: underline; }
.kc-featp-facts-links em { font-style: normal; font-family: var(--ks-mono); }

@media (max-width: 880px) {
    .kc-featp-facts { padding-bottom: 72px; }
    .kc-shot + .kc-featp-facts { margin-top: -40px; }
    .kc-featp-facts-card { padding: 20px 20px 18px; }
    .kc-featp-facts-grid { grid-template-columns: 1fr; gap: 0; }
    .kc-featp-facts-grid > div { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
    .kc-featp-facts-grid > div:nth-child(2) { padding-top: 12px; }
    .kc-featp-facts-grid > div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--ks-line); padding-bottom: 12px; }
}

/* ---- add-on tag inside a checklist bullet -------------------------------- */

.kc-featp-addon {
    display: inline-block;
    vertical-align: 2px;
    margin: 0 2px;
    padding: 1px 8px;
    border: 1px solid var(--ks-amber);
    border-radius: 999px;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-amber);
    line-height: 1.5;
}

/* ---- honest gaps --------------------------------------------------------- */

.kc-featp-gaps {
    background: var(--ks-sand-soft);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
}
.kc-featp-gaps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.kc-featp-gap {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 14px;
    padding: 22px 22px 20px;
}
.kc-featp-gap h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.kc-featp-gap p {
    flex: 1;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
}
.kc-featp-gap-tag {
    display: inline-block;
    align-self: flex-start;
    margin-top: 16px;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-amber);
}

@media (max-width: 960px) { .kc-featp-gaps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kc-featp-gaps-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
   KahunaCart /developers page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css, so every rule here is scoped
   under a `kc-devp-*` class. Same rules as kahuna.css: `kc-` classes, `--ks-`
   properties, light-only, no Tailwind utilities.

   The dark code blocks copy the homepage terminal's palette (kahuna-home.css
   `.kc-term*`) under their own names, so this page does not depend on the
   homepage stylesheet being present. Syntax colours come from the codesh
   plugin's kahuna-koa theme, not from rules here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: dark code blocks
   -------------------------------------------------------------------------- */

.kc-devp-term {
    background: var(--ks-koa);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.18);
}
.kc-devp-term-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: #3A281A;
    border-bottom: 1px solid rgba(246, 234, 215, 0.12);
}
.kc-devp-term-top i { width: 9px; height: 9px; border-radius: 50%; display: block; background: rgba(246, 234, 215, 0.25); }
.kc-devp-term-top i:first-child { background: var(--ks-board); }
.kc-devp-term-top span {
    margin-left: 8px;
    font-family: var(--ks-mono);
    font-size: 11px;
    color: #C9B9A4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The code itself is rendered by the codesh plugin (Phiki, kahuna-koa theme
   from user/data/codesh/themes), one `.codesh-block` per sample. These three
   frames own the ground and the padding, so the block's own chrome is turned
   off. Selectors start with `.kc-body` to beat the docs-page codesh rules in
   kahuna.css on specificity. Long lines scroll inside the block. */
.kc-devp-term-body,
.kc-devp-mini,
.kc-devp-json {
    display: grid;
    gap: 12px;
    margin: 0;
    min-width: 0;
    font-family: var(--ks-mono);
    font-size: 13.5px;
    line-height: 1.6;
    color: #E8DECF;
}
.kc-devp-term-body { padding: 16px 0 18px; }
.kc-devp-mini,
.kc-devp-json {
    background: var(--ks-koa);
    border-radius: 12px;
    padding: 12px 0 14px;
    font-size: 12.5px;
}
.kc-devp-mini { margin-top: 14px; }

.kc-body .kc-devp-term .codesh-block,
.kc-body .kc-devp-mini .codesh-block,
.kc-body .kc-devp-json .codesh-block {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
}
.kc-body .kc-devp-term .codesh-block pre.phiki,
.kc-body .kc-devp-mini .codesh-block pre.phiki,
.kc-body .kc-devp-json .codesh-block pre.phiki {
    background-color: transparent !important;
    margin: 0;
    padding: 0 20px;
    font-family: var(--ks-mono);
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
}
.kc-body .kc-devp-mini .codesh-block pre.phiki,
.kc-body .kc-devp-json .codesh-block pre.phiki { padding: 0 16px; }
/* The API cards are narrow, and their samples are short JSON objects and one
   long error sentence, so those wrap instead of scrolling. */
.kc-body .kc-devp-json .codesh-block pre.phiki { white-space: pre-wrap; }

/* Lines that are not code: the doctor's status rows, a summary, a comment. */
.kc-devp-lines {
    padding: 0 20px;
    white-space: pre;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.kc-devp-mini .kc-devp-lines,
.kc-devp-json .kc-devp-lines { padding: 0 16px; }
.kc-devp-line { display: block; min-height: 1.6em; }
.kc-devp-l-out { color: #C9B9A4; }
.kc-devp-note { color: #A89880; }
.kc-devp-tag { color: #7CC4B8; font-weight: 700; margin-right: 8px; }
.kc-devp-tag-warn { color: #FFD9A8; }

/* Links under a card or a panel. */
.kc-devp-link { margin: 18px 0 0; font-weight: 600; font-size: 15px; }
.kc-devp-link a { text-decoration: none; }
.kc-devp-link a:hover { text-decoration: underline; }

/* Inline code on the sand ground. */
.kc-devp-apis code:not(pre code),
.kc-devp-addons code:not(pre code),
.kc-devp-code .kc-devp-caption code {
    font-family: var(--ks-mono);
    font-size: 0.9em;
    background: var(--ks-sand);
    border-radius: 6px;
    padding: 1px 6px;
    color: var(--ks-lagoon-deep);
}

/* --------------------------------------------------------------------------
   Two APIs
   -------------------------------------------------------------------------- */

.kc-devp-apis-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
    align-items: stretch;
}
.kc-devp-api {
    display: flex;
    flex-direction: column;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 28px 28px 26px;
    min-width: 0;
}
.kc-devp-api > * { flex: none; }
.kc-devp-api h3 { font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.kc-devp-api h4 {
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 26px 0 10px;
}
.kc-devp-api-text { font-size: 15px; color: var(--ks-koa-soft); margin: 0; }
.kc-devp-api-note { font-size: 14px; color: var(--ks-koa-soft); margin: 12px 0 0; }

.kc-devp-badge {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-lagoon-deep);
    background: var(--ks-lagoon-mist);
    border-radius: 999px;
    padding: 4px 12px;
    margin: 0 0 14px;
}
.kc-devp-badge-admin { color: #8A4A12; background: #F3DEC9; }

/* Endpoint table: scrolls inside its own box below 560px. */
.kc-devp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kc-devp-endpoints {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 440px;
}
.kc-devp-endpoints th {
    text-align: left;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    padding: 0 10px 8px 0;
    border-bottom: 1px solid var(--ks-line);
}
.kc-devp-endpoints td {
    padding: 7px 10px 7px 0;
    border-bottom: 1px solid var(--ks-line);
    vertical-align: top;
    color: var(--ks-koa-soft);
}
.kc-devp-endpoints tr:last-child td { border-bottom: 0; }
.kc-devp-apis .kc-devp-endpoints td code:not(pre code) {
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa);
    background: none;
    padding: 0;
    white-space: nowrap;
}
.kc-devp-method {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 2px 7px;
    min-width: 54px;
    text-align: center;
}
.kc-devp-method-get { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-devp-method-post { background: #F3DEC9; color: #8A4A12; }
.kc-devp-method-patch { background: #F1E7C8; color: #7A5600; }
.kc-devp-method-delete { background: #F5D9D2; color: #8E2E1A; }

/* Admin card pieces. */
.kc-devp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 22px 0 0;
}
.kc-devp-stats div {
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    padding: 12px 12px 10px;
    text-align: center;
}
.kc-devp-stats dt {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--ks-board);
    line-height: 1;
}
.kc-devp-stats dd {
    margin: 4px 0 0;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-devp-families {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kc-devp-families li {
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa);
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    padding: 5px 12px;
}
.kc-devp-points { margin-top: 24px; }
.kc-devp-points li { font-size: 14.5px; color: var(--ks-koa-soft); }

/* Pinned to the foot of the admin card, so the two cards end together. */
.kc-devp-callout {
    margin: 26px 0 0;
    padding: 14px 18px;
    background: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    border-left: 4px solid var(--ks-board);
    border-radius: 12px;
    font-size: 14.5px;
    color: var(--ks-koa-soft);
}
.kc-devp-api .kc-devp-callout { margin-top: auto; padding-top: 14px; }
.kc-devp-api .kc-devp-link + .kc-devp-callout { margin-top: auto; }
.kc-devp-api .kc-devp-link { margin-bottom: 26px; }
.kc-devp-api .kc-devp-link:last-child { margin-bottom: 0; }
.kc-devp-callout b { color: var(--ks-koa); }

@media (max-width: 960px) {
    .kc-devp-apis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kc-devp-api { padding: 22px 18px 20px; }
    .kc-devp-stats { grid-template-columns: repeat(2, 1fr); }

    /* The endpoint table becomes a list: method and path on one line, the
       answer under them, so nothing has to scroll sideways on a phone. */
    .kc-devp-endpoints { min-width: 0; }
    .kc-devp-endpoints thead { display: none; }
    .kc-devp-endpoints,
    .kc-devp-endpoints tbody,
    .kc-devp-endpoints tr { display: block; }
    .kc-devp-endpoints tr { padding: 9px 0; border-bottom: 1px solid var(--ks-line); }
    .kc-devp-endpoints tr:last-child { border-bottom: 0; }
    .kc-devp-endpoints td { display: inline; padding: 0; border: 0; }
    .kc-devp-endpoints td:nth-child(2) { margin-left: 8px; }
    .kc-devp-endpoints td:nth-child(3) { display: block; padding-top: 4px; font-size: 13px; }
    .kc-devp-apis .kc-devp-endpoints td code:not(pre code) { white-space: normal; overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   Code samples: tabs
   -------------------------------------------------------------------------- */

.kc-devp-tabs { margin-top: 4px; }
.kc-devp-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 5px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 14px;
    width: fit-content;
    max-width: 100%;
}
.kc-devp-tablist [role="tab"] {
    appearance: none;
    border: 0;
    background: none;
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
}
.kc-devp-tablist [role="tab"]:hover { color: var(--ks-koa); }
.kc-devp-tablist [role="tab"][aria-selected="true"] {
    background: var(--ks-card);
    color: var(--ks-koa);
    box-shadow: 0 1px 3px rgba(43, 28, 12, 0.10);
}

/* Without the script every panel stacks, each with its own title. With it,
   the strip carries the names, so the per-panel title goes away. */
.kc-devp-panel + .kc-devp-panel { margin-top: 44px; }
.kc-devp-tabs-js .kc-devp-panel + .kc-devp-panel { margin-top: 0; }
.kc-devp-panel-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.kc-devp-tabs-js .kc-devp-panel-title { display: none; }
.kc-devp-caption { font-size: 15px; color: var(--ks-koa-soft); max-width: 78ch; margin: 0 0 18px; }
.kc-devp-panel { min-width: 0; }
.kc-devp-panel:focus-visible { outline: 3px solid var(--ks-lagoon); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 560px) {
    .kc-devp-tablist { width: 100%; gap: 4px; }
    .kc-devp-tablist [role="tab"] { padding: 8px 12px; font-size: 13.5px; flex: 1 1 auto; }
    .kc-devp-term-body { font-size: 12px; padding: 14px 0 16px; }
    .kc-body .kc-devp-term .codesh-block pre.phiki,
    .kc-devp-term .kc-devp-lines { padding: 0 14px; }
}

/* --------------------------------------------------------------------------
   Build an add-on
   -------------------------------------------------------------------------- */

.kc-devp-addons-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 20px;
    align-items: start;
}
.kc-devp-can {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 26px 28px;
    min-width: 0;
}
.kc-devp-can h3 { font-size: 19px; font-weight: 800; margin: 0 0 16px; }
.kc-devp-can ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kc-devp-can li {
    display: grid;
    gap: 2px;
    padding: 11px 0;
    border-top: 1px solid var(--ks-line);
}
.kc-devp-can li:first-child { border-top: 0; padding-top: 0; }
.kc-devp-can li b { font-size: 15px; }
.kc-devp-can li span { font-size: 13.5px; color: var(--ks-koa-soft); }

.kc-devp-steps { display: grid; gap: 14px; min-width: 0; }
.kc-devp-step {
    position: relative;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 24px 26px 24px 70px;
    min-width: 0;
}
.kc-devp-step-num {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ks-lagoon);
    color: #F6EAD7;
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 14px;
}
.kc-devp-step h3 { font-size: 18px; font-weight: 700; margin: 2px 0 8px; }
.kc-devp-step p { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0; }

.kc-devp-contract {
    margin-top: 20px;
    background: var(--ks-lagoon-deep);
    color: #F6EAD7;
    border-radius: 18px;
    padding: 30px 32px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 28px;
    align-items: center;
}
.kc-devp-contract .kc-kicker { color: #A8CBCC; margin-bottom: 8px; }
.kc-devp-contract h3 { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.kc-devp-contract p { font-size: 15px; color: #BAD3D2; margin: 0; }
.kc-devp-contract-links { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.kc-devp-contract-links a { color: #F6EAD7; font-weight: 600; text-decoration: none; }
.kc-devp-contract-links a:hover { color: #fff; text-decoration: underline; }
.kc-devp-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kc-devp-chips li {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(246, 234, 215, 0.12);
    border: 1px solid rgba(246, 234, 215, 0.22);
    border-radius: 999px;
    padding: 6px 13px;
}

@media (max-width: 960px) {
    .kc-devp-addons-grid,
    .kc-devp-contract { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kc-devp-can { padding: 22px 18px; }
    .kc-devp-step { padding: 22px 18px 22px 60px; }
    .kc-devp-step-num { left: 16px; top: 22px; }
    .kc-devp-contract { padding: 24px 20px; }
}
/* ==========================================================================
   KahunaCart /performance page
   --------------------------------------------------------------------------
   Loaded on every page after kahuna-pages.css; every rule here is scoped under
   a `kc-perfp-` class so nothing leaks. Same rules as kahuna.css: `kc-`
   classes, `--ks-` properties, light-only.

   Chart conventions follow the homepage: Lagoon for the current build,
   Sand-deep with Amber figures for "before", axes from zero, every value
   printed, tabular numerals. The chart rules are copied here rather than
   shared with kahuna-home.css, which only the homepage loads.
   ========================================================================== */

/* ---- headline figures ----------------------------------------------------- */

.kc-perfp-head {
    background: var(--ks-sand);
    border-top: 1px solid var(--ks-line);
    border-bottom: 1px solid var(--ks-line);
    margin-top: 36px;
    padding: 36px 0 30px;
}
.kc-perfp-head-in {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}
.kc-perfp-fig {
    display: block;
    padding: 6px 18px;
    color: inherit;
    text-decoration: none;
    border-left: 1px solid var(--ks-line);
}
.kc-perfp-fig:first-child { border-left: 0; }
.kc-perfp-fig-num {
    display: block;
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: clamp(40px, 5.6vw, 64px);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ks-lagoon-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kc-perfp-fig-num small {
    font-family: var(--ks-mono);
    font-size: 0.34em;
    font-weight: 600;
    letter-spacing: 0;
    margin-left: 0.18em;
    color: var(--ks-lagoon);
    vertical-align: 0.12em;
}
.kc-perfp-fig-lbl {
    display: block;
    margin-top: 10px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.45;
    color: var(--ks-koa-soft);
}
a.kc-perfp-fig:hover .kc-perfp-fig-num { color: var(--ks-board); }
a.kc-perfp-fig:hover .kc-perfp-fig-lbl { color: var(--ks-koa); }
.kc-perfp-head-foot {
    margin: 24px auto 0;
    max-width: 78ch;
    text-align: center;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-perfp-head-foot code { font-family: inherit; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 5px; padding: 0 5px; }
.kc-perfp-head-foot a { color: var(--ks-lagoon); }

@media (max-width: 720px) {
    .kc-perfp-head { padding: 26px 0 22px; }
    .kc-perfp-head-in { grid-template-columns: 1fr; row-gap: 22px; }
    .kc-perfp-fig { border-left: 0; padding: 0 8px; }
    .kc-perfp-fig-num { font-size: 48px; }
    .kc-perfp-head-foot { text-align: left; }
}

/* ---- why it is fast ------------------------------------------------------- */

.kc-perfp-why-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 44px;
}
.kc-perfp-why-list.kc-perfp-pushed { margin-top: 34px; }
.kc-perfp-why-item { display: flex; gap: 16px; align-items: flex-start; }
.kc-perfp-why-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
    display: grid;
    place-items: center;
}
.kc-perfp-why-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kc-perfp-why-item h3 {
    margin: 6px 0 6px;
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.kc-perfp-why-item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ks-koa-soft); }

@media (max-width: 760px) {
    .kc-perfp-why-list { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- the route table ------------------------------------------------------ */

/* The table scrolls inside .kc-cmp-scroll (kahuna.css) on a phone; the
   min-width keeps the four columns readable instead of crushing them. */
.kc-perfp-table { min-width: 560px; }
.kc-perfp-table thead th { vertical-align: bottom; }
.kc-perfp-table tbody th[scope="row"] { font-size: 14.5px; white-space: nowrap; }
.kc-perfp-num { text-align: right; }
.kc-perfp-table th.kc-perfp-num,
.kc-perfp-table td.kc-perfp-num { text-align: right; }
.kc-perfp-table td.kc-perfp-num {
    font-family: var(--ks-mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 11px;
    padding-bottom: 11px;
}
.kc-perfp-unit {
    display: block;
    margin-top: 2px;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ks-koa-soft);
}
.kc-perfp-table .kc-perfp-group th {
    background: var(--ks-sand-soft);
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 400;
}
.kc-perfp-table .kc-perfp-group b { display: block; font-family: var(--ks-display); font-size: 15px; font-weight: 700; color: var(--ks-koa); }
.kc-perfp-table .kc-perfp-group span { display: block; margin-top: 2px; font-size: 13px; color: var(--ks-koa-soft); white-space: normal; }
/* The lowest p95 in the row. The tint would be the only signal for someone
   who cannot see it, so the cell also carries a bar and a hidden word. */
.kc-perfp-table td.kc-perfp-fast {
    background: var(--ks-lagoon-mist);
    box-shadow: inset 3px 0 0 var(--ks-lagoon);
    color: var(--ks-lagoon-deep);
    font-weight: 700;
}
.kc-perfp-table td.kc-perfp-none { color: var(--ks-koa-soft); font-size: 12.5px; font-family: var(--ks-body); }
.kc-perfp-meta {
    margin: 14px 0 0;
    max-width: 78ch;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ks-koa-soft);
}
.kc-perfp-meta code { font-family: inherit; background: var(--ks-sand); border-radius: 5px; padding: 0 5px; }
.kc-perfp-meta a { color: var(--ks-lagoon); }
.kc-perfp-note {
    margin: 22px 0 0;
    max-width: 72ch;
    padding: 14px 18px;
    border-left: 3px solid var(--ks-amber);
    background: var(--ks-sand-soft);
    border-radius: 0 10px 10px 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ks-koa);
}
.kc-perfp-note-wide { max-width: none; }

@media (max-width: 760px) {
    .kc-perfp-table { font-size: 13.5px; }
    .kc-perfp-table th,
    .kc-perfp-table td { padding: 9px 11px; }
    .kc-perfp-table td.kc-perfp-num { font-size: 14px; }
}

/* ---- charts (before/after and capacity) ----------------------------------- */

.kc-perfp-before-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.kc-perfp-p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ks-koa-soft); max-width: 58ch; }

.kc-perfp-chart {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 26px 22px;
    box-shadow: 0 18px 44px rgba(43, 28, 12, 0.08);
}
.kc-perfp-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 16px; }
.kc-perfp-chart-head b { font-family: var(--ks-display); font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; }
.kc-perfp-chart-head span { font-size: 13px; color: var(--ks-koa-soft); }
.kc-perfp-chart-head-2 { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ks-line); }
.kc-perfp-chart-head-2 b { font-size: 14px; color: var(--ks-koa-soft); font-weight: 700; }

.kc-perfp-bars { --kc-perfp-lbl: 92px; --kc-perfp-val: 84px; }
.kc-perfp-bar { display: grid; grid-template-columns: var(--kc-perfp-lbl) 1fr var(--kc-perfp-val); align-items: center; gap: 12px; margin-bottom: 10px; }
.kc-perfp-bar-lbl { font-family: var(--ks-mono); font-size: 12.5px; font-weight: 600; color: var(--ks-koa); }
.kc-perfp-track { position: relative; display: block; height: 28px; background: var(--ks-sand); border-radius: 6px; overflow: hidden; }
.kc-perfp-fill { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: var(--ks-lagoon); border-radius: 6px; transform-origin: left center; }
.kc-perfp-now { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--ks-lagoon-deep); box-shadow: 0 0 0 1.5px var(--ks-salt); } /* outlined so it reads on the amber fill as well as the track */
.kc-perfp-val { font-family: var(--ks-mono); font-size: 13.5px; font-weight: 700; color: var(--ks-koa); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.kc-perfp-val small { display: block; font-size: 10.5px; font-weight: 600; color: var(--ks-lagoon); letter-spacing: 0.02em; }
.kc-perfp-axis {
    position: relative;
    height: 20px;
    margin: 4px var(--kc-perfp-val) 0 var(--kc-perfp-lbl);
    border-top: 1px solid var(--ks-line);
    font-family: var(--ks-mono);
    font-size: 10.5px;
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}
.kc-perfp-axis span { position: absolute; top: 4px; transform: translateX(-50%); }
.kc-perfp-axis span:first-child { transform: none; }
.kc-perfp-axis span:last-child { transform: translateX(-100%); }

/* "Before": thinner bars in Sand-deep, Amber figures. */
.kc-perfp-bars-before .kc-perfp-track { height: 16px; }
/* The slow "before" build in amber, the colour its figures are printed in: sand-deep on the sand track was about 1.1:1. */
.kc-perfp-bars-before .kc-perfp-fill { background: var(--ks-amber); }
.kc-perfp-bars-before .kc-perfp-val { color: var(--ks-amber); font-size: 12.5px; }

.kc-perfp-foot { margin: 14px 4px 0; font-family: var(--ks-mono); font-size: 11.5px; line-height: 1.6; color: var(--ks-koa-soft); }
.kc-perfp-foot a { color: var(--ks-lagoon); }

/* Capacity cards: two side by side, smaller bars, a wider value column for the
   rung line under each figure. */
.kc-perfp-cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.kc-perfp-cap-card { padding: 22px 22px 18px; }
.kc-perfp-cap-bars { --kc-perfp-lbl: 120px; --kc-perfp-val: 156px; }
.kc-perfp-cap-bars .kc-perfp-track { height: 22px; }
.kc-perfp-cap-bars .kc-perfp-bar { margin-bottom: 12px; }
.kc-perfp-cap-bars .kc-perfp-val small { color: var(--ks-koa-soft); font-weight: 500; }
/* The route that cleared nothing: no bar, the miss in words, the zero in Amber. */
.kc-perfp-track-miss { background: repeating-linear-gradient(135deg, var(--ks-sand-soft) 0 6px, var(--ks-sand) 6px 12px); }
.kc-perfp-val-miss { color: var(--ks-amber); white-space: normal; }
.kc-perfp-cap-bars .kc-perfp-val-miss small { color: var(--ks-amber); white-space: normal; line-height: 1.3; }

@media (max-width: 880px) {
    .kc-perfp-before-grid { grid-template-columns: 1fr; gap: 34px; }
    .kc-perfp-cap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .kc-perfp-chart { padding: 18px 16px 16px; }
    .kc-perfp-bars { --kc-perfp-lbl: 74px; --kc-perfp-val: 70px; }
    .kc-perfp-bar { gap: 8px; }
    .kc-perfp-bar-lbl { font-size: 11.5px; }
    .kc-perfp-val { font-size: 12.5px; }
    .kc-perfp-bars-before .kc-perfp-axis span:nth-child(3) { display: none; }
    .kc-perfp-cap-card { padding: 18px 14px 14px; }
    .kc-perfp-cap-bars { --kc-perfp-lbl: 68px; --kc-perfp-val: 128px; }
    .kc-perfp-cap-bars .kc-perfp-bar { gap: 8px; }
    .kc-perfp-cap-bars .kc-perfp-bar-lbl { font-size: 11px; }
    .kc-perfp-cap-bars .kc-perfp-val { font-size: 12.5px; }
    .kc-perfp-cap-bars .kc-perfp-val small { font-size: 9.5px; }
    .kc-perfp-cap-bars .kc-perfp-axis span:nth-child(even) { display: none; }
}

/* ---- motion ----------------------------------------------------------------
   Bars grow from the axis the first time a card scrolls into view
   (templates/modular/perfp-motion.html.twig). Fills are absolutely positioned
   and only their transform changes, so nothing around them moves. Without the
   script, or with reduced motion, the finished chart is simply there. */

@media (prefers-reduced-motion: no-preference) {
    .kc-perfp-fill { transition: transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 120ms); }
    .kc-perfp-now { transition: opacity 400ms ease; transition-delay: calc(900ms + var(--i, 0) * 120ms); }
    .kc-perfp-js [data-kc-perfp]:not(.kc-perfp-go) .kc-perfp-fill { transform: scaleX(0); }
    .kc-perfp-js [data-kc-perfp]:not(.kc-perfp-go) .kc-perfp-now { opacity: 0; }
}
/* ==========================================================================
   KahunaCart site: the Themes section (/add-ons/themes and its nine pages,
   plus the themes band on /add-ons). Direction B, "Showroom": a dark koa
   stage holds the screenshots, big browser frames with a phone laid over the
   corner, a gallery with tabs on each theme page and a row of price cards.

   Templates: modular/themes-band, themes-hero, themes-included, themes-rows,
   themes-allsix, themes-facts, theme-stage, theme-what, theme-crops and
   theme-plans. Pictures come through partials/kc/themes.html.twig.
   Same rules as kahuna.css: `kc-` classes, `--ks-` properties, light-only.
   ========================================================================== */

:root {
    --ks-stage: #2B1C0C;
    --ks-stage-2: #3A2814;
    --ks-stage-on: #F6EAD7;
    --ks-stage-soft: #C9B9A4;
    --ks-stage-line: rgba(246, 234, 215, 0.16);
    --ks-stage-kick: #8FCFDC;
}

/* ---------- the stage: a dark band that holds pictures ---------- */
.kc-stage { background: var(--ks-stage); color: var(--ks-stage-on); position: relative; overflow: hidden; }
.kc-stage .kc-kicker { color: var(--ks-stage-kick); }
.kc-stage h1, .kc-stage h2, .kc-stage h3 { color: #FFF6EA; }
.kc-stage h1 em, .kc-stage h2 em { font-style: normal; color: var(--ks-stage-kick); }
.kc-stage .kc-intro, .kc-stage p { color: var(--ks-stage-soft); }
.kc-stage .kc-btn-ghost { color: var(--ks-stage-on); border-color: var(--ks-stage-on); }
.kc-stage .kc-btn-ghost:hover { background: var(--ks-stage-2); color: #fff; }
.kc-stage .kc-frame { border-color: var(--ks-stage-line); }
.kc-stage a:not(.kc-btn) { color: var(--ks-stage-kick); }
.kc-stage-glow::before {
    content: ""; position: absolute; inset: auto -20% -60% -20%; height: 90%;
    background: radial-gradient(ellipse at center, rgba(188, 76, 17, 0.35), transparent 60%);
    pointer-events: none;
}
.kc-stage > .kc-wrap { position: relative; }

/* ---------- small shared pieces ---------- */
.kc-th-crop { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.kc-th-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--ks-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; white-space: nowrap; text-decoration: none;
    padding: 4px 9px; border-radius: 999px;
    color: var(--ks-koa-soft); background: var(--ks-sand); border: 1px solid var(--ks-line);
}
a.kc-th-chip { color: var(--ks-koa); }
a.kc-th-chip:hover { border-color: var(--ks-koa); }
.kc-th-chip--free { color: var(--ks-lagoon-deep); background: var(--ks-lagoon-mist); border-color: var(--ks-lagoon-mist); }
.kc-stage .kc-th-chip { color: var(--ks-stage-on); background: var(--ks-stage-2); border-color: var(--ks-stage-line); }
.kc-stage .kc-th-chip--free { color: #10333A; background: var(--ks-stage-kick); border-color: var(--ks-stage-kick); }
.kc-th-price { font-family: var(--ks-display); font-weight: 800; letter-spacing: -0.02em; color: var(--ks-koa); }
.kc-th-small { font-size: 13.5px; color: var(--ks-koa-soft); }
.kc-th-phone {
    border-radius: 26px; border: 6px solid #1B130B; overflow: hidden; background: #1B130B;
    box-shadow: 0 20px 40px -18px rgba(43, 28, 12, 0.45);
}
.kc-th-phone img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }

/* ---------- 1 · the band on /add-ons ---------- */
.kc-th-band { padding: 80px 0 72px; }
.kc-th-band-head { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: end; margin-bottom: 36px; }
.kc-th-band-head .kc-intro { margin: 0; }
.kc-th-prices { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.kc-th-prices li { color: var(--ks-stage-on); line-height: 1.6; }
.kc-th-prices .kc-th-chip { margin-right: 6px; vertical-align: 1px; }
.kc-th-band h2 em { display: block; }
.kc-th-prices b { font-family: var(--ks-display); font-size: 19px; }
.kc-th-band-cta { margin: 18px 0 0; }
.kc-th-rail {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 22%); gap: 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 18px; scrollbar-width: thin;
}
.kc-th-rail > a { scroll-snap-align: start; text-decoration: none; color: inherit; display: block; min-width: 0; }
.kc-th-rail .kc-frame-bar { padding: 7px 10px; }
.kc-th-rail .kc-frame-bar i { width: 7px; height: 7px; }
.kc-stage .kc-th-tile-name { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-family: var(--ks-display); font-weight: 700; font-size: 18px; color: #FFF6EA; }
.kc-th-tile-name .kc-addon-badge { font-size: 9px; }
.kc-stage .kc-th-tile-sub { font-size: 13.5px; color: var(--ks-stage-soft); margin: 0; }
.kc-th-tile-sub b { color: var(--ks-stage-on); }

/* ---------- 2 · the overview ---------- */
.kc-th-hero { padding: 72px 0 0; text-align: center; }
.kc-th-hero h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; line-height: 1.02; margin: 0 0 16px; letter-spacing: -0.03em; }
.kc-th-hero .kc-intro { margin: 0 auto 28px; }
.kc-th-collage { position: relative; max-width: 1040px; margin: 56px auto 0; height: 430px; }
.kc-th-collage .kc-frame { position: absolute; width: 56%; }
.kc-th-collage .kc-th-c1 { left: 0; top: 60px; transform: rotate(-3deg); }
.kc-th-collage .kc-th-c2 { left: 22%; top: 0; z-index: 2; }
.kc-th-collage .kc-th-c3 { right: 0; top: 70px; transform: rotate(3deg); }
.kc-th-collage .kc-th-phone { position: absolute; right: 6%; top: 150px; width: 150px; z-index: 3; border-color: #000; }

.kc-th-free { padding: 72px 0 24px; }
.kc-th-free-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kc-th-free-grid figure { margin: 0; min-width: 0; }
.kc-th-free-grid figure > a { display: block; }
.kc-th-free-grid figcaption { margin-top: 12px; }
.kc-th-free-grid h3 { margin: 0 0 4px; font-size: 20px; display: flex; gap: 8px; align-items: center; }
.kc-th-free-grid h3 a { color: inherit; text-decoration: none; }
.kc-th-free-grid h3 a:hover { color: var(--ks-lagoon); }
.kc-th-free-grid p { margin: 0; font-size: 14.5px; color: var(--ks-koa-soft); }

.kc-th-rows-head { padding-bottom: 0; }
.kc-th-row { padding: 64px 0; }
.kc-th-row + .kc-th-row { border-top: 1px solid var(--ks-line); }
.kc-th-row-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: center; }
.kc-th-row--flip .kc-th-row-grid { grid-template-columns: 0.75fr 1.25fr; }
.kc-th-row--flip .kc-th-show { order: 2; }
.kc-th-show { position: relative; padding-right: 96px; padding-bottom: 44px; min-width: 0; }
.kc-th-row--flip .kc-th-show { padding-right: 0; padding-left: 96px; }
.kc-th-show > a { display: block; }
.kc-th-show .kc-th-phone { position: absolute; right: 0; bottom: 0; width: 22%; }
.kc-th-row--flip .kc-th-show .kc-th-phone { right: auto; left: 0; }
.kc-th-copy { min-width: 0; }
.kc-th-copy h2 { font-size: clamp(34px, 4vw, 48px); font-weight: 800; margin: 0 0 10px; line-height: 1; }
.kc-th-copy h2 a { color: inherit; text-decoration: none; }
.kc-th-copy h2 a:hover { color: var(--ks-lagoon); }
.kc-th-copy .kc-intro { margin-bottom: 16px; font-size: 16px; }
.kc-th-copy ul { margin: 0 0 18px; padding: 0; list-style: none; }
.kc-th-copy li { position: relative; padding: 7px 0 7px 22px; font-size: 14.5px; color: var(--ks-koa-soft); border-top: 1px solid var(--ks-line); }
.kc-th-copy li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 7px; height: 7px; border-radius: 2px; background: var(--ks-lagoon); }
.kc-th-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.kc-th-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kc-th-buy .kc-th-price { font-size: 30px; margin-right: 6px; }
.kc-th-bundle-line { margin: 14px 0 0; font-size: 13.5px; color: var(--ks-koa-soft); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kc-th-bundle-line strong { color: var(--ks-koa); }

.kc-th-allsix { padding: 64px 0; }
.kc-th-allsix-in { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.kc-th-six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kc-th-six img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--ks-stage-line); display: block; }
.kc-stage .kc-th-allsix-price { color: #FFF6EA; font-size: 56px; display: block; line-height: 1; margin: 6px 0 12px; }
.kc-th-allsix-cta { margin: 20px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.kc-th-facts-block { padding-bottom: 64px; }
.kc-th-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.kc-th-fact { border: 1px solid var(--ks-line); background: var(--ks-card); border-radius: 10px; padding: 18px; }
.kc-th-fact b { display: block; font-size: 15px; margin-bottom: 6px; }
.kc-th-fact span { font-size: 14px; color: var(--ks-koa-soft); }

/* ---------- 3 · a theme page ---------- */
.kc-th-stage { padding: 64px 0 72px; text-align: center; }
.kc-th-stage h1 { font-size: clamp(54px, 9vw, 104px); line-height: 0.95; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.04em; }
.kc-stage .kc-th-sub { font-family: var(--ks-display); font-size: clamp(20px, 2.6vw, 28px); color: var(--ks-stage-on); margin: 0 auto 14px; max-width: 30ch; font-weight: 600; }
.kc-th-stage .kc-intro { margin: 0 auto 26px; }
.kc-th-stage .kc-ctas { justify-content: center; }
.kc-stage .kc-th-state { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; margin: 0 0 16px; color: var(--ks-stage-on); }
.kc-stage .kc-th-meta { margin: 22px 0 0; font-family: var(--ks-mono); font-size: 12.5px; color: var(--ks-stage-soft); }

.kc-th-gallery { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 22px; align-items: end; text-align: left; }
.kc-th-gallery--solo { grid-template-columns: minmax(0, 1fr); }
.kc-th-tabs { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; justify-content: center; scrollbar-width: none; }
.kc-th-tabs button {
    font: 600 14px var(--ks-body); white-space: nowrap; cursor: pointer;
    color: var(--ks-stage-soft); background: transparent; border: 1px solid var(--ks-stage-line); border-radius: 999px; padding: 8px 14px;
}
.kc-th-tabs button:hover { color: var(--ks-stage-on); border-color: var(--ks-stage-soft); }
.kc-th-tabs button[aria-pressed="true"] { background: var(--ks-stage-on); color: var(--ks-stage); border-color: var(--ks-stage-on); }
.kc-th-tabs button:focus-visible { outline: 2px solid var(--ks-stage-kick); outline-offset: 2px; }
.kc-th-gallery .kc-frame { min-width: 0; }
.kc-th-gallery .kc-frame-img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.kc-th-what { padding: 80px 0 40px; }
.kc-th-what-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: kc-th-what; }
.kc-th-what-grid > div { counter-increment: kc-th-what; border-top: 2px solid var(--ks-koa); padding-top: 14px; }
.kc-th-what-grid > div::before { content: counter(kc-th-what, decimal-leading-zero); font-family: var(--ks-mono); font-size: 12px; color: var(--ks-lagoon); display: block; margin-bottom: 6px; letter-spacing: 0.1em; }
.kc-th-what-grid b { display: block; font-family: var(--ks-display); font-size: 19px; margin-bottom: 6px; }
.kc-th-what-grid span { font-size: 14.5px; color: var(--ks-koa-soft); }

.kc-th-crops-block { padding: 0 0 40px; }
.kc-th-crops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kc-th-crops figure { margin: 0; min-width: 0; }
.kc-th-crops img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border-radius: 12px; border: 1px solid var(--ks-line); display: block; }
.kc-th-crops figcaption { font-family: var(--ks-mono); font-size: 12px; color: var(--ks-koa-soft); margin-top: 8px; }
.kc-th-crops-note { margin: 22px 0 0; max-width: 72ch; }

.kc-th-plans { padding: 56px 0 80px; }
.kc-th-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; margin-top: 28px; }
.kc-th-plan { display: flex; flex-direction: column; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 14px; padding: 26px 24px; position: relative; min-width: 0; }
.kc-th-plan--pick { border: 2px solid var(--ks-koa); }
.kc-th-plan-flag { position: absolute; top: -12px; left: 22px; background: var(--ks-koa); color: var(--ks-salt); font: 700 10.5px var(--ks-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.kc-th-plan h3 { margin: 0 0 6px; font-size: 19px; }
.kc-th-plan .kc-th-price { font-size: 40px; display: block; margin: 6px 0 4px; line-height: 1.1; }
.kc-th-plan-was { font-family: var(--ks-mono); font-size: 13px; color: var(--ks-koa-soft); margin: 0 0 10px; }
.kc-th-plan p { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0 0 14px; }
.kc-th-plan ul { margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; color: var(--ks-koa-soft); }
.kc-th-plan li { padding: 6px 0; border-top: 1px solid var(--ks-line); }
.kc-th-plan .kc-btn, .kc-th-plan .kc-addon-badge { margin-top: auto; align-self: flex-start; }
.kc-th-plans-note { margin: 22px auto 0; text-align: center; max-width: 70ch; }

@media (max-width: 899px) {
    .kc-th-band-head { grid-template-columns: 1fr; }
    .kc-th-rail { grid-auto-columns: 72%; }
    .kc-th-collage { height: 300px; }
    .kc-th-collage .kc-frame { width: 70%; }
    .kc-th-collage .kc-th-c2 { left: 15%; }
    .kc-th-collage .kc-th-phone { width: 96px; top: 110px; right: 2%; }
    .kc-th-free-grid, .kc-th-what-grid, .kc-th-crops, .kc-th-plans-grid { grid-template-columns: 1fr; }
    .kc-th-plans-grid { gap: 26px; }
    .kc-th-row-grid, .kc-th-row--flip .kc-th-row-grid { grid-template-columns: 1fr; gap: 28px; }
    .kc-th-row--flip .kc-th-show { order: 0; padding-left: 0; padding-right: 44px; }
    .kc-th-row--flip .kc-th-show .kc-th-phone { left: auto; right: 0; }
    .kc-th-show { padding-right: 44px; padding-bottom: 30px; }
    .kc-th-allsix-in { grid-template-columns: 1fr; }
    .kc-th-facts { grid-template-columns: 1fr 1fr; }
    .kc-th-gallery { grid-template-columns: minmax(0, 1fr); }
    .kc-th-gallery .kc-th-phone { display: none; }
    .kc-th-tabs { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .kc-th-collage { height: 220px; margin-top: 36px; }
    .kc-th-collage .kc-th-phone { width: 72px; top: 80px; border-width: 4px; border-radius: 16px; }
    .kc-th-facts { grid-template-columns: 1fr; }
    .kc-th-row { padding: 44px 0; }
    .kc-th-show .kc-th-phone { border-width: 4px; border-radius: 16px; }
    .kc-th-stage { padding-top: 48px; }
}
/* ==========================================================================
   KahunaCart releases
   --------------------------------------------------------------------------
   Styles for /releases (templates/releases.html.twig), plus the small version
   lines the add-on heroes, the add-on cards and the product page show.
   Loaded everywhere at priority 88, after kahuna.css, reading the same
   `--ks-*` tokens. `.kc-ver` (the version pill) comes from kahuna-news.css's
   look and is repeated here so the page does not depend on that file.

   House rules as kahuna.css: plain CSS on `kc-` classes, custom properties
   only ever `--ks-*`, light-only.
   ========================================================================== */

.kc-ver {
    display: inline-flex;
    align-items: center;
    font-family: var(--ks-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 5px 9px;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.kc-releases-hero { padding-bottom: 8px; }
.kc-releases-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin: 22px 0 0;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: var(--ks-koa-soft);
}
.kc-releases-meta a { color: var(--ks-koa-soft); text-decoration: none; border-bottom: 1px solid var(--ks-line); padding-bottom: 1px; }
.kc-releases-meta a:hover { color: var(--ks-lagoon); border-color: var(--ks-lagoon); }

.kc-releases.kc-block.kc-tight { padding-top: 36px; }
.kc-releases-empty { text-align: center; color: var(--ks-koa-soft); }

/* --------------------------------------------------------------------------
   Groups and the table
   -------------------------------------------------------------------------- */

.kc-rel-group + .kc-rel-group { margin-top: 56px; }

.kc-rel-group-head { margin-bottom: 14px; }
.kc-rel-group-head h2 {
    margin: 0;
    font-family: var(--ks-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
}
.kc-rel-group-head p { margin: 4px 0 0; font-size: 15px; color: var(--ks-koa-soft); }

/* One grid for the column labels and every summary row, so they line up. */
.kc-rel-cols,
.kc-rel-row > summary {
    display: grid;
    grid-template-columns: minmax(200px, 1.2fr) 96px 120px minmax(0, 2.4fr) 18px;
    align-items: center;
    column-gap: 20px;
}

.kc-rel-cols {
    padding: 0 18px 8px;
    border-bottom: 1px solid var(--ks-line);
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}

.kc-rel-row { border-bottom: 1px solid var(--ks-line); }
.kc-rel-row,
.kc-rel-version-notes { scroll-margin-top: calc(var(--ks-nav-h) + 16px); }
.kc-rel-row > summary {
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    border-radius: 10px;
    transition: background-color 120ms ease;
}
.kc-rel-row > summary::-webkit-details-marker { display: none; }
.kc-rel-row > summary:hover { background: var(--ks-sand-soft); }
.kc-rel-row > summary:focus-visible { outline: 2px solid var(--ks-lagoon); outline-offset: -2px; }
.kc-rel-row[open] > summary { background: var(--ks-sand-soft); border-radius: 10px 10px 0 0; }

.kc-rel-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kc-rel-name img,
.kc-rel-noicon { flex: none; width: 36px; height: 36px; }
.kc-rel-name strong { font-size: 16px; font-weight: 650; color: var(--ks-koa); }

.kc-rel-date {
    font-family: var(--ks-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--ks-koa-soft);
    white-space: nowrap;
}

.kc-rel-latest { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kc-rel-headline { font-size: 15px; color: var(--ks-koa); }
.kc-rel-counts { font-family: var(--ks-mono); font-size: 12px; color: var(--ks-koa-soft); }

.kc-rel-chevron { color: var(--ks-koa-soft); transition: transform 160ms ease; }
.kc-rel-row[open] .kc-rel-chevron { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   The open row: facts on the left, notes on the right
   -------------------------------------------------------------------------- */

.kc-rel-panel {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2.6fr);
    gap: 32px;
    padding: 20px 18px 28px;
    background: var(--ks-sand-soft);
    border-radius: 0 0 10px 10px;
}

.kc-rel-facts { font-size: 14.5px; color: var(--ks-koa-soft); }
.kc-rel-facts p { margin: 0 0 12px; }
.kc-rel-requires span {
    display: block;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.kc-rel-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.kc-rel-links a { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-rel-links a:hover { color: var(--ks-lagoon-deep); text-decoration: underline; text-underline-offset: 3px; }

.kc-rel-notes { min-width: 0; }
.kc-rel-version-notes + .kc-rel-version-notes { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--ks-line); }
.kc-rel-version-notes h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 14px;
}
.kc-rel-version-notes h3 time { font-family: var(--ks-mono); font-size: 13px; font-weight: 500; color: var(--ks-koa-soft); }

.kc-rel-section {
    margin: 14px 0 6px;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-rel-section-new { color: var(--ks-lagoon-deep); }
.kc-rel-section-bugfix { color: var(--ks-board-deep); }

.kc-rel-version-notes ul { margin: 0; padding-left: 18px; }
.kc-rel-version-notes li { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: var(--ks-koa); }
.kc-rel-version-notes li strong { font-weight: 650; }
.kc-rel-version-notes li code {
    font-family: var(--ks-mono);
    font-size: 0.86em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ks-sand);
    overflow-wrap: anywhere;
}
.kc-rel-version-notes li a { color: var(--ks-lagoon); }

.kc-rel-older { margin-top: 24px; }
.kc-rel-older > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-lagoon);
}
.kc-rel-older > summary:hover { color: var(--ks-lagoon-deep); }
.kc-rel-older[open] > summary { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Narrow screens: the row stacks, the column labels go
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .kc-rel-cols { display: none; }
    .kc-rel-row > summary {
        grid-template-columns: auto auto 1fr 18px;
        row-gap: 8px;
        column-gap: 12px;
        padding: 14px 4px;
    }
    .kc-rel-name { grid-column: 1 / 4; }
    .kc-rel-chevron { grid-column: 4; grid-row: 1; }
    .kc-rel-version { grid-column: 1; grid-row: 2; }
    .kc-rel-date { grid-column: 2 / 4; grid-row: 2; }
    .kc-rel-latest { grid-column: 1 / -1; grid-row: 3; }
    .kc-rel-panel { grid-template-columns: 1fr; gap: 20px; padding: 16px 4px 24px; }
}

/* --------------------------------------------------------------------------
   Version lines elsewhere: add-on hero, add-on cards, product page
   -------------------------------------------------------------------------- */

.kc-release-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-family: var(--ks-mono);
    font-size: 12.5px;
    color: var(--ks-koa-soft);
}
.kc-release-line a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ks-line); padding-bottom: 1px; }
.kc-release-line a:hover { color: var(--ks-lagoon); border-color: var(--ks-lagoon); }
.kc-page-hero .kc-release-line { margin-top: 18px; }
.kc-hero .kc-release-line { margin-top: 18px; }
.kc-hero .kc-release-line + .kc-trust { margin-top: 22px; }
.kc-addon-card .kc-release-line { margin: 0 0 12px; }
.kc-product-info .kc-release-line { margin: -4px 0 14px; }

/* Footer base line: "KahunaCart 1.5.0 · Powered by Grav". */
.kc-foot-version { color: #E8DECF; font-weight: 600; text-decoration: none; }
.kc-foot-version:hover { text-decoration: underline; text-underline-offset: 3px; }
/*
 * Helpdesk Pro portal styles.
 *
 * Theme-agnostic: everything is scoped to .helpdesk and .helpdesk-* classes,
 * fonts come from the theme, and every color, radius and space comes from
 * one token block below. The tokens read the theme's own values where it
 * has them (Pico's --pico-* custom properties, which Quark2 and other Pico
 * themes set) and fall back to neutral values mixed from the text color, so
 * light and dark modes both work with no changes.
 *
 * A theme restyles the portal by setting any of these on :root or on
 * .helpdesk (docs/help-center.md#styling):
 *
 *   --helpdesk-accent            links, primary buttons, focus ring, support replies
 *   --helpdesk-accent-contrast   text on the accent
 *   --helpdesk-text              body text
 *   --helpdesk-muted             secondary text
 *   --helpdesk-border            hairlines
 *   --helpdesk-surface           card and field background
 *   --helpdesk-subtle            tinted bands (Still need help?, banners)
 *   --helpdesk-radius            corner radius
 *   --helpdesk-gap               base spacing
 *   --helpdesk-width             the portal's widest column
 *   --helpdesk-success, --helpdesk-warning, --helpdesk-danger
 *
 * Internally everything reads the --hd-* tokens, never a raw value.
 */

/* ------------------------------------------------------------------ tokens */

.helpdesk {
    --hd-text: var(--helpdesk-text, var(--pico-color, currentColor));
    --hd-muted: var(--helpdesk-muted, color-mix(in srgb, var(--hd-text) 66%, transparent));
    --hd-faint: color-mix(in srgb, var(--hd-text) 45%, transparent);
    --hd-border: var(--helpdesk-border, color-mix(in srgb, var(--hd-text) 13%, transparent));
    --hd-border-strong: color-mix(in srgb, var(--hd-text) 24%, transparent);
    --hd-card: var(--helpdesk-surface, var(--pico-card-background-color, color-mix(in srgb, var(--hd-text) 2%, transparent)));
    --hd-subtle: var(--helpdesk-subtle, color-mix(in srgb, var(--hd-text) 4%, transparent));
    --hd-hover: color-mix(in srgb, var(--hd-text) 5%, transparent);
    --hd-field: var(--pico-form-element-background-color, var(--hd-card));
    --hd-accent: var(--helpdesk-accent, var(--pico-primary-background, #2563eb));
    --hd-accent-text: var(--helpdesk-accent-contrast, var(--pico-primary-inverse, #fff));
    --hd-accent-soft: color-mix(in srgb, var(--hd-accent) 10%, transparent);
    --hd-accent-line: color-mix(in srgb, var(--hd-accent) 35%, transparent);
    --hd-success: var(--helpdesk-success, #15803d);
    --hd-warning: var(--helpdesk-warning, #b45309);
    --hd-danger: var(--helpdesk-danger, #b91c1c);
    --hd-team: var(--helpdesk-team, color-mix(in srgb, var(--hd-accent) 5%, transparent));
    --hd-focus: 0 0 0 3px color-mix(in srgb, var(--hd-accent) 35%, transparent);

    --hd-radius: var(--helpdesk-radius, var(--pico-border-radius, 0.5rem));
    --hd-radius-lg: calc(var(--hd-radius) * 1.5);
    --hd-shadow: 0 1px 2px color-mix(in srgb, #000 6%, transparent);
    --hd-shadow-hover: 0 4px 14px -4px color-mix(in srgb, #000 16%, transparent);

    --hd-gap: var(--helpdesk-gap, 1rem);
    --hd-space-1: calc(var(--hd-gap) * 0.25);
    --hd-space-2: calc(var(--hd-gap) * 0.5);
    --hd-space-3: calc(var(--hd-gap) * 0.75);
    --hd-space-4: var(--hd-gap);
    --hd-space-5: calc(var(--hd-gap) * 1.5);
    --hd-space-6: calc(var(--hd-gap) * 2);
    --hd-space-7: calc(var(--hd-gap) * 3);

    /* One type scale: small, body, large, heading, title. */
    --hd-text-sm: 0.875rem;
    --hd-text-md: 1rem;
    --hd-text-lg: 1.125rem;
    --hd-text-xl: 1.3rem;
    --hd-text-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
    --hd-text-hero: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);

    --hd-width: var(--helpdesk-width, 68rem);
    --hd-measure: 68ch;

    color: var(--hd-text);
    line-height: 1.6;
    hyphens: manual;
    overflow-wrap: break-word;
}

#helpdesk-root.helpdesk,
.helpdesk:not(.helpdesk-embed) {
    max-width: var(--hd-width);
    margin-inline: auto;
}

.helpdesk *,
.helpdesk *::before,
.helpdesk *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------- theme resets, portal only */

/* Theme heading decorations (Quark2's short bar over every h2) and theme
   spacing rules do not belong in portal chrome or article text. */
.helpdesk :is(h1, h2, h3, h4, h5, h6)::before,
.helpdesk :is(h1, h2, h3, h4, h5, h6)::after {
    content: none;
    display: none;
}

.helpdesk :is(h1, h2, h3, h4) {
    margin: 0;
    color: inherit;
    letter-spacing: normal;
    word-spacing: 0.06em;
    text-wrap: balance;
}

.helpdesk :is(p, li) {
    color: inherit;
    hyphens: manual;
}

.helpdesk ul,
.helpdesk ol {
    margin: 0;
}

/* The portal's own lists carry no markers (a theme may put one on every li). */
.helpdesk ul[class] > li,
.helpdesk ol[class] > li {
    list-style: none;
}

.helpdesk article {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.helpdesk article > header,
.helpdesk section > header {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.helpdesk section { margin: 0; }

.helpdesk nav ul,
.helpdesk nav ol {
    margin: 0;
    padding: 0;
}

.helpdesk nav li {
    margin: 0;
    padding: 0;
}

.helpdesk .helpdesk-embed {
    max-width: none;
    margin: 0;
}

.helpdesk a { color: var(--hd-accent); }
.helpdesk a:hover { color: var(--hd-accent); }

.helpdesk-icon {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
}

.helpdesk-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ layout */

.helpdesk-page {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-6);
    padding-block: var(--hd-space-5) var(--hd-space-7);
}

.helpdesk-page__header {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
}

.helpdesk-page__header--center {
    align-items: center;
    text-align: center;
}

.helpdesk-page__header--center .helpdesk-search {
    width: 100%;
    max-width: 40rem;
    margin-top: var(--hd-space-3);
}

.helpdesk-page__header--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hd-space-3);
}

.helpdesk .helpdesk-title {
    font-size: var(--hd-text-2xl);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.helpdesk .helpdesk-lead {
    margin: 0;
    color: var(--hd-muted);
    font-size: var(--hd-text-lg);
}

.helpdesk .helpdesk-meta {
    margin: 0;
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
}

.helpdesk .helpdesk-hint {
    margin: var(--hd-space-1) 0 0;
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
}

.helpdesk .helpdesk-muted { color: var(--hd-muted); }
.helpdesk .helpdesk-small { font-size: var(--hd-text-sm); }

.helpdesk-section {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-4);
}

.helpdesk-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hd-space-1) var(--hd-space-4);
}

.helpdesk .helpdesk-section__title {
    font-size: var(--hd-text-xl);
    font-weight: 650;
    line-height: 1.3;
}

.helpdesk .helpdesk-section__title--sm {
    font-size: var(--hd-text-md);
    font-weight: 650;
}

.helpdesk .helpdesk-section__more {
    font-size: var(--hd-text-sm);
    font-weight: 500;
    text-decoration: none;
}

.helpdesk .helpdesk-section__more:hover { text-decoration: underline; }

/* A card: generic container for the narrow pages and the form. */
.helpdesk-card {
    padding: var(--hd-space-5);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-card);
    box-shadow: var(--hd-shadow);
}

.helpdesk-card > :first-child { margin-top: 0; }
.helpdesk-card > :last-child { margin-bottom: 0; }

/* The sign-in pages, not found, thanks, unsubscribe: one narrow card with
   even spacing whatever the theme does to headings and paragraphs. */
.helpdesk .helpdesk-card--narrow {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    width: 100%;
    max-width: 27rem;
    margin: var(--hd-space-4) auto 0;
    padding: var(--hd-space-6) var(--hd-space-5);
    text-align: center;
}

.helpdesk .helpdesk-card--narrow > * { margin: 0; }
.helpdesk .helpdesk-card--narrow .helpdesk-title { font-size: var(--hd-text-xl); }
.helpdesk-card--narrow .helpdesk-field,
.helpdesk-card--narrow .helpdesk-form { text-align: start; }

.helpdesk-card__mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-inline: auto !important;
    border-radius: 50%;
    background: var(--hd-accent-soft);
    color: var(--hd-accent);
}

.helpdesk-card__mark .helpdesk-icon { width: 1.4rem; height: 1.4rem; }

.helpdesk .helpdesk-signin__alt,
.helpdesk .helpdesk-signin__back {
    font-size: var(--hd-text-sm);
    color: var(--hd-muted);
}

.helpdesk-signin__form {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
}

.helpdesk .helpdesk-signin__form .helpdesk-field { margin: 0; }

.helpdesk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hd-space-2);
    padding: var(--hd-space-6) var(--hd-space-4);
    border: 1px dashed var(--hd-border-strong);
    border-radius: var(--hd-radius-lg);
    text-align: center;
}

.helpdesk .helpdesk-empty > * { margin: 0; }
.helpdesk .helpdesk-empty__title { font-weight: 600; }
.helpdesk-empty .helpdesk-button { margin-top: var(--hd-space-2); }

/* ------------------------------------------------------------------ nav row */

.helpdesk-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--hd-space-4);
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--hd-border);
    font-size: var(--hd-text-sm);
}

.helpdesk .helpdesk-nav__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--hd-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.helpdesk .helpdesk-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    margin: 0 0 -1px;
    padding: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--hd-muted);
    font-weight: 500;
    text-decoration: none;
}

.helpdesk .helpdesk-nav__link:hover {
    color: var(--hd-text);
    background: none;
}

.helpdesk .helpdesk-nav__link[aria-current] {
    color: var(--hd-text);
}

.helpdesk .helpdesk-nav__link[aria-current="page"],
.helpdesk .helpdesk-nav__link[aria-current="true"] {
    border-bottom-color: var(--hd-accent);
}

.helpdesk-nav__count {
    min-width: 1.3rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--hd-accent);
    color: var(--hd-accent-text);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3rem;
    text-align: center;
}

.helpdesk .helpdesk-nav__account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--hd-space-3);
    margin: 0;
    font-size: inherit;
}

.helpdesk-nav__name {
    max-width: 14rem;
    overflow: hidden;
    color: var(--hd-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.helpdesk-nav__account .helpdesk-nav__link { border-bottom: 0; margin: 0; }

/* The home link's short label ("Home") only shows at phone width. */
.helpdesk-nav__short { display: none; }

/* ----------------------------------------------------------------- buttons */

.helpdesk .helpdesk-button,
.helpdesk .helpdesk-link-button {
    font: inherit;
    cursor: pointer;
}

.helpdesk .helpdesk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: auto;
    height: auto;
    min-height: 2.6rem;
    margin: 0;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--hd-border-strong);
    border-radius: var(--hd-radius);
    background: var(--hd-card);
    box-shadow: none;
    color: var(--hd-text);
    font-size: var(--hd-text-md);
    font-weight: 550;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.helpdesk .helpdesk-button:hover {
    border-color: var(--hd-faint);
    background: var(--hd-hover);
    color: var(--hd-text);
}

.helpdesk .helpdesk-button--primary {
    border-color: var(--hd-accent);
    background: var(--hd-accent);
    color: var(--hd-accent-text);
}

.helpdesk .helpdesk-button--primary:hover {
    border-color: var(--hd-accent);
    background: color-mix(in srgb, var(--hd-accent) 86%, #000);
    color: var(--hd-accent-text);
}

.helpdesk .helpdesk-button--sm {
    min-height: 2.25rem;
    padding: 0.35rem 0.8rem;
    font-size: var(--hd-text-sm);
}

.helpdesk .helpdesk-button--lg {
    min-height: 3rem;
    padding: 0.65rem 1.5rem;
}

.helpdesk .helpdesk-button--block { width: 100%; }

.helpdesk .helpdesk-button[disabled],
.helpdesk .helpdesk-button.htmx-request {
    opacity: 0.6;
    cursor: progress;
}

.helpdesk .helpdesk-link-button {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.helpdesk .helpdesk-link-button:hover { color: var(--hd-text); background: none; }

.helpdesk .helpdesk-button:focus-visible,
.helpdesk .helpdesk-link-button:focus-visible,
.helpdesk a:focus-visible {
    outline: 2px solid var(--hd-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ fields */

.helpdesk .helpdesk-label {
    display: block;
    margin: 0 0 0.35rem;
    color: var(--hd-text);
    font-size: var(--hd-text-sm);
    font-weight: 600;
}

.helpdesk .helpdesk-input,
.helpdesk .helpdesk-textarea {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--hd-border-strong);
    border-radius: var(--hd-radius);
    background: var(--hd-field);
    box-shadow: none;
    color: var(--hd-text);
    font: inherit;
    font-size: var(--hd-text-md);
    line-height: 1.5;
}

.helpdesk .helpdesk-input:focus,
.helpdesk .helpdesk-textarea:focus {
    border-color: var(--hd-accent);
    outline: none;
    box-shadow: var(--hd-focus);
}

.helpdesk .helpdesk-textarea {
    min-height: 8rem;
    resize: vertical;
}

.helpdesk .helpdesk-field { margin: 0 0 var(--hd-space-5); }
.helpdesk .helpdesk-field p { margin: var(--hd-space-1) 0 0; }

.helpdesk-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    column-gap: var(--hd-space-4);
}

.helpdesk .helpdesk-field--error .helpdesk-input,
.helpdesk .helpdesk-field--error .helpdesk-textarea,
.helpdesk .helpdesk-textarea[aria-invalid="true"] {
    border-color: var(--hd-danger);
}

.helpdesk .helpdesk-field__error {
    color: var(--hd-danger);
    font-size: var(--hd-text-sm);
    font-weight: 600;
}

.helpdesk-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hd-space-3);
    margin-top: var(--hd-space-2);
}

.helpdesk-form__submit { margin-left: auto !important; }

.helpdesk-form-card { padding: var(--hd-space-6) var(--hd-space-5); }

.helpdesk .helpdesk-sender {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-2);
    margin: 0 0 var(--hd-space-5);
    padding: var(--hd-space-3) var(--hd-space-4);
    border-radius: var(--hd-radius);
    background: var(--hd-subtle);
    font-size: var(--hd-text-sm);
}

.helpdesk-sender .helpdesk-icon { color: var(--hd-muted); }
.helpdesk-sender__other { margin-left: auto; color: var(--hd-muted); }

/* ------------------------------------------------------------------ search */

/* One control everywhere: the field and the button joined, with a search
   icon inside the field. A theme's own search styling (Pico rounds the
   ends, adds its own icon and a ring on the group) is undone here. */
.helpdesk-search { position: relative; width: 100%; }

.helpdesk .helpdesk-search__form {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none !important;
}

.helpdesk .helpdesk-search__field {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
    border: 1px solid var(--hd-border-strong);
    border-radius: var(--hd-radius);
    background: var(--hd-field);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.helpdesk .helpdesk-search__field:focus-within {
    border-color: var(--hd-accent);
    box-shadow: var(--hd-focus);
}

.helpdesk .helpdesk-search__icon {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--hd-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.helpdesk .helpdesk-search input.helpdesk-search__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0.6rem 0.75rem 0.6rem 2.6rem;
    border: 0;
    border-radius: var(--hd-radius) 0 0 var(--hd-radius);
    background: transparent none;
    box-shadow: none;
    color: var(--hd-text);
    font: inherit;
    font-size: var(--hd-text-md);
    outline: none;
}

.helpdesk .helpdesk-search input.helpdesk-search__input::-webkit-search-decoration { appearance: none; }

.helpdesk .helpdesk-search .helpdesk-search__button {
    flex: none;
    margin: -1px -1px -1px 0;
    border-radius: 0 var(--hd-radius) var(--hd-radius) 0;
}

/* The button shows its word; at phone width it becomes the icon alone. */
.helpdesk-search__button-icon { display: none; }

.helpdesk-search--lg .helpdesk-search__field { border-radius: var(--hd-radius-lg); box-shadow: var(--hd-shadow-hover); }
.helpdesk .helpdesk-search--lg input.helpdesk-search__input {
    padding-block: 0.95rem;
    padding-left: 3rem;
    font-size: var(--hd-text-lg);
}
.helpdesk-search--lg .helpdesk-search__icon { left: 1.05rem; width: 1.3rem; height: 1.3rem; }
.helpdesk .helpdesk-search--lg .helpdesk-search__button { min-width: 7rem; border-radius: 0 var(--hd-radius-lg) var(--hd-radius-lg) 0; font-size: var(--hd-text-lg); }

/* Suggestions as the visitor types (htmx fills the box). */
.helpdesk-suggest:empty { display: none; }
.helpdesk-search .helpdesk-suggest { margin-top: var(--hd-space-2); text-align: start; }

.helpdesk-suggest__card {
    padding: var(--hd-space-3) var(--hd-space-4);
    border: 1px solid var(--hd-border);
    border-left: 3px solid var(--hd-accent);
    border-radius: var(--hd-radius);
    background: var(--hd-subtle);
}

.helpdesk .helpdesk-suggest__title {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    margin: 0 0 var(--hd-space-2);
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
    font-weight: 600;
}

.helpdesk .helpdesk-suggest__list {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    padding: 0;
    list-style: none;
}

.helpdesk .helpdesk-suggest__list li { margin: 0; line-height: 1.45; }
.helpdesk .helpdesk-suggest__list a { font-weight: 600; text-decoration: none; }
.helpdesk .helpdesk-suggest__list a:hover { text-decoration: underline; }

.helpdesk-suggest__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-2);
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
}

.helpdesk-form .helpdesk-suggest { margin: calc(var(--hd-space-2) * -1) 0 var(--hd-space-5); }

/* -------------------------------------------------------------------- home */

.helpdesk-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hd-space-3);
    padding: var(--hd-space-7) var(--hd-space-4) var(--hd-space-6);
    border-radius: calc(var(--hd-radius) * 2);
    background:
        radial-gradient(120% 90% at 50% 0%, var(--hd-accent-soft), transparent 70%),
        var(--hd-subtle);
    text-align: center;
}

.helpdesk .helpdesk-hero__title {
    font-size: var(--hd-text-hero);
    font-weight: 700;
    line-height: 1.1;
}

.helpdesk .helpdesk-hero__intro {
    max-width: 38rem;
    margin: 0;
    color: var(--hd-muted);
    font-size: var(--hd-text-lg);
}

.helpdesk .helpdesk-hero__intro > * { margin: 0; color: inherit; font-size: inherit; }
.helpdesk .helpdesk-hero__intro > * + * { margin-top: var(--hd-space-2); }

.helpdesk-hero .helpdesk-search {
    max-width: 42rem;
    margin-top: var(--hd-space-3);
}

/* Topic cards: a responsive grid, the whole card one link. */
.helpdesk .helpdesk-topics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--hd-space-4);
    padding: 0;
    list-style: none;
}

.helpdesk .helpdesk-topics > li { margin: 0; }

.helpdesk .helpdesk-topic {
    display: flex;
    align-items: flex-start;
    gap: var(--hd-space-4);
    height: 100%;
    padding: var(--hd-space-5);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-card);
    box-shadow: var(--hd-shadow);
    color: var(--hd-text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.helpdesk a.helpdesk-topic:hover {
    border-color: var(--hd-accent-line);
    box-shadow: var(--hd-shadow-hover);
    color: var(--hd-text);
}

.helpdesk a.helpdesk-topic:hover .helpdesk-topic__name { color: var(--hd-accent); }

.helpdesk-topic__mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--hd-radius);
    background: var(--hd-accent-soft);
    color: var(--hd-accent);
    font-size: var(--hd-text-lg);
    font-weight: 700;
    line-height: 1;
}

.helpdesk-topic__mark .helpdesk-icon { width: 1.35rem; height: 1.35rem; }

.helpdesk-topic__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.helpdesk .helpdesk-topic__name {
    font-size: var(--hd-text-lg);
    font-weight: 650;
    line-height: 1.3;
    transition: color 0.15s ease;
}

.helpdesk-topic__desc {
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
    line-height: 1.5;
}

.helpdesk-topic__count {
    margin-top: 0.15rem;
    color: var(--hd-faint);
    font-size: 0.8rem;
    font-weight: 500;
}

/* On the articles index a card lists its first articles, so only the name
   is a link. */
.helpdesk .helpdesk-topic--static {
    flex-direction: column;
    gap: var(--hd-space-4);
}

.helpdesk-topic__top {
    display: flex;
    align-items: flex-start;
    gap: var(--hd-space-4);
}

.helpdesk .helpdesk-topic__link {
    color: inherit;
    text-decoration: none;
}

.helpdesk .helpdesk-topic__link:hover { color: var(--hd-accent); }

.helpdesk .helpdesk-topic__articles {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--hd-space-3) 0 0;
    border-top: 1px solid var(--hd-border);
    list-style: none;
}

.helpdesk .helpdesk-topic__articles li { margin: 0; font-size: var(--hd-text-sm); }

.helpdesk .helpdesk-topic__articles a {
    display: block;
    padding: 0.35rem 0;
    color: var(--hd-text);
    text-decoration: none;
}

.helpdesk .helpdesk-topic__articles a:hover { color: var(--hd-accent); text-decoration: underline; }

.helpdesk .helpdesk-topic__all {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: auto;
    font-size: var(--hd-text-sm);
    font-weight: 600;
    text-decoration: none;
}

.helpdesk .helpdesk-topic__all:hover { text-decoration: underline; }

/* Link lists (popular, related, more in a topic): no underline at rest,
   a comfortable row to click. */
.helpdesk .helpdesk-links {
    display: grid;
    gap: 0 var(--hd-space-6);
    padding: 0;
    list-style: none;
}

@media (min-width: 44rem) {
    .helpdesk .helpdesk-links--columns { grid-template-columns: 1fr 1fr; }
}

.helpdesk .helpdesk-links > li {
    margin: 0;
    border-bottom: 1px solid var(--hd-border);
}

.helpdesk .helpdesk-links__link {
    display: flex;
    align-items: center;
    gap: var(--hd-space-3);
    min-height: 2.75rem;
    padding: 0.55rem var(--hd-space-2);
    margin-inline: calc(var(--hd-space-2) * -1);
    border-radius: var(--hd-radius);
    color: var(--hd-text);
    text-decoration: none;
}

.helpdesk .helpdesk-links__link:hover {
    background: var(--hd-hover);
    color: var(--hd-accent);
}

.helpdesk .helpdesk-links__link:hover .helpdesk-links__title {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.helpdesk-links__icon { color: var(--hd-faint); }
.helpdesk-links__link:hover .helpdesk-links__icon { color: var(--hd-accent); }

/* "Still need help?" / "Still stuck?": the band at the end of a page. */
.helpdesk-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hd-space-4) var(--hd-space-6);
    padding: var(--hd-space-6);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-subtle);
}

.helpdesk-band__text {
    display: flex;
    flex: 1 1 20rem;
    flex-direction: column;
    gap: var(--hd-space-1);
}

.helpdesk .helpdesk-band__title { font-size: var(--hd-text-xl); font-weight: 650; }
.helpdesk .helpdesk-band__lead { margin: 0; color: var(--hd-muted); }
.helpdesk .helpdesk-band__aside { margin: var(--hd-space-2) 0 0; font-size: var(--hd-text-sm); color: var(--hd-muted); }

/* ------------------------------------------------------- requests (lists) */

.helpdesk .helpdesk-requests {
    padding: 0;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-card);
    list-style: none;
    overflow: hidden;
}

.helpdesk .helpdesk-request {
    margin: 0;
    border-bottom: 1px solid var(--hd-border);
}

.helpdesk .helpdesk-request:last-child { border-bottom: 0; }

.helpdesk .helpdesk-request__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.3rem var(--hd-space-4);
    padding: var(--hd-space-4) var(--hd-space-5);
    color: var(--hd-text);
    text-decoration: none;
}

.helpdesk .helpdesk-request__link:hover { background: var(--hd-hover); color: var(--hd-text); }
.helpdesk .helpdesk-request__link:hover .helpdesk-request__subject { color: var(--hd-accent); }

.helpdesk-request__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-2);
    grid-column: 1;
    min-width: 0;
}

.helpdesk-request__subject {
    font-weight: 600;
    overflow-wrap: anywhere;
    transition: color 0.15s ease;
}

.helpdesk-request__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem var(--hd-space-3);
    grid-column: 1;
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
}

.helpdesk-request__number { font-variant-numeric: tabular-nums; }

.helpdesk-request__chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--hd-faint);
}

.helpdesk .helpdesk-request--waiting .helpdesk-request__link {
    box-shadow: inset 3px 0 0 var(--hd-warning);
    background: color-mix(in srgb, var(--hd-warning) 6%, transparent);
}

.helpdesk-request--unread .helpdesk-request__subject { color: var(--hd-accent); }

.helpdesk-requests--compact .helpdesk-request__link { padding-block: var(--hd-space-3); }

.helpdesk .helpdesk-recent__empty { margin: 0; color: var(--hd-muted); }

.helpdesk-badge {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--hd-accent);
    color: var(--hd-accent-text);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
}

.helpdesk-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-4);
    border-bottom: 1px solid var(--hd-border);
    margin-bottom: calc(var(--hd-space-2) * -1);
}

/* Tabs sit together at the start (a theme may spread a nav's children
   across the row); the toolbar's bottom border is the underline row. */
.helpdesk .helpdesk-tabs {
    display: flex;
    justify-content: flex-start;
    gap: var(--hd-space-5);
    margin: 0 0 -1px;
}

.helpdesk .helpdesk-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    border-bottom: 2px solid transparent;
    color: var(--hd-muted);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.helpdesk .helpdesk-tabs__tab:hover { color: var(--hd-text); }

.helpdesk .helpdesk-tabs__tab[aria-current="page"] {
    border-bottom-color: var(--hd-accent);
    color: var(--hd-text);
    font-weight: 600;
}

.helpdesk-tabs__count {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--hd-hover);
    color: var(--hd-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4rem;
    text-align: center;
}

.helpdesk-tabs__tab[aria-current="page"] .helpdesk-tabs__count {
    background: var(--hd-accent-soft);
    color: var(--hd-accent);
}

.helpdesk-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hd-space-4);
}

/* ------------------------------------------------------------------ status */

.helpdesk-status {
    --hd-status: var(--hd-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--hd-status) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--hd-status) 10%, transparent);
    color: var(--hd-text);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.helpdesk-status__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--hd-status);
}

.helpdesk-status--waiting_client { --hd-status: var(--hd-warning); }
.helpdesk-status--resolved { --hd-status: var(--hd-success); }
.helpdesk-status--closed { --hd-status: var(--hd-faint); }

/* -------------------------------------------------------------- breadcrumb */

.helpdesk .helpdesk-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
    list-style: none;
}

.helpdesk .helpdesk-crumbs__list li { margin: 0; font-size: inherit; line-height: 1.5; }

.helpdesk .helpdesk-crumbs__list li + li::before {
    content: "›";
    margin-right: 0.3rem;
    color: var(--hd-faint);
}

.helpdesk .helpdesk-crumbs a,
.helpdesk .helpdesk-backlink a {
    color: var(--hd-muted);
    text-decoration: none;
}

.helpdesk .helpdesk-crumbs a:hover,
.helpdesk .helpdesk-backlink a:hover { color: var(--hd-accent); text-decoration: underline; }

.helpdesk-crumbs__list [aria-current] { color: var(--hd-text); }

.helpdesk-backlink {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--hd-space-2) var(--hd-space-4);
    font-size: var(--hd-text-sm);
}

/* ---------------------------------------------------- category and results */

.helpdesk-category__heading {
    display: flex;
    align-items: flex-start;
    gap: var(--hd-space-4);
    margin-top: var(--hd-space-3);
}

.helpdesk-category__heading .helpdesk-topic__mark { width: 3.25rem; height: 3.25rem; }
.helpdesk-category__heading > div { display: flex; flex-direction: column; gap: var(--hd-space-1); min-width: 0; }

.helpdesk .helpdesk-article-rows {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    padding: 0;
    list-style: none;
}

.helpdesk .helpdesk-article-rows > li { margin: 0; }

.helpdesk .helpdesk-article-row {
    display: flex;
    align-items: center;
    gap: var(--hd-space-4);
    padding: var(--hd-space-4) var(--hd-space-5);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-card);
    color: var(--hd-text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.helpdesk .helpdesk-article-row:hover {
    border-color: var(--hd-accent-line);
    box-shadow: var(--hd-shadow-hover);
    color: var(--hd-text);
}

.helpdesk-article-row__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.2rem; min-width: 0; }
.helpdesk-article-row__title { font-weight: 600; transition: color 0.15s ease; }
.helpdesk-article-row:hover .helpdesk-article-row__title { color: var(--hd-accent); }

.helpdesk-article-row__summary {
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
    line-height: 1.55;
}

.helpdesk-article-row__chevron { color: var(--hd-faint); }
.helpdesk-article-row:hover .helpdesk-article-row__chevron { color: var(--hd-accent); }

/* Pages that read top to bottom sit in one centred column. */
.helpdesk-category,
.helpdesk-search-page,
.helpdesk-new,
.helpdesk-list {
    width: 100%;
    max-width: 54rem;
    margin-inline: auto;
}

/* ----------------------------------------------------------------- article */

/* One reading column: breadcrumb, title, text and everything after it
   line up on the same left edge. */
.helpdesk-article-page {
    width: 100%;
    max-width: calc(var(--hd-measure) + 4rem);
    margin-inline: auto;
}

.helpdesk-article { display: flex; flex-direction: column; gap: var(--hd-space-5); }

.helpdesk .helpdesk-article__header {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    padding-bottom: var(--hd-space-5);
    border-bottom: 1px solid var(--hd-border);
}

.helpdesk .helpdesk-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0;
}

.helpdesk .helpdesk-article__meta > * + *::before {
    content: "·";
    margin-inline: 0.55rem;
    color: var(--hd-faint);
}

.helpdesk .helpdesk-article__meta a { font-weight: 600; text-decoration: none; }
.helpdesk .helpdesk-article__meta a:hover { text-decoration: underline; }

/* Article and message text: headings, lists, code, images and tables in
   the portal's own rhythm, whatever the theme's content styles are. */
.helpdesk .helpdesk-prose {
    max-width: var(--hd-measure);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.helpdesk-message .helpdesk-prose { max-width: none; font-size: var(--hd-text-md); line-height: 1.65; }

.helpdesk .helpdesk-prose > * { margin: 0; }
.helpdesk .helpdesk-prose > * + * { margin-top: 1em; }
.helpdesk .helpdesk-prose > :is(h2, h3, h4) + * { margin-top: 0.5em; }

.helpdesk .helpdesk-prose h2 { margin-top: 1.8em; font-size: 1.35em; font-weight: 650; line-height: 1.3; }
.helpdesk .helpdesk-prose h3 { margin-top: 1.5em; font-size: 1.15em; font-weight: 650; line-height: 1.35; }
.helpdesk .helpdesk-prose h4 { margin-top: 1.3em; font-size: 1em; font-weight: 650; }

.helpdesk .helpdesk-prose :is(ul, ol) { padding-left: 1.4em; }
.helpdesk .helpdesk-prose li { margin: 0.35em 0 0; font-size: inherit; line-height: inherit; }
.helpdesk .helpdesk-prose ul li { list-style: disc; }
.helpdesk .helpdesk-prose ol li { list-style: decimal; }
.helpdesk .helpdesk-prose li::marker { color: var(--hd-muted); }

.helpdesk .helpdesk-prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

.helpdesk .helpdesk-prose :not(pre) > code {
    padding: 0.12em 0.35em;
    border-radius: calc(var(--hd-radius) * 0.6);
    background: var(--hd-hover);
    font-size: 0.9em;
}

.helpdesk .helpdesk-prose pre {
    overflow-x: auto;
    padding: var(--hd-space-4);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    background: var(--hd-subtle);
    box-shadow: none;
    font-size: 0.9em;
    line-height: 1.55;
}

.helpdesk .helpdesk-prose pre code { padding: 0; background: none; }

.helpdesk .helpdesk-prose img,
.helpdesk .helpdesk-prose video {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--hd-radius);
}

.helpdesk .helpdesk-prose blockquote {
    margin-inline: 0;
    padding: 0.2em 0 0.2em 1em;
    border-left: 3px solid var(--hd-border-strong);
    color: var(--hd-muted);
    font: inherit;
}

/* A reply by email that was only a quote: the quote, folded away. */
.helpdesk .helpdesk-prose details > summary {
    width: fit-content;
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
    cursor: pointer;
}
.helpdesk .helpdesk-prose details[open] > summary { margin-bottom: 0.75em; }

/* An inline email image: in place, never taller than a screenful. */
.helpdesk .helpdesk-prose a > img { max-height: 28rem; object-fit: contain; }

.helpdesk .helpdesk-prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.95em;
}

.helpdesk .helpdesk-prose :is(th, td) {
    padding: 0.5em 0.75em;
    border-bottom: 1px solid var(--hd-border);
    text-align: start;
}

.helpdesk .helpdesk-prose th { font-weight: 600; }
.helpdesk .helpdesk-prose hr { margin-block: 2em; border: 0; border-top: 1px solid var(--hd-border); }

/* "Was this helpful? Yes / No": one quiet line. */
.helpdesk .helpdesk-feedback {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    padding: var(--hd-space-2) var(--hd-space-4);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-subtle);
}

.helpdesk .helpdesk-feedback__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-2) var(--hd-space-4);
    width: 100%;
    margin: 0;
}

.helpdesk-feedback__question { font-weight: 600; }

/* A theme's own [role=group] styling (Pico joins and stretches the buttons) is undone. */
.helpdesk .helpdesk-feedback__answers {
    display: inline-flex;
    gap: var(--hd-space-2);
    width: auto;
    margin: 0;
    box-shadow: none;
}

.helpdesk .helpdesk-feedback__answers .helpdesk-button {
    flex: none;
    min-width: 4rem;
    margin: 0;
    border-radius: var(--hd-radius);
}

.helpdesk .helpdesk-feedback__thanks {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    margin: 0;
    color: var(--hd-success);
    font-weight: 600;
}

.helpdesk-article__more {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: var(--hd-space-5) var(--hd-space-6);
}

.helpdesk-article__more > section { display: flex; flex-direction: column; gap: var(--hd-space-2); }
.helpdesk-article__more .helpdesk-section__more { margin-top: var(--hd-space-1); }

.helpdesk-prev-next {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hd-space-4);
}

.helpdesk .helpdesk-prev-next__link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--hd-space-3) var(--hd-space-4);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    color: var(--hd-text);
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.helpdesk .helpdesk-prev-next__link:hover { border-color: var(--hd-accent-line); color: var(--hd-text); }
.helpdesk-prev-next__link--next { grid-column: 2; text-align: right; align-items: flex-end; }

.helpdesk-prev-next__label {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--hd-muted);
    font-size: 0.8rem;
}

.helpdesk-prev-next__title { font-weight: 600; overflow-wrap: anywhere; }
.helpdesk-prev-next__link:hover .helpdesk-prev-next__title { color: var(--hd-accent); }

/* ------------------------------------------------------------------ ticket */

.helpdesk-ticket-page { gap: var(--hd-space-4); max-width: 52rem; width: 100%; margin-inline: auto; }

.helpdesk-ticket {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-5);
}

.helpdesk .helpdesk-ticket__header {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
}

.helpdesk .helpdesk-ticket__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem var(--hd-space-3);
    margin: 0;
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
}

/* The banner: what happens next, in the status's color. */
.helpdesk-banner {
    --hd-status: var(--hd-accent);
    display: flex;
    align-items: flex-start;
    gap: var(--hd-space-3);
    padding: var(--hd-space-3) var(--hd-space-4);
    border: 1px solid color-mix(in srgb, var(--hd-status) 28%, transparent);
    border-radius: var(--hd-radius);
    background: color-mix(in srgb, var(--hd-status) 7%, transparent);
}

.helpdesk-banner--waiting_client { --hd-status: var(--hd-warning); }
.helpdesk-banner--resolved { --hd-status: var(--hd-success); }
.helpdesk-banner--closed { --hd-status: var(--hd-faint); }

.helpdesk-banner__icon { margin-top: 0.15rem; color: var(--hd-status); }
.helpdesk .helpdesk-ticket__hint { margin: 0; color: var(--hd-text); }

.helpdesk .helpdesk-thread {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-4);
    padding: 0;
    list-style: none;
}

.helpdesk .helpdesk-message {
    margin: 0;
    padding: var(--hd-space-4) var(--hd-space-5);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-card);
    scroll-margin-top: 6rem;
}

.helpdesk .helpdesk-message--team {
    border-color: var(--hd-accent-line);
    border-left: 3px solid var(--hd-accent);
    background: var(--hd-team);
}

.helpdesk-message__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-2) var(--hd-space-3);
    margin-bottom: var(--hd-space-3);
}

.helpdesk-message__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--hd-hover);
    color: var(--hd-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.helpdesk-message--team .helpdesk-message__avatar {
    background: var(--hd-accent);
    color: var(--hd-accent-text);
}

.helpdesk-message__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.5rem;
    min-width: 0;
}

.helpdesk-message__author { font-weight: 650; }

.helpdesk-message__role {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--hd-accent-soft);
    color: var(--hd-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-transform: uppercase;
}

.helpdesk-message__note { color: var(--hd-muted); font-size: var(--hd-text-sm); font-style: italic; }

.helpdesk-message__time {
    margin-left: auto;
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
    white-space: nowrap;
}

.helpdesk-message__body { overflow-wrap: anywhere; }

.helpdesk .helpdesk-event {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--hd-space-2);
    margin: 0;
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
}

.helpdesk .helpdesk-event::before,
.helpdesk .helpdesk-event::after {
    content: "";
    flex: 1 1 2rem;
    border-top: 1px solid var(--hd-border);
}

/* The reply box: text, files and Send as one card. */
.helpdesk .helpdesk-composer {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    margin: 0;
    padding: var(--hd-space-4) var(--hd-space-5) var(--hd-space-4);
    border: 1px solid var(--hd-border-strong);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-card);
    box-shadow: var(--hd-shadow);
}

.helpdesk .helpdesk-composer > * { margin: 0; }
.helpdesk .helpdesk-composer .helpdesk-textarea { min-height: 7rem; }

.helpdesk-composer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hd-space-3);
    margin-top: var(--hd-space-1) !important;
}

.helpdesk-composer__send { margin-left: auto !important; }
.helpdesk .helpdesk-composer--closed { background: var(--hd-subtle); box-shadow: none; }

.helpdesk .helpdesk-ticket__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-3);
}

.helpdesk .helpdesk-ticket__actions form { margin: 0; }
.helpdesk-mute { margin-left: auto !important; }

.helpdesk-desk-link { font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
    .helpdesk-message--new { animation: helpdesk-arrive 1.2s ease-out; }
}

@keyframes helpdesk-arrive {
    from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hd-accent) 45%, transparent); }
    to { box-shadow: 0 0 0 3px transparent; }
}

/* ----------------------------------------------------------------- notices */

.helpdesk .helpdesk-notice {
    margin: 0;
    padding: var(--hd-space-3) var(--hd-space-4);
    border: 1px solid var(--hd-border);
    border-left-width: 3px;
    border-radius: var(--hd-radius);
    background: var(--hd-subtle);
}

.helpdesk .helpdesk-notice--success {
    border-color: color-mix(in srgb, var(--hd-success) 35%, transparent);
    border-left-color: var(--hd-success);
    background: color-mix(in srgb, var(--hd-success) 7%, transparent);
}

.helpdesk .helpdesk-notice--error {
    border-color: color-mix(in srgb, var(--hd-danger) 35%, transparent);
    border-left-color: var(--hd-danger);
    background: color-mix(in srgb, var(--hd-danger) 7%, transparent);
}

.helpdesk-verify__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hd-space-3);
    margin: 0;
}

.helpdesk .helpdesk-verify__text { margin: 0; flex: 1 1 20rem; }

/* ------------------------------------------------------------------- files */

.helpdesk-attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-2) var(--hd-space-3);
    padding: 0.25rem;
    margin: -0.25rem;
    border: 1px dashed transparent;
    border-radius: var(--hd-radius);
}

.helpdesk-attach--over {
    border-color: var(--hd-accent);
    background: var(--hd-accent-soft);
}

.helpdesk .helpdesk-attach__button {
    position: relative;
    display: inline-flex;
    margin: 0;
}

.helpdesk-attach__button:focus-within { outline: 2px solid var(--hd-accent); outline-offset: 2px; }
.helpdesk-attach__hint { color: var(--hd-muted); font-size: var(--hd-text-sm); }

.helpdesk .helpdesk-attach__list,
.helpdesk .helpdesk-files {
    flex-basis: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.helpdesk .helpdesk-attach__item,
.helpdesk .helpdesk-files__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--hd-space-2);
    margin: 0;
    padding: 0.15rem 0;
    font-size: var(--hd-text-sm);
    overflow-wrap: anywhere;
}

.helpdesk .helpdesk-attach__item--failed { color: var(--hd-danger); }

.helpdesk .helpdesk-files {
    margin-top: var(--hd-space-3);
    padding-top: var(--hd-space-2);
    border-top: 1px solid var(--hd-border);
}

/* Image files as thumbnails that open full size. */
.helpdesk .helpdesk-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
    margin: var(--hd-space-3) 0 0;
    padding: 0;
    list-style: none;
}
.helpdesk .helpdesk-thumbs__item { margin: 0; }
.helpdesk .helpdesk-thumbs__item a { display: block; border: 1px solid var(--hd-border); border-radius: var(--hd-radius); overflow: hidden; }
.helpdesk .helpdesk-thumbs__item a:focus-visible { outline: 2px solid var(--hd-accent); outline-offset: 2px; }
.helpdesk .helpdesk-thumbs__item img { display: block; width: 7.5rem; height: 5.5rem; object-fit: cover; }
.helpdesk .helpdesk-thumbs + .helpdesk-files { border-top: 0; padding-top: 0; }

/* ----------------------------------------------------- organizations (L4.5) */

/* "Mine | Acme": which requests the list shows, for a member of an
   organization that shares them. A small segmented control above the tabs. */
.helpdesk .helpdesk-scope {
    display: inline-flex;
    align-self: flex-start;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    background: var(--hd-subtle);
}

.helpdesk .helpdesk-scope__option {
    padding: 0.3rem 0.85rem;
    border-radius: calc(var(--hd-radius) - 2px);
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.helpdesk .helpdesk-scope__option:hover { color: var(--hd-text); }
.helpdesk .helpdesk-scope__option:focus-visible { outline: none; box-shadow: var(--hd-focus); }

.helpdesk .helpdesk-scope__option[aria-current="page"] {
    background: var(--hd-card);
    box-shadow: var(--hd-shadow);
    color: var(--hd-text);
    font-weight: 600;
}

.helpdesk-request__requester { color: var(--hd-muted); }

/* A colleague reads a shared request but is not on it: said once, quietly,
   where the reply box would be. */
.helpdesk-shared-note {
    margin: 0;
    padding: var(--hd-space-3) var(--hd-space-4);
    border: 1px dashed var(--hd-border-strong);
    border-radius: var(--hd-radius);
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
}

/* ------------------------------------------------------------ phone width */

@media (max-width: 40rem) {
    .helpdesk-page { gap: var(--hd-space-5); padding-block: var(--hd-space-4) var(--hd-space-6); }
    .helpdesk-hero { padding: var(--hd-space-6) var(--hd-space-4) var(--hd-space-5); border-radius: var(--hd-radius-lg); }
    .helpdesk .helpdesk-search--lg input.helpdesk-search__input { padding-block: 0.8rem; font-size: var(--hd-text-md); }
    .helpdesk .helpdesk-search--lg .helpdesk-search__button { min-width: 0; font-size: var(--hd-text-md); }
    .helpdesk .helpdesk-search .helpdesk-search__button { padding-inline: 0.85rem; }
    .helpdesk-band { padding: var(--hd-space-5) var(--hd-space-4); }
    .helpdesk-band .helpdesk-button { width: 100%; }
    .helpdesk .helpdesk-nav__link { white-space: nowrap; }
    .helpdesk-nav__name { display: none; }
    .helpdesk .helpdesk-request__link { padding: var(--hd-space-3) var(--hd-space-4); }
    .helpdesk .helpdesk-message { padding: var(--hd-space-3) var(--hd-space-4); }
    .helpdesk .helpdesk-composer { padding: var(--hd-space-3) var(--hd-space-4); }
    .helpdesk .helpdesk-tabs { gap: var(--hd-space-4); overflow-x: auto; }
    .helpdesk-mute { margin-left: 0 !important; }
    .helpdesk-card--narrow { padding: var(--hd-space-5) var(--hd-space-4); }
    .helpdesk-form-card { padding: var(--hd-space-4); }
    .helpdesk-sender__other { margin-left: 0; }
    .helpdesk-prev-next { grid-template-columns: minmax(0, 1fr); }
    .helpdesk-prev-next__link--next { grid-column: 1; }
    .helpdesk .helpdesk-topic { padding: var(--hd-space-4); }
    .helpdesk .helpdesk-article-row { padding: var(--hd-space-3) var(--hd-space-4); }
}

/* Narrow phones: every nav item stays in view (short home label, the
   row wraps to a second line when it must) and the search button
   drops its word so the field keeps the width. */
@media (max-width: 35rem) {
    .helpdesk-nav {
        justify-content: flex-start;
        gap: 0 var(--hd-space-4);
    }
    .helpdesk .helpdesk-nav__items { display: contents; }
    .helpdesk .helpdesk-nav__account { margin-left: auto; }
    .helpdesk-nav__full { display: none; }
    .helpdesk-nav__short { display: inline; }

    .helpdesk .helpdesk-search .helpdesk-search__button,
    .helpdesk .helpdesk-search--lg .helpdesk-search__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 3rem;
        padding-inline: 0.85rem;
    }
    .helpdesk-search__button-icon { display: block; width: 1.25rem; height: 1.25rem; }
    .helpdesk-search__button-text {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* ------------------------------------------------ "How did we do?" (L4.3) */

/* The rating box on a solved request and on the page a rating link opens
   (docs/csat.md). Tokens only, so it follows the theme in light and dark. */
.helpdesk .helpdesk-csat {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    padding: var(--hd-space-4) var(--hd-space-5);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-subtle);
    text-align: start;
}

.helpdesk .helpdesk-csat > * { margin: 0; }

.helpdesk .helpdesk-csat__title {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    font-size: var(--hd-text-lg);
}

.helpdesk-csat__done { color: var(--hd-success); }
.helpdesk .helpdesk-csat__hint { color: var(--hd-muted); font-size: var(--hd-text-sm); }
.helpdesk .helpdesk-csat__form,
.helpdesk .helpdesk-csat__comment { margin: 0; }

/* A theme's own [role=group] styling (Pico joins and stretches the buttons) is undone. */
.helpdesk .helpdesk-csat__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
    width: auto;
    margin: 0;
    box-shadow: none;
}

.helpdesk .helpdesk-csat__choice {
    flex: 1 1 8rem;
    margin: 0;
    border-radius: var(--hd-radius);
}

.helpdesk-csat__face {
    flex: none;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--hd-csat-tone, var(--hd-faint));
}

.helpdesk-csat__choice--great { --hd-csat-tone: var(--hd-success); }
.helpdesk-csat__choice--okay { --hd-csat-tone: var(--hd-warning); }
.helpdesk-csat__choice--not_good { --hd-csat-tone: var(--hd-danger); }

.helpdesk .helpdesk-csat__choice.is-selected,
.helpdesk .helpdesk-csat__choice[aria-pressed="true"] {
    border-color: var(--hd-csat-tone, var(--hd-accent));
    background: color-mix(in srgb, var(--hd-csat-tone, var(--hd-accent)) 12%, var(--hd-card));
    box-shadow: inset 0 0 0 1px var(--hd-csat-tone, var(--hd-accent));
}

.helpdesk .helpdesk-csat__text { min-height: 5rem; }

.helpdesk .helpdesk-csat__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-2) var(--hd-space-4);
    margin: var(--hd-space-2) 0 0;
}

.helpdesk-csat__until { color: var(--hd-muted); font-size: var(--hd-text-sm); }

/* The page a rating link opens: the box sits in the narrow card, flat. */
.helpdesk .helpdesk-rate .helpdesk-csat {
    padding: 0;
    border: 0;
    background: none;
}

.helpdesk .helpdesk-rate__subject,
.helpdesk .helpdesk-rate__sending,
.helpdesk .helpdesk-rate__press { color: var(--hd-muted); font-size: var(--hd-text-sm); text-align: start; }

/* ------------------------------------------------------ custom fields (L4.4) */

.helpdesk .helpdesk-optional {
    color: var(--hd-muted);
    font-weight: 400;
}

.helpdesk .helpdesk-textarea--short { min-height: 4.5rem; }

.helpdesk .helpdesk-choices {
    margin: 0;
    padding: 0;
    border: 0;
}

.helpdesk .helpdesk-check {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    margin: 0 0 var(--hd-space-1);
    color: var(--hd-text);
    font-size: var(--hd-text-md);
    font-weight: 400;
}

.helpdesk .helpdesk-check input {
    width: auto;
    margin: 0;
    accent-color: var(--hd-accent);
}

.helpdesk .helpdesk-field--error .helpdesk-check { color: var(--hd-danger); }

/* A request's field values, under its header: label over value, in a grid. */
.helpdesk .helpdesk-ticket-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    gap: var(--hd-space-2) var(--hd-space-4);
    margin: 0;
    padding: var(--hd-space-3) 0 0;
    border-top: 1px solid var(--hd-border);
}

.helpdesk .helpdesk-ticket-fields dt {
    margin: 0;
    color: var(--hd-muted);
    font-size: var(--hd-text-sm);
    font-weight: 400;
}

.helpdesk .helpdesk-ticket-fields dd {
    margin: 0;
    color: var(--hd-text);
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.md-alert {
  padding: 8px 16px;
  border-left: 3.5px solid #333333;
  margin-bottom: 16px;
}

.md-alert-body > *:last-child {
  margin-bottom: 0;
}

.md-alert-title {
  display: flex;
  font-weight: bold;
  align-items: center;
  margin-bottom: 8px;
  margin-top: 0;

  & > svg {
    margin-right: 8px;
  }
}

.md-alert--note {
  border-color: var(--gh-alert-note-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-note-title-color);
    fill: var(--gh-alert-note-title-color);
  }
}

.md-alert--tip {
  border-color: var(--gh-alert-tip-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-tip-title-color);
    fill: var(--gh-alert-tip-title-color);
  }
}

.md-alert--important {
  border-color: var(--gh-alert-important-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-important-title-color);
    fill: var(--gh-alert-important-title-color);
  }
}

.md-alert--warning {
  border-color: var(--gh-alert-warning-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-warning-title-color);
    fill: var(--gh-alert-warning-title-color);
  }
}

.md-alert--caution {
  border-color: var(--gh-alert-caution-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-caution-title-color);
    fill: var(--gh-alert-caution-title-color);
  }
}
/* ===================================
   CODESH - Code Syntax Highlighter
   Complete standalone styles
   =================================== */

/* Main container - base styles */
.codesh-block {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    overflow: hidden;
    contain: inline-size;
    min-width: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* ===================================
   LIGHT MODE (default)
   =================================== */
.codesh-block {
    background-color: #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.codesh-block .codesh-header {
    background-color: rgba(229, 231, 235, 0.15);
    border-bottom: 1px solid rgba(209, 213, 219, 0.5);
}

.codesh-block .codesh-lang {
    color: #4b5563;
    background-color: rgba(209, 213, 219, 0.4);
}

.codesh-block .codesh-title {
    color: #374151;
}

.codesh-block .codesh-copy,
.codesh-group .codesh-copy {
    color: #4b5563;
    background-color: rgba(209, 213, 219, 0.4);
    border-color: rgba(156, 163, 175, 0.2);
}

.codesh-block .codesh-copy:hover,
.codesh-group .codesh-copy:hover {
    background-color: rgba(156, 163, 175, 0.2);
    color: #111827;
    border-color: rgba(107, 114, 128, 0.2);
}

.codesh-block .codesh-copy.copied,
.codesh-group .codesh-copy.copied {
    background-color: rgba(34, 197, 94, 0.9);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.8);
}

/* Light mode diff colors */
.codesh-block .line .deleted {
    color: #dc2626;
}

.codesh-block .line .inserted {
    color: #16a34a;
}

/* ===================================
   DARK MODE (via .dark ancestor - Tailwind style)
   Using neutral zinc scale based on #1D1D20
   =================================== */
.dark .codesh-block {
    background-color: #1d1d20;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
}

.dark .codesh-block .codesh-header {
    background-color: rgba(39, 39, 42, 0.6);
    border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}

.dark .codesh-block .codesh-lang {
    color: #a1a1aa;
    background-color: rgba(51, 51, 55, 0.8);
}

.dark .codesh-block .codesh-title {
    color: #d4d4d8;
}

.dark .codesh-block .codesh-copy,
.dark .codesh-group .codesh-copy {
    color: #d4d4d8;
    background-color: rgba(51, 51, 55, 0.9);
    border-color: rgba(63, 63, 70, 0.5);
}

.dark .codesh-block .codesh-copy:hover,
.dark .codesh-group .codesh-copy:hover {
    background-color: rgba(63, 63, 70, 0.8);
    color: #ffffff;
    border-color: rgba(82, 82, 91, 0.5);
}

.dark .codesh-block .codesh-copy.copied,
.dark .codesh-group .codesh-copy.clpied {
    background-color: rgba(34, 197, 94, 0.9);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.8);
}


/* ===================================
   SHARED STYLES
   =================================== */

/* Header bar */
.codesh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
}

/* Language badge */
.codesh-lang {
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Title/filename display */
.codesh-title {
    font-size: 0.875rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Copy button */
.codesh-copy {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.codesh-copy-icon {
    width: 1rem;
    height: 1rem;
}

/* Code container */
.codesh-code {
    overflow-x: auto;
}

/* ===================================
   PHIKI DUAL THEME SUPPORT
   Switch between light/dark themes via CSS variables
   Only applies to blocks with codesh-dual-theme class
   =================================== */

/* Dark mode: switch to dark theme colors via CSS variables */
.dark .codesh-dual-theme .shiki,
.dark .codesh-dual-theme .phiki,
.dark .codesh-group .shiki,
.dark .codesh-group .phiki {
    background-color: var(--shiki-dark-bg, var(--phiki-dark-background-color)) !important;
}

.dark .codesh-dual-theme .shiki span,
.dark .codesh-dual-theme .phiki span,
.dark .codesh-group .shiki span,
.dark .codesh-group .phiki span {
    color: var(--shiki-dark, var(--phiki-dark-color)) !important;
    font-style: var(--shiki-dark-font-style, var(--phiki-dark-font-style)) !important;
    font-weight: var(--shiki-dark-font-weight, var(--phiki-dark-font-weight)) !important;
    text-decoration: var(--shiki-dark-text-decoration, var(--phiki-dark-text-decoration)) !important;
}

/* Token backgrounds for diff - only apply when variable is set */
.dark .codesh-dual-theme .shiki span[style*="--shiki-dark-bg"],
.dark .codesh-dual-theme .phiki span[style*="--phiki-dark-background-color"],
.dark .codesh-group .shiki span[style*="--shiki-dark-bg"],
.dark .codesh-group .phiki span[style*="--phiki-dark-background-color"] {
    background-color: var(--shiki-dark-bg, var(--phiki-dark-background-color)) !important;
}

.codesh-block pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    tab-size: 4;
}

.codesh-block code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
}

/* No header mode - minimal styling */
.codesh-block.no-header {
    border-radius: 0.5rem;
}

/* ===================================
   LINE STYLES
   =================================== */
.codesh-block .line {
    display: block;
    padding: 0 0.5rem;
    margin: 0 -0.5rem;
}

/* Line numbers - Phiki uses 'line-number' class */
.codesh-block .line-number {
    display: inline-block;
    width: 2.5em;
    margin-right: 1.5em;
    text-align: right;
    color: inherit;
    opacity: 0.4;
    user-select: none;
    -webkit-user-select: none;
    font-variant-numeric: tabular-nums;
}

/* ===================================
   LINE HIGHLIGHTING
   =================================== */
.codesh-block .line.highlight {
    background-color: rgba(250, 200, 50, 0.15);
    box-shadow: inset 3px 0 0 0 #d19a00;
}

.codesh-block .line.highlight .line-number {
    opacity: 0.6;
}

/* ===================================
   LINE FOCUS
   =================================== */
.codesh-block.has-focus .line:not(.focus) {
    opacity: 0.35;
}

.codesh-block .line.focus {
    background-color: rgba(59, 130, 246, 0.12);
    box-shadow: inset 3px 0 0 0 #3b82f6;
}

.codesh-block .line.focus .line-number {
    opacity: 0.6;
}

/* ===================================
   ERROR FALLBACK
   =================================== */
.codesh-block.codesh-error pre {
    background-color: #1e1e1e;
    color: #d4d4d4;
}

/* ===================================
   SCROLLBAR STYLING
   =================================== */
.codesh-block pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.codesh-block pre::-webkit-scrollbar-track {
    background: transparent;
}

.codesh-block pre::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}

.codesh-block pre::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
}

/* ===================================
   CODE GROUPS - Tabbed Code Blocks
   =================================== */
.codesh-group {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    overflow: hidden;
    contain: inline-size;
    min-width: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Light mode group */
.codesh-group {
    background-color: #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* Dark mode group - zinc scale */
.dark .codesh-group {
    background-color: #1d1d20;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
}

/* Group header */
.codesh-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: rgba(229, 231, 235, 0.8);
    border-bottom: 1px solid rgba(209, 213, 219, 0.5);
}

.dark .codesh-group-header {
    background-color: rgba(39, 39, 42, 0.6);
    border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}

/* Tabs container */
.codesh-group-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.codesh-group-tabs::-webkit-scrollbar {
    display: none;
}

/* Individual tab */
.codesh-group-tab {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.codesh-group-tab:hover {
    color: #374151;
}

.codesh-group-tab.active {
    color: #111827;
    border-bottom-color: #3b82f6;
}

/* Dark mode tabs */
.dark .codesh-group-tab {
    color: #a1a1aa;
}

.dark .codesh-group-tab:hover {
    color: #d4d4d8;
}

.dark .codesh-group-tab.active {
    color: #f4f4f5;
    border-bottom-color: #3b82f6;
}

/* Tab panels container */
.codesh-group-panels {
    position: relative;
}

/* Individual panel - use higher specificity to override .codesh-block base styles */
.codesh-group-panel.codesh-block {
    display: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.codesh-group-panel.codesh-block.active {
    display: block;
}

/* Hide any inner headers - group has its own header */
.codesh-group-panel .codesh-header,
.codesh-group-panel .code-header {
    display: none !important;
}

/* Reset any .code-block wrapper injected by theme */
.codesh-group-panel .code-block {
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    ring: none;
}

/* Reset styles for panels inside groups */
.codesh-group-panel .codesh-code {
    overflow-x: auto;
}

.codesh-group-panel pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    tab-size: 4;
    background: transparent !important;
}

.codesh-group-panel code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
}

/* Scrollbar for group panels */
.codesh-group-panel pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.codesh-group-panel pre::-webkit-scrollbar-track {
    background: transparent;
}

.codesh-group-panel pre::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
}

.codesh-group-panel pre::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
}

/* ===================================
   LINE WRAPPING
   =================================== */
.codesh-line-wrap pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}

.codesh-line-wrap .codesh-code {
    overflow-x: hidden;
}

/* Line numbers with wrapping - use padding/margin technique */
/* Only apply when line numbers are present */
.codesh-line-wrap .line:has(.line-number) {
    padding-left: 4em;
}

.codesh-line-wrap .line-number {
    margin-left: -4em;
}

/* Group panels with line wrap */
.codesh-group-panel.codesh-line-wrap pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}
.form-group.has-errors{background:rgba(255,0,0,.05);border:1px solid rgba(255,0,0,.2);border-radius:3px;margin:0 -5px;padding:0 5px}.form-errors{color:#b52b27}.form-honeybear{display:none;position:absolute !important;height:1px;width:1px;overflow:hidden;clip-path:rect(0px, 1px, 1px, 0px)}.form-errors p{margin:0}.form-input-file input{display:none}.form-input-file .dz-default.dz-message{position:absolute;text-align:center;left:0;right:0;top:50%;transform:translateY(-50%);margin:0}.form-input-file.dropzone{position:relative;min-height:70px;border-radius:3px;margin-bottom:.85rem;border:2px dashed #ccc;color:#aaa;padding:.5rem}.form-input-file.dropzone .dz-preview{margin:.5rem}.form-input-file.dropzone .dz-preview:hover{z-index:2}.form-input-file.dropzone .dz-preview .dz-image img{margin:0}.form-input-file.dropzone .dz-preview .dz-remove{font-size:16px;position:absolute;top:3px;right:3px;display:inline-flex;height:20px;width:20px;background-color:red;justify-content:center;align-items:center;color:#fff;font-weight:bold;border-radius:50%;cursor:pointer;z-index:20}.form-input-file.dropzone .dz-preview .dz-remove:hover{background-color:darkred;text-decoration:none}.form-input-file.dropzone .dz-preview .dz-error-message{min-width:140px;width:auto}.form-input-file.dropzone .dz-preview .dz-image,.form-input-file.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:3px;z-index:1}.filepond--root.form-input{min-height:7rem;height:auto;overflow:hidden;border:0}.form-tabs .tabs-nav{display:flex;padding-top:1px;margin-bottom:-1px}.form-tabs .tabs-nav a{flex:1;transition:color .5s ease,background .5s ease;cursor:pointer;text-align:center;padding:10px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ccc;border-radius:5px 5px 0 0}.form-tabs .tabs-nav a.active{border:1px solid #ccc;border-bottom:1px solid rgba(0,0,0,0);margin:0 -1px}.form-tabs .tabs-nav a.active span{color:inherit}.form-tabs .tabs-nav span{display:inline-block;line-height:1.1}.form-tabs.subtle .tabs-nav{margin-right:0 !important}.form-tabs .tabs-content .tab__content{display:none;padding-top:2rem}.form-tabs .tabs-content .tab__content.active{display:block}.checkboxes{display:inline-block}.checkboxes label{display:inline;cursor:pointer;position:relative;padding:0 0 0 20px;margin-right:15px}.checkboxes label:before{content:"";display:inline-block;width:20px;height:20px;left:0;margin-top:0;margin-right:10px;position:absolute;border-radius:3px;border:1px solid #e6e6e6}.checkboxes input[type=checkbox]{display:none}.checkboxes input[type=checkbox]:checked+label:before{content:"✓";font-size:20px;line-height:1;text-align:center}.checkboxes.toggleable label{margin-right:0}.form-field-toggleable .checkboxes.toggleable{margin-right:5px;vertical-align:middle}.form-field-toggleable .checkboxes+label{display:inline-block}.switch-toggle{display:inline-flex;overflow:hidden;border-radius:3px;line-height:35px;border:1px solid #ccc}.switch-toggle input[type=radio]{position:absolute;visibility:hidden;display:none}.switch-toggle label{display:inline-block;cursor:pointer;padding:0 15px;margin:0;white-space:nowrap;color:inherit;transition:background-color .5s ease}.switch-toggle input.highlight:checked+label{background:#333;color:#fff}.switch-toggle input:checked+label{color:#fff;background:#999}.signature-pad{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:10px;width:100%;height:100%;max-width:700px;max-height:460px;border:1px solid #f0f0f0;background-color:#fff;padding:16px}.signature-pad--body{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;border:1px solid #f6f6f6;min-height:100px}.signature-pad--body canvas{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4px;box-shadow:0 0 5px rgba(0,0,0,.02) inset}.signature-pad--footer{color:#c3c3c3;text-align:center;font-size:1.2em}.signature-pad--actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px}[data-grav-field=array] .form-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}[data-grav-field=array] .form-row>input,[data-grav-field=array] .form-row>textarea{margin:0;display:inline-block}[data-grav-field=array] .form-row>span[data-grav-array-action]{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:1.9rem;min-height:1.9rem;padding:.25rem;border-radius:3px;cursor:pointer;color:inherit;opacity:.45;transition:opacity .2s ease}[data-grav-field=array] .form-row>span[data-grav-array-action]:hover{opacity:1}[data-grav-field=array] .form-row>span[data-grav-array-action=sort]{cursor:grab}[data-grav-field=array] .form-row>span[data-grav-array-action=sort]:active{cursor:grabbing}.form-data.basic-captcha .form-input-wrapper{border:1px solid #ccc;border-radius:5px;display:flex;overflow:hidden}.form-data.basic-captcha .form-input-prepend{display:flex;color:#333;background-color:#ccc;flex-shrink:0}.form-data.basic-captcha .form-input-prepend img{margin:0}.form-data.basic-captcha .form-input-prepend button>svg{margin:0 8px;width:18px;height:18px}.form-data.basic-captcha input.form-input{border:0}
.toc-anchor {
    transition: hover 0.5s ease;
    position: absolute;
    opacity: 0;
}

.toc-anchor.after {
    margin-left: 5px;
}

.toc-anchor.before {
    margin-left: -22px;
    padding-right: 8px;
}

.toc-anchor:after {
    content: attr(data-anchor-icon);
}

:hover > .toc-anchor, .toc-anchor:focus {
    opacity: .5;
}
#grav-login {
    max-width: 30rem;
    margin: 5rem auto;
    background: #fcfcfc;
    border: 4px solid #eee;
    border-radius: 4px;
    padding: 1rem 3rem 3rem 3rem;
    text-align: center;
}

#grav-login .form-actions {
    text-align: right;
}

#grav-logout {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.alert.info {
    color: #27ae60;
}

.alert.error {
    color: #e74c3c;
}

#grav-login p {
    font-size: small;
    margin: 1rem 0;
    padding: 0;
    text-align: center;
}
#grav-login .form-actions p {
    margin-bottom: 0;
}

#grav-login .button {
    vertical-align: middle;
}

#grav-login .delimiter {
    display: block;
    font-size: 1.6rem;
    letter-spacing: 1px;
    line-height: 1.6rem;
    position: relative;
    text-transform: uppercase;
    margin: 1rem 0;
}

#grav-login .delimiter::after,
#grav-login .delimiter::before {
    background-color: #777777;
    content: "";
    height: 1px;
    position: absolute;
    top: 0.8rem;
    width: 40%;
}
#grav-login .delimiter::before {
    background-image: linear-gradient(to right, #777777, #ffffff);
    left: 0;
}
#grav-login .delimiter::after {
    background-image: linear-gradient(to left, #777777, #ffffff);
    right: 0;
}

#grav-login .rememberme {
    display: inline-block;
    float: left;
    padding: 7px 0;
    vertical-align: middle;
}

#grav-login .rememberme label {
    font-weight: inherit;
    display: inline;
}

.login-status {
    white-space: nowrap;
    vertical-align: middle;
}
.email-change-pending .notice p {
    margin: 0 0 0.5rem 0;
}

.email-change-actions .button {
    margin: 0 0.5rem 0.5rem 0;
}
/* ==========================================================================
   KahunaCart storefront layer
   --------------------------------------------------------------------------
   Dresses the /shop routes — listing, category, search, product, cart,
   checkout, receipt, account, and the sign-in screens a shopper passes
   through — in the kahunacart.com identity defined in css/kahuna.css.

   Two mechanisms, in this order of preference:

   1. The token bridge below. The plugin's own stylesheet
      (plugin://kahunacart/assets/kahunacart.css) resolves every internal
      value through --kahunacart-* first, so naming a token here re-colours
      storefront markup this file never mentions — the invoice, the download
      list, the address book. That is how pages nobody has themed still
      arrive on-brand.

   2. Rules under `.kc-storefront`, for the pages whose *layout* had to change
      rather than their colour: a shop with a real masthead, a product page
      with a gallery beside its buy box, a checkout with a summary that follows
      you down the page.

   `.kc-storefront` is the <main> of partials/base-shop.html.twig, so it holds
   every storefront page whether or not this theme has forked its template —
   which is why the account area, the invoice, and anything a later plugin
   release adds are dressed here without a template of their own. A page the
   theme has not forked is also given a container by the `:not(.kc-shop)` rule
   at the end of this section, since the plugin's own templates emit no wrapper
   and would otherwise run edge to edge.

   Load order: this file is registered at a lower priority than the plugin's
   stylesheet so it emits afterwards, and every rule is scoped under
   .kc-storefront or a kc- component class so it also out-specifies the
   plugin's deliberately-weak `:where()` fallbacks. Either alone would do; both
   together mean a change to the plugin's asset priority cannot quietly undress
   the store.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Token bridge — the whole hand-off to the plugin's stylesheet
   --------------------------------------------------------------------------
   Split by job, the way the plugin uses them: --accent is ink and borders,
   --accent-strong is the only one that ever fills a box. Lagoon reads as the
   store's voice, Board is reserved for the thing you click.
   -------------------------------------------------------------------------- */

:root {
    --kahunacart-fg: var(--ks-koa);
    --kahunacart-bg: var(--ks-salt);
    --kahunacart-muted: var(--ks-koa-soft);
    --kahunacart-subtle: var(--ks-koa-soft);
    --kahunacart-border: var(--ks-line);
    --kahunacart-border-strong: #D6C3A4;

    --kahunacart-accent: var(--ks-lagoon);
    --kahunacart-accent-ink: var(--ks-lagoon-deep);
    --kahunacart-accent-strong: var(--ks-board);
    --kahunacart-on-accent-strong: #FFF6EA;

    --kahunacart-surface: var(--ks-sand);
    --kahunacart-surface-2: var(--ks-sand-soft);
    --kahunacart-surface-sunk: var(--ks-sand-deep);
    --kahunacart-card: var(--ks-card);
    --kahunacart-input: #FFFFFF;

    --kahunacart-radius: 10px;
    --kahunacart-radius-lg: 16px;
    --kahunacart-card-ratio: 4 / 3;
    --kahunacart-font-mono: var(--ks-mono);

    --kahunacart-success: #2E6B47;
    --kahunacart-warning: #8A4A12;
    --kahunacart-danger: #A32E12;

    --kahunacart-ease: ease;
    --kahunacart-duration: 140ms;

    /* The glyph on the line under a greyed-out button. Masked and filled with
       currentColor rather than painted, so it follows whatever ink the line
       is drawn in. */
    --kc-info-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   2. Header cart pill
   --------------------------------------------------------------------------
   Sits in the branded bar on every page, beside the CTA. Sand ground so it
   reads as a control rather than a second call to action — the count badge is
   the only Board on it, and only once there is something to count.
   -------------------------------------------------------------------------- */

.kc-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 14px;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa);
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-cart-link:hover { background: var(--ks-sand); border-color: #D6C3A4; color: var(--ks-koa); }
.kc-cart-link svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-cart-count {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    min-width: 20px;
    padding: 4px 6px;
    border-radius: 999px;
    text-align: center;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}
.kc-cart-link.kc-has-items .kc-cart-count { background: var(--ks-board); color: #FFF6EA; }

/* The account control beside it: same pill, icon only. */
.kc-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-account-link:hover { background: var(--ks-sand); border-color: #D6C3A4; }
.kc-account-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kc-account-link img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Anywhere the bar is not at its full 1120px the cart gives up its label and
   the row tightens, which is what keeps the inline nav links alive down to
   1024px rather than losing them at 1200 — see the matching note in
   css/kahuna.css. Documentation pages follow the same rules: the search icon
   is on every bar now, so nothing here is docs-only any more. */
@media (max-width: 1200px) {
    .kc-nav-in { gap: 20px; }
    .kc-cart-link { padding: 8px 11px; gap: 6px; }
    .kc-cart-label { display: none; }
}

/* Two controls went into a bar that was already full, and on a phone the CTA
   ran off the right edge. The lockup gives up room first — it is the one
   element on the row that is not a destination — and below 400px it comes down
   to the bus, which is the mark people recognise anyway. Nothing is hidden
   that a customer needs: the cart, the account and the CTA all survive. */
@media (max-width: 600px) {
    .kc-nav-in { gap: 10px; }
    .kc-nav-in .kc-brand { min-width: 0; gap: 9px; }
    .kc-nav-in .kc-brand i { width: 38px; height: 38px; }
    .kc-nav-in .kc-brand b { font-size: 19px; }
    .kc-account-link { width: 34px; height: 34px; }
    .kc-cart-link { padding: 7px 9px; }
    .kc-cart-count { min-width: 18px; padding: 3px 5px; font-size: 11px; }
    .kc-nav-in .kc-btn-small { padding: 8px 13px; font-size: 13px; }
}
/* 430px (the widest iPhone) still has room for the wordmark once everything
   above has tightened; 390px does not. */
@media (max-width: 400px) {
    .kc-nav-in .kc-brand b { display: none; }
}

/* Even wordmark-less, a docs bar at 390px (sidebar toggle, bus, search, cart,
   account, menu button) is a tight fit in 342px of gutter. The bar — and only the bar —
   trades 8px of gutter each side for it; the page's own .kc-wrap keeps its 24px. */
@media (max-width: 430px) {
    .kc-nav .kc-nav-in,
    .kc-nav .kc-menu > .kc-wrap { padding-left: 16px; padding-right: 16px; }
    .kc-nav-in { gap: 9px; }
}

/* 360px — the smallest phone still worth designing for — gets one more pass,
   so a docs bar with its sidebar toggle and a header CTA still fits. Every bar
   takes it, so the controls keep their size between docs and the rest. */
@media (max-width: 380px) {
    .kc-account-link,
    .kc-nav-search,
    .kc-menu-toggle { width: 30px; height: 30px; }
    .kc-cart-link { padding: 6px 8px; }
    .kc-nav-in .kc-btn-small { padding: 7px 10px; font-size: 12.5px; }
}

.kc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* --------------------------------------------------------------------------
   3. Shop shell
   --------------------------------------------------------------------------
   The masthead band is Sand-soft against the Salt page, which is the same
   move the page hero makes to separate a hero from the cards below it.
   -------------------------------------------------------------------------- */

.kc-shop-hero {
    background: var(--ks-sand-soft);
    border-bottom: 1px solid var(--ks-line);
    padding: 52px 0 44px;
}
.kc-shop-hero-in {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.kc-shop-hero-text { flex: 1 1 380px; min-width: 0; }
.kc-shop-hero h1 {
    font-size: clamp(32px, 4.4vw, 46px);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 12px;
}
.kc-shop-hero .kc-intro { margin: 0; max-width: 54ch; }
.kc-shop-hero-search { flex: 0 1 380px; min-width: 260px; }

/* A narrower masthead for the pages that are a step in a flow rather than a
   place to browse — cart, checkout, receipt, account, sign-in. */
.kc-shop-hero.kc-shop-hero--flow { padding: 44px 0 36px; }
.kc-shop-hero.kc-shop-hero--flow h1 { font-size: clamp(28px, 3.6vw, 38px); }

.kc-shop {
    background: var(--ks-salt);
    padding: 40px 0 88px;
}

/* A storefront page that extends the plugin's has no container inside its
   section, so the section is the band and the container at once: the same
   1120px column as .kc-wrap, with the band's ground still running edge to
   edge. */
.kc-shop.kc-shop-frame { padding-inline: max(24px, calc((100% - 1072px) / 2)); }

/* Storefront pages this theme has not forked — the account area, the invoice,
   whatever a later plugin release adds. The plugin's templates emit a bare
   `.kahunacart` section with no container of its own, so it is given one here
   rather than being left to run the full width of the window. Pages that *are*
   forked carry .kc-shop and bring their own .kc-wrap, hence the :not(). */
.kc-storefront > .kahunacart:not(.kc-shop) {
    display: block;
    max-width: 1120px;
    margin: 0 auto;
    padding: 44px 24px 88px;
}
.kc-storefront > .kahunacart:not(.kc-shop) > h1 {
    font-family: var(--ks-display);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--ks-koa);
}
/* The newsletter's pages put their heading inside a card rather than on the
   section, so the rule above does not reach it; the display face still
   should. Size and spacing stay the plugin's, which fits the card. */
.kc-storefront .kahunacart-newsletters-card h1 {
    font-family: var(--ks-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ks-koa);
}
/* No align-items:start on these: a sticky child cannot travel when its
   track is sized to its own content, and the sidebar and the order summary
   both scrolled away with the page. None of these asides paints anything
   itself, so a stretched column is invisible. */
.kc-shop-layout {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 44px;
}
.kc-shop-layout.kc-shop-layout--flat { grid-template-columns: minmax(0, 1fr); }
.kc-shop-aside { position: sticky; top: calc(var(--ks-nav-h) + 20px); }
.kc-shop-main { min-width: 0; }

@media (max-width: 900px) {
    .kc-shop-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .kc-shop-aside { position: static; }
    .kc-shop-hero { padding: 36px 0 32px; }
    .kc-shop-hero-in { align-items: stretch; gap: 24px; }
    .kc-shop-hero-search { flex: 1 1 100%; }
}


/* --------------------------------------------------------------------------
   4. Shared shop furniture
   -------------------------------------------------------------------------- */

.kc-shop-panel {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 22px;
}
.kc-shop-panel + .kc-shop-panel { margin-top: 16px; }
.kc-shop-panel-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 16px;
}
.kc-shop-panel--sticky { position: sticky; top: calc(var(--ks-nav-h) + 20px); }

/* The listing writes its own count; the search results region carries the
   plugin's, which says how many matched what — so both wear the same label. */
.kc-shop-count,
.kc-storefront .kahunacart-search-summary {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 18px;
}
.kc-storefront .kahunacart-search-more,
.kc-storefront .kahunacart-listing-more { font-size: 14px; color: var(--ks-koa-soft); margin: 18px 0 0; }

.kc-shop-empty {
    background: var(--ks-card);
    border: 1px dashed var(--ks-line);
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    color: var(--ks-koa-soft);
    font-size: 16px;
}
.kc-shop-empty p { margin: 0 0 18px; }
.kc-shop-empty p:last-child { margin: 0; }

.kc-shop-back { margin: 28px 0 0; font-size: 14.5px; }
.kc-shop-back a { color: var(--ks-koa-soft); text-decoration: none; font-weight: 600; }
.kc-shop-back a:hover { color: var(--ks-lagoon); }

.kc-shop-note { font-size: 14px; color: var(--ks-koa-soft); margin: 18px 0 0; }

/* Flash messages. The plugin names the scope; each one gets its own tint. */
.kc-storefront .kahunacart-messages { margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.kc-storefront .kahunacart-message {
    margin: 0;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-sand);
    color: var(--ks-koa);
    font-size: 14.5px;
}
/* A private currency notice can offer a fresh cart after a hosted payment. */
.kc-storefront .kahunacart-currency-notice {
    margin: 0 0 24px;
    padding: 13px 16px;
    border: 1px solid var(--ks-line);
    border-inline-start: 4px solid var(--ks-lagoon);
    border-radius: 12px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-koa);
    font-size: 14.5px;
}
.kc-storefront .kahunacart-currency-notice-text { margin: 0; }
.kc-storefront .kahunacart-currency-notice-form { margin: 12px 0 0; }
.kc-storefront .kahunacart-currency-notice-button { max-width: 100%; white-space: normal; }

.kc-storefront .kahunacart-message--success { background: var(--ks-lagoon-mist); border-color: #BBD5D2; color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-message--error { background: #F8E2D8; border-color: #E8C3B2; color: #8E2A10; }
.kc-storefront .kahunacart-message--warning { background: #F5E6CE; border-color: #E3CBA1; color: #7A4410; }
/* A link inside a notice, "Sign in" most often. It keeps the notice's own
   colour so it reads on every tint, and stands out by weight and underline. */
.kc-storefront .kahunacart-message a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.kc-storefront .kahunacart-message a:hover { text-decoration-thickness: 2px; }
.kc-storefront .kc-payment-open .kahunacart-message p { margin: 0 0 10px; }
.kc-storefront .kc-payment-open-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }
.kc-storefront .kc-payment-open-note { font-size: 13.5px; color: var(--ks-koa-soft); }

/* The bundle notice: a cheaper way to buy what is already in the basket.
   Lagoon rather than a warning colour, because nothing is wrong. */
.kc-storefront .kahunacart-message--bundle { background: var(--ks-lagoon-mist); border-color: #BBD5D2; color: var(--ks-koa); }
.kc-storefront .kahunacart-message--bundle p { margin: 0 0 12px; }
.kc-storefront .kc-bundle-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kc-storefront .kc-bundle-actions form { margin: 0; }

/* Buttons. The plugin's templates use the bare `.button` class every Grav
   theme is expected to define; this is that definition, in Board. */
.kc-storefront .button,
.kc-shop-hero .button {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    padding: 12px 22px;
    border-radius: 11px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.kc-storefront .button:hover,
.kc-shop-hero .button:hover { background: var(--ks-board-deep); color: #FFF6EA; transform: translateY(-1px); }

.kc-storefront .kc-btn-ghost,
.kc-storefront .button.kc-btn-ghost {
    background: transparent;
    color: var(--ks-koa);
    border: 1.5px solid var(--ks-koa);
}
.kc-storefront .kc-btn-ghost:hover,
.kc-storefront .button.kc-btn-ghost:hover { background: var(--ks-sand); color: var(--ks-koa); }

.kc-storefront .kc-btn-block { display: block; width: 100%; text-align: center; }

/* Form controls, shared by the checkout, the cart, the filters and the
   estimate box. Inputs are white against the warm grounds so a field always
   reads as somewhere to type. */
.kc-storefront .kc-input,
.kc-storefront input[type="text"],
.kc-storefront input[type="email"],
.kc-storefront input[type="tel"],
.kc-storefront input[type="search"],
.kc-storefront input[type="number"],
.kc-storefront input[type="password"],
.kc-storefront select,
.kc-storefront textarea,
.kc-shop-hero input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 11px 13px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.kc-storefront .kc-input:focus,
.kc-storefront input:focus,
.kc-storefront select:focus,
.kc-storefront textarea:focus,
.kc-shop-hero input[type="search"]:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.15);
}
.kc-storefront ::placeholder { color: #A8917A; }

/* Selects. Helios's Tailwind forms layer sets appearance:none on every select,
   which takes the native arrow with it, so the arrow is drawn here: a Koa
   chevron on the right, and room for it so a long option never runs under it.
   The second selector outranks .kc-input, whose background shorthand would
   otherwise paint over the arrow. */
.kc-storefront select,
.kc-storefront select.kc-input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235C4A3A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 13px center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
}

.kc-storefront .kc-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
}

/* Tick boxes and radios.
   Helios's Tailwind forms layer already paints these with appearance:none and
   an explicit 1rem box, and fills a checked one from `color` rather than
   accent-color — so this re-points that fill at Lagoon and softens the border
   to the brand line, and must never set `width: auto`, which on a box with no
   native appearance collapses it to its own borders. */
.kc-storefront input[type="checkbox"],
.kc-storefront input[type="radio"],
.kc-auth-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    color: var(--ks-lagoon);
    border-color: #C0AB92;
    cursor: pointer;
}
.kc-storefront input[type="checkbox"] { border-radius: 5px; }
.kc-storefront input[type="checkbox"]:focus,
.kc-storefront input[type="radio"]:focus {
    --tw-ring-color: var(--ks-lagoon);
    border-color: var(--ks-lagoon);
}

.kc-storefront .kc-fieldset {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    margin: 0 0 16px;
}
/* The delivery address is on the page whether the shopper wants it or not, and
   `hidden` is what keeps it out of the way until they untick "ship to the
   billing address". Said out loud because the browser's own
   `[hidden] { display: none }` sits at (0,1,0) and would lose to any later rule
   of ours giving a fieldset a `display` — and a delivery address that paints
   anyway is a second address form on every checkout. */
.kc-storefront .kc-fieldset[hidden] { display: none; }
.kc-storefront .kc-legend {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    padding: 0;
    margin: 0 0 18px;
    float: left;
    width: 100%;
}
.kc-storefront .kc-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    clear: both;
}
.kc-storefront .kc-field { margin: 0; }
.kc-storefront .kc-field--wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .kc-storefront .kc-field-grid { grid-template-columns: 1fr; } }

.kc-storefront .kc-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ks-koa);
    margin: 14px 0 0;
    cursor: pointer;
}
.kc-storefront .kc-checkbox input { margin: 2px 0 0; flex: none; }

.kc-storefront .kc-hint { font-size: 13.5px; color: var(--ks-koa-soft); margin: 8px 0 0; }
.kc-storefront .kc-hint--warn { color: #8A4A12; }

/* Radio rows: payment providers, shipping methods. */
.kc-storefront .kc-choice-list { display: flex; flex-direction: column; gap: 10px; clear: both; }
.kc-storefront .kc-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    background: var(--ks-salt);
    font-size: 15px;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-storefront .kc-choice:hover { border-color: #D6C3A4; }
.kc-storefront .kc-choice input { flex: none; }
.kc-storefront .kc-choice:has(input:checked) {
    border-color: var(--ks-lagoon);
    background: var(--ks-lagoon-mist);
}
.kc-storefront .kc-choice-label { flex: 1 1 auto; font-weight: 600; }
.kc-storefront .kc-choice-price { font-family: var(--ks-mono); font-size: 14px; color: var(--ks-koa-soft); }

/* A shipping method this basket cannot have, and the sentence that says why.
   The row wraps so the note gets a line of its own under the price rather
   than squeezing in beside it. */
.kc-storefront .kc-choice { flex-wrap: wrap; }
.kc-storefront .kc-choice-note { flex-basis: 100%; font-size: 13px; color: var(--ks-koa-soft); }
.kc-storefront .kc-choice:has(input:disabled) { cursor: default; opacity: .6; }
.kc-storefront .kc-choice:has(input:disabled):hover { border-color: var(--ks-line); }

/* The receipt maths block, shared by cart, checkout and the order page. */
.kc-storefront .kahunacart-totals {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
.kc-storefront .kahunacart-totals th,
.kc-storefront .kahunacart-totals td {
    padding: 9px 0;
    text-align: left;
    font-weight: 500;
    color: var(--ks-koa-soft);
    border: 0;
}
.kc-storefront .kahunacart-totals td { text-align: right; font-family: var(--ks-mono); color: var(--ks-koa); font-variant-numeric: tabular-nums; }
.kc-storefront .kahunacart-totals .kahunacart-total th,
.kc-storefront .kahunacart-totals .kahunacart-total td {
    border-top: 1px solid var(--ks-line);
    padding-top: 14px;
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--ks-koa);
    letter-spacing: -0.01em;
}
.kc-storefront .kahunacart-totals .kahunacart-total td { color: var(--ks-board); }
.kc-storefront .kahunacart-adjustment em { font-style: normal; font-size: 12px; color: #A8917A; }


/* --------------------------------------------------------------------------
   5. Storefront search box
   --------------------------------------------------------------------------
   The plugin's own partial, dressed. Field and button share one rounded
   shell so the masthead reads as a single control.
   -------------------------------------------------------------------------- */

.kc-shop-search .kahunacart-search { display: flex; gap: 0; margin: 0; }
.kc-shop-search .kahunacart-search-field { flex: 1 1 auto; min-width: 0; display: block; margin: 0; }
.kc-shop-search input[type="search"] {
    border-radius: 11px 0 0 11px;
    border-right: 0;
    height: 46px;
}
.kc-shop-search .button {
    flex: none;
    border-radius: 0 11px 11px 0;
    height: 46px;
    padding: 0 20px;
}
.kc-shop-search .button:hover { transform: none; }
.kc-storefront .kahunacart-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   6. Catalog sidebar
   --------------------------------------------------------------------------
   The plugin's category tree and filter panel, included unmodified and
   dressed here — the same arrangement the demo theme uses, so a change in the
   plugin's markup does not need a fork to be picked up.
   -------------------------------------------------------------------------- */

.kc-storefront .kahunacart-catalog-nav { display: flex; flex-direction: column; gap: 28px; }

.kc-storefront .kahunacart-nav-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ks-line);
}

.kc-storefront .kahunacart-cat-list { list-style: none; margin: 0; padding: 0; }
.kc-storefront .kahunacart-cat-list .kahunacart-cat-list { margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-cat-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0; }
.kc-storefront .kahunacart-cat-branch { width: 100%; }
.kc-storefront .kahunacart-cat-summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.kc-storefront .kahunacart-cat-summary::-webkit-details-marker { display: none; }
.kc-storefront .kahunacart-cat-summary::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-right: 1.5px solid var(--ks-koa-soft);
    border-bottom: 1.5px solid var(--ks-koa-soft);
    transform: rotate(-45deg);
    transition: transform 140ms ease;
}
.kc-storefront details[open] > .kahunacart-cat-summary::before { transform: rotate(45deg); }

.kc-storefront .kahunacart-cat-link {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    color: var(--ks-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
}
.kc-storefront .kahunacart-cat-link:hover { background: var(--ks-sand); color: var(--ks-lagoon); }
.kc-storefront .kahunacart-cat-link.is-current { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-cat-count,
.kc-storefront .kahunacart-filter-count {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    color: #A8917A;
    font-variant-numeric: tabular-nums;
}

.kc-storefront .kahunacart-filters { margin: 0; }
.kc-storefront .kahunacart-filter-group { border: 0; margin: 0 0 20px; padding: 0; }
.kc-storefront .kahunacart-filter-group legend {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    padding: 0;
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-filter-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kc-storefront .kahunacart-filter-option {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ks-koa);
    padding: 4px 0;
    cursor: pointer;
}
.kc-storefront .kahunacart-filter-option input { flex: none; }
.kc-storefront .kahunacart-filter-option > span:not(.kahunacart-filter-count) { flex: 1 1 auto; }

.kc-storefront .kahunacart-filter-range { display: flex; align-items: center; gap: 8px; }
.kc-storefront .kahunacart-filter-field { flex: 1 1 0; min-width: 0; }
.kc-storefront .kahunacart-filter-dash { color: var(--ks-koa-soft); flex: none; }
.kc-storefront .kahunacart-filter-price input { padding: 9px 11px; font-size: 14px; }

.kc-storefront .kahunacart-filter-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kc-storefront .kahunacart-filter-actions .button { padding: 10px 18px; font-size: 14px; }
.kc-storefront .kahunacart-filter-clear { font-size: 13.5px; color: var(--ks-koa-soft); text-decoration: underline; }

/* The rest of a facet the `catalog.facets.max_values` cap has shortened. A
   <details> holding real checkboxes in the same form, so opening it costs no
   request; the summary reads like the Clear link above rather than like a
   control, because it reveals rather than does. */
.kc-storefront .kahunacart-filter-more { margin-top: 6px; }
.kc-storefront .kahunacart-filter-more-toggle {
    font-size: 13.5px;
    color: var(--ks-lagoon);
    cursor: pointer;
    padding: 2px 0;
}
.kc-storefront .kahunacart-filter-more-toggle:hover { color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-filter-more > .kahunacart-filter-options { margin-top: 6px; }

/* A value nothing reachable answers. Counts are taken over the listing being
   looked at, so a value that would give an empty grid reads 0 and its input is
   disabled; greying it where it stands rather than dropping it keeps the panel
   from reshuffling under the cursor on every tick. `catalog.facets.empty: hide`
   drops them instead and nothing then reaches these rules. Whatever the shopper
   has ticked is never disabled, at any count. */
.kc-storefront .kahunacart-filter-option.is-disabled,
.kc-storefront .kahunacart-filter-range.is-disabled {
    color: var(--ks-koa-soft);
    opacity: 0.5;
    cursor: not-allowed;
}
.kc-storefront .kahunacart-filter-option.is-disabled input { cursor: not-allowed; }

/* Under a facet whose every value is out of reach: one muted line under the
   heading, rather than a column of a dozen dead boxes all reading 0. */
.kc-storefront .kahunacart-filter-none {
    margin: 0;
    font-size: 13.5px;
    font-style: italic;
    color: var(--ks-koa-soft);
}

/* A category holding nothing under the filters currently on. Still a link: the
   tree is the way out of a corner somebody has filtered themselves into. The
   row rather than the whole item, because a dead branch's children carry the
   class too and two nested opacities multiply. */
.kc-storefront .kahunacart-cat-item.is-unavailable > .kahunacart-cat-link,
.kc-storefront .kahunacart-cat-item.is-unavailable > .kahunacart-cat-count,
.kc-storefront .kahunacart-cat-item.is-unavailable > .kahunacart-cat-branch > .kahunacart-cat-summary {
    opacity: 0.5;
}

/* A specification value that is also a link to the rest of the catalogue
   answering it. Ink rather than Lagoon at rest: a spec table where every
   second cell is brand-coloured reads as a list of links rather than a table
   of facts, and the dotted rule under it is what says it is one. */
.kc-storefront .kahunacart-attribute-link {
    color: var(--ks-koa);
    text-decoration: none;
    border-bottom: 1px dotted var(--ks-line);
}
.kc-storefront .kahunacart-attribute-link:hover,
.kc-storefront .kahunacart-attribute-link:focus-visible {
    color: var(--ks-lagoon);
    border-bottom-color: currentColor;
}
.kc-storefront .kahunacart-attribute-link .kahunacart-spec-hex { color: inherit; }


/* --------------------------------------------------------------------------
   7. Product grid
   -------------------------------------------------------------------------- */

.kc-shop-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Four cards in three columns leaves one on its own row, and the add-ons
   section has exactly four now. A grid of four sits two by two instead. */
.kc-shop-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kc-shop-layout--flat .kc-shop-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kc-shop-grid, .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-shop-grid, .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: minmax(0, 1fr); } }

.kc-pcard {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.kc-pcard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); border-color: #D6C3A4; }
.kc-pcard.is-sold-out { opacity: 0.72; }

.kc-pcard-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.kc-pcard-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
    overflow: hidden;
}
.kc-pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A product with no picture gets a tonal tile carrying its monogram, in a hue
   picked from its id and held inside the warm band — 15deg to 75deg, rust
   through sand to olive — so a catalog that has never uploaded an image still
   reads as a catalog rather than a list of holes. */
.kc-pcard-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(150deg,
            hsl(var(--ks-tile-hue, 30) 42% 88%),
            hsl(var(--ks-tile-hue, 30) 34% 80%));
}
.kc-pcard-mono {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -0.02em;
    color: hsl(var(--ks-tile-hue, 30) 38% 34% / 0.5);
}

.kc-pcard-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.kc-badge {
    font-family: var(--ks-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
}
.kc-badge--sale { background: var(--ks-board); color: #FFF6EA; border-color: var(--ks-board); }
.kc-badge--soon { white-space: nowrap; color: var(--ks-lagoon-deep); border-color: var(--ks-lagoon-mist); background: var(--ks-lagoon-mist); }
/* Compact rows are too tight for a pill: a quiet one-line label beside the price. */
.kc-compact-soon {
    flex: none;
    font-family: var(--ks-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    white-space: nowrap;
}
.kc-badge--sold-out { background: var(--ks-koa); color: var(--ks-sand); border-color: var(--ks-koa); }
.kc-badge--digital { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); border-color: #BBD5D2; }

.kc-pcard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.kc-pcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kc-pcard-title {
    font-family: var(--ks-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ks-koa);
    margin: 0;
    min-width: 0;
}
.kc-pcard-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ks-board);
    white-space: nowrap;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.kc-pcard-was { font-family: var(--ks-mono); font-size: 12.5px; color: #A8917A; margin-left: 6px; font-weight: 400; }
/* "Not available in EUR" where a price would be, for a product nobody priced in
   the shopper's currency (KahunaCart 1.4.0). The words come from the plugin's
   own partial; this only says where each place puts them. kahunacart.com sells
   in one currency, so none of it shows there. On a card the line takes the row
   under the name, because the price's own column is too narrow for it. */
.kc-pcard-head:has(.kahunacart-unavailable) { flex-wrap: wrap; row-gap: 2px; }
.kc-pcard-head .kahunacart-unavailable { flex: 0 0 100%; margin: 0; font-size: 13.5px; color: var(--ks-koa-soft); }
.kc-hero-body .kahunacart-unavailable { margin: 0; font-size: 15px; color: var(--ks-koa-soft); }
.kc-compact-link .kahunacart-unavailable { flex: none; margin: 0; font-size: 13.5px; color: var(--ks-koa-soft); }
.kc-price-line .kahunacart-unavailable,
.kc-renew-num .kahunacart-unavailable { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--ks-koa-soft); }
.kc-pcard-summary {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kc-pcard-stock {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8A4A12;
    margin-top: auto;
    padding-top: 4px;
}

/* --------------------------------------------------------------------------
   7b. Sectioned listing
   --------------------------------------------------------------------------
   The shop page split into blocks by the plugin's `catalog.sections`: the hero
   at the top, the add-ons under it, then the shelf of payment providers. The
   plugin resolves the blocks and this theme draws them, through
   partials/kahunacart-section-{hero,grid,compact}.html.twig.

   The column count each block was configured with arrives as
   --kahunacart-section-columns on the block's own element, which is the
   plugin's public token rather than an internal one, so the number a merchant
   typed into the admin is the number these rules read. Every grid below is
   auto-fill with a real minimum track, so the count is a ceiling and the
   blocks collapse on their own without a media query per block. `auto-fill`
   rather than `auto-fit` because the commonest hero here holds one product,
   and auto-fit would collapse the empty track and stretch that one card across
   the width of two with its text ending halfway.
   -------------------------------------------------------------------------- */

.kc-section { margin-bottom: 48px; }
.kc-section:last-child { margin-bottom: 0; }

.kc-section-title {
    font-family: var(--ks-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ks-line);
}

/* The hero. One card per product, picture beside the words, at most two across
   because a third one is the grid with a longer summary. */
.kc-hero-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
    gap: 20px;
    max-width: calc(var(--kahunacart-section-columns, 2) * 34rem);
}
.kc-hero-card {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    transition: box-shadow 140ms ease, border-color 140ms ease;
}
.kc-hero-card:hover { box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); border-color: #D6C3A4; }

/* A hero holding one product is the store's headline and takes the whole row:
   a bigger picture, a bigger title, and the summary set wide beside it. The
   two-across ceiling above is for heroes with two products. */
.kc-hero-list:has(> .kc-hero-card:only-child) {
    grid-template-columns: 1fr;
    max-width: none;
}
.kc-hero-card:only-child { padding: 28px; gap: 32px; }
.kc-hero-card:only-child .kc-hero-media { flex: 1 1 18rem; max-width: 24rem; }
.kc-hero-card:only-child .kc-hero-body { flex: 2 1 22rem; gap: 14px; }
.kc-hero-card:only-child .kc-hero-title { font-size: clamp(28px, 3vw, 36px); }
.kc-hero-card:only-child .kc-hero-summary { font-size: 17px; max-width: 60ch; }

/* Stops shrinking at 8rem, by which width the row is about to wrap anyway and
   a narrower column would be a stripe rather than a picture. */
.kc-hero-media {
    position: relative;
    flex: 1 1 8rem;
    min-width: 8rem;
    max-width: 15rem;
    align-self: flex-start;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
}
.kc-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kc-hero-body {
    flex: 3 1 14rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.kc-hero-title {
    font-family: var(--ks-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}
.kc-hero-title a { color: var(--ks-koa); text-decoration: none; }
.kc-hero-title a:hover { color: var(--ks-lagoon); }
.kc-hero-summary {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
    margin: 0;
    max-width: 46ch;
}
.kc-hero-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ks-board);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
/* On the baseline of the card whatever length the summary came out, so two
   heroes side by side do not have their buttons at two different heights. */
.kc-hero-action { margin-top: auto; }

/* The grid block. The cards are this theme's own; all this does is cap the
   track count at what the block asked for. */
.kc-section--grid .kc-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    max-width: calc(var(--kahunacart-section-columns, 3) * 22rem);
}

/* The compact block. Rows rather than tiles, for the shelf people scan. */
.kc-compact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: 4px 20px;
    max-width: calc(var(--kahunacart-section-columns, 2) * 26rem);
}
.kc-compact-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ks-koa);
    transition: background 140ms ease;
}
.kc-compact-link:hover { background: var(--ks-sand-soft); }
.kc-compact-link:hover .kc-compact-title { color: var(--ks-lagoon); }
.kc-compact-media {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
}
.kc-compact-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The monogram tile is shared with the product card, where it fills a card and
   carries a 40px letter. At thumbnail size that letter is the whole tile. */
.kc-compact-media .kc-pcard-mono { font-size: 17px; }

.kc-compact-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    line-height: 1.35;
}
.kc-compact-price {
    flex: none;
    font-family: var(--ks-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ks-board);
    font-variant-numeric: tabular-nums;
}

/* Subcategory cards — the department landing page, same card language. */
.kc-storefront .kahunacart-subcategory-grid {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 900px) { .kc-storefront .kahunacart-subcategory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-storefront .kahunacart-subcategory-grid { grid-template-columns: minmax(0, 1fr); } }
.kc-storefront .kahunacart-subcategory-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.kc-storefront .kahunacart-subcategory-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); }
.kc-storefront .kahunacart-subcategory-link { display: block; padding: 18px; text-decoration: none; color: inherit; }
.kc-storefront .kahunacart-subcategory-media { margin: -18px -18px 14px; }
.kc-storefront .kahunacart-subcategory-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.kc-storefront .kahunacart-subcategory-title { font-family: var(--ks-display); font-size: 16.5px; font-weight: 700; margin: 0 0 4px; }
.kc-storefront .kahunacart-subcategory-count { font-family: var(--ks-mono); font-size: 11.5px; color: var(--ks-koa-soft); }


/* --------------------------------------------------------------------------
   8. Product page
   -------------------------------------------------------------------------- */

.kc-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
}
/* The column stretches so the sticky box inside it has somewhere to travel;
   the bordered box stays the height of the picture rather than growing into a
   tall empty card beside a long description. */
.kc-product-media-col { min-width: 0; }
@media (max-width: 900px) { .kc-product-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.kc-product-media {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    overflow: hidden;
    position: sticky;
    top: calc(var(--ks-nav-h) + 20px);
}
@media (max-width: 900px) { .kc-product-media { position: static; } }

.kc-product-media .kahunacart-gallery { margin: 0; }
.kc-product-media .kahunacart-gallery-main {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.kc-product-media .kahunacart-gallery-main::-webkit-scrollbar { display: none; }
.kc-product-media .kahunacart-gallery-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.kc-product-media .kahunacart-gallery-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kc-product-media .kahunacart-gallery-thumbs {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border-top: 1px solid var(--ks-line);
    overflow-x: auto;
}
.kc-product-media .kahunacart-gallery-thumbs img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--ks-line);
    display: block;
}

/* The stand-in when a product has no pictures at all. */
.kc-product-ph {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg,
        hsl(var(--ks-tile-hue, 30) 42% 88%),
        hsl(var(--ks-tile-hue, 30) 34% 80%));
}
.kc-product-ph span {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 84px;
    letter-spacing: -0.03em;
    color: hsl(var(--ks-tile-hue, 30) 38% 34% / 0.45);
}

.kc-product-info { min-width: 0; }
.kc-product-title {
    font-family: var(--ks-display);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: var(--ks-koa);
}
.kc-product-summary { font-size: 17px; line-height: 1.55; color: var(--ks-koa-soft); margin: 0 0 24px; }
.kc-product-desc { font-size: 15.5px; color: var(--ks-koa); margin: 24px 0 0; }
.kc-product-desc h2 { font-size: 21px; font-weight: 800; margin: 28px 0 10px; }
.kc-product-desc h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.kc-product-desc p { margin: 0 0 14px; }
.kc-product-desc ul, .kc-product-desc ol { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.kc-product-desc ol { list-style: decimal; }
.kc-product-desc li { margin-bottom: 6px; }
.kc-product-desc code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 6px; padding: 2px 6px; }
.kc-product-desc pre { background: var(--ks-koa); color: #E8DECF; border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
.kc-product-desc pre code { background: none; padding: 0; color: inherit; }

/* The buy box: the one panel on the page that fills with Board. */
.kc-product-buy {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 22px;
    margin: 0 0 24px;
}
/* The plugin gives the buy form its own bordered surface, which inside this
   panel would read as a box in a box. The panel is the box; the form is
   flattened into it. */
.kc-product-buy .kahunacart-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
}
.kc-product-buy .kahunacart-options,
.kc-product-buy .kahunacart-variant-picker { flex: 1 1 100%; }
.kc-product-buy .kahunacart-option { margin: 0 0 14px; }
.kc-product-buy .kahunacart-option-name {
    display: block;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 8px;
}
.kc-product-buy .kahunacart-option-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.kc-product-buy .kahunacart-option-choice {
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ks-line);
    background: var(--ks-salt);
    color: var(--ks-koa);
    cursor: pointer;
}
.kc-product-buy .kahunacart-option-choice[aria-checked="true"] {
    border-color: var(--ks-lagoon);
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}
.kc-product-buy .kahunacart-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ks-board);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kc-product-buy .kahunacart-compare-price { font-family: var(--ks-mono); font-size: 16px; color: #A8917A; }
.kc-product-buy .kahunacart-qty { flex: none; margin: 0; }
.kc-product-buy .kahunacart-qty input { width: 72px; text-align: center; }
.kc-product-buy .button { margin-left: auto; padding: 13px 26px; }
.kc-product-buy select { max-width: 100%; }

/* "Notify me when it's back", and "when it launches" on a product that isn't
   on sale yet. The plugin draws it as a second box under the buy form, pulled
   up against it; inside this panel it would be a box in a box, so it is a
   section of the panel instead, under a hairline. The email field and the
   button share a row, and the note and the answer sit under them. [hidden]
   is restated because the script shows and hides it as the variant changes. */
.kc-product-buy .kahunacart-stock-alert {
    margin: 18px 0 0;
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid var(--ks-line);
    border-radius: 0;
    background: none;
}
.kc-product-buy .kahunacart-stock-alert[hidden] { display: none; }
.kc-product-buy .kahunacart-stock-alert-guest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px 12px;
    width: 100%;
}
.kc-product-buy .kahunacart-stock-alert-email {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}
.kc-product-buy .kahunacart-stock-alert-email span {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-product-buy .kahunacart-stock-alert-email input { width: 100%; min-width: 0; }
.kc-product-buy .kahunacart-stock-alert .button { margin-left: 0; white-space: nowrap; }
.kc-product-buy .kahunacart-stock-alert-note,
.kc-product-buy .kahunacart-stock-alert-status {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--ks-koa-soft);
}
.kc-product-buy .kahunacart-stock-alert-status:not(:empty) { margin-top: 2px; color: var(--ks-koa); font-weight: 600; }
.kc-product-buy .kahunacart-stock-alert-watching {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
    font-size: 14px;
    font-weight: 700;
}
.kc-product-buy .kahunacart-stock-alert-stop { font-size: 14px; color: var(--ks-koa-soft); }
.kc-product-buy .kahunacart-stock-alert-stop:hover { color: var(--ks-board); }
.kc-product-buy .kahunacart-stock-alert-which span { font-size: 13px; font-weight: 600; color: var(--ks-koa-soft); }
.kc-product-buy .kahunacart-stock-alert-signin { margin: 0; font-size: 14.5px; }
.kc-product-buy .kahunacart-stock-alert-signin a { color: var(--ks-lagoon); font-weight: 700; }
.kc-product-buy .kc-coming-soon { margin: 0; color: var(--ks-koa); font-size: 15px; line-height: 1.55; }
@media (max-width: 520px) {
    .kc-product-buy .kahunacart-stock-alert-guest { grid-template-columns: minmax(0, 1fr); }
    .kc-product-buy .kahunacart-stock-alert .button { width: 100%; }
}

/* Tags: a way of narrowing the catalog, so they are chips, not headings. */
.kc-storefront .kahunacart-tags { margin: 26px 0 0; }
.kc-storefront .kahunacart-tags-title {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.kc-storefront .kahunacart-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    color: var(--ks-koa-soft);
    text-decoration: none;
}
.kc-storefront .kahunacart-tag:hover { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); border-color: #BBD5D2; }

/* Breadcrumbs, above the product title. */
.kc-storefront .kahunacart-breadcrumbs { margin: 0 0 18px; }
.kc-storefront .kahunacart-breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
}
.kc-storefront .kahunacart-breadcrumb-item + .kahunacart-breadcrumb-item::before {
    content: "/";
    color: #C0AB92;
    margin-right: 8px;
}
.kc-storefront .kahunacart-breadcrumb-item a { color: var(--ks-koa-soft); text-decoration: none; font-weight: 600; }
.kc-storefront .kahunacart-breadcrumb-item a:hover { color: var(--ks-lagoon); }
.kc-storefront .kahunacart-breadcrumb-current { color: var(--ks-koa-soft); }
.kc-shop-hero .kahunacart-breadcrumbs { margin: 0 0 14px; }


/* --------------------------------------------------------------------------
   9. Cart
   -------------------------------------------------------------------------- */

.kc-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
}
@media (max-width: 960px) { .kc-cart-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.kc-cart-table { width: 100%; border-collapse: collapse; }
.kc-cart-table thead th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-cart-table thead th.kc-num,
.kc-cart-table td.kc-num { text-align: right; }
.kc-cart-table tbody td {
    padding: 18px 12px;
    border-bottom: 1px solid var(--ks-line);
    font-size: 15px;
    vertical-align: middle;
}
.kc-cart-table tbody tr:last-child td { border-bottom: 0; }
.kc-cart-table td:first-child, .kc-cart-table th:first-child { padding-left: 0; }
.kc-cart-table td:last-child, .kc-cart-table th:last-child { padding-right: 0; }

.kc-cart-item-title { display: block; font-weight: 600; color: var(--ks-koa); }
.kc-cart-item-sku { display: block; font-family: var(--ks-mono); font-size: 12px; color: #A8917A; margin-top: 3px; }
/* A line on backorder: "2 of 3 on backorder · Expected to ship late October" (KahunaCart 1.3.3). */
.kc-line-backorder { display: block; flex-basis: 100%; font-size: 13px; color: var(--kahunacart-warning); margin-top: 3px; }
.kc-cart-table td.kc-num { font-family: var(--ks-mono); font-variant-numeric: tabular-nums; color: var(--ks-koa); }
.kc-cart-line-total { font-weight: 600; }
.kc-storefront .kc-qty-input { width: 68px; text-align: center; padding: 8px 6px; }

.kc-storefront .kc-remove {
    background: none;
    border: 1px solid transparent;
    color: #A8917A;
    font-size: 20px;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.kc-storefront .kc-remove:hover { background: #F8E2D8; color: #8E2A10; border-color: #E8C3B2; }

.kc-cart-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* The discount form and the estimate box, dressed inside their panels. */
/* The plugin gives this form a dashed surface of its own, which inside the
   panel would be a box in a box; and its label repeats the panel's heading
   word for word, so the label is left for screen readers only. */
.kc-storefront .kahunacart-coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.kc-storefront .kahunacart-coupon > label[for="kahunacart-coupon-code"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.kc-storefront .kahunacart-coupon input { flex: 1 1 140px; min-width: 0; }
.kc-storefront .kahunacart-coupon .button { flex: none; padding: 11px 18px; font-size: 14px; }
.kc-storefront .kahunacart-coupon-remove { background: transparent; color: var(--ks-koa-soft); border: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-coupon-remove:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-storefront .kahunacart-coupon-active {
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-lagoon-deep);
    background: var(--ks-lagoon-mist);
    border-radius: 8px;
    padding: 8px 11px;
    margin: 0 0 14px;
}

.kc-storefront .kahunacart-estimate-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-estimate-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.kc-storefront .kahunacart-estimate-field { flex: 1 1 100%; }
.kc-storefront .kahunacart-estimate-field > span:first-child { display: block; font-size: 13px; font-weight: 600; color: var(--ks-koa-soft); margin: 0 0 6px; }
.kc-storefront .kahunacart-estimate-form .button { flex: none; padding: 11px 18px; font-size: 14px; }
.kc-storefront .kahunacart-estimate-result { margin: 14px 0 0; font-size: 14px; }
.kc-storefront .kahunacart-estimate-hint { font-size: 13.5px; color: var(--ks-koa-soft); margin: 12px 0 0; }


/* --------------------------------------------------------------------------
   10. Checkout
   -------------------------------------------------------------------------- */

/* The plugin caps .kahunacart-checkout-form at 42rem, which is right for the
   single stacked column it ships and wrong for two — without the reset the
   form never grows past 672px and the summary sits in the middle of the page
   with the right third empty. Same story for the one-message pages below. */
.kc-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 40px;
    max-width: none;
    align-items: start;
}
@media (max-width: 960px) { .kc-checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.kc-checkout-main { min-width: 0; }
.kc-checkout-aside { min-width: 0; }
.kc-checkout-pay { min-width: 0; }

/* The payment step is one element wrapping the payment choices, the notes and
   the button that spends the money, because the plugin's script greys Place
   order against the controls inside the step it sits in — a method nobody has
   picked has to be in the same element as the button that would charge it. This
   layout draws those in two columns, so the wrapper itself draws no box and its
   two halves take their own places in the grid. */
.kc-step--payment { display: contents; }

@media (min-width: 961px) {
    /* Stated rather than left to auto-placement, because the payment step's two
       halves arrive as separate items in the same flow as the column above
       them, and the summary has to run beside both rather than start level with
       the second. */
    .kc-checkout-main { grid-column: 1; grid-row: 1; }
    .kc-checkout-pay { grid-column: 1; grid-row: 2; }
    /* Stretched to the height of both rows, not the `start` the layout gives
       everything else: a sticky panel cannot travel outside its own box, so
       an aside only as tall as the summary left it scrolling away with the
       page, and Place order went with it. */
    .kc-checkout-aside { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
}

/* ---- express pay ----
   The wallet buttons a provider mounted, at the top of the left column and
   above the first section of the form. The plugin's own sheet draws the
   caption, the row and the "or continue below" divider; this gives them the
   site's voice and the spacing that puts the block in the same rhythm as the
   cards under it. The buttons stay on the column's left edge, level with the
   inputs, and each keeps the plugin's cap so a lone wallet button is a button
   rather than a bar across the column. Nothing renders here today — this shop
   has no express provider — and the rules cost nothing until one is installed. */
.kc-storefront .kahunacart-express {
    margin: 0 0 20px;

    /* What a wallet button paints itself with on the plugin's `auto` theme,
       which is what a store gets until a merchant picks a fixed colour. The
       plugin resolves it from the storefront's ink and ground and would land
       here on its own; it is written out because this site is light-only — it
       sets the theme to light before first paint and strips any dark class —
       and a button that reads its colours off the page should be pinned to the
       one palette this file has rather than left free to follow a visitor's
       system preference into a scheme the rest of the page does not have. */
    --kahunacart-express-auto-bg: var(--ks-koa);
    --kahunacart-express-auto-fg: var(--ks-salt);
    --kahunacart-express-auto-border: transparent;
}

.kc-storefront .kahunacart-express-heading {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
}

.kc-storefront .kahunacart-express-or {
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--ks-koa-soft);
}

.kc-storefront .kahunacart-express-or::before,
.kc-storefront .kahunacart-express-or::after { background: var(--ks-line); }

/* Where a Continue lands. The plugin sends the shopper back to the step they
   are now on rather than to the top of the page, so each step wrapper carries
   an id — and the header is sticky, which is what this clears. */
#kahunacart-checkout-address,
#kahunacart-checkout-shipping,
#kahunacart-checkout-payment { scroll-margin-top: calc(var(--ks-nav-h) + 20px); }

.kc-summary-items { list-style: none; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--ks-line); display: flex; flex-direction: column; gap: 12px; }
.kc-summary-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 14px; font-size: 14.5px; }
/* The title takes what the total leaves, so a backorder line wraps onto a row of its own under the two. */
.kc-summary-item-title { color: var(--ks-koa); flex: 1 1 0; min-width: 0; }
.kc-summary-qty { font-family: var(--ks-mono); font-size: 12.5px; color: #A8917A; }
.kc-summary-item-total { font-family: var(--ks-mono); color: var(--ks-koa); white-space: nowrap; font-variant-numeric: tabular-nums; }

.kc-checkout-aside .kc-shop-panel .button { margin-top: 18px; }
.kc-checkout-aside .kc-shop-back { text-align: center; margin-top: 16px; }

/* ---- the checkout steps ----
   Checkout is one form with a button under each part of it, and the plugin's
   script says out loud which parts are finished: `data-kc-step-ready` on the
   step and on its button, the real `disabled` attribute beside it, and
   `aria-busy` on the delivery region while the options are being fetched. All
   three are set by script alone, so a browser with no scripting meets none of
   them and every button is live — which is the checkout that has always worked
   without JavaScript. */

/* The button that ends a step, under the section it belongs to. The fieldsets
   carry their own 16px below them, so this only tops that up. */
.kc-checkout-main .kc-step-actions,
.kc-checkout-main .kahunacart-step-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 24px;
}

@media (max-width: 560px) {
    .kc-checkout-main .kc-step-actions .button,
    .kc-checkout-main .kahunacart-step-actions .button { width: 100%; text-align: center; }
}

/* In the summary panel there is one button and it is the width of the panel. */
.kc-storefront .kc-step-actions--block,
.kc-storefront .kahunacart-place-order-actions { display: block; margin: 0; }
.kc-storefront .kahunacart-place-order { display: block; width: 100%; text-align: center; }

/* Greyed out while the step it sits under is unfinished. `disabled` is the
   real state; the attribute is the styling hook, and the cursor goes on the
   wrapper because a dead button does not receive the hover itself. */
.kc-storefront .kahunacart-buy .button.kahunacart-sold-out[disabled],
.kc-storefront .kc-step-actions .button[disabled],
.kc-storefront .kc-step-actions .button[data-kc-step-ready="0"],
.kc-storefront .kahunacart-step-actions .button[disabled],
.kc-storefront .kahunacart-step-actions .button[data-kc-step-ready="0"] {
    background: var(--ks-sand);
    color: #A8917A;
    pointer-events: none;
    transform: none;
}

.kc-storefront [data-kc-step-ready="0"] .kc-step-actions,
.kc-storefront .kc-step-actions:has(.button[aria-disabled="true"]),
.kc-storefront [data-kc-step-ready="0"] .kahunacart-step-actions,
.kc-storefront .kahunacart-step-actions:has(.button[aria-disabled="true"]) { cursor: not-allowed; }

/* What a greyed-out button is waiting for, under the button.
   The plugin's script makes this element where a theme has not drawn one, and
   the one it made in the summary panel landed on top of Place order. Every
   button that can be greyed out has one of its own now — both Continues and
   Place order — so the line always appears in the same place: under the
   button, a little below it, reading as a note rather than a caption. Small,
   but in the secondary ink rather than the placeholder grey: it is the
   sentence that says why nothing is happening, and it has to be read. */
.kc-storefront .kc-step-missing,
.kc-storefront .kahunacart-step-missing {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 8px 0 24px;
    font-family: var(--ks-body);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ks-koa-soft);
}

/* The summary panel's copy sits directly under a full-width button, so it has
   the panel's own spacing rather than a step's. */
.kc-storefront .kc-step-actions--block + .kc-step-missing,
.kc-storefront .kahunacart-place-order-actions + .kahunacart-step-missing { margin: 10px 0 12px; }

/* `hidden` has to win over the flex above it, or an empty line would hold open
   a gap under every button on the page. */
.kc-storefront .kc-step-missing[hidden],
.kc-storefront .kahunacart-step-missing[hidden] { display: none; }

.kc-storefront .kc-step-missing::before,
.kc-storefront .kahunacart-step-missing::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    background: currentColor;
    opacity: .75;
    -webkit-mask: var(--kc-info-glyph) no-repeat center / contain;
    mask: var(--kc-info-glyph) no-repeat center / contain;
}

/* The chevron on a Continue: pressing it takes you to the section below, and
   the glyph says so. Only on the two Continues — Place order goes nowhere on
   the page. */
.kc-storefront .kc-step-actions .button,
.kc-storefront .kahunacart-step-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.kc-storefront .kc-step-chevron,
.kc-storefront .kahunacart-step-chevron { width: 1em; height: 1em; flex: none; }

/* While the delivery options are on their way, and while a method the shopper
   has just picked is being stored and the order repriced. Quiet rather than
   busy: what is there stays readable, it just stops taking clicks until the
   answer has arrived. The summary panel is in the list because the total is one
   of the things about to change, and a figure that fades for a moment is a
   figure nobody reads as final. */
.kc-storefront [data-kc-step][aria-busy="true"],
.kc-storefront #kahunacart-checkout-summary[aria-busy="true"] {
    opacity: .55;
    pointer-events: none;
    cursor: progress;
    transition: opacity 140ms ease;
}

/* The address-check panel, when a geocoder proposes a correction. */
.kc-storefront .kahunacart-address-suggestion {
    background: var(--ks-lagoon-mist);
    border: 1px solid #BBD5D2;
    border-radius: 16px;
    padding: 20px 22px;
    margin: 0 0 20px;
    grid-column: 1 / -1;
}
.kc-storefront .kahunacart-address-suggestion h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--ks-lagoon-deep); }

.kc-storefront .kahunacart-shipping-address,
.kc-storefront .kahunacart-shipping-methods { clear: both; }


/* --------------------------------------------------------------------------
   11. Receipt, processing, denied
   -------------------------------------------------------------------------- */

.kc-order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
}
@media (max-width: 960px) { .kc-order-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.kc-order-meta { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 24px; }
.kc-order-meta div { display: flex; flex-direction: column; gap: 4px; }
.kc-order-meta dt,
.kc-order-meta .kc-order-meta-label {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-order-meta dd,
.kc-order-meta .kc-order-meta-value {
    margin: 0;
    font-family: var(--ks-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
}

.kc-order-items { width: 100%; border-collapse: collapse; }
.kc-order-items thead th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-order-items thead th:last-child, .kc-order-items td:last-child { text-align: right; padding-right: 0; }
.kc-order-items th:first-child, .kc-order-items td:first-child { padding-left: 0; }
.kc-order-items tbody td { padding: 15px 12px; border-bottom: 1px solid var(--ks-line); font-size: 15px; }
.kc-order-items tbody tr:last-child td { border-bottom: 0; }

.kc-storefront .kahunacart-status {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    margin-right: 5px;
}
.kc-storefront .kahunacart-status--paid,
.kc-storefront .kahunacart-status--completed { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-status--shipped { background: #F3DEC9; color: #8A4A12; }
.kc-storefront .kahunacart-status--refunded,
.kc-storefront .kahunacart-status--cancelled,
.kc-storefront .kahunacart-status--failed { background: #F8E2D8; color: #8E2A10; }

.kc-storefront .kahunacart-download-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kc-storefront .kahunacart-download {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
}
.kc-storefront .kahunacart-download > a { font-weight: 700; color: var(--ks-lagoon); text-decoration: none; }
.kc-storefront .kahunacart-download > a:hover { text-decoration: underline; }
.kc-storefront .kahunacart-download-meta,
.kc-storefront .kahunacart-release-version { font-family: var(--ks-mono); font-size: 12px; color: var(--ks-koa-soft); }

/* Merchant Markdown inside the storefront: licence install steps and offline
   payment instructions. The base sheet resets every list to nothing, which is
   right for navigation and wrong for ten numbered install steps, so the
   defaults are put back here the way .kc-product-desc puts them back on the
   product page. */
.kc-storefront .kahunacart-license-instructions,
.kc-storefront .kahunacart-offline-instructions { font-size: 15px; line-height: 1.55; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-instructions p,
.kc-storefront .kahunacart-offline-instructions p { margin: 0 0 12px; }
.kc-storefront .kahunacart-license-instructions ul,
.kc-storefront .kahunacart-license-instructions ol,
.kc-storefront .kahunacart-offline-instructions ul,
.kc-storefront .kahunacart-offline-instructions ol { list-style: revert; margin: 0 0 14px; padding-left: 22px; }
.kc-storefront .kahunacart-license-instructions li,
.kc-storefront .kahunacart-offline-instructions li { margin-bottom: 6px; }
.kc-storefront .kahunacart-license-instructions code,
.kc-storefront .kahunacart-offline-instructions code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 6px; padding: 2px 6px; }

/* The licence card in the grav.org licensing layout: the packages a key covers as
   pills under the key, the licence file and the ready-to-run package as real
   buttons, and every H3 of the merchant's instructions folded into a
   <details> so a customer opens the install route they want and never reads
   the other two. */
/* The card itself sits on the same light ground as a download row in the
   panel above it. The plugin's own sheet paints it on --kahunacart-surface,
   which this theme maps to Sand, and a whole card of Sand read as a dark block
   beside its neighbours. */
.kc-storefront .kahunacart-license { background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 16px; padding: 22px 24px; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.05); }
.kc-storefront .kahunacart-license + .kahunacart-license { margin-top: 16px; }
/* Inside a receipt panel the card is already on card white, so it drops to the
   page ground and loses the shadow: a card on a card reads as a mistake. */
.kc-storefront .kahunacart-order-panel .kahunacart-license { background: var(--ks-salt); box-shadow: none; }
/* The boxes inside the card (a download row, an install option) are card white
   on the receipt, where the card is on the page ground. On the account tab the
   card is the white thing, so those boxes take the page ground instead and keep
   their edges either way. */
.kc-storefront .kahunacart-account .kahunacart-license-download,
.kc-storefront .kahunacart-account .kahunacart-license-instructions details.kahunacart-license-option { background: var(--ks-salt); }
.kc-storefront .kahunacart-account .kahunacart-license-instructions details.kahunacart-license-option[open] { background: var(--ks-card); }
.kc-storefront .kahunacart-license-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.kc-storefront .kahunacart-license-product { font-size: 20px; font-weight: 800; margin: 0; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-variant { font-weight: 500; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license-keyline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.kc-storefront .kahunacart-license-keylabel,
.kc-storefront .kahunacart-license-rename-label,
.kc-storefront .kahunacart-license h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license h4 { margin: 0 0 10px; }
.kc-storefront .kahunacart-license-key { font-family: var(--ks-mono); font-size: 17px; font-weight: 600; background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 9px; padding: 6px 12px; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-copy { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--ks-line); background: transparent; color: var(--ks-koa); cursor: pointer; }
.kc-storefront .kahunacart-license-copy:hover { background: var(--ks-sand); }
.kc-storefront .kahunacart-license-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 4px; }
.kc-storefront .kahunacart-license-rename-input { flex: 0 1 320px; }
.kc-storefront .kahunacart-license-rename button { flex: none; }
.kc-storefront .kahunacart-license-rename-input { font-size: 14.5px; padding: 8px 12px; border: 1px solid var(--ks-line); border-radius: 9px; background: var(--ks-card); color: var(--ks-koa); }
.kc-storefront .kahunacart-license-rename button { font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--ks-line); background: transparent; color: var(--ks-koa); cursor: pointer; }
.kc-storefront .kahunacart-license-rename button:hover { background: var(--ks-sand); }
.kc-storefront .kahunacart-license-rename-help { flex-basis: 100%; font-size: 13px; color: var(--ks-koa-soft); margin: 0 0 12px; }
.kc-storefront .kahunacart-license-terms { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0 0 8px; padding: 14px 0 0; border-top: 1px solid var(--ks-line); font-size: 14.5px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license-renew { margin: 0 0 18px; font-size: 14.5px; }
.kc-storefront .kahunacart-license-renew-link { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-storefront .kahunacart-license-renew-link:hover { text-decoration: underline; }
.kc-storefront .kahunacart-license-downloads,
.kc-storefront .kahunacart-license-instructions,
.kc-storefront .kahunacart-license-activations { padding-top: 18px; border-top: 1px solid var(--ks-line); margin-top: 6px; }
@media (max-width: 560px) {
    .kc-storefront .kahunacart-license { padding: 18px; }
    .kc-storefront .kahunacart-license-rename { grid-template-columns: 1fr; }
}
/* The box for an add-on that landed on a key the customer already held: the
   same card as a licence, headed by the add-on's name, the covering key in the
   same code box a key line uses, then the add-on rule's own instructions. */
.kc-storefront .kahunacart-license--addon h4.kahunacart-license-product { font-size: 20px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ks-koa); margin: 0 0 12px; }
.kc-storefront .kahunacart-license-covered { margin: 0 0 6px; font-size: 15px; color: var(--ks-koa); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kc-storefront .kahunacart-license-covered code { font-family: var(--ks-mono); font-size: 15px; font-weight: 600; background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 8px; padding: 4px 10px; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-no-new-key { margin: 0 0 16px; font-size: 14.5px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-license--addon .kahunacart-license-instructions { margin-top: 0; padding-top: 16px; }
.kc-storefront .kahunacart-license-covers { margin: 10px 0 0; }
.kc-storefront .kahunacart-license-coverslabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ks-koa-soft); margin: 0 0 6px; }
.kc-storefront .kahunacart-license-packages { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 14px; padding: 0; }
.kc-storefront .kahunacart-license-package { font-family: var(--ks-mono); font-size: 12.5px; font-weight: 600; color: var(--ks-koa); background: var(--ks-sand); border: 1px solid var(--ks-line); border-radius: 999px; padding: 4px 11px; }
.kc-storefront .kahunacart-license-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.kc-storefront .kahunacart-license-file-button,
.kc-storefront .kahunacart-license-download-button {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ks-board); color: #FFF6EA; font-weight: 700; font-size: 14px;
    border-radius: 9px; padding: 9px 18px; text-decoration: none; border: 0; white-space: nowrap;
    transition: background .15s ease, transform .15s ease;
}
.kc-storefront .kahunacart-license-file-button:hover,
.kc-storefront .kahunacart-license-download-button:hover { background: var(--ks-board-deep); color: #FFF6EA; transform: translateY(-1px); text-decoration: none; }
.kc-storefront .kahunacart-license-downloads { margin: 0 0 20px; }
.kc-storefront .kahunacart-license-downloads h4 { margin: 0 0 8px; }
.kc-storefront .kahunacart-license-download { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 12px; }
.kc-storefront .kahunacart-license-download + .kahunacart-license-download { margin-top: 8px; }
.kc-storefront .kahunacart-license-download-name { font-weight: 600; color: var(--ks-koa); overflow-wrap: anywhere; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option { border: 1px solid var(--ks-line); border-radius: 12px; padding: 0 16px; margin: 0 0 10px; background: var(--ks-card); }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; display: flex; align-items: center; gap: 10px; color: var(--ks-koa); }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > summary::-webkit-details-marker { display: none; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ks-koa-soft); border-bottom: 2px solid var(--ks-koa-soft); transform: rotate(-45deg); transition: transform .15s ease; flex: none; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option[open] > summary::before { transform: rotate(45deg); }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > :not(summary) { margin-left: 17px; }
.kc-storefront .kahunacart-license-instructions details.kahunacart-license-option > :last-child:not(summary) { margin-bottom: 14px; }
.kc-storefront .kahunacart-license-instructions pre { background: #2B2118; color: #FFF1DD; border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; overflow-x: auto; font-family: var(--ks-mono); font-size: 13.5px; line-height: 1.6; }
.kc-storefront .kahunacart-license-instructions pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
@media (max-width: 560px) {
    .kc-storefront .kahunacart-license-download { flex-direction: column; align-items: flex-start; }
}

.kc-storefront .kahunacart-offline-instructions {
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-left: 3px solid var(--ks-board);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 24px;
    font-size: 15px;
}

.kc-order-links { display: flex; flex-wrap: wrap; gap: 20px; margin: 28px 0 0; font-size: 14.5px; }
.kc-order-links a { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-order-links a:hover { text-decoration: underline; }

.kc-storefront .kahunacart-account-offer {
    background: var(--ks-lagoon-mist);
    border: 1px solid #BBD5D2;
    border-radius: 16px;
    padding: 22px;
    margin: 24px 0 0;
}
.kc-storefront .kahunacart-account-offer-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-account-offer-text { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0 0 16px; }

/* A one-message page — payment in flight, or a download that cannot be
   honored — is centred rather than left in a wide empty column. */
.kc-storefront .kahunacart-processing,
.kc-storefront .kahunacart-denied { max-width: none; }

.kc-shop-notice {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 48px 32px;
}
.kc-shop-notice h1 { font-size: 28px; font-weight: 800; margin: 0 0 12px; }
.kc-shop-notice p { font-size: 16px; color: var(--ks-koa-soft); margin: 0 0 20px; }
.kc-shop-notice p:last-child { margin: 0; }
.kc-shop-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 22px;
    border: 3px solid var(--ks-line);
    border-top-color: var(--ks-lagoon);
    border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
    .kc-shop-spinner { animation: kc-shop-spin 900ms linear infinite; }
    @keyframes kc-shop-spin { to { transform: rotate(360deg); } }
}


/* --------------------------------------------------------------------------
   12. Account area
   -------------------------------------------------------------------------- */

.kc-storefront .kahunacart-account-nav { margin: 0 0 28px; border-bottom: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-account-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}
/* The plugin's base CSS underlines and pads the <li>; the underline here lives on
   the link/span, so the <li> is reset or the current tab shows two rules. */
.kc-storefront .kahunacart-account-nav-item { padding: 0; margin: 0; border: 0; }
.kc-storefront .kahunacart-account-nav-item a,
.kc-storefront .kahunacart-account-nav-item span {
    display: inline-block;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.kc-storefront .kahunacart-account-nav-item a:hover { color: var(--ks-lagoon); }
.kc-storefront .kahunacart-account-nav-item--current span { color: var(--ks-koa); border-bottom-color: var(--ks-board); }
.kc-storefront .kahunacart-account-nav-item--logout { margin-left: auto; }
.kc-storefront .kahunacart-account-nav-item--logout a { color: #A32E12; }

.kc-storefront .kahunacart-account-panel {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-account-panel > h2 {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-account-identity { font-size: 15px; color: var(--ks-koa-soft); margin: 0 0 20px; }

/* The customer groups they are in (Founders, Trade), as the catalog's own
   mono pills in lagoon — membership is who they are, not a sale or a warning.
   The name line gives up its gap when they follow it, so the two read as one. */
.kc-storefront .kahunacart-account-identity:has(+ .kahunacart-account-groups) { margin-bottom: 8px; }
.kc-storefront .kahunacart-account-groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.kc-storefront .kahunacart-account-group {
    font-family: var(--ks-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
    border: 1px solid #BBD5D2;
}
.kc-storefront .kahunacart-account-profile-who .kahunacart-account-groups { margin: 8px 0 0; }

/* Password and security. The form is the Login plugin's generic output inside
   an account panel; these rules name its classes (form-field, form-label,
   switch-toggle, twofa-*) rather than ones this theme controls. */
.kc-storefront .kahunacart-account-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}
.kc-storefront .kahunacart-account-profile-header .kahunacart-account-identity { margin: 0; line-height: 1.45; }
.kc-storefront .kahunacart-account-profile-header .kahunacart-account-identity strong {
    display: block;
    font-family: var(--ks-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
}
.kc-storefront .kahunacart-account-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--ks-salt), 0 0 0 4px var(--ks-line);
}

/* A form page, not a table page: the card is only as wide as a field wants to
   be, so an email address is not stretched across a 1100px input. */
/* The Account page in two columns: the profile form down the left, the panels
   the add-ons hang on it (payment methods, email preferences) stacked on the
   right. The heading, the nav and the avatar row span both. The form spans a
   generous run of rows so every panel placed after it lands beside it, and
   anything full-width that follows drops below. */
.kc-storefront .kahunacart-account-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
.kc-storefront .kahunacart-account-profile > :not(.kahunacart-account-panel):not(.kahunacart-customer-panel) { grid-column: 1 / -1; }
.kc-storefront .kahunacart-account-profile > .kahunacart-account-panel--credentials { grid-column: 1; grid-row: span 12; max-width: none; }
.kc-storefront .kahunacart-account-profile > .kahunacart-account-panel:not(.kahunacart-account-panel--credentials),
.kc-storefront .kahunacart-account-profile > .kahunacart-customer-panel { grid-column: 2; }
@media (max-width: 860px) {
    .kc-storefront .kahunacart-account-profile { grid-template-columns: minmax(0, 1fr); }
    .kc-storefront .kahunacart-account-profile > .kahunacart-account-panel--credentials { grid-row: auto; }
    .kc-storefront .kahunacart-account-profile > .kahunacart-account-panel,
    .kc-storefront .kahunacart-account-profile > .kahunacart-customer-panel { grid-column: 1; }
}
.kc-storefront .kahunacart-account-panel--credentials .form-field { margin: 0 0 18px; }
.kc-storefront .kahunacart-account-panel--credentials .form-label label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
}
.kc-storefront .kahunacart-account-panel--credentials .form-label .required { color: var(--ks-board); margin-left: 2px; }
.kc-storefront .kahunacart-account-panel--credentials .form-description {
    display: block;
    font-size: 13px;
    color: var(--ks-koa-soft);
    margin: 6px 0 0;
}
.kc-storefront .kahunacart-account-panel--credentials input[disabled] {
    background: var(--ks-sand-soft);
    color: var(--ks-koa-soft);
    cursor: not-allowed;
}
.kc-storefront .kahunacart-account-panel--credentials .form-errors { margin: 6px 0 0; font-size: 13px; }

/* The two-factor block is a Form plugin "section": an h3 over a .form-section. */
.kc-storefront .kahunacart-account-panel--credentials h3 {
    font-family: var(--ks-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    margin: 26px 0 16px;
    padding-top: 22px;
    border-top: 1px solid var(--ks-line);
}

/* The yes/no toggle: a segmented pill in the brand colours in place of the
   Form plugin's grey boxes. */
.kc-storefront .switch-toggle {
    display: inline-flex;
    padding: 3px;
    line-height: 1;
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    overflow: hidden;
}
.kc-storefront .switch-toggle label {
    padding: 8px 18px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    border-radius: 999px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.kc-storefront .switch-toggle label:hover { color: var(--ks-koa); }
.kc-storefront .switch-toggle input:checked + label { background: var(--ks-sand-deep); color: var(--ks-koa); }
.kc-storefront .switch-toggle input.highlight:checked + label { background: var(--ks-lagoon); color: #FFFFFF; }

/* The secret: QR code beside its text form and the regenerate button. */
.kc-storefront .twofa-secret .form-input-wrapper.twofa-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    align-items: center;
    padding: 16px;
    background: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
}
.kc-storefront .twofa-secret img[data-2fa-image] {
    grid-row: span 2;
    width: 128px;
    height: 128px;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid var(--ks-line) !important;
    border-radius: 10px;
}
.kc-storefront .twofa-secret .form-input-wrapper.twofa-wrapper > div { font-size: 13.5px; color: var(--ks-koa-soft); align-self: end; }
.kc-storefront .twofa-secret .twofa-wrapper.danger { align-self: start; }
.kc-storefront .twofa-secret-code {
    display: block;
    margin-top: 4px;
    font-family: var(--ks-mono);
    font-size: 14.5px;
    letter-spacing: 0.06em;
    color: var(--ks-koa);
}
.kc-storefront .twofa-secret .button.button-small {
    background: transparent;
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 9px;
}
.kc-storefront .twofa-secret .button.button-small:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-storefront .twofa-secret .fa { display: none; }

.kc-storefront .kahunacart-account-panel--credentials .buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ks-line);
}
.kc-storefront .kahunacart-account-empty { color: var(--ks-koa-soft); font-size: 14.5px; margin: 0; }

.kc-storefront .kahunacart-account-orders,
.kc-storefront .kahunacart-account-downloads { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kc-storefront .kahunacart-account-orders th,
.kc-storefront .kahunacart-account-downloads th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-storefront .kahunacart-account-orders td,
.kc-storefront .kahunacart-account-downloads td { padding: 14px 12px; border-bottom: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-account-orders tr:last-child td { border-bottom: 0; }
.kc-storefront .kahunacart-account-orders th:first-child,
.kc-storefront .kahunacart-account-orders td:first-child { padding-left: 0; }
.kc-storefront .kahunacart-account-orders a { color: var(--ks-lagoon); font-weight: 700; text-decoration: none; }

.kc-storefront .kahunacart-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .kc-storefront .kahunacart-address-grid { grid-template-columns: minmax(0, 1fr); } }
.kc-storefront .kahunacart-address-card {
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    padding: 18px;
}
/* The add-address tile: dashed, quiet, a big terracotta plus; opened, it becomes
   an ordinary card the width of the row. */
.kc-storefront .kahunacart-address-card--add { background: transparent; border: 1px dashed var(--ks-line-strong, #D6C3A4); padding: 0; }
.kc-storefront .kahunacart-address-card--add:hover { background: var(--ks-card); border-color: var(--ks-board); }
.kc-storefront .kahunacart-address-add-summary { color: var(--ks-koa-soft); font-weight: 600; font-size: 14.5px; }
.kc-storefront .kahunacart-address-add-plus { color: var(--ks-board); font-weight: 300; }
.kc-storefront .kahunacart-address-card--add:has(.kahunacart-address-add[open]) { background: var(--ks-card); border: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-address-add[open] > .kahunacart-address-add-summary { color: var(--ks-koa); font-size: 18px; font-weight: 800; }
.kc-storefront .kahunacart-address-card h3 {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-address { font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--ks-koa); }

/* Stock alerts: what the customer is waiting to hear about. One card like the
   other account panels, the alerts as rows under hairlines the way the orders
   table reads, the product in lagoon, and Remove a quiet link that only turns
   Board on hover, because it is not the thing this page is for. */
.kc-storefront .kahunacart-stock-alerts {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 22px;
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-stock-alerts-intro { margin: 0 0 14px; font-size: 14.5px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-stock-alert-list { display: block; margin: 0; padding: 0; list-style: none; }
.kc-storefront .kahunacart-stock-alert-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--ks-line);
    border-radius: 0;
    background: none;
}
.kc-storefront .kahunacart-stock-alert-name { flex: 1 1 14rem; font-size: 15px; }
.kc-storefront .kahunacart-stock-alert-name a { color: var(--ks-lagoon); font-weight: 700; text-decoration: none; }
.kc-storefront .kahunacart-stock-alert-name a:hover { color: var(--ks-lagoon-deep); text-decoration: underline; }
.kc-storefront .kahunacart-stock-alert-item .kahunacart-stock-alert-variant { margin-left: 6px; font-size: 13.5px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-stock-alert-item .kahunacart-stock-alert-status {
    font-family: var(--ks-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ks-sand);
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
}
.kc-storefront .kahunacart-stock-alert-remove { margin: 0; }
.kc-storefront .kahunacart-stock-alert-remove .kahunacart-link-button { font-size: 14px; color: var(--ks-koa-soft); }
.kc-storefront .kahunacart-stock-alert-remove .kahunacart-link-button:hover { color: var(--ks-board); }
.kc-storefront .kahunacart-stock-alerts .kahunacart-account-empty { padding-top: 14px; border-top: 1px solid var(--ks-line); }


/* --------------------------------------------------------------------------
   13. Sign-in and the other Login plugin screens
   --------------------------------------------------------------------------
   The markup is the Login plugin's generic form output, so these rules name
   its classes rather than ones this theme controls.
   -------------------------------------------------------------------------- */

.kc-auth { max-width: 460px; margin: 0 auto; }
.kc-auth-note { margin: 22px 2px 0; }
.kc-auth-note h2 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ks-koa);
}
.kc-auth-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ks-koa-soft);
}
.kc-auth-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 32px 30px;
}
/* The Login plugin ships css/login.css, which gives #grav-login a 4px grey
   border, an off-white fill, 5rem of vertical margin and centred text — a
   whole card of its own, inside this one. Neutralised rather than switched off
   with `built_in_css: false`, because that flag also undresses the screens
   this theme does not style (two-factor, register, the profile form).

   The <h1> is the plugin's own page body, "# User Login" in
   plugin://login/pages/login.md. The masthead above already names the page, so
   it is dropped rather than shown twice — and dropping it also leaves the page
   with a single h1, which is what a screen reader's heading list wants. */
.kc-auth-card #grav-login {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
}
.kc-auth-card #grav-login > h1 { display: none; }
.kc-auth-card #grav-login .form-actions { text-align: left; }
.kc-auth-card #grav-login p { font-size: 14px; text-align: left; margin: 12px 0; }
.kc-auth-card .form-data,
.kc-auth-card .form-field { margin: 0 0 16px; }
.kc-auth-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
    text-align: left;
}
.kc-auth-card .form-input-wrapper { display: block; }
.kc-auth-card input[type="text"],
.kc-auth-card input[type="email"],
.kc-auth-card input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 11px 13px;
}
.kc-auth-card input:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.15);
}
/* The plugin puts "remember me", "forgot" and the submit button in one
   .form-actions row. Given a full basis it wraps onto a line of its own above
   the two buttons, which is where a tick box belongs. */
.kc-auth-card .rememberme { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 100%; }
.kc-auth-card .rememberme .form-input-wrapper { display: flex; align-items: center; gap: 8px; }
.kc-auth-card .rememberme input { flex: none; }
.kc-auth-card .rememberme label { margin: 0; font-weight: 500; color: var(--ks-koa); }

.kc-auth-card .form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.kc-auth-card .button {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 22px;
    border-radius: 11px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease;
}
.kc-auth-card .button:hover { background: var(--ks-board-deep); color: #FFF6EA; }
.kc-auth-card .button.secondary {
    background: transparent;
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
    order: 2;
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 16px;
}
.kc-auth-card .button.secondary:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-auth-card .button[value="login.login"] { order: 1; }
.kc-auth-card .fa { display: none; }
.kc-auth-card h4 { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.kc-auth-card hr { border: 0; border-top: 1px solid var(--ks-line); margin: 18px 0; }


/* --------------------------------------------------------------------------
   14. Error page
   --------------------------------------------------------------------------
   Shared by the storefront shell and the marketing one — see
   templates/error.html.twig, which picks the shell from the route.
   -------------------------------------------------------------------------- */

.kc-error { text-align: center; padding: 40px 0 24px; max-width: 640px; margin: 0 auto; }
.kc-error-code {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: clamp(96px, 18vw, 180px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0;
    /* Kept inside the warm family: Board to Board-deep. Running it across to
       Lagoon looks good written down and renders a grey-olive mud through the
       middle, because orange to teal passes straight through neutral. */
    background: linear-gradient(105deg, var(--ks-board), var(--ks-board-deep) 55%, #7A3208);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.kc-error-title {
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 800;
    margin: 14px 0 12px;
    color: var(--ks-koa);
}
.kc-error-message {
    font-size: 17px;
    color: var(--ks-koa-soft);
    margin: 0 auto 8px;
    max-width: 48ch;
}

/* --------------------------------------------------------------------------
   15. Affiliate tab (KahunaCart Affiliates)
   --------------------------------------------------------------------------
   The add-on's account tab at /shop/account/affiliate. Its own sheet paints
   cards and figures on --kahunacart-surface, which this theme maps to Sand,
   and a page of Sand blocks reads darker than every other account tab. These
   rules put its cards on card white with the account panel's border, radius
   and heading, its labels in the licence card's small caps, and its sub-tabs
   in the account navigation's type. Markup and class names are the add-on's
   (templates/partials/kahunacart-affiliates/), so nothing here needs a copy
   of its templates.
   -------------------------------------------------------------------------- */

.kc-storefront .kahunacart-affiliates { gap: 16px; margin: 0 0 8px; }

/* Every box on the tab is an account panel. */
.kc-storefront .kahunacart-affiliates-card,
.kc-storefront .kahunacart-affiliates-notice,
.kc-storefront .kahunacart-affiliates-intro,
.kc-storefront .kahunacart-affiliates--apply > .kahunacart-affiliates-form,
.kc-storefront .kahunacart-affiliates-stat {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
}
.kc-storefront .kahunacart-affiliates-card > h2,
.kc-storefront .kahunacart-affiliates-notice > h2,
.kc-storefront .kahunacart-affiliates-intro > h2 {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    margin: 0 0 12px;
}
.kc-storefront .kahunacart-affiliates p { font-size: 15px; line-height: 1.55; }
.kc-storefront .kahunacart-affiliates-muted,
.kc-storefront .kahunacart-affiliates p.kahunacart-affiliates-muted { font-size: 14px; color: var(--ks-koa-soft); }

/* The tab's own pages: pills in the account navigation's type, the current
   one filled in Koa like the account nav's current tab is underlined. */
.kc-storefront .kahunacart-affiliates-nav ul { gap: 6px; }
.kc-storefront .kahunacart-affiliates-nav a {
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    border-color: var(--ks-line);
    background: var(--ks-card);
}
.kc-storefront .kahunacart-affiliates-nav a:hover { color: var(--ks-lagoon); border-color: #D6C3A4; }
.kc-storefront .kahunacart-affiliates-nav a[aria-current="page"] { color: var(--ks-salt); background: var(--ks-koa); border-color: var(--ks-koa); }

/* The four figures on the overview. */
.kc-storefront .kahunacart-affiliates-stats { gap: 12px; }
.kc-storefront .kahunacart-affiliates-stat { padding: 18px 20px; }
.kc-storefront .kahunacart-affiliates-stat dt,
.kc-storefront .kahunacart-affiliates-label,
.kc-storefront .kahunacart-affiliates-money-currency {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-storefront .kahunacart-affiliates-stat dd {
    font-family: var(--ks-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    margin: 6px 0 0;
}
.kc-storefront .kahunacart-affiliates-stat dd.kahunacart-affiliates-stat-note {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ks-koa-soft);
}
.kc-storefront .kahunacart-affiliates-stat--balance { border-color: #BBD5D2; background: var(--ks-lagoon-mist); }

/* A link or a code to copy: the licence key's code box. */
.kc-storefront .kahunacart-affiliates-code {
    font-family: var(--ks-mono);
    font-weight: 600;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-radius: 9px;
    padding: 4px 10px;
    color: var(--ks-koa);
}

/* Lines about the partner's standing: the receipt's offline note. */
.kc-storefront .kahunacart-affiliates-status {
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-left: 3px solid var(--ks-board);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
}

/* The program's terms, above the application form: label and value rows. */
.kc-storefront .kahunacart-affiliates .kahunacart-affiliates-terms { gap: 0; margin: 16px 0 0; }
.kc-storefront .kahunacart-affiliates .kahunacart-affiliates-terms > li {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    padding: 11px 0;
    border-top: 1px solid var(--ks-line);
    font-size: 15px;
}
.kc-storefront .kahunacart-affiliates .kahunacart-affiliates-terms > li > strong {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
}

/* Forms: the panel spans the column like every account panel, the fields
   keep the add-on's reading width inside it. */
.kc-storefront .kahunacart-affiliates--apply > .kahunacart-affiliates-form { max-inline-size: none; }
.kc-storefront .kahunacart-affiliates-form > * { max-inline-size: 40rem; }
.kc-storefront .kahunacart-affiliates-field > span,
.kc-storefront .kahunacart-affiliates-field > legend { font-size: 14.5px; font-weight: 600; color: var(--ks-koa); }
.kc-storefront .kahunacart-affiliates fieldset.kahunacart-affiliates-field > legend { padding: 0; margin: 0 0 8px; }
.kc-storefront .kahunacart-affiliates-field small { font-size: 13px; color: var(--ks-koa-soft); }

/* "I've read and accept the program terms." Since Affiliates 1.0.1 the add-on
   keeps the sentence in one span, so its flex row no longer splits the link
   from its full stop. A block still reads best here: the box sits in the first
   line of text and the sentence wraps under it like prose. */
.kc-storefront .kahunacart-affiliates-terms-accept { display: block; font-size: 15px; }
.kc-storefront .kahunacart-affiliates-terms-accept input { margin: 0 8px 0 0; vertical-align: -2px; }

/* Who is applying, above the signed-in form, and the hidden field for scripts. */
.kc-storefront .kahunacart-affiliates-applicant { font-size: 15px; color: var(--ks-koa); margin: 0 0 4px; }
.kc-storefront .kahunacart-affiliates-applicant .kahunacart-affiliates-muted { font-size: 14px; }

/* The public application form at /shop/affiliate/apply, and the pages that
   follow it (check your email, confirm, done). The same panels as the
   Affiliate tab, under a page heading in the account page's type, so applying
   with or without an account looks like one form. */
.kc-storefront .kahunacart-affiliates-public { max-inline-size: none; margin: 0 0 8px; gap: 16px; }
.kc-storefront .kahunacart-affiliates-public > .kahunacart-affiliates-form {
    max-inline-size: none;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
}
.kc-storefront .kahunacart-affiliates-public .kahunacart-affiliates-intro > h1,
.kc-storefront .kahunacart-affiliates-public .kahunacart-affiliates-notice > h1 {
    font-family: var(--ks-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--ks-koa);
    margin: 0 0 12px;
}
.kc-storefront .kahunacart-affiliates-signin-line { font-size: 15px; margin-top: 4px; }
.kc-storefront .kahunacart-affiliates-public .kahunacart-affiliates-actions { margin-top: 8px; }

@media (max-width: 560px) {
    .kc-storefront .kahunacart-affiliates-public > .kahunacart-affiliates-form { padding: 18px; }
    .kc-storefront .kahunacart-affiliates-public .kahunacart-affiliates-intro > h1,
    .kc-storefront .kahunacart-affiliates-public .kahunacart-affiliates-notice > h1 { font-size: 22px; }
    .kc-storefront .kahunacart-affiliates-card,
    .kc-storefront .kahunacart-affiliates-notice,
    .kc-storefront .kahunacart-affiliates-intro,
    .kc-storefront .kahunacart-affiliates--apply > .kahunacart-affiliates-form { padding: 18px; }
    .kc-storefront .kahunacart-affiliates .kahunacart-affiliates-terms > li { grid-template-columns: 1fr; gap: 2px; }
    .kc-storefront .kahunacart-affiliates-stat { padding: 14px 16px; }
    .kc-storefront .kahunacart-affiliates-stat dd { font-size: 22px; }
}

/* A page locked to a customer group: the sign-in form's note about it and the
   access-denied page (login.html.twig, unauthorized.html.twig). */
.kc-auth-note--locked { padding: 16px 18px; background: var(--ks-card); border: 1px solid var(--ks-line); border-radius: 14px; margin-left: 0; margin-right: 0; }
.kc-auth-note--locked p + p { margin-top: 8px; }
.kc-auth-note--locked a { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-auth-note--locked a:hover { text-decoration: underline; }
.kc-locked .kc-kicker { margin: 0 0 6px; }
.kc-locked .kc-ctas { margin-top: 22px; }

/* ── printing ───────────────────────────────────────────────────────────────
   The shop on paper: the page title without its sand band or breadcrumb, one
   column (the order summary, the cart summary and the checkout summary sit
   under the lines instead of beside them), panels as thin outlines, and the
   parts that are only ever pressed left off. This theme draws its own receipt,
   cart, checkout and catalog, so it names their action rows itself; the
   buttons and forms inside them KahunaCart's stylesheet already leaves off. */
@media print {
    .kc-shop-hero {
        background: none;
        border: 0;
        padding: 0 0 16px;
    }
    .kc-shop-hero .kahunacart-breadcrumbs,
    .kc-storefront .kahunacart-breadcrumbs,
    .kc-shop-hero-search,
    .kc-shop-aside,
    .kahunacart-account-offer,
    .kahunacart-account-offer-signin,
    .kc-order-links,
    .kc-shop-back,
    .kc-cart-actions,
    .kc-payment-open-actions,
    .kc-bundle-actions,
    .kc-step-missing,
    .kc-shop-plan-actions,
    .kc-shop-cta-actions,
    .kc-renew-link,
    .kahunacart-checkout-link,
    .kc-cart-aside .kc-btn-block,
    .kc-shop-panel:has(> .kahunacart-no-print:only-of-type),
    .kc-shop-panel:has(.kahunacart-discount):not(:has(.kahunacart-coupon-applied)) {
        display: none !important;
    }
    /* The quantity in the cart is the number, not a box around it. */
    .kc-qty-input {
        border: 0 !important;
        padding: 0 !important;
        width: auto !important;
        background: none !important;
        appearance: textfield;
        -moz-appearance: textfield;
    }
    .kc-product-title {
        margin-top: 10px;
    }
    .kc-order-layout,
    .kc-cart-layout,
    .kc-checkout-layout,
    .kc-shop-layout,
    .kc-product-layout {
        display: block !important;
    }
    .kc-order-aside,
    .kc-cart-aside,
    .kc-checkout-aside {
        position: static;
        margin-top: 20px;
    }
    .kc-shop-panel {
        background: none !important;
        border-color: #bbb;
        box-shadow: none;
    }
    /* A product's picture shares the first sheet with its name and price. */
    .kc-product-media {
        position: static;
        max-width: 3in;
    }
}

/* --------------------------------------------------------------------------
   The plugin's markup on pages that extend its own (KahunaCart 1.6.0)

   The shop pages extend the plugin's templates rather than copying them, so
   the parts this site leaves alone arrive in the plugin's markup, and some of
   them are parts the copies had lost: pictures and notes on cart lines, the
   quantity limits, sets, the quantity ladders, Save for later, reviews and
   the order history. These rules give them the site's look.
   -------------------------------------------------------------------------- */

/* A line's picture beside its name: small and square, because the name is
   what is read and the picture only confirms it is the right thing. */
.kc-cart-product { display: flex; align-items: center; gap: 14px; }
.kc-cart-product-text { min-width: 0; }
.kc-cart-thumb {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--ks-sand);
}
.kc-cart-item-title a { color: inherit; text-decoration: none; }
.kc-cart-item-title a:hover { color: var(--ks-lagoon); text-decoration: underline; }

/* A plugin's note about the line, a free trial most often: a qualification of
   the price beside it, so quiet and small beneath the name. */
.kc-cart-item-note,
.kc-summary-item-note { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ks-koa-soft); }
.kc-summary-item-note { flex-basis: 100%; }
.kc-cart-item-note a,
.kc-summary-item-note a { color: inherit; }

/* A quantity an add-on decided is a number, not a box; a product's limit
   ("Limit 3 per order") sits under the box. */
.kc-qty-fixed { display: inline-block; padding: 8px 0; font-variant-numeric: tabular-nums; }
.kc-cart-table .kahunacart-qty-hint {
    display: block;
    margin-top: 4px;
    font-family: var(--ks-body);
    font-size: 12px;
    color: var(--ks-koa-soft);
    white-space: nowrap;
}

/* A set a grouped product's button added: its own row counts, its parts sit
   under it indented with their prices greyed, and no rule between them. */
.kc-cart-set:has(+ .kc-cart-part) td,
.kc-cart-part:has(+ .kc-cart-part) td { border-bottom-color: transparent; }
.kc-cart-part td:first-child { padding-left: 24px; }
.kc-cart-part .kc-cart-thumb { width: 44px; height: 44px; }
.kc-cart-part .kc-cart-item-title { font-weight: 500; }
.kc-cart-table .kc-cart-part td:nth-child(2),
.kc-cart-table .kc-cart-part .kc-cart-line-total { color: var(--ks-koa-soft); font-weight: 400; }

/* Under the lines: the express buttons and "Goes well with your order". */
.kc-cart-main > .kahunacart-zone,
.kc-cart-main > .kahunacart-cart-cross-sells { margin-top: 24px; }

/* Where a quantity ladder stands, above the totals it changes. */
.kc-tier-next { margin: 0 0 12px; font-size: 14px; color: var(--ks-koa-soft); }

/* Save for later, under the buy box: a quiet line with a heart rather than a
   second button beside Add to cart. */
.kc-product-info .kahunacart-wishlist-add { margin: 14px 0 0; }
.kc-product-info .kahunacart-wishlist-add .kahunacart-link-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ks-koa-soft);
    font-size: 14px;
    text-decoration: none;
}
.kc-product-info .kahunacart-wishlist-add .kahunacart-link-button::before { content: "\2661"; font-size: 1.15em; line-height: 1; }
.kc-product-info .kahunacart-wishlist-add .kahunacart-link-button:hover { color: var(--ks-lagoon); text-decoration: underline; }

/* Reviews and "You might also like", full width under the two columns. */
.kc-shop--product .kahunacart-reviews,
.kc-shop--product .kahunacart-related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--ks-line); }
.kc-shop--product .kahunacart-reviews > h2,
.kc-shop--product .kahunacart-related > h2 {
    margin: 0 0 14px;
    font-family: var(--ks-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--ks-koa);
}
.kc-shop--product .kahunacart-reviews-empty,
.kc-shop--product .kahunacart-review-signin { margin: 0 0 6px; font-size: 15px; color: var(--ks-koa-soft); }

/* The order's history, in a panel like the rest of the receipt. Styled on the
   plugin's section rather than wrapped, so an order with no history draws no
   empty panel. */
.kc-order-main > .kahunacart-order-history {
    margin-top: 16px;
    padding: 22px;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
}
.kc-order-main > .kahunacart-order-history > h2 {
    margin: 0 0 12px;
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
}
.kc-order-main .kahunacart-order-history-list { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.kc-order-main .kahunacart-order-history-entry { display: flex; gap: 16px; padding: 4px 0; color: var(--ks-koa); }
.kc-order-main .kahunacart-order-history-when { flex: none; font-family: var(--ks-mono); font-size: 13px; color: var(--ks-koa-soft); font-variant-numeric: tabular-nums; }

/* A phone has no room for five columns: the pictures go, and so does the
   unit price, which the line total beside the quantity already says. */
@media (max-width: 560px) {
    .kc-cart-thumb { display: none; }
    .kc-cart-table th:nth-child(2),
    .kc-cart-table td:nth-child(2) { display: none; }
}

@media (max-width: 560px) {
    /* The quantity box keeps room for its number. */
    .kc-cart-table .kc-qty-input { width: 56px; min-width: 56px; }
}
/* ==========================================================================
   Help center (Helpdesk Pro's client portal at /support)
   --------------------------------------------------------------------------
   The portal draws every color, radius and space from its --helpdesk-*
   custom properties (plugin docs: help-center.md#styling), so most of the
   work here is pointing those at the brand palette. The rules after the
   tokens are the few places where the site does something the tokens cannot
   say: the Board orange action button, the display face on headings, the
   docs' code blocks inside articles.

   Registered at priority 5 in kahuna-site.php so it emits after the plugin's
   portal.css (default priority 10) and wins on equal specificity. Everything
   is scoped under .helpdesk or .kc-helpdesk. Light-only, like the rest of the
   site: the portal has no dark rules of its own, so there is nothing to undo.
   ========================================================================== */

:root {
    --helpdesk-accent: var(--ks-lagoon);
    --helpdesk-accent-contrast: #FFF6EA;
    --helpdesk-text: var(--ks-koa);
    --helpdesk-muted: var(--ks-koa-soft);
    --helpdesk-border: var(--ks-line);
    --helpdesk-surface: var(--ks-card);
    --helpdesk-subtle: var(--ks-sand-soft);
    --helpdesk-team: color-mix(in srgb, var(--ks-lagoon-mist) 55%, var(--ks-card));
    --helpdesk-radius: 10px;
    --helpdesk-width: 1072px;
    --helpdesk-success: #1E6B3A;
    --helpdesk-warning: var(--ks-amber);
    --helpdesk-danger: #A83A2A;
}

/* The page container: the site's gutter and the air under the sticky header
   that every interior page has. The portal centres itself at its own width. */
.kc-body main > .kc-helpdesk,
.kc-body main > #helpdesk-root.helpdesk {
    padding: 28px 24px 24px;
}
.kc-body main > .kc-helpdesk > #helpdesk-root.helpdesk { padding: 0; }
/* An article page has no .kc-helpdesk wrapper (the plugin's kb-article
   template is used as is), so the root carries the gutter itself and is
   widened by it to line up with the help center's own pages. */
.kc-body main > #helpdesk-root.helpdesk { max-width: calc(var(--helpdesk-width) + 48px); }

.kc-body .helpdesk {
    --hd-border-strong: color-mix(in srgb, var(--ks-koa) 22%, transparent);
    --hd-field: var(--ks-card);
    --hd-faint: #8F7A60;
    --hd-shadow: none;
    --hd-shadow-hover: 0 12px 28px -14px rgba(43, 28, 12, 0.28);
    --hd-focus: 0 0 0 3px rgba(26, 111, 131, 0.16);
    font-family: var(--ks-body);
}

/* Headings in the brand display face, weighted like the rest of the site. */
.kc-body .helpdesk :is(h1, h2, h3, h4) {
    font-family: var(--ks-display);
    letter-spacing: -0.02em;
    word-spacing: normal;
}
.kc-body .helpdesk .helpdesk-hero__title,
.kc-body .helpdesk .helpdesk-title { font-weight: 800; letter-spacing: -0.025em; }
.kc-body .helpdesk .helpdesk-section__title,
.kc-body .helpdesk .helpdesk-band__title { font-weight: 800; }
.kc-body .helpdesk .helpdesk-topic__name { font-weight: 700; }

/* ── The portal's nav row, read as a sub-nav under the site header ───── */
.kc-body .helpdesk .helpdesk-nav { border-bottom: 1px solid var(--ks-line); font-size: 14.5px; }
.kc-body .helpdesk .helpdesk-nav__link { color: var(--ks-koa-soft); font-weight: 600; }
.kc-body .helpdesk .helpdesk-nav__link:hover { color: var(--ks-lagoon); }
.kc-body .helpdesk .helpdesk-nav__link[aria-current] { color: var(--ks-koa); }
.kc-body .helpdesk .helpdesk-nav__link[aria-current="page"],
.kc-body .helpdesk .helpdesk-nav__link[aria-current="true"] { border-bottom-color: var(--ks-board); }
.kc-body .helpdesk .helpdesk-nav__count { background: var(--ks-board); }

/* ── Buttons: primary is the site's .kc-btn (Board orange, cream text) ─ */
.kc-body .helpdesk .helpdesk-button {
    border: 1.5px solid var(--ks-koa);
    border-radius: 11px;
    background: transparent;
    color: var(--ks-koa);
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.kc-body .helpdesk .helpdesk-button:hover { background: var(--ks-sand); border-color: var(--ks-koa); color: var(--ks-koa); }
.kc-body .helpdesk .helpdesk-button--primary {
    border-color: var(--ks-board);
    background: var(--ks-board);
    color: #FFF6EA;
}
.kc-body .helpdesk .helpdesk-button--primary:hover {
    border-color: var(--ks-board-deep);
    background: var(--ks-board-deep);
    color: #FFF6EA;
    transform: translateY(-1px);
}
.kc-body .helpdesk .helpdesk-button--sm { font-size: 14px; border-radius: 9px; }
.kc-body .helpdesk .helpdesk-button--lg { font-size: 16px; padding: 0.7rem 1.6rem; }
.kc-body .helpdesk .helpdesk-link-button:hover { color: var(--ks-lagoon); }

/* ── Fields, like the contact form's ──────────────────────────────────── */
.kc-body .helpdesk :is(.helpdesk-input, .helpdesk-textarea, select) {
    border: 1.5px solid var(--ks-line);
    border-radius: 11px;
    background-color: var(--ks-card);
    font-family: var(--ks-body);
}
.kc-body .helpdesk :is(.helpdesk-input, .helpdesk-textarea)::placeholder { color: #A08A6E; }
.kc-body .helpdesk :is(.helpdesk-input, .helpdesk-textarea, select):focus { border-color: var(--ks-lagoon); }
.kc-body .helpdesk select.helpdesk-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ks-koa) 50%), linear-gradient(135deg, var(--ks-koa) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}
.kc-body .helpdesk .helpdesk-search__field { border: 1.5px solid var(--ks-line); background: var(--ks-card); }
.kc-body .helpdesk .helpdesk-search__field:focus-within { border-color: var(--ks-lagoon); }

/* ── Help center home ─────────────────────────────────────────────────── */
.kc-body .helpdesk .helpdesk-hero {
    border: 1.5px solid var(--ks-line);
    border-radius: 22px;
    background:
        radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--ks-lagoon-mist) 70%, transparent), transparent 70%),
        var(--ks-sand-soft);
}
.kc-body .helpdesk .helpdesk-hero__title { font-size: clamp(34px, 5vw, 52px); line-height: 1.04; }
.kc-body .helpdesk .helpdesk-hero__intro { font-size: 17px; }
.kc-body .helpdesk .helpdesk-search--lg .helpdesk-search__field { box-shadow: 0 14px 30px -18px rgba(43, 28, 12, 0.35); }

/* Cards as the site draws them: a 1.5px sand line, a lift and a Lagoon
   edge on hover. */
.kc-body .helpdesk :is(.helpdesk-topic, .helpdesk-card, .helpdesk-band, .helpdesk-article-row) {
    border-width: 1.5px;
    border-color: var(--ks-line);
    border-radius: 14px;
}
.kc-body .helpdesk a.helpdesk-topic:hover,
.kc-body .helpdesk .helpdesk-article-row:hover { border-color: var(--ks-lagoon); transform: translateY(-2px); }

/* Article link lists (popular, related, more in this topic): hairline rows. */
.kc-body .helpdesk .helpdesk-links > li { border-bottom-color: var(--ks-line); }
.kc-body .helpdesk .helpdesk-links__link { font-weight: 600; }
.kc-body .helpdesk .helpdesk-links__link:hover { background: var(--ks-sand-soft); color: var(--ks-lagoon); }
.kc-body .helpdesk .helpdesk-links__icon { color: #A08A6E; }
.kc-body .helpdesk .helpdesk-topic__mark { border-radius: 12px; background: var(--ks-sand); color: var(--ks-lagoon); }
/* Topic cards on the home page stack the icon over the text, so four fit a
   row without folding "Licences and billing" onto two lines. */
.kc-body .helpdesk a.helpdesk-topic { flex-direction: column; gap: 14px; padding: 22px; }
.kc-body .helpdesk .helpdesk-band { background: var(--ks-sand); border-color: var(--ks-sand-deep); }

/* Status pills and banners on the site's greens, ambers and reds. */
.kc-body .helpdesk .helpdesk-status { color: var(--ks-koa); }

/* ── Breadcrumbs, like the docs' and the storefront's ─────────────────── */
.kc-body .helpdesk .helpdesk-crumbs a,
.kc-body .helpdesk .helpdesk-backlink a { color: var(--ks-koa-soft); font-weight: 600; }
.kc-body .helpdesk .helpdesk-crumbs a:hover,
.kc-body .helpdesk .helpdesk-backlink a:hover { color: var(--ks-lagoon); text-decoration: none; }

/* ── Article text: the docs' prose, and the docs' code blocks ──────────
   Measured against a docs page (Helios prose + kahuna.css): 16px on 1.75,
   inline code 14px semibold Lagoon on Sand, code blocks 14px on 1.7. */
.kc-body .helpdesk .helpdesk-prose { font-size: 16px; line-height: 1.75; color: var(--ks-koa); }
.kc-body .helpdesk .helpdesk-prose h2 { font-size: 26px; font-weight: 800; }
.kc-body .helpdesk .helpdesk-prose h3 { font-size: 20px; font-weight: 700; }
.kc-body .helpdesk .helpdesk-prose a { color: var(--ks-lagoon); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.kc-body .helpdesk .helpdesk-prose a:hover { text-decoration-color: currentColor; }
.kc-body .helpdesk .helpdesk-prose :not(pre) > code {
    font-family: var(--ks-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-lagoon-deep);
    background: var(--ks-sand);
    border-radius: 4px;
    padding: 2px 6px;
}
.kc-body .helpdesk .helpdesk-prose strong { font-weight: 700; }

/* codesh draws its own frame; the portal's plain <pre> rule (border, tint,
   inherited size) must not land on top of it. kahuna.css colours
   .codesh-block for the whole site; these are the metrics the docs' prose
   gives the code inside it. */
.kc-body .helpdesk .helpdesk-prose > :is(.codesh-block, .codesh-group) { margin-block: 24px; }
.kc-body .helpdesk .helpdesk-prose :is(.codesh-block, .codesh-group) pre {
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 6px;
    font-family: var(--ks-mono);
    font-size: 14px;
    line-height: 1.7;
}
.kc-body .helpdesk .helpdesk-prose :is(.codesh-block, .codesh-group) pre code { font-family: inherit; font-size: inherit; font-weight: 400; color: inherit; background: none; padding: 0; }

/* A plain fenced block codesh did not claim: the site's dark code panel. */
.kc-body .helpdesk .helpdesk-prose > pre {
    background: var(--ks-koa);
    color: #E8DECF;
    border: 0;
    border-radius: 12px;
    padding: 18px 20px;
    font-family: var(--ks-mono);
    font-size: 14px;
    line-height: 1.7;
}
.kc-body .helpdesk .helpdesk-prose > pre code { font-family: inherit; color: inherit; }

/* Tables and quotes as in .kc-prose. */
.kc-body .helpdesk .helpdesk-prose :is(th, td) { border-color: var(--ks-line); }
.kc-body .helpdesk .helpdesk-prose blockquote { border-left: 3px solid var(--ks-board); color: var(--ks-koa-soft); }

/* The articles index lists each topic's first articles, which need room:
   two columns at most, one on narrow screens. */
.kc-body .helpdesk .helpdesk-topics--lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
    .kc-body .helpdesk .helpdesk-topics--lists { grid-template-columns: minmax(0, 1fr); }
}

/* ── Other ways to get help (the page's channels:, after the portal) ──── */
.kc-helpdesk-channels {
    max-width: var(--helpdesk-width);
    margin: 0 auto;
    padding: 0 0 72px;
}
.kc-helpdesk-channels .kc-kicker { margin-bottom: 14px; }
.kc-helpdesk-channels .kc-support-cards { margin: 0; }

@media (max-width: 640px) {
    .kc-body main > .kc-helpdesk,
    .kc-body main > #helpdesk-root.helpdesk { padding: 16px 16px 16px; }
    .kc-body .helpdesk .helpdesk-hero { border-radius: 16px; }
    .kc-helpdesk-channels { padding-bottom: 48px; }
}