/* ============ Option A: "Atlas" — product-first three-pane ============ */
  /* Global page background: pure white (#FFFFFF) painted with the organic marbled
     texture, applied once at the viewport level (background-attachment: fixed) so it
     stays continuous across every page/route and never rescales at container edges. */
  body {
    background-color: #fff;
    background-image: url('/shared/home-texture.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }

  /* ---- top chrome (Figma navbar, node 868:13648) ----
     Flat white bar, 60px tall, no shadow/blur. NO vertical dividers — the only
     hairline is one 1px border-bottom on the bar. Three sections in the classic
     1fr / auto / 1fr layout: equal-flex flanks (logo left-aligned, "Go to
     website" button right-aligned) with a hug-width center between them, so the
     center group lands dead-center of the FULL bar regardless of the flanks'
     differing content widths. The center group is the product tabs + the ⌘K
     search input sitting 32px apart. Sticky so
     .sidenav(top:60) and .toc(top:96) keep their offsets. */
  .topbar { position: sticky; top: 0; z-index: 100; background: var(--canvas); }
  .topbar-inner {
    height: 60px;
    display: flex; background: var(--canvas);
    border-bottom: 1px solid var(--nav-border);
  }
  .topbar-inner .tb-sect { display: flex; align-items: center; padding: 0 var(--sp-24); }
  .tb-logo    { flex: 1 1 0; min-width: 0; justify-content: flex-start; }
  .tb-center  { flex: 0 0 auto; min-width: 0; justify-content: center; gap: 32px; }
  .tb-actions { flex: 1 1 0; min-width: 0; justify-content: flex-end; }

  /* logo: single inline SVG mark+wordmark ("CloudFiles Docs" baked into the artwork) */
  .logo { display: flex; align-items: center; gap: var(--sp-4); text-decoration: none !important; }
  .logo .brand-mark { display: block; height: 24px; width: auto; }

  /* product tabs — no grey container; active tab = blue-tint fill */
  .prodtabs { display: flex; align-items: center; gap: var(--sp-4); }
  .prodtabs a {
    font: 500 16px/1 var(--sans); color: var(--ink-2); padding: 8px 16px;
    border: 1px solid transparent; border-radius: 6px; background: transparent;
    text-decoration: none !important; white-space: nowrap;
  }
  .prodtabs a:hover { background: var(--nav-active-fill); }
  .prodtabs a.active {
    background: var(--nav-active-fill); border-color: transparent;
    border-radius: var(--radius-xs); color: var(--nav-accent);
  }

  /* search = ⌘K trigger styled as the Figma input */
  .searchbtn {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
    box-sizing: border-box; width: 320px; height: 34px; padding: 0 13px; background: var(--canvas);
    border: 1px solid #f2f1f1; border-radius: var(--radius-xs); cursor: pointer;
    transition: border-color .15s;
  }
  .searchbtn:hover { border-color: var(--card-border); }
  .searchbtn .ph { font: 400 14px/1 var(--sans); color: var(--ink-4); }
  .searchbtn .kbd {
    font: 500 11px/1 var(--mono); color: var(--ink-3);
    background: var(--canvas); border: 1px solid var(--nav-border);
    border-bottom-width: 1px; border-radius: var(--radius-xs); padding: 2px 6px;
  }

  /* "Go to website" — text-only navy outlined button */
  .btn-website {
    display: inline-flex; align-items: center; box-sizing: border-box;
    height: 34px; font: 600 14px/1 var(--sans); color: var(--nav-cta);
    background: var(--canvas); border: 1px solid var(--btn-border);
    border-radius: var(--radius-xs); padding: 0 16px; white-space: nowrap;
    text-decoration: none !important; transition: background .15s, border-color .15s;
  }
  .btn-website:hover { background: var(--cta-hover); border-color: var(--cta-hover); }

  /* hamburger (mobile only) */
  .tb-burger {
    display: none; align-items: center; justify-content: center;
    width: 38px; height: 38px; font-size: 18px; line-height: 1; color: var(--ink-2);
    background: var(--canvas); border: none;
    border-radius: var(--radius-xs); cursor: pointer;
  }

  /* ---- mobile collapse (<=768px) ----
     logo stays left with a hamburger. The product tabs + ⌘K search now live in
     .tb-center and the "Go to website" CTA in .tb-actions; all of them reveal in
     a stacked dropdown when .nav-open is set — the burger toggles the whole
     tabs+search+CTA group. */
  @media (max-width: 768px) {
    .topbar-inner { flex-direction: column; height: auto; max-width: 100%; }
    .topbar-inner .tb-sect { width: 100%; border-right: none; padding: 0; }
    /* Scope with .topbar-inner (same pattern as .tb-actions below) so this beats
       the more-specific base `.topbar-inner .tb-sect { padding: 0 }` rule;
       unscoped `.tb-logo` loses on specificity and its padding resolves to 0. */
    .topbar-inner .tb-logo {
      /* horizontal padding matches main content (body.is-landing .home) at mobile;
         min-height lifts the row to 48px with logo + hamburger vertically centered. */
      justify-content: space-between; min-height: 48px; padding: 0 var(--sp-24);
      border-bottom: 1px solid var(--nav-border);
    }
    .tb-burger { display: flex; }
    /* center now holds the tabs + search; collapse it entirely until the menu
       opens so there's no empty padded gap between the logo and the row below.
       Scope with .topbar-inner to beat the base `.topbar-inner .tb-sect` rule.
       The column gap here overrides the desktop 32px group gap. */
    .topbar-inner .tb-center { display: none; }
    .topbar-inner.nav-open .tb-center {
      display: flex; flex-direction: column; align-items: stretch;
      gap: var(--sp-12); padding: 14px var(--sp-24);
      border-bottom: 1px solid var(--nav-border);
    }
    .prodtabs { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4); }
    .prodtabs a { width: 100%; }
    /* search lives in the center group now; full-width inside the open dropdown */
    .searchbtn { width: 100%; }
    /* actions column holds only the CTA now; it stays behind the burger and
       reveals as a full-width row when the menu opens. */
    .topbar-inner .tb-actions { display: none; }
    .topbar-inner.nav-open .tb-actions {
      display: flex; flex-direction: column; align-items: stretch;
      padding: 0 var(--sp-24) 14px; justify-content: flex-start;
    }
    .btn-website { display: none; }
    .topbar-inner.nav-open .btn-website { display: inline-flex; justify-content: center; }
  }

  /* ---- landing base (shared by hub pages: sf/hs/dev/guides) ---- */
  .landing { max-width: 1200px; margin: 0 auto; padding: var(--sp-80) var(--sp-32) var(--sp-120); }

  /* ---- homepage (Figma "Homepage-mainscreen", node 636:4272) — sidebar-free ----
     The marbled texture now lives on the global `body` background (white + texture,
     viewport-fixed), so it shows through here uniformly with every other page. This
     block only handles the homepage layout (stacking context + generous padding). */
  body.is-landing #app {
    position: relative;
  }
  body.is-landing .home {
    position: relative; z-index: 1;
    padding: var(--sp-64) var(--sp-120) var(--sp-120);
  }

  body.is-landing .home-eyebrow {
    font: 600 11px/1 var(--sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-3);
  }
  body.is-landing .home-h1 {
    font: 500 56px/1.04 var(--serif); letter-spacing: -.012em; color: #222222;
    margin-top: var(--sp-16); max-width: none;
  }
  body.is-landing .home-h1 em { font-style: italic; font-family: var(--serif); color: var(--nav-accent); }
  body.is-landing .home-sub { margin-top: var(--sp-16); font: 500 18px/1.5 var(--sans); color: var(--ink-2); max-width: none; }

  body.is-landing .homecards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); margin-top: var(--sp-48);
  }
  body.is-landing .homecard {
    display: flex; flex-direction: column; background: transparent;
    border: 1px dashed var(--card-border); border-radius: 0;
    text-decoration: none !important; color: inherit;
  }
  body.is-landing .hc-top {
    display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-24); flex: 1;
  }
  body.is-landing .hc-icon { display: block; }
  body.is-landing .hc-icon svg { display: block; width: 32px; height: 32px; }
  body.is-landing .hc-title { font: 500 24px/1.15 var(--serif); color: #222222; }
  body.is-landing .hc-body { font: 400 15px/1.5 var(--sans); color: #3a3a3a; }
  body.is-landing .hc-cta {
    padding: var(--sp-24); border-top: 1px dashed var(--card-border); transition: background .15s;
  }
  body.is-landing .hc-cta-text {
    font: 600 11px/1 var(--sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--nav-accent);
  }
  body.is-landing .homecard:hover .hc-cta { background: var(--cta-hover); }

  /* slim latest-release strip */
  /* homepage release-notes footer (Figma node 729:13319) — dashed strip, homepage-only */
  body.is-landing .home-rel {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-48); flex-wrap: nowrap;
    margin-top: var(--sp-48); padding: var(--sp-16);
    border: 1px dashed var(--card-border);
  }
  body.is-landing .home-rel-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-12); }
  body.is-landing .home-rel-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 11px/1.3 var(--sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-3);
  }
  body.is-landing .home-rel-eyebrow svg { display: block; width: 16px; height: 16px; }
  body.is-landing .home-rel-item {
    font: 400 12px/1.4 var(--sans); color: var(--ink-2);
  }
  body.is-landing .home-rel-v { color: var(--blue-700); font-weight: 700; }
  body.is-landing .home-rel-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    background: var(--brand-blue); color: #fff; border-radius: var(--radius-xs);
    padding: 8px 16px; font: 600 14px/1.3 var(--sans); letter-spacing: .224px;
    text-decoration: none !important; transition: background .15s;
  }
  body.is-landing .home-rel-btn:hover { background: var(--blue-700); }

  /* ---- docs layout (3-pane) ---- */
  .shell { display: grid; grid-template-columns: 304px minmax(0,1fr); }
  /* Docs sidebar — Figma node 854:13151 (304px rail, 3 levels, trailing carets) */
  .sidenav {
    border-right: 1px solid var(--sidebar-border); padding: 24px; background: #fff;
    position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto;
  }
  /* Consecutive L1 sections are separated by a plain 16px gap, no divider line. No gap before the
     first section. */
  .sidenav .sect:first-child { margin-top: 0; }
  .sidenav .sect + .sect { margin-top: 16px; }
  .sidenav .sect > .label {
    padding: 0; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: baseline;
    font: 600 11px/14.3px var(--sans); letter-spacing: 1.1px; text-transform: uppercase; color: #222;
  }
  /* EVERY first-level section is a collapsible unit (Archbee model), collapsed by default, and
     BOTH variants share one header structure — `.navgrp-h.navgrp-split` = chevron toggle +
     `.navgrp-a` label — so the chevron AND label land at pixel-identical x. The label's uppercase
     section styling comes from `.navgrp-sect .navgrp-a` regardless of whether it's an <a> (landing,
     links to the doc) or a <span> (no-landing, non-navigating). */
  .navgrp-sect { margin-bottom: 0; }
  .navgrp-sect > .navgrp-h .navgrp-a {
    font: 500 12px/16px var(--sans); letter-spacing: 1.1px; text-transform: uppercase; color: #6b6b6b;
  }
  /* L1 section header turns blue whenever the active page is anywhere inside the section — driven
     by the build-time `on-path` marker (sectionHasActive), NOT `.active` (landing==activeId only)
     and NOT `.open` (client-toggled). Text colour only, never a fill. */
  .navgrp-sect > .navgrp-h .navgrp-a.on-path { color: var(--nav-accent); }
  /* Hover: darken the L1 section label #6b6b6b → #3a3a3a (--ink-2), text only, no fill. Excludes
     .on-path so the active-section blue stays blue on hover. */
  .navgrp-sect > .navgrp-h .navgrp-a:not(.on-path):hover { color: var(--ink-2); }
  /* Section children indent is per-row inline (NAV_INDENT); no container padding here. */
  .sidenav a {
    display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-xs);
    font: 400 13px/20px var(--sans); color: #6b6b6b; text-decoration: none !important;
    min-width: 0; overflow-wrap: anywhere;
  }
  /* No hover FILL anywhere in the sidebar (designer request): links keep their default
     cursor:pointer and never get a background on hover. The only hover affordance on leaf
     rows is a text-ink darkening (see .sidenav a.navrow:hover below). */
  /* Leaf rows (article + stub): 6px vertical + right padding gives the ACTIVE fill breathing room;
     the LEFT padding is overridden inline (LEAF_PAD_L from build.js = 12px base + per-depth
     NAV_INDENT step) so only the TEXT indents per depth. The box itself is a full-width block whose
     left edge sits at the container / L2-group-label column (24px), never offset by a margin — so
     the active fill starts at the same left x for every leaf regardless of depth or label length. */
  .sidenav a.navrow { padding: 6px; }
  /* Leaf hover: darken TEXT ink-3 (#6b6b6b) → ink-2 (#3a3a3a) only. No background fill. */
  .sidenav a.navrow:hover { color: var(--ink-2); }
  /* Fill appears ONLY on the current-page leaf — NEVER on section (.navgrp-a.label-link) or
     group/folder (.navgrp-a) header links, even when they are .active. The active leaf reads as a
     FULL-WIDTH rounded fill: it spans the whole row from the L2-group-label left edge (24px) to the
     content right edge (consistent for short and long/wrapping labels), border-radius:6px, fill
     --sidebar-hover, text #6b6b6b / weight 400. The leaf text sits inside with a comfortable left
     padding (LEAF_PAD_L), a few px in from the fill's left edge. No width:fit-content — the fill no
     longer hugs the text — and no negative margin, so there's no left overhang. */
  .sidenav a.navrow.active {
    background: var(--sidebar-hover); border-radius: 6px;
  }
  .sidenav a .ki { width: 16px; text-align: center; font-size: 11px; color: #6b6b6b; flex: none; }
  .sidenav a.stub { color: #6b6b6b; }
  .navhide {
    width: 100%; display: flex; align-items: center; gap: 8px;
    background: none; border: none; border-radius: 6px; padding: 6px var(--sp-12);
    font: 500 12px var(--sans); color: var(--ink-4); cursor: pointer; margin-bottom: var(--sp-8);
  }
  .navhide:hover { background: var(--canvas-3); color: var(--ink-2); }
  .navhide .kbd { margin-left: auto; }
  .shell.nav-hidden { grid-template-columns: minmax(0,1fr); }
  .shell.nav-hidden .sidenav { display: none; }
  /* nav-hidden pages (no sidebar) center their column instead of hugging left. */
  .shell.nav-hidden .main { max-width: 820px; margin-inline: auto; }
  /* Releases feed: a wide, article-style two-column page (content + sticky month rail).
     Overrides the 820px cap above (same specificity, later rule). Takes the PAGE
     background (no distinct box) — an --article-bg fill left a visible grey seam at the
     1140px edges against the page canvas. The rail's own --article-bg is cleared below. */
  /* Releases feed (Figma 726:9027): content column left-aligned w/ 120px gutter; month rail fixed to the viewport right at 256px. */
  .shell.nav-hidden .main.relmain {
    display: block; max-width: none; margin: 0;
    padding: var(--sp-32) calc(256px + var(--sp-48)) var(--sp-120) var(--sp-120);
    background: none;
  }
  .shell.nav-hidden .main.relmain > .prose { max-width: 944px; padding: 0; }
  .shell.nav-hidden .main.relmain > .toc {
    position: fixed; top: 60px; right: 0; width: 256px; height: calc(100vh - 60px);
    margin: 0; padding: var(--sp-32) var(--sp-24); overflow-y: auto; background: none;
  }
  .navshow {
    position: fixed; left: 0; top: 84px; z-index: 90;
    background: var(--canvas); border: 1px solid var(--hairline); border-left: none;
    border-radius: 0 8px 8px 0; padding: 10px 10px; cursor: pointer;
    font: 500 13px var(--sans); color: var(--ink-3); box-shadow: 2px 2px 8px rgba(34,34,52,.06);
  }
  .navshow:hover { color: var(--ink); background: var(--canvas-3); }
  .navgrp-h {
    width: 100%; display: flex; align-items: center; gap: 0; text-align: left;
    background: none; border: none; padding: 4px 8px; min-height: 26px; border-radius: var(--radius-xs);
    font: 500 13px var(--sans); color: #3a3a3a; cursor: pointer;
  }
  .navgrp-h .chev { width: 12px; height: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s; }
  .navgrp-h .chev svg { display: block; }
  .navgrp.open > .navgrp-h .chev { transform: rotate(90deg); }
  /* The caret sits TRAILING — immediately to the RIGHT of the label text with an 8px gap
     (margin-left:8px; the label carries no right padding). It only appears on expandable L2
     groups (folder-as-page + plain groups); L1 section headers render no caret at all. The label
     sizes to its content (flex:0 1 auto, below) so the caret follows the text instead of being
     pinned to the far edge. */
  .navgrp-chev {
    flex: none; width: 12px; height: 18px; margin-left: 8px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--radius-xs); cursor: pointer;
  }
  /* Indent is driven by an inline `padding-left` per row (NAV_INDENT(depth) in build.js), NOT by
     nesting the containers — so EVERY row at a given depth (leaf link, folder header, stub) starts
     its label at the same x, and each nested level steps in by one consistent amount, matching
     Archbee's single-step-per-level indent. Containers add no padding of their own. */
  .navgrp-items { display: none; padding-left: 0; }
  /* CHILD combinator, not descendant: a group's open state reveals only ITS OWN items wrapper, so
     a collapsed sub-group stays hidden even when an ancestor is open. 8px header→child-list gap;
     the container's top margin collapses with a first child group's 4px, leaving 8px. */
  .navgrp.open > .navgrp-items { display: block; margin-top: 8px; }
  /* 4px between L2 group rows (leaves stay contiguous — they aren't .navgrp). */
  .navgrp-items > .navgrp { margin-top: 4px; }
  .navgrp-items a { display: block; font: 400 13px/20px var(--sans); color: #6b6b6b; padding: 4px 8px; border-radius: var(--radius-xs); overflow-wrap: anywhere; }
  /* NO `.navgrp-items a.active` fill here — that descendant selector also matched nested
     folder-as-page headers (.navgrp-a) and filled them. The active fill now lives ONLY on
     `.sidenav a.navrow.active` (leaves), so header links never get a fill even when active. */
  .navgrp-items a .ki { display: none; }

  /* Folder-as-page: split group header = title link (the parent doc) + a TRAILING caret toggle.
     The row's inline padding-left positions the label; the caret follows the text (8px gap).
     Title link = DM Sans 500 13px #3A3A3A. */
  /* `.sidenav .navgrp-a` (specificity 0,2,0) so it BEATS `.sidenav a` (0,1,1) — otherwise the <a>
     label variant picks up `.sidenav a`'s padding-left:8px while the <span> variant (which doesn't
     match `.sidenav a`) gets 0, pushing landing label TEXT 8px right of no-landing label text even
     though the boxes align. Force padding-left:0 for BOTH tags so the text ink is identical.
     `flex:0 1 auto` sizes the label to its content so the trailing caret follows the text (with no
     right padding on the label, the caret's 8px margin-left is the exact text→caret gap). */
  .sidenav .navgrp-a {
    flex: 0 1 auto; min-width: 0; display: block; padding: 4px 0; border-radius: var(--radius-xs);
    font: 500 13px var(--sans); color: #3a3a3a; overflow-wrap: anywhere; text-decoration: none;
  }
  /* L2 group label color stays #3a3a3a in all states (no active/expanded color change), EXCEPT it
     darkens to #222 (--ink) on hover — text only, no fill. Scoped to non-section groups
     (.navgrp:not(.navgrp-sect)) so it never touches the L1 uppercase section header. */
  .sidenav .navgrp:not(.navgrp-sect) > .navgrp-h .navgrp-a:hover { color: var(--ink); }
  /* Degenerate folder (no children): a plain link row, no caret. Its inline padding-left
     positions the label at the same depth as expandable group rows (whose caret trails the
     label), so all group labels at a depth start at the same x. */
  .guides-items { display: block; padding-left: 0; }
  .more-inline { display: block; font-size: 11.5px; color: #6b6b6b; font-style: italic; padding: 4px 8px; }

  /* article main — Figma frame 636:3087 (rail is 256; gutters live on .prose/.toc) */
  .main { display: grid; grid-template-columns: minmax(0,1fr) 256px; gap: 0;
    padding: var(--sp-32) 0; background: transparent; }
  /* hub/tab pages (no rail) keep their own gutters; the body texture shows through */
  .main.norail { grid-template-columns: minmax(0,1fr);
    padding: var(--sp-64) var(--sp-48) var(--sp-120); background: transparent; }

  .crumbs { display: flex; align-items: center; gap: 8px; font: 500 12px var(--sans); color: var(--ink-3); margin-bottom: var(--sp-16); }
  .crumbs a { color: #222; }
  .crumbs a:hover { color: var(--blue-700); }
  .crumbs .sep { color: var(--ink-5); }

  .docmeta { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-16); flex-wrap: wrap; }
  .docmeta .dot { color: var(--ink-5); }
  .docmeta { font: 400 12px var(--sans); color: var(--ink-3); }

  /* article intro-lead subtitle — hoisted first paragraph, sits above the header rule.
     Matches the .prose intro-lead scale (DM Sans 500 16px) but in Ink 2. */
  .article-sub { font: 500 16px/1.55 var(--sans); color: var(--ink-2); margin: var(--sp-16) 0 0; }
  /* header divider (was an inline dashed <hr>) — kept visually identical */
  .article-rule { border: none; border-top: 1px dashed var(--ink-4); margin: 28px 0; }
  /* REST endpoint method + path line (was an inline style) */
  .method-line { font: 500 14px var(--mono); color: var(--ink-3); margin-top: var(--sp-8); }
  /* release-notes page h1 keeps its slightly tighter top offset */
  .prose h1.rel-h1 { margin-top: 14px; }

  /* right rail — Figma frame 636:6003: card w/ divider + scroll-following pill.
     FIXED to the viewport (not sticky) so it holds perfectly still as the article scrolls —
     matching the release-notes rail (.shell.nav-hidden .main.relmain > .toc), the known-good
     behavior. Sticky drifted up ~32px before catching: .main's 32px top padding starts the rail
     at viewport-top 92px, and sticky travels from there down to its top:60px threshold on scroll.
     The .main grid's 256px second track is still reserved (a fixed item leaves flow but its track
     remains), so `right:0` + `width:256px` lands the rail exactly in that column with no content
     overlap (verified at 1440px and 1100px). Mobile (≤1080px) still hides .toc via display:none. */
  .toc { position: fixed; top: 60px; right: 0; width: 256px; height: calc(100vh - 60px);
    overflow-y: auto; font-size: 13px; padding: var(--sp-32) var(--sp-24);
    background: transparent; }
  /* 12px left inset opens a gutter for the pill (left:0, 4px wide); with .toc a's
     8px left padding the item text sits 16px right of the pill's edge. */
  .toc-nav { position: relative; padding-left: 12px; }
  .toc .label { display: block; font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; color: #6b6b6b; margin-bottom: var(--sp-12); }
  .toc-nav ul { list-style: none; padding: 0; margin: 0; }
  .toc-nav li { margin: 0; }
  .toc a { display: block; font: 400 13px var(--sans); color: #6b6b6b; padding: 4px 8px; border-radius: 4px; text-decoration: none !important; }
  .toc a:hover { color: #222; }
  .toc a.active { color: var(--nav-accent); }
  /* Nested subheadings (h3): indented one step and set a touch smaller/lighter so the
     rail reads as a two-level outline (reviewer #92 — subheadings must show at their level). */
  .toc-nav li.toc-l3 a { padding-left: 22px; font-size: 12.5px; color: #8a8a8a; }
  .toc-nav li.toc-l3 a:hover { color: #333; }
  /* the moving blue pill (hidden until scroll-spy sets an active item) */
  .toc-pill { position: absolute; left: 0; top: 0; width: 4px; height: 32px; border-radius: 26px;
    background: var(--nav-accent); transition: transform .25s ease; opacity: 0; }
  .toc .tocmeta { margin-top: var(--sp-24); padding-top: var(--sp-16); border-top: 1px dashed var(--dash); color: var(--ink-4); line-height: 2; }

  .prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-32); margin-top: var(--sp-80); }
  .prevnext a {
    display: flex; flex-direction: column; gap: 10px;
    border: 1px dashed var(--card-border); background: transparent; border-radius: 0; padding: var(--sp-16);
    text-decoration: none !important; transition: background .15s;
  }
  .prevnext a:hover { background: var(--cta-hover); }
  .prevnext .label { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
  .prevnext .label .arr { display: inline-flex; }
  .prevnext .label .arr svg { display: block; width: 16px; height: 16px; }
  .prevnext .t { font: 500 16px/1.3 var(--sans); color: var(--ink-2); }
  .prevnext a.next { align-items: flex-end; text-align: right; }
  .prevnext a.next .label .arr svg { transform: rotate(180deg); }

  /* ---- per-space hub pages (Figma frame 724:7383) — dashed section-card grid ---- */
  .hub-eyebrow { display:block; font: 600 11px/1.3 var(--sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-3); }
  .hub-title { font: 500 clamp(40px, 5vw, 56px)/1.02 var(--serif); color: var(--ink); margin-top: var(--sp-12); }
  .hub-sub { font: 500 18px/1.4 var(--sans); letter-spacing: .29px; color: var(--ink-2); margin-top: var(--sp-8); }

  .hubgrid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 0; row-gap: var(--sp-24); margin-top: var(--sp-32); }
  .hubcard { display: flex; flex-direction: column; background: transparent;
    border: 1px dashed var(--card-border); border-radius: 0; margin-left: -1px;
    text-decoration: none !important; color: inherit; }
  .hubcard:nth-child(3n+1) { margin-left: 0; }
  .hubcard .hc-top { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-24); flex: 1; }
  .hubcard .hc-icon { display: block; color: var(--nav-accent); line-height: 0; }
  .hubcard .hc-icon svg { display: block; width: 32px; height: 32px; }
  .hubcard .hc-title { font: 500 24px/1.15 var(--serif); color: var(--ink); letter-spacing: -0.22px; }
  .hubcard .hc-body { font: 400 15px/1.5 var(--sans); color: var(--ink-2); letter-spacing: .24px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hubcard .hc-cta { padding: var(--sp-24); border-top: 1px dashed var(--card-border); transition: background .15s; }
  .hubcard .hc-cta-text { font: 600 11px/1 var(--sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--nav-accent); }
  .hubcard .hc-cta .arr { font-family: var(--sans); }
  .hubcard:hover .hc-cta { background: var(--cta-hover); }

  /* changelog / release notes feed — scoped under .relfeed + release classes so it
     touches nothing else. Two-column release row: meta (version/date/chips) + notes. */
  .rel-eyebrow { display: block; font: 600 11px/1.3 var(--sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-3); }
  .relfeed-intro { font: 500 18px/1.4 var(--sans); letter-spacing: .29px; color: var(--ink-2); margin-top: var(--sp-8); }
  /* module filter row — mirrors the ⌘K chip vocabulary (.cmdk-chip in tokens.css) */
  .relfilter { display: inline-flex; flex-wrap: nowrap; gap: 4px; margin-top: var(--sp-24);
    max-width: 100%; overflow-x: auto; background: var(--canvas-2); border-radius: var(--radius); padding: 4px; }
  .relchip { border: 1px solid transparent; background: transparent; color: var(--ink-3);
    font: 400 12px/1.3 var(--sans); padding: 6px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
  .relchip:hover { color: var(--ink); }
  .relchip.active { background: var(--canvas); border-color: var(--nav-active-border); color: var(--ink); font-weight: 500; }
  /* filter-hidden rows/headers — two-class selector so it beats .release{display:grid} */
  .release.rel-hidden, .relyear.rel-hidden { display: none; }
  .relfeed { margin-top: var(--sp-24); }
  .relyear { font: 500 20px/1.3 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink);
    margin: var(--sp-24) 0 var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px dashed var(--card-border);
    scroll-margin-top: 76px; }
  .relfeed > .relyear:first-child { margin-top: var(--sp-24); }
  .release { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: var(--sp-32);
    padding: var(--sp-24) 0; border-bottom: 1px solid var(--ink-5); scroll-margin-top: 76px; }
  .release:last-child { border-bottom: none; }
  .release.rel-endyear { border-bottom: none; }
  .release-meta { align-self: start; }
  .release-head { display: flex; align-items: center; gap: 4px; }
  .release-v { font: 500 20px/1.3 var(--serif); color: var(--nav-accent); }
  .release-date { font: 400 12px var(--sans); color: var(--ink-2); margin-top: var(--sp-12); }
  .release-chips { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); margin-top: var(--sp-12); }
  /* category badges — teal chip pair (--teal-100 / --teal) */
  .relmod { display: inline-flex; align-items: center; border-radius: 999px;
    background: var(--teal-100); color: var(--teal); font: 600 11px var(--sans); padding: 3px 10px; }
  .rel-latest { background: var(--brand-blue); color: #fff; }
  /* hover-reveal permalink — reserves its own width so revealing it never shifts layout */
  .rel-perma { color: var(--nav-accent); font-size: 14px; line-height: 1; text-decoration: none !important;
    opacity: 0; transition: opacity .12s; margin-left: 2px; }
  .release:hover .rel-perma, .rel-perma:focus { opacity: 1; }
  .release-notes { padding-left: var(--sp-24); margin: 0; }
  .release-notes li { margin: 0 0 var(--sp-8); font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
  .release-notes li:last-child { margin-bottom: 0; }

  .stub-note { border: 1px dashed var(--dash); border-radius: 10px; background: var(--canvas); padding: var(--sp-48); text-align: center; margin-top: var(--sp-48); }

  footer.site { border-top: 1px solid var(--hairline); background: var(--dark-surface); margin-top: 0; }
  footer.site .inner { max-width: 1200px; margin: 0 auto; padding: var(--sp-32); display: flex; gap: var(--sp-32); align-items: center;
    color: rgba(255,255,255,.6); font-size: 13px; }
  footer.site a { color: rgba(255,255,255,.85); }

  /* (The right-rail "Copy page (Markdown)" page-action button was removed. The per-doc .md
     projection is still emitted and linked from llms.txt — just no longer surfaced as a button.) */

  /* up next card */
  .upnext { display: block; margin-top: var(--sp-80); border: 1px dashed var(--dash-teal); border-radius: 10px;
    background: var(--canvas); padding: var(--sp-24) var(--sp-32); text-decoration: none !important;
    transition: background .15s; }
  .upnext:hover { background: var(--teal-100); }
  .upnext .t { font: 500 22px var(--serif); color: var(--ink); margin-top: 6px; }
  .upnext p { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
  .upnext .meta { font-size: 12.5px; color: var(--ink-4); margin-top: 10px; }

  /* guide end blocks */
  .endblocks { margin-top: var(--sp-64); border-top: 1px dashed var(--dash); padding-top: var(--sp-32); }
  .endblocks .chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-12); }
  .moreguides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); margin-top: var(--sp-12); }
  .moreguides a { border: 1px solid var(--hairline); background: var(--canvas); border-radius: 8px;
    padding: var(--sp-16); text-decoration: none !important; }
  .moreguides a:hover { border-color: var(--dash-teal); }
  .moreguides .t { font: 500 16px var(--serif); color: var(--ink); }
  .moreguides .m { font-size: 12px; color: var(--ink-4); margin-top: 6px; }

  /* guides library */
  .guidegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); margin-top: var(--sp-32); }
  .guidecard {
    background: var(--canvas); border: 1px dashed var(--dash); border-radius: 10px;
    padding: var(--sp-24); display: flex; flex-direction: column; min-height: 210px;
    text-decoration: none !important; color: inherit; transition: border-color .15s;
  }
  .guidecard:hover { border-color: var(--dash-teal); }
  .guidecard.featured { grid-column: span 2; border-color: var(--dash-teal); }
  .guidecard h3 { font: 500 21px/1.25 var(--serif); color: var(--ink); margin-top: var(--sp-12); }
  .guidecard p { font-size: 14px; color: var(--ink-3); margin-top: var(--sp-8); max-width: 520px; }
  .guidecard .gmeta { margin-top: auto; padding-top: var(--sp-16); display: flex; gap: var(--sp-8); flex-wrap: wrap; align-items: center; }
  .guidecard .gmeta .t { font-size: 12px; color: var(--ink-4); margin-left: auto; }
  .outcomebox { border: 1px dashed var(--dash-teal); border-radius: 10px; background: var(--canvas);
    padding: var(--sp-16) var(--sp-24); margin-top: var(--sp-24); display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-24); align-items: center; }
  .outcomebox .ol { font-size: 14px; color: var(--ink-2); }
  .outcomebox .ov { text-align: center; }
  .outcomebox .ov b { font: 500 16px var(--serif); color: var(--ink); display: block; }
  .outcomebox .ov span { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .08em; }

  @media (max-width: 1080px) {
    .shell { grid-template-columns: minmax(0,1fr); }
    .sidenav { display: none; }
    /* single-column article: let the grid items shrink to the viewport (min-width:0
       breaks the min-content chain that otherwise blows the track past the screen),
       drop the 64px desktop gutters to the site's 24px mobile gutter, and uncap the
       measure so the content fits — matches the homepage/releases mobile treatment. */
    .main { grid-template-columns: minmax(0,1fr); min-width: 0; }
    .toc { display: none; }
    .main > .prose { min-width: 0; max-width: none;
      padding-left: var(--sp-24); padding-right: var(--sp-24); }
    /* releases: drop the fixed month rail, stack meta above notes (single column) */
    .shell.nav-hidden .main.relmain { padding: var(--sp-24) var(--sp-24) var(--sp-80); }
    .shell.nav-hidden .main.relmain > .prose { max-width: none; }
    .shell.nav-hidden .main.relmain > .toc { display: none; }
    .release { grid-template-columns: 1fr; gap: var(--sp-12); }
    .release-chips { margin-top: var(--sp-8); }
    .hubgrid, .guidegrid { grid-template-columns: 1fr; }
    /* hub pages (sf/hs/dev): the card grid lives in .main.norail > .landing, whose
       desktop L/R padding (48px + 32px) leaves an 80px mobile gutter. Collapse both
       to a single 24px gutter on the outer container so hubs match the article/
       releases/navbar 24px gutter. (Homepage uses .home, not .landing — untouched.) */
    .main.norail { padding-left: var(--sp-24); padding-right: var(--sp-24); }
    .main.norail .landing { padding-left: 0; padding-right: 0; }
    .hubcard { margin-left: 0; }
    .guidecard.featured { grid-column: span 1; }
    body.is-landing .home { padding-top: var(--sp-32); padding-left: var(--sp-24); padding-right: var(--sp-24); }
    body.is-landing .homecards { grid-template-columns: 1fr; }
    body.is-landing .home-h1 { font-size: 40px; }
    body.is-landing .home-rel { flex-direction: column; align-items: flex-start; }
  }

/* ---- uploaded media (real images / video embeds) ---- */
/* Uploaded images: automatic, never-crop. Scale to column width, keep aspect
   ratio, never overflow. The max-height cap stops a tall/portrait screenshot from
   dominating the column — it scales down to fit (width follows, stays centered).
   No per-image sizing controls by design (help-docs-image-uploads decision); the
   media block can gain an optional `size` later without changing this base rule. */
.media-img { max-width: 100%; height: auto; display: block; border-radius: var(--radius, 10px); border: 1px solid var(--hairline);
  max-height: 70vh; width: auto; margin-inline: auto; cursor: zoom-in; }
.media-img:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }
figure .media-img { margin: 0 auto; }

/* Image lightbox (app.js initLightbox): click/Enter on a content image opens it full-size.
   Hidden until .open; a body .imglb-locked class freezes background scroll while open. */
.imglb-overlay { position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 4vh 4vw;
  background: rgba(17,17,17,.82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.imglb-overlay.open { display: flex; }
.imglb-img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; object-fit: contain;
  border-radius: 8px; box-shadow: 0 24px 80px rgba(0,0,0,.5); cursor: zoom-out; }
.imglb-close { position: fixed; top: 16px; right: 20px; width: 40px; height: 40px; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.imglb-close:hover { background: rgba(255,255,255,.28); }
.imglb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.imglb-locked { overflow: hidden; }
.media-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius, 10px); overflow: hidden; border: 1px solid var(--hairline); }
.media-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--hairline); border-radius: 8px; text-decoration: none; color: var(--blue-700); font: 500 14px var(--sans); }
.media-link:hover { border-color: var(--blue); }