/* ============================================================================
   COMPONENTS — ERP.AI brutalist design language
   Sharp corners, hard shadows, monospace labels, 1px borders.
   ============================================================================ */

@layer components {
  /* -- Shared chrome -------------------------------------------------------- */
  .audience-bar__agent-link:hover .audience-bar__agent-label,
  .audience-bar__agent-link:focus-visible .audience-bar__agent-label {
    text-decoration: underline;
  }

  .audience-bar__agent-chip {
    background: transparent;
  }

  .audience-bar__agent-link:hover .audience-bar__agent-chip,
  .audience-bar__agent-link:focus-visible .audience-bar__agent-chip {
    background: var(--background);
  }

  /* -- Card ----------------------------------------------------------------- */
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: var(--space-6);
    transition:
      box-shadow var(--duration-normal) var(--ease-standard),
      transform var(--duration-normal) var(--ease-standard);
  }
  .card:hover {
    box-shadow: var(--shadow-4);
    transform: translate(-2px, -2px);
  }
  .card--outlined {
    box-shadow: none;
    border: 1px solid var(--border);
  }
  .card--filled {
    background: var(--surface-container-highest);
    border: none;
    box-shadow: none;
  }

  /* -- Angular clip shapes (aTsh signature) -------------------------------- */
  .btn-angular {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%
    );
  }
  .card-angular {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 24px),
      calc(100% - 24px) 100%,
      0 100%
    );
  }

  /* -- Button --------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    line-height: 1;
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--border);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition:
      background var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }
  .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .btn--primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
  }
  .btn--primary:hover {
    filter: brightness(1.08);
  }

  .btn--secondary {
    background: var(--foreground);
    color: var(--background);
    border-color: var(--foreground);
  }
  .btn--secondary:hover {
    background: var(--primary);
    border-color: var(--primary);
  }

  .btn--outline {
    background: transparent;
    color: var(--foreground);
    border: 1px solid var(--border);
  }
  .btn--outline:hover {
    background: var(--surface-container);
  }

  .btn--ghost {
    background: transparent;
    color: var(--foreground);
    border: none;
  }
  .btn--ghost:hover {
    background: var(--surface-container);
  }

  .btn--destructive {
    background: var(--destructive);
    color: var(--primary-foreground);
    border-color: var(--destructive);
  }
  .btn--destructive:hover {
    filter: brightness(1.08);
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .btn--loading {
    cursor: progress;
    pointer-events: none;
  }
  .btn__spinner {
    flex-shrink: 0;
    transform-origin: center;
    animation: btn-spin var(--duration-slower) linear infinite;
  }
  @keyframes btn-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn__spinner {
      animation: none;
    }
  }

  .btn--xs {
    font-size: 0.625rem;
    /* Keep the compact label while preserving a 24px minimum touch target. */
    padding: var(--space-2) var(--space-3);
  }
  .btn--sm {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-4);
  }
  .btn--lg {
    font-size: var(--text-sm);
    padding: var(--space-4) var(--space-8);
  }
  .btn--icon {
    padding: var(--space-3);
    aspect-ratio: 1;
  }

  /* -- Hover layer (aTsh slide-up reveal) ---------------------------------- */
  .hover-layer {
    transition: transform var(--duration-slow) var(--ease-angular);
  }
  .group:hover .hover-layer {
    transform: translateY(0);
  }

  /* -- Noise overlay (aTsh texture) ---------------------------------------- */
  .bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* -- Grid background (aTsh) ---------------------------------------------- */
  .bg-grid {
    background-size: 40px 40px;
    background-image:
      linear-gradient(
        to right,
        oklch(15% 0.012 78 / 0.05) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        oklch(15% 0.012 78 / 0.05) 1px,
        transparent 1px
      );
  }

  /* -- Marquee ------------------------------------------------------------- */
  .marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    display: flex;
  }
  .marquee-content {
    display: flex;
    flex-shrink: 0;
    min-width: 100%;
    animation: marquee 25s linear infinite;
  }
  .marquee-content > * {
    flex-shrink: 0;
  }
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  /* -- Scanline animation -------------------------------------------------- */
  @keyframes scan {
    0% {
      top: 0;
    }
    50% {
      top: 100%;
    }
    100% {
      top: 0;
    }
  }

  /* -- Section clear (removes layout padding for full-bleed sections) ------ */
  .section-clear {
    margin-inline: calc(var(--space-4) * -1);
  }
  @media (min-width: 640px) {
    .section-clear {
      margin-inline: calc(var(--space-6) * -1);
    }
  }
  @media (min-width: 1024px) {
    .section-clear {
      margin-inline: calc(var(--space-8) * -1);
    }
  }

  /* -- Observe: reveal animation base states ------------------------------- */
  [data-observe="reveal"],
  [data-observe="reveal-up"],
  [data-observe~="reveal"],
  [data-observe~="reveal-up"] {
    opacity: 0;
    transition:
      opacity var(--duration-slow) var(--ease-decelerate),
      transform var(--duration-slow) var(--ease-decelerate);
  }
  [data-observe="reveal-up"],
  [data-observe~="reveal-up"] {
    transform: translateY(1.5rem);
  }
  [data-observe="reveal"].observed,
  [data-observe="reveal-up"].observed,
  [data-observe~="reveal"].observed,
  [data-observe~="reveal-up"].observed {
    opacity: 1;
    transform: translateY(0);
  }

  /* -- Theme toggle -------------------------------------------------------- */
  .theme-toggle {
    display: flex;
    gap: var(--space-1);
    background: var(--surface-container);
    border: 1px solid var(--border);
    padding: 2px;
  }
  .theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    cursor: pointer;
    transition:
      color 0.2s,
      background 0.2s;
  }
  .theme-toggle-btn[aria-checked="true"] {
    background: var(--background);
    color: var(--foreground);
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
  }
  .theme-toggle-btn svg[data-icon] {
    width: 14px;
    height: 14px;
  }

  /* -- Nav link text -------------------------------------------------------- */
  .nav-link-text {
    color: var(--foreground);
  }
  .nav-link-text:hover {
    color: var(--primary);
  }

  /* -- Desktop primary nav (top bar) — red + 2px bar like sticky strip; label centered in 48px via markup items-center -- */
  .nav-primary-link {
    box-sizing: border-box;
    color: var(--nav-link);
    font-weight: 500;
    border-bottom-color: transparent;
    margin-bottom: -1px; /* sit on nav 1px border like in-page strips */
    transition:
      color var(--duration-fast) var(--ease-standard),
      border-bottom-color var(--duration-fast) var(--ease-standard);
  }
  .nav-primary-link:hover:not(.nav-primary-link--current) {
    color: var(--red);
    border-bottom-color: var(--red);
  }
  .nav-primary-link--current,
  .nav-primary-link--current:hover {
    color: var(--red);
    border-bottom-color: var(--red);
  }
  .nav-primary-link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  /* -- Mobile menu --------------------------------------------------------- */
  #mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 1rem;
    background: color-mix(in srgb, var(--background) 72%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(-10px);
    /* Belt-and-braces against overscroll bleed. Body scroll is also locked
       in JS via mobile-menu.js lockBodyScroll. */
    overscroll-behavior: contain;
  }
  #mobile-menu[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .mobile-menu-shell {
    --mobile-menu-scroll-thumb-size: 2rem;
    --mobile-menu-scroll-thumb-offset: 0px;
    --mobile-menu-scroll-track: color-mix(in srgb, var(--beige-500) 22%, transparent);
    --mobile-menu-scroll-thumb: var(--beige-600);
    width: 100%;
    /* Cap to viewport minus wrapper padding. Internal scroll lives on
       .mobile-menu-main so the footer (Sign In CTA) stays pinned at the
       bottom of the shell while brand + items scroll. */
    min-height: calc(100dvh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    margin-left: 0;
    padding: 1.15rem 0 1rem;
    position: relative;
    border: 1px solid var(--border);
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--background) 87%, var(--red) 13%) 0%,
        var(--background) 18%
      ),
      var(--background);
    box-shadow: 10px 10px 0 color-mix(in srgb, var(--border) 78%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.875rem;
  }
  #mobile-menu[data-scrollable='true'] .mobile-menu-shell::after,
  #mobile-menu[data-scrollable='true'] .mobile-menu-shell::before {
    content: "";
    position: absolute;
    right: 1px;
    top: calc(1.15rem + 1px);
    z-index: 2;
    width: 3px;
    pointer-events: none;
  }
  #mobile-menu[data-scrollable='true'] .mobile-menu-shell::after {
    bottom: calc(5.75rem + 1px);
    background: var(--mobile-menu-scroll-track);
  }
  #mobile-menu[data-scrollable='true'] .mobile-menu-shell::before {
    height: var(--mobile-menu-scroll-thumb-size);
    background: var(--mobile-menu-scroll-thumb);
    transform: translateY(var(--mobile-menu-scroll-thumb-offset));
  }
  html.dark .mobile-menu-shell {
    --mobile-menu-scroll-track: color-mix(in srgb, var(--beige-300) 24%, transparent);
    --mobile-menu-scroll-thumb: var(--beige-400);
  }
  .mobile-menu-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    /* This is the scroll container. Footer stays pinned by virtue of shell's
       flex layout; main scrolls brand + items independently. Same scrollbar
       style as web-lab for affordance consistency. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--border) 70%, transparent) transparent;
  }
  .mobile-menu-main::-webkit-scrollbar {
    width: 6px;
  }
  .mobile-menu-main::-webkit-scrollbar-track {
    background: transparent;
  }
  .mobile-menu-main::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 0;
  }
  .mobile-menu-dismiss {
    position: absolute;
    top: 1rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
    background: color-mix(in srgb, var(--background) 82%, white 18%);
    color: var(--foreground);
  }
  .mobile-menu-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 2rem 1rem 0;
    color: var(--foreground);
    text-decoration: none;
  }
  .mobile-menu-kicker {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nav-link);
  }
  .mobile-menu-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    width: 100%;
    border: 1px solid var(--red);
    background: var(--red);
    color: var(--primary-foreground);
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--border) 85%, transparent);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .mobile-menu-links {
    display: grid;
    gap: 0.125rem;
    /* Stack from top so overflowing content scrolls cleanly. Prior
       `margin-top: auto` collapsed on short viewports and crushed items
       against the footer instead of scrolling. */
    margin-top: 0;
  }
  .mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Hit-area scaled ~1.9× from the prior 0.6/0.65rem to give a ~75–80px
       tap target. The shell is full-bleed on the inline axis, so feedback
       bands naturally reach the shell border without negative margins inside
       the scroll container. */
    margin-inline: 0;
    padding: 1.15rem 1rem 1.2rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    text-decoration: none;
    color: var(--foreground);
    /* Button-as-link reset (for .mobile-menu-link--has-children). */
    width: 100%;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    text-align: left;
    cursor: pointer;
    /* Tap feedback: kill the iOS overlay, let :active drive state change. */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background var(--duration-fast) var(--ease-standard);
  }
  .mobile-menu-link:active,
  .mobile-menu-link:focus-visible,
  .mobile-menu-link.is-tapped {
    /* JS-driven `.is-tapped` mirrors :active for Safari iOS where :active
       terminates on touchend before the flash can register. Lingers ~180ms
       after pointerup so the band reads as tap feedback. */
    background: color-mix(in srgb, var(--background) 93%, var(--red) 7%);
  }
  .mobile-menu-link:focus-visible {
    outline: var(--outline-width) solid var(--ring);
    outline-offset: calc(var(--outline-offset) * -1);
  }
  .mobile-menu-link--current,
  .mobile-menu-link--current .mobile-menu-link-index {
    color: var(--red);
  }
  .mobile-menu-link-index {
    min-width: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--red);
  }
  .mobile-menu-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  }
  @media (max-height: 760px) {
    #mobile-menu {
      padding: 0.75rem;
    }
    .mobile-menu-shell {
      min-height: calc(100dvh - 1.5rem);
      padding: 0.9rem 0 0.875rem;
      gap: 0.75rem;
    }
    #mobile-menu[data-scrollable='true'] .mobile-menu-shell::after,
    #mobile-menu[data-scrollable='true'] .mobile-menu-shell::before {
      top: calc(0.9rem + 1px);
      right: 1px;
    }
    #mobile-menu[data-scrollable='true'] .mobile-menu-shell::after {
      bottom: calc(5.25rem + 1px);
    }
    .mobile-menu-dismiss {
      top: 0.75rem;
      right: 0.625rem;
      width: 2rem;
      height: 2rem;
    }
    .mobile-menu-main {
      gap: 0.625rem;
    }
    .mobile-menu-brand {
      padding: 1.5rem 0.875rem 0;
    }
    .mobile-menu-kicker {
      font-size: 0.625rem;
    }
    .mobile-menu-cta {
      min-height: 2.75rem;
      font-size: 0.6875rem;
    }
    .mobile-menu-links {
      gap: 0;
    }
    .mobile-menu-link {
      margin-inline: 0;
      padding: 0.85rem 0.875rem 0.9rem;
      font-size: 1.05rem;
    }
    .mobile-menu-link-index {
      font-size: 0.5625rem;
    }
    .mobile-menu-footer {
      margin-top: 0.375rem;
      padding: 0.625rem 0.875rem 0;
    }
  }

  /* -- Catalog patterns (CSS-only tile backgrounds) ----------------------- */
  .pat-dots {
    background-image: radial-gradient(
      circle,
      currentColor 1px,
      transparent 1px
    );
    background-size: 12px 12px;
  }
  .pat-lines {
    background-image: repeating-linear-gradient(
      45deg,
      currentColor 0,
      currentColor 1px,
      transparent 1px,
      transparent 8px
    );
  }
  .pat-mesh {
    background-image:
      linear-gradient(to right, currentColor 1px, transparent 1px),
      linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 20px 20px;
  }
  .pat-diag {
    background-image: repeating-linear-gradient(
      -45deg,
      currentColor 0,
      currentColor 1px,
      transparent 1px,
      transparent 6px
    );
  }

  /* -- Catalog scroll track ----------------------------------------------- */
  .catalog-scroll-track::-webkit-scrollbar {
    display: none;
  }

  /* -- Catalog card hover ------------------------------------------------- */
  .catalog-card {
    background: var(--card-bg);
    color: var(--card-fg);
    transition:
      filter var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  }
  html.dark .catalog-card {
    background: var(--card-bg-d, var(--card-bg));
    color: var(--card-fg-d, var(--card-fg));
  }
  .catalog-card:hover {
    filter: brightness(1.12);
    z-index: 5;
    box-shadow:
      inset 0 0 0 2px rgb(255, 255, 255, 0.25),
      0 0 24px rgb(0, 0, 0, 0.7);
  }

  .catalog-card .pat-dots,
  .catalog-card .pat-lines,
  .catalog-card .pat-mesh,
  .catalog-card .pat-diag {
    opacity: 0.1;
  }

  .catalog-card-pattern--subtle {
    opacity: 0.05 !important;
  }

  .catalog-card--has-thumb {
    color: var(--cream);
  }

  .catalog-card-media {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.02);
    filter: saturate(0.95) contrast(1.04);
  }

  .catalog-card-media-scrim {
    background: linear-gradient(
      180deg,
      rgb(0 0 0 / 14%) 0%,
      rgb(0 0 0 / 24%) 48%,
      rgb(0 0 0 / 58%) 100%
    );
  }

  /* Title picks up the JS-computed custom property */
  .catalog-card .font-display {
    font-size: var(--title-fs, 16px);
  }

  /* -- Catalog track wrapper + inline scroll buttons ---------------------- */
  .catalog-track-wrap {
    position: relative;
  }

  .catalog-inline-scroll {
    display: none; /* shown via JS */
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    align-items: center;
    border: none;
    cursor: pointer;
    color: var(--foreground);
    background: oklch(8% 0.035 65 / 8%);
    transition: background var(--duration-fast) var(--ease-standard);
  }
  html.dark .catalog-inline-scroll {
    background: oklch(99% 0.005 78 / 8%);
  }
  .catalog-inline-scroll:hover {
    background: oklch(8% 0.035 65 / 16%);
  }
  html.dark .catalog-inline-scroll:hover {
    background: oklch(99% 0.005 78 / 16%);
  }

  /* -- Catalog scroll dots ------------------------------------------------ */
  .catalog-dot {
    width: 6px;
    height: 6px;
    border-radius: 0;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--border);
    transition:
      width var(--duration-fast) var(--ease-standard),
      background var(--duration-fast) var(--ease-standard);
  }
  .catalog-dot--active {
    width: 14px;
    background: var(--foreground);
  }

  /* -- Catalog filter bar ------------------------------------------------- */
  .catalog-filter-track::-webkit-scrollbar {
    display: none;
  }

  .catalog-filter-scroll {
    align-items: center;
    justify-content: center;
  }

  .catalog-filter-scroll:hover {
    background: var(--darker);
    color: var(--foreground);
  }

  /* -- Catalog filter button — 3D raised button with per-category color ---
     Per-category swatches live in tokens.css (--cat-*). Add a category by
     adding both a token and a row below; values stay in tokens.css. */
  .catalog-filter-btn {
    --btn-color: var(--cat-default);
    transition:
      background 0.15s,
      color 0.15s,
      box-shadow 0.15s;
    box-shadow:
      0 2px 0 rgb(0 0 0 / 25%),
      0 1px 3px rgb(0 0 0 / 10%);
  }
  .catalog-filter-btn:hover {
    background: var(--btn-color) !important;
    color: var(--cat-on) !important;
    box-shadow: 0 1px 0 rgb(0 0 0 / 30%);
  }
  .catalog-filter-btn:active {
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 40%);
  }

  /* Center buttons when all fit (no overflow) */
  .catalog-filter-track:not(.is-overflow) {
    justify-content: center;
  }

  /* Per-category hover colors — values defined in tokens.css. */
  .catalog-filter-btn[data-filter="all"] {
    --btn-color: var(--cat-all);
  }
  .catalog-filter-btn[data-filter="erp"] {
    --btn-color: var(--cat-erp);
  }
  .catalog-filter-btn[data-filter="crm"] {
    --btn-color: var(--cat-crm);
  }
  .catalog-filter-btn[data-filter="hrms"] {
    --btn-color: var(--cat-hrms);
  }
  .catalog-filter-btn[data-filter="scm"] {
    --btn-color: var(--cat-scm);
  }
  .catalog-filter-btn[data-filter="fin"] {
    --btn-color: var(--cat-fin);
  }
  .catalog-filter-btn[data-filter="pm"] {
    --btn-color: var(--cat-pm);
  }
  .catalog-filter-btn[data-filter="health"] {
    --btn-color: var(--cat-health);
  }
  .catalog-filter-btn[data-filter="edu"] {
    --btn-color: var(--cat-edu);
  }
  .catalog-filter-btn[data-filter="retail"] {
    --btn-color: var(--cat-retail);
  }
  .catalog-filter-btn[data-filter="mfg"] {
    --btn-color: var(--cat-mfg);
  }
  .catalog-filter-btn[data-filter="legal"] {
    --btn-color: var(--cat-legal);
  }
  .catalog-filter-btn[data-filter="govt"] {
    --btn-color: var(--cat-govt);
  }
  .catalog-filter-btn[data-filter="it"] {
    --btn-color: var(--cat-it);
  }
  .catalog-filter-btn[data-filter="support"] {
    --btn-color: var(--cat-support);
  }
  .catalog-filter-btn[data-filter="realestate"] {
    --btn-color: var(--cat-realestate);
  }
  .catalog-filter-btn[data-filter="hotel"] {
    --btn-color: var(--cat-hotel);
  }
  .catalog-filter-btn[data-filter="food"] {
    --btn-color: var(--cat-food);
  }
  .catalog-filter-btn[data-filter="transport"] {
    --btn-color: var(--cat-transport);
  }
  .catalog-filter-btn[data-filter="agri"] {
    --btn-color: var(--cat-agri);
  }
  .catalog-filter-btn[data-filter="media"] {
    --btn-color: var(--cat-media);
  }
  .catalog-filter-btn[data-filter="energy"] {
    --btn-color: var(--cat-energy);
  }
  .catalog-filter-btn[data-filter="bank"] {
    --btn-color: var(--cat-bank);
  }
  .catalog-filter-btn[data-filter="insure"] {
    --btn-color: var(--cat-insure);
  }
  .catalog-filter-btn[data-filter="ngo"] {
    --btn-color: var(--cat-ngo);
  }
  .catalog-filter-btn[data-filter="salon"] {
    --btn-color: var(--cat-salon);
  }
  .catalog-filter-btn[data-filter="sports"] {
    --btn-color: var(--cat-sports);
  }
  .catalog-filter-btn[data-filter="events"] {
    --btn-color: var(--cat-events);
  }
  .catalog-filter-btn[data-filter="warehouse"] {
    --btn-color: var(--cat-warehouse);
  }
  .catalog-filter-btn[data-filter="workflow"] {
    --btn-color: var(--cat-workflow);
  }
  .catalog-filter-btn[data-filter="analytics"] {
    --btn-color: var(--cat-analytics);
  }
  .catalog-filter-btn[data-filter="combo"] {
    --btn-color: var(--cat-combo);
  }

  /* -- Catalog popup ------------------------------------------------------ */
  @keyframes catalog-pop-in {
    from {
      transform: scale(0.9);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .catalog-popup {
    animation: catalog-pop-in 0.15s ease-out;
  }

  /* -- Pricing table row hover -------------------------------------------- */
  .pricing-table tr:not([style*="background"]):hover {
    background: var(--card) !important;
  }
  .pricing-table tr:not([style*="background"]):hover td:last-child {
    color: var(--red) !important;
  }

  /* -- Range slider thumb ------------------------------------------------- */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--red);
    cursor: pointer;
  }
  input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--red);
    border: none;
    cursor: pointer;
  }

  /* -- Line clamp utility ------------------------------------------------- */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* -- Catalog search active state ---------------------------------------- */
  .catalog-search-active {
    background: var(--surface-container-highest);
  }

  /* -- Catalog search results: keep normal row/scroll behaviour ---------- */
  .catalog-search-mode .catalog-row {
    border-bottom: none;
  }

  /* -- Sticky in-page anchor strips (scroll spy; matches enterprise-suite-subnav-01) -- */
  [data-inpage-nav] {
    --inpage-nav-active: var(--red);
  }

  [data-inpage-nav][data-inpage-accent="org"] {
    --inpage-nav-active: var(--org);
  }

  /* Match enterprise suite strip: --nav-link + transparent 2px bar; active = accent */
  [data-inpage-nav] a[href^="#"] {
    color: var(--nav-link);
    font-weight: 500;
    border-bottom-color: transparent;
  }

  [data-inpage-nav] a[href^="#"].inpage-nav-link--active {
    color: var(--inpage-nav-active);
    border-bottom-color: var(--inpage-nav-active);
  }

  [data-inpage-nav] a[href^="#"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  /* -- Yellow highlight: text stays dark in both modes ----------------------
     Yellow is theme-constant, so any element rendering text ON --accent-yellow
     must use --accent-yellow-fg for foreground. Centralized here so feature/
     agent/agents-listing pages don't each have to remember it. */
  .ft-hero h1 .accent,
  .ft-section h2 .accent,
  .ft-agent-card .agt-saves,
  .ft-cta-bottom .accent,
  .ft-cta-bottom .btn,
  .ag-section .ag-h2 .accent,
  .ag-cta-bottom .accent,
  .ag-cta-bottom .btn,
  .agi-hero h1 .accent,
  .agi-card .meta .saves,
  .agi-cta-bottom .accent,
  .agi-cta-bottom .btn {
    color: var(--accent-yellow-fg);
  }

  /* ──────────────────────────────────────────────────────────
     Chrome arrows — audience-bar inline indicator icons (the
     down-right glyph next to FOR HUMANS + the up-right glyph
     next to FOR AGENTS). Tabler outline icons default to
     stroke-width 2; the chrome bar runs at 11px mono caps, so
     the 2-stroke arrows render thinner than the surrounding
     type weight. Bumping to 2.5 matches the perceived weight
     of the FOR HUMANS / FOR AGENTS labels.

     Applied via the `chrome-arrow` class on the icon macro
     call in `sections/chrome/audience-bar.njk` (shared @lab/
     chrome partial). Survives soft-nav because the audience
     bar lives outside `#main-content` and isn't sanitized
     during view-transition swaps.
     ────────────────────────────────────────────────────────── */
  .chrome-arrow {
    stroke-width: 2.5;
  }

  /* -- Neo page-scoped styles moved from page templates -------------------- */

  /* index.njk :: migrated style block 1 */
  /* Keep horizontal clipping without turning body into the page's vertical
     scroll container. Neo home uses normal document scrolling because the
     hero, dropdowns, and footer are interactive and taller than many
     viewports. */
  body:has(#main-content.neo-home) {
    overflow-x: clip !important;
  }

  /* Section-level red rule + 6px secondary band on every section that
     opens with a .section-opener. The 4px border-top sits flush with the
     section edge (= bg-change boundary, full-width). The ::before adds a
     6px red band immediately below it — the "double red" punch §06 used
     to ship with an explicit <div>. Wrapper keeps its natural py-16/24;
     opener has a tight 1rem pt since the bands carry the section-start
     weight. The rule used to be on .section-opener (border-top: 4px) but
     that was constrained by the wrapper's max-w / px gutters; moving it
     to the section element makes it full-width and flush. */
  .neo-home > section:has(.section-opener) {
    border-top: 4px solid var(--red);
  }
  .neo-home > section:has(.section-opener)::before {
    content: "";
    display: block;
    height: 6px;
    background: var(--red);
  }
  .section-opener {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding-top: 1rem;
    margin-bottom: 2.25rem;
  }
  @media (min-width: 768px) {
    .section-opener {
      gap: 1.5rem;
      margin-bottom: 3rem;
    }
  }
  .section-opener__num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: var(--text-5xl);
    line-height: 0.85;
    color: var(--foreground);
    letter-spacing: 0;
  }
  @media (min-width: 768px) {
    .section-opener__num {
      font-size: var(--text-6xl);
    }
  }
  @media (min-width: 1024px) {
    .section-opener__num {
      font-size: var(--text-7xl);
    }
  }
  .section-opener__label {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-m);
    flex: 1;
    line-height: 1.4;
  }
  .section-opener__label strong {
    color: var(--foreground);
    font-weight: 600;
    display: block;
    font-size: 12.5px;
    letter-spacing: 0.16em;
  }

  .ui-icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
  }
  .ui-icon svg {
    width: 100%;
    height: 100%;
  }
  .ui-separator {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    margin-inline: 0.625rem;
    background: currentColor;
    opacity: 0.45;
    transform: translateY(-0.1em);
  }
  .ui-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .ui-link .ui-icon {
    width: 1.125em;
    height: 1.125em;
  }

  .ui-icon--sm {
    font-size: var(--fs-btn);
  }

  .ui-icon--md {
    font-size: var(--fs-body);
  }

  .ui-code-pill,
  .session-walk__body code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: var(--border-width-base) var(--space-1);
    background: var(--surface-dim);
    color: var(--red-on-light);
    border-radius: var(--border-width-md);
  }

  .neo-hero {
    background: var(--background);
    isolation: isolate;
    overflow: hidden;
    /* Establishes an inline-size containment context so the hero h1's
       container-query clamp (var(--fs-hero) = clamp(2rem,10cqi,4.5rem))
       resolves against the hero, not the viewport. Phase 3 Step 4 of
       docs/plans/DESIGN-ELEVATE-LAB-CHROME-WEB-LAB-WEB-NEO-PLAN.md. */
    container-type: inline-size;
  }

  .neo-hero__watermark {
    font-size: var(--fs-ghost);
    font-weight: 900;
    color: var(--foreground);
    opacity: 0.04;
  }

  .neo-hero__badge {
    color: var(--text-m);
    background: var(--surface-dim);
  }

  .neo-hero__badge-accent,
  .neo-text-brand {
    color: var(--red-on-light);
  }

  .neo-hero__pulse {
    background: var(--red);
  }

  .neo-hero__sep {
    background: var(--border);
  }

  .neo-hero__platform,
  .neo-text-strong {
    color: var(--foreground);
    font-weight: 500;
  }

  .neo-hero__title {
    font-size: var(--fs-hero);
    font-weight: 700;
    color: var(--foreground);
    /* Hero h1 lever — locked 2026-05-16. Was 0 under PR #238 amendment. */
    letter-spacing: var(--tracking-hero);
    text-wrap: balance;
  }

  .neo-hero__mark {
    color: var(--red-on-light);
  }

  .neo-hero__outline {
    /* Mirrors the web-lab hero subtitle treatment: solid accent red,
       Clash Grotesk weight 900. The prior stroke-only outline (1.25px
       transparent fill) read as ragged on Clash Grotesk — the geometric
       counters and serifs broke the stroke continuity. Solid red ties the
       sub-headline to Neo's red mark + the cross-site accent system.
       --stagger-index pins this line second in the cinematic cascade if
       observer-driven reveal is added. Phase 3 Step 4 follow-up; see
       docs/plans/DESIGN-ELEVATE-LAB-CHROME-WEB-LAB-WEB-NEO-PLAN.md. */
    font-family: var(--font-display);
    font-weight: 900;
    font-size: var(--text-5xl);
    line-height: 0.92;
    letter-spacing: var(--tracking-hero);
    color: var(--red-on-light);
    text-wrap: balance;
    --stagger-index: 1;
  }
  @media (min-width: 768px) {
    .neo-hero__outline {
      font-size: var(--text-6xl);
    }
  }
  @media (min-width: 1024px) {
    .neo-hero__outline {
      font-size: var(--text-8xl);
    }
  }

  .neo-hero__tagline {
    font-size: var(--text-xl);
    line-height: 1.35;
    color: var(--red-on-light);
    opacity: 0.85;
    text-wrap: pretty;
  }

  .neo-hero__intro,
  .neo-section-copy,
  .neo-section-heading,
  .neo-card-title {
    color: var(--foreground);
    font-family: var(--font-body);
    text-wrap: pretty;
  }

  /* Mirror the web-lab hero callout treatment: 1px structural separator on
     the leading edge of the description paragraph. Same brutalist 1px-as-
     structure vocabulary used in the apex hero (.app-h1 + descendant `<p>`
     inside hero-atsh.njk). Token: var(--border) keeps the rule theme-aware.
     Phase 3 follow-up — see docs/plans/DESIGN-ELEVATE-LAB-CHROME-WEB-LAB-
     WEB-NEO-PLAN.md. */
  .neo-hero__intro {
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 1px solid var(--border);
  }

  .neo-hero__checks,
  .neo-text-muted {
    color: var(--text-m);
  }

  .neo-section {
    background: var(--background);
  }

  .neo-section--dim {
    background: var(--surface-dim);
  }

  .neo-section--dark {
    background: var(--beige-800);
  }

  .neo-section-heading {
    font-weight: 900;
    letter-spacing: 0;
    font-family: var(--font-display);
    text-wrap: balance;
  }

  .neo-section-heading--narrow {
    max-width: 18ch;
  }

  .neo-section-heading--compact {
    max-width: 22ch;
  }

  .neo-section-heading--dark,
  .neo-section-copy--dark {
    color: var(--beige-100);
  }

  .neo-section-copy {
    max-width: 60ch;
  }

  .neo-section-copy--wide {
    max-width: 64ch;
  }

  .neo-section-copy--muted {
    color: var(--text-m);
  }

  .neo-section-copy--dark {
    opacity: 0.85;
  }

  .neo-grid-rule {
    background: var(--border);
  }

  .neo-card-surface {
    background: var(--background);
  }

  .neo-card-label {
    color: var(--red-on-light);
  }

  .neo-card-title {
    font-weight: 700;
    letter-spacing: 0;
  }

  .neo-mock__chrome-spacer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .neo-mock__status-dot {
    width: var(--space-2);
    height: var(--space-2);
    background: var(--t-grn);
    border-radius: 50%;
    display: inline-block;
  }

  .section-closer {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 3rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-m);
    text-decoration: none;
    background: var(--background);
    transition:
      border-color 180ms,
      color 180ms,
      transform 180ms;
  }
  .section-closer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--red-on-light);
    width: 0.875rem;
    height: 0.875rem;
  }
  .section-closer__num {
    color: var(--red-on-light);
    font-weight: 600;
  }
  .section-closer:hover {
    color: var(--foreground);
    border-color: var(--red);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--border);
  }
  .section-closer:hover .section-closer__icon {
    color: var(--red);
  }

  /* Sections backed by --surface-dim need a matching closer bg.
     §04 (#loop) is now dark-beige and its closer bg is overridden in
     the section's own scoped style block. */
  .neo-home #faq .section-closer,
  .neo-home #under-the-hood .section-closer,
  .neo-home #use-neo .section-closer {
    background: var(--surface-dim);
  }

  /* ── Pull-quote bands — full-bleed visual punctuation between sections.
     Two registers: dark-beige italic-serif (quote 1) and red mono-display
     (quote 2). They sit between numbered sections; the next section's own
     red top-band provides the boundary, so no border-bottom here. ── */
  .pull-quote {
    padding: 4.5rem 0;
  }
  .pull-quote--dark {
    background: var(--beige-800);
    color: var(--beige-100);
  }
  .pull-quote--red {
    background: var(--red);
    color: var(--primary-foreground);
  }
  .pull-quote__inner {
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
  @media (min-width: 1024px) {
    .pull-quote__inner {
      padding-inline: 3rem;
    }
  }
  .pull-quote__text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.75rem, 3.6vw, 3.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    max-width: 28ch;
    margin: 0;
  }
  .pull-quote__text--mono {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(1.5rem, 3vw, 2.75rem);
    line-height: 0.95;
    max-width: 24ch;
  }
  .pull-quote__attr {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-top: 1.5rem;
    opacity: 0.6;
  }
  .pull-quote__attr--invert {
    opacity: 0.75;
  }

  /* index.njk :: migrated style block 2 */
  /* Hire-flow visual — Krawler tile + arrow + Neo composer mock */
  .hire-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .hire-flow {
      gap: 1.25rem;
    }
  }
  /* ─── Hero hire-mock (terminal-style Neo screenshot) ───
     Compact version of the .neo-mock pattern used in §02. Shows
     real Neo chrome: mac traffic lights, title bar with workspace +
     model + tokens, color-coded message labels (red YOU, cyan PLAN,
     yellow PERMISSION) with [a]/[A]/[d] keyboard hints, $ shell
     prompt + blinking caret. Reads as a real desktop app. */
  /* Interface mockup register — same as .neo-mock (§02). Warm beige in
     light mode, light cream in dark mode. Accent palette flips with the
     theme. See html.dark .hire-term below. Outer border matches --t-bg
     so the mock relies on its bg-vs-page contrast for envelope
     definition (same tone-down pattern as .neo-mock). */
  .hire-term {
    --t-bg: var(--beige-800);
    --t-bg-2: var(--beige-900);
    --t-bg-3: var(--beige-700);
    --t-fg: var(--beige-100);
    --t-mut: var(--beige-400);
    --t-dim: var(--beige-500);
    --t-red: #ff6464;
    --t-grn: #79c47b;
    --t-ylw: #e0bf5d;
    --t-cyan: #5cd1c7;
    background: var(--t-bg);
    color: var(--t-fg);
    font-family: var(--font-body);
    font-size: 0.66rem;
    line-height: 1.45;
    border: 1px solid var(--t-bg);
    box-shadow: 5px 5px 0 var(--border);
    text-decoration: none;
    display: block;
    transition:
      transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
      border-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }
  html.dark .hire-term {
    --t-bg: var(--beige-300);
    --t-bg-2: var(--beige-200);
    --t-bg-3: var(--beige-400);
    --t-fg: var(--ink-deep);
    --t-mut: var(--beige-700);
    --t-dim: var(--beige-600);
    --t-red: var(--red-on-light);
    --t-grn: var(--grn-on-light);
    --t-ylw: oklch(55% 0.16 84);
    --t-cyan: oklch(42% 0.12 190);
  }
  .hire-term:hover,
  .hire-term:focus-visible {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--border);
    border-color: var(--red-on-light);
  }
  .hire-term:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 var(--border);
  }
  .hire-term__chrome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--t-bg-2);
    background: var(--t-bg-3);
    font-size: 0.6rem;
    color: var(--t-mut);
    flex-wrap: wrap;
  }
  .hire-term__dots {
    display: inline-flex;
    gap: 0.25rem;
  }
  .hire-term__dots i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: block;
  }
  .hire-term__dots i:nth-child(1) {
    background: #ff5f56;
  }
  .hire-term__dots i:nth-child(2) {
    background: #ffbd2e;
  }
  .hire-term__dots i:nth-child(3) {
    background: #27c93f;
  }
  .hire-term__title {
    color: var(--t-fg);
  }
  .hire-term__sep {
    color: var(--t-dim);
  }
  .hire-term__spacer {
    margin-left: auto;
  }
  .hire-term__body {
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: min(46rem, 64vh);
    overflow: auto;
  }
  .hire-term__msg {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .hire-term__lbl {
    font-size: 0.58rem;
    color: var(--t-mut);
  }
  .hire-term__lbl b {
    font-weight: 600;
  }
  .hire-term__lbl--hire b {
    color: var(--t-ylw);
  }
  .hire-term__lbl--you b {
    color: var(--t-red);
  }
  .hire-term__lbl--plan b {
    color: var(--t-cyan);
  }
  .hire-term__lbl--tool b {
    color: #9b8cff;
  }
  .hire-term__lbl--sub b {
    color: #9b8cff;
  }
  .hire-term__lbl--res b {
    color: var(--t-grn);
  }
  .hire-term__lbl--cause b {
    color: var(--t-grn);
  }
  .hire-term__lbl--perm b {
    color: var(--t-ylw);
  }
  .hire-term__lbl--act b {
    color: var(--t-ylw);
  }
  .hire-term__txt {
    color: var(--t-fg);
    padding-left: 0.85rem;
    text-wrap: pretty;
  }
  .hire-term__txt code {
    background: transparent;
    color: var(--t-cyan);
    font-family: inherit;
  }
  .hire-term__plan {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.85rem;
    color: var(--t-fg);
  }
  .hire-term__plan li::before {
    content: "› ";
    color: var(--t-dim);
  }
  .hire-term__plan li.is-done {
    color: var(--t-mut);
  }
  .hire-term__plan li.is-done::before {
    content: "✓ ";
    color: var(--t-grn);
  }
  .hire-term__plan li.is-now::before {
    content: "▸ ";
    color: var(--t-ylw);
  }
  .hire-term__plan li.is-now {
    color: var(--t-fg);
  }

  /* SQL / tool-call code block — dim background, mono indent.
     Background + color are !important so they win against the global
     `pre { background: var(--surface-container) }` rule in base.css. */
  .hire-term__code {
    margin-left: 0.85rem;
    padding: 0.4rem 0.55rem;
    background: var(--t-bg-2) !important;
    border-left: 2px solid #9b8cff;
    color: var(--t-fg) !important;
    white-space: pre;
    overflow-x: auto;
    font-size: 0.62rem;
    line-height: 1.45;
  }
  .hire-term__code .k {
    color: #9b8cff;
  } /* keyword */
  .hire-term__code .s {
    color: var(--t-grn);
  } /* string/number */
  .hire-term__code .c {
    color: var(--t-dim);
  } /* comment */

  /* Result table — pretend tabular output. Same background override
     as the code block; without it base.css gives every <pre> a beige
     background that breaks the dark terminal frame. */
  .hire-term__table {
    margin-left: 0.85rem;
    padding: 0.4rem 0.55rem;
    background: var(--t-bg-2) !important;
    border-left: 2px solid var(--t-grn);
    font-size: 0.62rem;
    line-height: 1.5;
    color: var(--t-fg) !important;
    white-space: pre;
    overflow-x: auto;
  }
  .hire-term__table .id {
    color: var(--t-cyan);
  }
  .hire-term__table .amt {
    color: var(--t-grn);
  }
  .hire-term__table .age {
    color: var(--t-ylw);
  }
  .hire-term__table .more {
    color: var(--t-mut);
  }

  /* Sub-agents fan-out — purple arrow per agent, name + finding row */
  .hire-term__agents {
    list-style: none;
    margin: 0;
    padding: 0.1rem 0 0 0.85rem;
    color: var(--t-fg);
    display: grid;
    gap: 0.2rem;
    font-size: 0.62rem;
    line-height: 1.5;
  }
  .hire-term__agents li {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 0.5rem;
  }
  .hire-term__agents li::before {
    display: none;
  }
  .hire-term__agents .name {
    color: #b8aaff;
    font-weight: 600;
  }
  .hire-term__agents .name::before {
    content: "↳ ";
    color: #6b5cff;
  }
  .hire-term__agents .find {
    color: var(--t-fg);
  }
  .hire-term__agents .find b {
    color: var(--t-ylw);
    font-weight: 500;
  }

  /* Root cause — % · driver name · share bar */
  .hire-term__cause {
    margin-left: 0.85rem;
    padding: 0.4rem 0.55rem;
    background: var(--t-bg-2) !important;
    border-left: 2px solid var(--t-grn);
    font-size: 0.62rem;
    line-height: 1.6;
    color: var(--t-fg) !important;
    display: grid;
    gap: 0.2rem;
  }
  .hire-term__cause .row {
    display: grid;
    grid-template-columns: 3.2rem 1fr 5.5rem;
    gap: 0.4rem;
    align-items: center;
  }
  .hire-term__cause .pct {
    color: var(--t-grn);
    font-weight: 600;
    text-align: right;
  }
  .hire-term__cause .pct--primary {
    color: var(--t-ylw);
  }
  .hire-term__cause .drv {
    color: var(--t-fg);
  }
  .hire-term__cause .drv--primary {
    color: var(--t-ylw);
    font-weight: 500;
  }
  .hire-term__cause .bar {
    --w: 0%;

    height: 0.45rem;
    background: linear-gradient(
      to right,
      var(--t-grn) var(--w, 0%),
      transparent var(--w, 0%)
    );
    border-bottom: 1px solid var(--t-border);
  }
  .hire-term__cause .row--primary .bar {
    background: linear-gradient(
      to right,
      var(--t-ylw) var(--w, 0%),
      transparent var(--w, 0%)
    );
  }
  .hire-term__cause .bar--47 {
    --w: 47%;
  }
  .hire-term__cause .bar--25 {
    --w: 25%;
  }
  .hire-term__cause .bar--22 {
    --w: 22%;
  }
  .hire-term__cause .bar--6 {
    --w: 6%;
  }

  /* ── BPMN workflow diagrams ──
     Two diagrams render inside .hire-term__msg blocks: a parallel
     fan-out for sub-agents (split gateway → 3 task branches) and a
     post-approval execution flow (sequential + decision gate). Dark-
     palette versions of the BPMN class set; SVG inherits its size
     from the parent and scales down on narrow viewports. */
  .hire-term__bpmn {
    width: 100%;
    height: auto;
    margin: 0.4rem 0 0 0.85rem;
    max-width: calc(100% - 0.85rem);
    display: block;
    overflow: visible;
  }
  .bpmn-box {
    fill: var(--t-bg-2);
    stroke: var(--t-border);
    stroke-width: 1;
    rx: 1;
  }
  .bpmn-box--start {
    stroke: var(--t-cyan);
  }
  .bpmn-box--sub {
    stroke: #6b5cff;
  }
  .bpmn-box--end {
    stroke: var(--t-grn);
  }
  .bpmn-box--action {
    stroke: var(--t-ylw);
  }
  .bpmn-box--yes {
    stroke: var(--t-grn);
  }
  .bpmn-box--no {
    stroke: var(--t-mut);
  }
  .bpmn-text {
    fill: var(--t-fg);
    font-family: var(--font-body);
    font-size: 8.5px;
    letter-spacing: 0.01em;
    dominant-baseline: middle;
  }
  .bpmn-text--label {
    fill: var(--t-fg);
    font-size: 9.5px;
  }
  .bpmn-text--sub {
    fill: #b8aaff;
  }
  .bpmn-text--meta {
    fill: var(--t-mut);
    font-size: 7.5px;
  }
  .bpmn-text--end {
    fill: var(--t-grn);
    font-weight: 600;
  }
  .bpmn-line {
    stroke: var(--t-dim);
    stroke-width: 1.2;
    fill: none;
  }
  .bpmn-line--yes {
    stroke: var(--t-grn);
  }
  .bpmn-line--no {
    stroke: var(--t-mut);
  }
  .bpmn-arrow {
    fill: var(--t-dim);
    stroke: none;
  }
  .bpmn-arrow--yes {
    fill: var(--t-grn);
  }
  .bpmn-arrow--no {
    fill: var(--t-mut);
  }
  .bpmn-diamond {
    fill: var(--t-bg);
    stroke: var(--t-ylw);
    stroke-width: 1.3;
  }
  .bpmn-diamond-text {
    fill: var(--t-ylw);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
  }
  .bpmn-pill-label {
    fill: var(--t-mut);
    font-family: var(--font-body);
    font-size: 7px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .bpmn-fill-grn {
    fill: var(--t-grn);
  }
  .bpmn-fill-muted {
    fill: var(--t-mut);
  }

  /* Actions queue — arrow + action + size meta on one mono row */
  .hire-term__actions {
    list-style: none;
    margin: 0;
    padding: 0.1rem 0 0 0.85rem;
    color: var(--t-fg);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.62rem;
    line-height: 1.5;
  }
  .hire-term__actions li {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
  }
  .hire-term__actions .arrow {
    color: var(--t-ylw);
    flex-shrink: 0;
  }
  .hire-term__actions .what {
    color: var(--t-fg);
    flex: 1 1 auto;
    min-width: 0;
  }
  .hire-term__actions .meta {
    color: var(--t-mut);
    font-size: 0.58rem;
    flex-shrink: 0;
  }
  .hire-term__actions .meta b {
    color: var(--t-grn);
    font-weight: 500;
  }
  .hire-term__perm {
    padding-left: 0.85rem;
    color: var(--t-fg);
  }
  .hire-term__perm-meta {
    color: var(--t-mut);
    font-size: 0.58rem;
    margin: 0.15rem 0 0.35rem;
  }
  .hire-term__btnrow {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.65rem;
    color: var(--t-mut);
  }
  .hire-term__btnrow b {
    color: var(--t-grn);
    font-weight: 400;
  }
  .hire-term__composer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-top: 1px solid var(--t-bg-3);
    background: var(--t-bg-2);
    color: var(--t-mut);
  }
  .hire-term__prompt {
    color: var(--t-grn);
  }
  .hire-term__input {
    flex: 1;
  }
  .hire-term__caret {
    display: inline-block;
    width: 0.45rem;
    height: 0.85rem;
    background: var(--t-grn);
    animation: hire-term-blink 1s steps(1) infinite;
    vertical-align: -0.18rem;
  }
  @keyframes hire-term-blink {
    50% {
      opacity: 0;
    }
  }

  /* ── Session animation: messages enter on a staggered timeline so
     the terminal plays out like a real Neo session every cycle.
     One 18s cycle, looped indefinitely. Each message holds visible
     until the cycle approaches the end, then fades and the sequence
     restarts. Honors prefers-reduced-motion (drops the staging — all
     messages stay visible, the only motion is the caret blink). */
  .hire-term__body .hire-term__msg {
    opacity: 0;
    transform: translateY(6px);
    animation-duration: 18s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .hire-term__body .hire-term__msg:nth-child(1) {
    animation-name: hire-term-step-1;
  }
  .hire-term__body .hire-term__msg:nth-child(2) {
    animation-name: hire-term-step-2;
  }
  .hire-term__body .hire-term__msg:nth-child(3) {
    animation-name: hire-term-step-3;
  }
  .hire-term__body .hire-term__msg:nth-child(4) {
    animation-name: hire-term-step-4;
  }
  .hire-term__body .hire-term__msg:nth-child(5) {
    animation-name: hire-term-step-5;
  }
  .hire-term__body .hire-term__msg:nth-child(6) {
    animation-name: hire-term-step-6;
  }

  @keyframes hire-term-step-1 {
    0%,
    1% {
      opacity: 0;
      transform: translateY(6px);
    }
    5%,
    92% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(6px);
    }
  }
  @keyframes hire-term-step-2 {
    0%,
    10% {
      opacity: 0;
      transform: translateY(6px);
    }
    14%,
    92% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(6px);
    }
  }
  @keyframes hire-term-step-3 {
    0%,
    22% {
      opacity: 0;
      transform: translateY(6px);
    }
    26%,
    92% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(6px);
    }
  }
  @keyframes hire-term-step-4 {
    0%,
    36% {
      opacity: 0;
      transform: translateY(6px);
    }
    40%,
    92% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(6px);
    }
  }
  @keyframes hire-term-step-5 {
    0%,
    52% {
      opacity: 0;
      transform: translateY(6px);
    }
    56%,
    92% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(6px);
    }
  }
  @keyframes hire-term-step-6 {
    0%,
    68% {
      opacity: 0;
      transform: translateY(6px);
    }
    72%,
    92% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(6px);
    }
  }

  /* Plan checks light up in sequence. Without this all three ✓/▸
     glyphs render simultaneously the moment the PLAN message fades
     in — kills the "neo is working through the steps" feel. Each
     plan li gets its own progress animation that aligns with the
     parent message's entrance time. */
  .hire-term__plan li {
    opacity: 0;
    animation-duration: 18s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
  }
  .hire-term__plan li:nth-child(1) {
    animation-name: hire-term-plan-1;
  }
  .hire-term__plan li:nth-child(2) {
    animation-name: hire-term-plan-2;
  }
  .hire-term__plan li:nth-child(3) {
    animation-name: hire-term-plan-3;
  }
  .hire-term__plan li:nth-child(4) {
    animation-name: hire-term-plan-4;
  }
  .hire-term__plan li:nth-child(5) {
    animation-name: hire-term-plan-5;
  }
  @keyframes hire-term-plan-1 {
    0%,
    27% {
      opacity: 0;
    }
    30%,
    92% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes hire-term-plan-2 {
    0%,
    30% {
      opacity: 0;
    }
    33%,
    92% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes hire-term-plan-3 {
    0%,
    33% {
      opacity: 0;
    }
    36%,
    92% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes hire-term-plan-4 {
    0%,
    36% {
      opacity: 0;
    }
    39%,
    92% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes hire-term-plan-5 {
    0%,
    39% {
      opacity: 0;
    }
    42%,
    92% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  /* Composer prompt text rotates between "ask…" placeholder and the
     typed-out prompt so the input area participates in the cycle
     instead of sitting frozen. */
  .hire-term__input {
    animation: hire-term-input 18s infinite ease-out;
  }
  @keyframes hire-term-input {
    0%,
    8% {
      opacity: 0.55;
    }
    12%,
    16% {
      opacity: 1;
    }
    20%,
    100% {
      opacity: 0.55;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hire-term__caret {
      animation: none;
    }
    .hire-term__body .hire-term__msg,
    .hire-term__plan li,
    .hire-term__input {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  /* index.njk :: migrated style block 3 */
  .uc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 1.5rem;
  }
  @media (min-width: 768px) {
    .uc-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .uc-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 1280px) {
    .uc-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
      border-left: 1px solid var(--border);
    }
    .uc-col {
      border-right: 1px solid var(--border);
      padding: 0 1.25rem;
    }
  }
  .uc-col {
    display: flex;
    flex-direction: column;
  }
  .uc-col__role {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--foreground);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--red);
  }
  .uc-col__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .uc-col__list li {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--foreground);
    padding: 0.65rem 0;
    border-top: 1px solid var(--border);
  }
  .uc-col__list li:first-child {
    border-top: 0;
    padding-top: 0.25rem;
  }

  /* index.njk :: migrated style block 4 */
  /* Interface mockup register — warm beige (hue 68–72) not cool gray.
       Dark warmest-darkest beige in light mode; flips to a cream card in
       dark mode (see html.dark .neo-mock below). Accent palette flips
       with the theme too — terminal-bright on dark, -on-light variants
       on cream. --t-border deliberately matches --t-bg in both modes:
       outer frame + tier-boundary dividers (chrome-bottom, sidebar-right,
       stats-container-outer) all blend with the main bg, leaving only
       the in-card cell separators visible at Δ 8 — the bg tiers do the
       structural work, borders are subtle reinforcement. */
  .neo-mock {
    --t-bg: var(--beige-800);
    --t-bg-soft: var(--beige-700);
    --t-bg-card: var(--beige-700);
    --t-bg-active: #3a2820;
    --t-fg: var(--beige-100);
    --t-muted: var(--beige-400);
    --t-dim: var(--beige-500);
    --t-border: var(--beige-800);
    --t-red: #ff7a5c;
    --t-grn: #8cc88e;
    --t-ylw: #e0bf5d;
    --t-cyan: #5cd1c7;
    max-width: 920px;
    background: var(--t-bg);
    color: var(--t-fg);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    border: 1px solid var(--t-border);
    border-radius: 6px;
    box-shadow:
      0 24px 60px -20px rgba(0, 0, 0, 0.18),
      0 8px 18px -6px rgba(0, 0, 0, 0.12);
    overflow: hidden;
  }
  html.dark .neo-mock {
    --t-bg: var(--beige-300);
    --t-bg-soft: var(--beige-400);
    --t-bg-card: var(--beige-400);
    --t-bg-active: oklch(85% 0.06 28);
    --t-fg: var(--ink-deep);
    --t-muted: var(--beige-700);
    --t-dim: var(--beige-600);
    --t-border: var(--beige-300);
    --t-red: var(--red-on-light);
    --t-grn: var(--grn-on-light);
    --t-ylw: oklch(55% 0.16 84);
    --t-cyan: oklch(42% 0.12 190);
  }
  .neo-mock__chrome {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--t-border);
    background: var(--t-bg-soft);
    color: var(--t-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    flex-wrap: wrap;
  }
  .neo-mock__dots {
    display: inline-flex;
    gap: 0.35rem;
  }
  .neo-mock__dots i {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    display: block;
  }
  .neo-mock__dots i:nth-child(1) {
    background: #ff5f56;
  }
  .neo-mock__dots i:nth-child(2) {
    background: #ffbd2e;
  }
  .neo-mock__dots i:nth-child(3) {
    background: #27c93f;
  }
  .neo-mock__chrome-title {
    color: var(--t-fg);
  }
  .neo-mock__chrome-spacer {
    margin-left: auto;
  }

  .neo-mock__app {
    display: grid;
    grid-template-columns: 180px 1fr;
  }
  @media (max-width: 720px) {
    .neo-mock__app {
      grid-template-columns: 1fr;
    }
    .neo-mock__sidebar {
      border-right: 0;
      border-bottom: 1px solid var(--t-border);
    }
  }

  .neo-mock__sidebar {
    border-right: 1px solid var(--t-border);
    background: var(--beige-900);
    padding: 0.85rem 0.75rem;
    min-height: 100%;
  }
  html.dark .neo-mock__sidebar {
    background: var(--beige-400);
  }
  .neo-mock__sidebar h4 {
    font-size: 0.65rem;
    color: var(--t-muted);
    margin: 0 0 0.4rem;
    font-weight: 400;
  }
  .neo-mock__sidebar h4 + ul + h4 {
    margin-top: 1rem;
  }
  .neo-mock__sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .neo-mock__sidebar li {
    padding: 0.2rem 0.25rem 0.2rem 0.85rem;
    color: var(--t-muted);
    font-size: 0.7rem;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .neo-mock__sidebar li.is-active {
    color: var(--t-fg);
  }
  .neo-mock__sidebar li.is-active::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--t-red);
  }

  .neo-mock__main {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-width: 0;
  }
  .neo-mock__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--t-border);
  }
  .neo-mock__scenario {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--t-fg);
  }
  .neo-mock__crumb {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--t-muted);
  }

  /* Stat cards (Finance) */
  .neo-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--t-border);
    border-radius: 4px;
    background: var(--t-bg-card);
    overflow: hidden;
  }
  @media (max-width: 720px) {
    .neo-stats {
      grid-template-columns: 1fr 1fr;
    }
  }
  .neo-stat {
    padding: 0.85rem 0.95rem;
    border-right: 1px solid var(--t-border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
  }
  .neo-stat:last-child {
    border-right: 0;
  }
  @media (max-width: 720px) {
    .neo-stat {
      border-right: 0;
      border-bottom: 1px solid var(--t-border);
    }
    .neo-stat:nth-child(odd) {
      border-right: 1px solid var(--t-border);
    }
    .neo-stat:nth-last-child(-n + 2) {
      border-bottom: 0;
    }
  }
  .neo-stat__lbl {
    font-family: var(--font-body);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--t-muted);
  }
  .neo-stat__num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--t-fg);
  }
  .neo-stat__num--neg {
    color: var(--t-red);
  }
  .neo-stat__sub {
    font-size: 0.7rem;
    color: var(--t-muted);
    line-height: 1.3;
  }

  /* Build manifest (Ops) */
  .neo-manifest {
    border: 1px solid var(--t-border);
    border-radius: 4px;
    background: var(--t-bg-card);
    overflow: hidden;
  }
  .neo-manifest__group {
    display: grid;
    grid-template-columns: 140px 1fr;
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--t-border);
    gap: 0.85rem;
  }
  .neo-manifest__group:last-child {
    border-bottom: 0;
  }
  .neo-manifest__head {
    font-family: var(--font-body);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--t-muted);
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
  }
  .neo-manifest__count {
    color: var(--t-red);
    font-weight: 600;
  }
  .neo-manifest__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .neo-manifest__items li {
    font-size: 0.78rem;
    color: var(--t-fg);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .neo-manifest__items li::before {
    content: "✓";
    color: var(--t-grn);
    font-weight: 700;
  }
  .neo-manifest__items li small {
    color: var(--t-muted);
    font-family: var(--font-body);
    font-size: 0.65rem;
    margin-left: 0.25rem;
  }

  /* Records table (HR) */
  .neo-table {
    border: 1px solid var(--t-border);
    border-radius: 4px;
    background: var(--t-bg-card);
    overflow: hidden;
  }
  .neo-table__row {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 0.8fr 1fr;
    gap: 0.6rem;
    padding: 0.55rem 0.95rem;
    border-bottom: 1px solid var(--t-border);
    align-items: center;
    font-size: 0.78rem;
  }
  .neo-table__row:last-child {
    border-bottom: 0;
  }
  .neo-table__row--head {
    font-family: var(--font-body);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--t-muted);
    background: var(--t-bg);
  }
  .neo-table__row--set-aside {
    color: var(--t-muted);
    background: rgba(224, 191, 93, 0.04);
  }
  .neo-table__name {
    color: var(--t-fg);
    font-weight: 500;
  }
  .neo-table__cell--mono {
    font-family: var(--font-body);
  }
  .neo-table__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .neo-table__status--ok {
    color: var(--t-grn);
  }
  .neo-table__status--hold {
    color: var(--t-ylw);
  }
  .neo-table__status::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
  }

  /* BPMN workflow (Sales) */
  .bpmn-svg {
    width: 100%;
    display: block;
    aspect-ratio: 720 / 240;
    background: var(--t-bg-card);
    border: 1px solid var(--t-border);
    border-radius: 4px;
  }
  .bpmn-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #2d2218;
    border: 1.5px solid #8a5a3a;
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    color: #e5d8c5;
    padding: 4px 8px;
    line-height: 1.2;
    box-sizing: border-box;
  }
  .bpmn-box--success {
    background: #1f2e22;
    border-color: #4a8a4d;
    color: #b9e0c1;
  }
  .bpmn-box--fallback {
    background: #2d2616;
    border-color: #b89244;
    color: #e5d8a8;
  }
  .bpmn-diamond-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: #c8d8e8;
    padding: 0 8px;
    line-height: 1.15;
    box-sizing: border-box;
  }
  .bpmn-diamond-shape {
    fill: #1a2632;
    stroke: #4a7da6;
    stroke-width: 1.5;
  }
  .bpmn-line {
    stroke: #6a6c70;
    stroke-width: 1.5;
    fill: none;
  }
  .bpmn-line--yes {
    stroke: #4a8a4d;
  }
  .bpmn-line--no {
    stroke: #c44425;
  }
  .bpmn-arrow {
    fill: #6a6c70;
  }
  .bpmn-arrow--yes {
    fill: #4a8a4d;
  }
  .bpmn-arrow--no {
    fill: #c44425;
  }
  .bpmn-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    fill: #8a8c92;
  }
  .bpmn-label--yes {
    fill: #79c47b;
  }
  .bpmn-label--no {
    fill: #ff7a5c;
  }

  @keyframes bpmn-step-active {
    0%,
    100% {
      background: #2d2218;
      box-shadow: none;
      transform: scale(1);
    }
    8%,
    16% {
      background: #4a3220;
      box-shadow: 0 0 0 3px rgba(255, 122, 92, 0.45);
      transform: scale(1.05);
    }
  }
  @keyframes bpmn-step-success {
    0%,
    100% {
      background: #1f2e22;
      box-shadow: none;
      transform: scale(1);
    }
    8%,
    16% {
      background: #2c4732;
      box-shadow: 0 0 0 3px rgba(121, 196, 123, 0.5);
      transform: scale(1.06);
    }
  }
  @keyframes bpmn-diamond-active {
    0%,
    100% {
      fill: #1a2632;
      stroke: #4a7da6;
      stroke-width: 1.5;
    }
    8%,
    16% {
      fill: #2a3f54;
      stroke: #6fa4d4;
      stroke-width: 2.5;
    }
  }
  @keyframes bpmn-arrow-flow {
    0%,
    100% {
      stroke-dashoffset: 0;
      opacity: 0.5;
    }
    8%,
    16% {
      stroke-dashoffset: -14;
      opacity: 1;
    }
  }
  .bpmn-anim foreignObject[data-step="1"] .bpmn-box,
  .bpmn-anim foreignObject[data-step="2"] .bpmn-box,
  .bpmn-anim foreignObject[data-step="3"] .bpmn-box {
    animation: bpmn-step-active 9s ease-in-out infinite;
    transform-origin: center;
  }
  .bpmn-anim foreignObject[data-step="1"] .bpmn-box {
    animation-delay: 0.2s;
  }
  .bpmn-anim foreignObject[data-step="2"] .bpmn-box {
    animation-delay: 1.7s;
  }
  .bpmn-anim foreignObject[data-step="3"] .bpmn-box {
    animation-delay: 3.2s;
  }
  .bpmn-anim .bpmn-diamond-shape {
    animation: bpmn-diamond-active 9s ease-in-out infinite;
    animation-delay: 4.7s;
  }
  .bpmn-anim foreignObject[data-step="yes"] .bpmn-box {
    animation: bpmn-step-success 9s ease-in-out infinite;
    animation-delay: 6.2s;
    transform-origin: center;
  }
  .bpmn-anim .bpmn-line[data-flow] {
    stroke-dasharray: 4 3;
    animation: bpmn-arrow-flow 9s ease-in-out infinite;
  }
  .bpmn-anim .bpmn-line[data-flow="1"] {
    animation-delay: 0.7s;
  }
  .bpmn-anim .bpmn-line[data-flow="2"] {
    animation-delay: 2.2s;
  }
  .bpmn-anim .bpmn-line[data-flow="3"] {
    animation-delay: 3.7s;
  }
  .bpmn-anim .bpmn-line[data-flow="yes"] {
    animation-delay: 5.7s;
  }
  @media (prefers-reduced-motion: reduce) {
    .bpmn-anim foreignObject .bpmn-box,
    .bpmn-anim .bpmn-diamond-shape,
    .bpmn-anim .bpmn-line[data-flow] {
      animation: none;
    }
  }

  /* Approval card */
  .neo-mock__approval {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 0.95rem;
    border: 1.5px solid var(--t-red);
    border-radius: 4px;
    background: var(--t-bg-active);
  }
  @media (max-width: 720px) {
    .neo-mock__approval {
      grid-template-columns: 1fr;
      text-align: left;
    }
  }
  .neo-mock__approval-icon {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--t-red);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--t-red);
    font-weight: 900;
    font-family: var(--font-display);
    font-size: 1rem;
  }
  .neo-mock__approval-text {
    min-width: 0;
  }
  .neo-mock__approval-lbl {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--t-red);
    font-weight: 700;
    margin-bottom: 0.2rem;
  }
  .neo-mock__approval-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--t-fg);
  }
  .neo-mock__approval-meta {
    font-size: 0.7rem;
    color: var(--t-muted);
    margin-top: 0.2rem;
  }
  .neo-mock__approval-actions {
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .neo-mock__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border: 1.5px solid var(--t-dim);
    background: transparent;
    color: var(--t-fg);
    border-radius: 3px;
  }
  .neo-mock__btn--primary {
    background: var(--t-red);
    color: var(--beige-900);
    border-color: var(--t-red);
    font-weight: 600;
  }
  html.dark .neo-mock__btn--primary {
    color: var(--beige-100);
  }
  .neo-mock__role {
    max-width: 820px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-m);
  }

  /* Receivables walkthrough — ordered turn-by-turn list. */
  .session-signature {
    display: grid;
    gap: 2rem;
    align-items: start;
    margin-top: 2.75rem;
    overflow-x: clip;
  }
  @media (min-width: 1024px) {
    .session-signature {
      grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
      gap: clamp(2rem, 4vw, 4rem);
    }
    .session-signature__copy {
      margin-top: clamp(1.5rem, 5vw, 4.5rem);
    }
    .session-signature__mock {
      margin-right: calc(50% - 50vw);
      padding-right: clamp(1rem, 4vw, 4rem);
    }
    .session-signature__mock .neo-mock {
      max-width: min(100%, 1040px);
    }
  }
  @media (max-width: 1023px) {
    .session-signature {
      margin-top: 2rem;
    }
  }
  .session-walk {
    border: 1px solid var(--border);
    background: var(--background);
    max-width: 920px;
    margin-bottom: 2rem;
  }
  .session-walk__turn {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }
  .session-walk__turn:last-child {
    border-bottom: 0;
  }
  @media (max-width: 640px) {
    .session-walk__turn {
      grid-template-columns: 1fr;
      gap: 0.5rem;
    }
  }
  .session-walk__lbl {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--red-on-light);
    font-weight: 600;
  }
  .session-walk__body {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--foreground);
  }
  .session-walk__body p {
    margin: 0;
  }
  .session-walk__body p + p {
    margin-top: 0.6rem;
  }
  .session-walk__quote {
    border: 1px solid var(--border);
    border-top: 2px solid var(--red);
    padding: 0.65rem 0.9rem;
    background: var(--surface-dim);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--foreground);
    margin: 0;
  }
  .session-walk__quote--stacked {
    margin-top: var(--space-3);
  }
  .session-walk__quote em {
    color: var(--text-m);
    font-style: italic;
  }
  .session-walk__perm-actions {
    display: inline-flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
  }
  .session-walk__perm-actions span {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid var(--border);
    color: var(--foreground);
    background: var(--background);
  }
  .session-walk__perm-actions span:first-child {
    background: var(--red);
    color: var(--primary-foreground);
    border-color: var(--red);
  }

  /* Tighter layout for §03 stacked previews. */
  .session-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  @media (min-width: 1024px) {
    .session-preview {
      grid-template-columns: 1fr 1.6fr;
      gap: 2rem;
    }
  }
  .session-preview__copy h3 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.85rem;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--foreground);
    margin: 0 0 0.75rem;
  }
  .session-preview__copy .role {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--red-on-light);
    margin-bottom: 0.5rem;
  }
  .session-preview__copy p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--foreground);
    margin: 0;
  }

  /* index.njk :: migrated style block 5 */
  /* §04 LOOP runs on a theme-stable "always dark section, always cream
       cards" register. Section bg is set to var(--beige-800) on the
       element regardless of theme; every color reference inside the
       grid uses raw beige / ink stops (not the theme-aware --background
       / --foreground / --text-m / --border / --surface-dim) so cards,
       text, dividers, and chevron tabs stay identical in both modes.
       Result: chevrons (cream tabs extending out of each card) stay
       fully visible against the dark section in dark mode, and the
       cards don't pick up an inherited cool-bg in either mode. */
  .loop-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
  }
  @media (min-width: 901px) {
    .loop-card:nth-child(1) {
      grid-column: span 5;
    }
    .loop-card:nth-child(2) {
      grid-column: span 4;
      margin-top: 3.25rem;
    }
    .loop-card:nth-child(3) {
      grid-column: span 3;
      margin-top: 1.1rem;
    }
    .loop-card:nth-child(4) {
      grid-column: 4 / span 6;
      margin-top: -0.25rem;
    }
  }
  @media (max-width: 900px) {
    .loop-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 540px) {
    .loop-grid {
      grid-template-columns: 1fr;
    }
  }

  .loop-card {
    --loop-card-bg: var(--beige-200);
    position: relative;
    background: var(--loop-card-bg);
    padding: 1.5rem 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    min-height: 260px;
  }
  .loop-card--you {
    --loop-card-bg: var(--beige-200);
  }
  .loop-card--neo {
    --loop-card-bg: var(--beige-300);
  }

  .loop-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mid);
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--beige-400);
  }
  .loop-card__num {
    color: oklch(42% 0.19 28);
    font-weight: 600;
  }
  .loop-card__actor {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--beige-400);
    background: var(--beige-200);
  }
  .loop-card--you .loop-card__actor {
    color: var(--primary-foreground);
    background: var(--red);
    border-color: var(--red);
  }

  .loop-card__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    color: var(--ink-deep);
  }
  .loop-card--you .loop-card__icon {
    color: oklch(42% 0.19 28);
  }

  .loop-card__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.65rem;
    line-height: 1;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--ink-deep);
    margin-bottom: 0.5rem;
  }
  .loop-card__caption {
    font-family: var(--font-body);
    color: var(--ink-mid);
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0.85rem;
  }
  .loop-card__example {
    margin-top: auto;
    /* Reserve 2 lines so the red top border aligns across all four
         cards even when one example (e.g. APPROVE) is single-line. */
    min-height: calc(2lh + 1.2rem);
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--ink-deep);
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--beige-400);
    border-top: 2px solid var(--red);
    background: var(--beige-300);
  }
  .loop-card--neo .loop-card__example {
    background: var(--beige-200);
  }

  .loop-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    width: 20px;
    height: 20px;
    background: var(--loop-card-bg);
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
  }
  .loop-card:last-child::after {
    display: none;
  }
  @media (min-width: 901px) {
    .loop-card::after {
      display: none;
    }
  }
  @media (max-width: 900px) {
    .loop-card::after {
      display: none;
    }
    .loop-card:nth-child(1)::after,
    .loop-card:nth-child(3)::after {
      display: block;
      right: -10px;
      top: 50%;
    }
  }
  @media (max-width: 540px) {
    .loop-card::after {
      display: none;
    }
  }

  .loop-back {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--beige-100);
    opacity: 0.75;
  }
  .loop-back__arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--beige-100);
    opacity: 0.85;
  }

  /* ── Section-on-dark overrides for §04 ──
       Section bg flipped to --beige-800 (warm dark brown). The opener
       number/label, h2, and body paragraph all need cream so they read
       on the dark surface; the closer chip becomes a light surface-dim
       chip with foreground text. */
  #loop .section-opener__num,
  #loop .section-opener__label,
  #loop .section-opener__label strong {
    color: var(--beige-100);
  }
  #loop .section-closer {
    background: var(--surface-dim);
    color: var(--foreground);
    border-color: var(--surface-dim);
  }
  #loop .section-closer:hover {
    border-color: var(--red);
  }

  /* index.njk :: migrated style block 6 */
  #under-the-hood code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--surface-dim);
    color: var(--red-on-light);
    padding: 1px 5px;
    border-radius: 2px;
  }
  /* Per-card 2px red left border — small accent that ties the cards
         to the red band above without flooding the section in red. */
  #under-the-hood .uth-card {
    border-left: 2px solid var(--red);
  }

  /* index.njk :: migrated style block 7 */
  /* Code block register — light tan paper (beige-400), theme-stable.
       One tier deeper than --surface-dim (krawler-pack at beige-300).
       Dark ink primary text; syntax accents flipped to on-light brand
       variants. Distinct from .neo-mock / .hire-term interface mocks
       which are the dark register. */
  .skill-yaml {
    background: var(--beige-400);
    color: var(--ink-deep);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.25rem 1.25rem;
    margin: 0;
    overflow-x: auto;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.12);
  }
  .skill-yaml code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    background: transparent;
    color: inherit;
    padding: 0;
    white-space: pre;
    display: block;
  }
  .skill-yaml .y-fence {
    color: var(--beige-700);
  }
  .skill-yaml .y-key {
    color: oklch(42% 0.12 190);
  }
  .skill-yaml .y-val {
    color: var(--ink-deep);
  }
  .skill-yaml .y-num {
    color: var(--red-on-light);
    font-weight: 600;
  }
  .skill-yaml .y-step {
    color: var(--ink-deep);
  }

  .install-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--border);
    margin-top: 1rem;
  }
  @media (min-width: 768px) {
    .install-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  .install-grid__cell {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }
  @media (min-width: 768px) {
    .install-grid__cell:nth-child(odd) {
      border-right: 1px solid var(--border);
    }
    .install-grid__cell:nth-last-child(-n + 2) {
      border-bottom: 0;
    }
  }
  .install-grid__cell:last-child {
    border-bottom: 0;
  }
  .install-grid__lbl {
    font-family: var(--font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--red-on-light);
    margin-bottom: 0.4rem;
  }
  .install-grid__cmd {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--foreground);
  }

  .krawler-pack {
    border: 1px solid var(--border);
    border-top: 3px solid var(--red);
    background: var(--surface-dim);
    padding: 1.25rem 1.5rem;
    margin-top: 2.5rem;
  }
  .krawler-pack__lbl {
    font-family: var(--font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--red-on-light);
    margin-bottom: 0.6rem;
  }
  .krawler-pack p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--foreground);
    margin: 0;
  }
  .krawler-pack a {
    color: var(--red-on-light);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* index.njk :: migrated style block 8 */
  .download-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
  }

  .download-picker--hero {
    align-items: flex-start;
  }

  .download-picker--tile {
    align-items: stretch;
    display: block;
  }

  .download-picker--hero .download-menu {
    flex-basis: 100%;
  }

  .brutalist-tile__actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
  }

  .brutalist-tile__actions .download-menu__trigger {
    background: transparent;
    color: inherit;
    border-color: transparent;
    box-shadow: none;
    padding-inline: 0;
  }

  .brutalist-tile__actions .download-menu__trigger:hover,
  .brutalist-tile__actions .download-menu[data-open="true"] .download-menu__trigger {
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .download-menu--tile .download-menu__panel {
    top: auto;
    bottom: calc(100% + var(--space-2));
  }

  @media (max-width: 520px) {
    .download-menu--tile {
      position: static;
    }

    .download-menu--tile .download-menu__panel {
      left: 0;
      right: 0;
      width: auto;
    }
  }

  .download-menu__item[hidden] {
    display: none;
  }

  .release-meta {
    margin-top: var(--space-6);
  }

  @media (max-width: 640px) {
    .release-meta {
      justify-content: flex-start;
      gap: var(--space-2) var(--space-3);
    }

    .release-meta__sep {
      height: 1rem;
    }
  }

  .brutalist-tile {
    display: flex;
    flex-direction: column;
    gap: 28px;
    background: var(--red);
    color: var(--primary-foreground);
    border: 1px solid var(--red);
    box-shadow: 8px 8px 0 var(--border);
    text-decoration: none;
    width: 100%;
    padding: 28px 28px 24px;
    transition:
      transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .brutalist-tile:hover,
  .brutalist-tile:focus-visible,
  .brutalist-tile:focus-within {
    transform: translate(-3px, -3px);
    box-shadow: 12px 12px 0 var(--border);
  }
  .brutalist-tile__top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
  }
  .brutalist-tile__kicker {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.8;
    white-space: nowrap;
  }
  .brutalist-tile__headline {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 4.6vw, 3.5rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    margin: 0;
    color: inherit;
  }
  .brutalist-tile__bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
  }
  .brutalist-tile__url {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in oklch, var(--primary-foreground), transparent 70%);
    opacity: 0.85;
  }
  .brutalist-tile__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in oklch, var(--primary-foreground), transparent 25%);
    color: inherit;
    font-family: var(--font-body);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    text-decoration: none;
  }

  .brutalist-tile__action:hover,
  .brutalist-tile__action:focus-visible {
    background: color-mix(in oklch, var(--primary-foreground), transparent 88%);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .brutalist-tile--download {
    width: 100%;
  }

  @media (min-width: 768px) {
    .brutalist-tile {
      padding: 36px 40px 32px;
    }
    .brutalist-tile__action {
      font-size: 14px;
    }
  }

  @media (min-width: 1024px) {
    .brutalist-tile {
      padding: 44px 48px 40px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .brutalist-tile {
      transition: none;
    }
  }

  /* details.njk :: migrated style block 1 */
  .det-hero {
    position: relative;
    overflow: hidden;
    background: var(--surface-dim);
    border-bottom: 1px solid var(--border);
  }

  .det-hero::after {
    content: "DETAILS";
    position: absolute;
    right: clamp(1.5rem, 7vw, 6rem);
    top: clamp(1.5rem, 5vw, 4rem);
    color: var(--foreground);
    font-family: var(--font-display);
    font-size: var(--text-8xl);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.8;
    opacity: 0.035;
    pointer-events: none;
    text-transform: uppercase;
  }
  @media (min-width: 1024px) {
    .det-hero::after {
      font-size: 11rem;
    }
  }

  .det-crumb {
    color: var(--text-m);
  }

  .det-crumb__link {
    color: var(--red-on-light);
    text-decoration: none;
  }

  .det-crumb__sep {
    color: var(--border);
    margin-inline: 0.6rem;
  }

  .det-h1 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    /* Hero h1 lever — locked 2026-05-16. Was 0 under PR #238 amendment. */
    letter-spacing: var(--tracking-hero);
    line-height: 0.9;
    font-size: var(--text-5xl);
    color: var(--foreground);
    text-wrap: balance;
  }
  @media (min-width: 768px) {
    .det-h1 {
      font-size: var(--text-6xl);
    }
  }
  @media (min-width: 1024px) {
    .det-h1 {
      font-size: var(--text-7xl);
    }
  }
  .det-h1 b {
    color: var(--red-on-light);
    font-weight: 900;
  }

  .det-section {
    border-bottom: 1px solid var(--border);
    background: var(--background);
  }
  .det-section--dim {
    background: var(--surface-dim);
  }

  .det-opener {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding-top: 1.25rem;
    margin-bottom: 2.25rem;
    border-top: 4px solid var(--red);
  }
  .det-opener__num {
    font-family: var(--font-body);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red-on-light);
    font-weight: 600;
  }
  .det-opener__label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .det-opener__label b {
    color: var(--foreground);
    font-weight: 600;
  }

  .det-h2 {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 0.95;
    font-size: var(--text-4xl);
    color: var(--foreground);
    margin-bottom: 1.5rem;
    text-wrap: balance;
  }
  @media (min-width: 1024px) {
    .det-h2 {
      font-size: var(--text-5xl);
    }
  }

  .det-lead {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.625;
    color: var(--foreground);
    max-width: 62ch;
    margin-bottom: 2.5rem;
    text-wrap: pretty;
    /* Mirror the web-lab hero callout treatment — 1px structural separator
       on the leading edge. Same brutalist 1px-as-structure vocabulary used
       across the apex heroes. Phase 3 follow-up; see plan docs. */
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 1px solid var(--border);
  }

  .det-lead--tight {
    margin-top: calc(var(--space-4) * -1);
  }

  .det-network-card {
    max-width: 540px;
  }

  .det-faq {
    max-width: 78ch;
    margin-top: var(--space-8);
  }

  .det-scenario {
    border: 1px solid var(--border);
    background: var(--background);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    transition:
      box-shadow var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }
  .det-scenario:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--border);
  }
  .det-scenario__role {
    font-family: var(--font-body);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
    margin-bottom: 0.85rem;
  }
  .det-scenario__role b {
    color: var(--red-on-light);
    font-weight: 600;
  }
  .det-scenario__role span {
    color: var(--foreground);
    font-weight: 600;
  }
  .det-scenario__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--foreground);
    margin-bottom: 0.85rem;
    letter-spacing: 0;
    text-wrap: balance;
  }
  .det-scenario__body {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--foreground);
    max-width: 64ch;
    margin-bottom: 1rem;
    text-wrap: pretty;
  }
  .det-scenario__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dashed var(--border);
    padding-top: 0.85rem;
  }
  .det-scenario__steps li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--foreground);
  }
  .det-scenario__step-icon {
    display: inline-flex;
    width: 0.75rem;
    height: 0.75rem;
    color: var(--red-on-light);
    flex: 0 0 auto;
    transform: translateY(0.15em);
  }
  .det-scenario__step-icon svg {
    width: 100%;
    height: 100%;
  }
  .det-scenario__steps li::before {
    content: none;
    color: var(--red-on-light);
  }

  .det-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 1.1rem 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--foreground);
  }
  .det-faq summary::-webkit-details-marker {
    display: none;
  }
  .det-faq summary .plus {
    font-family: var(--font-body);
    font-size: 1.25rem;
    color: var(--red-on-light);
    transition: transform 160ms ease;
    flex-shrink: 0;
  }
  .det-faq details[open] summary .plus {
    transform: rotate(45deg);
  }
  .det-faq details {
    border-bottom: 1px solid var(--border);
  }
  .det-faq p {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.625;
    color: var(--text-m);
    padding: 0 3rem 1.25rem 0;
    margin: 0;
  }
  .det-faq code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 1px 5px;
    background: var(--surface-dim);
    color: var(--red-on-light);
    border-radius: 2px;
  }

  /* -- Headline + Title (DESIGN.md §3 type contract) ----------------------- */
  .headline {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
  }
  .title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
  }
}