/* Left menu on the static SEO pages, same look as the app's tools rail
   (src/components/ladder/CarouselRail.tsx). Desktop only (>=1024px), like the app. */
.cdna-rail { display: none; }
@media (min-width: 1024px) {
  body { padding-inline-start: 238px; }
  .appbar, #cdna-appbar { inset-inline-start: 238px !important; }
  .cdna-rail {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 90; width: 238px; box-sizing: border-box;
    overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 22px 16px 18px;
    background: #06080d; border-inline-end: 1px solid rgba(148,163,184,0.10);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.3;
  }
  .cdna-rail a { text-decoration: none; }
  .cr-brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 22px; }
  .cr-brand img { height: 28px; width: auto; display: block; }
  .cr-word { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: #f3f5f8; }
  .cr-word b { color: #4ade80; font-weight: 800; }
  .cr-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; color: #94a3b8; font-size: 13.5px; font-weight: 600; }
  .cr-item:hover { background: rgba(148,163,184,0.07); color: #f3f5f8; }
  .cr-item svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: #64748b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cr-item.on { background: rgba(74,222,128,0.12); color: #f3f5f8; font-weight: 800; }
  .cr-item.on svg { stroke: #4ade80; }
  .cr-sub { position: relative; padding: 5px 10px 5px 37px; font-size: 12.5px; color: #94a3b8; font-weight: 600; border-radius: 9px; display: block; }
  .cr-sub::before { content: ''; position: absolute; inset-inline-start: 17px; top: 0; bottom: 0; width: 1px; background: rgba(148,163,184,0.2); }
  .cr-sub:hover { color: #f3f5f8; }
  [dir="rtl"] .cr-sub { padding: 5px 37px 5px 10px; }
  .cr-sec { font-size: 8.5px; font-weight: 900; letter-spacing: 1.6px; color: #475569; padding: 14px 10px 4px; }
  .cr-fill { flex: 1; min-height: 16px; }
  .cr-cta { display: block; text-align: center; border-radius: 11px; padding: 10px; background: #4ade80; color: #06120b !important; font-size: 12.5px; font-weight: 900; }
  .cr-cta:hover { opacity: .9; }
}