/* Smaller heading clamps for long-form content */
    h3 { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.25; }
    h4 { font-size: clamp(15px, 1.7vw, 17px); line-height: 1.35; }

    /* ---------- Long-form reading column ---------- */
    .prose {
      color: #3F3D3A;
      font-size: 15px;
      line-height: 1.65;
    }
    @media (min-width: 640px) {
      .prose { font-size: 16px; }
    }
    .prose p { margin: 0 0 14px; }
    .prose p:last-child { margin-bottom: 0; }
    .prose strong { color: #242424; font-weight: 500; }
    .prose ul, .prose ol {
      padding-left: 22px;
      margin: 0 0 14px;
    }
    .prose ul { list-style: disc; }
    .prose ol { list-style: decimal; }
    .prose li { margin-bottom: 8px; }
    .prose li:last-child { margin-bottom: 0; }
    .prose a { color: #0000EE; }
    .prose a:hover { text-decoration: underline; }
    .prose code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.9em;
      background: #F2F1EE;
      border: 1px solid #E4E4E2;
      border-radius: 5px;
      padding: 1px 5px;
      color: #242424;
      white-space: nowrap;
    }

    /* ---------- Section rhythm ---------- */
    .doc-section {
      padding: 30px 0;
      border-top: 1px solid #EFEFEC;
      scroll-margin-top: 88px; /* clears the fixed nav on anchor jumps */
    }
    .doc-section:first-child { border-top: 0; padding-top: 4px; }
    .doc-section > h2 { margin-bottom: 14px; }
    .doc-section h3 { margin: 26px 0 10px; color: #242424; font-weight: 500; letter-spacing: -0.01em; }
    @media (min-width: 768px) {
      .doc-section { padding: 44px 0; }
      .doc-section > h2 { margin-bottom: 18px; }
    }

    /* Numbered label sitting above each section heading */
    .doc-kicker {
      display: block;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #6B7280;
      margin-bottom: 8px;
    }

    /* ---------- Two-column shell ----------
       Small screens stack title -> section nav -> content, so the page opens on
       what it is rather than on its navigation. From lg up the nav moves into
       its own column and spans both rows beside the reading column. */
    .doc-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 28px;
    }
    .doc-intro { order: 1; }
    .doc-nav-wrap { order: 2; }
    .doc-body { order: 3; min-width: 0; }
    @media (min-width: 1024px) {
      .doc-shell {
        grid-template-columns: 216px minmax(0, 1fr);
        grid-template-areas:
          "nav intro"
          "nav body";
        column-gap: 56px;
        row-gap: 36px;
        align-items: start;
      }
      .doc-nav-wrap { grid-area: nav; }
      .doc-intro { grid-area: intro; }
      .doc-body { grid-area: body; }
      .doc-intro, .doc-body { max-width: 46rem; }
    }

    /* ---------- Section nav ----------
       A bordered card above the content on small screens; from lg up it sheds
       the card and becomes a sticky rail beside the reading column. */
    .doc-nav {
      background: #F8F8F7;
      border: 1px solid #E4E4E2;
      border-radius: 14px;
      padding: 18px 20px;
    }
    .doc-nav-title {
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #6B7280;
      margin-bottom: 12px;
    }
    .doc-nav ol {
      list-style: none;
      margin: 0;
      padding: 0;
      counter-reset: docnav;
      display: grid;
      gap: 2px;
    }
    @media (min-width: 640px) and (max-width: 1023px) {
      .doc-nav ol { grid-template-columns: 1fr 1fr; gap: 2px 20px; }
    }
    .doc-nav li { counter-increment: docnav; }
    .doc-nav ol a {
      display: flex;
      gap: 10px;
      align-items: baseline;
      padding: 7px 10px;
      margin: 0 -10px;
      border-radius: 8px;
      font-size: 14px;
      line-height: 1.4;
      color: #4D4B48;
      transition: color .15s ease, background-color .15s ease;
    }
    .doc-nav ol a::before {
      content: counter(docnav, decimal-leading-zero);
      color: #9CA3AF;
      font-variant-numeric: tabular-nums;
      font-size: 12px;
      flex: none;
      transition: color .15s ease;
    }
    .doc-nav ol a:hover { color: #242424; background: rgba(36, 36, 36, 0.05); }
    .doc-nav ol a:hover::before { color: #6B7280; }
    .doc-nav ol a.is-current { color: #0000EE; font-weight: 500; }
    .doc-nav ol a.is-current::before { color: #0000EE; }
    .doc-nav-foot {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #E4E4E2;
    }
    .doc-nav-foot a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: #0000EE;
      padding: 0;
      margin: 0;
    }
    .doc-nav-foot a:hover { text-decoration: underline; background: transparent; }

    @media (min-width: 1024px) {
      .doc-nav-wrap {
        position: sticky;
        /* clears the fixed header, matching .doc-section's scroll-margin */
        top: 96px;
        max-height: calc(100vh - 128px);
        overflow-y: auto;
      }
      .doc-nav {
        background: transparent;
        border: 0;
        border-left: 1px solid #E4E4E2;
        border-radius: 0;
        padding: 2px 0 2px 18px;
      }
      .doc-nav ol a { margin: 0 0 0 -19px; padding-left: 18px; border-radius: 0; }
      /* the active marker rides the rail's own hairline */
      .doc-nav ol a.is-current { box-shadow: inset 1px 0 0 #0000EE; }
      .doc-nav ol a:hover { background: transparent; color: #242424; }
      .doc-nav-foot { margin-top: 16px; padding-top: 16px; }
    }

    /* ---------- Callout ---------- */
    .doc-note {
      border-left: 2px solid #0000EE;
      background: #F8F8F7;
      border-radius: 0 10px 10px 0;
      padding: 14px 16px;
      margin: 18px 0;
      font-size: 14px;
      line-height: 1.6;
      color: #4D4B48;
    }
    .doc-note strong { color: #242424; font-weight: 500; }
    .doc-note p { margin: 0 0 10px; }
    .doc-note p:last-child { margin-bottom: 0; }

    /* ---------- Key/value spec list ---------- */
    .doc-facts {
      border: 1px solid #E4E4E2;
      border-radius: 14px;
      overflow: hidden;
      margin: 20px 0;
    }
    .doc-facts div {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
      padding: 14px 16px;
      border-top: 1px solid #EFEFEC;
      font-size: 15px;
      line-height: 1.55;
    }
    .doc-facts div:first-child { border-top: 0; }
    @media (min-width: 640px) {
      .doc-facts div { grid-template-columns: 210px 1fr; gap: 16px; padding: 15px 18px; }
    }
    .doc-facts dt { color: #6B7280; font-size: 14px; }
    .doc-facts dd { color: #3F3D3A; margin: 0; }
    .doc-facts dd strong { color: #242424; font-weight: 500; }

    /* ---------- Data-flow steps ---------- */
    .doc-flow {
      display: grid;
      gap: 12px;
      margin: 22px 0 6px;
    }
    @media (min-width: 900px) {
      .doc-flow { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    }
    .doc-step {
      background: #fff;
      border: 1px solid #E4E4E2;
      border-radius: 14px;
      padding: 18px;
      position: relative;
    }
    .doc-step .material-symbols-rounded {
      font-size: 22px;
      color: #0000EE;
    }
    .doc-step h4 {
      margin: 10px 0 6px;
      color: #242424;
      font-weight: 500;
      letter-spacing: -0.01em;
    }
    .doc-step p {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: #4D4B48;
    }
    .doc-step-n {
      position: absolute;
      top: 16px;
      right: 18px;
      font-size: 12px;
      color: #9CA3AF;
      font-variant-numeric: tabular-nums;
    }

    /* ---------- Do / don't columns ---------- */
    .doc-split {
      display: grid;
      gap: 12px;
      margin: 20px 0;
    }
    @media (min-width: 700px) {
      .doc-split { grid-template-columns: 1fr 1fr; gap: 14px; }
    }
    .doc-card {
      border: 1px solid #E4E4E2;
      border-radius: 14px;
      padding: 18px;
      background: #fff;
    }
    .doc-card h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 10px;
      color: #242424;
      font-weight: 500;
      letter-spacing: -0.01em;
    }
    .doc-card ul {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 14px;
      line-height: 1.6;
      color: #4D4B48;
    }
    .doc-card li {
      display: flex;
      gap: 9px;
      margin-bottom: 9px;
    }
    .doc-card li:last-child { margin-bottom: 0; }
    .doc-card li .material-symbols-rounded { font-size: 18px; flex: none; margin-top: 1px; }
    .doc-card .yes .material-symbols-rounded { color: #0000EE; }
    .doc-card .no .material-symbols-rounded { color: #9CA3AF; }

    /* ---------- FAQ — JS-toggled to avoid <details>/<summary> quirks ---------- */
    .faq-item { padding: 20px 0; }
    @media (min-width: 640px) { .faq-item { padding: 24px 0; } }
    .faq-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: transparent;
      border: 0;
      padding: 0;
      text-align: left;
      cursor: pointer;
    }
    .faq-question {
      font-size: 15px;
      font-weight: 500;
      color: #242424;
      line-height: 1.4;
    }
    @media (min-width: 640px) { .faq-question { font-size: 16px; } }
    .faq-icon {
      flex: none;
      color: #3F3D3A;
      transition: transform .2s ease;
    }
    .faq-item.is-open .faq-icon { transform: rotate(45deg); }
    .faq-answer {
      display: none;
      margin-top: 14px;
      max-width: 720px;
      color: #4D4B48;
      font-size: 15px;
      line-height: 1.6;
    }
    .faq-item.is-open .faq-answer { display: block; }
    .faq-answer p { margin: 0 0 12px; }
    .faq-answer p:last-child { margin-bottom: 0; }
    .faq-answer ul { list-style: disc; padding-left: 20px; margin: 0 0 12px; }
    .faq-answer li { margin-bottom: 6px; }
    .faq-answer a { color: #0000EE; }
    .faq-answer a:hover { text-decoration: underline; }