/* Docs-specific layout */
    .docs-layout {
      display: grid;
      grid-template-columns: 240px 1fr;
      min-height: calc(100vh - 4rem);
      padding-top: 4rem;
    }
    .docs-sidebar {
      position: sticky;
      top: 4rem;
      height: calc(100vh - 4rem);
      overflow-y: auto;
      background: var(--white);
      border-right: 1px solid var(--brand-200);
      padding: 2rem 1.25rem;
    }
    .docs-sidebar h3 {
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--gray-400);
      margin-bottom: 0.75rem;
    }
    .docs-sidebar h3:not(:first-child) {
      margin-top: 1.5rem;
    }
    .docs-sidebar a {
      display: block;
      padding: 0.375rem 0.75rem;
      font-size: 0.875rem;
      color: var(--gray-600);
      border-radius: var(--radius-md);
      transition: background var(--transition), color var(--transition);
    }
    .docs-sidebar a:hover { background: var(--brand-50); color: var(--brand-700); }
    .docs-sidebar a.active { background: var(--brand-100); color: var(--brand-700); font-weight: 600; }

    /* Centered in the space beside the sidebar (it sat flush left). */
    .docs-content {
      padding: 3rem 4rem;
      max-width: 800px;
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .docs-content h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
    .docs-content h2 { font-size: 1.375rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; color: var(--gray-800); }
    .docs-content p { margin-bottom: 1rem; color: var(--gray-600); line-height: 1.75; }
    .docs-content code {
      background: var(--brand-50);
      padding: 0.125rem 0.375rem;
      border-radius: var(--radius-sm);
      font-size: 0.8125rem;
      color: var(--brand-800);
    }

    /* 404 state */
    .not-found {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      text-align: center;
    }
    .not-found h1 {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--gray-500);
    }
    .docs-shop-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.25rem 0.75rem;
      background: var(--brand-100);
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--brand-800);
      margin-bottom: 2rem;
    }

    .docs-content ul, .docs-content ol {
      margin-bottom: 1rem;
      padding-left: 1.5rem;
      color: var(--gray-600);
      line-height: 1.75;
    }
    .docs-content li { margin-bottom: 0.375rem; }
    .docs-content table {
      width: 100%;
      border-collapse: collapse;
      margin: 1rem 0 1.5rem;
      font-size: 0.875rem;
    }
    .docs-content th, .docs-content td {
      padding: 0.625rem 1rem;
      border: 1px solid var(--brand-200);
      text-align: left;
      color: var(--gray-600);
    }
    .docs-content th {
      background: var(--brand-50);
      font-weight: 600;
      color: var(--gray-800);
    }
    .docs-content .plan-note {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--brand-700);
      background: var(--brand-50);
      padding: 0.125rem 0.5rem;
      border-radius: var(--radius-sm);
      margin-bottom: 0.5rem;
    }
    .docs-content strong { color: var(--gray-800); }

    /* Screenshot images */
    .docs-content .docs-img {
      display: block;
      margin: 1.5rem 0;
      border-radius: var(--radius-md);
      border: 1px solid var(--brand-200);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      max-width: 100%;
      height: auto;
    }
    .docs-content .docs-img-caption {
      display: block;
      font-size: 0.8125rem;
      color: var(--gray-400);
      margin-top: -1rem;
      margin-bottom: 1.5rem;
      font-style: italic;
    }
    /* Callout box (tip, note, warning) */
    .docs-content .docs-callout {
      padding: 1rem 1.25rem;
      border-radius: var(--radius-md);
      margin: 1.5rem 0;
      font-size: 0.875rem;
      line-height: 1.6;
    }
    .docs-content .docs-callout-tip {
      background: var(--brand-50);
      border-left: 3px solid var(--brand-500);
      color: var(--brand-800);
    }
    .docs-content .docs-callout-note {
      background: #eff6ff;
      border-left: 3px solid #3b82f6;
      color: #1e40af;
    }
    .docs-content .docs-callout-warning {
      background: #fffbeb;
      border-left: 3px solid #f59e0b;
      color: #92400e;
    }

    @media (max-width: 768px) {
      .docs-layout { grid-template-columns: 1fr; }
      .docs-sidebar { display: none; }
      .docs-content { padding: 2rem 1.5rem; }
    }

    /* Help Center header (help.randioapp.com): logo + "Help Center" left, the
       way back to the main site right. The marketing .nav is a 3-column grid
       (logo / links / actions); with no links it is two. */
    .help-nav {
      grid-template-columns: 1fr auto 1fr;
    }
    .help-nav .nav-actions {
      justify-content: flex-end;
    }
    /* The Help Center's levels: Documentation, Contact support. */
    .help-levels {
      display: flex;
      gap: 0.25rem;
    }
    .help-levels a {
      padding: 0.375rem 0.875rem;
      border-radius: 999px;
      font-size: 0.875rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .75);
      white-space: nowrap;
    }
    .help-levels a:hover {
      color: var(--white);
    }
    .help-levels a[aria-current="page"] {
      background: rgba(255, 255, 255, .14);
      color: var(--white);
    }
    .help-badge {
      margin-left: 0.25rem;
      padding: 0.125rem 0.5rem;
      border-radius: 999px;
      background: rgba(167, 243, 208, .15);
      color: #a7f3d0;
      font-size: 0.8125rem;
      font-weight: 600;
    }
    .help-back {
      font-size: 0.875rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .75);
    }
    .help-back:hover {
      color: var(--white);
    }
    /* styles.css hides .nav-actions on phones (the marketing menu moves into a
       toggle); the Help Center has no toggle, so keep the way back visible. */
    @media (max-width: 768px) {
      .help-nav .nav-actions { display: flex; }
      /* Phones: the levels take a second header row. */
      .help-nav {
        grid-template-columns: 1fr auto;
        height: auto;
        row-gap: 0.25rem;
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
      }
      .help-levels { grid-column: 1 / -1; grid-row: 2; }
      .help-header + .docs-layout { padding-top: 6.5rem; }
    }
    /* Narrow phones: the tab row already says where you are. */
    @media (max-width: 420px) {
      .help-badge { display: none; }
    }

    /* The joint with the app and the articles: "Open ..." links to the screens a
       page documents (under the title), and "Why it matters" (the articles that
       cite the page) at the end. Generated by core/docs/helpSite.build.ts. */
    .help-in-randio {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      margin: -0.25rem 0 1.5rem;
      font-size: 0.875rem;
    }
    .help-in-randio > span {
      color: var(--gray-500);
      font-weight: 600;
    }
    .help-open {
      padding: 0.25rem 0.75rem;
      border: 1px solid var(--brand-200);
      border-radius: 999px;
      background: var(--brand-50);
      color: var(--brand-700);
      font-weight: 600;
    }
    .help-open:hover {
      background: var(--brand-100);
    }
    .help-open::after {
      content: " ↗";
    }
    .help-why {
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--brand-200);
    }
    .help-why h2 {
      margin-top: 0;
    }
    .help-why ul {
      list-style: none;
      padding: 0;
    }
    .help-why li {
      margin-bottom: 0.75rem;
    }
    .help-why li a {
      font-weight: 600;
      color: var(--brand-700);
    }
    .help-why li span {
      display: block;
      color: var(--gray-500);
      font-size: 0.875rem;
    }