/* ==========================================================================
   SANCTOM HUB KIT — canonical App-Switcher / Hub surface CSS.
   Mira-Design 2026-06-06. Single source for the cross-product Hub: the
   gradient canvas, brand banner, category-filter bar, three-section grid,
   and the per-product identity cards (accents / placeholder / bridge /
   logo-card variants). Extracted verbatim from the app-switcher.html
   prototype's inline <style> so prototype + file stay in sync.
   Excludes: the global box-sizing reset + body rule (page bootstrap) and
   the .anchor-demo widget (prototype documentation, not part of the
   shippable Hub surface). Vendored by the Sanctom app shell to build the
   header App-Switcher -> full Hub surface (one source, no drift).
   ========================================================================== */
  /*
    Sanctom Design System — App switcher / Hub (system pattern).

    HUB CATEGORIZATION RULE (Knox-ratified 2026-05-16):
    Every Sanctom App belongs to exactly one of:
      • Personal  — apps for the member's own life (Growth, LifeTracers,
        Legacy)
      • Business  — apps for serving others or running the business (Pro,
        Sanctom Admin, Agent Manager, Identity admin, Sanctom Platform,
        Sanctom OS, Sanctom Skills, Sanctom Factory) — the last four
        constitute the infrastructure cluster with the canonical read-order
        substrate → coordination → capabilities → execution
      • Both      — apps that genuinely sit on the divide. Currently
        Relations alone. Both-category apps receive the "split spine"
        treatment — Personal accent on the left edge, Business accent on
        the right — and bridge the two columns visually in the All view.

    The Hub is the canonical surface where the categorization is
    displayed; every new App at scaffolding time picks its category and
    inherits the corresponding placement.

    APP RENAMES landed 2026-05-16 (Hub copy only; per-product trees
    untouched in this pass — those follow as a separate sweep once
    Petra-A revises specs):
      • Growth → Growth   (Personal — Learning Paths)
      • Pro → Pro          (Business — any professional service)
      • Relations → Relations  (Both)
      • Legacy spun out of LifeTracers as its own App (Personal)
      • Sanctom Factory + Sanctom Platform added as placeholders
      • Sanctom Skills added as ACTIVE business app (2026-05-16 PM,
        Knox-approved per Keystone OQ-1) — the curated capability library
        proof point for the anti-disintermediation investor argument

    Original pattern documentation follows below; updated cross-refs
    use the new names.

    ─────────────────────────────────────────────────────────────────

    SEVENTH system pattern in prototypes/_system/. Closes the original
    deferred "Sanctom-wide app-switcher" item per the open-questions
    list ("Pro + Tribe Host co-existence ... The Sanctom-wide
    app-switcher (also not yet drawn) is the cross-app navigation
    surface; deferred").

    Cross-product navigation hub — full-screen surface where a user
    chooses which product context to enter. Distinct from:
      - Per-product chrome (LeftRail + AppHeader), which lives within
        a single product
      - Identity-magic-link login (auth flow); user is already
        authenticated; Hub is post-auth pre-app
      - Pro's focused-canvas onboarding (single-product); Hub is
        cross-product

    Implements the MULTI-TYPE-IDENTITY rule from CLAUDE.md §8: users
    can hold multiple type-views simultaneously (member + professional
    + admin + tribe-host), and each type-view has its own product app.

    Per-product accent on the Hub itself: NONE specifically. The Hub
    uses a neutral chrome (paper-100 cream) so per-product cards each
    carry their own accent without color collision.

    Six pattern families introduced in v0 + one v1 addition this pass:

      1. CROSS-PRODUCT GRID — responsive grid of product cards. v1
         restructures into Personal-column / Business-column layout
         when the All filter is selected; collapses to a single
         column when filtered to one side.

      2. PRODUCT CARD with PER-PRODUCT-IDENTITY CONTEXT — each card
         carries: product name + product mark + your-role-in-this-
         product line + last-activity-in-this-product line + entry
         affordance. Identity context is the load-bearing element.

      3. PRIMARY-PRODUCT marker — kept structurally but suppressed
         visually in compact tile mode (per Knox 2026-05-13).

      4. RECENT-ACTIVITY HINT per card — small last-activity-line
         showing what's waiting in that product.

      5. PRODUCT-NOT-ACCESSIBLE state — locked tile with "apply for
         access" CTA. Kept; not currently used (all Hub cards open).

      6. APP-SWITCHER ANCHOR — dotted-grid icon button in each
         product's header. Wire-up landed across 115+ surfaces.

      7. CATEGORY-FILTER + SPLIT-SPINE BRIDGE (v1, 2026-05-16) —
         filter chip bar at the top (All / Personal / Business);
         Both-category apps render with vertical accent stripes on
         both left and right edges, bridging the two-column section
         layout when All is selected.

    Knox's multi-type-identity (Founder + Founding member + Admin
    staff role) is still the test case.

    What clicking a product card does (in production):
      • Routes to that product's primary surface
      • If product is locked: opens a "what is this product" surface
        OR an "apply for access" admin-application surface
      • If product is a placeholder: opens the placeholder explainer
  */

  /* =========================================================
     PAGE — Identity-magic-link-style focused canvas
     ========================================================= */

  /* Knox 2026-05-21: Hub redesigned as full-page Sanctom Gradient surface.
     This is the brand moment — the cinematic-register canvas for the
     entire Sanctom enterprise. Customer arrives → WOW → picks context. */
  .canvas {
    min-height: 100vh;
    background: var(--gradient-sanctom);
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
  }

  /* ═══ HEADER (top of page) ═══════════════════════════════════════
     Three-column layout: canonical Sanctom mark left · empty center
     · user identity card right. Knox 2026-05-21: replaces the prior
     centered-only strip; user identity moves out of the hero region.
     ════════════════════════════════════════════════════════════════ */
  .strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: var(--space-4) var(--space-7);
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .strip__lockup-left {
    display: flex; align-items: center; justify-content: flex-start;
  }
  /* Knox 2026-05-21: top-left lockup uses the canonical sanctom-lockup-vertical.svg
     (mark + wordmark stacked) — same canonical asset the My Org banner uses.
     Larger sizing reads as the brand anchor of the page. */
  .strip__mark-canonical {
    display: inline-block;
    width: 96px; height: 110px;
    -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iXzAxLUJyYW5kIiBkYXRhLW5hbWU9IjAxLUJyYW5kIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNDQwLjUiPgogIDxkZWZzPgogICAgCiAgPC9kZWZzPgogIDxnPgogICAgPHBhdGggZD0iTTM1MS41OSwzOTUuNzlsOS44My01MC4yNCwxNi4wMywzNi4zMiwxNi42MS0zNi4zMiw4LjgzLDUwLjI0aC03LjIzbC00LjUxLTI4LjIxLTEzLjgyLDMwLjM2LTEzLjQzLTMwLjM5LTUuMDIsMjguMjRoLTcuMjlaIj48L3BhdGg+CiAgICA8cGF0aCBkPSJNMjk4Ljk3LDM3MC43MWMwLTYuNTgsMi40MS0xMi4yMyw3LjIzLTE2Ljk1LDQuOC00LjcyLDEwLjU3LTcuMDgsMTcuMy03LjA4czEyLjM2LDIuMzgsMTcuMTIsNy4xNGM0Ljc4LDQuNzYsNy4xNywxMC40OCw3LjE3LDE3LjE2cy0yLjQsMTIuNDItNy4yLDE3LjFjLTQuODIsNC43LTEwLjY0LDcuMDUtMTcuNDUsNy4wNS02LjAzLDAtMTEuNDUtMi4wOS0xNi4yNC02LjI3LTUuMjgtNC42Mi03LjkzLTEwLjY3LTcuOTMtMTguMTZaTTMwNi4wOCwzNzAuOGMwLDUuMTcsMS43Myw5LjQxLDUuMiwxMi43NCwzLjQ1LDMuMzMsNy40Myw0Ljk5LDExLjk1LDQuOTksNC45LDAsOS4wMy0xLjcsMTIuNC01LjA4LDMuMzctMy40Myw1LjA1LTcuNjEsNS4wNS0xMi41M3MtMS42Ni05LjE2LTQuOTktMTIuNTNjLTMuMzEtMy4zOS03LjQtNS4wOC0xMi4yOC01LjA4cy04Ljk2LDEuNjktMTIuMzEsNS4wOGMtMy4zNSwzLjM1LTUuMDIsNy40OS01LjAyLDEyLjQxWiI+PC9wYXRoPgogICAgPHBhdGggZD0iTTI4OC40NSwzNTUuNTd2NDAuMWgtNy4wNXYtNDAuMWgtMTAuNzR2LTYuNjNoMjguNXY2LjYzaC0xMC43MVoiPjwvcGF0aD4KICAgIDxwYXRoIGQ9Ik0yNjIuODksMzQ5LjU1djguMzVjLTQuMDctMy40MS04LjI5LTUuMTItMTIuNjQtNS4xMi00LjgsMC04Ljg0LDEuNzMtMTIuMTMsNS4xOC0zLjMxLDMuNDMtNC45Niw3LjYzLTQuOTYsMTIuNTlzMS42NSw5LjA0LDQuOTYsMTIuNDFjMy4zMSwzLjM3LDcuMzYsNS4wNSwxMi4xNiw1LjA1LDIuNDgsMCw0LjU5LS40LDYuMzItMS4yMS45Ny0uNCwxLjk3LS45NSwzLjAxLTEuNjMsMS4wNC0uNjksMi4xMy0xLjUxLDMuMjgtMi40OHY4LjUxYy00LjAzLDIuMjgtOC4yNywzLjQyLTEyLjcxLDMuNDItNi42OCwwLTEyLjM3LTIuMzMtMTcuMDktNi45OS00LjctNC43LTcuMDUtMTAuMzctNy4wNS0xNy4wMSwwLTUuOTUsMS45Ny0xMS4yNiw1LjktMTUuOTIsNC44NC01LjcxLDExLjEtOC41NywxOC43OS04LjU3LDQuMTksMCw4LjI1LDEuMTQsMTIuMTYsMy40MloiPjwvcGF0aD4KICAgIDxwYXRoIGQ9Ik0xNzcuMTcsMzk1Ljc5di00OS45MWwzNC4wNiwzNS42NXYtMzIuNDhoNy4wNXY0OS41OGwtMzQuMDYtMzUuNTZ2MzIuNzJoLTcuMDVaIj48L3BhdGg+CiAgICA8cG9seWdvbiBwb2ludHM9IjE0OS4wNyAzNTkuNzYgMTY1LjkgMzk0Ljg4IDE3My4zOCAzOTQuODggMTQ4Ljk0IDM0NS4xMSAxMjQuNTEgMzk0Ljg4IDEzMi4yNCAzOTQuODggMTQ5LjA3IDM1OS43NiI+PC9wb2x5Z29uPgogICAgPHBhdGggZD0iTTExOS41LDM1My40OWwtNS43MiwzLjM5Yy0xLjA3LTEuODYtMi4wOS0zLjA3LTMuMDYtMy42My0xLjAxLS42NS0yLjMxLS45Ny0zLjktLjk3LTEuOTYsMC0zLjU4LjU2LTQuODcsMS42Ni0xLjI5LDEuMDktMS45NCwyLjQ2LTEuOTQsNC4xMiwwLDIuMjgsMS42OSw0LjEyLDUuMDgsNS41MWw0LjY2LDEuOTFjMy43OSwxLjUzLDYuNTYsMy40MSw4LjMyLDUuNjEsMS43NSwyLjIxLDIuNjMsNC45MiwyLjYzLDguMTMsMCw0LjMtMS40Myw3Ljg1LTQuMywxMC42NS0yLjg4LDIuODMtNi40Niw0LjI0LTEwLjc0LDQuMjQtNC4wNSwwLTcuNC0xLjItMTAuMDQtMy42LTIuNi0yLjQtNC4yMy01Ljc4LTQuODctMTAuMTRsNy4xNC0xLjU3Yy4zMiwyLjc0Ljg5LDQuNjQsMS42OSw1LjY5LDEuNDUsMi4wMiwzLjU3LDMuMDMsNi4zNSwzLjAzLDIuMiwwLDQuMDItLjc0LDUuNDgtMi4yMSwxLjQ1LTEuNDcsMi4xOC0zLjM0LDIuMTgtNS42LDAtLjkxLS4xMy0xLjc0LS4zOC0yLjUtLjI1LS43Ni0uNjUtMS40NS0xLjE4LTIuMDktLjUzLS42NC0xLjIzLTEuMjMtMi4wNy0xLjc5LS44NS0uNTUtMS44Ni0xLjA4LTMuMDMtMS41OWwtNC41MS0xLjg4Yy02LjM5LTIuNy05LjU5LTYuNjYtOS41OS0xMS44NiwwLTMuNTEsMS4zNC02LjQ1LDQuMDItOC44MSwyLjY4LTIuMzgsNi4wMi0zLjU3LDEwLjAxLTMuNTcsNS4zOCwwLDkuNTksMi42MiwxMi42MSw3Ljg3WiI+PC9wYXRoPgogICAgPHRleHQgY2xhc3M9ImNscy0xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDIuNDMgMzQzLjcxKSI+PHRzcGFuIHg9IjAiIHk9IjAiPlRNPC90c3Bhbj48L3RleHQ+CiAgPC9nPgogIDxnPgogICAgPHBvbHlnb24gcG9pbnRzPSIyNDcuODEgMTg0LjY3IDE3OS4yMiAzMjUuNTkgMzE2LjQgMzI1LjU5IDI0Ny44MSAxODQuNjciPjwvcG9seWdvbj4KICAgIDxwb2x5Z29uIHBvaW50cz0iMjQ4LjU2IDEyMSAzNDYuNjYgMzI1LjU5IDM5MC4yMSAzMjUuNTkgMjQ3LjgxIDM1LjcgMTA1LjQxIDMyNS41OSAxNTAuNDcgMzI1LjU5IDI0OC41NiAxMjEiPjwvcG9seWdvbj4KICA8L2c+Cjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iXzAxLUJyYW5kIiBkYXRhLW5hbWU9IjAxLUJyYW5kIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNDQwLjUiPgogIDxkZWZzPgogICAgCiAgPC9kZWZzPgogIDxnPgogICAgPHBhdGggZD0iTTM1MS41OSwzOTUuNzlsOS44My01MC4yNCwxNi4wMywzNi4zMiwxNi42MS0zNi4zMiw4LjgzLDUwLjI0aC03LjIzbC00LjUxLTI4LjIxLTEzLjgyLDMwLjM2LTEzLjQzLTMwLjM5LTUuMDIsMjguMjRoLTcuMjlaIj48L3BhdGg+CiAgICA8cGF0aCBkPSJNMjk4Ljk3LDM3MC43MWMwLTYuNTgsMi40MS0xMi4yMyw3LjIzLTE2Ljk1LDQuOC00LjcyLDEwLjU3LTcuMDgsMTcuMy03LjA4czEyLjM2LDIuMzgsMTcuMTIsNy4xNGM0Ljc4LDQuNzYsNy4xNywxMC40OCw3LjE3LDE3LjE2cy0yLjQsMTIuNDItNy4yLDE3LjFjLTQuODIsNC43LTEwLjY0LDcuMDUtMTcuNDUsNy4wNS02LjAzLDAtMTEuNDUtMi4wOS0xNi4yNC02LjI3LTUuMjgtNC42Mi03LjkzLTEwLjY3LTcuOTMtMTguMTZaTTMwNi4wOCwzNzAuOGMwLDUuMTcsMS43Myw5LjQxLDUuMiwxMi43NCwzLjQ1LDMuMzMsNy40Myw0Ljk5LDExLjk1LDQuOTksNC45LDAsOS4wMy0xLjcsMTIuNC01LjA4LDMuMzctMy40Myw1LjA1LTcuNjEsNS4wNS0xMi41M3MtMS42Ni05LjE2LTQuOTktMTIuNTNjLTMuMzEtMy4zOS03LjQtNS4wOC0xMi4yOC01LjA4cy04Ljk2LDEuNjktMTIuMzEsNS4wOGMtMy4zNSwzLjM1LTUuMDIsNy40OS01LjAyLDEyLjQxWiI+PC9wYXRoPgogICAgPHBhdGggZD0iTTI4OC40NSwzNTUuNTd2NDAuMWgtNy4wNXYtNDAuMWgtMTAuNzR2LTYuNjNoMjguNXY2LjYzaC0xMC43MVoiPjwvcGF0aD4KICAgIDxwYXRoIGQ9Ik0yNjIuODksMzQ5LjU1djguMzVjLTQuMDctMy40MS04LjI5LTUuMTItMTIuNjQtNS4xMi00LjgsMC04Ljg0LDEuNzMtMTIuMTMsNS4xOC0zLjMxLDMuNDMtNC45Niw3LjYzLTQuOTYsMTIuNTlzMS42NSw5LjA0LDQuOTYsMTIuNDFjMy4zMSwzLjM3LDcuMzYsNS4wNSwxMi4xNiw1LjA1LDIuNDgsMCw0LjU5LS40LDYuMzItMS4yMS45Ny0uNCwxLjk3LS45NSwzLjAxLTEuNjMsMS4wNC0uNjksMi4xMy0xLjUxLDMuMjgtMi40OHY4LjUxYy00LjAzLDIuMjgtOC4yNywzLjQyLTEyLjcxLDMuNDItNi42OCwwLTEyLjM3LTIuMzMtMTcuMDktNi45OS00LjctNC43LTcuMDUtMTAuMzctNy4wNS0xNy4wMSwwLTUuOTUsMS45Ny0xMS4yNiw1LjktMTUuOTIsNC44NC01LjcxLDExLjEtOC41NywxOC43OS04LjU3LDQuMTksMCw4LjI1LDEuMTQsMTIuMTYsMy40MloiPjwvcGF0aD4KICAgIDxwYXRoIGQ9Ik0xNzcuMTcsMzk1Ljc5di00OS45MWwzNC4wNiwzNS42NXYtMzIuNDhoNy4wNXY0OS41OGwtMzQuMDYtMzUuNTZ2MzIuNzJoLTcuMDVaIj48L3BhdGg+CiAgICA8cG9seWdvbiBwb2ludHM9IjE0OS4wNyAzNTkuNzYgMTY1LjkgMzk0Ljg4IDE3My4zOCAzOTQuODggMTQ4Ljk0IDM0NS4xMSAxMjQuNTEgMzk0Ljg4IDEzMi4yNCAzOTQuODggMTQ5LjA3IDM1OS43NiI+PC9wb2x5Z29uPgogICAgPHBhdGggZD0iTTExOS41LDM1My40OWwtNS43MiwzLjM5Yy0xLjA3LTEuODYtMi4wOS0zLjA3LTMuMDYtMy42My0xLjAxLS42NS0yLjMxLS45Ny0zLjktLjk3LTEuOTYsMC0zLjU4LjU2LTQuODcsMS42Ni0xLjI5LDEuMDktMS45NCwyLjQ2LTEuOTQsNC4xMiwwLDIuMjgsMS42OSw0LjEyLDUuMDgsNS41MWw0LjY2LDEuOTFjMy43OSwxLjUzLDYuNTYsMy40MSw4LjMyLDUuNjEsMS43NSwyLjIxLDIuNjMsNC45MiwyLjYzLDguMTMsMCw0LjMtMS40Myw3Ljg1LTQuMywxMC42NS0yLjg4LDIuODMtNi40Niw0LjI0LTEwLjc0LDQuMjQtNC4wNSwwLTcuNC0xLjItMTAuMDQtMy42LTIuNi0yLjQtNC4yMy01Ljc4LTQuODctMTAuMTRsNy4xNC0xLjU3Yy4zMiwyLjc0Ljg5LDQuNjQsMS42OSw1LjY5LDEuNDUsMi4wMiwzLjU3LDMuMDMsNi4zNSwzLjAzLDIuMiwwLDQuMDItLjc0LDUuNDgtMi4yMSwxLjQ1LTEuNDcsMi4xOC0zLjM0LDIuMTgtNS42LDAtLjkxLS4xMy0xLjc0LS4zOC0yLjUtLjI1LS43Ni0uNjUtMS40NS0xLjE4LTIuMDktLjUzLS42NC0xLjIzLTEuMjMtMi4wNy0xLjc5LS44NS0uNTUtMS44Ni0xLjA4LTMuMDMtMS41OWwtNC41MS0xLjg4Yy02LjM5LTIuNy05LjU5LTYuNjYtOS41OS0xMS44NiwwLTMuNTEsMS4zNC02LjQ1LDQuMDItOC44MSwyLjY4LTIuMzgsNi4wMi0zLjU3LDEwLjAxLTMuNTcsNS4zOCwwLDkuNTksMi42MiwxMi42MSw3Ljg3WiI+PC9wYXRoPgogICAgPHRleHQgY2xhc3M9ImNscy0xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDIuNDMgMzQzLjcxKSI+PHRzcGFuIHg9IjAiIHk9IjAiPlRNPC90c3Bhbj48L3RleHQ+CiAgPC9nPgogIDxnPgogICAgPHBvbHlnb24gcG9pbnRzPSIyNDcuODEgMTg0LjY3IDE3OS4yMiAzMjUuNTkgMzE2LjQgMzI1LjU5IDI0Ny44MSAxODQuNjciPjwvcG9seWdvbj4KICAgIDxwb2x5Z29uIHBvaW50cz0iMjQ4LjU2IDEyMSAzNDYuNjYgMzI1LjU5IDM5MC4yMSAzMjUuNTkgMjQ3LjgxIDM1LjcgMTA1LjQxIDMyNS41OSAxNTAuNDcgMzI1LjU5IDI0OC41NiAxMjEiPjwvcG9seWdvbj4KICA8L2c+Cjwvc3ZnPg==");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: left center;
    mask-position: left center;
    background-color: white;
  }
  .strip__user {
    display: flex; align-items: center; justify-content: flex-end;
  }

  /* User identity pill — top-right of header */
  .user-card {
    display: inline-flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .user-card__avatar {
    width: 30px; height: 30px;
    border-radius: var(--radius-pill);
    background: var(--vibrant-yellow);
    color: var(--sanctom-navy);
    font-family: 'Inter', system-ui, sans-serif; font-weight: 900; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .user-card__name {
    font-family: 'Inter', system-ui, sans-serif; font-size: 13px;
    color: white; font-weight: 600;
  }
  .user-card__email {
    font-family: var(--font-mono); font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
  }
  .user-card__signout {
    background: transparent; border: none;
    color: rgba(255, 255, 255, 0.6); cursor: pointer;
    padding: 0 var(--space-2);
    font-family: var(--font-body); font-size: 11px;
    text-decoration: underline;
  }
  .user-card__signout:hover { color: white; }

  /* ═══ BRAND BANNER — Knox 2026-05-21 R2: lives inside the header strip's
     center column now, not as a standalone hero region. Wordmark shrunk +
     HUB label larger + tighter vertical stack so the combo fits in header
     height alongside the lockup-left + user-pill-right.
     ════════════════════════════════════════════════════════════════ */
  .hub-brand-banner {
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 0;
  }
  .hub-brand-banner__wordmark {
    display: inline-block;
    width: 260px;
    height: 64px;
    -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iXzAxLUJyYW5kIiBkYXRhLW5hbWU9IjAxLUJyYW5kIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMjc3LjM5IDYwMCI+CiAgPGRlZnM+CiAgICAKICA8L2RlZnM+CiAgPHBhdGggZD0iTTE3NzEuMDksNDcxLjk0bDYzLjgtMzI1Ljg3LDEwNC4wNCwyMzUuNTYsMTA3Ljc3LTIzNS41Niw1Ny4zMiwzMjUuODdoLTQ2LjkybC0yOS4yNS0xODIuOTYtODkuNzEsMTk2Ljg5LTg3LjE2LTE5Ny4wOS0zMi41OSwxODMuMTVoLTQ3LjMxWiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0xNDQ3LjI0LDMxNC43YzAtNDIuNjYsMTUuNjQtNzkuMzEsNDYuOTItMTA5LjkzLDMxLjE0LTMwLjYyLDY4LjU3LTQ1Ljk0LDExMi4yOS00NS45NHM4MC4yMiwxNS40NCwxMTEuMTEsNDYuMzNjMzEuMDIsMzAuODksNDYuNTIsNjcuOTksNDYuNTIsMTExLjNzLTE1LjU4LDgwLjU1LTQ2LjcyLDExMC45MWMtMzEuMjgsMzAuNDktNjkuMDMsNDUuNzQtMTEzLjI3LDQ1Ljc0LTM5LjEzLDAtNzQuMjctMTMuNTQtMTA1LjQyLTQwLjYzLTM0LjI5LTI5Ljk3LTUxLjQzLTY5LjIzLTUxLjQzLTExNy43OFpNMTQ5My4zNywzMTUuMjljMCwzMy41LDExLjI1LDYxLjA1LDMzLjc2LDgyLjY0LDIyLjM4LDIxLjU5LDQ4LjIyLDMyLjM5LDc3LjU0LDMyLjM5LDMxLjgsMCw1OC42My0xMC45OSw4MC40OC0zMi45OCwyMS44NS0yMi4yNSwzMi43OC00OS4zNCwzMi43OC04MS4yN3MtMTAuOC01OS40MS0zMi4zOS04MS4yN2MtMjEuNDctMjEuOTktNDguMDMtMzIuOTgtNzkuNy0zMi45OHMtNTguMTcsMTAuOTktNzkuOSwzMi45OGMtMjEuNzMsMjEuNzMtMzIuNTksNDguNTUtMzIuNTksODAuNDhaIj48L3BhdGg+CiAgPHBhdGggZD0iTTEzODEuNTUsMjA3LjQydjI2MC4xaC00NS43NFYyMDcuNDJoLTY5LjY5di00Mi45OWgxODQuOTJ2NDIuOTloLTY5LjQ5WiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0xMjMwLjExLDE4MC45MnY1NC4xOGMtMjYuNDQtMjIuMTEtNTMuNzktMzMuMTgtODIuMDYtMzMuMTgtMzEuMTUsMC01Ny4zOSwxMS4xOS03OC43MiwzMy41Ny0yMS40NywyMi4yNS0zMi4xOSw0OS40Ny0zMi4xOSw4MS42NnMxMC43Myw1OC42MywzMi4xOSw4MC40OGMyMS40NiwyMS44Niw0Ny43NywzMi43OCw3OC45MSwzMi43OCwxNi4xLDAsMjkuNzctMi42Miw0MS4wMy03Ljg1LDYuMjgtMi42MiwxMi43OS02LjE1LDE5LjUzLTEwLjYsNi43NC00LjQ1LDEzLjg0LTkuODIsMjEuMy0xNi4xdjU1LjE2Yy0yNi4xOCwxNC43OS01My42NiwyMi4xOC04Mi40NSwyMi4xOC00My4zMiwwLTgwLjI5LTE1LjEyLTExMC45MS00NS4zNS0zMC41LTMwLjQ5LTQ1Ljc0LTY3LjI3LTQ1Ljc0LTExMC4zMiwwLTM4LjYsMTIuNzYtNzMuMDMsMzguMjgtMTAzLjI2LDMxLjQxLTM3LjAzLDcyLjA0LTU1LjU1LDEyMS45LTU1LjU1LDI3LjIyLDAsNTMuNTIsNy40LDc4LjkxLDIyLjE4WiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik02ODMuODYsNDY4LjZWMTQ0Ljg5bDIyMS4wNCwyMzEuMjV2LTIxMC42M2g0NS43NHYzMjEuNTVsLTIyMS4wNC0yMzAuNjZ2MjEyLjIxaC00NS43NFoiPjwvcGF0aD4KICA8cG9seWdvbiBwb2ludHM9IjUwNC45OSAyNDkuNTYgNjE0LjIyIDQ3Ny4zNyA2NjIuNzEgNDc3LjM3IDUwNC4xNSAxNTQuNTcgMzQ1LjU4IDQ3Ny4zNyAzOTUuNzYgNDc3LjM3IDUwNC45OSAyNDkuNTYiPjwvcG9seWdvbj4KICA8cGF0aCBkPSJNMzM2LDIwOS43N2wtMzcuMSwyMS45OWMtNi45NC0xMi4wNC0xMy41NC0xOS44OS0xOS44My0yMy41Ni02LjU1LTQuMTktMTQuOTktNi4yOC0yNS4zMi02LjI4LTEyLjcsMC0yMy4yMywzLjYtMzEuNiwxMC44LTguMzgsNy4wNy0xMi41NiwxNS45Ny0xMi41NiwyNi43LDAsMTQuNzksMTAuOTksMjYuNywzMi45OCwzNS43M2wzMC4yMywxMi4zN2MyNC42LDkuOTUsNDIuNiwyMi4wOCw1My45OCwzNi40MSwxMS4zOSwxNC4zMywxNy4wOCwzMS45LDE3LjA4LDUyLjcxLDAsMjcuODgtOS4yOSw1MC45MS0yNy44OCw2OS4xLTE4LjcyLDE4LjMyLTQxLjk0LDI3LjQ4LTY5LjY5LDI3LjQ4LTI2LjMsMC00OC4wMy03Ljc5LTY1LjE3LTIzLjM2LTE2Ljg4LTE1LjU3LTI3LjQyLTM3LjQ5LTMxLjYtNjUuNzZsNDYuMzMtMTAuMjFjMi4wOSwxNy44LDUuNzYsMzAuMSwxMC45OSwzNi45MSw5LjQyLDEzLjA5LDIzLjE2LDE5LjYzLDQxLjIyLDE5LjYzLDE0LjI2LDAsMjYuMTEtNC43OCwzNS41My0xNC4zMyw5LjQyLTkuNTUsMTQuMTMtMjEuNjYsMTQuMTMtMzYuMzIsMC01Ljg5LS44Mi0xMS4yOS0yLjQ1LTE2LjItMS42NC00LjkxLTQuMTktOS40Mi03LjY2LTEzLjU0LTMuNDctNC4xMi03Ljk1LTcuOTgtMTMuNDUtMTEuNTgtNS41LTMuNi0xMi4wNC03LjAzLTE5LjYzLTEwLjMxbC0yOS4yNS0xMi4xN2MtNDEuNDktMTcuNTQtNjIuMjMtNDMuMTktNjIuMjMtNzYuOTUsMC0yMi43Nyw4LjctNDEuODEsMjYuMTEtNTcuMTIsMTcuNC0xNS40NCwzOS4wNi0yMy4xNiw2NC45OC0yMy4xNiwzNC45NCwwLDYyLjIzLDE3LjAxLDgxLjg2LDUxLjA0WiI+PC9wYXRoPgogIDx0ZXh0IGNsYXNzPSJjbHMtMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjEwNi4zNiAxNDguNikiPjx0c3BhbiB4PSIwIiB5PSIwIj5UTTwvdHNwYW4+PC90ZXh0Pgo8L3N2Zz4=");
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iXzAxLUJyYW5kIiBkYXRhLW5hbWU9IjAxLUJyYW5kIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMjc3LjM5IDYwMCI+CiAgPGRlZnM+CiAgICAKICA8L2RlZnM+CiAgPHBhdGggZD0iTTE3NzEuMDksNDcxLjk0bDYzLjgtMzI1Ljg3LDEwNC4wNCwyMzUuNTYsMTA3Ljc3LTIzNS41Niw1Ny4zMiwzMjUuODdoLTQ2LjkybC0yOS4yNS0xODIuOTYtODkuNzEsMTk2Ljg5LTg3LjE2LTE5Ny4wOS0zMi41OSwxODMuMTVoLTQ3LjMxWiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0xNDQ3LjI0LDMxNC43YzAtNDIuNjYsMTUuNjQtNzkuMzEsNDYuOTItMTA5LjkzLDMxLjE0LTMwLjYyLDY4LjU3LTQ1Ljk0LDExMi4yOS00NS45NHM4MC4yMiwxNS40NCwxMTEuMTEsNDYuMzNjMzEuMDIsMzAuODksNDYuNTIsNjcuOTksNDYuNTIsMTExLjNzLTE1LjU4LDgwLjU1LTQ2LjcyLDExMC45MWMtMzEuMjgsMzAuNDktNjkuMDMsNDUuNzQtMTEzLjI3LDQ1Ljc0LTM5LjEzLDAtNzQuMjctMTMuNTQtMTA1LjQyLTQwLjYzLTM0LjI5LTI5Ljk3LTUxLjQzLTY5LjIzLTUxLjQzLTExNy43OFpNMTQ5My4zNywzMTUuMjljMCwzMy41LDExLjI1LDYxLjA1LDMzLjc2LDgyLjY0LDIyLjM4LDIxLjU5LDQ4LjIyLDMyLjM5LDc3LjU0LDMyLjM5LDMxLjgsMCw1OC42My0xMC45OSw4MC40OC0zMi45OCwyMS44NS0yMi4yNSwzMi43OC00OS4zNCwzMi43OC04MS4yN3MtMTAuOC01OS40MS0zMi4zOS04MS4yN2MtMjEuNDctMjEuOTktNDguMDMtMzIuOTgtNzkuNy0zMi45OHMtNTguMTcsMTAuOTktNzkuOSwzMi45OGMtMjEuNzMsMjEuNzMtMzIuNTksNDguNTUtMzIuNTksODAuNDhaIj48L3BhdGg+CiAgPHBhdGggZD0iTTEzODEuNTUsMjA3LjQydjI2MC4xaC00NS43NFYyMDcuNDJoLTY5LjY5di00Mi45OWgxODQuOTJ2NDIuOTloLTY5LjQ5WiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0xMjMwLjExLDE4MC45MnY1NC4xOGMtMjYuNDQtMjIuMTEtNTMuNzktMzMuMTgtODIuMDYtMzMuMTgtMzEuMTUsMC01Ny4zOSwxMS4xOS03OC43MiwzMy41Ny0yMS40NywyMi4yNS0zMi4xOSw0OS40Ny0zMi4xOSw4MS42NnMxMC43Myw1OC42MywzMi4xOSw4MC40OGMyMS40NiwyMS44Niw0Ny43NywzMi43OCw3OC45MSwzMi43OCwxNi4xLDAsMjkuNzctMi42Miw0MS4wMy03Ljg1LDYuMjgtMi42MiwxMi43OS02LjE1LDE5LjUzLTEwLjYsNi43NC00LjQ1LDEzLjg0LTkuODIsMjEuMy0xNi4xdjU1LjE2Yy0yNi4xOCwxNC43OS01My42NiwyMi4xOC04Mi40NSwyMi4xOC00My4zMiwwLTgwLjI5LTE1LjEyLTExMC45MS00NS4zNS0zMC41LTMwLjQ5LTQ1Ljc0LTY3LjI3LTQ1Ljc0LTExMC4zMiwwLTM4LjYsMTIuNzYtNzMuMDMsMzguMjgtMTAzLjI2LDMxLjQxLTM3LjAzLDcyLjA0LTU1LjU1LDEyMS45LTU1LjU1LDI3LjIyLDAsNTMuNTIsNy40LDc4LjkxLDIyLjE4WiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik02ODMuODYsNDY4LjZWMTQ0Ljg5bDIyMS4wNCwyMzEuMjV2LTIxMC42M2g0NS43NHYzMjEuNTVsLTIyMS4wNC0yMzAuNjZ2MjEyLjIxaC00NS43NFoiPjwvcGF0aD4KICA8cG9seWdvbiBwb2ludHM9IjUwNC45OSAyNDkuNTYgNjE0LjIyIDQ3Ny4zNyA2NjIuNzEgNDc3LjM3IDUwNC4xNSAxNTQuNTcgMzQ1LjU4IDQ3Ny4zNyAzOTUuNzYgNDc3LjM3IDUwNC45OSAyNDkuNTYiPjwvcG9seWdvbj4KICA8cGF0aCBkPSJNMzM2LDIwOS43N2wtMzcuMSwyMS45OWMtNi45NC0xMi4wNC0xMy41NC0xOS44OS0xOS44My0yMy41Ni02LjU1LTQuMTktMTQuOTktNi4yOC0yNS4zMi02LjI4LTEyLjcsMC0yMy4yMywzLjYtMzEuNiwxMC44LTguMzgsNy4wNy0xMi41NiwxNS45Ny0xMi41NiwyNi43LDAsMTQuNzksMTAuOTksMjYuNywzMi45OCwzNS43M2wzMC4yMywxMi4zN2MyNC42LDkuOTUsNDIuNiwyMi4wOCw1My45OCwzNi40MSwxMS4zOSwxNC4zMywxNy4wOCwzMS45LDE3LjA4LDUyLjcxLDAsMjcuODgtOS4yOSw1MC45MS0yNy44OCw2OS4xLTE4LjcyLDE4LjMyLTQxLjk0LDI3LjQ4LTY5LjY5LDI3LjQ4LTI2LjMsMC00OC4wMy03Ljc5LTY1LjE3LTIzLjM2LTE2Ljg4LTE1LjU3LTI3LjQyLTM3LjQ5LTMxLjYtNjUuNzZsNDYuMzMtMTAuMjFjMi4wOSwxNy44LDUuNzYsMzAuMSwxMC45OSwzNi45MSw5LjQyLDEzLjA5LDIzLjE2LDE5LjYzLDQxLjIyLDE5LjYzLDE0LjI2LDAsMjYuMTEtNC43OCwzNS41My0xNC4zMyw5LjQyLTkuNTUsMTQuMTMtMjEuNjYsMTQuMTMtMzYuMzIsMC01Ljg5LS44Mi0xMS4yOS0yLjQ1LTE2LjItMS42NC00LjkxLTQuMTktOS40Mi03LjY2LTEzLjU0LTMuNDctNC4xMi03Ljk1LTcuOTgtMTMuNDUtMTEuNTgtNS41LTMuNi0xMi4wNC03LjAzLTE5LjYzLTEwLjMxbC0yOS4yNS0xMi4xN2MtNDEuNDktMTcuNTQtNjIuMjMtNDMuMTktNjIuMjMtNzYuOTUsMC0yMi43Nyw4LjctNDEuODEsMjYuMTEtNTcuMTIsMTcuNC0xNS40NCwzOS4wNi0yMy4xNiw2NC45OC0yMy4xNiwzNC45NCwwLDYyLjIzLDE3LjAxLDgxLjg2LDUxLjA0WiI+PC9wYXRoPgogIDx0ZXh0IGNsYXNzPSJjbHMtMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjEwNi4zNiAxNDguNikiPjx0c3BhbiB4PSIwIiB5PSIwIj5UTTwvdHNwYW4+PC90ZXh0Pgo8L3N2Zz4=");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--vibrant-yellow);
  }
  .hub-brand-banner__product {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: white;
    margin-top: -4px;
    line-height: 1.0;
  }

  /* Hub body */
  .hub {
    flex: 1;
    padding: 0 var(--space-7) var(--space-8);
    max-width: 1480px;
    margin: 0 auto;
    width: 100%;
  }
  /* =========================================================
     CATEGORY-FILTER chip bar (v1)
     ========================================================= */

  /* Knox 2026-05-21 R3: more breathing room above + below the tab band */
  .filter-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-7) auto var(--space-7);
  }
  .filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px var(--space-4);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: 11px;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--ink-700) 10%, transparent);
    color: var(--ink-600);
    cursor: pointer;
    transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
  }
  /* Knox 2026-05-21: filter chips restyled for gradient backdrop */
  .filter-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .filter-chip:hover {
    border-color: rgba(255, 255, 255, 0.34);
    color: white;
    background: rgba(255, 255, 255, 0.10);
  }
  .filter-chip.active {
    background: var(--vibrant-yellow);
    color: var(--sanctom-navy);
    border-color: var(--vibrant-yellow);
    font-weight: 700;
  }
  .filter-chip__count {
    font-family: var(--font-mono); font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
  }
  .filter-chip.active .filter-chip__count {
    background: rgba(1, 28, 66, 0.18);
    color: var(--sanctom-navy);
  }

  /* =========================================================
     HUB GRID — three vertical sections (Knox 2026-05-21 reorg)
       1. Sanctom OS (premiere — 3 products in the OS family)
       2. Core Apps (customer-facing — 5 apps)
       3. Internal / Staff (Sanctom-internal only — 3 utility surfaces)

     Removed (Knox 2026-05-21):
       - Bridge layout (Relations no longer bridges Personal/Business)
       - Personal/Business categorization (collapsed; Relations is now
         a Core App alongside Pro/Growth/LifeTracers/Legacy)
       - Sanctom Platform card (no UI)
       - Sanctom Factory card (no UI)
       - Agent Manager v0.1 card (deprecated; v1.0 in OS section)
     ========================================================= */

  /* Knox 2026-05-21: zero gap on hub-grid; divider spacing handled
     entirely by .hub-section:not(:first-child) padding-top so it's
     symmetric above + below the line. */
  .hub-grid {
    display: flex; flex-direction: column;
    gap: 0;
    align-items: stretch;
    margin-top: var(--space-7);   /* top breathing room (was provided by the now-removed filter bar) */
  }

  .hub-section {
    display: flex; flex-direction: column;
    gap: var(--space-3);
  }

  /* Knox 2026-05-21: section pills removed — the filter tabs at the top carry
     the section-naming weight. Sections now separated by subtle horizontal
     dividers with SYMMETRIC vertical breathing on both sides of the line. */
  .hub-section__head { display: none; }
  .hub-section:not(:first-child) {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hub-section__cards {
    display: grid;
    gap: var(--space-3);
  }
  /* Sanctom OS — 3 products on one row (Knox 2026-06-04; Executive removed). */
  .hub-section--os .hub-section__cards {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Mind & Soul — the heart of Sanctom (2 cards, side by side, prominent). */
  .hub-section--heart .hub-section__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Core Apps (6 cards) — 3-up on wide → 2 → 1 */
  .hub-section--core-apps .hub-section__cards {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Partner + Platform — commercial control planes (2 cards). */
  .hub-section--commercial .hub-section__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Internal section (3 products) — 3-col */
  .hub-section--internal .hub-section__cards {
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 1200px) {
    .hub-section--os .hub-section__cards { grid-template-columns: repeat(3, 1fr); }
    .hub-section--core-apps .hub-section__cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 960px) {
    .hub-section--os .hub-section__cards,
    .hub-section--internal .hub-section__cards,
    .hub-section--cross-platform .hub-section__cards,
    .hub-section--core-apps .hub-section__cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .hub-section--os .hub-section__cards,
    .hub-section--os-umbrella .hub-section__cards,
    .hub-section--heart .hub-section__cards,
    .hub-section--commercial .hub-section__cards,
    .hub-section--cross-platform .hub-section__cards,
    .hub-section--internal .hub-section__cards,
    .hub-section--core-apps .hub-section__cards { grid-template-columns: 1fr; }
  }

  /* Heart-of-Sanctom section — Mind & Soul get a visible centered eyebrow + a
     soft accent glow on the cards (the org's center). Knox 2026-06-04. */
  .hub-section--heart .hub-section__head { display: flex; justify-content: center; margin-bottom: var(--space-2); }
  .heart-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.82);
  }
  .heart-eyebrow::before, .heart-eyebrow::after { content: ""; width: 22px; height: 1px; background: rgba(255,255,255,0.3); }
  .hub-section--heart .product-card { box-shadow: 0 0 50px -16px color-mix(in srgb, var(--card-accent) 55%, transparent); }

  /* Sanctom OS umbrella (Knox 2026-06-05) — OS is the top-level licensed product;
     Mind + Soul are its two sub-products. The global rule hides section heads, so
     un-hide this one to show the OS logo + the umbrella tagline. */
  .hub-section--os-umbrella .hub-section__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); text-align: center; }
  .hub-os__logo { height: 40px; width: auto; }
  .hub-os__tagline { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.74); max-width: 580px; margin: 0; }
  .hub-section--os-umbrella .hub-section__cards { grid-template-columns: repeat(2, 1fr); }

  /* Section titles for Apps + Cross-Platform Apps (Knox 2026-06-09) — un-hide the
     globally-hidden head; render the pill as a left-aligned section eyebrow. */
  .hub-section--core-apps .hub-section__head,
  .hub-section--cross-platform .hub-section__head,
  .hub-section--internal .hub-section__head { display: flex; margin-bottom: var(--space-3); }
  .hub-section__title-pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
  }
  .hub-section__title-pill__count {
    font-size: 10px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 2px 8px;
  }
  /* Cross-Platform Apps (5 cards) — 3-up on wide, mirrors core-apps responsive */
  .hub-section--cross-platform .hub-section__cards { grid-template-columns: repeat(3, 1fr); }
  .hub-section--os-umbrella .product-card { box-shadow: 0 0 50px -16px color-mix(in srgb, var(--card-accent) 55%, transparent); }
  .product-card__role { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--card-accent); margin-bottom: 6px; }
  /* Sanctom OS hero card — its own full-size card spanning the row (the umbrella
     product); Mind + Soul sit beneath as the two sub-products. Gradient top-bar
     marks it as the parent. Knox 2026-06-05. */
  .product-card.sanctom-os-card { grid-column: 1 / -1; align-items: center; --card-accent: var(--vibrant-yellow); }
  .product-card.sanctom-os-card::before { background: var(--gradient-sanctom); height: 5px; }
  .product-card.sanctom-os-card .product-card__logo { max-width: 220px; margin-top: var(--space-3); }
  .product-card.sanctom-os-card .product-card__body { max-width: 620px; margin: 0 auto; }
  .product-card.sanctom-os-card .product-card__tagline { font-size: 14px; line-height: 1.55; }

  /* Internal section — more translucent so they recede behind customer-facing apps */
  .hub-section--internal .product-card { background: rgba(0, 0, 0, 0.20); border-color: rgba(255, 255, 255, 0.08); }
  .hub-section--internal .product-card:hover { background: rgba(0, 0, 0, 0.32); }
  .hub-section--internal .product-card__name { color: rgba(255, 255, 255, 0.86); }
  .hub-section--internal .product-card__name::after {
    content: 'Internal';
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    vertical-align: 3px;
  }

  /* =========================================================
     PRODUCT CARD with PER-PRODUCT-IDENTITY CONTEXT
     ========================================================= */

  /* Knox 2026-05-21: cards redesigned for gradient backdrop.
     Dark-glass base with per-card vibrant identity color.
     The gradient is the hero; cards are jewels embedded in it. */
  .product-card {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: var(--space-3) var(--space-4);
    display: flex; flex-direction: column;
    gap: var(--space-2);
    text-decoration: none; color: white;
    transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2), background var(--dur-2);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .product-card:hover {
    border-color: color-mix(in srgb, var(--card-accent, white) 60%, transparent);
    box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--card-accent, white) 40%, transparent);
    transform: translateY(-3px);
    background: rgba(0, 0, 0, 0.42);
  }
  .product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--card-accent, white);
  }
  .product-card--locked {
    background: color-mix(in srgb, var(--ink-700) 3%, var(--surface));
    border-style: dashed;
    cursor: not-allowed;
  }
  .product-card--locked:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--ink-700) 22%, transparent);
  }
  .product-card--locked::before { background: var(--ink-400); }

  /* Discover variant — Mira-Craft 2026-07-01 (App Kit Hub Kit, per Sanctom
     Mind Visual Kit Designs v0.1 §7). For tiles the user has PRIVILEGE to
     see but lacks the LICENSE/subscription to use — distinct from
     --locked (no privilege at all, tile wouldn't render in the first
     place). Additive modifier, same family as --locked/--placeholder;
     no new component. */
  .product-card--discover {
    border-style: solid;
    border-color: color-mix(in srgb, var(--card-accent) 55%, transparent);
    background: color-mix(in srgb, var(--card-accent) 10%, var(--surface));
  }
  .product-card--discover::before { background: var(--card-accent); }
  .discover-badge {
    display: inline-flex; align-items: center;
    font-family: var(--font-mono); font-size: 9px;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    background: var(--card-accent);
    color: var(--sanctom-navy);
    border-radius: var(--radius-pill);
    margin-left: auto;
  }

  /* Placeholder variant — for cards that don't have a product surface
     yet but reserve their place in the categorization */
  .product-card--placeholder {
    background: color-mix(in srgb, var(--card-accent) 3%, var(--surface));
    border-style: dashed;
    border-color: color-mix(in srgb, var(--card-accent) 30%, transparent);
  }
  .product-card--placeholder .product-card__mark {
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 70%, var(--ink-400)), color-mix(in srgb, var(--card-accent) 40%, var(--ink-600)));
  }
  .product-card--placeholder .product-card__entry-label {
    color: var(--ink-500);
  }
  .placeholder-badge {
    display: inline-flex; align-items: center;
    font-family: var(--font-mono); font-size: 9px;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--ink-700) 8%, transparent);
    color: var(--ink-600);
    border: 1px solid color-mix(in srgb, var(--ink-700) 14%, transparent);
    border-radius: var(--radius-pill);
    margin-left: auto;
  }

  /* Bridge variant — Both-category cards. Split-spine treatment:
     accent stripes on BOTH left and right edges, signaling the card
     sits on the divide. Combined with grid-column: 1 / -1 in All view
     for the literal bridging effect. */
  .product-card--bridge {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--card-accent-left) 6%, var(--surface)),
      var(--surface) 45%,
      var(--surface) 55%,
      color-mix(in srgb, var(--card-accent-right) 6%, var(--surface)));
    border-color: color-mix(in srgb, var(--card-accent-left) 24%, transparent);
    border-left: 3px solid var(--card-accent-left);
    border-right: 3px solid var(--card-accent-right);
  }
  /* Suppress the top stripe on bridge cards — the left+right stripes are the affordance */
  .product-card--bridge::before { display: none; }
  .product-card--bridge:hover {
    border-color: color-mix(in srgb, var(--card-accent-left) 40%, transparent);
    border-left-color: var(--card-accent-left);
    border-right-color: var(--card-accent-right);
  }

  /* Bridge eyebrow (sits at top, signals the cross-category context) */
  .product-card__bridge-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 10px;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-700);
    align-self: flex-start;
  }
  .product-card__bridge-eyebrow .left {
    color: var(--card-accent-left);
  }
  .product-card__bridge-eyebrow .right {
    color: var(--card-accent-right);
  }
  .product-card__bridge-eyebrow .divider {
    width: 18px; height: 1px;
    background: linear-gradient(90deg, var(--card-accent-left), var(--card-accent-right));
  }

  /* Knox 2026-05-21 vibrant recalibration — each card's identity color is a canonical
     Sanctom Vibrant Palette accent. Renders as the top stripe (4px) + mark tile bg +
     hover-glow shadow. Visual mosaic effect — distinct apps but all sharing the gradient register. */

  /* Sanctom OS section (4 products) — the flagship colors */
  .product-card.sanctom-os    { --card-accent: var(--sanctom-purple); }      /* Studio — purple/spirit */
  .product-card.agent-manager { --card-accent: var(--vibrant-blue); }        /* AM — bright blue / clarity */
  .product-card.sanctom-monitor { --card-accent: var(--vibrant-lime); }      /* Monitor — lime green / alive */
  /* Mind & Soul — the heart center (Knox 2026-06-04; accents from their logos) */
  .product-card.mind  { --card-accent: var(--vibrant-lime); }     /* Mind — teal-green (perception / clarity) */
  .product-card.soul  { --card-accent: var(--sanctom-purple); }   /* Soul — purple (memory / meaning) */
  /* Partner + Platform — commercial control planes (accents from their logos) */
  .product-card.partner  { --card-accent: var(--vibrant-orange); }    /* Partner — orange */
  .product-card.platform { --card-accent: var(--vibrant-blue-soft); } /* Platform — light blue */
  /* Cross-Platform Apps additions (Knox 2026-06-09) — accents from each app's shell */
  .product-card.account  { --card-accent: var(--vibrant-lime); }      /* Account — lime */
  .product-card.agent    { --card-accent: var(--vibrant-orange); }    /* Agent — orange */
  .product-card.heard    { --card-accent: var(--vibrant-blue); }      /* Heard — blue */

  /* Apps section (5 customer-facing) — vibrant accent rotation
     Knox 2026-05-25: Relations reassigned from #FF59A8 to --sanctom-bright-pink (#FB9CE5)
     because pink-strong now belongs to Sanctom OS Executive (4th OS product). */
  /* Relations + Legacy accents re-matched to their updated logo colors (Knox 2026-06-04) */
  .product-card.relations    { --card-accent: var(--vibrant-pink-strong); }  /* hot pink — matches new Relations logo (#FF59A8) */
  .product-card.pro          { --card-accent: var(--vibrant-orange); }       /* energy + professional */
  .product-card.growth       { --card-accent: var(--vibrant-yellow); }       /* growth + life */
  .product-card.lifetracers,
  .product-card.life         { --card-accent: var(--vibrant-blue-soft); }    /* clarity + breath + path */
  .product-card.legacy       { --card-accent: var(--sanctom-purple); }       /* purple — matches new Legacy logo (#B30FFA) */
  /* Wallet (Knox 2026-06-04) — same canonized color as OS Monitor: --vibrant-lime (#34E8BB). */
  .product-card.wallet       { --card-accent: var(--vibrant-lime); }         /* balance + value */

  /* Internal section (3 staff-only) — restrained whites/grays so they don't crowd the apps */
  .product-card.admin    { --card-accent: rgba(255, 255, 255, 0.5); }
  .product-card.identity { --card-accent: rgba(255, 255, 255, 0.5); }
  .product-card.skills   { --card-accent: rgba(255, 255, 255, 0.5); }

  .product-card__head {
    display: flex; align-items: center; gap: var(--space-3);
  }
  /* Mark tile — solid vibrant identity color with navy text inside */
  .product-card__mark {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--card-accent);
    color: var(--sanctom-navy);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: 'Inter', system-ui, sans-serif; font-weight: 900; font-size: 14px;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--card-accent) 60%, transparent);
  }
  .product-card__head-body { min-width: 0; flex: 1; }
  .product-card__name {
    font-family: 'Inter', system-ui, sans-serif; font-size: 15px;
    color: white; font-weight: 800; margin: 0; line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .product-card__tagline {
    font-size: 11.5px; color: rgba(255, 255, 255, 0.72);
    margin-top: 4px; line-height: 1.45;
  }

  /* Logo card — VERTICAL tile (Knox 2026-06-04): the new product lockups are
     vertical (Sanctom mark stacked above the wordmark), so the card stacks too —
     logo centered on top · description · Open link at the bottom. This lets all
     four OS products sit on one row on wide screens. The approved transparent
     PNG sits on the dark glass card; accent top border (.product-card::before)
     + accent Open link carry over unchanged. */
  .product-card--logo {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .product-card__logo {
    flex: 0 0 auto;
    width: 100%;
    max-width: 188px;
    height: auto;
    align-self: center;          /* logo stands centered on top */
    object-fit: contain;
    object-position: center;
    margin: var(--space-2) auto 0;
  }
  .product-card--logo .product-card__body {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column;
    text-align: center;          /* tagline centered under the centered logo */
  }
  .product-card--logo .product-card__tagline { margin: 0; }
  .product-card--logo .product-card__entry {
    margin-top: auto;            /* push to bottom */
    justify-content: center;     /* Open link centered at the bottom */
    padding-top: var(--space-3);
  }

  /* Identity context line — hidden in compact layout */
  .product-card__identity { display: none; }

  /* Recent activity hints — compact, first hint only */
  .product-card__activity {
    margin-top: 0;
    display: flex; flex-direction: column;
    gap: 4px;
  }
  .product-card__activity-title { display: none; }
  .product-card__activity .activity-hint:nth-child(n+3) { display: none; }
  .activity-hint {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.4;
  }
  .activity-hint__dot {
    width: 6px; height: 6px;
    border-radius: var(--radius-pill);
    background: var(--card-accent);
    flex-shrink: 0;
  }
  .activity-hint__dot--neutral { background: rgba(255, 255, 255, 0.32); }
  .activity-hint__dot--flag { background: var(--vibrant-orange); }
  .activity-hint strong { color: white; font-weight: 700; }

  /* Entry affordance */
  .product-card__entry {
    margin-top: auto;
    padding-top: var(--space-2);
    display: flex; align-items: center; justify-content: space-between;
  }
  .product-card__entry-label {
    font-family: 'Inter', system-ui, sans-serif; font-size: 11px;
    color: var(--card-accent); font-weight: 700; letter-spacing: 0.02em;
  }
  .product-card__entry svg { stroke: var(--card-accent); }
  .product-card--bridge .product-card__entry-label {
    background: linear-gradient(90deg, var(--card-accent-left), var(--card-accent-right));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .product-card__entry svg {
    width: 12px; height: 12px;
    color: var(--card-accent);
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--dur-2);
  }
  .product-card:hover .product-card__entry svg {
    transform: translateX(3px);
  }

  /* "Also Business / Also Personal" badge on Relations when filter is single */
  .also-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-mono); font-size: 9px;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--card-accent-right) 10%, transparent);
    color: var(--card-accent-right);
    border: 1px solid color-mix(in srgb, var(--card-accent-right) 28%, transparent);
    margin-left: auto;
  }
  .also-badge--business { background: color-mix(in srgb, var(--card-accent-right) 10%, transparent); color: var(--card-accent-right); border-color: color-mix(in srgb, var(--card-accent-right) 28%, transparent); }
  .also-badge--personal { background: color-mix(in srgb, var(--card-accent-left) 10%, transparent); color: var(--card-accent-left); border-color: color-mix(in srgb, var(--card-accent-left) 28%, transparent); }

  /* =========================================================
     FILTER-DRIVEN LAYOUT
     ========================================================= */

  /* Filter behavior — Knox 2026-05-21 reorg: All / Sanctom OS / Core Apps / Internal */
  .hub-grid[data-filter="sanctom-os"] .hub-section:not(.hub-section--os) { display: none; }
  .hub-grid[data-filter="core-apps"] .hub-section:not(.hub-section--core-apps) { display: none; }
  .hub-grid[data-filter="internal"] .hub-section:not(.hub-section--internal) { display: none; }

  /* =========================================================
     Responsive
     ========================================================= */

  @media (max-width: 1100px) {
    .hub-grid { grid-template-columns: 1fr; }
    .hub-section--personal,
    .hub-section--business { grid-column: 1; }
    .hub-grid[data-filter="all"] .hub-section__cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 700px) {
    .hub-grid[data-filter="all"] .hub-section__cards,
    .hub-grid[data-filter="personal"] .hub-section__cards,
    .hub-grid[data-filter="business"] .hub-section__cards { grid-template-columns: 1fr; }
    .hub { padding: var(--space-5) var(--space-4); }
  }

  /* =========================================================
     BUNDLE LAYOUT (Knox 2026-07-07) — Hub reworked around product
     bundles: each bundle is a titled section (name + tagline) with a
     responsive grid of its product logo-cards; standalone products get
     their own section. Additive; reuses the .product-card--logo family.
     ========================================================= */
  .hub-section--bundle .hub-section__head { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: var(--space-3); }
  .hub-bundle__name { font-family: 'Inter', system-ui, sans-serif; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.01em; line-height: 1.1; }
  .hub-bundle__tag { font-size: 12px; color: rgba(255,255,255,0.60); line-height: 1.45; max-width: 660px; }
  /* compact product boxes — smaller footprint, more per row (Knox 2026-07-07) */
  /* fixed compact tile width so few-card bundles don't stretch wide; cards pack left */
  .hub-section--bundle .hub-section__cards { grid-template-columns: repeat(auto-fill, 172px); justify-content: start; gap: var(--space-2); }
  .hub-section--bundle .product-card { padding: var(--space-3) var(--space-3) var(--space-4); gap: 6px; border-radius: 12px; }
  /* normalize by HEIGHT (not width) so different-aspect logos (e.g. Dream/Platform
     are 521-wide vs 667-wide) all render at the same visual size. object-fit:contain
     keeps each within a consistent box. */
  .hub-section--bundle .product-card__logo { width: 100%; max-width: none; height: 104px; object-fit: contain; object-position: center; margin: 6px 0 10px; }
  .hub-section--bundle .product-card__body { text-align: center; }
  .hub-section--bundle .product-card__role { font-size: 9px; margin-bottom: 3px; }
  .hub-section--bundle .product-card__tagline { font-size: 10.5px; line-height: 1.4; margin: 0; }
  /* the per-card "Open/Explore" affordance is removed on the Hub — the whole tile is the link (Knox 2026-07-07) */
  .hub-section--bundle .product-card__entry { display: none; }

  /* Per-product accents SAMPLED from each logo's wordmark color (Knox 2026-07-07),
     so the card accent (top stripe + eyebrow) matches the logo. Overrides the
     palette-token accents defined earlier for equal-specificity products. */
  .product-card.heart      { --card-accent: #F0539E; }
  .product-card.soul       { --card-accent: #B30FFA; }
  .product-card.mind       { --card-accent: #34E7BA; }
  .product-card.os-admin   { --card-accent: #CEFB02; }
  .product-card.brand      { --card-accent: #CEFB02; }
  .product-card.craft      { --card-accent: #FD9358; }
  .product-card.dream      { --card-accent: #148FEE; }
  .product-card.foundation { --card-accent: #096FFE; }
  .product-card.platform   { --card-accent: #34E9BC; }
  .product-card.relations  { --card-accent: #F0539E; }
  .product-card.measure    { --card-accent: #34E8BB; }
  .product-card.reach      { --card-accent: #CEFB02; }
  .product-card.broadcast  { --card-accent: #FECCF3; }
  .product-card.studio     { --card-accent: #70D7FF; }
  .product-card.ads        { --card-accent: #FD9258; }
  .product-card.presence   { --card-accent: #CB4FFF; }
  .product-card.learn      { --card-accent: #70D6FF; }  /* re-sampled 2026-07-14 from the new Sanctom Learn lockup (was chartreuse #CEFB02, the retired Universe wordmark) */
  .product-card.pro        { --card-accent: #FD9258; }
  .product-card.life       { --card-accent: #70D7FF; }
  .product-card.legacy     { --card-accent: #B40FFB; }
  .product-card.current    { --card-accent: #34E8BB; }
  /* Cross-Platform Apps — top-stripe accents sampled from each logo (Knox 2026-07-09) */
  .product-card.profile       { --card-accent: #70D7FF; }
  .product-card.account       { --card-accent: #34E9BC; }
  .product-card.settings      { --card-accent: #CEFB02; }
  .product-card.notifications { --card-accent: #F89058; }
  .product-card.auras         { --card-accent: #4B6FDD; }
  .product-card.heard         { --card-accent: #096FFF; }
  .product-card.inbox         { --card-accent: #F2539F; }
  /* Talk (was "Share" — the video-conf app; renamed 2026-07-15 so the Share NAME could
     move to the marketing suite). Accent re-sampled from the Sanctom Talk lockup:
     its wordmark is exactly #34E8BB (8900px, dominant) — was #B40FFB, the purple
     Share wordmark, which now belongs to the Share suite. */
  .product-card.talk          { --card-accent: #34E8BB; }