/* ============================================================
   base/site.css
   Extracted from base.html <style> block 1 (lines 39-3088)
   DO NOT EDIT manually — part of Phase 1 template refactor.
   ============================================================ */

    html {
      min-height: 100%;
      background-color: var(--theme-page-bg, #eef4fb);
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    html.ui-mode-dark,
    html.theme-dark,
    html:has(body.ui-mode-dark),
    html:has(body.public-site-body.preset-mode-dark),
    html:has(body.public-site-body.ui-mode-dark) {
      background-color: #141727;
    }

    .public-site-body {
      position: relative;
      min-height: 100%;
      background-color: var(--theme-page-bg, #eef4fb);
      background: var(--public-page-bg,
        radial-gradient(circle at 18% -4%, rgba(var(--theme-primary-rgb), calc(0.10 * var(--ds-glow-factor, 0.7))), transparent 24%),
        radial-gradient(circle at 82% 0%, rgba(var(--theme-secondary-rgb), calc(0.08 * var(--ds-glow-factor, 0.7))), transparent 22%),
        linear-gradient(180deg, color-mix(in srgb, var(--theme-page-bg, #eef4fb) 82%, white 18%) 0%, color-mix(in srgb, var(--theme-page-bg, #eef4fb) 92%, white 8%) 22%, color-mix(in srgb, var(--theme-page-bg, #eef4fb) 88%, white 12%) 100%)
      );
      color: var(--theme-page-text, #111827);
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      --public-on-accent: #ffffff;
    }

    .public-site-body.preset-ui-v2 {
      /* Keep preset-provided nav/dropdown/footer tokens authoritative. */
    }

    .public-site-body.preset-ui-v1 {
      /* Keep preset-provided nav/dropdown/footer tokens authoritative. */
    }

    :is(html.theme-dark body, html.ui-mode-dark body, body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) {
      background-color: #020617;
      color-scheme: dark;
      --public-page-bg: linear-gradient(180deg, #020617 0%, #060b16 34%, #0a101d 100%);
      --theme-page-text: #f8fafc;
      --public-panel-bg: rgba(8, 12, 20, 0.94);
      --public-panel-border: rgba(148, 163, 184, 0.16);
      --public-card-bg: rgba(12, 18, 28, 0.96);
      --public-card-border: rgba(148, 163, 184, 0.16);
      --public-subcard-bg: rgba(16, 22, 34, 0.95);
      --public-text-strong: #f8fafc;
      --public-text-muted: rgba(226, 232, 240, 0.86);
      --public-text-soft: rgba(203, 213, 225, 0.72);
      --public-divider-color: rgba(148, 163, 184, 0.16);
      --public-control-bg: rgba(4,10,24,0.92);
      --public-control-border: rgba(148, 163, 184, 0.18);
      --public-control-hover-bg: rgba(22, 32, 48, 0.98);
      --public-control-text: #f8fafc;
      --public-input-bg: rgba(4,10,24,0.90);
      --public-input-border: rgba(148, 163, 184, 0.20);
      --public-input-text: #f8fafc;
      --public-on-accent: #f8fafc;
      --public-shell-ambient-opacity: 0.92;
    }

    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark).preset-ui-v2 {
      /* Keep preset-provided nav/dropdown/footer tokens authoritative. */
    }

    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark).preset-ui-v1 {
      /* Keep preset-provided nav/dropdown/footer tokens authoritative. */
    }

    /* Ensure local themed-shell defaults do not pin light tokens in dark mode.
       Critical: also include body.preset-preview-mode-dark — that flag is
       set by core.templatetags.unified_theme.preset_body_class whenever
       the active preset's meta.preview.mode is 'dark' (glamour,
       executive_noir, midnight_cobalt, …). Without this branch a tenant
       on a dark-designed preset whose org.theme_mode still defaults to
       'light' paints dark surfaces with light-mode dark text → unreadable. */
    :is(html.theme-dark, html.ui-mode-dark) .themed-shell,
    :is(html.theme-dark, html.ui-mode-dark) .public-shell,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark) .themed-shell,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark) .public-shell {
      --preset-card-bg: rgba(12, 18, 28, 0.96);
      --preset-panel-bg: rgba(8, 12, 20, 0.94);
      --preset-subcard-bg: rgba(16, 22, 34, 0.95);
      --preset-control-bg: rgba(4, 10, 24, 0.92);
      --preset-control-border: rgba(148, 163, 184, 0.20);
      --preset-control-hover-bg: rgba(22, 32, 48, 0.98);
      --preset-control-text: #f8fafc;
      --preset-input-bg: rgba(4, 10, 24, 0.90);
      --preset-input-border: rgba(148, 163, 184, 0.20);
      --preset-input-text: #f8fafc;
      --preset-text-strong: #f8fafc;
      --preset-text-muted: rgba(226, 232, 240, 0.86);
      --preset-text-soft: rgba(203, 213, 225, 0.72);
      --preset-divider: rgba(148, 163, 184, 0.18);
      --public-panel-bg: var(--preset-panel-bg);
      --public-card-bg: var(--preset-card-bg);
      --public-subcard-bg: var(--preset-subcard-bg);
      --public-control-bg: var(--preset-control-bg);
      --public-control-border: var(--preset-control-border);
      --public-control-hover-bg: var(--preset-control-hover-bg);
      --public-control-text: var(--preset-control-text);
      --public-input-bg: var(--preset-input-bg);
      --public-input-border: var(--preset-input-border);
      --public-input-text: var(--preset-input-text);
      --public-text-strong: var(--preset-text-strong);
      --public-text-muted: var(--preset-text-muted);
      --public-text-soft: var(--preset-text-soft);
      --public-divider-color: var(--preset-divider);
    }

    body.public-site-body.preset-slug-violet_afterglow,
    body.public-site-body.preset-slug-violet-afterglow,
    body.public-site-body.homepage-preset-violet_afterglow,
    body.public-site-body.homepage-preset-violet-afterglow {
      --public-page-bg: radial-gradient(circle at 18% 12%, rgba(124,58,237,0.18), transparent 22%), radial-gradient(circle at 82% 10%, rgba(192,132,252,0.14), transparent 20%), linear-gradient(180deg, #05030b 0%, #11091f 24%, #140b24 100%);
      --public-shell-bg: linear-gradient(135deg, rgba(20,7,31,0.38), rgba(49,16,84,0.18));
      --public-shell-ambient-bg: radial-gradient(circle at 12% 16%, rgba(124,58,237,0.22), transparent 26%), radial-gradient(circle at 86% 12%, rgba(192,132,252,0.18), transparent 22%), radial-gradient(circle at 50% 100%, rgba(15,23,42,0.32), transparent 34%);
    }

    body.public-site-body.preset-slug-midnight_cobalt,
    body.public-site-body.preset-slug-midnight-cobalt,
    body.public-site-body.homepage-preset-midnight_cobalt,
    body.public-site-body.homepage-preset-midnight-cobalt {
      --public-page-bg: radial-gradient(circle at 18% 10%, rgba(29,78,216,0.20), transparent 22%), radial-gradient(circle at 82% 8%, rgba(96,165,250,0.16), transparent 18%), linear-gradient(180deg, #020617 0%, #06111f 24%, #081528 100%);
      --public-shell-bg: linear-gradient(135deg, rgba(2,6,23,0.34), rgba(15,23,42,0.18));
      --public-shell-ambient-bg: radial-gradient(circle at 12% 16%, rgba(29,78,216,0.24), transparent 24%), radial-gradient(circle at 86% 12%, rgba(96,165,250,0.18), transparent 20%), radial-gradient(circle at 50% 100%, rgba(2,6,23,0.30), transparent 34%);
    }

    body.public-site-body.preset-slug-obsidian_core,
    body.public-site-body.preset-slug-obsidian-core,
    body.public-site-body.homepage-preset-obsidian_core,
    body.public-site-body.homepage-preset-obsidian-core {
      --public-page-bg: radial-gradient(circle at 16% 10%, rgba(148,163,184,0.10), transparent 20%), radial-gradient(circle at 84% 8%, rgba(71,85,105,0.10), transparent 18%), linear-gradient(180deg, #000000 0%, #050505 28%, #0b0f16 100%);
      --public-shell-bg: linear-gradient(135deg, rgba(0,0,0,0.34), rgba(17,24,39,0.16));
      --public-shell-ambient-bg: radial-gradient(circle at 14% 14%, rgba(148,163,184,0.12), transparent 22%), radial-gradient(circle at 84% 10%, rgba(71,85,105,0.14), transparent 20%), radial-gradient(circle at 50% 100%, rgba(0,0,0,0.38), transparent 34%);
    }

    body.public-site-body.preset-slug-obsidian_prime,
    body.public-site-body.preset-slug-obsidian-prime,
    body.public-site-body.homepage-preset-obsidian_prime,
    body.public-site-body.homepage-preset-obsidian-prime {
      --public-page-bg: linear-gradient(180deg, #0d1117 0%, #0d1117 100%);
      --public-shell-bg: linear-gradient(180deg, #0d1117 0%, #0d1117 100%);
      --public-shell-ambient-bg: none;
      --public-nav-dropdown-surface: rgba(13, 17, 23, 0.98);
      --public-nav-dropdown-item-surface: rgba(13, 17, 23, 0.98);
      --public-nav-dropdown-item-hover-surface: rgba(22, 27, 34, 0.98);
    }

    body.public-site-body.preset-slug-obsidian_prime::before,
    body.public-site-body.preset-slug-obsidian-prime::before,
    body.public-site-body.homepage-preset-obsidian_prime::before,
    body.public-site-body.homepage-preset-obsidian-prime::before {
      display: none;
      background: none;
      opacity: 0;
    }

    body.nav-border-off .public-nav-shell,
    body.nav-border-off .public-container.public-nav-wrap {
      border: 0 !important;
      border-color: transparent !important;
      background-clip: padding-box !important;
    }

    body.public-site-body.preset-slug-executive_noir,
    body.public-site-body.preset-slug-executive-noir,
    body.public-site-body.homepage-preset-executive_noir,
    body.public-site-body.homepage-preset-executive-noir {
      --public-page-bg: radial-gradient(circle at 16% 12%, rgba(var(--theme-primary-rgb), calc(0.10 * var(--ds-glow-factor, 0.7))), transparent 24%), linear-gradient(180deg, #020617 0%, #0f172a 22%, #111827 100%);
      --public-shell-bg: linear-gradient(135deg, rgba(2,6,23,0.34), rgba(15,23,42,0.18));
      --public-shell-ambient-bg: radial-gradient(circle at 12% 16%, rgba(var(--theme-primary-rgb), calc(0.14 * var(--ds-glow-factor, 0.7))), transparent 24%), radial-gradient(circle at 84% 12%, rgba(71,85,105,0.18), transparent 20%), radial-gradient(circle at 50% 100%, rgba(2,6,23,0.28), transparent 34%);
    }

    body.public-site-body.preset-slug-bold_saas,
    body.public-site-body.preset-slug-bold-saas,
    body.public-site-body.homepage-preset-bold_saas,
    body.public-site-body.homepage-preset-bold-saas {
      --public-page-bg: radial-gradient(circle at top left, rgba(var(--theme-primary-rgb), calc(0.16 * var(--ds-glow-factor, 0.7))), transparent 24%), radial-gradient(circle at top right, rgba(var(--theme-secondary-rgb), calc(0.18 * var(--ds-glow-factor, 0.7))), transparent 28%), linear-gradient(180deg, #eef4ff 0%, #ffffff 24%, #f8fbff 100%);
      --public-shell-bg: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(219,234,254,0.24));
      --public-shell-ambient-bg: radial-gradient(circle at 14% 14%, rgba(var(--theme-primary-rgb), calc(0.18 * var(--ds-glow-factor, 0.7))), transparent 24%), radial-gradient(circle at 86% 12%, rgba(var(--theme-secondary-rgb), calc(0.16 * var(--ds-glow-factor, 0.7))), transparent 22%), radial-gradient(circle at 50% 100%, rgba(191,219,254,0.28), transparent 34%);
    }

    .public-site-body.homepage-page::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% -8%, rgba(255,255,255,0.62), transparent 34%),
        radial-gradient(circle at 22% 10%, rgba(var(--theme-primary-rgb), calc(0.08 * var(--ds-glow-factor, 0.7))), transparent 18%),
        radial-gradient(circle at 78% 12%, rgba(var(--theme-secondary-rgb), calc(0.07 * var(--ds-glow-factor, 0.7))), transparent 18%);
      mask-image: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.18) 28%, transparent 68%);
      opacity: 0.82;
      z-index: -3;
    }

    :is(body.ui-mode-dark.homepage-page, body.public-site-body.homepage-page.preset-mode-dark)::before {
      background:
        radial-gradient(circle at 22% 8%, rgba(var(--theme-primary-rgb), calc(0.10 * var(--ds-glow-factor, 0.7))), transparent 18%),
        radial-gradient(circle at 78% 10%, rgba(var(--theme-secondary-rgb), calc(0.08 * var(--ds-glow-factor, 0.7))), transparent 18%);
      mask-image: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10) 24%, transparent 60%);
      opacity: 0.42;
    }

    /* Custom code block styling — exclude CodeMirror editor pre elements */
    pre:not(.CodeMirror-line):not(.CodeMirror-line-like) {
      background-color: #282c34 !important;
      border-radius: 8px;
      padding: 16px;
      overflow-x: auto;
      border: 1px solid #444;
      margin: 1rem 0;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .CodeMirror pre.CodeMirror-line,
    .CodeMirror pre.CodeMirror-line-like {
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
      margin: 0 !important;
      padding: 0 4px !important;
    }

    pre:not(.CodeMirror-line):not(.CodeMirror-line-like) code {
      background-color: transparent !important;
      font-size: 14px;
      line-height: 1.6;
      color: #abb2bf;
    }

    code:not(pre code) {
      background-color: #f3f4f6;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: 'Courier New', monospace;
      color: #d946ef;
    }

    /* Prose styling */
    .prose {
      max-width: 100%;
      line-height: 1.8;
    }

    .prose h2, .prose h3, .prose h4 {
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
      font-weight: 600;
    }

    .prose p {
      margin-bottom: 1rem;
      color: #374151;
    }

    .prose a {
      color: #2563eb;
      text-decoration: underline;
    }

    .prose a:hover {
      color: #1d4ed8;
    }

    .prose ul, .prose ol {
      margin: 1rem 0 1rem 2rem;
    }

    .prose li {
      margin-bottom: 0.5rem;
    }

    .prose blockquote {
      border-left: 4px solid #2563eb;
      padding-left: 1rem;
      margin: 1rem 0;
      color: #6b7280;
      font-style: italic;
    }

    .prose table {
      border-collapse: collapse;
      width: 100%;
      margin: 1rem 0;
    }

    .prose table th, .prose table td {
      border: 1px solid #d1d5db;
      padding: 0.75rem;
      text-align: left;
    }

    .prose table th {
      background-color: #f3f4f6;
      font-weight: 600;
    }

    .prose strong {
      font-weight: 600;
      color: #111827;
    }

    .prose em {
      font-style: italic;
      color: #6b7280;
    }

    .edit-hint {
      display: none !important;
    }

    .page-shell {
      width: 100%;
      max-width: 1480px;
      margin: 0 auto;
      padding: 24px 16px;
    }

    /* Phase 0 — section-rhythm contract. These utility classes read from the
       --ds-* tokens in tokens/design-system.css so the contract is one source
       of truth. Override per-preset via the preset's token map; never hardcode
       values in section variants. */
    .public-container {
      width: 100%;
      max-width: var(--ds-container-max-width, 1480px);
      margin: 0 auto;
      padding-left: var(--ds-container-px, 1.25rem);
      padding-right: var(--ds-container-px, 1.25rem);
    }

    .public-section {
      padding-top: var(--ds-section-py, clamp(4.5rem, 7vw, 7.5rem));
      padding-bottom: var(--ds-section-py, clamp(4.5rem, 7vw, 7.5rem));
    }

    .public-shell {
      position: relative;
      isolation: isolate;
      background: var(--public-shell-bg, linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.12) 16%, rgba(255,255,255,0.03) 100%));
    }

    .public-shell::before {
      content: '';
      position: absolute;
      inset: -5rem -10vw -6rem;
      pointer-events: none;
      background: var(--public-shell-ambient-bg,
        radial-gradient(circle at 50% -4%, rgba(255,255,255,0.82), transparent 30%),
        radial-gradient(circle at 14% 12%, rgba(var(--theme-primary-rgb), calc(0.09 * var(--ds-glow-factor, 0.7))), transparent 22%),
        radial-gradient(circle at 86% 14%, rgba(var(--theme-secondary-rgb), calc(0.08 * var(--ds-glow-factor, 0.7))), transparent 22%)
      );
      opacity: var(--public-shell-ambient-opacity, 0.84);
      filter: var(--public-shell-ambient-filter, blur(6px));
      z-index: -1;
    }

    /* Keep hero-focused ambient shell glow only on homepage.
       On inner pages this reads like a lampshade behind the navbar/hero. */
    body.public-site-body:not(.homepage-page) .public-shell::before {
      display: none;
    }

    .public-shell::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 16%, transparent 84%, rgba(15,23,42,0.03));
      mix-blend-mode: soft-light;
      opacity: 0.45;
      z-index: -1;
    }

    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell::after {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 16%, transparent 82%, rgba(2,6,23,0.20));
      mix-blend-mode: normal;
      opacity: 0.34;
    }

    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-kicker {
      background: rgba(15, 23, 42, 0.78);
      border-color: rgba(96, 165, 250, 0.2);
      color: rgba(226, 232, 240, 0.92);
    }

    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-hero,
    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-surface,
    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-card,
    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-hero-panel {
      border-color: var(--public-panel-border, rgba(96, 165, 250, 0.14));
      box-shadow: 0 24px 56px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255,255,255,0.04);
    }

    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-hero {
      background:
        radial-gradient(circle at top right, rgba(var(--theme-primary-rgb), calc(0.18 * var(--ds-glow-factor, 0.7))), transparent 28%),
        radial-gradient(circle at 8% 14%, rgba(var(--theme-secondary-rgb), calc(0.14 * var(--ds-glow-factor, 0.7))), transparent 24%),
        linear-gradient(145deg, color-mix(in srgb, var(--public-panel-bg) 94%, transparent), color-mix(in srgb, var(--public-card-bg) 96%, transparent));
    }

    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-hero-panel {
      background: var(--public-panel-bg, rgba(6, 12, 24, 0.94));
      box-shadow: 0 18px 40px rgba(2, 6, 23, 0.24), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-display,
    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-title {
      color: var(--public-text-strong, #f8fafc);
    }

    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-lead {
      color: var(--public-text-muted, rgba(226, 232, 240, 0.86));
    }

    @media (min-width: 1800px) {
      .public-shell::before {
        inset: -6rem -16vw -8rem;
      }
    }

    @media (max-width: 767px) {
      html {
        scroll-behavior: auto;
      }

      .public-site-body {
        background: linear-gradient(180deg, var(--theme-page-bg, #eef4fb) 0%, color-mix(in srgb, var(--theme-page-bg, #eef4fb) 94%, white 6%) 100%);
      }

      :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) {
        background: var(--public-page-bg, linear-gradient(180deg, #020617 0%, #0f172a 24%, #111827 100%));
      }

      .public-site-body::before {
        display: none;
      }

      .public-shell {
        background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      }

      :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell {
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      }

      .public-shell::before {
        inset: -1.5rem -1rem -2rem;
        opacity: 0.18;
        filter: blur(1px);
      }

      .public-shell::after {
        opacity: 0.14;
        mix-blend-mode: normal;
      }

      .public-reveal,
      .public-reveal-delay-1,
      .public-reveal-delay-2,
      .public-reveal-delay-3 {
        opacity: 1;
        transform: none;
        animation: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .public-reveal,
      .public-reveal-delay-1,
      .public-reveal-delay-2,
      .public-reveal-delay-3 {
        opacity: 1;
        transform: none;
        animation: none;
      }
    }

    .public-reveal,
    .public-reveal-delay-1,
    .public-reveal-delay-2,
    .public-reveal-delay-3 {
      opacity: 0;
      transform: translateY(20px);
      animation: publicReveal 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .public-reveal-delay-1 { animation-delay: 90ms; }
    .public-reveal-delay-2 { animation-delay: 180ms; }
    .public-reveal-delay-3 { animation-delay: 270ms; }

    @keyframes publicReveal {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .public-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.5rem 0.9rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.2);
      background: var(--public-kicker-bg, rgba(255, 255, 255, 0.9));
      color: var(--public-text-muted, rgb(71, 85, 105));
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .public-kicker::before {
      content: '';
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
      box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.12);
    }

    .public-display {
      font-size: clamp(2.75rem, 5.4vw, 5rem);
      line-height: 0.96;
      letter-spacing: -0.055em;
      font-weight: 800;
      color: var(--public-text-strong, rgb(15, 23, 42));
    }
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) {
      position: relative;
      isolation: isolate;
    }

    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) .bg-white,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) .bg-gray-50,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) .bg-gray-100,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) .bg-gray-200,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) .bg-slate-50,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) .bg-slate-100,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) .bg-neutral-50,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) .bg-zinc-50,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) .bg-stone-50,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell) [class*='bg-white/'] {
      background: color-mix(in srgb, var(--public-panel-bg, rgba(255,255,255,0.92)) 90%, transparent) !important;
      border-color: var(--public-panel-border, rgba(148, 163, 184, 0.18)) !important;
    }

    /* Central on-accent text control for app buttons and pills. */
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, [role='button']).text-white,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, [role='button']).page-hero-button-primary,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, [role='button']).messaging-app-button-primary {
      color: var(--public-on-accent, #ffffff) !important;
    }

    /* Central utility-button mapping for app shells. */
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-blue-500,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-blue-600,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-blue-700,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-gradient-to-r.from-blue-600.to-purple-600 {
      background: linear-gradient(135deg, var(--theme-primary, #2563eb), var(--theme-secondary, #1d4ed8)) !important;
      color: var(--public-on-accent, #ffffff) !important;
      border-color: transparent !important;
    }

    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-green-600,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-green-700 {
      background: color-mix(in srgb, #22c55e 72%, var(--public-panel-bg, #ffffff) 28%) !important;
      color: var(--public-on-accent, #ffffff) !important;
      border-color: transparent !important;
    }

    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-purple-600,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-purple-700 {
      background: color-mix(in srgb, var(--theme-primary, #2563eb) 60%, #7c3aed 40%) !important;
      color: var(--public-on-accent, #ffffff) !important;
      border-color: transparent !important;
    }

    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-gray-500,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-gray-600,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-gray-700 {
      background: color-mix(in srgb, var(--public-panel-bg, #ffffff) 74%, var(--public-text-strong, #0f172a) 26%) !important;
      color: var(--public-on-accent, #ffffff) !important;
      border-color: transparent !important;
    }

    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-red-600,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).bg-red-700 {
      background: color-mix(in srgb, #ef4444 72%, var(--public-panel-bg, #ffffff) 28%) !important;
      color: var(--public-on-accent, #ffffff) !important;
      border-color: transparent !important;
    }

    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).hover\:bg-blue-700:hover,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).hover\:bg-green-700:hover,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).hover\:bg-purple-700:hover,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).hover\:bg-gray-700:hover,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).hover\:bg-red-700:hover,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).hover\:from-blue-700:hover,
    :is(.tool-theme-shell, .messaging-theme-shell, .settings-theme-shell, .page-shell)
    :is(a, button, input[type='submit'], input[type='button']).hover\:to-purple-700:hover {
      filter: brightness(0.95);
    }

    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .border-gray-100,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .border-gray-200,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .border-gray-300,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .border-slate-200 {
      border-color: var(--public-divider-color, rgba(148, 163, 184, 0.18)) !important;
    }

    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-gray-900,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-gray-800,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-slate-900,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-slate-950,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-gray-700 {
      color: var(--public-text-strong, #0f172a) !important;
    }

    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-gray-600,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-gray-500,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-slate-600,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-slate-500,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-sky-50,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-sky-100,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-fuchsia-50,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-fuchsia-100 {
      color: var(--public-text-muted, #475569) !important;
    }

    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) textarea,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']),
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) select {
      background: color-mix(in srgb, var(--public-subcard-bg, rgba(255,255,255,0.88)) 92%, transparent);
      border-color: var(--public-divider-color, rgba(148, 163, 184, 0.18));
      color: var(--public-text-strong, #0f172a);
    }

    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) :is(input, textarea)::placeholder {
      color: var(--public-text-soft, rgba(100, 116, 139, 0.72));
    }

    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) :is(.ui-card, .ui-panel, .public-card, .saas-card, .themed-card, .themed-panel, .public-hero-panel, .public-stage-panel, .glass-panel, .settings-surface-card, .settings-group-panel, .blog-card, .app-card, .plan-card, .support-card, .error-card, .action-card, .option-card, .pipeline-card, .template-card, .invite-card, .member-card, .platform-admin-card, .detail-article-card, .auth-panel, .support-panel, .countdown-card) {
      background: color-mix(in srgb, var(--public-card-bg, rgba(255,255,255,0.94)) 92%, transparent);
      border-color: var(--public-card-border, var(--public-divider-color, rgba(148, 163, 184, 0.18)));
    }

    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) :is(.public-hero, .saas-hero, .page-hero, .settings-page-hero, .messaging-app-hero, .about-hero-shell) {
      background:
        radial-gradient(circle at top right, rgba(var(--theme-primary-rgb), calc(0.14 * var(--ds-glow-factor, 0.7))), transparent 28%),
        radial-gradient(circle at 8% 14%, rgba(var(--theme-secondary-rgb), calc(0.10 * var(--ds-glow-factor, 0.7))), transparent 24%),
        linear-gradient(145deg, color-mix(in srgb, var(--public-panel-bg, rgba(255,255,255,0.97)) 92%, transparent), color-mix(in srgb, var(--public-card-bg, rgba(248,250,252,0.96)) 94%, transparent)) !important;
      border-color: var(--public-panel-border, rgba(148, 163, 184, 0.16)) !important;
    }

    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .shadow-sm,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .shadow-md,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .shadow-lg,
    :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .shadow-xl {
      box-shadow: 0 20px 44px rgba(15, 23, 42, 0.10) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-white,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-gray-50,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-gray-100,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-gray-200,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-slate-50,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-slate-100,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-neutral-50,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-zinc-50,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-stone-50,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) [class*='bg-white/'] {
      background: var(--public-panel-bg, rgba(6, 12, 24, 0.94)) !important;
      border-color: var(--public-panel-border, rgba(96, 165, 250, 0.14)) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) textarea,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) select {
      background: var(--public-subcard-bg, rgba(16, 28, 52, 0.94));
      border-color: var(--public-divider-color, rgba(96, 165, 250, 0.12));
      color: var(--public-text-strong, #f8fafc);
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-gray-900,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-gray-800,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-slate-900,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-slate-950,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-gray-700 {
      color: var(--public-text-strong, #f8fafc) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-gray-600,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-gray-500,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-slate-600,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-slate-500,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-sky-50,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-sky-100,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-fuchsia-50,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .text-fuchsia-100 {
      color: var(--public-text-muted, rgba(226, 232, 240, 0.86)) !important;
    }

    :is(body.ui-mode-dark.tool-page-body, body.public-site-body.tool-page-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-white,
    :is(body.ui-mode-dark.tool-page-body, body.public-site-body.tool-page-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-gray-50,
    :is(body.ui-mode-dark.tool-page-body, body.public-site-body.tool-page-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .bg-gray-100,
    :is(body.ui-mode-dark.tool-page-body, body.public-site-body.tool-page-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) [class*='bg-white/'] {
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    :is(body.ui-mode-dark.tool-page-body, body.public-site-body.tool-page-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .shadow-sm,
    :is(body.ui-mode-dark.tool-page-body, body.public-site-body.tool-page-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .shadow-md,
    :is(body.ui-mode-dark.tool-page-body, body.public-site-body.tool-page-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .shadow-lg,
    :is(body.ui-mode-dark.tool-page-body, body.public-site-body.tool-page-body.preset-mode-dark) :is(.tool-theme-shell, .settings-theme-shell, .page-shell) .shadow-xl {
      box-shadow: none !important;
    }

    /* Compatibility mode: custom presets should behave closer to existing
       internal themes, which are mostly accent-led instead of full surface fills. */
    body.preset-origin-custom.tool-page-body {
      --public-page-bg: var(--public-shell-bg, var(--public-stage-bg, var(--public-page-bg)));
      --theme-page-bg: var(--public-shell-bg, var(--public-stage-bg, var(--theme-page-bg, #eef4fb)));
    }

    body.preset-origin-custom.tool-page-body,
    body.preset-origin-custom.tool-page-body.public-site-body {
      background: var(--public-page-bg) !important;
    }

    body.preset-origin-custom.tool-page-body .min-h-screen.bg-gray-50,
    body.preset-origin-custom.tool-page-body .min-h-screen.bg-slate-50,
    body.preset-origin-custom.tool-page-body .min-h-screen.bg-white {
      background: var(--public-page-bg) !important;
    }

    body.preset-origin-custom.tool-page-body :is(.tool-theme-shell, .settings-theme-shell, .page-shell) {
      --public-panel-bg: color-mix(in srgb, rgba(255, 255, 255, 0.98) 94%, rgba(var(--theme-primary-rgb), 0.03) 6%);
      --public-panel-border: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.10) 58%, rgba(148, 163, 184, 0.18) 42%);
      --public-card-bg: color-mix(in srgb, rgba(255, 255, 255, 0.98) 96%, rgba(var(--theme-primary-rgb), 0.02) 4%);
      --public-card-border: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.10) 52%, rgba(148, 163, 184, 0.16) 48%);
      --public-subcard-bg: color-mix(in srgb, rgba(248, 250, 252, 0.96) 92%, rgba(var(--theme-primary-rgb), 0.05) 8%);
      --public-divider-color: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.12) 48%, rgba(148, 163, 184, 0.18) 52%);
      --public-input-bg: color-mix(in srgb, rgba(255, 255, 255, 0.98) 92%, rgba(var(--theme-primary-rgb), 0.04) 8%);
      --public-input-border: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.16) 56%, rgba(148, 163, 184, 0.20) 44%);
      --public-nav-bg: color-mix(in srgb, rgba(255, 255, 255, 0.96) 94%, rgba(var(--theme-primary-rgb), 0.04) 6%);
      --public-nav-border: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.12) 56%, rgba(148, 163, 184, 0.18) 44%);
      --public-nav-links-bg: color-mix(in srgb, rgba(255, 255, 255, 0.94) 92%, rgba(var(--theme-primary-rgb), 0.04) 8%);
      --public-nav-dropdown-surface: var(--public-nav-links-bg);
      --public-nav-dropdown-item-surface: color-mix(in srgb, var(--public-subcard-bg) 88%, transparent);
      --public-nav-dropdown-item-hover-surface: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.12) 76%, var(--public-nav-links-bg) 24%);
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark).preset-origin-custom.tool-page-body :is(.tool-theme-shell, .settings-theme-shell, .page-shell) {
      --public-panel-bg: color-mix(in srgb, rgba(8, 12, 20, 0.96) 94%, rgba(var(--theme-primary-rgb), 0.06) 6%);
      --public-panel-border: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.18) 58%, rgba(96, 165, 250, 0.16) 42%);
      --public-card-bg: color-mix(in srgb, rgba(12, 18, 28, 0.96) 96%, rgba(var(--theme-primary-rgb), 0.04) 4%);
      --public-card-border: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.16) 52%, rgba(96, 165, 250, 0.14) 48%);
      --public-subcard-bg: color-mix(in srgb, rgba(16, 22, 34, 0.95) 92%, rgba(var(--theme-primary-rgb), 0.06) 8%);
      --public-divider-color: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.18) 48%, rgba(96, 165, 250, 0.16) 52%);
      --public-input-bg: color-mix(in srgb, rgba(4, 10, 24, 0.92) 92%, rgba(var(--theme-primary-rgb), 0.06) 8%);
      --public-input-border: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.20) 56%, rgba(96, 165, 250, 0.16) 44%);
      --public-nav-bg: color-mix(in srgb, rgba(8, 12, 20, 0.94) 94%, rgba(var(--theme-primary-rgb), 0.06) 6%);
      --public-nav-border: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.18) 56%, rgba(96, 165, 250, 0.16) 44%);
      --public-nav-links-bg: color-mix(in srgb, rgba(12, 18, 28, 0.94) 92%, rgba(var(--theme-primary-rgb), 0.06) 8%);
      --public-nav-dropdown-surface: var(--public-nav-links-bg);
      --public-nav-dropdown-item-surface: color-mix(in srgb, var(--public-subcard-bg) 88%, transparent);
      --public-nav-dropdown-item-hover-surface: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.18) 76%, var(--public-nav-links-bg) 24%);
    }

    /* Phase 0 — section heading + lead typography reads from the
       --ds-section-title-* / --ds-section-lead-* tokens so every variant
       lands on the same rhythm. (These are distinct from --ds-h2-* which
       sets body-prose h2; section banners are their own scale.) */
    .public-title {
      font-size: var(--ds-section-title-size, clamp(2rem, 3.4vw, 3.1rem));
      line-height: 1.02;
      letter-spacing: var(--ds-section-title-tracking, -0.045em);
      font-weight: var(--ds-section-title-weight, 800);
      color: var(--public-text-strong, rgb(15, 23, 42));
    }

    .public-lead {
      font-size: var(--ds-section-lead-size, clamp(1rem, 1.35vw, 1.22rem));
      line-height: var(--ds-section-lead-line, 1.8);
      color: var(--ds-text-muted, var(--public-text-muted, rgb(71, 85, 105)));
      max-width: var(--ds-section-lead-max-width, 52rem);
    }

    .public-hero {
      position: relative;
      overflow: hidden;
      border-radius: 2rem;
      border: 1px solid rgba(148, 163, 184, 0.14);
      background:
        radial-gradient(circle at top right, rgba(var(--theme-primary-rgb), calc(0.16 * var(--ds-glow-factor, 0.7))), transparent 28%),
        radial-gradient(circle at 8% 14%, rgba(var(--theme-secondary-rgb), calc(0.12 * var(--ds-glow-factor, 0.7))), transparent 24%),
        linear-gradient(145deg, color-mix(in srgb, var(--public-panel-bg, rgba(255,255,255,0.97)) 92%, transparent), color-mix(in srgb, var(--public-card-bg, rgba(248,250,252,0.96)) 94%, transparent));
      box-shadow: 0 28px 72px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.55);
      backdrop-filter: blur(18px) saturate(150%);
    }

    .public-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, rgba(15, 23, 42, 0.015), transparent 32%),
        radial-gradient(circle at 80% 18%, rgba(var(--theme-primary-rgb), calc(0.12 * var(--ds-glow-factor, 0.7))), transparent 24%);
      pointer-events: none;
    }

    .public-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
      gap: clamp(1.5rem, 3vw, 3rem);
      align-items: end;
      padding: clamp(2rem, 4vw, 4rem);
    }

    .public-hero-grid-home {
      grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.55fr);
    }

    .public-hero-panel {
      padding: 1.1rem;
      border-radius: 1.5rem;
      border: 1px solid var(--public-panel-border, var(--public-surface-border, rgba(148, 163, 184, 0.18)));
      background: color-mix(in srgb, var(--public-panel-bg, var(--public-surface-bg, rgba(255, 255, 255, 0.82))) 86%, transparent);
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.22);
      backdrop-filter: blur(18px) saturate(155%);
    }

    .public-band,
    .public-band-soft,
    .public-band-contrast {
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }

    .public-band::before,
    .public-band-soft::before,
    .public-band-contrast::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: -1;
    }

    .public-band::before {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
    }

    .public-band-soft::before {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
      opacity: 0.7;
    }

    .public-band-contrast::before {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
    }

    .public-nav-wrap {
      padding-top: 0.55rem;
      padding-bottom: 0.55rem;
    }

    .public-nav-shell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      min-height: 4rem;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      flex-wrap: wrap;
      padding: 0.64rem 0.85rem 0.64rem 0.95rem;
      border-radius: 1.35rem;
      border: 1px solid var(--public-nav-border, transparent);
      background: var(--public-nav-bg, color-mix(in srgb, var(--ui-surface-panel-bg, var(--public-panel-bg, rgba(255, 255, 255, 0.96))) 88%, transparent));
      box-shadow: 0 10px 24px rgba(var(--theme-primary-rgb), 0.08);
      backdrop-filter: blur(18px) saturate(140%);
      --public-nav-link-color: var(--ui-nav-text, color-mix(in srgb, var(--ui-color-text-primary, var(--public-text-strong, rgb(15, 23, 42))) 70%, var(--ui-color-text-muted, var(--public-text-muted, rgb(71, 85, 105))) 30%));
      --public-nav-link-hover-color: var(--ui-nav-text-hover, var(--theme-accent, var(--theme-primary, var(--ui-color-text-primary, var(--public-text-strong, rgb(15, 23, 42))))));
      --public-nav-link-hover-bg: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.12) 72%, rgba(255, 255, 255, 0.68) 28%);
      --public-nav-dropdown-surface: var(--ui-nav-dropdown-surface, var(--public-nav-links-bg, color-mix(in srgb, var(--ui-surface-panel-bg, var(--public-panel-bg, rgba(255, 255, 255, 0.96))) 90%, transparent)));
      --public-nav-dropdown-item-surface: var(--ui-nav-dropdown-item-surface, var(--public-nav-links-bg, color-mix(in srgb, var(--ui-surface-subcard-bg, var(--public-subcard-bg, rgba(255, 255, 255, 0.92))) 92%, transparent)));
      --public-nav-dropdown-item-hover-surface: var(--ui-nav-dropdown-item-hover-surface, var(--public-nav-link-hover-bg, color-mix(in srgb, var(--public-control-hover-bg, rgba(255, 255, 255, 0.98)) 12%, transparent)));
      --public-footer-bg: color-mix(in srgb, var(--ui-surface-panel-bg, var(--public-panel-bg, rgba(255, 255, 255, 0.96))) 92%, transparent);
      --public-footer-text: var(--ui-color-text-muted, var(--public-text-muted, rgb(71, 85, 105)));
      --public-footer-heading: var(--ui-color-text-primary, var(--public-text-strong, rgb(15, 23, 42)));
    }

    .public-nav-shell > * {
      min-width: 0;
    }

    .public-nav-shell .public-nav-links,
    .public-nav-shell .public-nav-cta {
      min-width: 0;
    }

    .public-nav-shell .public-nav-link {
      overflow-wrap: anywhere;
    }

    /* Public-nav auth actions — Login (ghost) + Launch (primary) + Workspace.
       Token-driven so they invert correctly under body.theme-dark / overlay. */
    .public-nav-auth {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .public-nav-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.55rem 0.95rem;
      border-radius: 12px;
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      text-decoration: none;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .public-nav-btn:active { transform: translateY(1px); }
    .public-nav-btn-ghost {
      color: var(--public-nav-link-color, var(--public-text-strong, #0f172a));
      border-color: var(--public-divider-color, rgba(148, 163, 184, 0.28));
      background: transparent;
    }
    .public-nav-btn-ghost:hover {
      background: var(--public-nav-link-hover-bg, rgba(148, 163, 184, 0.14));
      color: var(--public-nav-link-hover-color, var(--theme-primary, #2563eb));
    }
    .public-nav-btn-primary {
      color: #fff;
      background: var(--theme-primary, #2563eb);
      box-shadow: 0 6px 18px -6px rgba(var(--theme-primary-rgb, 37, 99, 235), 0.7);
    }
    .public-nav-btn-primary:hover {
      background: color-mix(in srgb, var(--theme-primary, #2563eb) 90%, #000 10%);
      box-shadow: 0 10px 26px -8px rgba(var(--theme-primary-rgb, 37, 99, 235), 0.85);
    }
    .public-nav-btn-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.15rem;
      padding: 0 0.35rem;
      border-radius: 999px;
      background: #ef4444;
      color: #fff;
      font-size: 0.65rem;
      font-weight: 700;
      line-height: 1.15rem;
    }
    /* Overlay nav over a dark/photo hero: ghost button stays legible until solid. */
    [data-nav-variant="top-transparent"]:not(.nav-scrolled) .public-nav-btn-ghost {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.4);
    }

    /* Compress-on-scroll for the default (non-overlay) nav: the bar tightens and
       gains a crisper surface once the page scrolls past the hero. The overlay
       variant has its own scroll-to-solid handling, so scope this away from it. */
    body:not(.nav-is-overlay) .public-nav-wrap {
      transition: padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body:not(.nav-is-overlay).nav-scrolled .public-nav-shell {
      min-height: 3.35rem;
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
      background: var(--public-nav-bg, color-mix(in srgb, var(--ui-surface-panel-bg, var(--public-panel-bg, rgba(255, 255, 255, 0.96))) 96%, transparent));
      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
      border-color: var(--public-divider-color, rgba(148, 163, 184, 0.18));
    }

    body.nav-style-minimal .public-nav-shell {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      backdrop-filter: none;
      padding: 0.5rem 0;
      border-radius: 0;
    }

    body.nav-style-minimal .public-nav-link {
      background: transparent;
      color: var(--public-nav-link-color);
      transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
    }

    body.nav-style-minimal .public-nav-link:hover {
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.10) 48%, transparent 52%);
      transform: translateY(0);
    }

    body.nav-style-glass .public-nav-shell {
      background: color-mix(in srgb, var(--ui-surface-panel-bg, rgba(255, 255, 255, 0.86)) 72%, transparent 28%);
      border-color: color-mix(in srgb, var(--ui-color-text-muted, rgba(100, 116, 139, 0.96)) 18%, transparent 82%);
      box-shadow: 0 26px 70px rgba(var(--theme-primary-rgb), 0.06);
      backdrop-filter: blur(26px) saturate(180%);
      border-radius: 1.5rem;
    }

    body.nav-style-glass .public-nav-link {
      background: color-mix(in srgb, var(--ui-surface-panel-bg, rgba(255, 255, 255, 0.88)) 88%, transparent 12%);
      border-radius: 999px;
    }

    body.nav-style-glass .public-nav-link:hover {
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.12) 42%, transparent 58%);
    }

    body.nav-style-solid .public-nav-shell {
      background: var(--ui-surface-panel-bg, rgba(255, 255, 255, 0.97));
      border-color: transparent;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
      border-radius: 0.95rem;
    }

    body.nav-style-solid .public-nav-link {
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.08) 32%, transparent 68%);
      border-radius: 999px;
    }

    body.nav-style-solid .public-nav-link:hover {
      background: var(--public-nav-link-hover-bg, rgba(255, 255, 255, 0.72));
    }

    body.nav-style-transparent .public-nav-shell {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      backdrop-filter: none;
      padding: 0.85rem 0;
      border-radius: 0;
    }

    body.nav-style-transparent .public-nav-link {
      background: transparent;
      color: var(--public-nav-link-color);
    }

    body.nav-style-transparent .public-nav-link:hover {
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.12) 46%, transparent 54%);
    }

    body.nav-style-bordered .public-nav-shell {
      background: transparent;
      border: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--ui-color-text-muted, rgba(100, 116, 139, 0.86)) 16%, transparent 84%);
      box-shadow: none;
      padding-bottom: 0.75rem;
      border-radius: 0;
    }

    body.nav-style-bordered .public-nav-link {
      background: transparent;
    }

    body.nav-style-bordered .public-nav-link:hover {
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.10) 44%, transparent 56%);
    }

    body.nav-border-off .public-nav-shell {
      border-color: transparent !important;
      border-bottom-color: transparent !important;
      box-shadow: 0 10px 24px rgba(var(--theme-primary-rgb), 0.04);
    }

    body.nav-border-off body.nav-style-bordered .public-nav-shell {
      border-bottom: none !important;
      box-shadow: none !important;
    }

    /* ── Option 1: Custom nav background color ──────────────────────────── */
    /* --public-nav-bg is set directly via inline style on the <nav> element;
       .public-nav-shell already reads var(--public-nav-bg) so no extra rule needed */

    /* ── Option 5: Floating / pill nav ─────────────────────────────────── */
    body.nav-frame-floating nav[data-nav-variant] {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
      padding-top: 0.6rem;
    }
    body.nav-frame-floating .public-nav-wrap {
      padding-top: 0;
      padding-bottom: 0;
    }
    body.nav-frame-floating .public-nav-shell {
      border-radius: 999px !important;
      box-shadow: 0 8px 32px rgba(var(--theme-primary-rgb), 0.14), 0 2px 8px rgba(0,0,0,0.08) !important;
    }
    /* Spacer grows to account for the extra top padding */
    body.nav-frame-floating .nav-mobile-spacer {
      height: 88px;
    }

    /* ── Flush frame (the default) — full-bleed, edge-to-edge fixed bar, like the
       navbar-mock default. Without this the empty/“flush” nav_frame value fell back
       to the contained rounded pill, so Flush looked identical to Floating. Mobile is
       already a full-width band (see .public-nav-wrap mobile rules), so scope to
       desktop. Floating keeps its own contained-pill rules above and is unaffected. */
    @media (min-width: 768px) {
      body.nav-frame-flush nav[data-nav-variant] {
        top: 0;
        padding-left: 0;
        padding-right: 0;
      }
      body.nav-frame-flush .public-container.public-nav-wrap {
        max-width: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
      }
      body.nav-frame-flush .public-nav-shell {
        border-radius: 0;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid var(--public-nav-border, var(--public-divider-color, rgba(148, 163, 184, 0.16)));
        box-shadow: none;
        padding-left: clamp(1rem, 4vw, 2.5rem);
        padding-right: clamp(1rem, 4vw, 2.5rem);
      }
      /* Compress-on-scroll keeps the square edge; just firm up the surface. */
      body.nav-frame-flush:not(.nav-is-overlay).nav-scrolled .public-nav-shell {
        border-radius: 0;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
      }
    }

    /* ── Option 7: Nav link hover styles ───────────────────────────────── */
    /* Underline slide-in */
    body.nav-links-underline .public-nav-link {
      background: none !important;
      box-shadow: none !important;
      position: relative;
    }
    body.nav-links-underline .public-nav-link::after {
      content: '';
      position: absolute;
      bottom: 3px;
      left: 50%;
      right: 50%;
      height: 2px;
      background: var(--theme-primary, currentColor);
      border-radius: 2px;
      transition: left 0.2s ease, right 0.2s ease;
    }
    body.nav-links-underline .public-nav-link:hover {
      background: none !important;
      color: var(--public-nav-link-hover-color);
    }
    body.nav-links-underline .public-nav-link:hover::after {
      left: 8px;
      right: 8px;
    }
    /* Bold text */
    body.nav-links-bold .public-nav-link {
      background: none !important;
      box-shadow: none !important;
    }
    body.nav-links-bold .public-nav-link:hover {
      background: none !important;
      color: var(--public-nav-link-hover-color);
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    /* Dot indicator */
    body.nav-links-dot .public-nav-link {
      background: none !important;
      box-shadow: none !important;
      position: relative;
      padding-bottom: 14px;
    }
    body.nav-links-dot .public-nav-link::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%) scale(0);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--theme-primary, currentColor);
      transition: transform 0.18s ease;
    }
    body.nav-links-dot .public-nav-link:hover {
      background: none !important;
      color: var(--public-nav-link-hover-color);
    }
    body.nav-links-dot .public-nav-link:hover::after {
      transform: translateX(-50%) scale(1);
    }

    /* ── Option 9: Always-dark / always-light nav ───────────────────────── */
    body.nav-always-dark .public-nav-shell {
      background: rgba(8,14,26,0.97) !important;
      border-color: rgba(148,163,184,0.12) !important;
      --public-nav-bg: rgba(8,14,26,0.97);
      --public-nav-link-color: rgba(226,232,240,0.88);
      --public-nav-link-hover-color: #f1f5f9;
      --public-nav-link-hover-bg: rgba(255,255,255,0.08);
      --public-nav-dropdown-surface: rgba(12,18,30,0.98);
    }
    body.nav-always-dark .public-brand-name { color: #f1f5f9; }
    body.nav-always-dark .public-brand-meta { color: rgba(148,163,184,0.7); }

    body.nav-always-light .public-nav-shell {
      background: rgba(255,255,255,0.97) !important;
      border-color: rgba(148,163,184,0.18) !important;
      --public-nav-bg: rgba(255,255,255,0.97);
      --public-nav-link-color: #334155;
      --public-nav-link-hover-color: var(--theme-primary, #6366f1);
      --public-nav-link-hover-bg: color-mix(in srgb, var(--theme-primary, #6366f1) 10%, transparent);
      --public-nav-dropdown-surface: rgba(255,255,255,0.99);
    }
    body.nav-always-light .public-brand-name { color: #0f172a; }
    body.nav-always-light .public-brand-meta { color: #64748b; }

    /* ── Option 10: Social icons in navbar ─────────────────────────────── */
    .public-nav-socials {
      display: flex;
      align-items: center;
      gap: 0.1rem;
      flex-shrink: 0;
    }
    .public-nav-social-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.85rem;
      height: 1.85rem;
      border-radius: 0.45rem;
      color: var(--public-nav-link-color);
      font-size: 0.82rem;
      text-decoration: none;
      transition: color 0.14s ease, background 0.14s ease;
    }
    .public-nav-social-icon:hover {
      color: var(--public-nav-link-hover-color);
      background: var(--public-nav-link-hover-bg);
    }

    .public-brand-logo {
      height: 2.75rem;
      width: auto;
      max-width: 8.75rem;
      object-fit: contain;
    }

    .public-brand-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 0.95rem;
      box-shadow: 0 14px 30px rgba(var(--theme-primary-rgb), 0.22);
    }

    .public-brand-copy {
      display: flex;
      flex-direction: column;
      gap: 0.08rem;
      min-width: 0;
    }

    .public-brand-name {
      font-size: 1.03rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--public-text-strong, rgb(15, 23, 42));
      white-space: nowrap;
      line-height: 1.05;
    }

    .public-brand-meta {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--public-text-soft, rgb(100, 116, 139));
      white-space: nowrap;
      max-width: 22rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .public-nav-links {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      padding: 0.14rem;
      border-radius: 0.85rem;
      min-width: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
    }

    .public-nav-link {
      display: inline-flex;
      align-items: center;
      gap: 0.34rem;
      min-height: 2.38rem;
      padding: 0.56rem 0.82rem;
      border-radius: 0.8rem;
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--public-nav-link-color, rgb(71, 85, 105));
      transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
    }

    .public-nav-text-link {
      color: var(--public-nav-link-color, rgb(71, 85, 105));
      font-weight: 700;
      letter-spacing: -0.01em;
      transition: color 160ms ease, opacity 160ms ease;
    }

    .public-nav-text-link:hover {
      color: var(--public-nav-link-hover-color, var(--theme-accent, var(--theme-primary, rgb(15, 23, 42))));
    }

    .public-nav-user-label {
      color: var(--public-nav-link-color, rgb(71, 85, 105));
    }

    .public-nav-icon-link {
      color: var(--public-nav-link-color, rgb(71, 85, 105));
      transition: color 160ms ease;
    }

    .public-nav-icon-link:hover {
      color: var(--public-nav-link-hover-color, var(--theme-accent, var(--theme-primary, rgb(15, 23, 42))));
    }

    .public-nav-link:hover {
      color: var(--public-nav-link-hover-color, var(--theme-accent, var(--theme-primary, rgb(15, 23, 42))));
      background: var(--public-nav-link-hover-bg, rgba(255, 255, 255, 0.72));
      transform: translateY(-1px);
    }

    /* Homepage section-jump pills, hosted in the desktop nav (#nav-section-jumps).
       Populated by home-scroll-mode.js from the rendered section panels; collapses
       to nothing on every page where the host stays empty. The host scrolls
       horizontally so a long section list never blows out the bar width. */
    /* Center zone wrapper: the flexible middle holding the section-jump pills +
       the "Pages" dropdown. Desktop-only — mobile uses the slide-over sheet. */
    .public-nav-center { display: none; }
    @media (min-width: 768px) {
      .public-nav-center {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
      }
    }

    .public-nav-jumps {
      display: none;
      /* Shares the center zone with the Pages dropdown: takes only the width it
         needs (up to what's available), then shrinks to 0 and scrolls rather
         than pushing the Pages trigger out of the bar. */
      flex: 0 1 auto;
      align-items: center;
      /* Start-align by default so an overflowing list stays scrollable from Hero.
         `safe center` (below) centers it only when it actually fits — plain
         `center` + overflow makes the leading items unreachable/clipped. */
      justify-content: flex-start;
      gap: 0.1rem;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    @supports (justify-content: safe center) {
      .public-nav-jumps { justify-content: safe center; }
    }
    .public-nav-jumps::-webkit-scrollbar { display: none; }
    /* Desktop only + only once JS has populated it. Mobile keeps the dot-rail. */
    @media (min-width: 768px) {
      .public-nav-jumps:not(:empty) { display: flex; }
    }
    /* Single bar: once the jumps live in the navbar, retire the standalone strip. */
    body.has-nav-jumps #hp-section-nav { display: none !important; }
    body.has-nav-jumps #homepage-sections-flow { padding-top: 0 !important; }

    .public-nav-jump {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      min-height: 2.05rem;
      padding: 0.38rem 0.66rem;
      border: 0;
      background: transparent;
      border-radius: 0.7rem;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      white-space: nowrap;
      cursor: pointer;
      color: var(--public-nav-link-color, rgb(71, 85, 105));
      transition: color 160ms ease, background-color 160ms ease;
    }
    .public-nav-jump:hover {
      color: var(--public-nav-link-hover-color, var(--theme-accent, var(--theme-primary, rgb(15, 23, 42))));
      background: var(--public-nav-link-hover-bg, rgba(255, 255, 255, 0.72));
    }
    .public-nav-jump.active {
      color: var(--theme-primary, rgb(37, 99, 235));
      background: color-mix(in srgb, var(--theme-primary, rgb(37, 99, 235)) 12%, transparent);
    }
    .public-nav-jump:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--theme-primary, rgb(37, 99, 235)) 60%, transparent);
      outline-offset: 1px;
    }

    /* "Pages" dropdown trigger — sits in the center zone next to the section jumps.
       Consolidates every public page link (About / Contact / Blog / Support / custom). */
    .public-nav-pages { flex: none; position: relative; }
    .public-nav-pages-trigger {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      border: 0;
      background: transparent;
      cursor: pointer;
      white-space: nowrap;
    }

    .public-nav-cta {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.62rem;
      padding-left: 0.56rem;
      padding-bottom: 0.55rem;
      margin-bottom: -0.55rem;
      border-left: 1px solid color-mix(in srgb, var(--public-divider-color, rgba(226, 232, 240, 0.9)) 72%, transparent);
    }

    .public-nav-cta::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 0.55rem;
    }

    .public-nav-user-rail {
      border-left: 1px solid var(--public-divider-color, rgba(226, 232, 240, 0.9));
    }

    .public-nav-cta > .public-nav-dropdown-item {
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      color: var(--public-nav-link-color, rgb(71, 85, 105));
    }

    .public-nav-trigger {
      min-height: 3.05rem;
      padding: 0.56rem 0.78rem;
      border-radius: 1.08rem;
      border: 1px solid color-mix(in srgb, var(--public-divider-color, rgba(148, 163, 184, 0.18)) 54%, transparent);
      background: color-mix(in srgb, var(--public-subcard-bg, rgba(255, 255, 255, 0.18)) 20%, transparent);
      box-shadow: none;
      backdrop-filter: blur(12px) saturate(125%);
    }

    .public-nav-trigger:hover {
      transform: none;
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.12) 60%, var(--public-subcard-bg, rgba(255, 255, 255, 0.20)) 40%);
      border-color: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.32) 60%, var(--public-divider-color, rgba(148, 163, 184, 0.18)) 40%);
      box-shadow: none;
    }

    .public-nav-trigger-label {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--public-nav-link-color, var(--public-text-muted, rgb(71, 85, 105)));
    }

    .public-nav-trigger-title {
      color: var(--public-text-strong, rgb(15, 23, 42));
      line-height: 1.1;
    }

    .public-nav-mega {
      width: min(46rem, calc(100vw - 2rem));
      border-radius: 1.9rem;
      overflow: hidden;
    }

    .public-nav-mega-wide {
      width: min(64rem, calc(100vw - 2rem));
    }

    /* Tenant-configurable custom mega-menus (NavigationItem.menu_layout).
       Children are grouped into named columns by get_nav_columns. */
    .public-nav-custom-mega {
      left: 0;
      display: grid;
      gap: 0.25rem 1.25rem;
      align-content: start;
      max-width: calc(100vw - 2rem);
    }
    .public-nav-custom-cols-2 { width: 32rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-nav-custom-cols-3 { width: 44rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .public-nav-custom-wide {
      width: min(60rem, calc(100vw - 2rem));
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.5rem 2rem;
    }
    .public-nav-mega-col {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      min-width: 0;
    }
    .public-nav-custom-mega .public-nav-mega-col + .public-nav-mega-col {
      border-left: 1px solid var(--public-divider-color, rgba(148, 163, 184, 0.18));
      padding-left: 1.1rem;
    }
    .public-nav-mega-heading {
      padding: 0.4rem 1rem 0.5rem;
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--public-nav-link-color, var(--public-text-muted, rgb(71, 85, 105)));
    }
    /* On narrow screens the desktop hover mega-menu is replaced by the mobile
       sheet, but guard the width so it never forces horizontal scroll. */
    @media (max-width: 900px) {
      .public-nav-custom-cols-2,
      .public-nav-custom-cols-3,
      .public-nav-custom-wide { width: min(22rem, calc(100vw - 2rem)); grid-template-columns: 1fr; }
      .public-nav-custom-mega .public-nav-mega-col + .public-nav-mega-col {
        border-left: 0; padding-left: 0; border-top: 1px solid var(--public-divider-color, rgba(148, 163, 184, 0.18)); padding-top: 0.4rem; margin-top: 0.2rem;
      }
    }

    .public-nav-hover-group {
      position: relative;
      padding-bottom: 0.75rem;
      margin-bottom: -0.75rem;
      z-index: 15;
    }

    .public-nav-hover-group::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 0.75rem;
    }

    .public-nav-hover-group:hover,
    .public-nav-hover-group:focus-within {
      z-index: 65;
    }

    .public-nav-hover-group > .public-nav-dropdown {
      z-index: 70;
    }

    .public-nav-mega-shell {
      display: grid;
      gap: 1rem;
      padding: 1rem;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
    }

    .public-nav-mega-main,
    .public-nav-mega-side {
      display: grid;
      gap: 0.9rem;
      align-content: start;
    }

    .public-nav-section-title {
      padding: 0 0.2rem;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--public-nav-link-color, var(--public-text-muted, rgb(71, 85, 105)));
    }

    .public-nav-card-grid {
      display: grid;
      gap: 0.7rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-nav-list-grid {
      display: grid;
      gap: 0.7rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-nav-stack {
      display: grid;
      gap: 0.7rem;
    }

    .public-nav-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .public-nav-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.5rem 0.8rem;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--public-divider-color, rgba(148, 163, 184, 0.18)) 80%, transparent);
      background: color-mix(in srgb, var(--public-subcard-bg, rgba(255,255,255,0.24)) 18%, transparent);
      color: var(--public-text-muted, rgb(71, 85, 105));
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .public-nav-chip-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.35rem;
      height: 1.35rem;
      padding: 0 0.35rem;
      border-radius: 999px;
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.14) 84%, transparent);
      color: var(--public-text-strong, rgb(15, 23, 42));
      font-size: 0.68rem;
      font-weight: 800;
    }

    .public-nav-group-stack {
      display: grid;
      gap: 1rem;
    }

    .public-nav-group-block {
      display: grid;
      gap: 0.7rem;
    }

    .public-nav-card-grid-compact {
      display: grid;
      gap: 0.65rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-nav-card-mini {
      min-height: 4.8rem;
      padding: 1rem;
      border-radius: 1.15rem;
      align-items: flex-start;
    }

    .public-nav-card-mini .public-nav-card-title {
      line-height: 1.3;
    }

    .public-nav-card-mini .public-nav-card-meta {
      line-height: 1.45;
    }

    .public-nav-card-kicker {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--public-nav-link-color, var(--public-text-muted, rgb(71, 85, 105)));
    }

    .public-nav-split-list {
      display: grid;
      gap: 0.65rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-nav-category-list {
      display: grid;
      gap: 0.65rem;
    }

    .public-nav-category-card {
      min-height: 4rem;
      padding: 0.85rem 0.95rem;
      border-radius: 1.1rem;
    }

    .public-nav-card {
      min-height: 5.4rem;
      height: 100%;
      align-items: flex-start;
      padding: 1rem 1rem 0.95rem;
      border-radius: 1.35rem;
    }

    .public-nav-card-compact {
      min-height: 4.6rem;
      justify-content: flex-start;
      align-items: center;
      padding: 0.95rem 1rem;
    }

    .public-nav-card-copy {
      display: grid;
      gap: 0.2rem;
      min-width: 0;
    }

    .public-nav-card-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: inherit;
      line-height: 1.25;
    }

    .public-nav-card-meta {
      font-size: 0.78rem;
      color: var(--public-nav-link-color, var(--public-text-muted, rgb(71, 85, 105)));
      line-height: 1.35;
    }

    .public-nav-app-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border-radius: 0.8rem;
      border: 1px solid color-mix(in srgb, var(--public-divider-color, rgba(148, 163, 184, 0.18)) 72%, transparent);
      background: color-mix(in srgb, var(--public-subcard-bg, rgba(255,255,255,0.18)) 22%, transparent);
      color: var(--public-text-strong, rgb(15, 23, 42));
      flex-shrink: 0;
    }

    .public-nav-app-name {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      white-space: normal;
      line-height: 1.3;
      color: var(--public-text-strong, rgb(15, 23, 42));
    }

    .public-nav-account-panel {
      border: 1px solid color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.20) 72%, var(--public-panel-border, rgba(148, 163, 184, 0.18)));
      background: linear-gradient(180deg, color-mix(in srgb, var(--public-panel-bg, rgba(255,255,255,0.97)) 95%, white 5%), color-mix(in srgb, var(--public-panel-bg, rgba(255,255,255,0.97)) 84%, rgba(var(--theme-primary-rgb), 0.06) 16%));
      padding: 1rem;
      border-radius: 1.45rem;
    }

    .public-nav-account-actions {
      display: grid;
      gap: 0.7rem;
      grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
      grid-auto-rows: 1fr;
      align-items: stretch;
    }

    .public-nav-action-row {
      display: grid;
      gap: 0.7rem;
    }

    .public-nav-cta > .public-nav-dropdown-item:hover {
      background: var(--public-nav-link-hover-bg, rgba(255, 255, 255, 0.08));
      color: var(--public-nav-link-hover-color, var(--theme-accent, var(--theme-primary, rgb(15, 23, 42))));
    }

    .public-nav-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.44rem 0.68rem;
      border-radius: 999px;
      background: transparent;
      border: 0;
      color: var(--public-nav-link-color, var(--public-text-muted, rgb(71, 85, 105)));
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      backdrop-filter: none;
    }

    .public-nav-menu {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.7rem;
      height: 2.7rem;
      border-radius: 0.9rem;
      border: 0;
      background: transparent;
      color: var(--public-control-text, rgb(51, 65, 85));
      box-shadow: none;
      backdrop-filter: none;
    }

    .public-nav-menu:hover {
      background: var(--public-nav-link-hover-bg, rgba(255, 255, 255, 0.08));
    }

    .public-nav-sections-menu {
      display: none;
    }

    .public-nav-sections-trigger {
      min-height: 2.18rem;
      padding: 0.42rem 0.72rem;
      border-radius: 0.78rem;
      border: 1px solid color-mix(in srgb, var(--public-divider-color, rgba(148, 163, 184, 0.18)) 56%, transparent);
      background: color-mix(in srgb, var(--public-subcard-bg, rgba(255, 255, 255, 0.2)) 22%, transparent);
    }

    .public-nav-sections-trigger:hover {
      transform: none;
      background: var(--public-nav-link-hover-bg, rgba(255, 255, 255, 0.72));
    }

    .public-nav-sections-dropdown {
      width: min(22rem, calc(100vw - 1.25rem));
    }

    .public-nav-sections-grid {
      display: grid;
      gap: 0.45rem;
      max-height: min(68vh, 31rem);
      overflow-y: auto;
      padding-right: 0.12rem;
    }

    .public-nav-sections-block {
      display: grid;
      gap: 0.34rem;
      padding: 0.18rem;
      border-radius: 0.82rem;
      border: 1px solid color-mix(in srgb, var(--public-divider-color, rgba(148, 163, 184, 0.18)) 70%, transparent);
      background: color-mix(in srgb, var(--public-subcard-bg, rgba(255, 255, 255, 0.22)) 22%, transparent);
    }

    .public-nav-sections-heading {
      min-height: 2.1rem;
      padding: 0.46rem 0.58rem;
      border-radius: 0.72rem;
      font-weight: 700;
    }

    .public-nav-sections-children {
      display: grid;
      gap: 0.22rem;
      padding-left: 0.58rem;
      border-left: 1px solid color-mix(in srgb, var(--public-divider-color, rgba(148, 163, 184, 0.16)) 72%, transparent);
    }

    .public-nav-sections-child {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.32rem;
      min-height: 1.88rem;
      padding: 0.34rem 0.5rem;
      border-radius: 0.6rem;
      color: var(--public-text-muted, rgb(71, 85, 105));
      font-size: 0.78rem;
      font-weight: 600;
      transition: background-color 160ms ease, color 160ms ease;
    }

    body.nav-size-compact .public-nav-wrap {
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
    }

    body.nav-size-compact .public-nav-shell {
      min-height: 3.34rem;
      padding: 0.42rem 0.56rem 0.42rem 0.68rem;
      border-radius: 1.02rem;
      gap: 0.48rem;
    }

    body.nav-size-compact .public-brand-logo {
      height: 2.14rem;
      max-width: 6.9rem;
    }

    body.nav-size-compact .public-brand-mark {
      width: 2.14rem;
      height: 2.14rem;
      border-radius: 0.72rem;
    }

    body.nav-size-compact .public-brand-name {
      font-size: 0.9rem;
    }

    body.nav-size-compact .public-brand-meta {
      font-size: 0.62rem;
      letter-spacing: 0.1em;
    }

    body.nav-size-compact .public-nav-link {
      min-height: 1.96rem;
      padding: 0.38rem 0.58rem;
      border-radius: 0.64rem;
      font-size: 0.8rem;
    }

    body.nav-size-compact .public-nav-trigger {
      min-height: 2.46rem;
      padding: 0.42rem 0.56rem;
      border-radius: 0.84rem;
    }

    body.nav-size-compact .public-nav-sections-trigger {
      min-height: 2.02rem;
      padding: 0.36rem 0.62rem;
      font-size: 0.8rem;
      border-radius: 0.66rem;
    }

    .public-nav-sections-child:hover {
      color: var(--public-text-strong, rgb(15, 23, 42));
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.11) 66%, rgba(255, 255, 255, 0.7) 34%);
    }

    body.nav-size-comfortable .public-nav-wrap {
      padding-top: 0.58rem;
      padding-bottom: 0.58rem;
    }

    body.nav-size-comfortable .public-nav-shell {
      min-height: 4.2rem;
      padding: 0.7rem 0.9rem 0.7rem 0.98rem;
    }

    body.nav-size-comfortable .public-brand-logo {
      height: 2.95rem;
      max-width: 9.2rem;
    }

    body.nav-size-comfortable .public-brand-mark {
      width: 2.95rem;
      height: 2.95rem;
    }

    body.nav-size-comfortable .public-nav-link {
      min-height: 2.5rem;
      padding: 0.6rem 0.9rem;
      font-size: 0.94rem;
    }

    body.nav-size-comfortable .public-nav-trigger {
      min-height: 3.16rem;
      padding: 0.6rem 0.82rem;
    }

    body.nav-size-spacious .public-nav-wrap {
      padding-top: 0.92rem;
      padding-bottom: 0.92rem;
    }

    body.nav-size-spacious .public-nav-shell {
      min-height: 5.22rem;
      padding: 0.96rem 1.2rem 0.96rem 1.3rem;
      border-radius: 1.7rem;
    }

    body.nav-size-spacious .public-brand-logo {
      height: 3.64rem;
      max-width: 11rem;
    }

    body.nav-size-spacious .public-brand-mark {
      width: 3.64rem;
      height: 3.64rem;
      border-radius: 1.18rem;
    }

    body.nav-size-spacious .public-brand-name {
      font-size: 1.22rem;
    }

    body.nav-size-spacious .public-brand-meta {
      font-size: 0.8rem;
    }

    body.nav-size-spacious .public-nav-link {
      min-height: 3rem;
      padding: 0.78rem 1.14rem;
      font-size: 1.02rem;
    }

    body.nav-size-spacious .public-nav-trigger {
      min-height: 3.84rem;
      padding: 0.82rem 1.08rem;
      border-radius: 1.34rem;
    }

    body.nav-size-spacious .public-nav-sections-trigger {
      min-height: 2.42rem;
      padding: 0.52rem 0.84rem;
      font-size: 0.9rem;
    }

    body.nav-size-compact .public-nav-mega {
      width: min(40rem, calc(100vw - 1.25rem));
      border-radius: 1.45rem;
    }

    body.nav-size-compact .public-nav-mega-wide {
      width: min(54rem, calc(100vw - 1.25rem));
    }

    body.nav-size-compact .public-nav-sections-dropdown {
      width: min(20rem, calc(100vw - 1rem));
    }

    body.nav-size-compact .public-nav-mega-shell {
      gap: 0.62rem;
      padding: 0.68rem;
    }

    body.nav-size-compact .public-nav-mega-main,
    body.nav-size-compact .public-nav-mega-side,
    body.nav-size-compact .public-nav-group-stack {
      gap: 0.62rem;
    }

    body.nav-size-compact .public-nav-section-title {
      font-size: 0.62rem;
      letter-spacing: 0.15em;
    }

    body.nav-size-compact .public-nav-card-grid,
    body.nav-size-compact .public-nav-list-grid,
    body.nav-size-compact .public-nav-card-grid-compact,
    body.nav-size-compact .public-nav-split-list,
    body.nav-size-compact .public-nav-action-row {
      gap: 0.5rem;
    }

    body.nav-size-compact .public-nav-card {
      min-height: 4.5rem;
      padding: 0.76rem 0.8rem;
      border-radius: 1.02rem;
    }

    body.nav-size-compact .public-nav-card-mini {
      min-height: 4.15rem;
      padding: 0.78rem;
      border-radius: 0.96rem;
    }

    body.nav-size-compact .public-nav-card-compact,
    body.nav-size-compact .public-nav-category-card {
      min-height: 3.9rem;
      padding: 0.68rem 0.76rem;
      border-radius: 0.92rem;
    }

    body.nav-size-compact .public-nav-card-title,
    body.nav-size-compact .public-nav-app-name {
      font-size: 0.84rem;
    }

    body.nav-size-compact .public-nav-card-meta {
      font-size: 0.72rem;
    }

    body.nav-size-compact .public-nav-chip {
      padding: 0.4rem 0.62rem;
      font-size: 0.68rem;
    }

    body.nav-size-compact .public-nav-chip-count {
      min-width: 1.16rem;
      height: 1.16rem;
      font-size: 0.62rem;
    }

    body.nav-size-compact .public-nav-account-panel {
      padding: 0.72rem;
      border-radius: 1.12rem;
    }

    body.nav-size-comfortable .public-nav-mega {
      width: min(44rem, calc(100vw - 1.5rem));
      border-radius: 1.75rem;
    }

    body.nav-size-comfortable .public-nav-mega-wide {
      width: min(60rem, calc(100vw - 1.5rem));
    }

    body.nav-size-comfortable .public-nav-sections-dropdown {
      width: min(21.5rem, calc(100vw - 1.1rem));
    }

    body.nav-size-comfortable .public-nav-mega-shell {
      gap: 0.9rem;
      padding: 0.92rem;
    }

    body.nav-size-comfortable .public-nav-card {
      min-height: 5.08rem;
      padding: 0.9rem 0.94rem;
    }

    body.nav-size-comfortable .public-nav-card-mini {
      min-height: 4.55rem;
      padding: 0.92rem;
    }

    body.nav-size-comfortable .public-nav-account-panel {
      padding: 0.9rem;
    }

    body.nav-size-spacious .public-nav-mega {
      width: min(50rem, calc(100vw - 2rem));
      border-radius: 2rem;
    }

    body.nav-size-spacious .public-nav-mega-wide {
      width: min(68rem, calc(100vw - 2rem));
    }

    body.nav-size-spacious .public-nav-sections-dropdown {
      width: min(24.5rem, calc(100vw - 1.5rem));
    }

    body.nav-size-spacious .public-nav-mega-shell {
      gap: 1.15rem;
      padding: 1.2rem;
    }

    body.nav-size-spacious .public-nav-mega-main,
    body.nav-size-spacious .public-nav-mega-side,
    body.nav-size-spacious .public-nav-group-stack {
      gap: 1rem;
    }

    body.nav-size-spacious .public-nav-section-title {
      font-size: 0.72rem;
      letter-spacing: 0.2em;
    }

    body.nav-size-spacious .public-nav-card-grid,
    body.nav-size-spacious .public-nav-list-grid,
    body.nav-size-spacious .public-nav-card-grid-compact,
    body.nav-size-spacious .public-nav-split-list,
    body.nav-size-spacious .public-nav-action-row {
      gap: 0.85rem;
    }

    body.nav-size-spacious .public-nav-card {
      min-height: 6rem;
      padding: 1.18rem 1.2rem;
      border-radius: 1.52rem;
    }

    body.nav-size-spacious .public-nav-card-mini {
      min-height: 5.25rem;
      padding: 1.16rem;
      border-radius: 1.26rem;
    }

    body.nav-size-spacious .public-nav-card-compact,
    body.nav-size-spacious .public-nav-category-card {
      min-height: 4.85rem;
      padding: 1rem 1.1rem;
      border-radius: 1.22rem;
    }

    body.nav-size-spacious .public-nav-card-title,
    body.nav-size-spacious .public-nav-app-name {
      font-size: 1rem;
    }

    body.nav-size-spacious .public-nav-card-meta {
      font-size: 0.82rem;
    }

    body.nav-size-spacious .public-nav-chip {
      padding: 0.56rem 0.92rem;
      font-size: 0.78rem;
    }

    body.nav-size-spacious .public-nav-chip-count {
      min-width: 1.5rem;
      height: 1.5rem;
      font-size: 0.72rem;
    }

    body.nav-size-spacious .public-nav-account-panel {
      padding: 1.12rem;
      border-radius: 1.62rem;
    }

    @media (min-width: 768px) {
      body.nav-layout-vertical .public-nav-shell {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: 4rem;
        gap: 0.65rem;
        width: 100%;
        max-width: 100%;
      }

      body.nav-layout-vertical .public-nav-shell > a:first-child {
        flex: 0 0 auto;
      }

      body.nav-layout-vertical .public-nav-shell > .hidden.md\:flex {
        min-width: 0;
        flex: 1 1 0%;
        justify-content: flex-end;
        gap: 0.3rem;
      }

      body.nav-layout-vertical .public-nav-links {
        padding: 0;
        gap: 0;
      }

      body.nav-layout-vertical .public-nav-cta {
        margin-left: 0;
        padding-left: 0.42rem;
      }

      body.nav-layout-vertical .public-nav-links > * {
        display: none;
      }

      body.nav-layout-vertical .public-nav-links > .public-nav-sections-menu {
        display: inline-flex;
      }

      body.nav-layout-vertical .public-nav-sections-menu {
        margin-left: auto;
      }
    }

    .public-nav-dropdown,
    .public-mobile-sheet,
    .public-mobile-panel,
    .public-footer-shell {
      border: 1px solid var(--public-panel-border, rgba(148, 163, 184, 0.16));
      background: var(--public-nav-dropdown-surface, color-mix(in srgb, var(--ui-surface-panel-bg, var(--public-panel-bg, rgba(255, 255, 255, 0.96))) 90%, transparent));
      color: var(--ui-color-text-primary, var(--public-text-strong, rgb(15, 23, 42)));
      backdrop-filter: blur(24px) saturate(150%);
    }

    .public-footer-shell {
      background: var(--public-footer-bg, color-mix(in srgb, var(--ui-surface-panel-bg, var(--public-panel-bg, rgba(255, 255, 255, 0.96))) 92%, transparent));
      color: var(--public-footer-text, var(--ui-color-text-muted, var(--public-text-muted, rgb(71, 85, 105))));
    }

    .public-footer-brand,
    .public-footer-heading {
      color: var(--public-footer-heading, var(--ui-color-text-primary, var(--public-text-strong, rgb(15, 23, 42))));
    }

    .public-footer-copy,
    .public-footer-meta,
    .public-footer-link,
    .public-footer-sublink {
      color: var(--public-footer-text, var(--ui-color-text-muted, var(--public-text-muted, rgb(71, 85, 105))));
    }

    .public-footer-link,
    .public-footer-sublink,
    .public-footer-meta-link {
      transition: color 180ms ease;
    }

    .public-footer-link:hover,
    .public-footer-sublink:hover,
    .public-footer-meta-link:hover {
      color: var(--public-footer-heading, var(--ui-color-text-primary, var(--public-text-strong, rgb(15, 23, 42))));
    }

    .public-footer-subnav {
      margin-top: 0.75rem;
      padding-left: 0.9rem;
      border-left: 1px solid var(--public-divider-color, rgba(148, 163, 184, 0.18));
    }

    .public-footer-shell .border-gray-100 {
      border-color: var(--public-divider-color, rgba(148, 163, 184, 0.18)) !important;
    }

    body.preset-ui-v2 .public-nav-shell {
      background: var(--public-nav-bg) !important;
      border-color: var(--public-nav-border) !important;
      border-width: 1.5px !important;
      box-shadow:
        0 8px 32px rgba(var(--theme-primary-rgb), 0.24),
        0 2px 8px rgba(var(--theme-primary-rgb), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
    }

    body.preset-ui-v2:is(.theme-dark, .ui-mode-dark, .preset-mode-dark) .public-nav-shell {
      background: var(--public-nav-dropdown-surface, var(--public-panel-bg, rgba(10, 16, 26, 0.96))) !important;
      border-color: var(--public-panel-border, rgba(148, 163, 184, 0.18)) !important;
    }

    /* Light-mode mobile shell should inherit preset nav tone instead of white fallback. */
    body.preset-ui-v2:not(.theme-dark):not(.ui-mode-dark):not(.preset-mode-dark) .public-mobile-shell,
    body.preset-ui-v2:not(.theme-dark):not(.ui-mode-dark):not(.preset-mode-dark) .public-mobile-sheet,
    body.preset-ui-v2:not(.theme-dark):not(.ui-mode-dark):not(.preset-mode-dark) .public-mobile-panel,
    body.preset-ui-v2:not(.theme-dark):not(.ui-mode-dark):not(.preset-mode-dark) .public-nav-dropdown {
      background: var(--public-nav-bg, var(--public-panel-bg, rgba(255, 255, 255, 0.96))) !important;
      border-color: var(--public-nav-border, transparent) !important;
      backdrop-filter: blur(24px) saturate(150%) !important;
    }

    /* Dark-mode mobile shell should follow dark dropdown surface tokens for contrast. */
    body.preset-ui-v2:is(.theme-dark, .ui-mode-dark, .preset-mode-dark) .public-mobile-shell,
    body.preset-ui-v2:is(.theme-dark, .ui-mode-dark, .preset-mode-dark) .public-mobile-sheet,
    body.preset-ui-v2:is(.theme-dark, .ui-mode-dark, .preset-mode-dark) .public-mobile-panel,
    body.preset-ui-v2:is(.theme-dark, .ui-mode-dark, .preset-mode-dark) .public-nav-dropdown {
      background: var(--public-nav-dropdown-surface, var(--public-panel-bg, rgba(10, 16, 26, 0.96))) !important;
      border-color: var(--public-nav-border, var(--public-panel-border, rgba(148, 163, 184, 0.16))) !important;
      backdrop-filter: blur(24px) saturate(150%) !important;
    }

    body.preset-ui-v1 .public-mobile-shell,
    body.preset-ui-v1 .public-mobile-sheet,
    body.preset-ui-v1 .public-mobile-panel {
      background: var(--public-nav-bg) !important;
      border-color: var(--public-nav-border, transparent) !important;
    }

    body.preset-ui-v1 .public-nav-shell {
      background: var(--public-nav-bg) !important;
      border-color: var(--public-nav-border) !important;
      border-width: 1px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }

    body.preset-ui-v2 .public-footer-shell {
      background: var(--public-footer-bg) !important;
      border-color: rgba(var(--theme-primary-rgb), 0.22) !important;
      border-top-width: 1.5px !important;
    }

    body.preset-ui-v1 .public-footer-shell {
      background: var(--public-footer-bg) !important;
      border-color: var(--public-divider-color, rgba(148, 163, 184, 0.18)) !important;
    }

    .public-nav-dropdown-item,
    .public-mobile-item,
    .public-mobile-pill {
      border: 1px solid var(--public-control-border, rgba(148, 163, 184, 0.18));
      background: var(--public-nav-dropdown-item-surface, color-mix(in srgb, var(--public-subcard-bg, rgba(255, 255, 255, 0.92)) 10%, transparent));
      color: var(--public-control-text, var(--public-text-muted, rgb(71, 85, 105)));
      backdrop-filter: blur(14px) saturate(135%);
    }

    .public-nav-card-copy {
      min-width: 0;
    }

    .public-nav-card-title {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .public-nav-account-actions .public-nav-dropdown-item,
    .public-nav-action-row .public-nav-dropdown-item,
    .public-mobile-account-actions .public-mobile-item,
    .public-mobile-account-actions .public-mobile-pill {
      border-color: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.28) 70%, var(--public-control-border, rgba(148, 163, 184, 0.18)) 30%);
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.14) 12%, transparent 88%);
      color: color-mix(in srgb, var(--public-text-strong, rgb(15, 23, 42)) 76%, var(--theme-primary) 24%);
      box-shadow: 0 10px 24px rgba(var(--theme-primary-rgb), 0.10);
    }

    .public-nav-account-actions .public-nav-dropdown-item .public-nav-app-icon,
    .public-nav-action-row .public-nav-dropdown-item i,
    .public-mobile-account-actions .public-mobile-item i,
    .public-mobile-account-actions .public-mobile-pill i {
      color: color-mix(in srgb, var(--theme-primary) 80%, var(--public-text-strong, rgb(15, 23, 42)) 20%) !important;
    }

    .public-nav-account-actions .public-nav-dropdown-item:hover,
    .public-nav-action-row .public-nav-dropdown-item:hover,
    .public-mobile-account-actions .public-mobile-item:hover,
    .public-mobile-account-actions .public-mobile-pill:hover {
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.22) 14%, transparent 86%);
      color: color-mix(in srgb, var(--public-text-strong, rgb(15, 23, 42)) 68%, var(--theme-primary) 32%);
      border-color: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.38) 72%, var(--public-control-border, rgba(148, 163, 184, 0.18)) 28%);
    }

    .public-nav-dropdown-item:hover,
    .public-mobile-item:hover,
    .public-mobile-pill:hover {
      background: var(--public-nav-dropdown-item-hover-surface, color-mix(in srgb, var(--public-control-hover-bg, rgba(255, 255, 255, 0.98)) 12%, transparent));
      color: var(--public-text-strong, rgb(15, 23, 42));
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-shell .text-slate-400,
    .public-nav-dropdown .text-slate-400,
    .public-mobile-sheet .text-slate-400,
    .public-mobile-panel .text-slate-400 {
      color: var(--public-text-soft, rgb(148, 163, 184)) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-shell .text-slate-300,
    .public-nav-dropdown .text-slate-300,
    .public-mobile-sheet .text-slate-300,
    .public-mobile-panel .text-slate-300 {
      color: color-mix(in srgb, var(--public-text-soft, rgb(148, 163, 184)) 78%, transparent) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-shell .text-slate-900,
    .public-nav-dropdown .text-slate-900,
    .public-mobile-sheet .text-slate-900,
    .public-mobile-panel .text-slate-900 {
      color: var(--public-text-strong, rgb(15, 23, 42)) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-dropdown .border-slate-100,
    .public-mobile-sheet .border-slate-100,
    .public-mobile-panel .border-slate-100 {
      border-color: var(--public-divider-color, rgba(148, 163, 184, 0.18)) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-dropdown .bg-slate-100,
    .public-mobile-sheet .bg-slate-100,
    .public-mobile-panel .bg-slate-100 {
      background: color-mix(in srgb, var(--public-subcard-bg, rgba(255, 255, 255, 0.92)) 86%, transparent) !important;
      color: var(--public-text-soft, rgb(100, 116, 139)) !important;
    }

    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-nav-links {
      background: transparent;
    }

    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark).public-site-body main :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-slate-100, .bg-neutral-50, .bg-zinc-50, .bg-stone-50, [class*='bg-white/'], [class*='bg-gray-50/'], [class*='bg-slate-50/']) {
      background: color-mix(in srgb, var(--public-panel-bg, rgba(255, 255, 255, 0.96)) 92%, transparent) !important;
      border-color: var(--public-panel-border, var(--public-divider-color, rgba(148, 163, 184, 0.18))) !important;
    }

    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-nav-wrap {
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-nav-dropdown,
    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-mobile-sheet,
    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-mobile-panel {
      background: var(--public-nav-dropdown-surface, color-mix(in srgb, var(--public-panel-bg, rgba(255, 255, 255, 0.96)) 10%, transparent));
    }

    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-footer-shell {
      background: var(--public-footer-bg, color-mix(in srgb, var(--public-panel-bg, rgba(255, 255, 255, 0.96)) 84%, rgba(var(--theme-secondary-rgb), 0.12) 16%));
    }

    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-nav-dropdown-item,
    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-mobile-item,
    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-mobile-pill {
      background: var(--public-nav-dropdown-item-surface, color-mix(in srgb, var(--public-subcard-bg, rgba(255, 255, 255, 0.92)) 10%, transparent));
    }

    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-nav-dropdown-item:hover {
      background: color-mix(in srgb, var(--public-control-hover-bg, rgba(255, 255, 255, 0.98)) 88%, rgba(var(--theme-primary-rgb), 0.08) 12%);
      border-color: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.24) 68%, var(--public-control-border, rgba(148, 163, 184, 0.18)) 32%);
      color: var(--public-text-strong, rgb(15, 23, 42));
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(var(--theme-primary-rgb), 0.06);
    }

    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-nav-dropdown-item:hover .public-nav-app-icon,
    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-nav-dropdown-item:hover .public-nav-card-title,
    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-nav-dropdown-item:hover .public-nav-app-name {
      color: var(--public-text-strong, rgb(15, 23, 42));
    }

    body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-nav-dropdown-item:hover .public-nav-app-icon {
      border-color: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.22) 70%, var(--public-control-border, rgba(148, 163, 184, 0.18)) 30%);
      background: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.10) 72%, white 28%);
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-brand-name {
      color: var(--public-text-strong, rgb(226, 232, 240));
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-shell,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-mobile-sheet,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-mobile-panel,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-dropdown {
      --public-nav-bg: color-mix(in srgb, rgba(8, 12, 20, 0.94) 94%, rgba(var(--theme-primary-rgb), 0.06) 6%);
      --public-nav-border: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.18) 56%, rgba(96, 165, 250, 0.16) 44%);
      --public-nav-links-bg: color-mix(in srgb, rgba(12, 18, 28, 0.94) 92%, rgba(var(--theme-primary-rgb), 0.06) 8%);
      --public-panel-bg: rgba(10, 16, 26, 0.98);
      --public-subcard-bg: rgba(14, 22, 34, 0.96);
      background: var(--public-nav-bg);
      border-color: var(--public-nav-border);
      --ui-nav-text: rgba(226, 232, 240, 0.94);
      --ui-nav-text-hover: var(--theme-accent, var(--public-text-strong, #f8fafc));
      --ui-nav-text-active: var(--theme-accent, var(--public-text-strong, #f8fafc));
      --public-nav-link-color: var(--ui-nav-text);
      --public-nav-link-hover-color: var(--ui-nav-text-hover);
      --public-nav-link-hover-bg: color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.18) 76%, var(--public-nav-links-bg, rgba(2, 6, 23, 0.92)) 24%);
      --public-nav-dropdown-surface: rgba(10, 16, 26, 0.98);
      --public-nav-dropdown-item-surface: rgba(14, 22, 34, 0.96);
      --public-nav-dropdown-item-hover-surface: color-mix(in srgb, var(--public-nav-link-hover-bg, rgba(30, 41, 59, 0.95)) 90%, rgba(2, 6, 23, 0.98) 10%);
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-trigger {
      background: rgba(15, 23, 42, 0.88);
      border-color: rgba(148, 163, 184, 0.24);
      color: var(--public-text-strong, #f8fafc);
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-mobile-panel .border-b.border-slate-100,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-dropdown .border-b.border-slate-100,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-mobile-panel .border.border-slate-200 {
      background: linear-gradient(180deg, rgba(12, 18, 28, 0.98), rgba(12, 18, 28, 0.94)) !important;
      border-color: var(--public-divider-color, rgba(148, 163, 184, 0.16)) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-mobile-account-actions .bg-indigo-50,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-mobile-account-actions .text-indigo-700 {
      background: var(--public-nav-dropdown-item-surface, rgba(15, 23, 42, 0.92)) !important;
      color: var(--public-text-strong, #f8fafc) !important;
      border: 1px solid var(--public-control-border, rgba(148, 163, 184, 0.18)) !important;
    }

    body.public-site-body.preset-slug-obsidian_prime .public-nav-shell,
    body.public-site-body.preset-slug-obsidian-prime .public-nav-shell,
    body.public-site-body.homepage-preset-obsidian_prime .public-nav-shell,
    body.public-site-body.homepage-preset-obsidian-prime .public-nav-shell {
      background: rgba(13, 17, 23, 0.98);
      border: 1px solid rgba(48, 54, 61, 0.75);
      backdrop-filter: blur(16px) saturate(120%);
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-dropdown {
      background: var(--public-nav-dropdown-surface, color-mix(in srgb, var(--public-panel-bg, rgba(2, 6, 23, 0.96)) 10%, transparent));
      color: var(--public-text-strong, rgb(248, 250, 252));
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-dropdown-item {
      background: var(--public-nav-dropdown-item-surface, color-mix(in srgb, var(--public-subcard-bg, rgba(8, 12, 24, 0.92)) 10%, transparent));
      border-color: var(--public-control-border, rgba(96, 165, 250, 0.16));
      color: var(--public-nav-link-color, var(--public-control-text, rgba(248, 250, 252, 0.96)));
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-dropdown-item:hover {
      background: var(--public-nav-dropdown-item-hover-surface, color-mix(in srgb, var(--public-control-hover-bg, rgba(18, 33, 66, 0.96)) 12%, transparent));
      color: var(--public-nav-link-hover-color, var(--theme-accent, var(--public-text-strong, rgb(248, 250, 252))));
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-dropdown .text-slate-500,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-dropdown .text-slate-600,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-dropdown .text-slate-700 {
      color: var(--public-nav-link-color, var(--public-text-muted, rgba(226, 232, 240, 0.90))) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-card-title,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-trigger-title,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-app-name {
      color: var(--public-text-strong, #f8fafc);
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-card-meta,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-section-title,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-trigger-label {
      color: var(--public-nav-link-color, rgba(226, 232, 240, 0.94)) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-app-icon {
      color: #f8fafc;
      border-color: rgba(148, 163, 184, 0.20);
      background: rgba(255, 255, 255, 0.05);
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-brand-meta,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-link,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-text-link,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-trigger-label,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-trigger-title,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-user-label,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-icon-link,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-badge,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-menu,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-cta > .public-nav-dropdown-item {
      color: var(--public-nav-link-color, rgba(226, 232, 240, 0.94)) !important;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-link:hover,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-text-link:hover,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-trigger:hover,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-icon-link:hover,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-cta > .public-nav-dropdown-item:hover,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-menu:hover {
      color: var(--public-text-strong, rgb(226, 232, 240));
      background: color-mix(in srgb, var(--public-subcard-bg, rgba(15, 23, 42, 0.24)) 34%, transparent);
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-links {
      background: transparent;
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-cta,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-nav-user-rail {
      border-color: var(--public-divider-color, rgba(96, 165, 250, 0.12));
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-shell {
      --public-footer-bg: color-mix(in srgb, var(--ui-surface-panel-bg, var(--public-panel-bg, rgba(2, 6, 23, 0.94))) 92%, transparent);
      --public-footer-text: var(--ui-color-text-muted, var(--public-text-muted, rgba(226, 232, 240, 0.86)));
      --public-footer-heading: var(--ui-color-text-primary, var(--public-text-strong, #f8fafc));
      background: var(--public-footer-bg);
      border-color: var(--public-divider-color, rgba(96, 165, 250, 0.12));
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-brand,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-heading {
      color: var(--public-text-strong, #f8fafc);
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-copy,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-meta,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-link,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-sublink,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-meta-link {
      color: var(--public-text-muted, rgba(226, 232, 240, 0.86));
    }

    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-link:hover,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-sublink:hover,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-footer-meta-link:hover {
      color: var(--public-text-strong, #f8fafc);
    }

    /* ─── Global dark-mode normalizer ─────────────────────────────────────────
       Flips hardcoded Tailwind utility classes to CSS token values when any dark
       mode signal is active. Covers all platform pages without template edits.
       Excludes img, svg, and elements with an explicit [data-no-dark] attribute.
    ──────────────────────────────────────────────────────────────────────────── */
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .bg-white:not(img):not(svg):not([data-no-dark]) {
      background-color: var(--public-card-bg, rgba(12, 18, 28, 0.96)) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) [class*='bg-white/']:not(img):not(svg):not([data-no-dark]) {
      background-color: color-mix(in srgb, var(--public-card-bg, rgba(12, 18, 28, 0.96)) 88%, transparent) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .bg-gray-50:not(img):not(svg):not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .bg-slate-50:not(img):not(svg):not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) [class*='bg-gray-50/']:not(img):not(svg):not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) [class*='bg-slate-50/']:not(img):not(svg):not([data-no-dark]) {
      background-color: var(--public-subcard-bg, rgba(16, 22, 34, 0.95)) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .bg-gray-100:not(img):not(svg):not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .bg-slate-100:not(img):not(svg):not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .bg-gray-200:not(img):not(svg):not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .bg-slate-200:not(img):not(svg):not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) [class*='bg-gray-100/']:not(img):not(svg):not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) [class*='bg-slate-100/']:not(img):not(svg):not([data-no-dark]) {
      background-color: var(--public-control-bg, rgba(4, 10, 24, 0.92)) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .border-gray-200:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .border-slate-200:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .border-gray-100:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .border-slate-100:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .border-gray-300:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .border-slate-300:not([data-no-dark]) {
      border-color: var(--public-divider-color, rgba(148, 163, 184, 0.16)) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-gray-900:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-gray-800:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-slate-900:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-slate-800:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-slate-950:not([data-no-dark]) {
      color: var(--public-text-strong, #f8fafc) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-gray-700:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-gray-600:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-slate-700:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-slate-600:not([data-no-dark]) {
      color: var(--public-text-muted, rgba(226, 232, 240, 0.86)) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-gray-500:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-slate-500:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-gray-400:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-slate-400:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-gray-300:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .text-slate-300:not([data-no-dark]) {
      color: var(--public-text-soft, rgba(203, 213, 225, 0.72)) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .shadow-lg:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .shadow-md:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .shadow-xl:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .shadow-sm:not([data-no-dark]) {
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.42), 0 1px 4px rgba(0, 0, 0, 0.28) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']):not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) select:not([data-no-dark]),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) textarea:not([data-no-dark]) {
      background-color: var(--public-input-bg, rgba(4, 10, 24, 0.90)) !important;
      border-color: var(--public-input-border, rgba(148, 163, 184, 0.20)) !important;
      color: var(--public-input-text, #f8fafc) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) input::placeholder,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) textarea::placeholder {
      color: var(--public-text-soft, rgba(203, 213, 225, 0.72)) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='color: #0f172a'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='color:#0f172a'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='color: #111827'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='color:#111827'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='color: rgb(15, 23, 42)'] {
      color: var(--public-text-strong, #f8fafc) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='color: #475569'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='color:#475569'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='color: #64748b'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='color:#64748b'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='color: rgb(71, 85, 105)'] {
      color: var(--public-text-muted, rgba(226, 232, 240, 0.86)) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='background: #fff'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='background:#fff'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='background-color: #fff'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='background-color:#fff'],
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-shell [style*='rgba(255,255,255'] {
      background: var(--public-subcard-bg, rgba(16, 22, 34, 0.95)) !important;
    }
    /* ─── /Global dark-mode normalizer ──────────────────────────────────────── */

    .public-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.6rem 0.9rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(148, 163, 184, 0.18);
      color: rgb(51, 65, 85);
      font-size: 0.8rem;
      font-weight: 700;
    }

    :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-hero-badge {
      background: var(--public-subcard-bg, rgba(16, 28, 52, 0.94));
      border-color: var(--public-divider-color, rgba(96, 165, 250, 0.12));
      color: var(--public-text-muted, rgba(226, 232, 240, 0.86));
    }

    .public-hero-badge-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
      box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.12);
    }

    .public-stage {
      position: relative;
      overflow: hidden;
      min-height: 29rem;
      border-radius: 1.75rem;
      border: 1px solid rgba(148, 163, 184, 0.16);
      background: var(--public-stage-bg, radial-gradient(circle at 25% 20%, rgba(255,255,255,0.22), transparent 18%), linear-gradient(145deg, #0f172a, #111827 48%, color-mix(in srgb, var(--theme-primary) 26%, #0f172a)));
      box-shadow: 0 32px 90px rgba(15, 23, 42, 0.24);
    }

    .public-stage-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: linear-gradient(180deg, rgba(255,255,255,0.8), transparent 88%);
      opacity: 0.22;
    }

    .public-stage-glow {
      position: absolute;
      width: 18rem;
      height: 18rem;
      border-radius: 999px;
      filter: blur(36px);
      opacity: 0.6;
      pointer-events: none;
    }

    .public-stage-glow-primary {
      top: -4rem;
      right: -2rem;
      background: rgba(var(--theme-primary-rgb), 0.45);
    }

    .public-stage-glow-secondary {
      bottom: -6rem;
      left: -3rem;
      background: rgba(var(--theme-secondary-rgb), 0.32);
    }

    .public-stage-panel {
      position: relative;
      border-radius: 1.5rem;
      border: 1px solid var(--public-stage-panel-border, rgba(255,255,255,0.12));
      background: var(--public-stage-panel-bg, rgba(255,255,255,0.08));
      backdrop-filter: blur(20px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .public-stage-label {
      font-size: 0.69rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--public-stage-label-color, rgba(255,255,255,0.74));
    }

    .public-stage-heading {
      color: var(--public-stage-heading-color, #ffffff);
    }

    .public-stage-copy {
      color: var(--public-stage-copy-color, rgba(255,255,255,0.88));
    }

    .public-stage-muted {
      color: var(--public-stage-muted-color, rgba(255,255,255,0.72));
    }

    .public-stage-chip {
      border: 1px solid var(--public-stage-chip-border, rgba(255,255,255,0.14));
      background: var(--public-stage-chip-bg, rgba(255,255,255,0.10));
      color: var(--public-stage-chip-color, rgba(255,255,255,0.82));
    }

    .public-stage-metric {
      color: var(--public-stage-metric-color, rgba(255,255,255,0.74));
    }

    .public-stage-window {
      position: absolute;
      top: 1.5rem;
      left: 1.5rem;
      right: 5.25rem;
      padding: 1rem;
    }

    .public-stage-float {
      position: absolute;
      right: 1.5rem;
      bottom: 1.5rem;
      width: min(15rem, 42%);
      padding: 1rem;
    }

    .public-stage-bar {
      height: 0.72rem;
      border-radius: 999px;
      background: rgba(255,255,255,0.15);
      overflow: hidden;
    }

    .public-stage-bar > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4));
    }

    .public-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.9rem;
      align-items: center;
    }

    .public-button,
    .public-button-secondary,
    .public-button-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      min-height: 3.25rem;
      padding: 0.85rem 1.35rem;
      border-radius: 999px;
      font-size: 0.96rem;
      font-weight: 700;
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
      backdrop-filter: blur(16px) saturate(140%);
    }

    .public-button {
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: white;
      background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 84%, white 16%), color-mix(in srgb, var(--theme-secondary) 88%, black 12%));
      box-shadow: 0 16px 32px rgba(var(--theme-primary-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .public-button-secondary {
      color: var(--public-control-text, rgb(15, 23, 42));
      border: 1px solid var(--public-control-border, rgba(148, 163, 184, 0.22));
      background: color-mix(in srgb, var(--public-control-bg, rgba(255, 255, 255, 0.92)) 82%, transparent);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .public-button-ghost {
      color: var(--public-control-text, var(--theme-primary));
      border: 1px solid color-mix(in srgb, rgba(var(--theme-primary-rgb), 0.28) 75%, var(--public-control-border, rgba(148, 163, 184, 0.18)));
      background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.14), rgba(var(--theme-secondary-rgb), 0.08));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .public-button:hover,
    .public-button-secondary:hover,
    .public-button-ghost:hover {
      transform: translateY(-1px);
    }

    .public-surface,
    .public-card {
      border-radius: 1.5rem;
      border: 1px solid var(--public-panel-border, var(--public-surface-border, rgba(148, 163, 184, 0.16)));
      background: color-mix(in srgb, var(--public-panel-bg, var(--public-surface-bg, rgba(255, 255, 255, 0.97))) 94%, white 6%);
      box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255,255,255,0.42);
      backdrop-filter: blur(14px) saturate(130%);
    }

    .public-card {
      padding: 1.5rem;
      border-color: var(--public-card-border, var(--public-panel-border, rgba(148, 163, 184, 0.16)));
      background: color-mix(in srgb, var(--public-card-bg, var(--public-panel-bg, rgba(255, 255, 255, 0.97))) 95%, white 5%);
      transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease;
    }

    /* Dark-mode card surfaces must NOT mix in white — that's what produced
       the bleached process/use_cases cards on freshly-applied packs. The
       inset white highlight and box-shadow also have to go in dark, where
       they read as a visual glitch over the dark page. Section-card-bg's
       fallback chain ends in #ffffff, so we also reassert a sensible dark
       fallback here so variants that read --section-card-bg directly (e.g.
       process/stepper, use_cases/scroller) don't fall back to white when
       no theme preset is loaded on the org. */
    /* Pack-applied tenants carry the legacy section color defaults
       (#ffffff bg, #3b82f6 primary) on every HomePageSection. Some
       SiteDesignPreset CSS sets --public-card-bg to a light value at
       body-level — which beats the .public-shell override below, leaving
       process/stepper and use_cases/scroller painted with bleached cards
       in dark mode. Force a hardcoded dark background here so the variable
       chain can't put a light value back in. */
    /* Use the same color-mix formula that site.css line 787 emits for
       preset-mode-dark, so process/stepper + use_cases/scroller pick up
       the same subtle theme tint other cards have. A pure rgba(12,18,28)
       reads as a colder, bluer card than its neighbours. */
    :is(html.theme-dark, html.ui-mode-dark) :is(.public-surface, .public-card),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark, body.homepage-preset-dark, body.homepage-page.homepage-preset-dark) :is(.public-surface, .public-card) {
      background: color-mix(in srgb, rgba(12, 18, 28, 0.96) 96%, rgba(var(--theme-primary-rgb, 14, 26, 51), 0.04) 4%) !important;
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.30) !important;
    }

    /* About-page sections render as e.g.
         <section class="about-section-shell py-16 mx-4 bg-white …">
       — the Tailwind bg-white / bg-gray-50 classes are *on the same
       element*, so a `.about-section-shell { background: dark }` rule
       loses the cascade to bg-white's `background-color: rgb(255 255 255)`.
       The previous version of this block targeted `.about-section-shell
       :is(.bg-white, …)` (a *descendant* selector), which never matched
       the section itself — only the inner team/value cards. Result:
       outer panel stayed bright white in dark mode.
       Fix: match both — the section itself via compound classes, AND
       the inner cards via descendant. Two rule pairs. */
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark) .about-section-shell {
      color: var(--public-text-strong, #e2e8f0);
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark) :is(
      .about-section-shell.bg-white,
      .about-section-shell.bg-gray-50,
      .about-section-shell.bg-gray-100,
      section.about-section-shell
    ) {
      background-color: var(--public-card-bg, rgba(12, 18, 28, 0.96)) !important;
      background-image: none !important;
      border-color: var(--public-card-border, rgba(148, 163, 184, 0.18)) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark) .about-section-shell :is(.text-gray-900, .text-gray-800, .text-gray-700) {
      color: var(--public-text-strong, #e2e8f0) !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark) .about-section-shell :is(.text-gray-600, .text-gray-500, .text-gray-400) {
      color: var(--public-text-muted, #cbd5e1) !important;
    }
    /* Inner value / milestone / team cards — descendants of about-section-shell. */
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark) .about-section-shell :is(.bg-gradient-to-br, .from-gray-50, .to-gray-100, .bg-white, .bg-gray-50, .bg-gray-100) {
      background-color: var(--public-subcard-bg, rgba(16, 22, 34, 0.95)) !important;
      background-image: none !important;
    }
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark) .about-section-shell :is(.border-gray-100, .border-gray-200, .border-gray-300) {
      border-color: var(--public-card-border, rgba(148, 163, 184, 0.18)) !important;
    }
    /* Override the inline --section-card-bg / --section-panel-bg that
       section_css_vars writes on each homepage-section-shell wrapper.
       Those are what stepper/scroller read via --stp-card / --scu-card. */
    :is(html.theme-dark, html.ui-mode-dark) .homepage-section-shell,
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark, body.homepage-preset-dark, body.homepage-page.homepage-preset-dark) .homepage-section-shell {
      --section-card-bg: color-mix(in srgb, rgba(12, 18, 28, 0.96) 96%, rgba(var(--theme-primary-rgb, 14, 26, 51), 0.04) 4%) !important;
      --section-panel-bg: color-mix(in srgb, rgba(8, 12, 20, 0.94) 96%, rgba(var(--theme-primary-rgb, 14, 26, 51), 0.04) 4%) !important;
      --section-subcard-bg: color-mix(in srgb, rgba(16, 22, 34, 0.95) 96%, rgba(var(--theme-primary-rgb, 14, 26, 51), 0.04) 4%) !important;
    }
    :is(html.theme-dark, html.ui-mode-dark),
    :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark, body.preset-preview-mode-dark, body.homepage-preset-dark, body.homepage-page.homepage-preset-dark) {
      --section-card-bg-fallback: rgba(12, 18, 28, 0.96);
    }

    .public-card:hover {
      transform: translateY(-4px) scale(1.004);
      border-color: rgba(var(--theme-primary-rgb), 0.26);
      box-shadow: 0 24px 46px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(var(--theme-primary-rgb), 0.06);
    }

    .public-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.65rem 0.95rem;
      border-radius: 999px;
      border: 1px solid var(--public-control-border, rgba(148, 163, 184, 0.18));
      background: var(--public-subcard-bg, rgba(255, 255, 255, 0.92));
      color: var(--public-text-muted, rgb(71, 85, 105));
      font-size: 0.84rem;
      font-weight: 600;
    }

    .public-stat {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .public-stat-value {
      font-size: clamp(1.8rem, 2.5vw, 2.6rem);
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.05em;
      color: var(--public-text-strong, rgb(15, 23, 42));
    }

    .public-stat-label {
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--public-text-soft, rgb(100, 116, 139));
    }

    .public-section-header {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: clamp(1.75rem, 3vw, 3rem);
    }

    /* home-readable-* baseline (shell-agnostic safety net).
       The homepage scopes these under .homepage-theme-shell / .home-theme-section
       in home.css; those scoped rules still win there. This baseline lets the
       same classes resolve to readable colours if a ported homepage section
       variant ever lands on a non-homepage public page. No !important so the
       homepage's own rules override. */
    .home-readable-heading { color: var(--public-text-strong, #0f172a); }
    .home-readable-muted { color: var(--public-text-muted, #475569); }
    .home-readable-soft { color: var(--public-text-soft, rgba(100, 116, 139, 0.72)); }

    .public-form-field label {
      display: block;
      margin-bottom: 0.55rem;
      font-size: 0.84rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: var(--public-text-muted, rgb(51, 65, 85));
    }

    .public-input,
    .public-textarea,
    .public-select {
      width: 100%;
      border-radius: 1rem;
      border: 1px solid var(--public-input-border, rgba(148, 163, 184, 0.24));
      background: var(--public-input-bg, rgba(255, 255, 255, 0.95));
      padding: 0.95rem 1rem;
      font-size: 1rem;
      color: var(--public-input-text, rgb(15, 23, 42));
      transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .public-input::placeholder,
    .public-textarea::placeholder {
      color: var(--public-text-soft, rgb(148, 163, 184));
    }

    .public-input:focus,
    .public-textarea:focus,
    .public-select:focus {
      outline: none;
      border-color: rgba(var(--theme-primary-rgb), 0.5);
      box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.12);
    }

    .public-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.22), transparent);
    }

    .card-shell {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 18px 60px rgba(15, 23, 42, 0.12);
      overflow: hidden;
    }

    .saas-hero {
      background: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.28), transparent 60%),
        radial-gradient(900px 500px at 90% -20%, rgba(14, 165, 233, 0.22), transparent 55%),
        linear-gradient(135deg, #0f172a 0%, #111827 45%, #0f172a 100%);
      color: #f9fafb;
    }

    .saas-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
    }

    .saas-muted {
      color: #6b7280;
    }

    .glass-panel {
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(16px);
    }

    .form-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }

    .form-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    @media (max-width: 1280px) and (min-width: 901px) {
      .public-brand-meta {
        display: none;
      }

      body.nav-size-compact .public-nav-shell {
        min-height: 3.06rem;
        padding: 0.34rem 0.46rem 0.34rem 0.56rem;
      }

      body.nav-size-compact .public-nav-link {
        min-height: 1.82rem;
        padding: 0.3rem 0.48rem;
        font-size: 0.77rem;
      }

      body.nav-size-compact .public-nav-trigger {
        min-height: 2.2rem;
      }

      .public-nav-shell {
        min-height: 3.72rem;
        padding: 0.56rem 0.74rem 0.56rem 0.82rem;
      }

      .public-nav-link {
        min-height: 2.2rem;
        padding: 0.48rem 0.68rem;
        font-size: 0.86rem;
      }

      .public-nav-trigger {
        min-height: 2.7rem;
        padding: 0.48rem 0.66rem;
        border-radius: 0.95rem;
      }

      .public-nav-trigger-title {
        font-size: 0.83rem;
      }

      body.nav-size-comfortable .public-nav-shell {
        min-height: 3.9rem;
        padding: 0.6rem 0.76rem 0.6rem 0.84rem;
      }

      body.nav-size-comfortable .public-nav-link {
        min-height: 2.34rem;
        padding: 0.54rem 0.75rem;
        font-size: 0.89rem;
      }

      body.nav-size-comfortable .public-nav-trigger {
        min-height: 2.88rem;
      }

      body.nav-size-spacious .public-nav-shell {
        min-height: 4.6rem;
        padding: 0.82rem 1.02rem 0.82rem 1.08rem;
      }

      body.nav-size-spacious .public-nav-link {
        min-height: 2.72rem;
        padding: 0.68rem 0.96rem;
        font-size: 0.98rem;
      }

      body.nav-size-spacious .public-nav-trigger {
        min-height: 3.36rem;
      }
    }

    @media (max-width: 1100px) and (min-width: 901px) {
      .public-brand-copy {
        display: none;
      }

      .public-nav-shell {
        padding-left: 0.72rem;
      }

      .public-nav-cta {
        padding-left: 0.45rem;
      }
    }

    @media (max-width: 900px) {
      .page-shell {
        padding: 18px 12px 96px;
      }

      body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark).public-site-body main {
        background: var(--public-page-bg, var(--public-panel-bg, rgba(255, 255, 255, 0.96))) !important;
      }

      body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark).tool-page-body :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-slate-100, .bg-neutral-50, .bg-zinc-50, .bg-stone-50, [class*='bg-white/'], [class*='bg-gray-50/'], [class*='bg-slate-50/'])
      :not(.public-nav-shell):not(.public-nav-wrap):not(.public-nav-dropdown):not(.public-mobile-sheet):not(.public-mobile-panel) {
        background: color-mix(in srgb, var(--public-panel-bg, rgba(255, 255, 255, 0.96)) 92%, transparent) !important;
        border-color: var(--public-panel-border, var(--public-divider-color, rgba(148, 163, 184, 0.18))) !important;
      }

      body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark).tool-page-body main :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-slate-100, .bg-neutral-50, .bg-zinc-50, .bg-stone-50),
      body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark).tool-page-body main [class*='bg-white/'] {
        background: color-mix(in srgb, var(--public-panel-bg, rgba(255, 255, 255, 0.96)) 92%, transparent) !important;
        border-color: var(--public-panel-border, var(--public-divider-color, rgba(148, 163, 184, 0.18))) !important;
      }

      body.tool-page-body .min-h-screen.bg-gray-50,
      body.tool-page-body .min-h-screen.bg-gray-100,
      body.tool-page-body .min-h-screen.bg-gray-200,
      body.tool-page-body .min-h-screen.bg-slate-50,
      body.tool-page-body .min-h-screen.bg-slate-100,
      body.tool-page-body .min-h-screen.bg-neutral-50,
      body.tool-page-body .min-h-screen.bg-zinc-50,
      body.tool-page-body .min-h-screen.bg-stone-50,
      body.tool-page-body .min-h-screen.bg-white {
        background: var(--public-page-bg, var(--public-panel-bg, rgba(255, 255, 255, 0.96))) !important;
      }

      /* Keep the whole mobile header band on-brand, not default light/gray. */
      body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .public-container.public-nav-wrap,
      .public-container.public-nav-wrap {
        background-color: var(--public-panel-bg, rgba(255, 255, 255, 0.96)) !important;
        border-bottom: 1px solid var(--public-nav-border, var(--public-divider-color, rgba(148, 163, 184, 0.16))) !important;
      }

      :is(body.theme-dark, body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-container.public-nav-wrap {
        background-color: var(--public-panel-bg, rgba(10, 16, 26, 0.98)) !important;
        border-bottom-color: var(--public-nav-border, var(--public-divider-color, rgba(148, 163, 184, 0.28))) !important;
      }

      .public-container {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .public-nav-shell {
        border-radius: 1.2rem;
        padding: 0.55rem 0.68rem;
      }

      body.nav-size-compact .public-nav-shell {
        padding: 0.38rem 0.5rem;
      }

      body.nav-size-compact .public-brand-logo {
        height: 2rem;
      }

      body.nav-size-comfortable .public-nav-shell {
        padding: 0.56rem 0.7rem;
      }

      body.nav-size-comfortable .public-brand-logo {
        height: 2.7rem;
      }

      body.nav-size-spacious .public-nav-shell {
        padding: 0.72rem 0.84rem;
      }

      body.nav-size-spacious .public-brand-logo {
        height: 3.05rem;
      }

      .public-nav-mega {
        width: min(100vw - 1.5rem, 30rem);
      }

      .public-nav-mega-wide {
        width: min(100vw - 1.5rem, 30rem);
      }

      .public-nav-mega-shell,
      .public-nav-account-actions,
      .public-nav-card-grid,
      .public-nav-list-grid,
      .public-nav-card-grid-compact,
      .public-nav-split-list {
        grid-template-columns: 1fr;
      }

      .public-nav-hover-group {
        padding-bottom: 0.75rem;
        margin-bottom: -0.75rem;
      }

      .public-nav-hover-group::after {
        height: 0.75rem;
      }

      .public-brand-copy {
        display: none;
      }

      .public-hero-grid {
        grid-template-columns: 1fr;
        padding: 1.4rem;
      }

      .public-display {
        font-size: clamp(2.35rem, 10vw, 3.5rem);
      }

      .public-stage {
        min-height: 24rem;
      }

      .public-stage-window {
        left: 1rem;
        right: 1rem;
      }

      .public-stage-float {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        margin: 10rem 1rem 1rem;
      }

      .form-grid-2 {
        grid-template-columns: 1fr;
      }

      .form-actions {
        flex-direction: column;
      }

      .form-actions button,
      .form-actions a {
        width: 100%;
        text-align: center;
      }

      .card-shell,
      .saas-card {
        border-radius: 18px;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
      }

      pre:not(.CodeMirror-line):not(.CodeMirror-line-like) {
        padding: 12px;
        border-radius: 14px;
      }

      .prose table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
      }

      input:not([type='checkbox']):not([type='radio']):not([type='range']),
      select,
      textarea {
        font-size: 16px !important;
      }

      .global-back-to-top {
        left: 1rem;
        right: auto;
        width: 3.3rem;
        height: 3.3rem;
      }
    }

    .mobile-app-strip {
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      touch-action: pan-x;
      overscroll-behavior-x: contain;
    }

    .mobile-app-strip::-webkit-scrollbar {
      display: none;
    }

    .global-back-to-top {
      position: fixed;
      right: 1rem;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
      z-index: 55;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3.1rem;
      height: 3.1rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.4);
      color: rgb(51, 65, 85);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px) scale(0.96);
      transition: opacity 220ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms ease, color 180ms ease;
    }

    .global-back-to-top:hover {
      background: rgba(255, 255, 255, 0.62);
      color: rgb(15, 23, 42);
    }

    .global-back-to-top.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    body.has-chatbot-widget .global-back-to-top {
      bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
    }