:root {
      /* === Core CavBot palette (MATCHING INDEX) === */
      --navy-950: #01030f;
      --navy-900: #020616;
      --navy-800: #050a1b;

      --lime: #b9c85a;
      --lime-soft: rgba(185, 200, 90, 0.14);
      --lime-soft-strong: rgba(185, 200, 90, 0.22);

      --violet: #8b5cff;
      --violet-soft: rgba(139, 92, 255, 0.18);
      --violet-border-soft: rgba(139, 92, 255, 0.55);

      --blue: #4ea8ff;
      --blue-soft: rgba(78, 168, 255, 0.18);
      --blue-border-soft: rgba(78, 168, 255, 0.55);

      --ink: #f7fbff;
      --ink-soft: #c5cee7;
      --ink-subtle: #8890aa;

      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-soft: rgba(255, 255, 255, 0.14);

      --panel-radius-lg: 20px;
      --panel-radius-md: 16px;
      --panel-radius-sm: 12px;

      --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

      --space-xxl: 84px;
      --space-xl: 56px;
      --space-lg: 40px;
      --space-md: 28px;
      --space-sm: 18px;
      --space-xs: 10px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font-sans);
      color: var(--ink-soft);
       background:
        radial-gradient(circle at top, #071025 0, var(--navy-900) 32%, var(--navy-950) 100%);
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      
    }
    html.modal-open,
    body.modal-open {
      overflow: hidden !important;
      height: 100%;
      overscroll-behavior: none;
      touch-action: none;
    }
    a { color: inherit; text-decoration: none; }
    strong { color: var(--ink); font-weight: 600; }

    /* Utility */
    .sr-only{
      position:absolute !important;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0);
      white-space:nowrap; border:0;
    }

    /* Page shell (aligned with system) */
    .page-shell {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      opacity: 0;
      animation: pageFadeIn 320ms ease-out forwards;
    }
    @keyframes pageFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .page-shell { animation: none; opacity: 1; }
    }

    .page-inner {
      max-width: 1160px;
      margin: 0 auto;
      padding: var(--space-xl) 20px var(--space-xxl);
      display: flex;
      flex-direction: column;
      gap: var(--space-xxl);
      width: 100%;
    }

    /* Shared section language */
    .section { width: 100%; }
    .section-header {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 52rem;
      margin: 0;
    }
    .eyebrow {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--ink-subtle);
      line-height: 1.25;
    }
    .section-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 18px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.25;
    }
    .section-body {
      margin: 0;
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.85;
      max-width: 56rem;
    }

    /* Panels */
    .panel {
      border-radius: var(--panel-radius-lg);
      border: 1px solid var(--border-subtle);
      background: rgba(3, 7, 22, 0.96);
    }
    .panel-tight { padding: 18px 18px; border-radius: var(--panel-radius-md); }
    .panel-roomy { padding: 22px 24px; }

    /* ==========
       TAGS ("pills") — now clearly NOT buttons
       ========== */
    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.14);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 600;
      background: rgba(3, 7, 22, 0.62);
      color: rgba(197, 206, 231, 0.82);
      white-space: nowrap;
      user-select: none;
      line-height: 1.15;
    }
    .pill.is-lime,
    .pill.is-violet,
    .pill.is-blue {
      border-color: rgba(255,255,255,0.14);
      color: rgba(197, 206, 231, 0.86);
    }

    /* ==========
       BUTTONS — now unmistakably buttons
       ========== */
    .help-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 600;
      background: rgba(3, 8, 18, 0.96);
      color: var(--ink);
      cursor: pointer;
      text-align: center;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
      line-height: 1.15;
      white-space: nowrap;
    }
    .help-btn:hover, .help-btn:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.28);
      outline: none;
      background: rgba(3, 8, 20, 0.98);
    }

    .help-btn.help-btn-primary {
      border-color: rgba(255, 255, 255, 0.18);
      background: rgba(3, 8, 18, 0.96);
      color: var(--ink);
    }
    .help-btn.help-btn-primary:hover, .help-btn.help-btn-primary:focus-visible {
      border-color: rgba(255, 255, 255, 0.28);
      background: rgba(3, 8, 20, 0.98);
    }

    .help-btn.help-btn-ghost {
      background: rgba(3, 8, 18, 0.80);
    }
    .help-btn.is-violet,
    .help-btn.is-blue,
    .help-btn.is-lime { border-color: rgba(255, 255, 255, 0.18); }

    .help-btn[data-help-modal]::after{
      content: "↗";
      font-size: 11px;
      opacity: 0.9;
      transform: translateY(-0.5px);
    }

    /* HERO (clean, not cramped) */
    .help-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-lg);
      align-items: start;
      justify-items: center;
      padding-top: 10px;
    }
    .help-hero > div{
      width: 100%;
      max-width: 920px;
      margin: 0 auto;
      text-align: center;
    }
    .help-hero-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 34px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.12;
    }
    .help-hero-lede {
      margin: 14px 0 0;
      font-size: 15px;
      line-height: 1.9;
      color: var(--ink-soft);
      max-width: 44rem;
      margin-left: auto;
      margin-right: auto;
    }

    /* Search */
    .help-search {
      margin-top: 18px;
      max-width: 42rem;
      position: relative;
      display: grid;
      gap: 10px;
      margin-left: auto;
      margin-right: auto;
    }

    .help-search-field { position: relative; }
    .help-search-input {
      width: 100%;
      padding: 12px 14px 12px 38px;
      border-radius: 10px;
      border: 1px solid rgba(148, 163, 184, 0.55);
      background: rgba(2, 6, 23, 0.9);
      color: var(--ink);
      font-size: 13px;
      outline: none;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }
    .help-search-input::placeholder { color: var(--ink-subtle); }
    .help-search-input:focus-visible {
      border-color: rgba(255, 255, 255, 0.28);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
      background: rgba(2, 6, 23, 0.96);
    }
    .help-search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      border-radius: 999px;
      border: 1.4px solid var(--ink-subtle);
      opacity: 0.9;
    }
    .help-search-icon::before {
      content: "";
      position: absolute;
      right: -5px;
      bottom: -4px;
      width: 7px;
      height: 1.6px;
      background: var(--ink-subtle);
      border-radius: 999px;
      transform: rotate(42deg);
    }

    .search-suggestions {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      z-index: 30;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(3, 7, 22, 0.98);
      overflow: hidden;
    }
    .search-suggestions.is-open { display: block; }
    .suggestion-item {
      display: flex;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      cursor: pointer;
    }
    .suggestion-item:last-child { border-bottom: none; }
    .suggestion-item:hover { background: rgba(255,255,255,0.03); }
    .suggestion-tag {
      flex: 0 0 auto;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-subtle);
      line-height: 1.25;
    }
    .suggestion-title {
      font-size: 12px;
      color: var(--ink);
      line-height: 1.35;
    }

    /* Hero side panel: Quick actions + status */
    .help-hero-side {
      display: grid;
      gap: 14px;
      overflow: hidden;
      position: relative;
    }
    .help-quick-actions {
      display: grid;
      gap: 10px;
    }
    .help-quick-actions-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .help-side-meta {
      font-size: 12px;
      color: var(--ink-subtle);
      line-height: 1.7;
      margin: 0;
    }
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(3, 8, 18, 0.96);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-soft);
      width: fit-content;
      line-height: 1.15;
    }
    .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
      box-shadow: none;
    }

    /* Featured grid: Guides + Popular */
    .help-featured {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-md);
    }

    .roadmap {
      border-radius: var(--panel-radius-lg);
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(3, 7, 22, 0.98);
      padding: 18px 18px;
    }
    .roadmap-steps {
      list-style: none;
      padding: 0;
      margin: 12px 0 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .roadmap-step {
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(2, 6, 23, 0.62);
      padding: 12px 12px;
      display: grid;
      gap: 10px;
      height: 100%;
    }
    .step-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .step-kicker {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-subtle);
      line-height: 1.25;
    }
    .step-title {
      margin: 0;
      font-size: 13px;
      color: var(--ink);
      line-height: 1.35;
    }
    .step-desc {
      margin: 0;
      font-size: 12px;
      color: var(--ink-soft);
      line-height: 1.75;
    }

    .popular {
      border-radius: var(--panel-radius-lg);
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(3, 7, 22, 0.98);
      padding: 18px 18px;
    }
    .popular-list {
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }
    .popular-item a {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(2, 6, 23, 0.62);
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .popular-item a:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.22);
      
    }
    .popular-left { display: grid; gap: 4px; }
    .popular-cat {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-subtle);
      line-height: 1.25;
    }
    .popular-title {
      font-size: 12px;
      color: var(--ink);
      line-height: 1.35;
    }
    .popular-arrow {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 1.4px solid var(--ink-soft);
      border-left: none;
      border-bottom: none;
      transform: rotate(45deg) translateY(2px);
      opacity: 0.9;
      margin-top: 6px;
    }

    /* FILTERS + GRID */
    .help-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
      align-items: center;
    }
    .btn-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.20);
      font-family: var(--font-sans);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 600;
      background: rgba(3, 8, 18, 0.70);
      color: var(--ink-soft);
      cursor: pointer;
      white-space: nowrap;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
      line-height: 1.15;
    }
    .btn-chip:hover, .btn-chip:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.26);
      outline: none;
      background: rgba(3, 8, 18, 0.85);
    }
    .btn-chip.is-active {
      border-color: rgba(255,255,255,0.26);
      background: rgba(3, 8, 18, 0.88);
    }

    /* Dropdown filter (mobile-first, clean) */
    .help-filter-select-wrap {
      display: block;
      width: 100%;
      max-width: 460px;
      margin: 14px 0 0;
    }
    .help-filter-select {
      width: 100%;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(3, 7, 22, 0.96);
      color: var(--ink);
      font-size: 12px;
      text-align: left;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      line-height: 1.2;
    }
    .help-filter-select:focus-visible {
      border-color: rgba(255,255,255,0.28);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
    }
    .help-filter-select-icon {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: var(--ink-soft);
      opacity: 0.8;
      font-size: 14px;
    }
    .help-filter-select-shell {
      position: relative;
      width: 100%;
    }

    .help-grid {
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-md);
    }

    .topic-card {
      border-radius: var(--panel-radius-md);
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(3, 7, 22, 0.98);
      padding: 16px 16px 14px;
      display: grid;
      gap: 10px;
      position: relative;
      overflow: hidden;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .topic-card:hover {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.22);
    }

    .topic-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      min-height: 22px;
    }
    .topic-label {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-subtle);
      line-height: 1.25;
    }
    .topic-title {
      font-size: 14px;
      color: var(--ink);
      line-height: 1.45;
      margin: 0;
    }
    .topic-desc {
      margin: 0;
      font-size: 12px;
      line-height: 1.75;
      color: var(--ink-soft);
    }
    .topic-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 6px;
    }
    .topic-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 2px;
    }

    @media (max-width: 720px) {
      .topic-meta .pill:nth-child(n+3) { display: none; }
    }

    .topic-card[data-accent="lime"],
    .topic-card[data-accent="violet"],
    .topic-card[data-accent="blue"] { border-color: rgba(255,255,255,0.14); }

    .topic-card.is-hidden { display: none; }

    /* Contact map */
    .contact-map { display: grid; gap: 14px; }
    details.map-item {
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(3, 7, 22, 0.98);
      overflow: hidden;
    }
    details.map-item summary {
      cursor: pointer;
      list-style: none;
      padding: 14px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    details.map-item summary::-webkit-details-marker { display: none; }
    .map-summary-left { display: flex; flex-direction: column; gap: 4px; }
    .map-title {
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.25;
    }
    .map-sub { font-size: 12px; color: var(--ink-subtle); line-height: 1.6; }
    .map-chevron { opacity: 0.9; font-size: 14px; color: var(--ink-soft); transform: translateY(-1px); }
    details[open] .map-chevron { transform: rotate(180deg); }

    .map-body {
      padding: 0 14px 14px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: grid;
      gap: 10px;
    }
    .map-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 6px;
      font-size: 12px;
      color: var(--ink-soft);
      line-height: 1.75;
    }
    .map-email {
      font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      color: var(--ink);
      word-break: break-all;
    }
    .map-hint { color: var(--ink-subtle); font-size: 12px; line-height: 1.7; margin: 0; }

    /* ==========
       TOPIC LIGHTBOX — upgraded to “mini-epub” reader
       ========== */

    .topic-modal-backdrop {
      position: absolute; inset: 0;
      background: rgba(0, 0, 0, 0.72);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .topic-modal-panel {
      position: relative;
      width: min(820px, calc(100% - 32px));
      margin: 0;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(3, 7, 23, 0.98);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: min(860px, calc(100vh - 24px));
      max-height: calc(100vh - 24px);
    
    }
    /* ===== Smooth modal visibility (no display toggles) ===== */
.topic-modal,
.faq-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: max(16px, calc(env(safe-area-inset-top) + 16px));
  padding-right: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: 12px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

/* Keep your z-index separation */
.topic-modal{ z-index: 70; }
.faq-modal{ z-index: 60; }

.topic-modal.is-open,
.faq-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

/* Backdrops fade */
.topic-modal-backdrop,
.faq-modal-backdrop{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  will-change: opacity;
  transform: translateZ(0);
}

.topic-modal.is-open .topic-modal-backdrop,
.faq-modal.is-open .faq-modal-backdrop{
  opacity: 1;
}

/* Panels fade + lift smoothly (no keyframe animation) */
.topic-modal-panel,
.faq-modal-panel{
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 220ms ease, transform 220ms ease;
  will-change: opacity, transform;

  /* This prevents any “blank/white” first frame */
  background-color: rgba(3, 7, 23, 0.98);

  backface-visibility: hidden;
}

.topic-modal.is-open .topic-modal-panel,
.faq-modal.is-open .faq-modal-panel{
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .topic-modal,
  .faq-modal,
  .topic-modal-backdrop,
  .faq-modal-backdrop,
  .topic-modal-panel,
  .faq-modal-panel{
    transition: none !important;
  }
}
    .topic-modal-header {
      padding: 16px 18px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      background: rgba(3, 7, 23, 0.94);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .topic-modal-title {
      margin: 0;
      font-size: 14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.25;
    }
    .topic-modal-subtitle {
      margin: 8px 0 0;
      font-size: 12px;
      color: var(--ink-subtle);
      line-height: 1.7;
      max-width: 56ch;
    }
    .topic-modal-close {
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(3, 8, 18, 0.70);
      color: var(--ink);
      border-radius: 12px;
      width: 44px;
      height: 40px;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .topic-modal-close:hover { border-color: rgba(255,255,255,0.26); }

    .topic-modal-progress {
      margin-top: 12px;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      overflow: hidden;
    }
    .topic-modal-progress-bar {
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        rgba(78, 168, 255, 0.98) 0%,
        rgba(139, 92, 255, 0.95) 58%,
        rgba(185, 200, 90, 0.96) 100%
      );
      box-shadow: none;
      transition: width 80ms linear;
    }

    .topic-modal-content {
      padding: 18px 18px 12px;
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    /* “Epub” reader typography */
    .reader {
      max-width: 66ch;
      margin: 0 auto;
      display: grid;
      gap: 14px;
      color: var(--ink-soft);
    }
    .reader p {
      margin: 0;
      font-size: 13px;
      line-height: 1.92;
      color: rgba(197, 206, 231, 0.92);
    }
    .reader h3 {
      margin: 6px 0 0;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.35;
    }
    .reader hr {
      border: none;
      height: 1px;
      background: rgba(255,255,255,0.08);
      margin: 8px 0;
    }
    .reader .reader-kicker {
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-subtle);
    }
    .reader .reader-block {
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(2, 6, 23, 0.55);
      padding: 12px 12px;
      display: grid;
      gap: 8px;
    }
    .reader .reader-list {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 6px;
      font-size: 13px;
      line-height: 1.85;
      color: rgba(197, 206, 231, 0.92);
    }
    .reader .reader-callout {
      border-left: 2px solid rgba(255,255,255,0.22);
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.50);
      color: rgba(197, 206, 231, 0.95);
      font-size: 13px;
      line-height: 1.85;
    }
    .reader .reader-code {
      border-radius: 14px;
      border: 1px solid rgba(148, 163, 184, 0.38);
      background: rgba(15, 23, 42, 0.78);
      padding: 10px 10px;
      overflow: auto;
      font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      line-height: 1.6;
      color: rgba(247, 251, 255, 0.92);
      white-space: pre;
    }
    .reader .reader-checklist li { list-style: "—  " outside; padding-left: 6px; }

    .topic-modal-footer {
      padding: 12px 18px 16px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      background: rgba(3, 7, 23, 0.94);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .topic-modal-footer-left {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .topic-modal-footer-note {
      font-size: 11px;
      color: var(--ink-subtle);
      line-height: 1.6;
      margin: 0;
    }

    /* Custom scrollbar (subtle, Apple-grade calm) */
    .topic-modal-content::-webkit-scrollbar { width: 10px; }
    .topic-modal-content::-webkit-scrollbar-track { background: transparent; }
    .topic-modal-content::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.10);
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    .topic-modal-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); background-clip: padding-box; }

    /* ==========
       FAQ MODAL — stays modular + now matches sizing/center
       ========== */
    .faq-modal {
      padding-top: max(16px, calc(env(safe-area-inset-top) + 16px));
      padding-right: 12px;
      padding-bottom: max(12px, env(safe-area-inset-bottom));
      padding-left: 12px;
    }
    .faq-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.72);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .faq-modal-panel {
      position: relative;
      width: min(560px, calc(100% - 20px));
      margin: 0;
      height: min(640px, calc(100vh - 24px));
      max-height: calc(100vh - 24px);
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(3, 7, 23, 0.98);
      padding: 12px 12px 10px;
      color: var(--ink-soft);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 6px;
      transform: none;
      opacity: 1;
      animation: none;
    }
    .faq-modal.is-open .faq-modal-panel { transform: translateY(0) scale(1); }
    .faq-modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
    .faq-modal-heading { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
    .faq-modal-title { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 0; line-height: 1.25; }
    .faq-modal-close {
      border: 0;
      background: none;
      color: rgba(224, 233, 250, 0.9);
      border-radius: 6px;
      width: 28px;
      height: 28px;
      padding: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .faq-modal-close:hover { color: var(--ink); }
    .faq-modal-close:focus-visible {
      outline: 1px solid rgba(255,255,255,0.35);
      outline-offset: 2px;
    }
    .faq-list {
      margin: 10px 0 0;
      padding: 0 2px 0 0;
      list-style: none;
      display: grid;
      gap: 4px;
      max-height: none;
      min-height: 0;
      overflow: auto;
      counter-reset: faq-item;
    }

    details.faq-item {
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.11);
      background: rgba(4, 10, 28, 0.80);
      overflow: hidden;
      transition: border-color 160ms ease, background 160ms ease;
    }
    details.faq-item[open] {
      border-color: rgba(139, 92, 255, 0.35);
      background: rgba(7, 14, 34, 0.90);
    }
    details.faq-item summary {
      cursor: pointer;
      list-style: none;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
    }
    details.faq-item summary::before {
      counter-increment: faq-item;
      content: counter(faq-item, decimal-leading-zero);
      display: inline-grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.04);
      color: rgba(212, 223, 246, 0.9);
      font-size: 9px;
      letter-spacing: 0.08em;
      line-height: 1;
      font-weight: 600;
    }
    details.faq-item summary::-webkit-details-marker { display: none; }
    .faq-q {
      font-size: 14px;
      letter-spacing: 0.01em;
      text-transform: none;
      color: rgba(237, 244, 255, 0.96);
      line-height: 1.4;
    }
    .faq-chevron {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.02);
      position: relative;
      display: inline-block;
      flex: 0 0 auto;
      font-size: 0;
    }
    .faq-chevron::before,
    .faq-chevron::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      background: rgba(207, 219, 243, 0.92);
      transition: transform 160ms ease, opacity 160ms ease;
    }
    .faq-chevron::before {
      width: 10px;
      height: 1.5px;
      transform: translate(-50%, -50%);
    }
    .faq-chevron::after {
      width: 1.5px;
      height: 10px;
      transform: translate(-50%, -50%);
    }
    details[open] .faq-chevron::after {
      opacity: 0;
      transform: translate(-50%, -50%) scaleY(0.1);
    }
    .faq-a {
      padding: 0 14px 14px 56px;
      font-size: 12.5px;
      color: rgba(198, 209, 234, 0.92);
      line-height: 1.72;
      border-top: 1px solid rgba(255,255,255,0.07);
    }

    /* Responsive */
    @media (max-width: 960px) {
      .help-hero { grid-template-columns: minmax(0, 1fr); }
      .help-featured { grid-template-columns: minmax(0, 1fr); }
      .roadmap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 720px) {
      .page-inner { padding-left: 16px; padding-right: 16px; }
      .roadmap-steps { grid-template-columns: minmax(0, 1fr); }
      .help-grid { grid-template-columns: minmax(0, 1fr); }
      .help-hero-title { font-size: 28px; letter-spacing: 0.1em; }
      .faq-modal-panel { margin: 0; height: min(80vh, calc(100vh - 20px)); max-height: calc(100vh - 20px); }
      .topic-modal-panel { margin: 0; height: min(88vh, calc(100vh - 20px)); max-height: calc(100vh - 20px); }

      /* Filters: dropdown only */
      .help-filters { display: none; }
    }

    @supports (height: 100dvh) {
      .topic-modal-panel {
        height: min(860px, calc(100dvh - 24px));
        max-height: calc(100dvh - 24px);
      }
      .faq-modal-panel {
        height: min(640px, calc(100dvh - 24px));
        max-height: calc(100dvh - 24px);
      }

      @media (max-width: 720px) {
        .faq-modal-panel {
          height: min(80dvh, calc(100dvh - 20px));
          max-height: calc(100dvh - 20px);
        }
        .topic-modal-panel {
          height: min(88dvh, calc(100dvh - 20px));
          max-height: calc(100dvh - 20px);
        }
      }
    }
    @media (max-width: 520px) {
      .help-hero-title { font-size: 24px; }
      .help-search-input { padding-left: 36px; }
      .topic-modal-header { padding-left: 14px; padding-right: 14px; }
      .topic-modal-content { padding-left: 14px; padding-right: 14px; }
      .topic-modal-footer { padding-left: 14px; padding-right: 14px; }
    }