/* Hallmark · macrostructure: Tacet Proto Map/Diagram + BYOA Narrative Workflow + Headless Long Document + Discovery Workbench + Enterprise Map/Diagram + Managed Narrative Workflow + Version Playground + Contact Split Studio + Help Index-First + Ownership Conversational FAQ + Pricing Narrative Workflow/two-act ledger · pre-emit critique: P5 H5 E5 S5 R5 V5 · tone: technical-austere + procedural-editorial · anchor hue: Tacet orange · nav/footer: existing system chrome · enrichment: retained Tacet shader only · contrast: pass (40–41) · slop: pass (1–58) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (34, 49–57) · icons: pass (30) */
/* ============================================================================
   COMPONENTS — ERP.AI brutalist design language
   Sharp corners, hard shadows, crisp labels, 1px borders.
   ============================================================================ */

@layer components {
  /* -- Proto apex navigation -------------------------------------
     Markup lives in @lab/chrome's nav-apex-01 variant; styles stay local
     because this visual treatment is specific to the apex site. */
  .proto-nav {
    --tacet-nav-bg: url('../images/proto/gradient-navbar-bg.png');
    --tacet-nav-ink: var(--foreground);
    --tacet-nav-muted: var(--text-m);
    --tacet-nav-width: min(calc((100vw - 2rem) * 0.9), 25rem);
    --tacet-nav-width-scrolled: min(calc((100vw - 2rem) * 0.88), 25rem);
    --tacet-nav-pill-bg: rgb(40 35 32 / 0.88);
    --tacet-nav-pill-ink: rgb(255 252 246);
    --tacet-nav-panel: color-mix(in oklch, var(--background), transparent 72%);
    --tacet-nav-panel-rest: color-mix(in oklch, var(--background), transparent 80%);
    --tacet-nav-panel-scrolled: color-mix(in oklch, var(--background), transparent 40%);
    --tacet-nav-border: color-mix(in oklch, white, transparent 42%);
    --tacet-nav-border-rest: color-mix(in oklch, white, transparent 34%);
    --tacet-nav-border-scrolled: color-mix(in oklch, var(--foreground), transparent 80%);
    --tacet-nav-shadow-scrolled:
      0 8px 20px -5px rgb(0 0 0 / 0.1), 0 4px 10px -5px rgb(0 0 0 / 0.08);
    --tacet-nav-inset-top: var(--space-2);
    --tacet-nav-notice-content-block-size: 2.125rem;
    --tacet-nav-notice-block-size: calc(
      var(--tacet-nav-notice-content-block-size) + var(--border-width-sm) + var(--border-width-sm)
    );
    position: fixed;
    inset: 0 0 auto;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: var(--tacet-nav-inset-top) 1rem 0;
    pointer-events: none;
  }

  .proto-nav__wash {
    position: absolute;
    inset: 0 0 auto;
    height: 38rem;
    z-index: -1;
    pointer-events: none;
    background-image: var(--tacet-nav-bg);
    background-position: top center;
    background-size: cover;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  .proto-nav[data-scrolled='true'] .proto-nav__wash {
    opacity: 0;
  }

  .proto-nav__notice {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    display: flex;
    max-width: min(90vw, 42rem);
    min-height: var(--tacet-nav-notice-block-size);
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem 0.5rem 0 0;
    border: 1px solid rgb(255 255 255 / 0.16);
    background: var(--tacet-nav-pill-bg);
    color: var(--tacet-nav-pill-ink);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1;
    transition:
      background var(--duration-normal) var(--ease-standard),
      border-color var(--duration-normal) var(--ease-standard),
      border-radius var(--duration-normal) var(--ease-standard),
      transform var(--duration-normal) var(--ease-standard);
    backdrop-filter: blur(16px) saturate(150%);
  }

  .proto-nav__audience-slot {
    width: min(90vw, 42rem);
    min-height: var(--tacet-nav-notice-block-size);
    flex: 0 0 auto;
    pointer-events: none;
  }

  .proto-nav[data-scrolled='true'] .proto-nav__notice {
    border-bottom-color: transparent;
    transform: translateY(0);
  }

  .proto-nav__notice-inner {
    display: inline-flex;
    min-height: var(--tacet-nav-notice-content-block-size);
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.95rem;
    color: inherit;
  }

  .proto-nav__notice-link {
    display: inline-flex;
    min-height: var(--tacet-nav-notice-content-block-size);
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
  }

  .proto-nav__notice-link:hover,
  .proto-nav__notice-link:focus-visible {
    color: rgb(255 252 246);
  }

  .proto-nav__notice-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .proto-nav__notice-group--agent {
    color: var(--ylw);
  }

  .proto-nav__notice-label {
    font-weight: 700;
    white-space: nowrap;
  }

  .proto-nav__notice-chip {
    display: inline-flex;
    min-height: auto;
    align-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgb(236 229 218 / 0.82);
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1;
    padding: 0;
    white-space: nowrap;
    transition:
      transform var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

  .proto-nav__notice-link:hover .proto-nav__notice-chip,
  .proto-nav__notice-link:focus-visible .proto-nav__notice-chip {
    color: rgb(255 252 246);
  }

  .proto-nav__notice-link:focus-visible,
  .proto-nav__link:focus-visible,
  .proto-nav__action:focus-visible,
  .proto-nav__search-button:focus-visible,
  .proto-nav__search-submit:focus-visible,
  .proto-nav__search-close:focus-visible,
  .proto-nav__menu-button:focus-visible,
  .proto-mobile a:focus-visible,
  .proto-mobile button:focus-visible,
  .proto-search a:focus-visible,
  .proto-search button:focus-visible,
  .proto-search input:focus-visible {
    outline: var(--outline-width) solid var(--ring);
    outline-offset: var(--outline-offset);
  }

  .proto-nav__notice-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .proto-nav__notice-icon--click {
    transform: scaleX(-1);
  }

  .proto-nav__notice-link:hover .proto-nav__notice-icon--click,
  .proto-nav__notice-link:focus-visible .proto-nav__notice-icon--click {
    transform: translateX(0.125rem) scaleX(-1);
  }

  .proto-nav__bar {
    position: relative;
    z-index: 3;
    pointer-events: auto;
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
    width: var(--tacet-nav-width);
    min-height: 4rem;
    align-items: center;
    gap: 0.75rem;
    overflow: visible;
    border: 1px solid var(--tacet-nav-border-rest);
    border-radius: 0.625rem;
    background: var(--tacet-nav-panel-rest);
    padding: 0.625rem 0.75rem;
    color: var(--tacet-nav-ink);
    box-shadow: none;
    backdrop-filter: none;
    transition:
      width 0.5s var(--ease-standard),
      background 0.5s var(--ease-standard),
      border-color 0.5s var(--ease-standard),
      box-shadow 0.5s var(--ease-standard),
      backdrop-filter 0.5s var(--ease-standard);
  }

  :is(.proto-nav[data-scrolled='true'], .home-nav-shell) .proto-nav__bar {
    border-color: var(--tacet-nav-border-scrolled);
    background: var(--tacet-nav-panel-scrolled);
    box-shadow: var(--tacet-nav-shadow-scrolled);
    backdrop-filter: blur(16px) grayscale(1%) saturate(180%);
  }

  .proto-nav[data-scrolled='true'] .proto-nav__bar {
    width: var(--tacet-nav-width-scrolled);
  }

  .proto-nav__bar-wash {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    background-image: var(--tacet-nav-bg);
    background-position: top center;
    background-size: cover;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  :is(.proto-nav[data-scrolled='true'], .home-nav-shell) .proto-nav__bar-wash {
    opacity: 0.58;
  }

  .proto-nav__brand {
    display: inline-flex;
    width: max-content;
    align-items: center;
    color: var(--tacet-nav-ink);
    text-decoration: none;
  }

  .proto-nav__brand img,
  .proto-nav__brand-mark {
    display: block;
    width: 6.875rem;
    height: auto;
  }

  .proto-nav__desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
  }

  .proto-nav__item {
    position: relative;
  }

  .proto-nav__item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -0.75rem;
    right: -0.75rem;
    height: 1rem;
    display: none;
  }

  .proto-nav__item[data-open='true']::after {
    display: block;
  }

  .proto-nav__link {
    position: relative;
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    gap: 0.25rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--tacet-nav-ink);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1;
    padding: 0 0.75rem;
    text-decoration: none;
    transition:
      background var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

  .proto-nav__link:hover,
  .proto-nav__link:focus-visible,
  .proto-nav__item[data-open='true'] .proto-nav__trigger {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
  }

  .proto-nav__link--current {
    color: var(--tacet-nav-ink);
    font-weight: 700;
  }

  .proto-nav__link--current::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: calc(-0.75rem - 1px);
    left: 0;
    height: 3px;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    background: var(--org-on-light);
    opacity: 1;
  }

  .proto-nav__caret {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform var(--duration-menu-content) var(--ease-menu);
  }

  .proto-nav__item[data-open='true'] .proto-nav__caret {
    transform: rotate(180deg);
  }

  .proto-nav__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) 17.25rem;
    gap: 0.75rem;
    min-width: 40rem;
    max-width: calc(100vw - 2rem);
    padding: 0.875rem;
    border: 1px solid var(--tacet-nav-border);
    border-radius: 0.875rem;
    background: color-mix(in oklch, var(--background), transparent 3%);
    box-shadow: 0 18px 44px -24px rgb(0 0 0 / 0.4);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, -0.5rem, 0) scale(0.96);
    transform-origin: center top;
    filter: blur(8px);
    visibility: hidden;
    transition:
      opacity var(--duration-menu) var(--ease-menu),
      transform var(--duration-menu) var(--ease-menu),
      filter var(--duration-menu) var(--ease-menu),
      visibility 0s linear var(--duration-menu);
  }

  .proto-nav__item[data-open='true'] .proto-nav__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0) scale(1);
    filter: blur(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .proto-nav__menu-list,
  .proto-nav__menu-preview {
    opacity: 0;
    transform: translateY(0.25rem) scale(0.99);
    transition:
      opacity var(--duration-menu-content) var(--ease-menu),
      transform var(--duration-menu-content) var(--ease-menu);
  }

  .proto-nav__item[data-open='true'] :is(.proto-nav__menu-list, .proto-nav__menu-preview) {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: var(--delay-menu-content);
  }

  .proto-nav__menu-list {
    display: grid;
    gap: 0.375rem;
  }

  .proto-nav__menu-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    gap: 0.75rem;
    align-items: center;
    border-radius: 0.625rem;
    min-height: 4rem;
    padding: 0.75rem 0.875rem;
    color: var(--tacet-nav-ink);
    text-decoration: none;
    transition:
      background 220ms var(--ease-standard),
      color 220ms var(--ease-standard),
      transform 220ms var(--ease-standard);
  }

  .proto-nav__menu-link:hover,
  .proto-nav__menu-link:focus-visible,
  .proto-nav__menu-link[data-active='true'] {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
    transform: translateX(0.125rem);
  }

  .proto-nav__menu-copy {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
  }

  .proto-nav__menu-title {
    display: block;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.2;
  }

  .proto-nav__menu-desc {
    display: block;
    min-width: 0;
    color: var(--tacet-nav-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .proto-nav__menu-arrow {
    justify-self: end;
    width: 1rem;
    height: 1rem;
    opacity: 0;
    transform: translateX(-0.5rem);
    transition:
      opacity 220ms var(--ease-standard),
      transform 220ms var(--ease-standard);
  }

  .proto-nav__menu-link:hover .proto-nav__menu-arrow,
  .proto-nav__menu-link:focus-visible .proto-nav__menu-arrow,
  .proto-nav__menu-link[data-active='true'] .proto-nav__menu-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  .proto-nav__menu-preview {
    position: relative;
    display: block;
    min-height: 11rem;
    border-radius: 0.625rem;
    overflow: hidden;
    background: linear-gradient(to top, rgb(0 0 0 / 0.2), transparent 72%), var(--tacet-nav-bg);
    background-size: cover;
    background-position: center;
    color: var(--cream);
    font-size: 0.875rem;
    font-weight: 700;
    isolation: isolate;
  }

  .proto-nav__menu-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
    border-radius: inherit;
  }

  .proto-nav__menu-preview-placeholder,
  .proto-nav__menu-preview-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: end;
    padding: 1rem;
  }

  .proto-nav__menu-preview-placeholder {
    z-index: 1;
    background:
      linear-gradient(to top, rgb(0 0 0 / 0.3), transparent 66%),
      radial-gradient(circle at 22% 18%, rgb(135 112 255 / 0.48), transparent 34%),
      radial-gradient(circle at 84% 14%, rgb(255 104 142 / 0.4), transparent 32%),
      linear-gradient(135deg, rgb(245 244 238), rgb(184 181 171));
    opacity: 1;
    transition:
      opacity 240ms var(--ease-standard),
      transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .proto-nav__menu-preview-layer {
    z-index: 2;
    opacity: 0;
    transform: translateY(1rem) scale(0.985);
    transition:
      opacity 260ms var(--ease-standard),
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .proto-nav__menu-preview-layer span,
  .proto-nav__menu-preview-placeholder span {
    position: relative;
    z-index: 3;
  }

  .proto-nav__menu-preview-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(to top, rgb(0 0 0 / 0.34), transparent 68%),
      radial-gradient(circle at 22% 20%, var(--preview-a), transparent 35%),
      radial-gradient(circle at 82% 18%, var(--preview-b), transparent 38%),
      linear-gradient(140deg, var(--preview-c), var(--preview-d));
    transform: scale(1.035);
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .proto-nav__menu-preview-layer[data-active='true'] {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .proto-nav__menu-preview-layer[data-active='true']::before {
    transform: scale(1);
  }

  .proto-nav__menu-preview:has(.proto-nav__menu-preview-layer[data-active='true'])
    .proto-nav__menu-preview-placeholder {
    opacity: 0;
    transform: translateY(-0.5rem) scale(1.01);
  }

  .proto-nav__menu-preview-layer--0 {
    --preview-a: rgb(115 92 255 / 0.72);
    --preview-b: rgb(255 100 128 / 0.66);
    --preview-c: rgb(244 239 229);
    --preview-d: rgb(162 158 148);
  }

  .proto-nav__menu-preview-layer--1 {
    --preview-a: rgb(255 101 36 / 0.68);
    --preview-b: rgb(255 208 88 / 0.62);
    --preview-c: rgb(255 244 218);
    --preview-d: rgb(167 132 102);
  }

  .proto-nav__menu-preview-layer--2 {
    --preview-a: rgb(76 168 255 / 0.68);
    --preview-b: rgb(124 96 255 / 0.62);
    --preview-c: rgb(231 241 252);
    --preview-d: rgb(126 136 159);
  }

  .proto-nav__menu-preview-layer--3 {
    --preview-a: rgb(53 208 143 / 0.66);
    --preview-b: rgb(255 144 96 / 0.58);
    --preview-c: rgb(238 249 236);
    --preview-d: rgb(122 151 130);
  }

  .proto-nav__menu-preview-layer--4 {
    --preview-a: rgb(255 85 162 / 0.64);
    --preview-b: rgb(103 87 255 / 0.62);
    --preview-c: rgb(249 235 244);
    --preview-d: rgb(149 126 154);
  }

  .proto-nav__actions {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
  }

  .proto-nav__search {
    position: relative;
    z-index: 2;
    display: none;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    margin-inline: 1rem 0.5rem;
  }

  .proto-nav__search-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: var(--text-m);
  }

  .proto-nav__search-input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--tacet-nav-ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 650;
    outline: 0;
  }

  .proto-nav__search-input::placeholder {
    color: color-mix(in oklch, var(--tacet-nav-ink), transparent 48%);
  }

  .proto-nav__search-button,
  .proto-nav__search-submit,
  .proto-nav__search-close {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--tacet-nav-ink);
    cursor: pointer;
  }

  .proto-nav__search-control {
    position: relative;
    display: inline-flex;
  }

  .proto-nav__search-tooltip {
    position: absolute;
    z-index: 12;
    top: calc(100% + 0.5rem);
    right: 0;
    width: max-content;
    max-width: min(15rem, calc(100vw - 2rem));
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-md);
    background: var(--surface-invert);
    color: var(--background);
    box-shadow: var(--shadow-md);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -0.25rem, 0);
    transition:
      opacity var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .proto-nav__search-control:not([data-tooltip-dismissed='true'])
    .proto-nav__search-button:hover
    + .proto-nav__search-tooltip,
  .proto-nav__search-control:not([data-tooltip-dismissed='true'])
    .proto-nav__search-button:focus-visible
    + .proto-nav__search-tooltip {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .proto-nav__search-button:hover,
  .proto-nav__search-submit:hover,
  .proto-nav__search-close:hover {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
  }

  .proto-nav__search-button-icon,
  .proto-nav__search-submit-icon,
  .proto-nav__search-close-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .proto-nav__bar[data-search-open='true'] {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .proto-nav__bar[data-search-open='true'] .proto-nav__desktop,
  .proto-nav__bar[data-search-open='true'] .proto-nav__action,
  .proto-nav__bar[data-search-open='true'] .proto-nav__search-control {
    display: none;
  }

  .proto-nav__bar[data-search-open='true'] .proto-nav__search {
    display: flex;
  }

  .proto-nav__search-suggestions {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    right: 0;
    overflow: hidden;
    border: 1px solid var(--tacet-nav-border);
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--background), transparent 2%);
    box-shadow: 0 1.5rem 4rem rgb(20 16 12 / 18%);
  }

  .catalog-search-suggestion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--tacet-nav-border);
    color: var(--foreground);
    text-decoration: none;
  }

  .catalog-search-suggestion:last-child {
    border-bottom: 0;
  }

  .catalog-search-suggestion:hover,
  .catalog-search-suggestion:focus-visible,
  .catalog-search-suggestion[data-active='true'] {
    background: color-mix(in oklch, var(--foreground), transparent 94%);
  }

  .catalog-search-suggestion[data-active='true'] {
    box-shadow: inset 3px 0 0 var(--org-on-light);
  }

  .catalog-search-suggestion__title {
    overflow: hidden;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-search-suggestion__desc {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .catalog-search-suggestion__category {
    align-self: start;
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  .catalog-search-suggestion--submit,
  .catalog-search-suggestion--empty {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-search-suggestion--submit {
    background: var(--foreground);
    color: var(--background);
  }

  .catalog-search-suggestion--submit:hover,
  .catalog-search-suggestion--submit:focus-visible,
  .catalog-search-suggestion--submit[data-active='true'] {
    background: var(--foreground);
    color: var(--background);
    box-shadow:
      inset 3px 0 0 var(--org-on-light),
      inset 0 0 0 1px color-mix(in oklch, var(--background), transparent 78%);
  }

  .catalog-search-suggestion--submit .catalog-search-suggestion__desc {
    color: color-mix(in oklch, var(--background), transparent 28%);
  }

  .catalog-search-suggestion--submit:hover .catalog-search-suggestion__desc,
  .catalog-search-suggestion--submit:focus-visible .catalog-search-suggestion__desc,
  .catalog-search-suggestion--submit[data-active='true'] .catalog-search-suggestion__desc {
    color: color-mix(in oklch, var(--background), transparent 18%);
  }

  .catalog-search-suggestion--empty {
    cursor: default;
  }

  .catalog-search-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    border-top: 1px solid var(--tacet-nav-border);
    background: color-mix(in oklch, var(--background), var(--foreground) 2.5%);
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 650;
    padding: 0.7rem 1rem;
  }

  .catalog-search-shortcuts__item {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0;
  }

  .catalog-search-shortcuts__item > span {
    padding-inline: 0.08rem 0.3rem;
    line-height: 1;
    white-space: nowrap;
  }

  .catalog-search-shortcuts kbd {
    display: inline-flex;
    min-width: 1.48rem;
    height: 1.4rem;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 82%);
    border-radius: 0.38rem;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1;
    padding-inline: 0.38rem;
    text-transform: none;
  }

  .proto-nav__action,
  .proto-mobile__cta {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 0 0.875rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    transition:
      background var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .proto-nav__action--ghost,
  .proto-mobile__cta--ghost {
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 80%);
    color: var(--tacet-nav-ink);
  }

  .proto-nav__action--ghost:hover,
  .proto-nav__action--ghost:focus-visible,
  .proto-mobile__cta--ghost:hover,
  .proto-mobile__cta--ghost:focus-visible {
    border-color: color-mix(in oklch, var(--foreground), transparent 55%);
    background: color-mix(in oklch, var(--foreground), transparent 94%);
  }

  .proto-nav__action--solid,
  .proto-mobile__cta--solid {
    border: 1px solid var(--foreground);
    background: var(--foreground);
    color: var(--background);
    box-shadow: 0 0 0 2px var(--org-on-light);
  }

  .proto-nav__action--solid:hover,
  .proto-nav__action--solid:focus-visible,
  .proto-mobile__cta--solid:hover,
  .proto-mobile__cta--solid:focus-visible {
    border-color: var(--org-on-light);
    background: var(--org-on-light);
    color: var(--ink-deep);
    transform: translateY(-1px);
  }

  .proto-nav__menu-button {
    display: none;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--tacet-nav-ink);
    cursor: pointer;
  }

  .proto-nav__menu-button:hover,
  .proto-nav__menu-button:focus-visible {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
  }

  .proto-nav__menu-icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .proto-search {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: block;
    overflow: hidden;
    background: color-mix(in oklch, var(--background), transparent 0%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity var(--duration-normal) var(--ease-standard),
      visibility 0s linear var(--duration-normal);
  }

  .proto-search[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  .proto-search__shell {
    display: flex;
    width: min(100%, 48rem);
    height: 100%;
    flex-direction: column;
    margin-inline: auto;
    padding: max(1rem, env(safe-area-inset-top)) 1rem 1.25rem;
  }

  .proto-search__form {
    display: flex;
    min-height: 4rem;
    align-items: center;
    gap: 0.625rem;
    border-bottom: 1px solid var(--border);
  }

  .proto-search__icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    color: var(--text-m);
  }

  .proto-search__input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 8vw, 2.5rem);
    font-weight: 900;
    letter-spacing: 0;
    outline: 0;
  }

  .proto-search__input::placeholder {
    color: color-mix(in oklch, var(--foreground), transparent 62%);
  }

  .proto-search__submit,
  .proto-search__close {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--card);
    color: var(--foreground);
    cursor: pointer;
  }

  .proto-search__submit-icon,
  .proto-search__close-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .proto-search__suggestions {
    flex: 1;
    overflow-y: auto;
    padding-block: 1rem;
  }

  .proto-search__suggestions .catalog-search-suggestion {
    grid-template-columns: minmax(0, 1fr);
    padding: 1rem 0;
    border-bottom-color: var(--border);
  }

  .proto-search__suggestions .catalog-search-suggestion__title {
    font-size: clamp(1.05rem, 5vw, 1.45rem);
  }

  .proto-nav-spacer {
    height: var(--chrome-height);
    min-height: var(--chrome-height);
  }

  .proto-mobile {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
    overflow: hidden;
    background: rgb(0 0 0 / 0);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      background var(--duration-menu) var(--ease-menu),
      opacity var(--duration-menu) var(--ease-menu),
      visibility 0s linear var(--duration-menu);
  }

  .proto-mobile[data-open='true'] {
    background: rgb(0 0 0 / 0.42);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  .proto-mobile__shell {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin-left: auto;
    display: flex;
    width: min(100%, 32rem);
    height: 100%;
    flex-direction: column;
    background:
      linear-gradient(
        to bottom,
        color-mix(in oklch, var(--background), transparent 3%),
        color-mix(in oklch, var(--background), transparent 0%) 14rem
      ),
      var(--background);
    color: var(--foreground);
    box-shadow: -1.5rem 0 3rem rgb(0 0 0 / 0.18);
    opacity: 0;
    transform: translate3d(2rem, 0, 0) scale(0.985);
    transform-origin: right top;
    filter: blur(8px);
    transition:
      opacity var(--duration-menu) var(--ease-menu),
      transform var(--duration-menu) var(--ease-menu),
      filter var(--duration-menu) var(--ease-menu);
  }

  .proto-mobile[data-open='true'] .proto-mobile__shell {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }

  .proto-mobile__header,
  .proto-mobile__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem !important;
    border-bottom: 1px solid var(--tacet-nav-border);
  }

  .proto-mobile__header,
  .proto-mobile__body,
  .proto-mobile__footer {
    opacity: 0;
    transform: translateX(0.25rem);
    transition:
      opacity var(--duration-menu-content) var(--ease-menu),
      transform var(--duration-menu-content) var(--ease-menu);
  }

  .proto-mobile[data-open='true']
    :is(.proto-mobile__header, .proto-mobile__body, .proto-mobile__footer) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: var(--delay-menu-content);
  }

  .proto-mobile__footer {
    border-top: 1px solid var(--tacet-nav-border);
    border-bottom: 0;
  }

  .proto-mobile__brand img,
  .proto-mobile__brand-mark {
    width: 6.875rem;
    height: auto;
  }

  .proto-mobile__close {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--foreground), transparent 92%);
    color: var(--foreground);
    cursor: pointer;
  }

  .proto-mobile__close-icon,
  .proto-mobile__caret {
    width: 1.125rem;
    height: 1.125rem;
  }

  .proto-mobile__caret {
    transition: transform var(--duration-menu-content) var(--ease-menu);
  }

  .proto-mobile__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
  }

  .proto-mobile__link {
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-bottom: 1px solid var(--tacet-nav-border);
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.875rem 0.5rem;
    text-align: left;
    text-decoration: none;
  }

  .proto-mobile__link:hover,
  .proto-mobile__link:focus-visible,
  .proto-mobile__link--current {
    color: var(--org-on-light);
  }

  .proto-mobile__link[aria-expanded='true'] .proto-mobile__caret {
    transform: rotate(180deg);
  }

  .proto-mobile__children {
    display: grid;
    grid-template-rows: 0fr;
    border-bottom: 1px solid transparent;
    opacity: 0;
    transition:
      grid-template-rows var(--duration-menu) var(--ease-menu),
      border-color var(--duration-menu-content) var(--ease-menu),
      opacity var(--duration-menu-content) var(--ease-menu);
  }

  .proto-mobile__children[data-open='true'] {
    grid-template-rows: 1fr;
    border-bottom-color: var(--tacet-nav-border);
    opacity: 1;
  }

  .proto-mobile__children-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0.25rem 0 0.75rem 1rem;
  }

  .proto-mobile__child {
    display: block;
    border-radius: 0.5rem;
    color: var(--text-m);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.625rem 0.75rem;
    text-decoration: none;
  }

  .proto-mobile__child:hover,
  .proto-mobile__child:focus-visible {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
    color: var(--foreground);
  }

  @media (prefers-reduced-motion: reduce) {
    .proto-nav__caret,
    .proto-nav__search-tooltip,
    .proto-nav__menu,
    .proto-nav__menu-list,
    .proto-nav__menu-preview,
    .proto-mobile,
    .proto-mobile__shell,
    .proto-mobile__header,
    .proto-mobile__body,
    .proto-mobile__footer,
    .proto-mobile__caret,
    .proto-mobile__children,
    .proto-mobile__children-inner {
      transition-duration: 0s;
      transition-delay: 0s;
      filter: none;
    }

    .proto-nav__menu {
      transform: translateX(-50%);
    }

    .proto-nav__menu-list,
    .proto-nav__menu-preview,
    .proto-mobile__shell {
      transform: none;
    }
  }

  @media (max-width: 63.99rem) {
    .proto-nav__bar {
      grid-template-columns: 1fr auto;
      min-height: 3.75rem;
    }

    .proto-nav__notice,
    .proto-nav__audience-slot {
      width: min(calc(var(--tacet-nav-width) - 0.75rem), calc(100vw - 2rem));
      max-width: min(calc(var(--tacet-nav-width) - 0.75rem), calc(100vw - 2rem));
    }

    .proto-nav__notice {
      font-size: 0.75rem;
    }

    .proto-nav__notice-inner {
      width: 100%;
      justify-content: center;
      gap: 0.375rem;
      padding-inline: 0.625rem;
    }

    .proto-nav__notice-link {
      justify-content: center;
    }

    .proto-nav__notice-group:not(.proto-nav__notice-group--agent),
    .proto-nav__notice-sep {
      display: none;
    }

    .proto-nav__desktop,
    .proto-nav__action {
      display: none;
    }

    .proto-nav__search-button {
      display: inline-flex;
    }

    .proto-nav__bar[data-search-open='true'] .proto-nav__search {
      display: none;
    }

    .proto-nav__menu-button {
      display: inline-flex;
    }
  }

  @media (min-width: 64rem) {
    .proto-nav {
      --tacet-nav-width: min(calc((100vw - 2rem) * 0.985), 70rem);
      --tacet-nav-width-scrolled: min(calc((100vw - 2rem) * 0.88), 70rem);
    }
  }

  @media (max-width: 39.99rem) {
    .proto-nav {
      --tacet-nav-width: min(calc((100vw - 1.5rem) * 0.9), 25rem);
      --tacet-nav-width-scrolled: min(calc((100vw - 1.5rem) * 0.88), 25rem);

      padding-inline: 0.75rem;
    }

    .proto-mobile__footer {
      flex-wrap: wrap;
    }

    .proto-mobile__cta {
      flex: 1 1 10rem;
    }
  }

  body:has(.proto-saas) {
    --tacet-nav-width: min(calc((100vw - 2rem) * 0.9), 25rem);
    --tacet-nav-width-scrolled: min(calc((100vw - 2rem) * 0.88), 25rem);

    background:
      linear-gradient(
        to bottom,
        rgb(255 255 255 / 0.38),
        rgb(255 255 255 / 0.1) 18rem,
        var(--background) 46rem
      ),
      url('../images/proto/gradient-navbar-bg.png') top center / 100% 38rem no-repeat,
      var(--background);
    overflow-x: clip;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }

  body:has(.hero-catalog),
  body:has(.main--catalog-results) {
    --tacet-nav-width: min(calc((100vw - 2rem) * 0.9), 25rem);
    --tacet-nav-width-scrolled: min(calc((100vw - 2rem) * 0.88), 25rem);

    background:
      linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 34rem),
      url('../images/proto/gradient-navbar-bg.png') top center / 100% 58rem no-repeat,
      var(--background);
    overflow-x: clip;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }

  @media (min-width: 64rem) {
    body:has(.proto-saas),
    body:has(.hero-catalog),
    body:has(.main--catalog-results) {
      --tacet-nav-width: min(calc((100vw - 2rem) * 0.985), 70rem);
      --tacet-nav-width-scrolled: min(calc((100vw - 2rem) * 0.88), 70rem);
    }
  }

  @media (max-width: 39.99rem) {
    body:has(.proto-saas),
    body:has(.hero-catalog),
    body:has(.main--catalog-results) {
      --tacet-nav-width: min(calc((100vw - 1.5rem) * 0.9), 25rem);
      --tacet-nav-width-scrolled: min(calc((100vw - 1.5rem) * 0.88), 25rem);
    }
  }

  body:has(.proto-saas) .proto-nav__wash {
    opacity: 0;
  }

  body:has(.proto-saas) .proto-nav[data-scrolled='true'] .proto-nav__wash {
    opacity: 0;
  }

  html.dark .proto-nav {
    --tacet-nav-pill-bg: rgb(0 0 0 / 0.42);
    --tacet-nav-pill-ink: rgb(255 252 246);
    --tacet-nav-panel: var(--tacet-nav-panel-rest);
    --tacet-nav-panel-rest: color-mix(in oklch, var(--beige-900), transparent 0%);
    --tacet-nav-panel-scrolled: color-mix(in oklch, var(--beige-950), transparent 60%);
    --tacet-nav-border: var(--tacet-nav-border-rest);
    --tacet-nav-border-rest: color-mix(in oklch, black, transparent 0%);
    --tacet-nav-border-scrolled: color-mix(in oklch, white, transparent 60%);
    --tacet-nav-ink: var(--beige-100);
    --tacet-nav-muted: color-mix(in oklch, var(--beige-300), transparent 22%);
    --tacet-nav-shadow-scrolled:
      0 8px 20px -5px rgb(0 0 0 / 0.1), 0 4px 10px -5px rgb(0 0 0 / 0.06);
  }

  html.dark body:has(.proto-saas) .proto-nav[data-scrolled='false'] .proto-nav__bar {
    border-color: var(--tacet-nav-border-rest);
    border-radius: 0.625rem;
    background: var(--tacet-nav-panel-rest);
    box-shadow: none;
    backdrop-filter: none;
  }

  html.dark .proto-nav__brand img,
  html.dark .proto-mobile__brand img {
    filter: invert(1) brightness(1.08);
  }

  html.dark body:has(.proto-saas) {
    background:
      linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.12),
        rgb(0 0 0 / 0.06) 18rem,
        var(--background) 46rem
      ),
      url('../images/proto/gradient-navbar-bg.png') top center / 100% 38rem no-repeat,
      var(--background);
  }

  /* -- 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 {
    --btn-face: var(--beige-50);
    --btn-fill-hover: var(--beige-100);
    --btn-text: var(--ink-deep);
    --btn-border: var(--beige-300);
    --btn-text-hover: var(--ink-deep);
    --btn-border-hover: var(--ink-deep);
    --btn-rail: var(--tacet-orange-on-light);
    --btn-rail-hover: var(--tacet-orange-on-light);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-xs);
    line-height: 1;
    padding: var(--space-3) var(--space-8);
    border: 1px solid var(--btn-border);
    border-radius: 0;
    background: var(--btn-face);
    box-shadow: none;
    color: var(--btn-text);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    text-decoration: none;
    transition:
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--btn-fill-hover);
    pointer-events: none;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-fast) var(--ease-decelerate);
  }

  .btn::after {
    content: '';
    display: block;
    position: absolute;
    right: -1px;
    bottom: -1px;
    left: -1px;
    height: 2px;
    background: var(--btn-rail);
    pointer-events: none;
    z-index: 1;
    transform: scaleX(1);
    transform-origin: left;
    transition:
      background var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .btn:hover {
    border-color: var(--btn-border-hover);
    color: var(--btn-text-hover);
  }

  .btn:hover::before {
    transform: scaleX(1);
  }

  .btn:hover::after {
    background: var(--btn-rail-hover);
    transform: scaleX(1);
  }

  .btn:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
  }

  .btn:active {
    transform: translateY(1px) scale(0.99);
    transition-duration: 70ms;
  }

  .btn--primary {
    --btn-face: var(--ink-deep);
    --btn-fill-hover: var(--tacet-orange-on-light);
    --btn-text: var(--beige-50);
    --btn-border: var(--tacet-orange-on-light);
    --btn-text-hover: var(--beige-50);
    --btn-border-hover: var(--ink-deep);
    --btn-rail: var(--tacet-orange-on-light);
    --btn-rail-hover: var(--ink-deep);
  }

  .btn--secondary {
    --btn-face: var(--background);
    --btn-fill-hover: color-mix(
      in oklch,
      var(--surface-container),
      var(--tacet-orange-on-light) 12%
    );
    --btn-text: var(--foreground);
    --btn-border: var(--foreground);
    --btn-text-hover: var(--foreground);
    --btn-border-hover: var(--tacet-orange-on-light);
    --btn-rail: var(--tacet-orange-on-light);
    --btn-rail-hover: var(--tacet-orange-on-light);
  }

  .btn--outline {
    --btn-face: var(--background);
    --btn-fill-hover: var(--surface-dim);
    --btn-text: var(--foreground);
    --btn-border: var(--border);
    --btn-text-hover: var(--foreground);
    --btn-border-hover: var(--foreground);
    --btn-rail: var(--border);
    --btn-rail-hover: var(--foreground);
  }

  .btn--ghost {
    --btn-face: transparent;
    --btn-fill-hover: transparent;
    --btn-text: var(--text-m);
    --btn-border: transparent;
    --btn-text-hover: var(--foreground);
    --btn-border-hover: transparent;
    --btn-rail: var(--tacet-orange-on-light);
    --btn-rail-hover: var(--tacet-orange-on-light);

    overflow: visible;
    padding-inline: 0.1rem;
    border: 0;
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--border);
  }

  .btn--ghost::before {
    display: none;
  }

  .btn--ghost::after {
    right: 0;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
  }

  .btn--ghost:hover::after {
    transform: scaleX(1);
  }

  .btn--tech,
  .btn--tech-primary,
  .btn--tech-secondary,
  .btn--tech-ghost {
    --btn-frame: var(--tacet-orange);
    --btn-frame-hover: var(--ink-deep);
    --btn-frame-width: 3px;
    --btn-corner-size: 0.875rem;
    overflow: visible;
    border: var(--btn-frame-width) solid var(--btn-frame);
    letter-spacing: 0.18em;
    box-shadow: none;
  }

  .btn--tech::before,
  .btn--tech-primary::before,
  .btn--tech-secondary::before,
  .btn--tech-ghost::before {
    display: none;
  }

  .btn--tech::after,
  .btn--tech-primary::after,
  .btn--tech-secondary::after,
  .btn--tech-ghost::after {
    content: '';
    display: block;
    position: absolute;
    top: calc(-1 * var(--btn-frame-width));
    right: calc(-1 * var(--btn-frame-width));
    bottom: auto;
    left: auto;
    width: var(--btn-corner-size);
    height: var(--btn-corner-size);
    background: var(--btn-frame);
    pointer-events: none;
    transform: none;
    transition: background var(--duration-fast) var(--ease-standard);
  }

  .btn--tech:hover,
  .btn--tech-primary:hover,
  .btn--tech-secondary:hover,
  .btn--tech-ghost:hover {
    background: var(--btn-face-hover);
    border-color: var(--btn-frame-hover);
    color: var(--btn-text-hover);
    box-shadow: none;
  }

  .btn--tech:hover::after,
  .btn--tech-primary:hover::after,
  .btn--tech-secondary:hover::after,
  .btn--tech-ghost:hover::after {
    background: var(--btn-frame-hover);
  }

  .btn--tech-primary {
    --btn-face: var(--ink-deep);
    --btn-text: var(--beige-50);
    --btn-face-hover: var(--tacet-orange-on-light);
    --btn-text-hover: var(--beige-50);
  }

  .btn--tech-secondary {
    --btn-face: var(--beige-50);
    --btn-text: var(--ink-deep);
    --btn-face-hover: var(--beige-200);
    --btn-text-hover: var(--tacet-orange-on-light);
  }

  .btn--tech-ghost {
    --btn-face: transparent;
    --btn-text: var(--text-m);
    --btn-frame: transparent;
    --btn-face-hover: transparent;
    --btn-text-hover: var(--foreground);
    --btn-frame-hover: transparent;
    padding-inline: 0;
    border: 0;
    background: transparent;
  }

  .btn--tech-ghost::after {
    display: none;
  }

  .btn--destructive {
    --btn-face: var(--destructive);
    --btn-fill-hover: var(--red-on-light);
    --btn-text: var(--primary-foreground);
    --btn-border: var(--foreground);
    --btn-text-hover: var(--primary-foreground);
    --btn-border-hover: var(--red);
    --btn-rail: var(--red);
    --btn-rail-hover: var(--foreground);
  }

  .btn:disabled,
  .btn[aria-disabled='true'] {
    --btn-face: var(--surface-dim);
    --btn-fill-hover: var(--surface-dim);
    --btn-text: var(--text-m);
    --btn-border: var(--border);
    --btn-border-hover: var(--border);
    --btn-rail: var(--border);
    --btn-rail-hover: var(--border);

    opacity: 0.72;
    cursor: not-allowed;
    pointer-events: none;
  }

  .btn--loading {
    cursor: progress;
    pointer-events: none;
  }
  .btn__icon,
  .btn__spinner {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }
  .btn__icon,
  .btn > svg:not(.btn__spinner) {
    transition: transform var(--duration-fast) var(--ease-standard);
  }
  .btn:hover .btn__icon,
  .btn:hover > svg:not(.btn__spinner) {
    transform: translateX(0.125rem);
  }
  .btn__spinner {
    transform-origin: center;
    animation: btn-spin var(--duration-slower) linear infinite;
  }
  @keyframes btn-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn,
    .btn::before,
    .btn::after,
    .btn__icon,
    .btn > svg {
      transition-duration: 0.01ms !important;
    }

    .btn:hover,
    .btn:active,
    .btn:hover .btn__icon,
    .btn:hover > svg {
      transform: none;
    }

    .btn__spinner {
      animation: none;
    }
  }

  .btn--xs {
    font-size: 0.625rem;
    /* Padding bumped from space-1/3 (4×12) so total height meets WCAG 2.2
       SC 2.5.8 (24×24 minimum) — 10px font + 16px y-padding ≈ 26px tall. */
    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: 0.8125rem;
    padding: var(--space-4) var(--space-8);
  }
  /* Reserved for hero primary CTA — heaviest button in the system.
     Dimensions match the home hero CTA (hero-catalog.njk's .hero-cta:
     `padding: 14px 32px; font: 14px body 600`) so the
     primary action reads identically across the home and inner-page heroes. */
  .btn--xl {
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: 800;
    padding: var(--space-3-5) var(--space-8);
    letter-spacing: 0;
  }
  .btn--ghost.btn--xl {
    padding-inline: 0.1rem;
  }
  .btn--icon {
    padding: var(--space-3);
    aspect-ratio: 1;
  }

  /* -- Hero envelope (hero-atsh.njk) ---------------------------------------
     The hero's natural height is kept close to 80% of the available viewport
     on lg+ through padding alone (see hero-atsh.njk — pt-16/pb-16 on lg).
     A hard max-height clip was tried but clipped the bottom padding, which
     made the next section visually collide with the CTA on content-heavy
     pages like /headless-saas and /enterprise. Padding is enough. */

  /* Hero CTA keeps the canonical button state engine. This scope owns only
     the larger hero envelope, not a competing visual treatment. */
  .erpai-hero .btn--xl {
    min-height: 3.25rem;
    white-space: nowrap;
  }

  .erpai-hero h1 {
    text-wrap: balance;
    /* Hero h1 lever — locked 2026-05-16, scoped here (not body/section heads).
       Token defined in styles/tailwind.input.css. See
       docs/plans/DESIGN-ELEVATE-LAB-CHROME-WEB-LAB-WEB-NEO-PLAN.md. */
    letter-spacing: 0;
  }

  .erpai-hero h1 > span {
    max-width: 100%;
  }

  .erpai-hero p {
    text-wrap: pretty;
  }

  .erpai-hero .hero-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.45rem;
    margin-top: clamp(1.9rem, 3.2vw, 2.55rem);
    color: color-mix(in oklch, var(--text-m), var(--background) 12%) !important;
    font-family: var(--font-body);
    font-size: clamp(0.86rem, 0.85vw, 0.94rem);
    font-weight: 540;
    letter-spacing: 0;
    line-height: 1.42;
    text-transform: none;
  }

  .erpai-hero .hero-checks__item {
    display: inline-flex;
    min-height: 1.5rem;
    align-items: center;
    gap: 0.55rem;
  }

  .erpai-hero .hero-check-icon {
    width: 1.05rem !important;
    height: 1.05rem !important;
    flex: 0 0 1.05rem;
    color: color-mix(in oklch, var(--hero-accent-text), var(--text-m) 38%) !important;
  }

  .erpai-hero .hero-check-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.9;
  }

  .erpai-hero__viewport--fill {
    --hero-extra-bottom: 0px;
    --hero-secondary-nav-height: var(--tacet-page-nav-height, 3.25rem);

    display: flex;
    min-height: calc(
      100vh - var(--chrome-height) - var(--hero-secondary-nav-height) - var(--hero-extra-bottom)
    );
    min-height: calc(
      100dvh - var(--chrome-height) - var(--hero-secondary-nav-height) - var(--hero-extra-bottom)
    );
    align-items: center;
  }

  .erpai-hero__viewport--fill > .grid {
    align-items: center;
  }

  /* -- Proto SaaS presentation --------------------------------------------
     /proto is a product SaaS page, so it intentionally dials back the
     site-wide brutalist/caps register without changing the shared chrome or
     other marketing pages. */
  .proto-saas {
    --tacet-page-bg: color-mix(in oklch, var(--background), var(--pur) 1.2%);
    --tacet-saas-accent: color-mix(in oklch, var(--org-on-light), var(--ink-deep) 18%);
    --tacet-saas-surface: color-mix(in oklch, var(--card), var(--background) 45%);
    --tacet-panel-bg: color-mix(in oklch, var(--background), transparent 18%);
    --tacet-panel-cell: color-mix(in oklch, var(--card), var(--background) 60%);
    --tacet-panel-border: color-mix(in oklch, var(--border), transparent 12%);
    --tacet-type-hero-track: -0.012em;
    --tacet-type-section-track: -0.008em;
    --tacet-type-card-track: -0.003em;
    --tacet-type-heading-lh: 1.08;
    --tacet-type-card-lh: 1.12;
    --tacet-section-pad-x: clamp(1.5rem, 4vw, 3rem);
    --tacet-section-pad-y: clamp(3.5rem, 6vw, 4rem);
    --tacet-section-max: 90rem;
    --tacet-page-nav-height: calc(3.25rem + 1px);
    --tacet-content-rail: min(
      calc(100% - (2 * var(--tacet-section-pad-x))),
      var(--tacet-section-max)
    );
    --tacet-visible-rail: min(
      calc(100% - (2 * var(--tacet-section-pad-x))),
      calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)))
    );
    --hero-shader-a: color-mix(in oklch, var(--hero-accent), transparent 74%);
    --hero-shader-b: color-mix(in oklch, var(--pur), transparent 87%);
    --hero-shader-c: color-mix(in oklch, var(--grn), transparent 90%);
    --hero-shader-line-a: color-mix(in oklch, var(--hero-accent), transparent 93%);
    --hero-shader-line-b: color-mix(in oklch, var(--pur), transparent 95%);
    --hero-shader-before-a: color-mix(in oklch, var(--hero-accent), transparent 80%);
    --hero-shader-before-b: color-mix(in oklch, var(--grn), transparent 91%);
    --hero-shader-before-line-a: color-mix(in oklch, var(--hero-accent), transparent 95%);
    --hero-shader-before-line-b: color-mix(in oklch, var(--pur), transparent 96%);
    --hero-shader-a-at: 78% 22%;
    --hero-shader-b-at: 52% 56%;
    --hero-shader-c-at: 92% 66%;
    --hero-shader-line-angle: 104deg;
    --hero-shader-size: 135% 125%, 130% 120%, 140% 130%, 115% 115%;
    --hero-shader-position: 72% 16%, 46% 54%, 98% 62%, 50% 38%;
    --hero-shader-before-a-at: 74% 18%;
    --hero-shader-before-b-at: 86% 58%;
    --hero-shader-before-line-angle: 128deg;
    --hero-shader-before-size: 125% 120%, 140% 125%, 115% 115%;
    --hero-shader-before-position: 68% 12%, 90% 52%, 50% 42%;
    background: transparent;
  }

  .proto-saas:is(.proto-byoa, .tacet-byoa-page) {
    --red: var(--org);
    --red-on-light: var(--tacet-saas-accent);
  }

  .proto-saas.tacet-byoa-page {
    --tacet-page-bg: color-mix(in oklch, var(--background), var(--grn) 1.4%);
    --hero-shader-a: color-mix(in oklch, var(--org), transparent 76%);
    --hero-shader-b: color-mix(in oklch, var(--grn), transparent 88%);
    --hero-shader-c: color-mix(in oklch, var(--pur), transparent 92%);
    --hero-shader-line-a: color-mix(in oklch, var(--org), transparent 94%);
    --hero-shader-line-b: color-mix(in oklch, var(--grn), transparent 94%);
    --hero-shader-before-a: color-mix(in oklch, var(--grn), transparent 84%);
    --hero-shader-before-b: color-mix(in oklch, var(--org), transparent 91%);
    --hero-shader-before-line-a: color-mix(in oklch, var(--grn), transparent 95%);
    --hero-shader-before-line-b: color-mix(in oklch, var(--pur), transparent 97%);
    --hero-shader-a-at: 80% 18%;
    --hero-shader-b-at: 62% 60%;
    --hero-shader-c-at: 94% 72%;
    --hero-shader-line-angle: 116deg;
    --hero-shader-position: 76% 12%, 54% 62%, 98% 68%, 52% 42%;
    --hero-shader-before-a-at: 78% 28%;
    --hero-shader-before-b-at: 90% 60%;
    --hero-shader-before-line-angle: 136deg;
    --hero-shader-before-position: 72% 18%, 92% 56%, 50% 46%;
  }

  .proto-saas.tacet-headless-saas-page {
    --tacet-page-bg: color-mix(in oklch, var(--background), var(--pur) 2%);
    --hero-shader-a: color-mix(in oklch, var(--pur), transparent 80%);
    --hero-shader-b: color-mix(in oklch, var(--hero-accent), transparent 89%);
    --hero-shader-c: color-mix(in oklch, var(--grn), transparent 93%);
    --hero-shader-line-a: color-mix(in oklch, var(--pur), transparent 94%);
    --hero-shader-line-b: color-mix(in oklch, var(--hero-accent), transparent 95%);
    --hero-shader-before-a: color-mix(in oklch, var(--pur), transparent 84%);
    --hero-shader-before-b: color-mix(in oklch, var(--grn), transparent 92%);
    --hero-shader-before-line-a: color-mix(in oklch, var(--pur), transparent 96%);
    --hero-shader-before-line-b: color-mix(in oklch, var(--hero-accent), transparent 97%);
    --hero-shader-a-at: 70% 18%;
    --hero-shader-b-at: 48% 58%;
    --hero-shader-c-at: 88% 72%;
    --hero-shader-line-angle: 98deg;
    --hero-shader-position: 66% 12%, 42% 60%, 94% 70%, 48% 36%;
    --hero-shader-before-a-at: 68% 16%;
    --hero-shader-before-b-at: 84% 62%;
    --hero-shader-before-line-angle: 118deg;
    --hero-shader-before-position: 62% 12%, 88% 58%, 46% 40%;
  }

  .proto-saas.tacet-startups-page {
    --tacet-page-bg: color-mix(in oklch, var(--background), var(--org) 1.6%);
    --hero-shader-a: color-mix(in oklch, var(--org), transparent 72%);
    --hero-shader-b: color-mix(in oklch, var(--grn), transparent 90%);
    --hero-shader-c: color-mix(in oklch, var(--pur), transparent 92%);
    --hero-shader-line-a: color-mix(in oklch, var(--org), transparent 92%);
    --hero-shader-line-b: color-mix(in oklch, var(--grn), transparent 95%);
    --hero-shader-before-a: color-mix(in oklch, var(--org), transparent 78%);
    --hero-shader-before-b: color-mix(in oklch, var(--grn), transparent 92%);
    --hero-shader-before-line-a: color-mix(in oklch, var(--org), transparent 94%);
    --hero-shader-before-line-b: color-mix(in oklch, var(--pur), transparent 97%);
    --hero-shader-a-at: 82% 26%;
    --hero-shader-b-at: 58% 52%;
    --hero-shader-c-at: 90% 70%;
    --hero-shader-line-angle: 108deg;
    --hero-shader-position: 78% 22%, 50% 50%, 96% 66%, 54% 40%;
    --hero-shader-before-a-at: 76% 22%;
    --hero-shader-before-b-at: 88% 54%;
    --hero-shader-before-line-angle: 132deg;
    --hero-shader-before-position: 70% 18%, 92% 52%, 52% 42%;
  }

  .proto-saas.tacet-pricing-page,
  .tacet-erpai-pricing-page {
    --tacet-page-bg: color-mix(in oklch, var(--background), var(--grn) 1.2%);
    --hero-shader-a: color-mix(in oklch, var(--grn), transparent 82%);
    --hero-shader-b: color-mix(in oklch, var(--org), transparent 84%);
    --hero-shader-c: color-mix(in oklch, var(--pur), transparent 94%);
    --hero-shader-line-a: color-mix(in oklch, var(--grn), transparent 94%);
    --hero-shader-line-b: color-mix(in oklch, var(--org), transparent 95%);
    --hero-shader-before-a: color-mix(in oklch, var(--grn), transparent 86%);
    --hero-shader-before-b: color-mix(in oklch, var(--org), transparent 90%);
    --hero-shader-before-line-a: color-mix(in oklch, var(--grn), transparent 96%);
    --hero-shader-before-line-b: color-mix(in oklch, var(--org), transparent 96%);
    --hero-shader-a-at: 76% 20%;
    --hero-shader-b-at: 58% 62%;
    --hero-shader-c-at: 92% 64%;
    --hero-shader-line-angle: 112deg;
    --hero-shader-position: 72% 14%, 50% 64%, 96% 60%, 52% 40%;
    --hero-shader-before-a-at: 70% 18%;
    --hero-shader-before-b-at: 88% 56%;
    --hero-shader-before-line-angle: 124deg;
    --hero-shader-before-position: 66% 14%, 90% 54%, 50% 42%;
  }

  .proto-saas:is(.tacet-help-page, .tacet-ownership-page, .tacet-contact-page) {
    --tacet-page-bg: color-mix(in oklch, var(--background), var(--org) 1%);
    --hero-shader-a: color-mix(in oklch, var(--hero-accent), transparent 80%);
    --hero-shader-b: color-mix(in oklch, var(--grn), transparent 91%);
    --hero-shader-c: color-mix(in oklch, var(--pur), transparent 91%);
    --hero-shader-line-a: color-mix(in oklch, var(--hero-accent), transparent 95%);
    --hero-shader-line-b: color-mix(in oklch, var(--grn), transparent 96%);
    --hero-shader-a-at: 74% 24%;
    --hero-shader-b-at: 54% 60%;
    --hero-shader-c-at: 90% 70%;
    --hero-shader-line-angle: 102deg;
    --hero-shader-position: 68% 18%, 48% 62%, 92% 68%, 48% 42%;
  }

  .proto-saas .erpai-hero {
    position: relative;
    overflow: clip visible;
    background: transparent !important;
    background-image: none !important;
    border-bottom: 0 !important;
  }

  .erpai-hero .hero-bg-prototype {
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: 0;
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease-standard);
  }

  .erpai-hero .erpai-hero__viewport {
    position: relative;
    z-index: 1;
  }

  .erpai-hero .hero-bg-prototype--shader {
    top: calc(-1 * var(--chrome-height, 5rem));
    background:
      radial-gradient(
        ellipse at var(--hero-shader-a-at, 78% 24%),
        var(--hero-shader-a, color-mix(in oklch, var(--hero-accent), transparent 72%)),
        transparent var(--hero-shader-a-stop, 34%)
      ),
      radial-gradient(
        ellipse at var(--hero-shader-b-at, 56% 54%),
        var(--hero-shader-b, color-mix(in oklch, var(--pur), transparent 86%)),
        transparent var(--hero-shader-b-stop, 36%)
      ),
      radial-gradient(
        ellipse at var(--hero-shader-c-at, 92% 66%),
        var(--hero-shader-c, color-mix(in oklch, var(--grn), transparent 88%)),
        transparent var(--hero-shader-c-stop, 34%)
      ),
      linear-gradient(
        var(--hero-shader-line-angle, 104deg),
        transparent,
        var(--hero-shader-line-a, color-mix(in oklch, var(--hero-accent), transparent 92%)) 40%,
        var(--hero-shader-line-b, color-mix(in oklch, var(--pur), transparent 94%)) 58%,
        transparent 80%
      );
    background-size: var(--hero-shader-size, 135% 125%, 130% 120%, 140% 130%, 115% 115%);
    background-position: var(--hero-shader-position, 72% 16%, 46% 54%, 98% 62%, 50% 38%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 72%, transparent 100%);
    mix-blend-mode: multiply;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.015);
    animation: hero-shader-field 24s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 14%,
      #000 72%,
      transparent 100%
    );
  }

  .erpai-hero .hero-bg-prototype--shader::before {
    content: '';
    position: absolute;
    inset: -12% -8% -24%;
    background:
      radial-gradient(
        ellipse at var(--hero-shader-before-a-at, 74% 18%),
        var(--hero-shader-before-a, color-mix(in oklch, var(--hero-accent), transparent 78%)),
        transparent 36%
      ),
      radial-gradient(
        ellipse at var(--hero-shader-before-b-at, 86% 58%),
        var(--hero-shader-before-b, color-mix(in oklch, var(--grn), transparent 90%)),
        transparent 42%
      ),
      linear-gradient(
        var(--hero-shader-before-line-angle, 128deg),
        transparent 12%,
        var(--hero-shader-before-line-a, color-mix(in oklch, var(--hero-accent), transparent 94%))
          42%,
        var(--hero-shader-before-line-b, color-mix(in oklch, var(--pur), transparent 96%)) 63%,
        transparent 84%
      );
    background-size: var(--hero-shader-before-size, 125% 120%, 140% 125%, 115% 115%);
    background-position: var(--hero-shader-before-position, 68% 12%, 90% 52%, 50% 42%);
    opacity: 0.72;
    transform: translate3d(0, 0, 0) scale(1.02);
    animation: hero-shader-drift 26s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  }

  @keyframes hero-shader-field {
    from {
      transform: translate3d(0, 0, 0) scale(1.015);
    }

    to {
      transform: translate3d(-1.75%, 1.25%, 0) scale(1.04);
    }
  }

  @keyframes hero-shader-drift {
    from {
      opacity: 0.68;
      transform: translate3d(0, 0, 0) scale(1.02);
    }

    to {
      opacity: 0.76;
      transform: translate3d(-2.5%, 1.5%, 0) scale(1.06);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .erpai-hero .hero-bg-prototype--shader,
    .erpai-hero .hero-bg-prototype--shader::before {
      animation: none;
    }
  }

  .proto-saas .erpai-hero__viewport--fill {
    min-height: calc(
      100vh - var(--chrome-height) - var(--tacet-page-nav-height) - var(--hero-extra-bottom)
    );
    min-height: calc(
      100dvh - var(--chrome-height) - var(--tacet-page-nav-height) - var(--hero-extra-bottom)
    );
  }

  .proto-saas .erpai-hero__viewport--fill > .grid > div:first-child {
    padding-block: clamp(2.75rem, 5dvh, 3.5rem) !important;
  }

  .proto-saas .erpai-hero .hero-eyebrow {
    border-radius: 0.5rem !important;
  }

  .proto-saas .erpai-hero__left-rail,
  .proto-saas .erpai-hero > [aria-hidden='true']:not(.hero-bg-prototype) {
    display: none !important;
  }

  .proto-saas .erpai-hero .lg\:border-r {
    border-right: 0 !important;
  }

  .proto-saas .erpai-hero h1 {
    max-width: 11ch;
    font-family: var(--font-heading) !important;
    font-size: clamp(2.1rem, 3.5vw, 3.45rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: var(--tacet-type-hero-track) !important;
    text-transform: none !important;
  }

  .proto-saas:is(.proto-byoa, .tacet-byoa-page) .erpai-hero h1 {
    max-width: 15ch;
  }

  .proto-saas.tacet-headless-saas-page .erpai-hero h1 {
    max-width: 18ch;
  }

  .proto-saas.tacet-enterprise-page .erpai-hero h1 {
    max-width: min(100%, 30ch);
    font-size: clamp(2.2rem, 4vw, 4rem) !important;
    letter-spacing: 0 !important;
  }

  .proto-saas.tacet-enterprise-page .erpai-hero p {
    max-width: 68ch !important;
  }

  .proto-saas.tacet-enterprise-page .erpai-hero h1 + p,
  .proto-saas.tacet-enterprise-page .erpai-hero h1 + p + p {
    margin-bottom: 1.25rem !important;
  }

  .proto-saas.tacet-enterprise-page .erpai-hero .hero-checks {
    margin-top: clamp(1.85rem, 3vw, 2.35rem) !important;
    opacity: 1 !important;
    transform: none;
  }

  .proto-saas.tacet-enterprise-page .erpai-hero__viewport--fill > .grid > div:first-child {
    padding-block: clamp(1.75rem, 3dvh, 2.25rem) !important;
  }

  .proto-saas.tacet-managed-services-page .erpai-hero h1 {
    max-width: min(100%, 31ch);
    font-size: clamp(2.1rem, 4vw, 4rem) !important;
    letter-spacing: 0 !important;
  }

  .proto-saas.tacet-managed-services-page .erpai-hero p {
    max-width: 66ch !important;
  }

  .proto-saas.tacet-managed-services-page .erpai-hero h1 + p,
  .proto-saas.tacet-managed-services-page .erpai-hero h1 + p + p {
    margin-bottom: 1.25rem !important;
  }

  .proto-saas.tacet-managed-services-page .erpai-hero .hero-checks {
    margin-top: clamp(1.85rem, 3vw, 2.35rem) !important;
    opacity: 1 !important;
    transform: none;
  }

  .proto-saas.tacet-managed-services-page .erpai-hero__viewport--fill > .grid > div:first-child {
    padding-block: clamp(1.75rem, 3dvh, 2.25rem) !important;
  }

  .proto-saas.tacet-version-control-page .erpai-hero h1 {
    max-width: min(100%, 31ch);
    font-size: clamp(2.1rem, 4vw, 4rem) !important;
    letter-spacing: 0 !important;
  }

  .proto-saas.tacet-version-control-page .erpai-hero p {
    max-width: 66ch !important;
  }

  .proto-saas.tacet-version-control-page .erpai-hero h1 + p,
  .proto-saas.tacet-version-control-page .erpai-hero h1 + p + p {
    margin-bottom: 1.25rem !important;
  }

  .proto-saas.tacet-version-control-page .erpai-hero .hero-checks {
    margin-top: clamp(1.85rem, 3vw, 2.35rem) !important;
    opacity: 1 !important;
    transform: none;
  }

  .proto-saas.tacet-version-control-page .erpai-hero__viewport--fill > .grid > div:first-child {
    padding-block: clamp(1.75rem, 3dvh, 2.25rem) !important;
  }

  .proto-saas.tacet-pricing-page .erpai-hero h1 {
    max-width: min(100%, 31ch);
    font-size: clamp(2.1rem, 4vw, 4rem) !important;
    letter-spacing: 0 !important;
  }

  .proto-saas.tacet-pricing-page .erpai-hero p {
    max-width: 66ch !important;
  }

  .proto-saas.tacet-pricing-page .erpai-hero h1 + p,
  .proto-saas.tacet-pricing-page .erpai-hero h1 + p + p {
    margin-bottom: 1.25rem !important;
  }

  .proto-saas.tacet-pricing-page .erpai-hero .hero-checks {
    margin-top: clamp(1.85rem, 3vw, 2.35rem) !important;
    opacity: 1 !important;
    transform: none;
  }

  /* -- Complementary pricing steps --------------------------------------- */
  .proto-saas.tacet-pricing-page .hero-step-sequence {
    position: relative;
    isolation: isolate;
    display: grid;
    width: min(100%, 40rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 1.55rem;
    border: 1px solid color-mix(in oklch, var(--border), var(--foreground) 18%);
    background: color-mix(in oklch, var(--background), transparent 10%);
  }

  .proto-saas.tacet-pricing-page .hero-step-sequence::after {
    content: '→';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border: 1px solid color-mix(in oklch, var(--border), var(--foreground) 18%);
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .proto-saas.tacet-pricing-page .hero-step-sequence__item {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 3.7rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.1rem;
    overflow: hidden;
    border: 0;
    border-bottom: 2px solid var(--org-on-light);
    background: transparent;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1vw, 1.08rem);
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms var(--ease-standard);
  }

  .proto-saas.tacet-pricing-page .hero-step-sequence__item + .hero-step-sequence__item {
    border-left: 1px solid color-mix(in oklch, var(--border), var(--foreground) 18%);
  }

  .proto-saas.tacet-pricing-page .hero-step-sequence__item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--org-on-light);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms var(--ease-standard);
  }

  .proto-saas.tacet-pricing-page .hero-step-sequence__copy {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .proto-saas.tacet-pricing-page .hero-step-sequence__item strong {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    text-transform: none;
  }

  .proto-saas.tacet-pricing-page .hero-step-sequence__item > span:not(.hero-step-sequence__copy) {
    color: inherit;
    font: inherit;
  }

  .proto-saas.tacet-pricing-page .hero-step-sequence__item:where(a):focus-visible {
    z-index: 3;
    outline: 2px solid var(--foreground);
    outline-offset: 3px;
    color: var(--background);
  }

  .proto-saas.tacet-pricing-page .hero-step-sequence__item:where(a):active {
    outline: 1px solid var(--foreground);
    outline-offset: -2px;
  }

  .proto-saas.tacet-pricing-page .hero-step-sequence__item:where(a):focus-visible::before {
    transform: scaleX(1);
  }

  @media (hover: hover) and (pointer: fine) {
    .proto-saas.tacet-pricing-page .hero-step-sequence__item:where(a):hover::before {
      transform: scaleX(1);
    }

    .proto-saas.tacet-pricing-page .hero-step-sequence__item:where(a):hover {
      color: var(--background);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .proto-saas.tacet-pricing-page .hero-step-sequence__item,
    .proto-saas.tacet-pricing-page .hero-step-sequence__item::before {
      transition-duration: 0.01ms;
    }
  }
  @media (max-width: 42rem) {
    body.catalog-page.catalog-page--swage .erpnav-logo svg,
    body.catalog-page.catalog-page--swage .crmnav-logo svg {
      height: 1.6rem;
    }

    .proto-saas.tacet-pricing-page .hero-step-sequence {
      width: 100%;
      grid-template-columns: 1fr;
    }

    .proto-saas.tacet-pricing-page .hero-step-sequence__item + .hero-step-sequence__item {
      border-top: 1px solid color-mix(in oklch, var(--border), var(--foreground) 18%);
      border-left: 0;
    }

    .proto-saas.tacet-pricing-page .hero-step-sequence::after {
      content: '↓';
    }
  }

  .proto-saas.tacet-pricing-page .erpai-hero__viewport--fill > .grid > div:first-child {
    padding-block: clamp(1.75rem, 3dvh, 2.25rem) !important;
  }

  .proto-saas.tacet-pricing-page .erpai-hero__viewport--fill > .grid {
    padding-bottom: var(--space-10);
  }

  .proto-saas.tacet-headless-saas-page .erpai-hero__viewport--fill > .grid > div:first-child {
    padding-block: clamp(1.5rem, 3dvh, 2.25rem) !important;
  }

  .proto-saas.tacet-headless-saas-page .erpai-hero p {
    max-width: 42ch !important;
    margin-bottom: 1.5rem !important;
  }

  .proto-saas.tacet-ownership-page .erpai-hero h1 {
    max-width: 15ch;
  }

  .tacet-help-page #topics {
    position: relative;
    z-index: 1;
    background: var(--background) !important;
  }

  .tacet-help-page #topics > div:first-child {
    padding-block: 2.5rem 1rem !important;
    padding-inline: var(--tacet-section-pad-x) !important;
  }

  .tacet-help-page #topics > .grid {
    width: min(calc(100% - (2 * var(--tacet-section-pad-x))), var(--tacet-section-max));
    max-width: 100%;
    overflow: hidden;
    margin: 2rem auto 3rem !important;
    border: 1px solid var(--tacet-panel-border) !important;
    border-radius: var(--radius-lg);
    background: var(--tacet-panel-bg) !important;
    backdrop-filter: blur(14px) saturate(1.12);
    box-shadow: var(--shadow-sm);
  }

  .tacet-help-page .help-topic-module {
    display: flex;
    min-height: 14.5rem;
    flex-direction: column;
    padding: 1rem !important;
    border-right: 1px solid var(--tacet-panel-border);
    border-bottom: 1px solid var(--tacet-panel-border);
    background: color-mix(in oklch, var(--card), transparent 42%) !important;
    color: var(--foreground);
    text-decoration: none;
    transition:
      background var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

  .tacet-help-page .help-topic-module:hover,
  .tacet-help-page .help-topic-module:focus-visible {
    background: color-mix(in oklch, var(--org), var(--card) 92%) !important;
  }

  .tacet-help-page .help-topic-module--locked {
    color: color-mix(in oklch, var(--foreground), transparent 35%);
  }

  .tacet-help-page .help-topic-module__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--gold-on-light);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 560;
    letter-spacing: 0 !important;
  }

  .tacet-help-page .help-topic-module--locked .help-topic-module__meta {
    color: var(--text-m);
  }

  .tacet-help-page .help-topic-module__meta i {
    width: 1rem;
    height: 1rem;
    color: currentColor;
  }

  .tacet-help-page .help-topic-module h3 {
    margin-top: 0.375rem !important;
    color: var(--foreground) !important;
    font-size: 1rem !important;
    font-weight: 650 !important;
    line-height: var(--tacet-type-card-lh) !important;
    letter-spacing: var(--tacet-type-card-track) !important;
  }

  .tacet-help-page .help-topic-module p {
    flex: 1;
    margin-top: 0.5rem !important;
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
  }

  .tacet-help-page .help-topic-module--locked p,
  .tacet-help-page .help-topic-module--locked h3 {
    color: color-mix(in oklch, var(--text-m), transparent 18%) !important;
  }

  .tacet-help-page .help-topic-module__status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 560;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .tacet-help-page .help-topic-module__status > span:first-child {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background: var(--text-m);
  }

  .tacet-help-page .help-topic-module__status[data-state='live'] {
    color: var(--org-on-light);
  }

  .tacet-help-page .help-topic-module__status[data-state='live'] > span:first-child {
    background: var(--org);
  }

  @media (min-width: 48rem) {
    .tacet-help-page .help-topic-module:nth-child(2n) {
      border-right: 0;
    }
  }

  @media (min-width: 64rem) {
    .tacet-help-page .help-topic-module:nth-child(2n) {
      border-right: 1px solid var(--tacet-panel-border);
    }

    .tacet-help-page .help-topic-module:nth-child(4n) {
      border-right: 0;
    }

    .tacet-help-page .help-topic-module:nth-last-child(-n + 4) {
      border-bottom: 0;
    }
  }

  .tacet-help-page .tacet-help-index {
    padding-block: clamp(4.5rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem);
    background: var(--background) !important;
  }

  .tacet-help-page .tacet-help-index__header,
  .tacet-help-page .tacet-help-table,
  .tacet-help-page .tacet-help-after-table {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
  }

  .tacet-help-page .tacet-help-index__header {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
  }

  .tacet-help-page .tacet-help-index__header h1 {
    max-width: 14ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 5.5vw, 4.75rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.88;
  }

  .tacet-help-page .tacet-help-index__header p {
    max-width: 58ch;
    margin: 0;
    color: var(--text-m);
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.65;
  }

  .tacet-help-page .tacet-help-table {
    display: grid;
    border-top: 1px solid var(--tacet-panel-border);
  }

  .tacet-help-page .tacet-help-table__row {
    display: grid;
    grid-template-columns: 2rem minmax(6.5rem, 0.14fr) minmax(12rem, 0.25fr) minmax(0, 1fr) minmax(
        6.5rem,
        0.14fr
      );
    gap: clamp(0.75rem, 1.8vw, 1.5rem);
    align-items: center;
    min-height: 5.75rem;
    padding: clamp(1rem, 2vw, 1.35rem) 0;
    border-bottom: 1px solid var(--tacet-panel-border);
    color: var(--foreground);
    text-decoration: none;
    transition:
      background var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

  .tacet-help-page a.tacet-help-table__row:hover,
  .tacet-help-page a.tacet-help-table__row:focus-visible {
    background: color-mix(in oklch, var(--org), transparent 95%);
  }

  .tacet-help-page .tacet-help-table__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid color-mix(in oklch, var(--org), transparent 70%);
    color: var(--org-on-light);
  }

  .tacet-help-page .tacet-help-table__meta,
  .tacet-help-page .tacet-help-table__action {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 740;
    letter-spacing: 0;
    line-height: 1.3;
  }

  .tacet-help-page .tacet-help-table__row[data-state='drafting'] .tacet-help-table__meta,
  .tacet-help-page .tacet-help-table__row[data-state='drafting'] .tacet-help-table__action {
    color: var(--text-m);
  }

  .tacet-help-page .tacet-help-table__row h2 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1.2;
  }

  .tacet-help-page .tacet-help-table__row p {
    max-width: 70ch;
    margin: 0;
    color: var(--text-m);
    font-size: 0.94rem;
    line-height: 1.55;
  }

  .tacet-help-page .tacet-help-table__action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    text-align: right;
  }

  .tacet-help-page .tacet-help-after-table {
    margin-top: clamp(1rem, 2vw, 1.5rem);
  }

  .tacet-help-page .tacet-help-after-table p {
    margin: 0;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .tacet-help-page .tacet-help-after-table a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.35rem;
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 740;
    text-decoration: none;
  }

  @media (max-width: 64rem) {
    .tacet-help-page .tacet-help-table__row {
      grid-template-columns: 2rem minmax(4.5rem, 0.18fr) minmax(0, 1fr);
      align-items: start;
    }

    .tacet-help-page .tacet-help-table__row h2 {
      grid-column: 3;
    }

    .tacet-help-page .tacet-help-table__row p,
    .tacet-help-page .tacet-help-table__action {
      grid-column: 3;
    }

    .tacet-help-page .tacet-help-table__action {
      justify-content: flex-start;
      text-align: left;
    }
  }

  @media (max-width: 48rem) {
    .tacet-help-page .tacet-help-index {
      padding-block: clamp(5.5rem, 18vw, 6.5rem) 3rem;
    }

    .tacet-help-page .tacet-help-index__header h1 {
      font-size: clamp(2.6rem, 14vw, 4rem);
    }

    .tacet-help-page .tacet-help-table__row {
      grid-template-columns: 2rem minmax(0, 1fr);
      gap: 0.5rem 0.85rem;
      padding-block: 1rem;
    }

    .tacet-help-page .tacet-help-table__meta,
    .tacet-help-page .tacet-help-table__row h2,
    .tacet-help-page .tacet-help-table__row p,
    .tacet-help-page .tacet-help-table__action {
      grid-column: 2;
    }

    .tacet-help-page .tacet-help-after-table a {
      margin: 0.35rem 0 0;
    }
  }

  .proto-saas .erpai-hero h1 span {
    color: var(--foreground) !important;
  }

  .proto-saas .erpai-hero h1 span span {
    color: var(--tacet-saas-accent) !important;
  }

  .proto-saas .erpai-hero .font-serif {
    font-family: var(--font-body) !important;
    font-style: normal !important;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 500;
    color: var(--text-m) !important;
  }

  .proto-saas .erpai-hero .font-mono {
    font-family: var(--font-body) !important;
  }

  .proto-saas .erpai-hero p {
    max-width: 62ch;
    border-left: 0 !important;
    padding-left: 0 !important;
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.65;
    color: var(--text-m) !important;
  }

  .proto-saas .erpai-hero .inline-flex.flex-wrap.items-center.gap-4 {
    border-radius: var(--radius-full);
    border-color: color-mix(in oklch, var(--tacet-saas-accent), transparent 78%);
    background: color-mix(in oklch, var(--tacet-saas-accent), transparent 94%) !important;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html.dark .proto-saas .erpai-hero .hero-eyebrow.inline-flex.flex-wrap.items-center.gap-4 {
    border-color: color-mix(in oklch, var(--beige-400), transparent 72%) !important;
    background: color-mix(in oklch, var(--beige-900), var(--beige-800) 24%) !important;
    color: color-mix(in oklch, var(--beige-300), transparent 10%) !important;
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, var(--beige-100), transparent 88%),
      0 10px 24px color-mix(in oklch, black, transparent 82%);
  }

  html.dark .proto-saas .erpai-hero .hero-eyebrow > span:first-child {
    color: var(--org) !important;
  }

  html.dark .proto-saas .erpai-hero .hero-eyebrow > div {
    background: color-mix(in oklch, var(--beige-300), transparent 78%) !important;
  }

  .proto-saas .btn {
    min-height: 46px;
    border-width: 1px;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body) !important;
  }

  .proto-saas .btn--ghost {
    min-height: 46px;
    font-family: var(--font-body) !important;
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas .erpai-hero .mt-6.flex.flex-wrap {
    gap: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas .erpai-hero .hero-checks {
    gap: 0.7rem 1.45rem;
    margin-top: clamp(1.9rem, 3.2vw, 2.55rem);
    font-family: var(--font-body);
    font-size: clamp(0.86rem, 0.85vw, 0.94rem);
    font-weight: 540;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas .uppercase {
    text-transform: none !important;
  }

  .proto-saas .tracking-label,
  .proto-saas [class*='tracking-'] {
    letter-spacing: 0 !important;
  }

  .proto-saas h2,
  .proto-saas h3,
  .proto-saas h4 {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    line-height: var(--tacet-type-card-lh) !important;
    letter-spacing: var(--tacet-type-card-track) !important;
    text-transform: none !important;
    text-wrap: balance;
  }

  .proto-saas h2 {
    line-height: var(--tacet-type-heading-lh) !important;
    letter-spacing: var(--tacet-type-section-track) !important;
  }

  .proto-saas .proto-section-eyebrow + :is(h2, h3) {
    margin-top: 0 !important;
    margin-bottom: 0.875rem !important;
  }

  .proto-saas .proto-section-eyebrow + :is(h2, h3) + p {
    max-width: 62ch;
    margin-top: 0 !important;
    line-height: 1.58 !important;
  }

  .proto-saas :is(#protocol, #synthesis, #guardrails) h2,
  .proto-saas
    :is(#loop, #modules, #performance, #topology-dag, #tokens, #memory, #architecture, #sdk)
    h2,
  .proto-saas #mission-run h2 {
    font-size: clamp(2rem, 3.8vw, 3.35rem) !important;
    font-weight: 700 !important;
    line-height: var(--tacet-type-heading-lh) !important;
    letter-spacing: var(--tacet-type-section-track) !important;
  }

  .proto-saas
    :is(
      #mission-run,
      #modules,
      #loop,
      #performance,
      #topology-dag,
      #tokens,
      #memory,
      #architecture,
      #sdk
    )
    h3,
  .proto-saas :is(#protocol, #synthesis, #guardrails) h3,
  .proto-saas :is(#protocol, #synthesis, #guardrails) h4 {
    font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
    font-weight: 650 !important;
    line-height: var(--tacet-type-card-lh) !important;
    letter-spacing: var(--tacet-type-card-track) !important;
  }

  .proto-saas.tacet-help-page
    :is(#topics, #code, #surfaces, #targets, #motion, #security, #tradeoff, #principle) {
    background: transparent !important;
  }

  .proto-saas:is(.tacet-help-page, .tacet-ownership-page) #topics > div:first-child {
    padding-block: var(--tacet-section-pad-y) 2rem !important;
  }

  .proto-saas:is(.tacet-help-page, .tacet-ownership-page)
    :is(#topics, #code, #surfaces, #targets, #motion, #security, #tradeoff, #principle)
    h2 {
    font-size: clamp(2rem, 3.8vw, 3.35rem) !important;
    font-weight: 700 !important;
    line-height: var(--tacet-type-heading-lh) !important;
    letter-spacing: var(--tacet-type-section-track) !important;
  }

  .proto-saas:is(.tacet-help-page, .tacet-ownership-page) :is(#topics, #tradeoff, #security) h3 {
    font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
    font-weight: 650 !important;
  }

  .proto-saas .tacet-page-nav {
    position: relative;
    top: auto;
    width: 100%;
    margin-inline: 0;
    padding: 0 1rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: var(--tacet-page-nav-shell) !important;
  }

  .proto-saas .tacet-page-nav__links {
    width: fit-content;
    max-width: var(--tacet-page-nav-width);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .tacet-page-nav,
  .proto-page-nav {
    --tacet-panel-border: color-mix(in oklch, var(--border), transparent 12%);
    --tacet-page-nav-height: calc(3.25rem + 1px);
    --tacet-page-nav-shell: var(--background);
    --tacet-page-nav-shell-stuck: color-mix(in oklch, var(--background) 86%, transparent);
    --tacet-page-nav-width: min(calc(100vw - 2rem), 84rem);
    --tacet-page-nav-rest-edge: max(0rem, calc((100% - var(--tacet-page-nav-width)) / 2));
    --tacet-page-nav-stuck-width: var(--tacet-nav-bar-width, var(--tacet-nav-width-scrolled));
    --tacet-page-nav-stuck-left: var(
      --tacet-nav-bar-left,
      calc((100vw - var(--tacet-page-nav-stuck-width)) / 2)
    );

    position: sticky;
    top: var(--tacet-nav-bottom, var(--chrome-height));
    z-index: 58;
    width: 100%;
    min-height: var(--tacet-page-nav-height);
    margin-inline: 0;
    padding: 0 1rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: var(--tacet-page-nav-shell) !important;
    transition:
      width var(--duration-normal) var(--ease-standard),
      padding var(--duration-normal) var(--ease-standard),
      filter var(--duration-normal) var(--ease-standard);
  }

  .tacet-page-nav__links,
  .proto-page-nav__links {
    display: flex;
    width: fit-content;
    max-width: var(--tacet-page-nav-width);
    min-height: 3.25rem;
    align-items: center;
    justify-content: safe center;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: auto;
    scroll-behavior: smooth;
    scroll-padding-inline: 3rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition:
      width var(--duration-normal) var(--ease-standard),
      max-width var(--duration-normal) var(--ease-standard),
      border-radius var(--duration-normal) var(--ease-standard),
      background var(--duration-normal) var(--ease-standard),
      box-shadow var(--duration-normal) var(--ease-standard),
      opacity var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .tacet-page-nav[data-stuck='true'],
  .proto-page-nav[data-stuck='true'] {
    min-height: 3rem;
    border-bottom: 0;
    width: var(--tacet-page-nav-stuck-width);
    margin-inline: auto;
    padding: 0;
    background: transparent !important;
  }

  .tacet-page-nav[data-stuck='true'] .tacet-page-nav__links,
  .proto-page-nav[data-stuck='true'] .proto-page-nav__links {
    position: fixed;
    top: calc(var(--tacet-nav-bottom, var(--chrome-height)) - 0.625rem);
    left: var(--tacet-page-nav-stuck-left);
    z-index: 57;
    width: var(--tacet-page-nav-stuck-width);
    max-width: var(--tacet-page-nav-stuck-width);
    min-height: 3.625rem;
    padding-top: 0.625rem;
    border: 1px solid var(--tacet-panel-border);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    background: var(--tacet-page-nav-shell-stuck);
    box-shadow: var(--tacet-shadow-sm);
    backdrop-filter: blur(14px) saturate(1.12);
  }

  .tacet-page-nav[data-after-content='true'] .tacet-page-nav__links,
  .proto-page-nav[data-after-content='true'] .proto-page-nav__links,
  .tacet-page-nav[data-after-content='true'] .inpage-nav-arrow,
  .proto-page-nav[data-after-content='true'] .inpage-nav-arrow {
    pointer-events: none;
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  .tacet-page-nav[data-inpage-nav] .tacet-page-nav__link,
  .proto-page-nav[data-inpage-nav] .proto-page-nav__link {
    position: relative;
    display: inline-flex;
    min-height: var(--tacet-page-nav-height);
    align-items: center;
    flex: 0 0 auto;
    border-bottom: 0 !important;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0 !important;
    line-height: 1;
    padding: 0 1.0625rem;
    text-decoration: none;
    text-transform: none !important;
    transition:
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      background var(--duration-fast) var(--ease-standard);
    white-space: nowrap;
  }

  .tacet-page-nav[data-inpage-nav] .tacet-page-nav__link::after,
  .proto-page-nav[data-inpage-nav] .proto-page-nav__link::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    bottom: -1px;
    left: 0.75rem;
    height: 3px;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    background: var(--org-on-light);
    opacity: 0;
    transform: scaleX(0.55);
    transform-origin: center;
    transition:
      opacity var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .tacet-page-nav[data-inpage-nav] .tacet-page-nav__link:hover,
  .tacet-page-nav[data-inpage-nav] .tacet-page-nav__link:focus-visible,
  .proto-page-nav[data-inpage-nav] .proto-page-nav__link:hover,
  .proto-page-nav[data-inpage-nav] .proto-page-nav__link:focus-visible {
    color: var(--foreground);
    background: color-mix(in oklch, var(--foreground), transparent 96%);
  }

  .tacet-page-nav[data-inpage-nav] .tacet-page-nav__link.inpage-nav-link--active,
  .proto-page-nav[data-inpage-nav] .proto-page-nav__link.inpage-nav-link--active {
    color: var(--org-on-light);
  }

  .tacet-page-nav[data-inpage-nav] .tacet-page-nav__link.inpage-nav-link--active::after,
  .proto-page-nav[data-inpage-nav] .proto-page-nav__link.inpage-nav-link--active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .tacet-page-nav[data-stuck='true'][data-inpage-nav] .tacet-page-nav__link::after,
  .proto-page-nav[data-stuck='true'][data-inpage-nav] .proto-page-nav__link::after {
    bottom: 0;
  }

  .tacet-page-nav .inpage-nav-arrow,
  .proto-page-nav .inpage-nav-arrow {
    top: 0;
    bottom: 0;
    width: 2.5rem;
    border: 0;
    background: linear-gradient(
      to right,
      var(--tacet-page-nav-shell) 0%,
      var(--tacet-page-nav-shell) 62%,
      color-mix(in oklch, var(--tacet-page-nav-shell), transparent 8%) 78%,
      transparent 100%
    );
    color: var(--org-on-light);
    font-size: 1.375rem;
    font-weight: 850;
    z-index: 59;
    backdrop-filter: none;
    text-shadow:
      0 0 0.25rem var(--tacet-page-nav-shell),
      0 0 0.5rem var(--tacet-page-nav-shell);
    transition:
      opacity var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .tacet-page-nav .inpage-nav-arrow--left,
  .proto-page-nav .inpage-nav-arrow--left {
    left: var(--tacet-page-nav-rest-edge);
    border-radius: 0;
  }

  .tacet-page-nav .inpage-nav-arrow--right,
  .proto-page-nav .inpage-nav-arrow--right {
    right: var(--tacet-page-nav-rest-edge);
    border-radius: 0;
    background: linear-gradient(
      to left,
      var(--tacet-page-nav-shell) 0%,
      var(--tacet-page-nav-shell) 62%,
      color-mix(in oklch, var(--tacet-page-nav-shell), transparent 8%) 78%,
      transparent 100%
    );
  }

  .tacet-page-nav[data-stuck='true'] .inpage-nav-arrow,
  .proto-page-nav[data-stuck='true'] .inpage-nav-arrow {
    position: fixed;
    top: calc(var(--tacet-nav-bottom, var(--chrome-height)) - 0.625rem);
    bottom: auto;
    min-height: 3.625rem;
    padding-top: 0.625rem;
    border-top: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: var(--tacet-page-nav-shell-stuck);
  }

  .tacet-page-nav[data-stuck='true'] .inpage-nav-arrow--left,
  .proto-page-nav[data-stuck='true'] .inpage-nav-arrow--left {
    left: var(--tacet-page-nav-stuck-left);
    border-left: 1px solid var(--tacet-panel-border);
    border-bottom-left-radius: 0.375rem;
  }

  .tacet-page-nav[data-stuck='true'] .inpage-nav-arrow--right,
  .proto-page-nav[data-stuck='true'] .inpage-nav-arrow--right {
    right: auto;
    left: calc(var(--tacet-page-nav-stuck-left) + var(--tacet-page-nav-stuck-width) - 2.5rem);
    border-right: 1px solid var(--tacet-panel-border);
    border-bottom-right-radius: 0.375rem;
  }

  .tacet-page-nav--stacked {
    --tacet-page-nav-height: calc(6.5rem + 2px);
  }

  .tacet-page-nav--stacked .tacet-page-nav__links {
    display: block;
    min-height: calc(6.5rem + 1px);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tacet-page-nav--stacked[data-stuck='true'] .tacet-page-nav__links {
    min-height: calc(7.25rem + 1px);
  }

  .tacet-page-nav__stack {
    display: flex;
    min-width: max-content;
    flex-direction: column;
  }

  .tacet-page-nav__row {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    gap: 0;
    white-space: nowrap;
  }

  .tacet-page-nav__row + .tacet-page-nav__row {
    border-top: 1px solid var(--tacet-panel-border);
  }

  .tacet-page-nav__group-label {
    display: inline-flex;
    min-height: 1.5rem;
    align-items: center;
    flex: 0 0 auto;
    margin-inline: 0.75rem 0.25rem;
    padding: 0 0.5rem;
    border: 1px solid
      color-mix(in oklch, var(--tacet-page-nav-group, var(--org-on-light)) 25%, transparent);
    background: color-mix(
      in oklch,
      var(--tacet-page-nav-group, var(--org-on-light)) 5%,
      var(--background)
    );
    color: var(--tacet-page-nav-group, var(--org-on-light));
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  @media (max-width: 64rem) {
    .tacet-page-nav,
    .proto-page-nav {
      --tacet-page-nav-width: min(calc(100vw - 1.5rem), 100%);

      top: var(--tacet-nav-bottom, var(--chrome-height));
      padding-inline: 0.75rem;
    }

    .tacet-page-nav__links,
    .proto-page-nav__links {
      width: fit-content;
      max-width: var(--tacet-page-nav-width);
    }

    .tacet-page-nav[data-stuck='true'] .tacet-page-nav__links,
    .proto-page-nav[data-stuck='true'] .proto-page-nav__links {
      width: var(--tacet-page-nav-stuck-width);
      max-width: var(--tacet-page-nav-stuck-width);
    }

    .tacet-page-nav[data-inpage-nav] .tacet-page-nav__link,
    .proto-page-nav[data-inpage-nav] .proto-page-nav__link {
      font-size: 0.8125rem;
      padding-inline: 0.875rem;
    }
  }

  .proto-page-nav[data-stuck='true'],
  .proto-page-nav[data-stuck='true'] .proto-page-nav__links {
    inline-size: var(--tacet-page-nav-stuck-width) !important;
    max-inline-size: var(--tacet-page-nav-stuck-width) !important;
  }

  .proto-saas .proto-page-nav {
    --tacet-page-nav-shell: var(--background);
    --tacet-page-nav-shell-stuck: color-mix(in oklch, var(--background) 86%, transparent);
    --tacet-page-nav-width: var(
      --tacet-content-rail,
      min(calc(100vw - (2 * var(--tacet-section-pad-x, 1rem))), 90rem)
    );

    position: sticky;
    top: var(--tacet-nav-bottom, var(--chrome-height));
    z-index: 58;
    width: 100%;
    min-height: var(--tacet-page-nav-height);
    margin-inline: 0;
    padding: 0 1rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: var(--tacet-page-nav-shell) !important;
    transition:
      width var(--duration-normal) var(--ease-standard),
      padding var(--duration-normal) var(--ease-standard),
      filter var(--duration-normal) var(--ease-standard);
  }

  .proto-saas .proto-page-nav__links {
    display: flex;
    width: min(100%, var(--tacet-page-nav-width));
    max-width: var(--tacet-page-nav-width);
    min-height: 3.25rem;
    align-items: center;
    justify-content: safe center;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: auto;
    scroll-behavior: smooth;
    scroll-padding-inline: 3rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition:
      width var(--duration-normal) var(--ease-standard),
      max-width var(--duration-normal) var(--ease-standard),
      border-radius var(--duration-normal) var(--ease-standard),
      background var(--duration-normal) var(--ease-standard),
      box-shadow var(--duration-normal) var(--ease-standard);
  }

  .proto-saas .proto-page-nav[data-stuck='true'] {
    min-height: 3rem;
    border-bottom: 0;
    width: var(--tacet-page-nav-stuck-width);
    margin-inline: auto;
    padding-inline: 0;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent !important;
  }

  .proto-saas .proto-page-nav[data-stuck='true'] .proto-page-nav__links {
    position: fixed;
    top: calc(var(--tacet-nav-bottom, var(--chrome-height)) - 0.625rem);
    left: var(--tacet-page-nav-stuck-left);
    z-index: 57;
    width: var(--tacet-page-nav-stuck-width);
    max-width: var(--tacet-page-nav-stuck-width);
    min-height: 3.625rem;
    padding-top: 0.625rem;
    transform: none;
    border: 1px solid var(--tacet-panel-border);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    background: var(--tacet-page-nav-shell-stuck);
    box-shadow: 0 12px 28px -24px rgb(0 0 0 / 0.5);
    backdrop-filter: blur(14px) saturate(1.12);
  }

  .proto-saas .proto-page-nav[data-inpage-nav] .proto-page-nav__link {
    position: relative;
    display: inline-flex;
    min-height: 2.813rem;
    align-items: center;
    flex: 0 0 auto;
    border-bottom: 0 !important;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0 !important;
    line-height: 1;
    padding: 0 1.0625rem;
    text-decoration: none;
    text-transform: none !important;
    transition:
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      background var(--duration-fast) var(--ease-standard);
    white-space: nowrap;
  }

  .proto-saas .proto-page-nav[data-inpage-nav] .proto-page-nav__link::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    bottom: -1px;
    left: 0.75rem;
    height: 3px;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    background: var(--org-on-light);
    opacity: 0;
    transform: scaleX(0.55);
    transform-origin: center;
    transition:
      opacity var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .proto-saas .proto-page-nav[data-inpage-nav] .proto-page-nav__link:hover,
  .proto-saas .proto-page-nav[data-inpage-nav] .proto-page-nav__link:focus-visible {
    color: var(--foreground);
    background: color-mix(in oklch, var(--foreground), transparent 96%);
  }

  .proto-saas .proto-page-nav[data-inpage-nav] .proto-page-nav__link.inpage-nav-link--active {
    color: var(--org-on-light);
  }

  .proto-saas
    .proto-page-nav[data-inpage-nav]
    .proto-page-nav__link.inpage-nav-link--active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .proto-saas .proto-page-nav[data-stuck='true'][data-inpage-nav] .proto-page-nav__link::after {
    bottom: 0;
  }

  .proto-saas .proto-page-nav .inpage-nav-arrow {
    top: 0;
    bottom: 0;
    width: 2.5rem;
    border: 0;
    background: linear-gradient(
      to right,
      var(--tacet-page-nav-shell) 0%,
      var(--tacet-page-nav-shell) 62%,
      color-mix(in oklch, var(--tacet-page-nav-shell), transparent 8%) 78%,
      transparent 100%
    );
    color: var(--org-on-light);
    font-size: 1.375rem;
    font-weight: 850;
    z-index: 59;
    backdrop-filter: none;
    text-shadow:
      0 0 0.25rem var(--tacet-page-nav-shell),
      0 0 0.5rem var(--tacet-page-nav-shell);
  }

  .proto-saas .proto-page-nav .inpage-nav-arrow--left {
    left: var(--tacet-page-nav-rest-edge);
    border-radius: 0;
  }

  .proto-saas .proto-page-nav .inpage-nav-arrow--right {
    right: var(--tacet-page-nav-rest-edge);
    border-radius: 0;
    background: linear-gradient(
      to left,
      var(--tacet-page-nav-shell) 0%,
      var(--tacet-page-nav-shell) 62%,
      color-mix(in oklch, var(--tacet-page-nav-shell), transparent 8%) 78%,
      transparent 100%
    );
  }

  .proto-saas .proto-page-nav[data-stuck='true'] .inpage-nav-arrow {
    position: fixed;
    top: calc(var(--tacet-nav-bottom, var(--chrome-height)) - 0.625rem);
    bottom: auto;
    min-height: 3.625rem;
    padding-top: 0.625rem;
    border-top: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: var(--tacet-page-nav-shell-stuck);
  }

  .proto-saas .proto-page-nav[data-stuck='true'] .inpage-nav-arrow--left {
    left: var(--tacet-page-nav-stuck-left);
    border-left: 1px solid var(--tacet-panel-border);
    border-bottom-left-radius: 0.375rem;
  }

  .proto-saas .proto-page-nav[data-stuck='true'] .inpage-nav-arrow--right {
    right: auto;
    left: calc(var(--tacet-page-nav-stuck-left) + var(--tacet-page-nav-stuck-width) - 2.5rem);
    border-right: 1px solid var(--tacet-panel-border);
    border-bottom-right-radius: 0.375rem;
  }

  @media (max-width: 64rem) {
    .proto-saas .erpai-hero__viewport--fill .hero-side,
    .proto-saas .erpai-hero__viewport--fill .hero-checks {
      display: none !important;
    }

    .proto-saas .proto-page-nav {
      --tacet-page-nav-width: min(calc(100vw - 1.5rem), 100%);

      top: var(--tacet-nav-bottom, var(--chrome-height));
      padding-inline: 0.75rem;
    }

    .proto-saas .proto-page-nav__links {
      width: fit-content;
      max-width: var(--tacet-page-nav-width);
    }

    .proto-saas .proto-page-nav[data-stuck='true'] .proto-page-nav__links {
      width: var(--tacet-page-nav-stuck-width);
      max-width: var(--tacet-page-nav-stuck-width);
    }

    .proto-saas .proto-page-nav[data-inpage-nav] .proto-page-nav__link {
      font-size: 0.8125rem;
      padding-inline: 0.875rem;
    }
  }

  .proto-saas .proto-page-nav[data-stuck='true'],
  .proto-saas .proto-page-nav[data-stuck='true'] .proto-page-nav__links {
    inline-size: var(--tacet-page-nav-stuck-width) !important;
    max-inline-size: var(--tacet-page-nav-stuck-width) !important;
  }

  .proto-saas .proto-page-nav[data-after-content='true'] .proto-page-nav__links,
  .proto-saas .proto-page-nav[data-after-content='true'] .inpage-nav-arrow {
    pointer-events: none;
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  .proto-section-eyebrow {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.9rem;
  }

  .proto-section-eyebrow__rail {
    width: 1px;
    height: 2rem;
    background: var(--org-on-light);
  }

  .proto-section-eyebrow__copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
  }

  .proto-section-eyebrow__name {
    color: var(--foreground);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .proto-section-eyebrow__context {
    color: var(--text-m);
    font-size: 0.8125rem;
    font-weight: 560;
    line-height: 1.1;
  }

  .proto-section-eyebrow--cta {
    margin-inline: auto;
    margin-bottom: 1rem;
    text-align: left;
  }

  .proto-section-eyebrow--cta .proto-section-eyebrow__rail {
    background: var(--org);
  }

  .proto-section-eyebrow--cta .proto-section-eyebrow__name {
    color: var(--cream);
  }

  .proto-section-eyebrow--cta .proto-section-eyebrow__context {
    color: color-mix(in oklch, var(--cream), transparent 34%);
  }

  /* -- Named eyebrow variants (design-system standards) ---------------------
     Available treatments, all reusing the __rail/__copy/__name/__context
     markup so a variant is a class swap on the root, never a markup change:
       --rail      vertical rail + stacked, sharpened hierarchy
       --capped    content-width brand top rule over the stacked block
       --underline single line, name underlined, hairline continues (the H study)
       --chip      name in a subtle tag chip, context below
     Documented live in design-system.njk #eyebrows. */

  /* --rail : sharpen the default. Fuller 2px rail; context steps down in size. */
  .proto-section-eyebrow--rail {
    align-items: stretch;
  }
  .proto-section-eyebrow--rail .proto-section-eyebrow__rail {
    width: 2px;
    height: auto;
    border-radius: var(--radius-xs);
  }
  .proto-section-eyebrow--rail .proto-section-eyebrow__copy {
    gap: var(--space-1);
    align-content: center;
  }
  .proto-section-eyebrow--rail .proto-section-eyebrow__context {
    font-size: var(--fs-xs);
    font-weight: 500;
  }

  /* --capped : brand top rule that spans the content and caps the stacked block. */
  .proto-section-eyebrow--capped {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: var(--space-2);
    border-top: 2px solid var(--org-on-light);
  }
  .proto-section-eyebrow--capped .proto-section-eyebrow__rail {
    display: none;
  }
  .proto-section-eyebrow--capped .proto-section-eyebrow__context {
    font-size: var(--fs-xs);
    font-weight: 500;
  }

  /* --underline : single line; name on a 2px --border-strong rule, context on a
     1px --border hairline that continues. Fully neutral (no brand colour).
     This is also the default section-eyebrow treatment ON THE LISTED PAGES:
     the second selector in each rule applies the same look to bare
     .proto-section-eyebrow (not --cta) inside the tacet-*-page hooks. Final CTA
     eyebrows opt in explicitly through cta-atsh.njk so they use this same
     treatment without depending on a page hook. One set of declarations, no
     drift. Page hooks live on <main> via each page's pageClass. */
  .proto-section-eyebrow--underline,
  :is(
      .tacet-proto-page,
      .tacet-discovery-page,
      .tacet-byoa-page,
      .tacet-headless-saas-page,
      .tacet-enterprise-page,
      .tacet-managed-services-page,
      .tacet-version-control-page,
      .tacet-pricing-page,
      .tacet-startups-page,
      .tacet-legal-page
    )
    .proto-section-eyebrow:not(.proto-section-eyebrow--cta) {
    display: inline-flex;
    align-items: flex-end;
    gap: 0;
  }
  .proto-section-eyebrow--underline .proto-section-eyebrow__rail,
  :is(
      .tacet-proto-page,
      .tacet-discovery-page,
      .tacet-byoa-page,
      .tacet-headless-saas-page,
      .tacet-enterprise-page,
      .tacet-managed-services-page,
      .tacet-version-control-page,
      .tacet-pricing-page,
      .tacet-startups-page,
      .tacet-legal-page
    )
    .proto-section-eyebrow:not(.proto-section-eyebrow--cta)
    .proto-section-eyebrow__rail {
    display: none;
  }
  .proto-section-eyebrow--underline .proto-section-eyebrow__copy,
  :is(
      .tacet-proto-page,
      .tacet-discovery-page,
      .tacet-byoa-page,
      .tacet-headless-saas-page,
      .tacet-enterprise-page,
      .tacet-managed-services-page,
      .tacet-version-control-page,
      .tacet-pricing-page,
      .tacet-startups-page,
      .tacet-legal-page
    )
    .proto-section-eyebrow:not(.proto-section-eyebrow--cta)
    .proto-section-eyebrow__copy {
    display: inline-flex;
    align-items: flex-end;
    gap: 0;
  }
  .proto-section-eyebrow--underline .proto-section-eyebrow__name,
  :is(
      .tacet-proto-page,
      .tacet-discovery-page,
      .tacet-byoa-page,
      .tacet-headless-saas-page,
      .tacet-enterprise-page,
      .tacet-managed-services-page,
      .tacet-version-control-page,
      .tacet-pricing-page,
      .tacet-startups-page,
      .tacet-legal-page
    )
    .proto-section-eyebrow:not(.proto-section-eyebrow--cta)
    .proto-section-eyebrow__name {
    border-bottom: 2px solid var(--border-strong);
    padding: 0 var(--space-2) var(--space-2) 0;
    line-height: 1;
  }
  .proto-section-eyebrow--underline .proto-section-eyebrow__context,
  :is(
      .tacet-proto-page,
      .tacet-discovery-page,
      .tacet-byoa-page,
      .tacet-headless-saas-page,
      .tacet-enterprise-page,
      .tacet-managed-services-page,
      .tacet-version-control-page,
      .tacet-pricing-page,
      .tacet-startups-page,
      .tacet-legal-page
    )
    .proto-section-eyebrow:not(.proto-section-eyebrow--cta)
    .proto-section-eyebrow__context {
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-2);
    font-weight: 500;
    line-height: 1;
  }

  /* --chip : name as a subtle tag, context beneath. */
  .proto-section-eyebrow--chip {
    grid-template-columns: minmax(0, 1fr);
  }
  .proto-section-eyebrow--chip .proto-section-eyebrow__rail {
    display: none;
  }
  .proto-section-eyebrow--chip .proto-section-eyebrow__copy {
    gap: var(--space-2);
    justify-items: start;
  }
  .proto-section-eyebrow--chip .proto-section-eyebrow__name {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1;
  }
  .proto-section-eyebrow--chip .proto-section-eyebrow__context {
    font-weight: 500;
  }

  #cta.proto-cta--left {
    position: relative;
    z-index: 1;
    background: var(--background) !important;
    padding-block: clamp(5rem, 7vw, 7rem);
  }

  .proto-cta--left .proto-cta__inner {
    --tacet-cta-surface-a: color-mix(in oklch, var(--beige-100), white 8%);
    --tacet-cta-surface-b: color-mix(in oklch, var(--beige-200), var(--beige-50) 18%);
    --tacet-cta-surface-c: color-mix(in oklch, var(--beige-300), var(--beige-100) 18%);
    --tacet-cta-surface-d: color-mix(in oklch, var(--beige-400), var(--beige-200) 24%);
    --tacet-cta-surface-e: color-mix(in oklch, var(--beige-500), var(--beige-300) 30%);
    --tacet-cta-flare-a: color-mix(in oklch, var(--beige-100), white 8%);
    --tacet-cta-flare-b: color-mix(in oklch, var(--beige-400), var(--pur) 8%);
    --tacet-cta-flare-c: color-mix(in oklch, var(--beige-500), var(--tacet-saas-accent) 9%);
    --tacet-cta-border: color-mix(in oklch, var(--beige-700), transparent 52%);
    --tacet-cta-ink: var(--foreground);
    --tacet-cta-ink-muted: var(--text-m);
    --tacet-cta-panel: color-mix(in oklch, var(--beige-50), transparent 54%);
    --tacet-cta-panel-soft: color-mix(in oklch, var(--beige-50), transparent 76%);
    --tacet-cta-panel-rule: color-mix(in oklch, var(--beige-800), transparent 76%);
    --tacet-cta-panel-rule-soft: color-mix(in oklch, var(--beige-800), transparent 80%);
    --tacet-cta-panel-rule-strong: color-mix(in oklch, var(--beige-800), transparent 68%);
    --tacet-cta-panel-head: color-mix(in oklch, var(--beige-700), transparent 84%);
    --tacet-cta-sheen: radial-gradient(64% 87% at 12.2% 21.5%, #fefaf5 0%, #ded8d3 100%);
    --tacet-cta-sheen-opacity: 0.72;
    --tacet-cta-shadow-top: color-mix(in oklch, white, transparent 54%);
    --tacet-cta-shadow-bottom: color-mix(in oklch, var(--beige-950), transparent 78%);
    --tacet-cta-shadow-cast: color-mix(in oklch, var(--beige-950), transparent 90%);
    --proto-cta-pad-x: var(--tacet-section-pad-x, clamp(1.5rem, 4vw, 3rem));
    --proto-cta-section-max: var(--tacet-section-max, 90rem);
    --proto-cta-visible-rail: var(
      --tacet-visible-rail,
      min(
        calc(100% - (2 * var(--proto-cta-pad-x))),
        calc(var(--proto-cta-section-max) - (2 * var(--proto-cta-pad-x)))
      )
    );

    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(24rem, 0.85fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 6rem);
    width: var(--proto-cta-visible-rail);
    max-width: calc(var(--proto-cta-section-max) - (2 * var(--proto-cta-pad-x)));
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--tacet-cta-border);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(circle at 12% 18%, var(--tacet-cta-flare-a) 0%, transparent 34%),
      radial-gradient(circle at 88% 12%, var(--tacet-cta-flare-b) 0%, transparent 34%),
      radial-gradient(circle at 80% 92%, var(--tacet-cta-flare-c) 0%, transparent 42%),
      linear-gradient(
        118deg,
        var(--tacet-cta-surface-a) 0%,
        var(--tacet-cta-surface-b) 22%,
        var(--tacet-cta-surface-c) 42%,
        var(--tacet-cta-surface-d) 62%,
        var(--tacet-cta-surface-e) 82%,
        var(--tacet-cta-surface-d) 100%
      );
    color: var(--tacet-cta-ink);
    padding: clamp(2rem, 5vw, 5rem);
    box-shadow:
      inset 0 1px 0 var(--tacet-cta-shadow-top),
      inset 0 -1px 0 var(--tacet-cta-shadow-bottom),
      0 18px 46px var(--tacet-cta-shadow-cast);
  }

  .proto-cta--left .proto-cta__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tacet-cta-sheen);
    opacity: var(--tacet-cta-sheen-opacity);
  }

  html.dark .proto-cta--left .proto-cta__inner {
    --tacet-cta-surface-a: color-mix(in oklch, var(--beige-700), var(--beige-800) 38%);
    --tacet-cta-surface-b: color-mix(in oklch, var(--beige-800), var(--beige-700) 18%);
    --tacet-cta-surface-c: color-mix(in oklch, var(--beige-900), var(--beige-800) 32%);
    --tacet-cta-surface-d: color-mix(in oklch, var(--beige-800), var(--beige-950) 22%);
    --tacet-cta-surface-e: color-mix(in oklch, var(--beige-700), var(--beige-900) 42%);
    --tacet-cta-flare-a: color-mix(in oklch, var(--beige-500), transparent 66%);
    --tacet-cta-flare-b: color-mix(in oklch, var(--pur), transparent 84%);
    --tacet-cta-flare-c: color-mix(in oklch, var(--tacet-saas-accent), transparent 82%);
    --tacet-cta-border: color-mix(in oklch, var(--beige-400), transparent 72%);
    --tacet-cta-ink: var(--beige-100);
    --tacet-cta-ink-muted: color-mix(in oklch, var(--beige-200), transparent 24%);
    --tacet-cta-panel: color-mix(in oklch, var(--beige-950), transparent 22%);
    --tacet-cta-panel-soft: color-mix(in oklch, var(--beige-900), transparent 32%);
    --tacet-cta-panel-rule: color-mix(in oklch, var(--beige-400), transparent 80%);
    --tacet-cta-panel-rule-soft: color-mix(in oklch, var(--beige-400), transparent 84%);
    --tacet-cta-panel-rule-strong: color-mix(in oklch, var(--beige-300), transparent 78%);
    --tacet-cta-panel-head: color-mix(in oklch, var(--beige-800), transparent 20%);
    --tacet-cta-sheen: radial-gradient(
      64% 87% at 12.2% 21.5%,
      color-mix(in oklch, var(--beige-500), transparent 58%) 0%,
      color-mix(in oklch, var(--beige-900), transparent 26%) 100%
    );
    --tacet-cta-sheen-opacity: 0.52;
    --tacet-cta-shadow-top: color-mix(in oklch, var(--beige-200), transparent 88%);
    --tacet-cta-shadow-bottom: color-mix(in oklch, var(--beige-950), transparent 34%);
    --tacet-cta-shadow-cast: color-mix(in oklch, black, transparent 68%);
  }

  .proto-cta--left .proto-section-eyebrow--cta {
    margin-inline: 0;
    margin-bottom: 1.15rem;
  }

  .proto-cta--left .proto-section-eyebrow--cta .proto-section-eyebrow__name {
    color: var(--tacet-cta-ink);
  }

  .proto-cta--left .proto-section-eyebrow--cta .proto-section-eyebrow__context {
    color: var(--tacet-cta-ink-muted);
  }

  .proto-cta--left h2 {
    max-width: 13.5ch;
    margin-bottom: 1.35rem !important;
    font-size: clamp(2.55rem, 5.45vw, 4.85rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.018em !important;
    color: var(--tacet-cta-ink) !important;
    overflow: visible !important;
    text-wrap: balance;
  }

  .proto-cta--left h2 span {
    display: block;
    overflow: visible;
    line-height: inherit;
  }

  .proto-cta--left h2 [data-line] {
    display: block !important;
  }

  .proto-cta--left .proto-cta__subtext {
    max-width: 58ch;
    margin: 0 0 2rem !important;
    color: var(--tacet-cta-ink-muted) !important;
    font-size: clamp(1rem, 1.1vw, 1.125rem) !important;
    line-height: 1.62 !important;
  }

  .proto-cta--left .proto-cta__actions {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: fit-content;
    max-width: 100%;
    margin-inline: 0 !important;
    text-align: left;
  }

  .proto-cta--actions-right .proto-cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(27rem, 0.72fr);
    gap: clamp(3rem, 5vw, 5rem);
  }

  .proto-cta--actions-right .proto-cta__content {
    max-width: 46rem;
  }

  .proto-cta--actions-right h2 {
    max-width: 14.5ch;
  }

  .proto-cta--actions-right .proto-cta__subtext {
    margin-bottom: 0 !important;
  }

  .proto-cta--actions-right .proto-cta__action-rail {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: stretch;
    min-width: 0;
    min-height: clamp(12rem, 20vw, 18rem);
    padding-inline-start: clamp(2rem, 4vw, 4rem);
    border-left: 1px solid var(--tacet-cta-panel-rule-strong);
  }

  .proto-cta--actions-right .proto-cta__action-rail::before {
    content: '';
    position: absolute;
    inset-block: clamp(0.5rem, 2vw, 1.5rem);
    left: 0;
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent,
      color-mix(in oklch, var(--cta-accent-text), transparent 18%),
      transparent
    );
    opacity: 0.72;
  }

  .proto-cta--actions-right .proto-cta__action-rail .proto-cta__actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: stretch !important;
    gap: 1rem;
    width: 100%;
  }

  .proto-cta--actions-right .proto-cta__action-rail .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .proto-cta--actions-right .proto-cta__action-rail .btn--ghost {
    padding-inline: 1rem;
  }

  #cta .btn--lg {
    min-height: 3.05rem;
    white-space: nowrap;
  }

  .proto-cta--left .btn {
    min-height: 48px;
  }

  .proto-cta--left a:not(.btn) {
    color: color-mix(in oklch, var(--tacet-cta-ink), transparent 36%) !important;
  }

  .proto-cta--left a:not(.btn):hover,
  .proto-cta--left a:not(.btn):focus-visible {
    color: var(--tacet-cta-ink) !important;
  }

  .proto-cta--left .proto-cta__meta {
    align-self: center;
    display: grid;
    align-content: center;
    gap: 1.15rem;
    min-height: 16rem;
    color: var(--tacet-cta-ink);
    padding: 0;
  }

  .proto-cta--left .proto-cta__meta-label {
    color: color-mix(in oklch, var(--tacet-cta-ink), transparent 16%) !important;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 650;
  }

  .proto-cta--left .proto-cta__trace-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--tacet-cta-panel-rule-strong);
    border-radius: var(--radius-lg);
    background: var(--tacet-cta-panel);
    box-shadow:
      inset 0 1px 0 var(--tacet-cta-shadow-top),
      0 10px 24px var(--tacet-cta-shadow-cast);
  }

  .proto-cta--left .proto-cta__trace-row {
    display: grid;
    grid-template-columns: 0.7fr 1fr 0.9fr;
    min-height: 3.25rem;
    border-top: 1px solid var(--tacet-cta-panel-rule);
  }

  .proto-cta--left .proto-cta__trace-row:first-child {
    border-top: 0;
  }

  .proto-cta--left .proto-cta__trace-row span {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.75rem 0.9rem;
    border-left: 1px solid var(--tacet-cta-panel-rule-soft);
    color: var(--tacet-cta-ink);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.2;
  }

  .proto-cta--left .proto-cta__trace-row span:first-child {
    border-left: 0;
  }

  .proto-cta--left .proto-cta__trace-row--head {
    min-height: 2.5rem;
    background: var(--tacet-cta-panel-head);
  }

  .proto-cta--left .proto-cta__trace-row--head span {
    color: color-mix(in oklch, var(--tacet-cta-ink), transparent 28%);
    font-size: 0.6875rem;
    text-transform: uppercase;
  }

  .proto-cta--left .proto-cta__trace-phase {
    color: var(--cta-accent-text, var(--red-on-light)) !important;
  }

  .proto-cta--left .proto-cta__trace-signal {
    color: color-mix(in oklch, var(--tacet-cta-ink), transparent 18%) !important;
  }

  .proto-cta--left .proto-cta__trace-state[data-tone='orange'] {
    color: var(--org-on-light) !important;
  }

  .proto-cta--left .proto-cta__trace-state[data-tone='green'] {
    color: var(--grn-on-light) !important;
  }

  .proto-cta--left .proto-cta__trace-state[data-tone='red'] {
    color: var(--red-on-light) !important;
  }

  .proto-cta--left .proto-cta__trace-state[data-tone='purple'] {
    color: var(--pur-on-light) !important;
  }

  .proto-cta--left .proto-cta__meta-grid {
    display: grid;
    border: 1px solid var(--tacet-cta-panel-rule-strong);
    border-radius: var(--radius-lg);
    background: var(--tacet-cta-panel-soft);
    overflow: hidden;
  }

  .proto-cta--left .proto-cta__meta-item {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid var(--tacet-cta-panel-rule);
    color: color-mix(in oklch, var(--tacet-cta-ink), transparent 8%) !important;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.25;
  }

  .proto-cta--left .proto-cta__meta-item:first-child {
    border-top: 0;
  }

  @media (max-width: 80rem) {
    .proto-cta--actions-right .proto-cta__inner {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 2rem;
    }

    .proto-cta--actions-right .proto-cta__content {
      max-width: 46rem;
    }

    .proto-cta--actions-right .proto-cta__action-rail {
      min-height: auto;
      padding-block-start: 2rem;
      padding-inline-start: 0;
      border-top: 1px solid var(--tacet-cta-panel-rule-strong);
      border-left: 0;
    }

    .proto-cta--actions-right .proto-cta__action-rail::before {
      inset: 0 auto auto 0;
      width: min(12rem, 60%);
      height: 1px;
      background: linear-gradient(
        90deg,
        color-mix(in oklch, var(--cta-accent-text), transparent 20%),
        transparent
      );
    }

    .proto-cta--actions-right .proto-cta__action-rail .proto-cta__actions {
      max-width: 36rem;
    }
  }

  @media (max-width: 900px) {
    .proto-cta--left .proto-cta__inner {
      grid-template-columns: 1fr;
      align-items: start;
      width: min(100% - 2rem, 42rem);
      padding: clamp(1.5rem, 7vw, 2.25rem);
    }

    .proto-cta--left h2 {
      max-width: 12ch;
      font-size: clamp(2.25rem, 10.5vw, 3.35rem) !important;
    }

    .proto-cta--left .proto-cta__meta {
      min-height: auto;
    }

    .proto-cta--actions-right .proto-cta__content {
      max-width: none;
    }
  }

  @media (max-width: 640px) {
    .proto-cta--left .proto-cta__actions {
      flex-direction: row !important;
      align-items: stretch !important;
      gap: 0.75rem;
      width: 100%;
    }

    .proto-cta--left .proto-cta__actions .btn {
      min-width: 0;
      justify-content: center;
      padding-inline: clamp(0.75rem, 4vw, 1.25rem);
      text-align: center;
      white-space: normal !important;
    }

    .proto-cta--left .proto-cta__actions .btn--primary {
      flex: 1 1 56%;
    }

    .proto-cta--left .proto-cta__actions .btn--ghost {
      flex: 1 1 44%;
    }

    .proto-cta--actions-right .proto-cta__action-rail .proto-cta__actions {
      grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
      gap: 0.5rem;
    }

    .proto-cta--actions-right .proto-cta__action-rail .proto-cta__actions .btn {
      gap: 0.25rem;
      padding-inline: 0.5rem;
      font-size: 0.75rem;
      white-space: nowrap !important;
    }

    .proto-cta--actions-right .proto-cta__action-rail .btn svg {
      width: 0.875rem;
      height: 0.875rem;
    }
  }

  .proto-saas section,
  .proto-saas .border {
    border-color: color-mix(in oklch, var(--border), transparent 20%) !important;
  }

  .proto-saas > :is(section, div),
  .proto-saas #modules > section,
  .proto-saas #sdk > section {
    background: transparent;
  }

  .proto-saas #modules > section {
    width: var(--tacet-visible-rail) !important;
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x))) !important;
    margin-inline: auto !important;
    box-sizing: border-box;
  }

  .proto-saas [data-observe~='reveal-up']:has(.proto-diagram-shell) {
    opacity: 1;
    transform: none;
  }

  .proto-saas
    :is(
      #synthesis:not(.tacet-section),
      #performance:not(.tacet-section),
      #topology-dag:not(.tacet-section),
      #tokens:not(.tacet-section),
      #memory:not(.tacet-section),
      #architecture:not(.tacet-section)
    )
    > div:not(.absolute),
  .proto-saas #sdk > section > div,
  .proto-saas #modules section > div:first-child {
    max-width: var(--tacet-section-max);
    margin-inline: auto;
    padding-block: var(--tacet-section-pad-y) !important;
    padding-inline: var(--tacet-section-pad-x) !important;
  }

  .proto-saas.proto-discovery
    :is(#pillars, #any-source, #architecture, #evaluation, #cases)
    > div:not(.tacet-section__header) {
    max-width: var(--tacet-section-max);
    margin-inline: auto;
    padding-block: var(--tacet-section-pad-y) !important;
    padding-inline: var(--tacet-section-pad-x) !important;
  }

  .proto-saas.proto-discovery :is(#whitepaper, #replay) > .grid {
    max-width: var(--tacet-section-max);
    margin-inline: auto;
  }

  .proto-saas.proto-discovery :is(#whitepaper, #replay) > .grid > div {
    padding-block: var(--tacet-section-pad-y) !important;
    padding-inline: var(--tacet-section-pad-x) !important;
  }

  .proto-saas.proto-discovery #start > div {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: var(--tacet-section-pad-y) !important;
    padding-inline: 0 !important;
  }

  .proto-saas.proto-discovery
    :is(#pillars, #any-source, #architecture, #evaluation, #cases, #whitepaper, #replay, #start)
    h2 {
    max-width: 16ch;
    font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
    font-weight: 700 !important;
    line-height: var(--tacet-type-heading-lh) !important;
    letter-spacing: var(--tacet-type-section-track) !important;
  }

  .proto-saas.proto-discovery
    :is(#pillars, #any-source, #architecture, #evaluation, #cases, #whitepaper, #replay, #start)
    h3,
  .proto-saas.proto-discovery
    :is(#pillars, #any-source, #architecture, #evaluation, #cases, #whitepaper, #replay, #start)
    h4 {
    font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
    font-weight: 650 !important;
    line-height: var(--tacet-type-card-lh) !important;
  }

  .proto-saas.proto-discovery :is(#pillars, #any-source, #architecture, #evaluation, #cases) .grid,
  .proto-saas.proto-discovery #replay .border,
  .proto-saas.proto-discovery #whitepaper .border,
  .proto-saas.proto-discovery #start .border {
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .proto-saas.proto-byoa :is(#steps, #benefits) > div:first-child {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: var(--tacet-section-pad-y) 2rem !important;
    padding-inline: 0 !important;
    border-bottom: 0 !important;
  }

  .proto-saas.proto-byoa :is(#proof, #frameworks, #principle) > .grid {
    max-width: var(--tacet-section-max);
    margin-inline: auto;
  }

  .proto-saas.proto-byoa :is(#proof, #frameworks, #principle) > .grid > div,
  .proto-saas.proto-byoa #steps > .grid > div {
    padding-block: var(--tacet-section-pad-y) !important;
    padding-inline: var(--tacet-section-pad-x) !important;
  }

  .proto-saas.proto-byoa #steps > .grid,
  .proto-saas.proto-byoa #benefits > .grid {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
  }

  .proto-saas :is(#steps, #benefits):has(> .grid:last-child) {
    padding-block-end: var(--tacet-section-pad-y);
  }

  .proto-saas.proto-byoa #benefits > .grid + div {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: 2rem var(--tacet-section-pad-y) !important;
    padding-inline: 0 !important;
  }

  .proto-saas.proto-byoa :is(#proof, #frameworks, #principle, #steps, #benefits) h2 {
    max-width: 16ch;
    font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
    font-weight: 700 !important;
    line-height: var(--tacet-type-heading-lh) !important;
    letter-spacing: var(--tacet-type-section-track) !important;
  }

  .proto-saas.proto-byoa :is(#proof, #frameworks, #principle, #steps, #benefits) h3,
  .proto-saas.proto-byoa :is(#proof, #frameworks, #principle, #steps, #benefits) h4 {
    font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
    font-weight: 650 !important;
    line-height: var(--tacet-type-card-lh) !important;
  }

  .proto-saas.proto-byoa #proof > .grid,
  .proto-saas.proto-byoa #frameworks > .grid,
  .proto-saas.proto-byoa #principle > .grid {
    overflow: hidden;
    border-right: 1px solid var(--tacet-panel-border);
    border-left: 1px solid var(--tacet-panel-border);
  }

  .proto-saas.tacet-headless-saas-page
    :is(
      #why-now,
      #architecture,
      #real-applications,
      #agent-ecosystem,
      #old-vs-new,
      #agent-economy,
      #advantages
    )
    > div:first-child {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: var(--tacet-section-pad-y) 2rem !important;
    padding-inline: 0 !important;
  }

  .proto-saas.tacet-headless-saas-page :is(#the-idea, #agents-users, #thesis) > div > .grid {
    max-width: var(--tacet-section-max);
    margin-inline: auto;
  }

  @media (min-width: 1024px) {
    .proto-saas.tacet-headless-saas-page #thesis > div > .grid > div:first-child,
    .proto-saas.tacet-headless-saas-page #thesis > div > .grid > div:last-child {
      grid-column: span 6 / span 6 !important;
    }
  }

  .proto-saas.tacet-headless-saas-page
    :is(#the-idea, #agents-users, #agents-details, #thesis)
    > div
    > .grid
    > div {
    padding-block: var(--tacet-section-pad-y) !important;
    padding-inline: var(--tacet-section-pad-x) !important;
  }

  .proto-saas.tacet-headless-saas-page #agents-details > div > .grid > div {
    padding-top: 2rem !important;
  }

  .proto-saas.tacet-headless-saas-page :is(#why-now, #architecture) > div:nth-of-type(2),
  .proto-saas.tacet-headless-saas-page
    :is(#real-applications, #agent-ecosystem, #old-vs-new, #agent-economy, #advantages)
    > div:nth-of-type(2)
    > div,
  .proto-saas.tacet-headless-saas-page #human-vs-agent > div > div {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
  }

  .proto-saas.tacet-headless-saas-page #real-applications > div:nth-of-type(3) > div {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-inline: 0 !important;
  }

  .proto-saas.tacet-headless-saas-page #real-applications > div:nth-of-type(3) > div > div {
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border) !important;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(180deg, color-mix(in oklch, var(--darker), var(--org) 2%), var(--darker)),
      var(--darker) !important;
    box-shadow: var(--shadow-md);
  }

  .proto-saas.tacet-headless-saas-page :is(#why-now, #architecture) > div:nth-of-type(2) {
    padding-inline: 0 !important;
  }

  .proto-saas.tacet-headless-saas-page .headless-page-nav:not([data-stuck='true']) {
    width: 100%;
    padding-inline: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--tacet-panel-border);
    border-left: 0;
  }

  .proto-saas.tacet-headless-saas-page
    .headless-page-nav:not([data-stuck='true'])
    .tacet-page-nav__links {
    width: 100%;
    max-width: var(--tacet-section-max);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .proto-saas.tacet-headless-saas-page
    :is(
      #why-now,
      #agents-users,
      #agent-ecosystem,
      #old-vs-new,
      #agent-economy,
      #advantages,
      #thesis
    )
    .proto-section-eyebrow {
    display: none !important;
  }

  .proto-saas.tacet-headless-saas-page :is(#the-idea, #thesis) .lg\:col-span-4 {
    align-items: stretch !important;
    background: transparent !important;
  }

  .proto-saas.tacet-headless-saas-page :is(#the-idea, #thesis) > div > .grid > div:first-child {
    border-right: 0 !important;
  }

  .proto-saas.tacet-headless-saas-page :is(#the-idea, #thesis) blockquote {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(
        circle at 12% 10%,
        color-mix(in oklch, var(--org), transparent 90%),
        transparent 42%
      ),
      var(--surface-container);
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: var(--shadow-sm);
  }

  .proto-saas.tacet-headless-saas-page #thesis blockquote {
    justify-content: space-between;
    min-height: clamp(20rem, 38vw, 31rem);
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--org), transparent 92%), transparent 44%),
      var(--surface-container);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--shadow-sm);
  }

  .proto-saas.tacet-headless-saas-page
    :is(#the-idea, #thesis)
    blockquote
    > span[aria-hidden='true'] {
    top: 0.7rem !important;
    left: 1rem !important;
    color: var(--org-on-light) !important;
    opacity: 0.18 !important;
  }

  .proto-saas.tacet-headless-saas-page :is(#the-idea, #thesis) blockquote p {
    font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
    line-height: 1.42 !important;
  }

  .proto-saas.tacet-headless-saas-page #the-idea blockquote :is(p, cite) {
    padding-left: 1rem !important;
  }

  .proto-saas.tacet-headless-saas-page #thesis blockquote p {
    display: grid;
    gap: 0.5rem;
    max-width: min(100%, 18ch);
    font-family: var(--font-heading) !important;
    font-size: clamp(2rem, 3.35vw, 3.55rem) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: var(--tacet-type-hero-track) !important;
    line-height: 1 !important;
    padding-left: 0 !important;
    text-wrap: balance;
  }

  .proto-saas.tacet-headless-saas-page #thesis blockquote cite {
    padding-left: 0 !important;
    color: var(--org-on-light) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-headless-saas-page
    #architecture
    > div:nth-of-type(2)
    > div
    > div
    > div:first-child,
  .proto-saas.tacet-headless-saas-page
    #architecture
    [class*='grid-cols-[180px_1fr]']
    > div
    > div:first-child {
    align-items: center !important;
    gap: 0.65rem;
  }

  .proto-saas.tacet-headless-saas-page
    #architecture
    [class*='grid-cols-[180px_1fr]']
    > div
    > div:first-child
    span:first-child {
    margin-right: 0 !important;
    transform: translateY(0.03em);
  }

  .proto-saas.tacet-headless-saas-page
    #architecture
    > div:nth-of-type(2)
    > div
    > div
    > div:first-child
    span:last-child,
  .proto-saas.tacet-headless-saas-page
    #architecture
    [class*='grid-cols-[180px_1fr]']
    > div
    > div:first-child
    span:last-child {
    color: var(--foreground) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-headless-saas-page #human-vs-agent > div > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .proto-saas.tacet-headless-saas-page #human-vs-agent > div > div > div {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border) !important;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-container), var(--background) 12%),
        var(--surface-container)
      ),
      var(--surface-container);
    padding: clamp(1.25rem, 2.4vw, 2rem) !important;
    box-shadow: var(--shadow-sm);
  }

  .proto-saas.tacet-headless-saas-page #human-vs-agent h3 + ul,
  .proto-saas.tacet-headless-saas-page #human-vs-agent ul {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.5rem !important;
    padding-left: 0 !important;
    list-style: none !important;
  }

  .proto-saas.tacet-headless-saas-page #human-vs-agent h3 {
    margin-bottom: 1rem !important;
    font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
  }

  .proto-saas.tacet-headless-saas-page #human-vs-agent li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
  }

  .proto-saas.tacet-headless-saas-page #human-vs-agent li::before {
    position: absolute;
    top: 0.63em;
    left: 0;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--org-on-light), transparent 24%);
    content: '';
  }

  .proto-saas.tacet-headless-saas-page #real-applications > div:nth-of-type(2) > div {
    grid-auto-rows: 1fr;
    display: grid;
    gap: 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .proto-saas.tacet-headless-saas-page
    :is(#real-applications, #agent-ecosystem, #old-vs-new, #agent-economy, #advantages, #thesis) {
    border-bottom: 0 !important;
  }

  .proto-saas.tacet-headless-saas-page #real-applications > div:nth-of-type(2),
  .proto-saas.tacet-headless-saas-page #real-applications > div:nth-of-type(3),
  .proto-saas.tacet-headless-saas-page #agent-ecosystem > div:nth-of-type(2),
  .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2),
  .proto-saas.tacet-headless-saas-page #agent-economy > div:nth-of-type(2),
  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  .proto-saas.tacet-headless-saas-page
    :is(#agent-ecosystem, #old-vs-new, #advantages)
    > div:nth-of-type(2) {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    grid-auto-rows: 1fr;
    display: grid;
    gap: 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  @media (min-width: 1024px) {
    .proto-saas.tacet-headless-saas-page :is(#agent-ecosystem, #old-vs-new) > div:nth-of-type(2) {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1fr) !important;
    }

    .proto-saas.tacet-headless-saas-page #agent-ecosystem > div:nth-of-type(2) > div:nth-child(1),
    .proto-saas.tacet-headless-saas-page #agent-ecosystem > div:nth-of-type(2) > div:nth-child(4),
    .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2) > div:nth-child(3n + 1) {
      min-height: 18rem;
    }

    .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) {
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div {
      grid-column: span 2;
    }

    .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div:nth-child(1),
    .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div:nth-child(6),
    .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div:nth-child(9) {
      grid-column: span 3;
    }
  }

  .proto-saas.tacet-headless-saas-page #real-applications > div:nth-of-type(2) > div > div {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border) !important;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-container), var(--background) 10%),
        var(--surface-container)
      ),
      var(--surface-container);
    padding: clamp(1.25rem, 2.4vw, 2rem) !important;
    box-shadow: var(--shadow-sm);
  }

  .proto-saas.tacet-headless-saas-page
    :is(#agent-ecosystem, #old-vs-new, #advantages)
    > div:nth-of-type(2)
    > div {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border) !important;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--surface-container), var(--background) 10%),
        var(--surface-container)
      ),
      var(--surface-container);
    padding: clamp(1.25rem, 2.4vw, 2rem) !important;
    box-shadow: var(--shadow-sm);
  }

  .proto-saas.tacet-headless-saas-page
    #real-applications
    > div:nth-of-type(2)
    > div
    > div
    > span:first-child {
    display: inline-flex !important;
    width: fit-content;
    align-items: center;
    border: 1px solid color-mix(in oklch, var(--org-on-light), transparent 72%);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--org), transparent 92%);
    padding: 0.3rem 0.65rem;
    color: var(--org-on-light) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-headless-saas-page
    :is(#agent-ecosystem, #old-vs-new, #advantages)
    > div:nth-of-type(2)
    > div
    > span:first-child {
    display: inline-flex !important;
    width: fit-content;
    align-items: center;
    border: 1px solid color-mix(in oklch, var(--org-on-light), transparent 72%);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--org), transparent 92%);
    padding: 0.3rem 0.65rem;
    color: var(--org-on-light) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-headless-saas-page
    :is(#old-vs-new, #advantages)
    > div:nth-of-type(2)
    > div:nth-child(3n) {
    background:
      radial-gradient(
        circle at 16% 0%,
        color-mix(in oklch, var(--org), transparent 88%),
        transparent 42%
      ),
      color-mix(in oklch, var(--surface-container), var(--background) 16%);
  }

  .proto-saas.tacet-headless-saas-page
    :is(#real-applications, #agent-ecosystem, #old-vs-new, #advantages)
    > div:nth-of-type(2)
    h3 {
    margin-top: 0.85rem !important;
    margin-bottom: 0.75rem !important;
    max-width: 24ch;
    font-size: clamp(1rem, 1.45vw, 1.2rem) !important;
  }

  .proto-saas.tacet-headless-saas-page
    :is(#agent-ecosystem, #old-vs-new, #advantages)
    > div:nth-of-type(2)
    h3 {
    margin-top: 0.85rem !important;
    margin-bottom: 0.75rem !important;
    font-size: clamp(1rem, 1.45vw, 1.2rem) !important;
  }

  .proto-saas.tacet-headless-saas-page
    :is(#real-applications, #agent-ecosystem, #old-vs-new, #advantages)
    > div:nth-of-type(2)
    p {
    max-width: 58ch;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
  }

  .proto-saas.tacet-headless-saas-page
    :is(#agent-ecosystem, #old-vs-new, #advantages)
    > div:nth-of-type(2)
    p {
    max-width: 58ch;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
  }

  .proto-saas.tacet-headless-saas-page #real-applications > div:nth-of-type(3) pre {
    max-height: 34rem;
    font-size: 0.8125rem !important;
    line-height: 1.65 !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy > div:nth-of-type(2) h3 {
    font-size: clamp(1rem, 1.45vw, 1.2rem) !important;
  }

  /* Headless section redesigns: directory, ledger, timeline rail, and capability index. */
  .proto-saas.tacet-headless-saas-page #agent-ecosystem > div:nth-of-type(2),
  .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2),
  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) {
    row-gap: 0;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }

  .proto-saas.tacet-headless-saas-page #agent-ecosystem > div:nth-of-type(2) > div,
  .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2) > div,
  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div {
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-ecosystem > div:nth-of-type(2) {
    grid-template-columns: minmax(0, 1fr) !important;
    border-top: 1px solid var(--tacet-panel-border) !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-ecosystem > div:nth-of-type(2) > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.28fr) minmax(12rem, 0.42fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(1.25rem, 2.4vw, 2rem) 0 !important;
    border-bottom: 1px solid var(--tacet-panel-border) !important;
  }

  .proto-saas.tacet-headless-saas-page
    #agent-ecosystem
    > div:nth-of-type(2)
    > div
    > span:first-child {
    display: inline-flex !important;
    align-items: center;
    width: auto;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.15rem 0 0 !important;
    color: var(--org-on-light) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-ecosystem > div:nth-of-type(2) h3 {
    margin: 0 !important;
    max-width: 18ch;
    font-size: clamp(1rem, 1.3vw, 1.18rem) !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-ecosystem > div:nth-of-type(2) p {
    max-width: 70ch;
    margin: 0 !important;
  }

  .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2) {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.15fr) !important;
    grid-auto-rows: auto;
    gap: 0;
    overflow: hidden;
    border-top: 2px solid var(--tacet-panel-border) !important;
    border-right: 1px solid var(--tacet-panel-border) !important;
    border-left: 1px solid var(--tacet-panel-border) !important;
  }

  .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2) > div {
    position: relative;
    display: grid;
    align-content: start;
    width: 100%;
    padding: clamp(1.15rem, 2vw, 1.55rem) clamp(1rem, 2vw, 1.75rem) !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2) > div::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: color-mix(in oklch, var(--tacet-panel-border), transparent 6%);
    content: '';
  }

  .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2) > div:nth-child(3n + 2) {
    background: color-mix(in oklch, var(--background), var(--org) 7%) !important;
    border-inline: 1px solid var(--tacet-panel-border) !important;
  }

  .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2) > div > span:first-child,
  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div > span:first-child {
    display: inline-flex !important;
    width: fit-content;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--org-on-light) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2) h3 {
    margin-top: 0.7rem !important;
    margin-bottom: 0.5rem !important;
  }

  .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2) p {
    max-width: 42ch;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy > div:nth-of-type(2) {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy > div:nth-of-type(2) > div {
    position: relative;
    grid-template-columns: minmax(7rem, 0.25fr) minmax(0, 1fr);
    border: 0 !important;
    background: transparent !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy > div:nth-of-type(2) > div + div {
    border-top: 1px solid var(--tacet-panel-border) !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy > div:nth-of-type(2) > div > div:first-child {
    align-items: flex-start;
    border-right: 0 !important;
    background: transparent !important;
    padding-block: clamp(1.5rem, 2.6vw, 2.25rem) !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy > div:nth-of-type(2) > div > div:last-child {
    border-left: 1px solid var(--tacet-panel-border);
    padding-block: clamp(1.5rem, 2.6vw, 2.25rem) !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy > div:nth-of-type(2) span {
    color: var(--org-on-light) !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy > div:nth-of-type(2) p {
    max-width: 78ch;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy .headless-packet-quote-shell {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
    border: 0 !important;
    padding: 0 !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy .headless-packet-quote--timeline {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100% !important;
    max-width: none !important;
    border: var(--border-width-base) solid var(--border);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--org), transparent 92%), transparent 48%),
      var(--surface-container);
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    box-shadow: var(--shadow-sm);
  }

  .proto-saas.tacet-headless-saas-page
    #agent-economy
    .headless-packet-quote--timeline
    > span[aria-hidden='true'] {
    display: block;
    top: var(--space-2) !important;
    left: var(--space-4) !important;
    color: var(--org-on-light) !important;
    font-size: clamp(3.75rem, 7vw, 5rem) !important;
    opacity: 0.18 !important;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy .headless-packet-quote--timeline p {
    display: grid;
    gap: 0.35rem;
    max-width: 22ch;
    padding-left: 0 !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(2rem, 3.2vw, 3.25rem) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: var(--tacet-type-hero-track) !important;
    line-height: 1 !important;
    text-wrap: balance;
  }

  .proto-saas.tacet-headless-saas-page #agent-economy .headless-packet-quote--timeline cite {
    margin-top: 1rem !important;
    padding-left: 0 !important;
    color: var(--org-on-light) !important;
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border) !important;
    background: transparent !important;
  }

  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div {
    display: grid;
    position: relative;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0.45rem clamp(0.9rem, 1.5vw, 1.25rem);
    grid-column: auto !important;
    min-height: clamp(11.5rem, 18vw, 15rem);
    padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.5rem) !important;
    border-bottom: 1px solid var(--tacet-panel-border) !important;
    border-right: 1px solid var(--tacet-panel-border) !important;
  }

  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div:first-child {
    background: transparent !important;
  }

  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div:nth-child(3n) {
    border-right: 0 !important;
  }

  .proto-saas.tacet-headless-saas-page
    #advantages
    > div:nth-of-type(2)
    > div:nth-last-child(-n + 3) {
    border-bottom: 0 !important;
  }

  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div > span:first-child {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 86%);
    color: var(--org-on-light) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    line-height: 1;
  }

  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) h3 {
    margin: 0 !important;
    max-width: none;
    font-size: clamp(1.1rem, 1.35vw, 1.45rem) !important;
    letter-spacing: 0 !important;
    line-height: 0.95 !important;
  }

  .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) p {
    max-width: 38ch;
    margin: 0 !important;
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
    line-height: 1.5 !important;
  }

  @media (max-width: 767px) {
    .proto-saas.tacet-headless-saas-page #human-vs-agent > div > div {
      grid-template-columns: 1fr;
    }

    .proto-saas.tacet-headless-saas-page #agent-ecosystem > div:nth-of-type(2) > div,
    .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2),
    .proto-saas.tacet-headless-saas-page #agent-economy > div:nth-of-type(2) > div,
    .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) {
      grid-template-columns: 1fr !important;
    }

    .proto-saas.tacet-headless-saas-page #old-vs-new > div:nth-of-type(2) > div:nth-child(3n + 2),
    .proto-saas.tacet-headless-saas-page
      #agent-economy
      > div:nth-of-type(2)
      > div
      > div:last-child {
      border-inline: 0 !important;
      border-left: 0 !important;
    }

    .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div {
      grid-template-columns: 2.5rem minmax(0, 1fr);
      min-height: 0;
      border-right: 0 !important;
    }

    .proto-saas.tacet-headless-saas-page
      #advantages
      > div:nth-of-type(2)
      > div:nth-last-child(-n + 3) {
      border-bottom: 1px solid var(--tacet-panel-border) !important;
    }

    .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div:last-child {
      border-bottom: 0 !important;
    }

    .proto-saas.tacet-headless-saas-page #advantages > div:nth-of-type(2) > div > span:first-child {
      width: 2.5rem;
      height: 2.5rem;
    }

    .proto-saas.tacet-headless-saas-page #agent-economy .headless-packet-quote--timeline p {
      max-width: 18ch;
    }
  }

  .proto-saas.tacet-headless-saas-page
    :is(
      #the-idea,
      #why-now,
      #architecture,
      #agents-users,
      #real-applications,
      #agent-ecosystem,
      #old-vs-new,
      #agent-economy,
      #advantages,
      #thesis
    )
    h2 {
    max-width: 18ch;
    font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
    font-weight: 700 !important;
    line-height: var(--tacet-type-heading-lh) !important;
    letter-spacing: var(--tacet-type-section-track) !important;
  }

  .proto-saas.tacet-headless-saas-page
    :is(
      #why-now,
      #architecture,
      #human-vs-agent,
      #real-applications,
      #agent-ecosystem,
      #old-vs-new,
      #agent-economy,
      #advantages
    )
    h3 {
    font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
    font-weight: 650 !important;
    line-height: var(--tacet-type-card-lh) !important;
  }

  /* -- Startups Tacet presentation --------------------------------------- */
  .proto-saas.tacet-startups-page .erpai-hero h1 {
    max-width: 15ch;
  }

  .proto-saas.tacet-startups-page .erpai-hero p {
    max-width: 48ch !important;
  }

  .proto-saas.tacet-startups-page .uppercase {
    text-transform: none !important;
  }

  .proto-saas.tacet-startups-page .startups-page-nav:not([data-stuck='true']) {
    width: 100%;
    padding-inline: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--tacet-panel-border);
    border-left: 0;
  }

  .proto-saas.tacet-startups-page
    .startups-page-nav:not([data-stuck='true'])
    .tacet-page-nav__links {
    width: 100%;
    max-width: var(--tacet-section-max);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .tacet-startups-page .startup-section,
  .tacet-section {
    border-bottom: 0 !important;
    background: transparent;
  }

  /* -- Full-bleed shaded section surfaces ------------------------------- */
  .tacet-section--shaded {
    --tacet-section-shade: var(--darker);

    position: relative;
    isolation: isolate;
    background: transparent !important;
  }

  .tacet-section--shaded::before {
    content: '';
    position: absolute;
    inset-block: 0;
    right: calc(50% - 50vw);
    left: calc(50% - 50vw);
    z-index: -1;
    background: var(--tacet-section-shade);
    pointer-events: none;
  }

  .tacet-startups-page .startup-section__header,
  .tacet-section__header {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: var(--tacet-section-pad-y) 2rem;
    padding-inline: 0 !important;
  }

  .tacet-startups-page .startup-section__header h2,
  .tacet-startups-page .startup-eligibility__story h2,
  .tacet-section__header h2,
  .tacet-eligibility__story h2 {
    max-width: 18ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    font-weight: 700;
    letter-spacing: var(--tacet-type-section-track);
    line-height: var(--tacet-type-heading-lh);
    text-wrap: balance;
    text-transform: none;
  }

  .tacet-startups-page .startup-section__header p,
  .tacet-startups-page .startup-eligibility__story p,
  .tacet-section__header p,
  .tacet-eligibility__story p {
    max-width: 64ch;
    margin: 1rem 0 0;
    color: var(--text-m);
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.62;
  }

  .tacet-startups-page .startup-eligibility,
  .tacet-eligibility {
    display: grid;
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    gap: clamp(1.5rem, 3vw, 2.25rem);
    margin-inline: auto;
    padding-block: var(--tacet-section-pad-y);
  }

  .tacet-startups-page .startup-eligibility__story,
  .tacet-eligibility__story {
    display: grid;
    grid-template-columns: minmax(0, 0.52fr) minmax(20rem, 0.48fr);
    gap: clamp(1.25rem, 4vw, 4rem);
    align-items: end;
  }

  .tacet-startups-page .startup-eligibility__summary,
  .tacet-eligibility__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
    background: var(--tacet-page-bg);
  }

  .tacet-startups-page .startup-eligibility__summary div,
  .tacet-eligibility__summary div {
    display: grid;
    gap: 0.4rem;
    padding: 1rem;
  }

  .tacet-startups-page .startup-eligibility__summary div + div,
  .tacet-eligibility__summary div + div {
    border-left: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-eligibility__summary dt,
  .tacet-eligibility__summary dt {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  .tacet-startups-page .startup-eligibility__summary dd,
  .tacet-eligibility__summary dd {
    margin: 0;
    color: var(--org-on-light);
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 700;
    line-height: 1.1;
  }

  .tacet-startups-page .startup-eligibility__matrix,
  .tacet-eligibility__matrix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
    background: var(--tacet-page-bg);
    box-shadow: var(--shadow-sm);
  }

  .tacet-startups-page .startup-eligibility__column,
  .tacet-eligibility__column {
    min-width: 0;
  }

  .tacet-startups-page .startup-eligibility__column + .startup-eligibility__column,
  .tacet-eligibility__column + .tacet-eligibility__column {
    border-left: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-eligibility__column h3,
  .tacet-eligibility__column h3 {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 1rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    color: var(--foreground);
    font-size: 0.92rem;
    font-weight: 700;
  }

  .tacet-startups-page .startup-eligibility__column--yes h3,
  .tacet-eligibility__column--yes h3 {
    color: var(--grn-on-light);
  }

  .tacet-startups-page .startup-eligibility__column--no h3,
  .tacet-eligibility__column--no h3 {
    color: var(--org-on-light);
  }

  .tacet-startups-page .startup-eligibility__column ul,
  .tacet-eligibility__column ul {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tacet-startups-page .startup-eligibility__column li,
  .tacet-eligibility__column li {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border-bottom: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-eligibility__column li:last-child,
  .tacet-eligibility__column li:last-child {
    border-bottom: 0;
  }

  .tacet-startups-page .startup-eligibility__column strong,
  .tacet-eligibility__column strong {
    color: var(--foreground);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.28;
  }

  .tacet-startups-page .startup-eligibility__column span,
  .tacet-eligibility__column span {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.55;
  }

  .tacet-startups-page .startup-verification-ledger,
  .tacet-startups-page .startup-tier-rail,
  .tacet-startups-page .startup-scenario-table,
  .tacet-startups-page .startup-apply-timeline,
  .tacet-ledger,
  .tacet-rail,
  .tacet-scenario-table,
  .tacet-timeline {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
  }

  .tacet-section:has(
    > :is(
        .tacet-ledger,
        .tacet-rail,
        .tacet-scenario-table,
        .tacet-timeline,
        .startup-verification-ledger,
        .startup-tier-rail,
        .startup-scenario-table,
        .startup-apply-timeline
      ):last-child
  ) {
    padding-block-end: var(--tacet-section-pad-y);
  }

  .tacet-startups-page .startup-verification-ledger,
  .tacet-ledger {
    display: grid;
    border-top: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-verification-ledger__row,
  .tacet-ledger__row {
    display: grid;
    grid-template-columns: minmax(7rem, 0.18fr) minmax(12rem, 0.28fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2.5rem);
    padding: clamp(1.2rem, 2.4vw, 1.8rem) 0;
    border-bottom: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-verification-ledger__row > span,
  .tacet-startups-page .startup-tier-rail__flag,
  .tacet-startups-page .startup-apply-timeline__step > span,
  .tacet-ledger__row > span,
  .tacet-rail__flag,
  .tacet-timeline__step > span {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
  }

  .tacet-startups-page .startup-verification-ledger h3,
  .tacet-startups-page .startup-tier-rail header span,
  .tacet-startups-page .startup-scenario-table h3,
  .tacet-startups-page .startup-apply-timeline h3,
  .tacet-ledger h3,
  .tacet-rail header span,
  .tacet-scenario-table h3,
  .tacet-timeline h3 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    font-weight: 680;
    letter-spacing: var(--tacet-type-card-track);
    line-height: var(--tacet-type-card-lh);
  }

  .tacet-startups-page .startup-verification-ledger p,
  .tacet-startups-page .startup-apply-timeline p,
  .tacet-ledger p,
  .tacet-timeline p {
    max-width: 68ch;
    margin: 0;
    color: var(--text-m);
    font-size: 0.94rem;
    line-height: 1.55;
  }

  .tacet-startups-page .startup-tier-rail,
  .tacet-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
    background: var(--surface-container);
    box-shadow: var(--shadow-sm);
  }

  .tacet-startups-page .startup-tier-rail__item,
  .tacet-rail__item {
    position: relative;
    display: grid;
    gap: 0.9rem;
    align-content: start;
    min-height: 100%;
    padding: clamp(1.25rem, 2.5vw, 2rem);
  }

  .tacet-startups-page .startup-tier-rail__item + .startup-tier-rail__item,
  .tacet-rail__item + .tacet-rail__item {
    border-left: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-tier-rail__item--featured,
  .tacet-rail__item--featured {
    background: color-mix(in oklch, var(--surface-container), var(--org) 5%);
  }

  .tacet-startups-page .startup-tier-rail header,
  .tacet-rail header {
    display: grid;
    gap: 0.45rem;
    min-height: 3.65rem;
  }

  .tacet-startups-page .startup-tier-rail small,
  .tacet-startups-page .startup-tier-rail em,
  .tacet-startups-page .startup-scenario-table em,
  .tacet-rail small,
  .tacet-rail em,
  .tacet-scenario-table em {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
  }

  .tacet-startups-page .startup-tier-rail__item > strong,
  .tacet-startups-page .startup-scenario-table strong,
  .tacet-rail__item > strong,
  .tacet-scenario-table strong {
    color: var(--org-on-light);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    font-weight: 740;
    letter-spacing: -0.025em;
    line-height: 0.95;
  }

  .tacet-startups-page .startup-tier-rail ul,
  .tacet-rail ul {
    display: grid;
    gap: 0.7rem;
    margin: 0.35rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--tacet-panel-border);
    list-style: none;
  }

  .tacet-startups-page .startup-tier-rail li,
  .tacet-rail li {
    position: relative;
    padding-left: 1rem;
    color: var(--text-m);
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .tacet-startups-page .startup-tier-rail li::before,
  .tacet-rail li::before {
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: var(--radius-full);
    background: var(--org-on-light);
    content: '';
  }

  .tacet-startups-page .startup-scenario-table,
  .tacet-scenario-table {
    display: grid;
    border-top: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-scenario-table__row,
  .tacet-scenario-table__row {
    display: grid;
    grid-template-columns: minmax(11rem, 0.28fr) minmax(11rem, 0.24fr) minmax(0, 0.48fr);
    gap: clamp(1rem, 2.5vw, 2.5rem);
    align-items: start;
    padding: clamp(1.25rem, 2.4vw, 2rem) 0;
    border-bottom: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-scenario-table__row > div:first-child > span,
  .tacet-scenario-table__row > div:first-child > span {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
  }

  .tacet-startups-page .startup-scenario-table dl,
  .tacet-scenario-table dl {
    display: grid;
    gap: 0.55rem;
    margin: 0;
  }

  .tacet-startups-page .startup-scenario-table dl div,
  .tacet-scenario-table dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in oklch, var(--border), transparent 36%);
    padding-bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }

  .tacet-startups-page .startup-scenario-table dl div:last-child,
  .tacet-scenario-table dl div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .tacet-startups-page .startup-scenario-table dt,
  .tacet-scenario-table dt {
    color: var(--text-m);
  }

  .tacet-startups-page .startup-scenario-table dd,
  .tacet-scenario-table dd {
    margin: 0;
    color: var(--foreground);
    font-weight: 700;
  }

  .tacet-startups-page .startup-section__note,
  .tacet-section__note {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin: 0 auto;
    padding-block: 1.25rem var(--tacet-section-pad-y);
  }

  .tacet-startups-page .startup-section__note p,
  .tacet-section__note p {
    max-width: 78ch;
    margin: 0;
    color: var(--text-m);
    font-size: 0.92rem;
    line-height: 1.58;
  }

  .tacet-startups-page .startup-apply-timeline,
  .tacet-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-apply-timeline__step,
  .tacet-timeline__step {
    position: relative;
    display: grid;
    gap: 0.8rem;
    align-content: start;
    padding: clamp(1.25rem, 2.3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-apply-timeline__step + .startup-apply-timeline__step,
  .tacet-timeline__step + .tacet-timeline__step {
    border-left: 1px solid var(--tacet-panel-border);
  }

  .tacet-startups-page .startup-apply-timeline__step strong,
  .tacet-timeline__step strong {
    width: fit-content;
    margin-top: 0.25rem;
    border: 1px solid color-mix(in oklch, var(--org-on-light), transparent 72%);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--org), transparent 92%);
    padding: 0.3rem 0.65rem;
    color: var(--org-on-light);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
  }

  .tacet-startups-page #faq {
    border-bottom: 0 !important;
  }

  .tacet-startups-page .proto-cta {
    padding-block-start: var(--tacet-section-pad-y) !important;
  }

  .tacet-startups-page .proto-cta--left .proto-cta__trace-row--head span {
    letter-spacing: 0;
    text-transform: none;
  }

  @media (max-width: 1023px) {
    .tacet-startups-page .startup-eligibility__story,
    .tacet-eligibility__story {
      grid-template-columns: 1fr;
    }

    .tacet-startups-page .startup-tier-rail,
    .tacet-startups-page .startup-apply-timeline,
    .tacet-rail,
    .tacet-timeline {
      grid-template-columns: 1fr;
    }

    .tacet-startups-page .startup-tier-rail__item + .startup-tier-rail__item,
    .tacet-startups-page .startup-apply-timeline__step + .startup-apply-timeline__step,
    .tacet-rail__item + .tacet-rail__item,
    .tacet-timeline__step + .tacet-timeline__step {
      border-left: 0;
      border-top: 1px solid var(--tacet-panel-border);
    }

    .tacet-startups-page .startup-scenario-table__row,
    .tacet-scenario-table__row {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 767px) {
    .tacet-startups-page .startup-section__header,
    .tacet-startups-page .startup-eligibility,
    .tacet-startups-page .startup-verification-ledger,
    .tacet-startups-page .startup-tier-rail,
    .tacet-startups-page .startup-scenario-table,
    .tacet-startups-page .startup-apply-timeline,
    .tacet-startups-page .startup-section__note,
    .tacet-section__header,
    .tacet-eligibility,
    .tacet-ledger,
    .tacet-rail,
    .tacet-scenario-table,
    .tacet-timeline,
    .tacet-section__note {
      width: min(calc(100% - 2rem), calc(var(--tacet-section-max) - 2rem));
    }

    .tacet-startups-page .startup-eligibility__matrix,
    .tacet-startups-page .startup-eligibility__summary,
    .tacet-startups-page .startup-verification-ledger__row,
    .tacet-eligibility__matrix,
    .tacet-eligibility__summary,
    .tacet-ledger__row {
      grid-template-columns: 1fr;
    }

    .tacet-startups-page .startup-eligibility__summary div + div,
    .tacet-eligibility__summary div + div {
      border-top: 1px solid var(--tacet-panel-border);
      border-left: 0;
    }

    .tacet-startups-page .startup-eligibility__column + .startup-eligibility__column,
    .tacet-eligibility__column + .tacet-eligibility__column {
      border-top: 1px solid var(--tacet-panel-border);
      border-left: 0;
    }
  }

  .proto-saas .proto-signature-artifact {
    --tacet-packet-ink: var(--foreground);
    --tacet-packet-surface: color-mix(in oklch, var(--darker), var(--org) 2%);
    --tacet-packet-line: color-mix(in oklch, var(--border), var(--org) 12%);
    --tacet-packet-cell: color-mix(in oklch, var(--background), transparent 52%);

    position: relative;
    overflow: hidden;
    min-height: 100svh;
    display: grid;
    align-items: center;
    color: var(--tacet-packet-ink);
    background: var(--tacet-packet-surface);
    background-color: var(--tacet-packet-surface) !important;
  }

  .proto-saas .proto-signature-artifact::before {
    content: none;
  }

  .proto-saas .proto-signature-artifact::after {
    content: none;
  }

  .proto-signature-artifact__shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(1.75rem, 3vw, 2.75rem);
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: clamp(4.25rem, 8vw, 6.25rem);
  }

  .proto-signature-artifact__story h2 {
    max-width: 18ch;
    margin: 0;
    color: var(--tacet-packet-ink) !important;
    font-family: var(--font-heading);
    font-size: clamp(2.15rem, 3.55vw, 3.65rem);
    font-weight: 700;
    letter-spacing: -0.016em !important;
    line-height: 1.04 !important;
    text-wrap: balance;
  }

  .proto-signature-artifact__story p {
    max-width: 66ch;
    margin: clamp(1.15rem, 2vw, 1.6rem) 0 0;
    color: color-mix(in oklch, var(--tacet-packet-ink), transparent 30%);
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.68;
  }

  .proto-signature-artifact .proto-section-eyebrow__name {
    color: var(--tacet-packet-ink);
  }

  .proto-signature-artifact .proto-section-eyebrow__context {
    color: color-mix(in oklch, var(--tacet-packet-ink), transparent 44%);
  }

  .proto-signature-artifact__object {
    position: relative;
  }

  .proto-signature-artifact__object::before {
    content: none;
  }

  .proto-packet-card {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in oklch, var(--tacet-packet-ink), transparent 78%);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--tacet-packet-cell), transparent 22%);
    box-shadow: inset 0 1px 0 color-mix(in oklch, var(--tacet-packet-ink), transparent 78%);
  }

  .proto-packet-card::before {
    content: none;
  }

  .proto-packet-card--proto::before {
    content: none;
  }

  .proto-packet-card--discovery::before {
    content: none;
  }

  .proto-packet-card--byoa::before {
    content: none;
  }

  .proto-packet-card--startup::before {
    content: none;
  }

  .proto-packet-card--enterprise::before {
    content: none;
  }

  .proto-packet-card--managed::before {
    content: none;
  }

  .proto-packet-card--version::before {
    content: none;
  }

  .proto-packet-card--pricing::before {
    content: none;
  }

  .proto-packet-card__header {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.125rem;
    border-bottom: 1px solid color-mix(in oklch, var(--tacet-packet-ink), transparent 82%);
    color: color-mix(in oklch, var(--tacet-packet-ink), transparent 38%);
    font-size: 0.8125rem;
    font-weight: 650;
  }

  .proto-packet-card__header strong {
    color: var(--org);
    font-weight: 700;
  }

  .proto-packet-card__body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(20rem, 0.88fr) minmax(0, 1.12fr);
    padding: 0;
  }

  .proto-packet-card__hero {
    display: grid;
    gap: 0.35rem;
    min-height: clamp(15rem, 26vw, 22rem);
    align-content: center;
    padding: clamp(1.4rem, 3.4vw, 2.5rem);
    border-right: 1px solid color-mix(in oklch, var(--tacet-packet-ink), transparent 82%);
    background: color-mix(in oklch, var(--tacet-packet-cell), transparent 34%);
  }

  .proto-packet-card__hero span {
    color: color-mix(in oklch, var(--tacet-packet-ink), transparent 34%);
    font-size: 0.875rem;
    font-weight: 620;
  }

  .proto-packet-card__hero strong {
    max-width: 17ch;
    color: var(--tacet-packet-ink);
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.1vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .proto-packet-card__grid {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    margin: 0;
    overflow: hidden;
    border: 0;
  }

  .proto-packet-card__grid span {
    display: grid;
    gap: 0.25rem;
    min-height: clamp(7.5rem, 13vw, 11rem);
    align-content: center;
    padding: clamp(1rem, 2.2vw, 1.5rem);
    border-right: 1px solid color-mix(in oklch, var(--tacet-packet-ink), transparent 84%);
    border-bottom: 1px solid color-mix(in oklch, var(--tacet-packet-ink), transparent 84%);
    color: color-mix(in oklch, var(--tacet-packet-ink), transparent 42%);
    font-size: 0.78rem;
    font-weight: 560;
    line-height: 1.25;
  }

  .proto-packet-card__grid span:nth-child(2n),
  .proto-packet-card__grid span:last-child {
    border-right: 0;
  }

  .proto-packet-card__grid span:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .proto-packet-card__grid strong {
    color: var(--tacet-packet-ink);
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    font-weight: 740;
    line-height: 1;
  }

  .proto-packet-card__timeline {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid color-mix(in oklch, var(--tacet-packet-ink), transparent 82%);
    list-style: none;
  }

  .proto-packet-card__timeline li {
    display: flex;
    min-height: 4.6rem;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem clamp(1rem, 2vw, 1.35rem);
    border-right: 1px solid color-mix(in oklch, var(--tacet-packet-ink), transparent 84%);
    color: color-mix(in oklch, var(--tacet-packet-ink), transparent 15%);
    font-size: 0.875rem;
    font-weight: 620;
    background: transparent;
  }

  .proto-packet-card__timeline li:last-child {
    border-right: 0;
  }

  .proto-packet-card__timeline li::before {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--grn);
    box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--grn), transparent 82%);
    content: '';
  }

  .proto-packet-card__timeline li[data-state='hold']::before {
    background: var(--org);
    box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--org), transparent 82%);
  }

  .proto-packet-card--discovery .proto-packet-card__hero strong,
  .proto-packet-card--byoa .proto-packet-card__hero strong {
    max-width: 16ch;
  }

  .proto-packet-card--byoa .proto-packet-card__hero strong {
    font-size: clamp(1.8rem, 2.85vw, 2.9rem);
  }

  .proto-packet-card--startup .proto-packet-card__hero strong {
    max-width: 13ch;
    font-size: clamp(2.2rem, 4.2vw, 4.9rem);
    letter-spacing: -0.035em;
  }

  @media (max-width: 64rem) {
    .proto-signature-artifact__shell {
      padding-block: 4rem;
    }

    .proto-packet-card__body {
      grid-template-columns: 1fr;
    }

    .proto-packet-card__hero {
      min-height: 16rem;
      border-right: 0;
      border-bottom: 1px solid color-mix(in oklch, var(--tacet-packet-ink), transparent 82%);
    }

    .proto-packet-card__grid {
      grid-column: auto;
      grid-row: auto;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .proto-packet-card__grid span:nth-child(2n) {
      border-right: 0;
    }

    .proto-packet-card__grid span:nth-child(-n + 2) {
      border-bottom: 1px solid color-mix(in oklch, var(--tacet-packet-ink), transparent 84%);
    }

    .proto-packet-card__timeline {
      grid-template-columns: 1fr;
    }

    .proto-packet-card__timeline li {
      border-right: 0;
      border-bottom: 1px solid color-mix(in oklch, var(--tacet-packet-ink), transparent 84%);
    }

    .proto-packet-card__timeline li:last-child {
      border-bottom: 0;
    }
  }

  /* Pricing Tacet page ----------------------------------------------------- */
  .proto-saas.tacet-pricing-page {
    --red: var(--org);
    --red-on-light: var(--org-on-light);
    --tacet-pricing-text-label: var(--fs-xs);
    --tacet-pricing-text-compact: var(--fs-btn);
    --tacet-pricing-text-body: var(--fs-body);
    --tacet-pricing-weight-medium: 500;
    --tacet-pricing-weight-semibold: 600;
    --tacet-pricing-weight-bold: 700;
  }

  .proto-saas.tacet-pricing-page :where(section, span)[id] {
    scroll-margin-top: calc(var(--chrome-height) + var(--space-6));
  }

  .proto-saas.tacet-pricing-page section h2,
  .proto-saas.tacet-pricing-page section h3 {
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-pricing-page section p {
    text-wrap: pretty;
  }

  .tacet-pricing-flow {
    background: var(--background);
  }

  .tacet-pricing-stage {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: clamp(4.5rem, 9vw, 8rem);
  }

  .tacet-pricing-stage--payg {
    padding-top: 0;
  }

  .tacet-pricing-stage + .tacet-pricing-stage {
    border-top: 1px solid var(--border);
  }

  .tacet-pricing-stage__header {
    display: block;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  }

  .tacet-pricing-stage__label {
    margin: 0 0 var(--space-3);
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-compact);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 1.35;
  }

  .tacet-pricing-stage--free > .tacet-pricing-stage__header .tacet-pricing-stage__label {
    color: var(--grn-on-light);
  }

  .tacet-pricing-stage__intro--payg .tacet-pricing-stage__label {
    color: var(--org-on-light);
  }

  .tacet-pricing-stage__header h2,
  .tacet-pricing-editorial-head h2 {
    max-width: 20ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 5.2rem);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 0.94;
  }

  .tacet-pricing-stage__header > div > p:last-child,
  .tacet-pricing-editorial-head > p {
    max-width: 64ch;
    margin: var(--space-6) 0 0;
    color: var(--text-m);
    font-size: clamp(var(--fs-body), 1.25vw, var(--fs-subhead));
    line-height: 1.65;
  }

  .tacet-pricing-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--border);
    border-bottom: 2px solid var(--border-strong);
    background: var(--card);
  }

  .tacet-pricing-summary > div {
    min-height: 8rem;
    padding: clamp(var(--space-4), 2vw, var(--space-6));
    border-right: 1px solid var(--border);
  }

  .tacet-pricing-summary > div:last-child {
    border-right: 0;
  }

  .tacet-pricing-summary dt,
  .tacet-pricing-assumption-ledger dt {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
    line-height: 1.35;
  }

  .tacet-pricing-summary dd {
    margin: 1.5rem 0 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    font-weight: var(--tacet-pricing-weight-bold);
    letter-spacing: 0;
    line-height: 1;
  }

  .tacet-pricing-stage__intro--payg {
    position: relative;
    isolation: isolate;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6rem);
  }

  .tacet-pricing-stage__intro--payg::before {
    content: '';
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    background:
      linear-gradient(
        90deg,
        color-mix(in oklch, var(--darker), transparent 0%),
        color-mix(in oklch, var(--red-on-light), transparent 94%)
      ),
      var(--darker);
    pointer-events: none;
  }

  .tacet-pricing-stage__intro--payg > .tacet-pricing-summary {
    border-bottom-color: var(--org-on-light);
    background: color-mix(in oklch, var(--card), transparent 16%);
  }

  .tacet-pricing-stage--free > .tacet-pricing-summary {
    border-bottom-color: var(--grn-on-light);
  }

  .tacet-pricing-table-title {
    margin: 0 0 var(--space-6);
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.8vw, 2.6rem);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 1;
  }

  .tacet-pricing-topic {
    margin-top: clamp(3.5rem, 8vw, 7rem);
    padding-top: clamp(3rem, 6vw, 5.5rem);
    border-top: 1px solid var(--border);
  }

  .tacet-pricing-topic__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.72fr);
    align-items: end;
    gap: clamp(1.5rem, 5vw, 5rem);
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }

  .tacet-pricing-topic .proto-section-eyebrow {
    margin: 0 0 1rem;
  }

  .tacet-pricing-topic__head h3 {
    max-width: 18ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 4.1rem);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 0.98;
    text-wrap: balance;
  }

  .tacet-pricing-topic__copy p {
    max-width: 62ch;
    margin: 0;
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-body);
    line-height: 1.65;
  }

  .tacet-pricing-topic__copy p + p {
    margin-top: var(--space-3);
  }

  .tacet-pricing-topic__copy code {
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.92em;
    font-weight: var(--tacet-pricing-weight-semibold);
    overflow-wrap: anywhere;
  }

  .tacet-pricing-comparison,
  .tacet-pricing-profile-ledger {
    border-top: 1px solid var(--border);
  }

  .tacet-pricing-comparison__row {
    display: grid;
    grid-template-columns: minmax(9rem, 0.58fr) repeat(2, minmax(14rem, 1fr));
    border-bottom: 1px solid var(--border);
  }

  .tacet-pricing-comparison__row > * {
    display: flex;
    min-width: 0;
    align-items: center;
    margin: 0;
    padding: var(--space-4) clamp(var(--space-3), 2vw, var(--space-4));
    border-right: 1px solid var(--border);
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-compact);
    line-height: 1.5;
  }

  .tacet-pricing-comparison__row > *:last-child {
    border-right: 0;
    background: color-mix(in oklch, var(--org-on-light), transparent 96%);
    color: var(--foreground);
  }

  .tacet-pricing-comparison__row > strong {
    color: var(--foreground);
    font-weight: var(--tacet-pricing-weight-bold);
  }

  .tacet-pricing-comparison__row--summary > * {
    align-items: start;
    padding-block: clamp(var(--space-6), 3vw, var(--space-8));
    line-height: 1.65;
  }

  .tacet-pricing-comparison__row small,
  .tacet-pricing-profile-ledger__row > span > small[aria-hidden='true'] {
    display: none;
  }

  .tacet-pricing-comparison__row--head,
  .tacet-pricing-profile-ledger__row--head {
    background: var(--darker);
  }

  .tacet-pricing-comparison__row--head > *,
  .tacet-pricing-profile-ledger__row--head > * {
    min-height: 2.75rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-fact-ledger {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-block: 1px solid var(--border);
  }

  .tacet-pricing-fact-ledger > div {
    min-height: 6.5rem;
    padding: var(--space-4) clamp(var(--space-3), 2vw, var(--space-4));
    border-right: 1px solid var(--border);
  }

  .tacet-pricing-fact-ledger > div:last-child {
    border-right: 0;
  }

  .tacet-pricing-fact-ledger dt {
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-fact-ledger dd {
    margin: 1rem 0 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.8vw, 1.45rem);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 1.1;
  }

  .tacet-pricing-fact-ledger--runway {
    border-bottom: 2px solid var(--grn-on-light);
  }

  .tacet-pricing-fact-ledger--runway > div {
    min-height: 9rem;
  }

  .tacet-pricing-fact-ledger--runway dd {
    display: grid;
    gap: var(--space-2);
  }

  .tacet-pricing-fact-ledger--runway dd strong {
    color: var(--grn-on-light);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 0.9;
  }

  .tacet-pricing-fact-ledger--runway dd span {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-medium);
    line-height: 1.4;
  }

  .tacet-pricing-runway {
    margin-top: clamp(3rem, 7vw, 6rem);
  }

  .tacet-pricing-runway__header {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(20rem, 1fr);
    align-items: end;
    gap: clamp(1.5rem, 5vw, 5rem);
    margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
  }

  .tacet-pricing-runway__header p {
    max-width: 62ch;
    margin: 0;
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-compact);
    line-height: 1.6;
  }

  .tacet-pricing-runway__header h4 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 3.4rem);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 0.98;
  }

  .tacet-pricing-runway
    .tacet-pricing-profile-ledger__row:not(.tacet-pricing-profile-ledger__row--head)
    > span:last-child {
    color: var(--grn-on-light);
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    font-weight: var(--tacet-pricing-weight-bold);
  }

  .tacet-pricing-call-path {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-block: 1px solid var(--border);
    list-style: none;
  }

  .tacet-pricing-call-path li {
    position: relative;
    min-height: 10rem;
    padding: var(--space-4) clamp(var(--space-3), 2vw, var(--space-6));
    border-right: 1px solid var(--border);
  }

  .tacet-pricing-call-path li:last-child {
    border-right: 0;
  }

  .tacet-pricing-call-path li:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 1rem;
    right: -0.5rem;
    z-index: 1;
    display: grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    background: var(--background);
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-label);
    line-height: 1;
  }

  .tacet-pricing-call-path span {
    display: block;
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-call-path strong {
    display: block;
    margin-top: var(--space-6);
    color: var(--foreground);
    font-size: var(--tacet-pricing-text-body);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-call-path p {
    margin: 0.5rem 0 0;
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-compact);
    line-height: 1.5;
  }

  .tacet-pricing-agent-examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(2.5rem, 6vw, 5rem);
    border-block: 1px solid var(--border);
  }

  .tacet-pricing-agent-example {
    display: grid;
    min-width: 0;
    grid-template-rows: auto auto 1fr auto;
    padding: clamp(var(--space-6), 3vw, var(--space-8));
    border-right: 1px solid var(--border);
  }

  .tacet-pricing-agent-example:last-child {
    border-right: 0;
  }

  .tacet-pricing-agent-example footer > span {
    display: block;
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-agent-example h4 {
    max-width: 15ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 1;
    text-wrap: balance;
  }

  .tacet-pricing-agent-example header > strong {
    display: block;
    margin-top: var(--space-2);
    color: var(--grn-on-light);
    font-size: var(--tacet-pricing-text-compact);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-agent-example > p {
    max-width: 52ch;
    margin: var(--space-6) 0 0;
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-compact);
    line-height: 1.6;
  }

  .tacet-pricing-agent-example ol {
    align-self: start;
    margin: var(--space-6) 0 0;
    padding: 0;
    border-top: 1px solid var(--border);
    list-style: none;
  }

  .tacet-pricing-agent-example li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border);
  }

  .tacet-pricing-agent-example li > span {
    color: var(--grn-on-light);
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-agent-example li p {
    margin: 0;
    color: var(--foreground);
    font-size: var(--tacet-pricing-text-compact);
    line-height: 1.5;
  }

  .tacet-pricing-agent-example footer {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 2px solid var(--grn-on-light);
  }

  .tacet-pricing-agent-example footer strong {
    max-width: 28ch;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.7vw, 1.3rem);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 1.2;
  }

  .tacet-pricing-brief-ledger {
    border-top: 1px solid var(--border);
  }

  .tacet-pricing-brief-ledger article {
    display: grid;
    grid-template-columns: minmax(3rem, 0.16fr) minmax(10rem, 0.55fr) minmax(0, 1.3fr);
    align-items: baseline;
    border-bottom: 1px solid var(--border);
  }

  .tacet-pricing-brief-ledger article > * {
    margin: 0;
    padding: var(--space-4) clamp(var(--space-3), 2vw, var(--space-4));
    border-right: 1px solid var(--border);
  }

  .tacet-pricing-brief-ledger article > *:last-child {
    border-right: 0;
  }

  .tacet-pricing-brief-ledger span {
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-brief-ledger h4 {
    color: var(--foreground);
    font-size: var(--tacet-pricing-text-body);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-brief-ledger p {
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-compact);
    line-height: 1.55;
  }

  .tacet-pricing-evidence {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: clamp(4.5rem, 9vw, 8rem);
  }

  .tacet-pricing-evidence .tacet-pricing-topic:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .tacet-pricing-profile-ledger__row {
    display: grid;
    grid-template-columns: minmax(10rem, 0.72fr) minmax(18rem, 1.5fr) minmax(7rem, 0.45fr) minmax(
        12rem,
        0.8fr
      );
    border-bottom: 1px solid var(--border);
  }

  .tacet-pricing-profile-ledger__row > * {
    display: flex;
    min-width: 0;
    align-items: center;
    margin: 0;
    padding: var(--space-4) clamp(var(--space-3), 1.5vw, var(--space-4));
    border-right: 1px solid var(--border);
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-compact);
    line-height: 1.5;
  }

  .tacet-pricing-profile-ledger__row > *:last-child {
    border-right: 0;
  }

  .tacet-pricing-profile-ledger__row > span:first-child {
    display: grid;
    align-content: center;
    gap: 0.25rem;
  }

  .tacet-pricing-profile-ledger__row strong {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-compact);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-profile-ledger__row > span:first-child small {
    display: block;
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-label);
  }

  .tacet-pricing-profile-ledger__row:not(.tacet-pricing-profile-ledger__row--head)
    > span:nth-child(n + 3) {
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-operation-mix {
    display: grid;
    width: 100%;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tacet-pricing-operation-mix li {
    display: grid;
    grid-template-columns: minmax(5.4rem, 0.52fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 0.75rem;
  }

  .tacet-pricing-operation-mix li > span {
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-label);
    line-height: 1.4;
  }

  .tacet-pricing-operation-mix li > strong {
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
    line-height: 1.4;
  }

  .tacet-pricing-scenario-matrix {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
  }

  .tacet-pricing-scenario-matrix__axis,
  .tacet-pricing-scenario-matrix__profile {
    display: grid;
    min-width: 0;
    grid-template-rows: 4rem 4.75rem minmax(11rem, auto) 4.75rem 5.25rem;
    border-right: 1px solid var(--border);
  }

  .tacet-pricing-scenario-matrix__profile:last-child {
    border-right: 0;
  }

  .tacet-pricing-scenario-matrix__axis > span,
  .tacet-pricing-scenario-matrix__profile > header,
  .tacet-pricing-scenario-matrix__profile > div {
    display: flex;
    min-width: 0;
    align-items: center;
    margin: 0;
    padding: var(--space-4) clamp(var(--space-3), 1.5vw, var(--space-4));
    border-bottom: 1px solid var(--border);
  }

  .tacet-pricing-scenario-matrix__axis > span:last-child,
  .tacet-pricing-scenario-matrix__profile > div:last-child {
    border-bottom: 0;
  }

  .tacet-pricing-scenario-matrix__axis {
    background: var(--darker);
  }

  .tacet-pricing-scenario-matrix__axis > span {
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-scenario-matrix__profile header {
    background: var(--darker);
  }

  .tacet-pricing-scenario-matrix__profile h4 {
    margin: 0;
    color: var(--foreground);
    font-size: 1rem;
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-scenario-matrix__profile p {
    margin: 0;
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-compact);
    line-height: 1.45;
  }

  .tacet-pricing-scenario-matrix__number {
    display: grid !important;
    align-content: center;
    gap: var(--space-1);
  }

  .tacet-pricing-scenario-matrix__number > strong {
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
    line-height: 1.45;
  }

  .tacet-pricing-scenario-matrix__mobile-label {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tacet-pricing-app-economics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--border);
  }

  .tacet-pricing-app-economics__item {
    min-width: 0;
    padding: clamp(var(--space-6), 3vw, var(--space-10));
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .tacet-pricing-app-economics__item:nth-child(2n) {
    border-right: 0;
  }

  .tacet-pricing-app-economics__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .tacet-pricing-app-economics__item header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }

  .tacet-pricing-app-economics__item h4 {
    margin: 0;
    color: var(--foreground);
    font-size: 1rem;
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-app-economics__item header span,
  .tacet-pricing-app-economics__growth span {
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-medium);
  }

  .tacet-pricing-app-economics__price {
    display: grid;
    gap: var(--space-2);
    margin-top: clamp(var(--space-6), 3vw, var(--space-10));
  }

  .tacet-pricing-app-economics__price strong {
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: var(--tacet-pricing-weight-bold);
    letter-spacing: -0.03em;
    line-height: 0.82;
  }

  .tacet-pricing-app-economics__price span {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
    line-height: 1.4;
  }

  .tacet-pricing-app-economics__growth {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block: clamp(var(--space-6), 3vw, var(--space-10));
    padding-block: var(--space-3);
    border-block: 1px solid var(--border);
  }

  .tacet-pricing-app-economics__growth strong {
    color: var(--grn-on-light);
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 1;
  }

  .tacet-pricing-conclusion {
    margin: 1.5rem 0 0;
    padding: 1rem 0;
    border-block: 1px solid var(--border);
    color: var(--foreground);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: var(--tacet-pricing-weight-semibold);
    line-height: 1.55;
  }

  .tacet-pricing-anchor {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .tacet-pricing-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    background: var(--card);
  }

  .tacet-pricing-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
  }

  .tacet-pricing-table th,
  .tacet-pricing-table td {
    padding: var(--space-3) var(--space-4);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
  }

  .tacet-pricing-table th:last-child,
  .tacet-pricing-table td:last-child {
    border-right: 0;
  }

  .tacet-pricing-table th {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-table td {
    color: var(--foreground);
    font-size: var(--tacet-pricing-text-compact);
    line-height: 1.45;
  }

  .tacet-pricing-table td:nth-child(2),
  .tacet-pricing-table td:nth-child(3),
  .tacet-pricing-table td:nth-child(4),
  .tacet-pricing-table--tiers td {
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-label);
  }

  .tacet-pricing-table td:nth-child(3),
  .tacet-pricing-table td:nth-child(4) {
    white-space: nowrap;
  }

  .tacet-pricing-table tr:last-child td {
    border-bottom: 0;
  }

  .tacet-pricing-table__group td {
    background: var(--darker);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-table--tiers td:first-child strong {
    display: block;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-compact);
  }

  .tacet-pricing-table--tiers td:first-child span {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-pricing-subsection {
    margin-top: clamp(3.5rem, 7vw, 6rem);
    padding-top: clamp(2rem, 4vw, 3.5rem);
    border-top: 1px solid var(--border);
  }

  .tacet-pricing-subsection__header {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(20rem, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    margin-bottom: 1.5rem;
  }

  .tacet-pricing-subsection__header h3 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: var(--tacet-pricing-weight-bold);
    line-height: 1;
  }

  .tacet-pricing-subsection__header p {
    max-width: 58ch;
    margin: 0;
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-body);
    line-height: 1.65;
  }

  .tacet-pricing-editorial-head {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  }

  .tacet-pricing-calculator {
    padding-block: clamp(var(--space-16), 9vw, var(--space-24));
  }

  .tacet-calculator-grid {
    display: grid;
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    grid-template-columns: minmax(14rem, 0.85fr) minmax(18rem, 1fr) minmax(14rem, 0.85fr);
    margin-inline: auto;
    border-block: 1px solid var(--border);
    background: transparent;
  }

  .tacet-calculator-panel {
    padding: clamp(var(--space-4), 2.2vw, var(--space-6));
    border-right: 1px solid var(--border);
  }

  .tacet-calculator-panel:last-child {
    border-right: 0;
  }

  .tacet-calculator-panel__label {
    display: block;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-calculator-apps {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .tacet-calculator-apps button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 2.35rem;
    padding-inline: var(--space-3);
    border: 1px solid var(--border);
    border-radius: 0 !important;
    background: transparent;
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
    letter-spacing: 0;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color 160ms var(--ease-standard),
      border-color 160ms var(--ease-standard),
      color 160ms var(--ease-standard);
  }

  .tacet-calculator-apps button[aria-pressed='true'] {
    border-color: var(--org-on-light);
    background: color-mix(in oklch, var(--org-on-light), transparent 94%);
    color: var(--org-on-light);
  }

  .tacet-calculator-apps button:hover {
    border-color: var(--border-strong);
    color: var(--foreground);
  }

  .tacet-calculator-apps button[aria-pressed='true']:hover {
    border-color: var(--org-on-light);
    color: var(--org-on-light);
  }

  .tacet-calculator-apps button:focus-visible {
    outline: 2px solid var(--foreground);
    outline-offset: 2px;
  }

  .tacet-calculator-slider {
    margin-top: 1rem;
  }

  .tacet-calculator-slider label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-calculator-slider div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .tacet-calculator-slider input {
    flex: 1;
    min-width: 0;
    min-height: 1.5rem;
    accent-color: var(--org-on-light);
  }

  .tacet-calculator-slider span {
    min-width: 3.25rem;
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-bold);
    text-align: right;
  }

  .tacet-calculator-panel--result dl {
    margin: 1rem 0 0;
  }

  .tacet-calculator-panel--result div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
  }

  .tacet-calculator-panel--result div:last-child {
    border-bottom: 0;
  }

  .tacet-calculator-panel--result dt {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
  }

  .tacet-calculator-panel--result dd {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-mono);
    font-weight: var(--tacet-pricing-weight-bold);
  }

  .tacet-pricing-assumptions {
    padding-block: clamp(var(--space-20), 11vw, var(--space-24));
    border-top: 1px solid var(--border);
    background: var(--background) !important;
  }

  .tacet-pricing-assumption-ledger {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin: 0 auto;
    border-top: 1px solid var(--border);
  }

  .tacet-pricing-assumption-ledger > div {
    display: grid;
    grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1.45fr);
    border-bottom: 1px solid var(--border);
  }

  .tacet-pricing-assumption-ledger dt,
  .tacet-pricing-assumption-ledger dd {
    margin: 0;
    padding: var(--space-4) clamp(var(--space-3), 2vw, var(--space-4));
  }

  .tacet-pricing-assumption-ledger dt {
    border-right: 1px solid var(--border);
    color: var(--foreground);
  }

  .tacet-pricing-assumption-ledger dd {
    color: var(--text-m);
    font-size: var(--tacet-pricing-text-body);
    line-height: 1.6;
  }

  .proto-saas.tacet-pricing-page .tacet-pricing-faq {
    padding-block: clamp(var(--space-16), 9vw, var(--space-24));
    border-top: 1px solid var(--border);
    background: var(--background) !important;
  }

  .tacet-faq-search {
    display: flex;
    max-width: 38rem;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--space-6);
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    background: var(--card);
  }

  .tacet-faq-search__icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--text-m);
  }

  .tacet-faq-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--foreground);
    font: inherit;
  }

  .tacet-faq-search input:focus-visible {
    outline: 2px solid var(--foreground);
    outline-offset: 0.35rem;
  }

  .tacet-faq-search input::placeholder {
    color: var(--text-m);
  }

  .tacet-faq-search span {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-label);
    white-space: nowrap;
  }

  .tacet-faq-tabs-shell {
    position: relative;
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    border-block: 1px solid var(--border);
    background: transparent;
  }

  .tacet-faq-tabs {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    background: transparent;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tacet-faq-tabs::-webkit-scrollbar {
    display: none;
  }

  .tacet-faq-tabs__scroller {
    position: absolute;
    z-index: 2;
    inset-block: 0;
    display: grid;
    width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--tacet-pricing-text-compact);
    line-height: 1;
    cursor: pointer;
  }

  .tacet-faq-tabs__scroller[hidden] {
    display: none;
  }

  .tacet-faq-tabs__scroller--previous {
    inset-inline-start: 0;
    border-right: 1px solid var(--border);
  }

  .tacet-faq-tabs__scroller--next {
    inset-inline-end: 0;
    border-left: 1px solid var(--border);
  }

  .tacet-faq-tabs__scroller:hover:not(:disabled) {
    background: var(--foreground);
    color: var(--background);
  }

  .tacet-faq-tabs__scroller:focus-visible {
    position: relative;
    z-index: 2;
    outline: 2px solid var(--foreground);
    outline-offset: -2px;
  }

  .tacet-faq-tabs button {
    flex: none;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-label);
    font-weight: var(--tacet-pricing-weight-semibold);
    cursor: pointer;
  }

  .tacet-faq-tabs button[aria-pressed='true'] {
    background: color-mix(in oklch, var(--org-on-light), transparent 93%);
    color: var(--org-on-light);
  }

  .tacet-faq-tabs button:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--foreground);
    outline-offset: -2px;
  }

  .tacet-faq-list {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    background: transparent;
  }

  .tacet-pricing-faq details.tacet-faq-item {
    padding: 0;
    border-top: 0;
    border-bottom: 1px solid var(--border);
  }

  .tacet-pricing-faq details.tacet-faq-item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.25rem;
    align-items: center;
    gap: 1rem;
    padding: var(--space-4) 0;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--tacet-pricing-weight-semibold);
    letter-spacing: 0;
    line-height: 1.45;
    text-transform: none;
    cursor: pointer;
    list-style: none;
  }

  .tacet-pricing-faq details.tacet-faq-item summary::-webkit-details-marker {
    display: none;
  }

  .tacet-pricing-faq details.tacet-faq-item summary::after {
    display: none !important;
    content: none !important;
  }

  .tacet-pricing-faq details.tacet-faq-item summary:focus-visible {
    outline: 2px solid var(--foreground);
    outline-offset: 0.25rem;
  }

  .tacet-faq-item__icon {
    width: 1rem;
    height: 1rem;
    color: var(--text-m);
    transition: transform 180ms var(--ease-standard);
  }

  .tacet-pricing-faq details.tacet-faq-item summary .tacet-faq-item__icon {
    align-self: center;
    justify-self: end;
  }

  .tacet-faq-item[open] .tacet-faq-item__icon {
    transform: rotate(45deg);
  }

  .tacet-pricing-faq details.tacet-faq-item div {
    padding: 0 0 var(--space-6);
  }

  .tacet-pricing-faq details.tacet-faq-item p {
    max-width: 70ch;
    margin: 0;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--tacet-pricing-text-body);
    line-height: 1.65;
  }

  @media (max-width: 64rem) {
    .tacet-pricing-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tacet-pricing-summary > div:nth-child(2) {
      border-right: 0;
    }

    .tacet-pricing-summary > div:nth-child(-n + 2) {
      border-bottom: 1px solid var(--border);
    }

    .tacet-pricing-topic__head,
    .tacet-pricing-runway__header,
    .tacet-pricing-subsection__header,
    .tacet-calculator-grid {
      grid-template-columns: 1fr;
    }

    .tacet-pricing-fact-ledger,
    .tacet-pricing-call-path {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tacet-pricing-agent-examples {
      grid-template-columns: 1fr;
    }

    .tacet-pricing-agent-example,
    .tacet-pricing-agent-example:last-child {
      border-right: 0;
    }

    .tacet-pricing-agent-example + .tacet-pricing-agent-example {
      border-top: 1px solid var(--border);
    }

    .tacet-pricing-fact-ledger > div:nth-child(2),
    .tacet-pricing-call-path li:nth-child(2) {
      border-right: 0;
    }

    .tacet-pricing-fact-ledger > div:nth-child(-n + 2),
    .tacet-pricing-call-path li:nth-child(-n + 2) {
      border-bottom: 1px solid var(--border);
    }

    .tacet-pricing-call-path li:nth-child(2)::after {
      display: none;
    }

    .tacet-pricing-subsection__header {
      align-items: start;
    }

    .tacet-calculator-panel {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .tacet-calculator-panel:last-child {
      border-bottom: 0;
    }
  }

  @media (max-width: 48rem) {
    .tacet-pricing-scenario-matrix {
      grid-template-columns: 1fr;
    }

    .tacet-pricing-scenario-matrix__axis {
      display: none;
    }

    .tacet-pricing-scenario-matrix__profile {
      grid-template-rows: auto;
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .tacet-pricing-scenario-matrix__profile:last-child {
      border-bottom: 0;
    }

    .tacet-pricing-scenario-matrix__profile > header,
    .tacet-pricing-scenario-matrix__profile > div {
      border-bottom: 1px solid var(--border);
    }

    .tacet-pricing-scenario-matrix__profile > div:last-child {
      border-bottom: 0;
    }

    .tacet-pricing-scenario-matrix__mobile-label {
      position: static;
      display: block;
      overflow: visible;
      width: auto;
      height: auto;
      margin-right: 0.75rem;
      clip-path: none;
      color: var(--text-m);
      font-size: var(--tacet-pricing-text-label);
      font-weight: var(--tacet-pricing-weight-semibold);
      white-space: normal;
    }

    .tacet-pricing-app-economics {
      grid-template-columns: 1fr;
    }

    .tacet-pricing-app-economics__item,
    .tacet-pricing-app-economics__item:nth-child(2n),
    .tacet-pricing-app-economics__item:nth-last-child(-n + 2) {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .tacet-pricing-app-economics__item:last-child {
      border-bottom: 0;
    }

    .tacet-pricing-assumption-ledger > div {
      grid-template-columns: 1fr;
    }

    .tacet-pricing-comparison__row--head,
    .tacet-pricing-profile-ledger__row--head {
      display: none;
    }

    .tacet-pricing-comparison__row,
    .tacet-pricing-profile-ledger__row,
    .tacet-pricing-brief-ledger article {
      grid-template-columns: 1fr;
    }

    .tacet-pricing-comparison__row > *,
    .tacet-pricing-profile-ledger__row > *,
    .tacet-pricing-brief-ledger article > * {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .tacet-pricing-comparison__row > *:last-child,
    .tacet-pricing-profile-ledger__row > *:last-child,
    .tacet-pricing-brief-ledger article > *:last-child {
      border-bottom: 0;
    }

    .tacet-pricing-comparison__row small,
    .tacet-pricing-profile-ledger__row > span > small[aria-hidden='true'] {
      display: block;
      margin-right: var(--space-2);
      color: var(--text-m);
      font-family: var(--font-body);
      font-size: var(--tacet-pricing-text-label);
      font-weight: var(--tacet-pricing-weight-semibold);
    }

    .tacet-pricing-profile-ledger__row > span:first-child small {
      margin-right: 0;
      color: var(--text-m);
    }

    .tacet-pricing-fact-ledger,
    .tacet-pricing-call-path {
      grid-template-columns: 1fr;
    }

    .tacet-pricing-fact-ledger > div,
    .tacet-pricing-call-path li {
      min-height: 0;
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .tacet-pricing-fact-ledger > div:last-child,
    .tacet-pricing-call-path li:last-child {
      border-bottom: 0;
    }

    .tacet-pricing-call-path li:not(:last-child)::after {
      top: auto;
      right: 1rem;
      bottom: -0.5rem;
      display: grid;
      transform: rotate(90deg);
    }

    .tacet-pricing-assumption-ledger dt {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .tacet-pricing-assumption-ledger dd {
      border-bottom: 0;
    }

    .tacet-pricing-summary {
      grid-template-columns: 1fr;
    }

    .tacet-pricing-summary > div,
    .tacet-pricing-summary > div:nth-child(2) {
      min-height: 0;
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .tacet-pricing-summary > div:last-child {
      border-bottom: 0;
    }

    .tacet-pricing-summary dd {
      margin-top: var(--space-2);
    }

    .tacet-faq-search {
      align-items: stretch;
      flex-direction: column;
    }

    .tacet-faq-search span {
      white-space: normal;
    }
  }
  /* Enterprise Tacet page -------------------------------------------------- */
  .tacet-diff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
  }

  .tacet-diff-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background:
      linear-gradient(
        145deg,
        color-mix(in oklch, var(--card), transparent 4%),
        color-mix(in oklch, var(--background), transparent 0%)
      ),
      var(--card);
    box-shadow: 0 1rem 3rem color-mix(in oklch, var(--foreground), transparent 94%);
  }

  .tacet-diff-card header {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.35;
  }

  .tacet-diff-card header div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
  }

  .tacet-diff-card header span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-diff-card header strong {
    flex: none;
    color: var(--org);
    font-size: 0.68rem;
    font-weight: 740;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .tacet-diff-card__icon {
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    color: var(--org);
  }

  .tacet-diff-card__body {
    overflow-x: auto;
    padding-block: 0.45rem 0;
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--org), transparent 96%), transparent 42%),
      color-mix(in oklch, var(--background), var(--foreground) 2%);
  }

  .tacet-diff-card__line {
    display: grid;
    grid-template-columns: 2rem minmax(32rem, 1fr);
    align-items: center;
    min-height: 1.75rem;
    padding-inline: 0.75rem;
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.55;
  }

  .tacet-diff-card__line span {
    color: color-mix(in oklch, var(--text-m), transparent 32%);
    user-select: none;
  }

  .tacet-diff-card__line code {
    color: inherit;
    white-space: pre;
  }

  .tacet-diff-card__line[data-diff='add'] {
    background: color-mix(in oklch, var(--grn), transparent 90%);
    color: color-mix(in oklch, var(--grn-on-light), var(--foreground) 18%);
  }

  .tacet-diff-card__line[data-diff='remove'] {
    background: color-mix(in oklch, var(--org), transparent 90%);
    color: color-mix(in oklch, var(--org), var(--foreground) 18%);
  }

  .proto-saas.tacet-version-control-page section[id] {
    scroll-margin-top: calc(var(--chrome-height) + var(--tacet-page-nav-height) + 1.25rem);
  }

  .proto-saas.tacet-version-control-page section h2 {
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-version-control-page section p {
    text-wrap: pretty;
  }

  @media (max-width: 48rem) {
    .tacet-diff-grid {
      grid-template-columns: 1fr;
    }

    .tacet-diff-card header {
      align-items: flex-start;
      flex-direction: column;
    }

    .tacet-diff-card__line {
      grid-template-columns: 1.5rem minmax(24rem, 1fr);
      font-size: 0.7rem;
    }
  }

  .proto-saas.tacet-enterprise-page section h2 {
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-enterprise-page section[id] {
    scroll-margin-top: calc(var(--chrome-height) + var(--tacet-page-nav-height) + 1.25rem);
  }

  .proto-saas.tacet-enterprise-page section p {
    text-wrap: pretty;
  }

  .proto-saas.tacet-managed-services-page section[id] {
    scroll-margin-top: calc(var(--chrome-height) + var(--tacet-page-nav-height) + 1.25rem);
  }

  .proto-saas.tacet-managed-services-page section h2 {
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas.tacet-managed-services-page section p {
    text-wrap: pretty;
  }

  .enterprise-detail-panel,
  .enterprise-synthesis-panel,
  .enterprise-synthesis-sidebar,
  .enterprise-rail-card,
  .enterprise-model-grid {
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
    background: var(--tacet-panel-bg);
    color: var(--foreground);
    backdrop-filter: blur(14px) saturate(1.12);
    box-shadow: var(--shadow-sm);
  }

  .enterprise-detail-header,
  .enterprise-synthesis-sidebar__header {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    padding: 0.875rem 1rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
  }

  .enterprise-detail-header span:last-child,
  .enterprise-synthesis-sidebar__header strong {
    color: var(--org-on-light);
    font-weight: 720;
  }

  .enterprise-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--tacet-panel-border);
  }

  .enterprise-detail-cell {
    display: grid;
    min-height: 7.75rem;
    align-content: center;
    gap: 0.4rem;
    padding: 1rem;
    border-color: var(--tacet-panel-border);
    background: transparent;
  }

  .enterprise-detail-cell:nth-child(odd) {
    border-right: 1px solid var(--tacet-panel-border);
  }

  .enterprise-detail-cell:nth-child(-n + 2) {
    border-bottom: 1px solid var(--tacet-panel-border);
  }

  .enterprise-detail-cell__icon,
  .enterprise-card-icon,
  .enterprise-rail-icon,
  .enterprise-model-card__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: var(--org-on-light);
  }

  .enterprise-detail-cell__icon svg,
  .enterprise-card-icon svg,
  .enterprise-rail-icon svg,
  .enterprise-model-card__icon svg {
    width: 100% !important;
    height: 100% !important;
    color: currentColor !important;
  }

  .enterprise-detail-cell > span:not(.enterprise-detail-cell__icon),
  .enterprise-synthesis-stat span {
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }

  .enterprise-detail-cell strong,
  .enterprise-synthesis-stat strong {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.1;
  }

  .enterprise-detail-cell strong[data-accent='true'],
  .enterprise-synthesis-stat strong[data-accent='true'] {
    color: var(--org-on-light);
  }

  .enterprise-detail-foot {
    padding: 0.875rem 1rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 560;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
  }

  .enterprise-synthesis-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  .enterprise-synthesis-main {
    display: grid;
    min-width: 0;
  }

  .enterprise-synthesis-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .enterprise-synthesis-card {
    display: grid;
    min-height: 14.5rem;
    align-content: start;
    gap: 0.875rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: transparent;
  }

  .enterprise-synthesis-card:last-child {
    border-bottom: 0;
  }

  .enterprise-synthesis-card h3,
  .enterprise-rail-title,
  .enterprise-model-card h3 {
    margin: 0;
    color: var(--foreground) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
    text-transform: none !important;
  }

  .enterprise-synthesis-card h3::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 0.75rem;
    background: var(--tacet-panel-border);
  }

  .enterprise-synthesis-card p,
  .enterprise-rail-desc,
  .enterprise-model-card p {
    margin: 0;
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 520 !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
  }

  .enterprise-synthesis-card > span:last-child {
    align-self: end;
    color: var(--org-on-light) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }

  .enterprise-synthesis-stat {
    display: grid;
    min-height: 5.25rem;
    gap: 0.375rem;
    padding: 1rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: transparent;
  }

  .enterprise-synthesis-stat:last-child {
    border-bottom: 0;
  }

  .enterprise-rail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .enterprise-rail-card {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    min-height: 8rem;
    align-items: start;
    gap: 0.875rem;
    padding: 1.125rem;
  }

  .enterprise-rail-copy {
    display: grid;
    min-width: 0;
    gap: 0.5rem;
  }

  .enterprise-model-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .enterprise-model-card {
    display: grid;
    min-height: 18rem;
    align-content: start;
    gap: 0.875rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: transparent;
  }

  .enterprise-model-card:last-child {
    border-bottom: 0;
  }

  .enterprise-model-card--featured {
    background: color-mix(in oklch, var(--org), var(--card) 92%);
    box-shadow: inset 0 0.25rem 0 var(--org);
  }

  .enterprise-model-card ul {
    display: grid;
    gap: 0.625rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
  }

  .enterprise-model-card li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
  }

  .enterprise-model-grid--compact .enterprise-model-card {
    min-height: 13.5rem;
  }

  @media (min-width: 48rem) {
    .enterprise-synthesis-panel,
    .enterprise-synthesis-panel--wide,
    .enterprise-rail-grid,
    .enterprise-model-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .enterprise-synthesis-card,
    .enterprise-model-card {
      border-bottom: 1px solid var(--tacet-panel-border);
    }

    .enterprise-synthesis-card:nth-child(odd),
    .enterprise-model-card:nth-child(odd) {
      border-right: 1px solid var(--tacet-panel-border);
    }

    .enterprise-synthesis-card:nth-last-child(-n + 2),
    .enterprise-model-card:nth-last-child(-n + 2) {
      border-bottom: 0;
    }
  }

  @media (min-width: 64rem) {
    .enterprise-synthesis-layout {
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    }

    .enterprise-rail-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .enterprise-model-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .enterprise-model-card,
    .enterprise-model-card:nth-child(odd) {
      border-right: 1px solid var(--tacet-panel-border);
      border-bottom: 0;
    }

    .enterprise-model-card:last-child {
      border-right: 0;
    }
  }

  .proto-saas #protocol > .grid > div,
  .proto-saas #loop > .grid > div:first-child {
    padding-block: var(--tacet-section-pad-y) !important;
    padding-inline: var(--tacet-section-pad-x) !important;
  }

  .proto-saas #guardrails > div:first-child {
    border-bottom: 0 !important;
  }

  .proto-saas #guardrails > .grid {
    width: 100%;
    max-width: var(--tacet-section-max);
    margin-inline: auto;
    padding: 0 0 var(--tacet-section-pad-y);
  }

  .proto-saas #mission-run,
  .proto-saas #protocol,
  .proto-saas #synthesis {
    background: var(--background) !important;
    color: var(--foreground) !important;
  }

  .proto-saas #mission-run aside,
  .proto-saas #mission-run aside > div,
  .proto-saas #synthesis [style*='var(--darker)'],
  .proto-saas #synthesis .border {
    background: var(--tacet-saas-surface) !important;
    color: var(--foreground) !important;
  }

  .proto-saas #mission-run h2 {
    max-width: 16ch;
    font-size: clamp(2rem, 5vw, 4.75rem);
  }

  .proto-saas #mission-run header .proto-section-eyebrow {
    margin-bottom: 1.125rem;
  }

  .proto-saas #mission-run article,
  .proto-saas #synthesis .p-6,
  .proto-saas #synthesis .lg\:p-8,
  .proto-saas #guardrails .px-6 {
    background: color-mix(in oklch, var(--card), var(--background) 55%);
  }

  .proto-saas #mission-run .mission-run-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1.375rem !important;
  }

  .proto-saas #mission-run .mission-run-step__time {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--font-body) !important;
    letter-spacing: 0 !important;
    line-height: 1.25;
    text-transform: none !important;
  }

  .proto-saas #mission-run .mission-run-step__stamp {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--org-on-light);
  }

  .proto-saas #mission-run .mission-run-step__phase {
    color: var(--text-m);
    font-size: 0.875rem;
    font-weight: 560;
    line-height: 1.2;
  }

  .proto-saas #mission-run article h3,
  .proto-saas #synthesis h4 {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
  }

  .proto-saas #mission-run .mission-run-step__meta {
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
  }

  .proto-saas #mission-run .mission-run-step__state {
    display: flex;
    align-items: flex-start;
  }

  .proto-saas #mission-run .mission-run-step__badge {
    min-height: 1.875rem;
    padding: 0.35rem 0.625rem !important;
    border-color: var(--tacet-panel-border) !important;
    border-radius: 0;
    background: var(--card) !important;
    color: var(--foreground) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
  }

  .proto-saas #mission-run .mission-run-step__badge-dot {
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    background: var(--grn);
  }

  .proto-saas #mission-run .mission-run-step__badge-dot--waiting {
    background: var(--org);
  }

  .proto-saas #mission-run .mission-run-step__accent {
    color: var(--org-on-light);
  }

  .proto-saas #mission-run .font-mono,
  .proto-saas #protocol .font-mono,
  .proto-saas #synthesis .font-mono,
  .proto-saas #guardrails .font-mono {
    font-family: var(--font-body) !important;
  }

  .proto-saas #guardrails,
  .proto-saas #guardrails [style*='var(--darker)'] {
    background: var(--background) !important;
  }

  .proto-saas #guardrails h2,
  .proto-saas #guardrails p,
  .proto-saas #guardrails span {
    color: var(--foreground) !important;
  }

  .proto-saas #mission-run aside {
    background: transparent !important;
    color: var(--foreground) !important;
  }

  .proto-saas #mission-run aside > div,
  .proto-saas #protocol .border.p-6,
  .proto-saas #synthesis > div > .grid.border,
  .proto-saas #synthesis > div > .grid.border + .border,
  .proto-saas #synthesis > div > .grid.grid-cols-4,
  .proto-saas #guardrails .grid > div {
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border) !important;
    border-radius: var(--radius-lg);
    background: var(--tacet-panel-bg) !important;
    color: var(--foreground) !important;
    backdrop-filter: blur(14px) saturate(1.12);
    box-shadow: var(--shadow-sm);
  }

  .proto-saas #mission-run aside > div + div {
    margin-top: 1rem !important;
  }

  .proto-saas #mission-run aside > div > div:first-child,
  .proto-saas #protocol .border.p-6 > div:first-child,
  .proto-saas #synthesis > div > .grid.border + .border {
    min-height: 2rem;
    align-items: center;
    padding: 0.875rem 1rem !important;
    border-color: var(--tacet-panel-border) !important;
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
  }

  .proto-saas #mission-run aside > div > div:first-child span:last-child {
    color: var(--org-on-light) !important;
  }

  .proto-saas #mission-run aside > div > div:nth-child(2) {
    padding: 1rem !important;
  }

  .proto-saas #mission-run aside h3 {
    max-width: 16ch;
    font-size: clamp(1.5rem, 2.8vw, 2rem) !important;
    font-weight: 760 !important;
    line-height: 1.08 !important;
    color: var(--foreground) !important;
  }

  .proto-saas #mission-run aside p {
    margin-top: 0.75rem !important;
    color: var(--text-m) !important;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
  }

  .proto-saas #mission-run aside dl,
  .proto-saas #mission-run aside ul,
  .proto-saas #protocol .grid.grid-cols-2,
  .proto-saas #synthesis .grid.border,
  .proto-saas #synthesis .grid.grid-cols-4 {
    border-color: var(--tacet-panel-border) !important;
  }

  .proto-saas #mission-run aside dl > div,
  .proto-saas #mission-run aside li,
  .proto-saas #protocol .grid.grid-cols-2 > div,
  .proto-saas #synthesis .grid.border > div,
  .proto-saas #synthesis .grid.grid-cols-4 > div,
  .proto-saas #guardrails .grid > div {
    border-color: var(--tacet-panel-border) !important;
    background: transparent !important;
  }

  .proto-saas #mission-run aside dl > div,
  .proto-saas #mission-run aside li {
    padding: 0.875rem 1rem !important;
  }

  .proto-saas #mission-run aside .mission-output-item {
    display: grid !important;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.875rem !important;
    min-height: 4.75rem;
  }

  .proto-saas #mission-run aside .mission-output-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--org-on-light);
  }

  .proto-saas #mission-run aside .mission-output-icon svg {
    width: 2rem !important;
    height: 2rem !important;
    color: currentColor !important;
  }

  .proto-saas #mission-run aside .mission-output-copy {
    display: grid;
    gap: 0.25rem;
  }

  .proto-saas #mission-run aside dt,
  .proto-saas #mission-run aside li .mission-output-detail,
  .proto-saas #protocol .grid.grid-cols-2 div div:first-child,
  .proto-saas #synthesis .grid div div:first-child,
  .proto-saas #guardrails p {
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
  }

  .proto-saas #mission-run aside dd,
  .proto-saas #mission-run aside li .mission-output-name,
  .proto-saas #protocol .grid.grid-cols-2 div div:last-child,
  .proto-saas #synthesis .grid div div:last-child {
    color: var(--foreground) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
  }

  .proto-saas #mission-run aside dd {
    font-size: clamp(1.375rem, 2vw, 1.625rem) !important;
    font-weight: 780 !important;
  }

  .proto-saas #mission-run aside dd[data-accent='true'] {
    color: var(--org-on-light) !important;
  }

  .proto-saas #protocol .proto-engine-detail-column {
    display: flex;
    align-items: center;
  }

  .proto-saas #protocol .proto-engine-detail-panel {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border) !important;
    border-radius: var(--radius-lg);
    background: var(--tacet-panel-bg) !important;
    color: var(--foreground) !important;
    backdrop-filter: blur(14px) saturate(1.12);
    box-shadow: var(--shadow-sm);
  }

  .proto-saas #protocol .proto-engine-detail-header {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
    padding: 0.875rem 1rem;
  }

  .proto-saas #protocol .proto-engine-detail-header span:last-child {
    color: var(--org-on-light);
    font-weight: 720;
  }

  .proto-saas #protocol .proto-engine-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--tacet-panel-border);
  }

  .proto-saas #protocol .proto-engine-detail-cell {
    display: grid;
    align-content: center;
    gap: 0.375rem;
    min-height: 4.75rem;
    border-color: var(--tacet-panel-border);
    background: transparent;
    padding: 0.875rem 1rem;
  }

  .proto-saas #protocol .proto-engine-detail-cell:nth-child(odd) {
    border-right: 1px solid var(--tacet-panel-border);
  }

  .proto-saas #protocol .proto-engine-detail-cell:nth-child(-n + 2) {
    border-bottom: 1px solid var(--tacet-panel-border);
  }

  .proto-saas #protocol .proto-engine-detail-cell span {
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }

  .proto-saas #protocol .proto-engine-detail-cell strong {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.1;
  }

  .proto-saas #protocol .proto-engine-detail-cell strong[data-accent='true'] {
    color: var(--org-on-light);
  }

  .proto-saas #protocol .proto-engine-detail-foot {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 560;
    letter-spacing: 0;
    line-height: 1.35;
    padding: 0.875rem 1rem;
    text-transform: none;
  }

  .proto-saas #guardrails > .proto-guardrails-header {
    width: var(--tacet-visible-rail) !important;
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x))) !important;
    margin-inline: auto !important;
    padding-block: var(--tacet-section-pad-y) 2rem !important;
    padding-inline: 0 !important;
  }

  .proto-saas #guardrails .proto-section-eyebrow + h2 {
    margin-bottom: 0 !important;
  }

  .proto-saas #guardrails > .proto-guardrails-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding: 0 0 var(--tacet-section-pad-y);
  }

  .proto-saas #guardrails:has(+ #cta) > .proto-guardrails-grid {
    padding-bottom: 0;
  }

  .proto-saas #guardrails + #cta.proto-cta--left {
    padding-block-start: var(--tacet-section-pad-y) !important;
  }

  .proto-saas #guardrails .proto-guardrails-card {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.875rem;
    align-items: start;
    min-height: 7.25rem;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
    background: var(--tacet-panel-bg);
    color: var(--foreground);
    padding: 1.125rem;
    backdrop-filter: blur(14px) saturate(1.12);
    box-shadow: var(--shadow-sm);
  }

  .proto-saas #guardrails .proto-guardrails-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: var(--org-on-light) !important;
  }

  .proto-saas #guardrails .proto-guardrails-icon svg {
    width: 2rem !important;
    height: 2rem !important;
    color: currentColor !important;
  }

  .proto-saas #guardrails .proto-guardrails-copy {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
  }

  .proto-saas #guardrails .proto-guardrails-title {
    color: var(--foreground) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
  }

  .proto-saas #guardrails .proto-guardrails-desc {
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
  }

  .proto-saas #synthesis .proto-synthesis-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-top: 2rem;
  }

  .proto-saas #synthesis .proto-synthesis-main {
    display: grid;
    min-width: 0;
  }

  .proto-saas #synthesis .proto-synthesis-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--tacet-panel-bg);
    color: var(--foreground);
    backdrop-filter: blur(14px) saturate(1.12);
    box-shadow: var(--shadow-sm);
  }

  .proto-saas #synthesis .proto-synthesis-card {
    display: grid;
    align-content: start;
    gap: 0.875rem;
    min-height: 12rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: transparent;
    padding: 1.25rem;
  }

  .proto-saas #synthesis .proto-synthesis-card:last-child {
    border-bottom: 0;
  }

  .proto-saas #synthesis .proto-synthesis-card h3 {
    margin: 0;
    color: var(--foreground) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
  }

  .proto-saas #synthesis .proto-synthesis-card h3::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 0.75rem;
    background: var(--tacet-panel-border);
  }

  .proto-saas #synthesis .proto-synthesis-card p {
    margin: 0;
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 520 !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
  }

  .proto-saas #synthesis .proto-synthesis-card span {
    align-self: end;
    color: var(--org-on-light) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }

  .proto-saas #synthesis .proto-synthesis-trace {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: -1px;
    border: 1px solid var(--tacet-panel-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: color-mix(in oklch, var(--beige-300), var(--background) 38%);
    color: var(--foreground);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-md);
  }

  .proto-saas #synthesis .proto-synthesis-trace span {
    color: var(--org-on-light) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
  }

  .proto-saas #synthesis .proto-synthesis-trace strong {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.25;
  }

  .proto-saas #synthesis .proto-synthesis-sidebar {
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
    background: var(--tacet-panel-bg);
    color: var(--foreground);
    backdrop-filter: blur(14px) saturate(1.12);
    box-shadow: var(--shadow-sm);
  }

  .proto-saas #synthesis .proto-synthesis-sidebar__header {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    padding: 0.875rem 1rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
  }

  .proto-saas #synthesis .proto-synthesis-sidebar__header strong {
    color: var(--org-on-light);
    font-weight: 720;
  }

  .proto-saas #synthesis .proto-synthesis-stat {
    display: grid;
    gap: 0.375rem;
    min-height: 5.25rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: transparent;
    padding: 1rem;
  }

  .proto-saas #synthesis .proto-synthesis-stat:last-child {
    border-bottom: 0;
  }

  .proto-saas #synthesis .proto-synthesis-stat span {
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }

  .proto-saas #synthesis .proto-synthesis-stat strong {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.1;
  }

  .proto-saas #synthesis .proto-synthesis-stat strong[data-accent='true'] {
    color: var(--org-on-light);
  }

  @media (min-width: 48rem) {
    .proto-saas #synthesis .proto-synthesis-panel {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .proto-saas #synthesis .proto-synthesis-card {
      border-bottom: 1px solid var(--tacet-panel-border);
    }

    .proto-saas #synthesis .proto-synthesis-card:nth-child(odd) {
      border-right: 1px solid var(--tacet-panel-border);
    }

    .proto-saas #synthesis .proto-synthesis-card:nth-last-child(-n + 2) {
      border-bottom: 0;
    }
  }

  @media (min-width: 64rem) {
    .proto-saas #synthesis .proto-synthesis-layout {
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    }
  }

  @media (min-width: 48rem) {
    .proto-saas #guardrails > .proto-guardrails-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .proto-saas #guardrails > .proto-guardrails-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .proto-saas #mission-run aside li svg {
    color: var(--org-on-light) !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  @media (min-width: 48rem) {
    .proto-saas #mission-run .mission-run-step {
      grid-template-columns: minmax(7.5rem, 0.18fr) minmax(0, 1fr) minmax(7rem, 0.16fr);
      gap: 1.5rem;
      padding-block: 1.625rem !important;
    }

    .proto-saas #mission-run .mission-run-step__time {
      display: grid;
      align-content: start;
      gap: 0.25rem;
    }

    .proto-saas #mission-run .mission-run-step__state {
      justify-content: flex-end;
      padding-top: 0.125rem;
    }
  }

  .proto-saas #modules section > .grid,
  .proto-saas #sdk [role='tabpanel'] > .border {
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border) !important;
    border-radius: var(--radius-lg);
    background: var(--tacet-panel-bg) !important;
    backdrop-filter: blur(14px) saturate(1.12);
    box-shadow: var(--shadow-sm);
  }

  .proto-saas #modules,
  .proto-saas #sdk {
    position: relative;
    z-index: 1;
    background: var(--background) !important;
  }

  .proto-saas #modules section > .grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 2rem auto 3rem !important;
    box-sizing: border-box;
  }

  .proto-saas #modules section > .grid > div {
    padding: 1rem !important;
    border-color: var(--tacet-panel-border) !important;
    background: transparent !important;
  }

  .proto-saas #modules section > div:first-child {
    padding-block: 2.5rem 1rem !important;
    padding-inline: 0 !important;
  }

  .proto-saas #modules h3 {
    margin-top: 0.375rem !important;
    color: var(--foreground) !important;
    font-size: 1rem !important;
    font-weight: 650 !important;
    line-height: var(--tacet-type-card-lh) !important;
    letter-spacing: var(--tacet-type-card-track) !important;
  }

  .proto-saas #modules p {
    margin-top: 0.5rem !important;
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
  }

  .proto-saas #modules section > .grid > div > span:first-child,
  .proto-saas #modules section > .grid > div span:last-child {
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas #sdk [role='tablist'] {
    border-bottom-width: 1px !important;
    border-color: var(--tacet-panel-border) !important;
  }

  .proto-saas #sdk .sdk-tab-btn {
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-saas #sdk [role='tabpanel'] > .border {
    border-top: 0 !important;
  }

  .proto-saas #sdk [role='tabpanel'] > .border > div:first-child {
    min-height: 2rem;
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: color-mix(in oklch, var(--card), transparent 44%) !important;
  }

  .proto-saas #sdk [role='tabpanel'] > .border > div:last-child {
    padding: 1rem !important;
    background: color-mix(in oklch, var(--foreground), transparent 94%) !important;
  }

  .proto-saas #sdk pre {
    color: var(--foreground) !important;
  }

  .proto-saas :is(#loop, #performance, #topology-dag, #tokens) {
    background: var(--background) !important;
    color: var(--foreground) !important;
  }

  .proto-saas #loop :is(h2, h3, p, [style*='var(--cream)']) {
    color: var(--foreground) !important;
  }

  .proto-saas #loop [style*='var(--darker)'] {
    background: var(--tacet-panel-bg) !important;
  }

  .proto-saas #loop > .grid > div:first-child {
    padding-bottom: 1rem !important;
  }

  .proto-saas .proto-loop-callout {
    position: relative;
    z-index: 2;
    padding-top: 0.25rem !important;
    background: transparent !important;
  }

  .proto-saas .proto-loop-callout__panel {
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    border-radius: var(--radius-lg);
    background: var(--tacet-panel-bg);
    color: var(--foreground);
    backdrop-filter: blur(14px) saturate(1.12);
    box-shadow: var(--shadow-sm);
  }

  .proto-saas .proto-loop-callout__header {
    display: flex;
    min-height: 2rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--tacet-panel-border);
    padding: 0.875rem 1rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1;
  }

  .proto-saas .proto-loop-callout__header span:last-child {
    color: var(--org-on-light);
  }

  .proto-saas .proto-loop-callout__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: end;
    padding: 1.25rem 1rem;
  }

  .proto-saas .proto-loop-callout__body h2 em {
    color: color-mix(in oklch, var(--foreground), transparent 8%);
  }

  .proto-saas .proto-loop-callout__body p {
    max-width: 54ch;
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
  }

  .proto-saas .proto-loop-callout__steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 0.5rem;
    max-width: 18rem;
  }

  .proto-saas .proto-loop-callout__steps span {
    display: inline-flex;
    min-height: 1.875rem;
    align-items: center;
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 58%);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--card), transparent 32%);
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.38),
      0 0 0 2px color-mix(in oklch, var(--background), transparent 24%);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    padding: 0 0.75rem;
  }

  .proto-saas .proto-loop-footer {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: calc(100% - (2 * var(--tacet-section-pad-x))) !important;
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x))) !important;
    margin-inline: auto !important;
    margin-top: -2.25rem !important;
    box-sizing: border-box;
    border: 1px solid var(--tacet-panel-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: color-mix(in oklch, var(--beige-300), var(--background) 38%) !important;
    color: var(--foreground) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    padding-top: 1.625rem !important;
    text-transform: none !important;
    box-shadow: var(--shadow-md);
  }

  @media (max-width: 48rem) {
    .proto-saas .proto-loop-callout__body {
      grid-template-columns: 1fr;
    }

    .proto-saas .proto-loop-callout__steps {
      justify-content: start;
    }
  }

  .proto-saas
    :is(#loop, #performance, #topology-dag, #tokens, #memory, #architecture)
    :is(
      .grid.border,
      .flex.border,
      .overflow-hidden.border,
      .overflow-x-auto.border,
      .border-2.overflow-hidden
    ) {
    overflow: hidden;
    border-color: var(--tacet-panel-border) !important;
    border-width: 1px !important;
    border-radius: var(--radius-lg);
    background: var(--tacet-panel-bg) !important;
    color: var(--foreground) !important;
    backdrop-filter: blur(14px) saturate(1.12);
    box-shadow: var(--shadow-sm);
  }

  .proto-saas
    :is(#loop, #performance, #topology-dag, #tokens, #memory, #architecture)
    :is(
      .grid.border,
      .flex.border,
      .overflow-hidden.border,
      .overflow-x-auto.border,
      .border-2.overflow-hidden
    )
    > div {
    border-color: var(--tacet-panel-border) !important;
    background: transparent !important;
  }

  .proto-saas
    :is(#performance, #topology-dag, #tokens, #memory, #architecture)
    :is(.grid.border, .flex.border, .overflow-hidden.border, .overflow-x-auto.border)
    :is(h3, h4, .font-heading) {
    color: var(--foreground) !important;
  }

  .proto-saas
    :is(#performance, #topology-dag, #tokens, #memory, #architecture)
    :is(.grid.border, .flex.border, .overflow-hidden.border, .overflow-x-auto.border)
    :is(p, .font-mono, span, dt) {
    letter-spacing: 0 !important;
  }

  .proto-saas #tokens .proto-token-ledger-panel {
    position: relative;
    z-index: 2;
    margin-bottom: 0 !important;
    border-radius: var(--radius-lg);
  }

  .proto-saas #tokens .proto-cost-formula-panel {
    position: relative;
    z-index: 1;
    margin-top: -0.5rem;
    border-color: var(--tacet-panel-border) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: color-mix(in oklch, var(--beige-300), var(--background) 38%) !important;
    color: var(--foreground);
    padding: 1.25rem 1rem 0.875rem !important;
    box-shadow: var(--shadow-md);
  }

  .proto-saas #tokens .proto-cost-formula-panel > span {
    display: block;
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin-bottom: 0.25rem !important;
    text-transform: none !important;
  }

  .proto-saas #tokens .proto-cost-formula-panel pre {
    margin-top: 0.25rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
  }

  .proto-saas .hero-side {
    align-self: center;
    gap: 1rem;
  }

  .proto-saas .hero-side__panel {
    width: min(100%, 25rem);
    transition: transform 180ms linear;
    will-change: transform;
  }

  .proto-saas .hero-side__panel--prepend {
    transform: translate3d(0, calc(var(--tacet-hero-parallax, 0px) * -0.35), 0);
    display: block;
  }

  .proto-saas .hero-side__panel--main {
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--background), transparent 18%) !important;
    backdrop-filter: blur(14px) saturate(1.12);
    padding: 0.875rem 1rem !important;
    transform: translate3d(0, calc(var(--tacet-hero-parallax, 0px) * 0.45), 0);
  }

  .proto-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
  }

  .proto-saas .hero-side__panel--main > .proto-side-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .proto-side-header span:last-child {
    color: var(--org-on-light);
  }

  .proto-metrics-panel {
    min-height: 10.75rem;
    overflow: hidden;
    border: 1px solid color-mix(in oklch, var(--border), transparent 10%);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--background), transparent 22%);
    backdrop-filter: blur(14px) saturate(1.12);
    padding: 0.875rem 1rem;
  }

  .proto-metric-row {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .proto-metric-row--last {
    border-bottom: 0;
  }

  .proto-metric-value {
    font-family: var(--font-body);
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1;
    tab-size: 4;
  }

  .proto-metric-label {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 560;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: right;
  }

  .proto-loop-card {
    display: grid;
    gap: 0.875rem;
  }

  .proto-loop-diagram {
    display: grid;
    min-height: 11.25rem;
    padding-top: 0.5rem;
    place-items: center;
  }

  .proto-loop-ring {
    position: relative;
    width: 11.25rem;
    height: 11.25rem;
  }

  .proto-loop-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .proto-loop-svg circle {
    stroke: color-mix(in oklch, var(--foreground), transparent 84%);
    stroke-width: 1.5;
    fill: color-mix(in oklch, var(--foreground), transparent 97%);
  }

  .proto-loop-center {
    position: absolute;
    z-index: 3;
    inset: 50% auto auto 50%;
    display: grid;
    min-width: 4rem;
    gap: 0.25rem;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .proto-loop-core {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 820;
    line-height: 0.9;
  }

  .proto-loop-core-label {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 560;
    line-height: 1;
  }

  .proto-loop-node {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    min-height: 1.875rem;
    align-items: center;
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 42%);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--card), var(--foreground) 3%);
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.42),
      0 0 0 1px color-mix(in oklch, var(--foreground), transparent 86%),
      0 0 0 3px color-mix(in oklch, var(--background), transparent 22%),
      0 10px 20px -14px rgb(0 0 0 / 0.55);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.71875rem;
    font-weight: 690;
    letter-spacing: 0;
    line-height: 1;
    padding: 0 0.75rem;
    white-space: nowrap;
    isolation: isolate;
  }

  .proto-loop-node::before {
    content: '';
    position: absolute;
    inset: -0.1875rem;
    z-index: -1;
    border-radius: inherit;
    background: color-mix(in oklch, var(--background), transparent 10%);
  }

  .proto-loop-node--observe {
    top: -0.375rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .proto-loop-node--reason {
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }

  .proto-loop-node--act {
    bottom: -0.375rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .proto-loop-node--iterate {
    top: 50%;
    left: -1.35rem;
    transform: translateY(-50%);
  }

  .proto-loop-node__tick {
    position: absolute;
    z-index: -2;
    width: 0.5rem;
    height: 0.5rem;
    background: color-mix(in oklch, var(--foreground), transparent 28%);
  }

  .proto-loop-node__tick--down {
    bottom: -0.7rem;
    left: 50%;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: translateX(-50%);
  }

  .proto-loop-node__tick--up {
    top: -0.7rem;
    left: 50%;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    transform: translateX(-50%);
  }

  .proto-loop-node__tick--left {
    top: 50%;
    left: -0.7rem;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    transform: translateY(-50%);
  }

  .proto-loop-node__tick--right {
    top: 50%;
    right: -0.7rem;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    transform: translateY(-50%);
  }

  .proto-loop-arrow {
    position: absolute;
    z-index: 2;
    width: 0;
    height: 0;
    opacity: 0.7;
  }

  .proto-loop-arrow--tr {
    top: 18%;
    right: 14%;
    border-right: 0.35rem solid transparent;
    border-left: 0.35rem solid transparent;
    border-bottom: 0.5rem solid color-mix(in oklch, var(--foreground), transparent 68%);
    transform: rotate(45deg);
  }

  .proto-loop-arrow--br {
    right: 14%;
    bottom: 18%;
    border-right: 0.35rem solid transparent;
    border-left: 0.35rem solid transparent;
    border-top: 0.5rem solid color-mix(in oklch, var(--foreground), transparent 68%);
    transform: rotate(-45deg);
  }

  .proto-loop-arrow--bl {
    bottom: 18%;
    left: 14%;
    border-right: 0.35rem solid transparent;
    border-left: 0.35rem solid transparent;
    border-top: 0.5rem solid color-mix(in oklch, var(--foreground), transparent 68%);
    transform: rotate(45deg);
  }

  .proto-loop-arrow--tl {
    top: 18%;
    left: 14%;
    border-right: 0.35rem solid transparent;
    border-left: 0.35rem solid transparent;
    border-bottom: 0.5rem solid color-mix(in oklch, var(--foreground), transparent 68%);
    transform: rotate(-45deg);
  }

  .proto-loop-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  .proto-loop-detail {
    display: grid;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
  }

  .proto-loop-detail:nth-child(odd) {
    border-right: 1px solid var(--border);
  }

  .proto-loop-detail:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .proto-loop-detail__label {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.65625rem;
    font-weight: 560;
    line-height: 1;
  }

  .proto-loop-detail__value {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 720;
    line-height: 1.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");
  }

  /* -- 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%);
    }
  }

  /* -- 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: 1;
    transform: none;
  }
  [data-observe='reveal'].observed,
  [data-observe='reveal-up'].observed,
  [data-observe~='reveal'].observed,
  [data-observe~='reveal-up'].observed {
    animation: tacet-observed-reveal var(--duration-slow) var(--ease-decelerate) both;
    animation-delay: calc(var(--stagger-index, 0) * var(--stagger-fast, 80ms));
  }

  @keyframes tacet-observed-reveal {
    from {
      opacity: 0.82;
      transform: translateY(1rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-observe='reveal'].observed,
    [data-observe='reveal-up'].observed,
    [data-observe~='reveal'].observed,
    [data-observe~='reveal-up'].observed {
      animation: none;
    }
  }

  /* -- 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: var(--shadow-1);
  }
  .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) — primary + 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(--primary);
    border-bottom-color: var(--primary);
  }
  .nav-primary-link--current,
  .nav-primary-link--current:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
  }
  .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: var(--background);
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity var(--duration-normal) var(--ease-standard),
      transform var(--duration-normal) var(--ease-standard),
      visibility 0s linear var(--duration-normal);
    transform: translateY(-10px);
    /* Belt-and-braces against overscroll bleed into the body. Body scroll
       is also locked in JS while the menu is open (mobile-menu.js
       lockBodyScroll), but this prevents iOS rubber-band + Android pull-
       to-refresh from triggering on the overlay itself. */
    overscroll-behavior: contain;
  }
  #mobile-menu[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition:
      opacity var(--duration-normal) var(--ease-standard),
      transform var(--duration-normal) var(--ease-standard),
      visibility 0s linear 0s;
  }
  .mobile-menu-shell {
    --mobile-menu-scroll-thumb-size: 2rem;
    --mobile-menu-scroll-thumb-offset: 0px;
    --mobile-menu-scroll-track: color-mix(in oklch, var(--beige-500), transparent 78%);
    --mobile-menu-scroll-thumb: var(--beige-600);
    width: 100%;
    /* Cap to viewport minus the wrapper's 2rem padding so the shell never
       exceeds the visible area. Internal scroll lives on .mobile-menu-main
       below, not here — that way the footer (Sign In CTA) stays pinned at
       the bottom of the shell while brand + items scroll independently. */
    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 oklch, var(--background), var(--primary) 13%) 0%,
        var(--background) 18%
      ),
      var(--background);
    box-shadow: 10px 10px 0 color-mix(in oklch, var(--border), transparent 22%);
    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 oklch, var(--beige-300), transparent 76%);
    --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 actual scroll container. The shell's flex layout pins
       the footer at the bottom (flex: 0 0 auto), so the shell's own
       overflow doesn't engage when content inside main overflows. Make
       main scroll its own children (brand + links) so:
         - footer stays pinned at the shell's bottom edge
         - brand + items scroll independently
         - users always see the Sign In CTA regardless of scroll position
       Same scrollbar styling as the shell so the affordance is consistent. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--border), transparent 30%) 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 oklch, var(--border), transparent 30%);
    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 oklch, var(--border) 92%, transparent);
    background: color-mix(in oklch, var(--background) 82%, var(--beige-50) 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(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 6px 6px 0 color-mix(in oklch, var(--border), transparent 15%);
    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` pushed the group to the bottom of .mobile-menu-main
       for the desktop-aesthetic of "brand above, items above the footer",
       but on short viewports the auto-margin collapses and items get
       visually crushed 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 at the default font-size. The shell is full-bleed on the
       inline axis, so the feedback band naturally reaches 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 oklch, var(--border), transparent 8%);
    font-family: var(--font-heading);
    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) — keeps
       full-row layout identical to anchor variants. */
    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 the visible
       state change. visible-system-state heuristic — Nielsen #1. */
    -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 browsers (Safari iOS) where
       :active terminates on touchend before the flash can register. Class
       lingers ~180ms after pointerup so the band is visible. */
    background: color-mix(in oklch, var(--background), var(--primary) 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(--primary);
  }
  .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(--primary);
  }
  .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 oklch, var(--border), transparent 8%);
  }
  @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 {
    --catalog-category-accent: var(--catalog-taxonomy-accent, var(--cat-default));

    background: var(--card-bg);
    color: var(--card-fg);
    isolation: isolate;
    outline: 0;
    transition:
      filter 360ms var(--ease-standard),
      box-shadow 420ms var(--ease-standard),
      transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  a.catalog-card,
  .catalog-card--link {
    text-decoration: none;
  }
  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);
    transform: translateY(-3px) scale(1.018);
    z-index: 5;
    box-shadow:
      inset 0 0 0 2px color-mix(in oklch, var(--beige-50), transparent 75%),
      0 0 24px color-mix(in oklch, var(--ink-deep), transparent 30%);
  }
  .catalog-card:has(> .catalog-card__hit-target:focus-visible) {
    z-index: 6;
    box-shadow:
      inset 0 0 0 2px var(--ring),
      0 0 0 3px color-mix(in oklch, var(--background), transparent 25%);
  }
  .catalog-card:active {
    transform: translateY(0) scale(1.006);
    filter: brightness(1.04);
  }

  .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-media {
    color: var(--cream);
  }

  .catalog-card--has-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 16%) 42%, rgb(0 0 0 / 82%) 100%),
      linear-gradient(90deg, rgb(0 0 0 / 24%) 0%, rgb(0 0 0 / 0%) 54%),
      repeating-linear-gradient(
        0deg,
        rgb(255 255 255 / 5%) 0,
        rgb(255 255 255 / 5%) 1px,
        transparent 1px,
        transparent 9px
      );
  }

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

  .catalog-card-media {
    overflow: hidden;
    border-radius: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    transform: scale(1.04);
    filter: saturate(1.08) contrast(1.12) brightness(0.94);
    transition: transform 720ms var(--ease-signature);
  }

  .catalog-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

  .catalog-card--has-media .pat-dots,
  .catalog-card--has-media .pat-lines,
  .catalog-card--has-media .pat-mesh,
  .catalog-card--has-media .pat-diag {
    z-index: 2;
    color: var(--primary-foreground);
    mix-blend-mode: overlay;
  }

  .catalog-card:hover .catalog-card-media {
    transform: scale(1.1);
  }

  /* -- Catalog track wrapper + inline scroll buttons ---------------------- */
  .catalog-track-wrap {
    --catalog-rail-pad-x: clamp(0.5rem, 1.6vw, 2rem);
    --catalog-rail-pad-top: clamp(1rem, 1.25vw, 1.35rem);
    --catalog-rail-pad-bottom: 6rem;

    position: relative;
    margin-top: 0;
    margin-bottom: -3rem;
  }

  .catalog-inline-scroll {
    display: none; /* shown via JS */
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(5.5rem, 10vw, 8.5rem);
    z-index: 90;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: white;
    opacity: 1;
    pointer-events: auto;
    text-shadow: 0 2px 18px rgb(0 0 0 / 75%);
    transition:
      opacity 0.18s var(--ease-standard),
      transform 0.24s var(--ease-standard);
  }

  .catalog-inline-scroll[data-dir='left'] {
    left: 0;
    background: linear-gradient(
      90deg,
      rgb(0 0 0 / 96%) 0%,
      rgb(0 0 0 / 72%) 52%,
      rgb(0 0 0 / 0) 100%
    );
    transform: translateX(0);
  }

  .catalog-inline-scroll[data-dir='right'] {
    right: 0;
    background: linear-gradient(
      270deg,
      rgb(0 0 0 / 96%) 0%,
      rgb(0 0 0 / 72%) 52%,
      rgb(0 0 0 / 0) 100%
    );
    transform: translateX(0);
  }

  .catalog-track-wrap:hover .catalog-inline-scroll,
  .catalog-track-wrap:focus-within .catalog-inline-scroll {
    opacity: 0.96;
  }

  .catalog-inline-scroll:hover {
    opacity: 1;
  }

  .catalog-inline-scroll svg {
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 95%)) drop-shadow(0 4px 16px rgb(0 0 0 / 95%));
    stroke-width: 2.1;
    transition: transform 0.16s var(--ease-standard);
  }

  .catalog-inline-scroll:hover svg,
  .catalog-inline-scroll:focus-visible svg {
    transform: scale(1.08);
  }

  .catalog-row-progress[hidden] {
    display: none;
  }

  .catalog-row-progress {
    --catalog-scroll-thumb-left: 0%;
    --catalog-scroll-thumb-width: 18%;
    position: absolute;
    right: clamp(1.5rem, 5vw, 4rem);
    bottom: 0.9rem;
    z-index: 11;
    width: clamp(7rem, 18vw, 15rem);
    height: 0.2rem;
    opacity: 0.62;
    pointer-events: none;
    transition: opacity 0.18s var(--ease-standard);
  }

  .catalog-row-progress-track {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: rgb(255 255 255 / 24%);
  }

  .catalog-row-progress-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--catalog-scroll-thumb-left);
    width: var(--catalog-scroll-thumb-width);
    background: var(--red);
    transform: translateZ(0);
    transition: background 0.18s var(--ease-standard);
  }

  .catalog-track-wrap:hover .catalog-row-progress,
  .catalog-track-wrap:focus-within .catalog-row-progress {
    opacity: 1;
  }
  /* -- Catalog scroll dots ------------------------------------------------ */
  .catalog-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    background: transparent;
  }

  .catalog-dot::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.9rem;
    height: 0.2rem;
    border-radius: 999px;
    background: var(--foreground);
    content: '';
    opacity: 0.22;
    transform: translate(-50%, -50%);
    transition:
      width var(--duration-fast) var(--ease-standard),
      opacity var(--duration-fast) var(--ease-standard);
  }

  .catalog-dot--active::before {
    width: 1.55rem;
    opacity: 1;
  }

  /* -- Catalog filter bar ------------------------------------------------- */
  #catalog-filter-bar {
    --catalog-filter-stuck-inset: clamp(var(--space-3), 3vw, var(--space-8));
    --catalog-filter-stuck-width: min(
      calc(
        var(--tacet-nav-bar-width, var(--tacet-nav-width-scrolled)) -
          var(--catalog-filter-stuck-inset)
      ),
      calc(100vw - (2 * var(--space-3)))
    );
    --catalog-filter-stuck-left: calc((100vw - var(--catalog-filter-stuck-width)) / 2);

    position: sticky;
    top: var(--tacet-nav-bottom, var(--chrome-height));
    width: 100%;
    margin-inline: auto;
    min-height: 3.5rem;
    overflow: visible;
    border-bottom: 1px solid var(--border);
    background: var(--background);
    transition:
      border-color var(--duration-normal) var(--ease-standard),
      background var(--duration-normal) var(--ease-standard);
  }

  #catalog-filter-bar[data-stuck='true'] {
    min-height: 3.5rem;
    border-bottom: 0;
    background: transparent !important;
  }

  .catalog-filter-shell {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    align-items: stretch;
    overflow: hidden;
    background: transparent;
    transition:
      border-radius var(--duration-normal) var(--ease-standard),
      background var(--duration-normal) var(--ease-standard),
      box-shadow var(--duration-normal) var(--ease-standard),
      backdrop-filter var(--duration-normal) var(--ease-standard);
  }

  .catalog-filter-shell--transitioning {
    will-change: transform;
  }

  #catalog-filter-bar[data-stuck='true'] .catalog-filter-shell {
    position: fixed;
    top: calc(var(--tacet-nav-bottom, var(--chrome-height)) - 0.625rem);
    left: var(--catalog-filter-stuck-left);
    z-index: 57;
    width: var(--catalog-filter-stuck-width);
    max-width: var(--catalog-filter-stuck-width);
    min-height: 3.625rem;
    padding-top: 0.625rem;
    border: 1px solid var(--border);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    background: color-mix(in oklch, var(--background) 88%, transparent) !important;
    box-shadow: var(--tacet-shadow-sm);
    backdrop-filter: blur(14px) saturate(1.12);
  }

  .catalog-filter-track::-webkit-scrollbar {
    display: none;
  }

  .catalog-filter-track {
    min-width: 0;
    overflow-y: hidden;
    scrollbar-width: none;
    justify-content: flex-start;
  }

  .catalog-filter-scroll {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    border: 0;
    border-inline-end: 1px solid var(--border);
    background: linear-gradient(
      to right,
      var(--background) 0%,
      var(--background) 68%,
      transparent 100%
    );
    color: var(--org-on-light);
  }

  .catalog-filter-scroll[data-dir='right'] {
    right: 0;
    left: auto;
    border-inline: 1px solid var(--border) 0;
    background: linear-gradient(
      to left,
      var(--background) 0%,
      var(--background) 68%,
      transparent 100%
    );
  }

  .catalog-filter-scroll__icon {
    width: 0.875rem;
    height: 0.875rem;
  }

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

  #catalog-filter-bar[data-stuck='true'] .catalog-filter-scroll {
    padding-top: 0.625rem;
    background: color-mix(in oklch, var(--background) 88%, transparent);
  }

  /* -- 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(--catalog-taxonomy-accent, var(--cat-default));
    --home-category-accent: var(--btn-color);

    position: relative;
    display: inline-flex;
    min-height: 3.5rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-1);
    border-inline-end: 1px solid var(--border);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    color: var(--text-m);
    font-size: 0.875rem;
    font-weight: 560;
    line-height: 1;
    text-decoration: none;
    transition:
      background var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

  .catalog-filter-btn__label {
    color: var(--foreground);
  }

  .catalog-filter-btn__count {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    line-height: 1;
  }

  .catalog-filter-btn:hover {
    background: color-mix(in oklch, var(--btn-color) 12%, transparent) !important;
    color: var(--foreground) !important;
  }

  .catalog-filter-btn::after {
    content: '';
    position: absolute;
    right: 0.625rem;
    bottom: 0;
    left: 0.625rem;
    height: 3px;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    background: var(--org-on-light);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition:
      opacity var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .catalog-filter-btn[aria-current='page'],
  .catalog-filter-btn--current,
  .catalog-filter-btn--scroll-active {
    background: transparent !important;
    color: var(--org-on-light) !important;
    font-weight: 650;
  }

  .catalog-filter-btn[aria-current='page'] .catalog-filter-btn__label,
  .catalog-filter-btn--current .catalog-filter-btn__label,
  .catalog-filter-btn--scroll-active .catalog-filter-btn__label {
    color: var(--org-on-light);
  }

  .catalog-filter-btn[aria-current='page']::after,
  .catalog-filter-btn--current::after,
  .catalog-filter-btn--scroll-active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  #catalog-filter-bar[data-scroll-active]
    .catalog-filter-btn[aria-current='page']:not(.catalog-filter-btn--scroll-active) {
    background: transparent !important;
    color: var(--text-m) !important;
    font-weight: 560;
  }

  #catalog-filter-bar[data-scroll-active]
    .catalog-filter-btn[aria-current='page']:not(.catalog-filter-btn--scroll-active)
    .catalog-filter-btn__label {
    color: var(--foreground);
  }

  #catalog-filter-bar[data-scroll-active]
    .catalog-filter-btn[aria-current='page']:not(.catalog-filter-btn--scroll-active)::after {
    opacity: 0;
    transform: scaleX(0);
  }

  .catalog-filter-btn:active {
    background: color-mix(in oklch, var(--btn-color) 18%, transparent) !important;
  }
  .catalog-filter-btn:focus-visible,
  .catalog-filter-scroll:focus-visible,
  .catalog-scroll-btn:focus-visible,
  .catalog-inline-scroll:focus-visible {
    outline: var(--outline-width) solid var(--ring);
    outline-offset: -2px;
  }

  /* Center buttons only after JS has confirmed that every item fits. */
  .catalog-filter-track.is-fit {
    justify-content: center;
  }

  /* One taxonomy mapping feeds filters, cards, and home category tags. */
  .catalog-filter-btn[data-filter='all'],
  .home-category-tag--all {
    --catalog-taxonomy-accent: var(--cat-all);
  }
  .catalog-filter-btn[data-filter='erp'],
  .catalog-card[data-app-cat-id='erp'],
  .home-category-tag[data-home-category-id='erp'] {
    --catalog-taxonomy-accent: var(--cat-erp);
  }
  .catalog-filter-btn[data-filter='crm'],
  .catalog-card[data-app-cat-id='crm'],
  .home-category-tag[data-home-category-id='crm'] {
    --catalog-taxonomy-accent: var(--cat-crm);
  }
  .catalog-filter-btn[data-filter='marketing'],
  .catalog-card[data-app-cat-id='marketing'],
  .home-category-tag[data-home-category-id='marketing'] {
    --catalog-taxonomy-accent: var(--cat-marketing);
  }
  .catalog-filter-btn[data-filter='hrms'],
  .catalog-card[data-app-cat-id='hrms'],
  .home-category-tag[data-home-category-id='hrms'] {
    --catalog-taxonomy-accent: var(--cat-hrms);
  }
  .catalog-filter-btn[data-filter='scm'],
  .catalog-card[data-app-cat-id='scm'],
  .home-category-tag[data-home-category-id='scm'] {
    --catalog-taxonomy-accent: var(--cat-scm);
  }
  .catalog-filter-btn[data-filter='fin'],
  .catalog-card[data-app-cat-id='fin'],
  .home-category-tag[data-home-category-id='fin'] {
    --catalog-taxonomy-accent: var(--cat-fin);
  }
  .catalog-filter-btn[data-filter='pm'],
  .catalog-card[data-app-cat-id='pm'],
  .home-category-tag[data-home-category-id='pm'] {
    --catalog-taxonomy-accent: var(--cat-pm);
  }
  .catalog-filter-btn[data-filter='health'],
  .catalog-card[data-app-cat-id='health'],
  .home-category-tag[data-home-category-id='health'] {
    --catalog-taxonomy-accent: var(--cat-health);
  }
  .catalog-filter-btn[data-filter='edu'],
  .catalog-card[data-app-cat-id='edu'],
  .home-category-tag[data-home-category-id='edu'] {
    --catalog-taxonomy-accent: var(--cat-edu);
  }
  .catalog-filter-btn[data-filter='retail'],
  .catalog-card[data-app-cat-id='retail'],
  .home-category-tag[data-home-category-id='retail'] {
    --catalog-taxonomy-accent: var(--cat-retail);
  }
  .catalog-filter-btn[data-filter='mfg'],
  .catalog-card[data-app-cat-id='mfg'],
  .home-category-tag[data-home-category-id='mfg'] {
    --catalog-taxonomy-accent: var(--cat-mfg);
  }
  .catalog-filter-btn[data-filter='legal'],
  .catalog-card[data-app-cat-id='legal'],
  .home-category-tag[data-home-category-id='legal'] {
    --catalog-taxonomy-accent: var(--cat-legal);
  }
  .catalog-filter-btn[data-filter='govt'],
  .catalog-card[data-app-cat-id='govt'],
  .home-category-tag[data-home-category-id='govt'] {
    --catalog-taxonomy-accent: var(--cat-govt);
  }
  .catalog-filter-btn[data-filter='it'],
  .catalog-card[data-app-cat-id='it'],
  .home-category-tag[data-home-category-id='it'] {
    --catalog-taxonomy-accent: var(--cat-it);
  }
  .catalog-filter-btn[data-filter='support'],
  .catalog-card[data-app-cat-id='support'],
  .home-category-tag[data-home-category-id='support'] {
    --catalog-taxonomy-accent: var(--cat-support);
  }
  .catalog-filter-btn[data-filter='realestate'],
  .catalog-card[data-app-cat-id='realestate'],
  .home-category-tag[data-home-category-id='realestate'] {
    --catalog-taxonomy-accent: var(--cat-realestate);
  }
  .catalog-filter-btn[data-filter='hotel'],
  .catalog-card[data-app-cat-id='hotel'],
  .home-category-tag[data-home-category-id='hotel'] {
    --catalog-taxonomy-accent: var(--cat-hotel);
  }
  .catalog-filter-btn[data-filter='food'],
  .catalog-card[data-app-cat-id='food'],
  .home-category-tag[data-home-category-id='food'] {
    --catalog-taxonomy-accent: var(--cat-food);
  }
  .catalog-filter-btn[data-filter='transport'],
  .catalog-card[data-app-cat-id='transport'],
  .home-category-tag[data-home-category-id='transport'] {
    --catalog-taxonomy-accent: var(--cat-transport);
  }
  .catalog-filter-btn[data-filter='agri'],
  .catalog-card[data-app-cat-id='agri'],
  .home-category-tag[data-home-category-id='agri'] {
    --catalog-taxonomy-accent: var(--cat-agri);
  }
  .catalog-filter-btn[data-filter='media'],
  .catalog-card[data-app-cat-id='media'],
  .home-category-tag[data-home-category-id='media'] {
    --catalog-taxonomy-accent: var(--cat-media);
  }
  .catalog-filter-btn[data-filter='energy'],
  .catalog-card[data-app-cat-id='energy'],
  .home-category-tag[data-home-category-id='energy'] {
    --catalog-taxonomy-accent: var(--cat-energy);
  }
  .catalog-filter-btn[data-filter='bank'],
  .catalog-card[data-app-cat-id='bank'],
  .home-category-tag[data-home-category-id='bank'] {
    --catalog-taxonomy-accent: var(--cat-bank);
  }
  .catalog-filter-btn[data-filter='insure'],
  .catalog-card[data-app-cat-id='insure'],
  .home-category-tag[data-home-category-id='insure'] {
    --catalog-taxonomy-accent: var(--cat-insure);
  }
  .catalog-filter-btn[data-filter='ngo'],
  .catalog-card[data-app-cat-id='ngo'],
  .home-category-tag[data-home-category-id='ngo'] {
    --catalog-taxonomy-accent: var(--cat-ngo);
  }
  .catalog-filter-btn[data-filter='salon'],
  .catalog-card[data-app-cat-id='salon'],
  .home-category-tag[data-home-category-id='salon'] {
    --catalog-taxonomy-accent: var(--cat-salon);
  }
  .catalog-filter-btn[data-filter='sports'],
  .catalog-card[data-app-cat-id='sports'],
  .home-category-tag[data-home-category-id='sports'] {
    --catalog-taxonomy-accent: var(--cat-sports);
  }
  .catalog-filter-btn[data-filter='events'],
  .catalog-card[data-app-cat-id='events'],
  .home-category-tag[data-home-category-id='events'] {
    --catalog-taxonomy-accent: var(--cat-events);
  }
  .catalog-filter-btn[data-filter='warehouse'],
  .catalog-card[data-app-cat-id='warehouse'],
  .home-category-tag[data-home-category-id='warehouse'] {
    --catalog-taxonomy-accent: var(--cat-warehouse);
  }
  .catalog-filter-btn[data-filter='workflow'],
  .catalog-card[data-app-cat-id='workflow'],
  .home-category-tag[data-home-category-id='workflow'] {
    --catalog-taxonomy-accent: var(--cat-workflow);
  }
  .catalog-filter-btn[data-filter='analytics'],
  .catalog-card[data-app-cat-id='analytics'],
  .home-category-tag[data-home-category-id='analytics'] {
    --catalog-taxonomy-accent: var(--cat-analytics);
  }
  .catalog-filter-btn[data-filter='combo'],
  .catalog-card[data-app-cat-id='combo'],
  .home-category-tag[data-home-category-id='combo'] {
    --catalog-taxonomy-accent: var(--cat-combo);
  }

  /* -- Catalog row headers + card badges ---------------------------------- */
  .catalog-row {
    scroll-margin-top: calc(
      var(--chrome-height, 4.5rem) + var(--tacet-page-nav-height, 3.25rem) + 1.25rem
    );
    position: relative;
    content-visibility: auto;
    contain-intrinsic-size: auto 27rem;
  }

  .catalog-row--card-hovered {
    z-index: 4;
    content-visibility: visible;
  }

  .catalog-row--after-card-hover {
    z-index: 5;
    content-visibility: visible;
  }

  .catalog-row-header {
    --row-accent: var(--cat-default);
    --row-line: var(--tacet-panel-border, color-mix(in oklch, var(--border), transparent 12%));
    --row-accent-quiet: color-mix(in oklch, var(--row-accent), transparent 82%);
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: visible;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(1.25rem, 3vw, 3rem);
    row-gap: 0.85rem;
    align-items: start;
    min-height: auto;
    border-top: 0;
    background: transparent;
  }

  .catalog-row-header::before,
  .catalog-row-header::after {
    content: none;
  }

  .catalog-row-copy {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.62rem clamp(0.75rem, 1.45vw, 1.15rem);
  }

  .catalog-row-heading {
    display: block !important;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    line-height: var(--tacet-type-heading-lh, 1.08);
  }

  .catalog-row-title,
  .home-catalog-results__heading {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
  }

  @media (min-width: 48rem) {
    .catalog-row-title,
    .home-catalog-results__heading {
      font-size: var(--text-3xl);
    }
  }

  .catalog-row-title {
    display: flex;
    max-width: none;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--foreground);
    text-transform: none;
    text-wrap: balance;
    white-space: nowrap;
  }

  .catalog-row-title__icon {
    width: 0.95em;
    height: 0.95em;
    flex: none;
    color: var(--row-accent);
    stroke-width: 2;
  }

  .catalog-row-title__label {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
  }

  .catalog-row-count {
    display: inline-grid;
    grid-template-columns: minmax(0, auto) auto;
    align-items: center;
    overflow: hidden;
    width: fit-content;
    max-width: min(100%, 28rem);
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 560;
    grid-column: 2;
    grid-row: 1;
    letter-spacing: 0;
    line-height: 1.1;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    cursor: pointer;
    appearance: none;
    gap: 0;
    transform: translateY(0.04em);
    transition:
      border-color 160ms var(--ease-standard),
      color 0.16s var(--ease-standard),
      transform 0.16s var(--ease-standard);
  }

  .catalog-row-count:hover {
    color: var(--foreground);
    transform: translateY(0.04em);
  }

  .catalog-row-count:focus-visible {
    border-radius: 0.5rem;
    outline: 2px solid color-mix(in oklch, var(--row-accent), var(--foreground) 10%);
    outline-offset: 0.45rem;
  }

  .catalog-row-count__rail {
    display: none;
  }

  .catalog-row-count__copy {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
  }

  .catalog-row-count__total {
    display: block;
    min-width: 0;
    color: color-mix(in oklch, var(--foreground), var(--row-accent) 22%);
    font-size: inherit;
    font-weight: 700;
    line-height: 1.1;
  }

  .catalog-row-count__separator {
    display: none;
    color: var(--row-accent-quiet);
    font-weight: 850;
    line-height: 1;
  }

  .catalog-row-count__coverage {
    display: none;
  }

  .catalog-row-count .catalog-row-count__arrow {
    flex-shrink: 0;
    display: inline-grid;
    width: 2.15rem;
    height: auto;
    min-height: 1.75rem;
    align-self: stretch;
    place-items: center;
    border: 0;
    border-inline-start: 1px solid var(--catalog-row-count-divider-color);
    border-radius: 0 calc(var(--catalog-row-count-radius) - 1px)
      calc(var(--catalog-row-count-radius) - 1px) 0;
    background: transparent;
    color: color-mix(in oklch, var(--row-accent), var(--foreground) 12%);
    transition:
      color 180ms var(--ease-standard),
      transform 180ms var(--ease-decelerate);
  }

  .catalog-row-tools {
    position: static;
    z-index: 2;
    flex-shrink: 0;
    align-self: start;
    justify-self: end;
    max-inline-size: min(14rem, 32vw);
    overflow: hidden;
    padding-top: clamp(0.78rem, 0.95vw, 0.98rem);
    padding-bottom: 0;
    transform: none;
  }

  .catalog-card-badge {
    display: inline-flex;
    align-self: flex-start;
    max-width: calc(100% - 1.5rem);
    align-items: center;
    min-height: 1.35rem;
    padding: 0.24rem 0.45rem;
    border: 1px solid color-mix(in oklch, var(--tacet-saas-accent, var(--red)), transparent 34%);
    border-radius: 2px;
    background: color-mix(in oklch, var(--tacet-saas-accent, var(--red)), black 8%);
    box-shadow: none;
    color: white;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 760;
    letter-spacing: 0.075em;
    line-height: 1;
    pointer-events: none;
    text-transform: uppercase;
    transform: translateZ(0);
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .catalog-card:hover .catalog-card-badge {
    transform: translateY(-1px);
  }

  .catalog-card__persistent-badges {
    position: absolute;
    z-index: 7;
    top: 0;
    right: clamp(0.75rem, 1vw, 1rem);
    display: flex;
    pointer-events: none;
    transform: scaleX(var(--catalog-arrow-x-comp)) scaleY(var(--catalog-arrow-y-comp));
    transform-origin: right top;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .catalog-card-category-pill,
  .catalog-card-recent-tag {
    display: inline-flex;
    min-height: 1.35rem;
    align-items: center;
    overflow: hidden;
    border-radius: var(--radius-xs);
    padding: 0.24rem 0.45rem;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .catalog-card-category-pill,
  .home-category-tag__face {
    --category-tint-border: color-mix(in oklch, var(--category-tint-accent), transparent 78%);
    --category-tint-fill: color-mix(in oklch, var(--category-tint-accent), transparent 94%);

    border: 1px solid var(--category-tint-border);
  }

  .catalog-card-category-pill {
    --category-tint-accent: var(--catalog-category-accent);

    min-width: 0;
    border-color: color-mix(in oklch, var(--catalog-category-accent), black 18%);
    background: var(--catalog-category-accent);
    color: var(--cat-on);
    font-family: var(--font-catalog-display);
    font-size: clamp(0.68rem, 2.6cqw, 0.75rem);
  }

  .catalog-card__rest-copy .catalog-card-category-pill,
  .catalog-card__overlay-copy .catalog-card-category-pill {
    width: max-content;
    max-width: 100%;
    flex: none;
    align-self: flex-start;
  }

  .catalog-card__overlay-copy .catalog-card-category-pill {
    max-width: none;
  }

  .catalog-card-recent-tag {
    flex: none;
    border: 1px solid color-mix(in oklch, var(--red), transparent 34%);
    background: color-mix(in oklch, var(--red), black 8%);
    color: white;
  }

  .catalog-card-category-pill[hidden],
  .catalog-card-recent-tag[hidden] {
    display: none;
  }

  /* -- Catalog gallery adaptation ---------------------------------------- */
  .catalog-scroll-track--gallery {
    display: grid;
    grid-auto-columns: minmax(18.5rem, 84vw);
    grid-auto-flow: column;
    gap: 0.625rem;
    align-items: start;
    overflow-x: auto;
    overflow-y: clip;
    overflow-clip-margin: 100px;
    padding: var(--catalog-rail-pad-top) var(--catalog-rail-pad-x) var(--catalog-rail-pad-bottom);
    background: var(--background);
    scroll-padding-inline: var(--catalog-rail-pad-x);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .catalog-scroll-track--gallery::-webkit-scrollbar {
    display: none;
  }

  .catalog-scroll-track--gallery[data-catalog-layout='mixed'] {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .catalog-scroll-track--gallery > .catalog-card {
    --catalog-card-radius: 6px;
    --catalog-hover-transform: translateX(0) translateY(0) scaleX(1) scaleY(1);
    --catalog-card-hover-shadow:
      0 1px 2px rgb(18 15 12 / 0.14),
      0 14px 34px -26px color-mix(in oklch, var(--ink-deep), transparent 66%);
    --catalog-image-y-comp: 1;
    --catalog-content-x-comp: 1;
    --catalog-arrow-x-comp: 1;
    --catalog-arrow-y-comp: 1;
    --catalog-parallax-x: 0px;
    --catalog-parallax-y: 0px;
    --catalog-card-hover-enter-duration: 240ms;
    --catalog-card-hover-exit-duration: 140ms;
    --catalog-card-backdrop-duration: 220ms;
    --catalog-card-hover-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --catalog-card-hover-move-ease: cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 430 / 262;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--catalog-card-radius);
    clip-path: inset(0 round var(--catalog-card-radius));
    background: var(--card-bg);
    color: white;
    container-type: inline-size;
    cursor: pointer;
    isolation: isolate;
    outline: 0;
    scroll-snap-align: start;
    transform: translateZ(0);
    transform-origin: center center;
    transition:
      opacity 260ms var(--ease-decelerate),
      filter 180ms var(--catalog-card-hover-enter-ease),
      box-shadow 200ms var(--catalog-card-hover-enter-ease),
      transform 260ms var(--catalog-card-hover-move-ease);
    user-select: none;
    touch-action: pan-x pan-y;
    -webkit-mask-image: linear-gradient(#fff 0 0);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
  }

  .catalog-scroll-track--gallery > .catalog-card--hydrating {
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0) scale(0.985);
  }

  .catalog-scroll-track--gallery > .catalog-card--hydrating.catalog-card--hydrated {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }

  .catalog-scroll-track--gallery > .catalog-card::before {
    position: absolute;
    inset: 0;
    z-index: 8;
    border-radius: inherit;
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 24%),
      inset 0 1px 0 rgb(255 255 255 / 34%),
      inset 0 -1px 0 rgb(0 0 0 / 34%);
    content: '';
    pointer-events: none;
  }

  .catalog-scroll-track--gallery > .catalog-card::after {
    z-index: 2;
    background:
      linear-gradient(180deg, rgb(0 0 0 / 2%) 0%, rgb(0 0 0 / 12%) 42%, rgb(0 0 0 / 62%) 100%),
      linear-gradient(90deg, rgb(0 0 0 / 16%) 0%, rgb(0 0 0 / 0%) 58%);
  }

  .catalog-scroll-track--gallery > .catalog-card--portrait {
    aspect-ratio: 430 / 501;
  }

  .catalog-scroll-track--gallery > .catalog-card--mixed-portrait {
    grid-row: span 2;
  }

  .catalog-scroll-track--gallery > .catalog-card--hovered,
  .catalog-scroll-track--gallery > .catalog-card:hover {
    z-index: 100;
    filter: brightness(1.05) saturate(1.03);
    box-shadow:
      var(--catalog-card-hover-shadow),
      inset 0 0 0 1px rgb(255 255 255 / 34%);
    transform: var(--catalog-hover-transform);
    will-change: transform;
  }

  .catalog-scroll-track--gallery > .catalog-card:has(> .catalog-card__hit-target:focus-visible) {
    z-index: 101;
    box-shadow:
      0 0 0 3px var(--background),
      0 0 0 5px var(--ring),
      var(--catalog-card-hover-shadow);
  }

  .catalog-scroll-track--gallery .catalog-card-media {
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    transform: scale(1.02);
    filter: saturate(1.04) contrast(1.08) brightness(0.94);
    transition:
      filter 220ms var(--catalog-card-hover-enter-ease),
      transform 280ms var(--catalog-card-hover-move-ease);
  }

  .catalog-scroll-track--gallery .catalog-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
  }

  .catalog-scroll-track--gallery .catalog-card--hovered .catalog-card-media,
  .catalog-scroll-track--gallery .catalog-card:hover .catalog-card-media {
    transform: scaleY(var(--catalog-image-y-comp)) scale(1.15)
      translate3d(var(--catalog-parallax-x), var(--catalog-parallax-y), 0);
    filter: saturate(1.08) contrast(1.1) brightness(0.92);
    will-change: transform;
  }

  .catalog-scroll-track--gallery .catalog-card-media-scrim {
    z-index: 1;
    border-radius: inherit;
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 10%) 42%, rgb(0 0 0 / 58%) 100%),
      linear-gradient(90deg, rgb(0 0 0 / 18%) 0%, rgb(0 0 0 / 0%) 62%);
  }

  .catalog-scroll-track--gallery .catalog-card-pattern--subtle {
    z-index: 2;
    border-radius: inherit;
    opacity: 0.035 !important;
    mix-blend-mode: overlay;
  }

  .catalog-card__rest-copy {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    justify-content: flex-end;
    padding: clamp(0.75rem, 1vw, 1rem);
    padding-top: clamp(2.4rem, 3vw, 3rem);
    color: white;
    pointer-events: none;
    text-shadow: 0 2px 14px rgb(0 0 0 / 62%);
    transition:
      opacity 120ms var(--catalog-card-hover-enter-ease),
      transform 180ms var(--catalog-card-hover-enter-ease);
  }

  .catalog-card--hovered .catalog-card__rest-copy,
  .catalog-card:hover .catalog-card__rest-copy {
    opacity: 0;
    transform: translateY(0.35rem);
  }

  .catalog-card-badge--rest {
    position: absolute;
    top: clamp(0.7rem, 0.9vw, 0.9rem);
    left: clamp(0.75rem, 1vw, 1rem);
    max-width: calc(100% - clamp(1.5rem, 2vw, 2rem));
  }

  .catalog-card__rest-copy .catalog-card__title,
  .catalog-card-overlay-title {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--font-catalog-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
  }

  .catalog-card__rest-copy .catalog-card__title {
    margin: 0;
    min-block-size: 2.16em;
    font-size: 1.25rem;
    line-height: 1.08;
    -webkit-line-clamp: 2;
  }

  .catalog-card__rest-copy .catalog-card__desc,
  .catalog-card-overlay-desc {
    display: -webkit-box;
    overflow: hidden;
    color: rgb(255 255 255 / 82%);
    font-family: var(--font-catalog-display);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .catalog-card__rest-copy .catalog-card__desc {
    min-block-size: 2.68em;
    line-height: 1.34;
  }

  .catalog-card-smooth-blur,
  .catalog-card__overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--catalog-card-backdrop-duration) ease;
  }

  .catalog-card-smooth-blur {
    z-index: 3;
  }

  .catalog-card-smooth-blur > div {
    position: absolute;
    inset: -50px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    mask-image: var(--sb-mask);
    -webkit-mask-image: var(--sb-mask);
    transition:
      backdrop-filter 0ms linear var(--catalog-card-backdrop-duration),
      -webkit-backdrop-filter 0ms linear var(--catalog-card-backdrop-duration);
  }

  .catalog-card-smooth-blur > div:nth-child(1) {
    --sb-blur: 16px;
    --sb-mask: linear-gradient(to top, rgb(0 0 0 / 0%) 0%, #000 0%, #000 10%, rgb(0 0 0 / 0%) 30%);
    background: rgb(0 0 0 / 48%);
  }

  .catalog-card-smooth-blur > div:nth-child(2) {
    --sb-blur: 9.9px;
    --sb-mask: linear-gradient(to top, rgb(0 0 0 / 0%) 0%, #000 10%, #000 20%, rgb(0 0 0 / 0%) 40%);
    background: rgb(0 0 0 / 40%);
  }

  .catalog-card-smooth-blur > div:nth-child(3) {
    --sb-blur: 5.8px;
    --sb-mask: linear-gradient(to top, rgb(0 0 0 / 0%) 0%, #000 20%, #000 30%, rgb(0 0 0 / 0%) 50%);
    background: rgb(0 0 0 / 33%);
  }

  .catalog-card-smooth-blur > div:nth-child(4) {
    --sb-blur: 3.1px;
    --sb-mask: linear-gradient(
      to top,
      rgb(0 0 0 / 0%) 10%,
      #000 30%,
      #000 40%,
      rgb(0 0 0 / 0%) 60%
    );
    background: rgb(0 0 0 / 27%);
  }

  .catalog-card-smooth-blur > div:nth-child(5) {
    --sb-blur: 1.6px;
    --sb-mask: linear-gradient(
      to top,
      rgb(0 0 0 / 0%) 20%,
      #000 40%,
      #000 50%,
      rgb(0 0 0 / 0%) 70%
    );
    background: rgb(0 0 0 / 9%);
  }

  .catalog-card-smooth-blur > div:nth-child(6) {
    --sb-blur: 0.7px;
    --sb-mask: linear-gradient(
      to top,
      rgb(0 0 0 / 0%) 30%,
      #000 50%,
      #000 60%,
      rgb(0 0 0 / 0%) 80%
    );
    background: rgb(0 0 0 / 2%);
  }

  .catalog-card-smooth-blur > div:nth-child(7) {
    --sb-blur: 0.3px;
    --sb-mask: linear-gradient(
      to top,
      rgb(0 0 0 / 0%) 40%,
      #000 60%,
      #000 70%,
      rgb(0 0 0 / 0%) 90%
    );
  }

  .catalog-card-smooth-blur > div:nth-child(8) {
    --sb-blur: 0.1px;
    --sb-mask: linear-gradient(
      to top,
      rgb(0 0 0 / 0%) 50%,
      #000 70%,
      #000 80%,
      rgb(0 0 0 / 0%) 100%
    );
  }

  .catalog-card-smooth-blur > div:nth-child(9) {
    --sb-blur: 0px;
    --sb-mask: linear-gradient(
      to top,
      rgb(0 0 0 / 0%) 60%,
      #000 80%,
      #000 90%,
      rgb(0 0 0 / 0%) 100%
    );
  }

  .catalog-card-smooth-blur > div:nth-child(10) {
    --sb-blur: 0px;
    --sb-mask: linear-gradient(
      to top,
      rgb(0 0 0 / 0%) 70%,
      #000 90%,
      #000 100%,
      rgb(0 0 0 / 0%) 100%
    );
  }

  .catalog-card__overlay {
    z-index: 5;
    display: flex;
    align-items: flex-end;
    padding: 0.25rem 1.25rem 0.95rem;
  }

  .catalog-card--hovered .catalog-card-smooth-blur,
  .catalog-card:hover .catalog-card-smooth-blur,
  .catalog-card--hovered .catalog-card__overlay,
  .catalog-card:hover .catalog-card__overlay {
    opacity: 1;
  }

  .catalog-card--hovered .catalog-card-smooth-blur > div,
  .catalog-card:hover .catalog-card-smooth-blur > div {
    backdrop-filter: blur(var(--sb-blur));
    -webkit-backdrop-filter: blur(var(--sb-blur));
    transition-delay: 0ms;
  }

  .catalog-card__overlay-copy {
    display: flex;
    width: min(78%, 28rem);
    flex-direction: column;
    gap: 0.3rem;
    color: white;
    text-shadow: 0 2px 14px rgb(0 0 0 / 68%);
    transform: scaleX(var(--catalog-content-x-comp));
    transform-origin: left bottom;
  }

  .catalog-card-overlay-badge {
    width: max-content;
    max-width: none;
    margin-bottom: 0.1rem;
    padding: 0.24rem 0.5rem;
    border-radius: 2px;
    background: var(--red);
    color: white;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  .catalog-card-overlay-title {
    width: var(--catalog-overlay-title-width, 170%);
    min-block-size: 2.16em;
    margin-bottom: 0;
    font-size: var(--catalog-overlay-title-size, 1.6rem);
    line-height: var(--catalog-overlay-title-line-height, 1.08);
    -webkit-line-clamp: 2;
  }

  .catalog-card-overlay-desc {
    width: var(--catalog-overlay-desc-width, 160%);
    min-block-size: 2.68em;
    margin-bottom: 0;
    font-size: var(--catalog-overlay-desc-size, 0.75rem);
    line-height: var(--catalog-overlay-desc-line-height, 1.34);
  }

  .catalog-card--hover-title-multiline {
    --catalog-overlay-title-width: 122%;
    --catalog-overlay-title-size: 1.35rem;
    --catalog-overlay-title-line-height: 1.08;
    --catalog-overlay-desc-width: 148%;
  }

  /* Five-column tablet cards are the narrowest hover-capable layout.
     Compact the overlay stack inside that measured container so every
     label, line, and action remains within the scaled card envelope. */
  @container (max-width: 13rem) {
    .catalog-card__overlay {
      padding: 0.25rem 0.75rem 0.55rem;
    }

    .catalog-card__overlay-copy {
      gap: 0.18rem;
    }

    .catalog-card__overlay-copy .catalog-card-category-pill {
      min-height: 1.15rem;
      padding: 0.18rem 0.35rem;
      font-size: 0.6rem;
    }

    .catalog-card-overlay-title,
    .catalog-card--hover-title-multiline .catalog-card-overlay-title {
      --catalog-overlay-title-size: 1.12rem;
      --catalog-overlay-title-line-height: 1.04;

      min-block-size: 2.08em;
    }

    .catalog-card-overlay-desc {
      --catalog-overlay-desc-size: 0.68rem;
      --catalog-overlay-desc-line-height: 1.25;

      min-block-size: 2.5em;
    }
  }

  .catalog-card__hit-target {
    position: absolute;
    inset: 0;
    z-index: 11;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
    outline: 0;
  }

  .catalog-card-arrow {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 6;
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: white;
    box-shadow:
      0 0.7rem 1.7rem rgb(0 0 0 / 24%),
      inset 0 0 0 1px rgb(0 0 0 / 8%);
    color: black;
    pointer-events: none;
    transform: translateZ(0) scaleX(var(--catalog-arrow-x-comp)) scaleY(var(--catalog-arrow-y-comp));
    transform-origin: right bottom;
    transition:
      background-color 180ms var(--catalog-card-hover-enter-ease),
      transform 180ms var(--catalog-card-hover-enter-ease);
  }

  .catalog-card-arrow svg {
    width: 50%;
    height: 50%;
    flex: 0 0 auto;
    display: block;
    color: currentColor;
    fill: none;
    overflow: visible;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 220ms var(--ease-standard);
    vector-effect: non-scaling-stroke;
  }

  .catalog-card-arrow svg [stroke='none'] {
    stroke: none;
  }

  .catalog-card-arrow svg :not([stroke='none']) {
    stroke: currentColor;
    vector-effect: non-scaling-stroke;
  }

  .catalog-card:hover .catalog-card-arrow svg,
  .catalog-card:has(> .catalog-card__hit-target:focus-visible) .catalog-card-arrow svg {
    transform: translate(1px, -1px);
  }

  .catalog-card-reveal,
  .catalog-card-reveal-75,
  .catalog-card-reveal-150 {
    opacity: 0;
    transform: translateY(0.6rem);
    transition:
      opacity var(--catalog-card-hover-exit-duration) var(--catalog-card-hover-enter-ease),
      transform var(--catalog-card-hover-exit-duration) var(--catalog-card-hover-enter-ease);
    transition-delay: 0ms;
  }

  .catalog-card--hovered .catalog-card-reveal,
  .catalog-card:hover .catalog-card-reveal,
  .catalog-card--hovered .catalog-card-reveal-75,
  .catalog-card:hover .catalog-card-reveal-75,
  .catalog-card--hovered .catalog-card-reveal-150,
  .catalog-card:hover .catalog-card-reveal-150 {
    opacity: 1;
    transform: translateY(0);
    transition-duration: var(--catalog-card-hover-enter-duration);
  }

  .catalog-card--hovered .catalog-card-reveal-75,
  .catalog-card:hover .catalog-card-reveal-75 {
    transition-delay: 35ms;
  }

  .catalog-card--hovered .catalog-card-reveal-150,
  .catalog-card:hover .catalog-card-reveal-150 {
    transition-delay: 70ms;
  }

  .catalog-card-arrow.catalog-card-reveal-200 {
    opacity: 0;
    transform: translateY(0.6rem) translateZ(0) scaleX(var(--catalog-arrow-x-comp))
      scaleY(var(--catalog-arrow-y-comp));
    transition:
      background-color 180ms var(--catalog-card-hover-enter-ease),
      opacity var(--catalog-card-hover-exit-duration) var(--catalog-card-hover-enter-ease),
      transform var(--catalog-card-hover-exit-duration) var(--catalog-card-hover-enter-ease);
  }

  .catalog-card--hovered .catalog-card-arrow.catalog-card-reveal-200,
  .catalog-card:hover .catalog-card-arrow.catalog-card-reveal-200 {
    opacity: 1;
    transform: translateY(0) translateZ(0) scaleX(var(--catalog-arrow-x-comp))
      scaleY(var(--catalog-arrow-y-comp));
    transition-duration:
      180ms, var(--catalog-card-hover-enter-duration), var(--catalog-card-hover-enter-duration);
    transition-delay: 0ms, 105ms, 105ms;
  }

  .catalog-track-wrap--card-hovered .catalog-row-progress {
    opacity: 0 !important;
    pointer-events: none;
  }

  .catalog-scroll-track--gallery ~ .catalog-inline-scroll {
    --catalog-gallery-hover-y-outset: clamp(1.1rem, 1.7vw, 2rem);

    top: var(--catalog-rail-pad-top) !important;
    bottom: var(--catalog-rail-pad-bottom) !important;
    width: clamp(6.5rem, 9vw, 9.5rem);
    padding: 0 clamp(0.8rem, 1.25vw, 1.25rem);
    color: var(--foreground);
    opacity: 0.52;
    pointer-events: auto;
    text-shadow: none;
    background: linear-gradient(
      90deg,
      color-mix(in oklch, var(--background), transparent 5%) 0%,
      color-mix(in oklch, var(--background), transparent 24%) 46%,
      color-mix(in oklch, var(--background), transparent 100%) 100%
    );
    transition:
      opacity 180ms var(--ease-standard),
      width 220ms var(--ease-standard),
      top 220ms var(--ease-standard),
      bottom 220ms var(--ease-standard),
      background 180ms var(--ease-standard);
  }

  .catalog-scroll-track--gallery ~ .catalog-inline-scroll[data-dir='right'] {
    justify-content: flex-end;
    background: linear-gradient(
      270deg,
      color-mix(in oklch, var(--background), transparent 5%) 0%,
      color-mix(in oklch, var(--background), transparent 24%) 46%,
      color-mix(in oklch, var(--background), transparent 100%) 100%
    );
  }

  .catalog-scroll-track--gallery ~ .catalog-inline-scroll[data-dir='left'] {
    justify-content: flex-start;
  }

  .catalog-track-wrap:hover .catalog-scroll-track--gallery ~ .catalog-inline-scroll,
  .catalog-track-wrap:focus-within .catalog-scroll-track--gallery ~ .catalog-inline-scroll,
  .catalog-track-wrap--card-hovered .catalog-scroll-track--gallery ~ .catalog-inline-scroll {
    width: clamp(7.25rem, 10vw, 10.5rem);
    opacity: 0.98;
  }

  .catalog-track-wrap--card-hovered .catalog-scroll-track--gallery ~ .catalog-inline-scroll {
    top: calc(var(--catalog-rail-pad-top) - var(--catalog-gallery-hover-y-outset)) !important;
    bottom: calc(var(--catalog-rail-pad-bottom) - var(--catalog-gallery-hover-y-outset)) !important;
  }

  .catalog-scroll-track--gallery ~ .catalog-inline-scroll:hover,
  .catalog-scroll-track--gallery ~ .catalog-inline-scroll:focus-visible {
    opacity: 1;
  }

  .catalog-scroll-track--gallery ~ .catalog-inline-scroll svg {
    width: clamp(2.7rem, 3.6vw, 3.35rem) !important;
    height: clamp(2.7rem, 3.6vw, 3.35rem) !important;
    padding: 0.72rem;
    border: 1px solid color-mix(in oklch, var(--border), transparent 12%);
    border-radius: 999px;
    background: color-mix(in oklch, var(--background), transparent 4%);
    box-shadow:
      0 1px 0 rgb(255 255 255 / 70%) inset,
      0 16px 40px rgb(24 19 15 / 16%);
    color: var(--foreground);
    filter: none;
    stroke-width: 2;
  }

  .catalog-scroll-track--gallery ~ .catalog-inline-scroll:hover svg,
  .catalog-scroll-track--gallery ~ .catalog-inline-scroll:focus-visible svg {
    transform: translateX(0.12rem) scale(1.04);
  }

  .catalog-scroll-track--gallery ~ .catalog-inline-scroll[data-dir='left']:hover svg,
  .catalog-scroll-track--gallery ~ .catalog-inline-scroll[data-dir='left']:focus-visible svg {
    transform: translateX(-0.12rem) scale(1.04);
  }

  .catalog-scroll-track--gallery ~ .catalog-row-progress {
    right: clamp(1rem, 4vw, 3rem);
    top: 0.65rem;
    bottom: auto;
    display: flex;
    width: auto;
    height: auto;
    gap: 0.35rem;
    opacity: 0.9;
    pointer-events: auto;
  }

  .catalog-scroll-track--gallery ~ .catalog-row-progress .catalog-row-progress-track {
    position: static;
    display: flex;
    gap: 0.35rem;
    overflow: visible;
    background: transparent;
  }

  .catalog-scroll-track--gallery ~ .catalog-row-progress .catalog-row-progress-thumb {
    display: none;
  }

  .catalog-scroll-dots {
    gap: 0.35rem;
    max-inline-size: 100%;
    overflow: hidden;
  }

  .catalog-scroll-dots .catalog-dot {
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
  }

  .catalog-scroll-dots .catalog-dot::before {
    background: var(--foreground);
  }

  @media (pointer: coarse) {
    .catalog-dot,
    .catalog-scroll-dots .catalog-dot {
      width: 2.75rem;
      height: 2.75rem;
    }
  }

  @media (max-width: 760px) {
    .catalog-row-header {
      grid-template-columns: minmax(0, 1fr);
    }

    .catalog-row-copy {
      grid-template-columns: minmax(0, 1fr);
    }

    .catalog-row-heading,
    .catalog-row-count {
      grid-column: 1;
      grid-row: auto;
    }

    .catalog-row-title {
      white-space: normal;
    }

    .catalog-row-tools {
      justify-self: start;
      padding-top: 0;
    }
  }

  /* -- Catalog results pages --------------------------------------------- */
  .main--catalog-results {
    background: var(--background);
  }

  .catalog-results {
    --catalog-results-width: min(calc(100vw - clamp(2rem, 16vw, 16rem)), 106.5rem);

    min-height: 100vh;
    margin-inline: auto;
    padding-top: clamp(2.5rem, 7vw, 6rem);
    background: transparent;
  }

  .catalog-results-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    width: var(--catalog-results-width);
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 4vw, 3rem);
  }

  .catalog-results-eyebrow {
    display: inline-flex;
    width: fit-content;
    min-height: 1.5rem;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: none;
    transition:
      color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .catalog-results-eyebrow:hover,
  .catalog-results-eyebrow:focus-visible {
    color: var(--foreground);
  }

  .catalog-results-eyebrow:hover {
    transform: translateX(-0.125rem);
  }

  .catalog-results-eyebrow:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--ring);
    outline-offset: 0.25rem;
  }

  .catalog-results-eyebrow__icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
  }

  .catalog-results-title {
    max-width: min(100%, 11.75ch);
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8.6vw, 6rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.9;
    overflow-wrap: normal;
    text-wrap: balance;
    word-break: normal;
  }

  .catalog-results-summary {
    max-width: 56rem;
    margin: 1rem 0 0;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 650;
    line-height: 1.45;
  }

  .catalog-results-search {
    display: flex;
    align-self: end;
    min-height: 3.5rem;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--card);
    padding-inline: 1rem 0.5rem;
  }

  .catalog-results-search:focus-within {
    outline: 2px solid var(--ring);
    outline-offset: 0.25rem;
  }

  .catalog-results-search__icon,
  .catalog-results-search__submit-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
  }

  .catalog-results-search__icon {
    color: var(--text-m);
  }

  .catalog-results-search__input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    outline: 0;
  }

  .catalog-results-search__submit {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.375rem;
    background: var(--foreground);
    color: var(--background);
    cursor: pointer;
  }

  .catalog-results-filter-bar#catalog-filter-bar {
    position: sticky;
    top: var(--tacet-nav-bottom, var(--chrome-height));
    z-index: 30;
    width: var(--catalog-results-width);
    margin: 0 auto clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--border);
    background: var(--background);
  }

  .catalog-results-filter-bar#catalog-filter-bar[data-stuck='true'] {
    width: var(--catalog-results-width);
    border-color: transparent;
    background: transparent !important;
    box-shadow: none;
    backdrop-filter: none;
  }

  .catalog-results-filter-bar#catalog-filter-bar[data-stuck='true'] .catalog-filter-shell {
    width: min(var(--catalog-results-width), var(--catalog-filter-stuck-width));
    max-width: min(var(--catalog-results-width), var(--catalog-filter-stuck-width));
  }

  .catalog-results-filter-bar .catalog-filter-btn[aria-current='page'],
  .catalog-results-filter-bar .catalog-filter-btn--current {
    background: transparent !important;
    color: var(--org-on-light) !important;
    font-weight: 650;
  }

  .catalog-results-filter-bar .catalog-filter-btn[aria-current='page'] .catalog-filter-btn__label,
  .catalog-results-filter-bar .catalog-filter-btn--current .catalog-filter-btn__label {
    color: var(--org-on-light);
  }

  .catalog-results-filter-bar .catalog-filter-btn[aria-current='page']::after,
  .catalog-results-filter-bar .catalog-filter-btn--current::after {
    right: 0.75rem;
    bottom: -1px;
    left: 0.75rem;
    background: var(--org-on-light);
    opacity: 1;
    transform: scaleX(1);
    transform-origin: center;
  }

  .catalog-results-filter-bar#catalog-filter-bar[data-stuck='true']
    .catalog-filter-btn[aria-current='page']::after,
  .catalog-results-filter-bar#catalog-filter-bar[data-stuck='true']
    .catalog-filter-btn--current::after {
    bottom: 0;
  }

  .catalog-results-grid.catalog-scroll-track--gallery {
    position: relative;
    z-index: 0;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.625rem;
    width: var(--catalog-results-width);
    margin-inline: auto;
    overflow: visible;
    padding: clamp(1rem, 4vw, 3rem) 0;
    scroll-snap-type: none;
  }

  .catalog-results-grid.catalog-scroll-track--gallery > .catalog-card {
    width: 100%;
    aspect-ratio: 430 / 242;
    scroll-snap-align: none;
  }

  .catalog-results-grid.catalog-scroll-track--gallery > .catalog-card[hidden] {
    display: none;
  }

  .catalog-results-grid.catalog-scroll-track--gallery
    > .catalog-card.catalog-results-card--revealing {
    opacity: 0;
    transform: translate3d(0, 0.85rem, 0) scale(0.985);
  }

  .catalog-results-grid.catalog-scroll-track--gallery
    > .catalog-card.catalog-results-card--revealing.catalog-results-card--revealed {
    opacity: 1;
    transform: translateZ(0) scale(1);
    transition-delay: calc(min(var(--catalog-results-card-index, 0), 7) * 24ms);
  }

  .catalog-results-empty {
    width: var(--catalog-results-width);
    margin: clamp(1rem, 4vw, 3rem) auto;
    padding: clamp(2rem, 7vw, 5rem);
    border: 1px solid var(--border);
    background: var(--surface-container);
  }

  .catalog-results-empty h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 7vw, 4.5rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.9;
  }

  .catalog-results-empty p {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.45;
  }

  .catalog-results-empty__action {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    margin-top: 1.25rem;
    border: 1px solid var(--foreground);
    border-radius: 0.375rem;
    padding-inline: 1rem;
    background: var(--foreground);
    color: var(--background);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
  }

  .catalog-results-controls,
  .catalog-results-end {
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    width: var(--catalog-results-width);
    margin-inline: auto;
    border-top: 1px solid var(--border);
    padding-block: 1.25rem;
  }

  .catalog-results-status {
    margin: 0;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0;
  }

  .catalog-results-load-more,
  .catalog-results-end a {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    border: 1px solid var(--border);
    padding: 0.7rem 0.9rem;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-weight: 680;
    line-height: 1;
    text-decoration: none;
  }

  .catalog-results-load-more:hover,
  .catalog-results-load-more:focus-visible,
  .catalog-results-end a:hover,
  .catalog-results-end a:focus-visible {
    border-color: var(--foreground);
    background: var(--foreground);
    color: var(--background);
  }

  .catalog-results-end {
    flex-direction: column;
    font-family: var(--font-body);
    line-height: 1.5;
    text-align: center;
  }

  .catalog-results-end strong,
  .catalog-results-end p {
    margin: 0;
  }

  .catalog-results-end[hidden],
  .catalog-results-controls [hidden],
  .catalog-results-sentinel[hidden] {
    display: none;
  }

  .catalog-results-sentinel {
    width: 100%;
    height: 1px;
  }

  @media (min-width: 640px) {
    .catalog-results-grid.catalog-scroll-track--gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .catalog-results-grid.catalog-scroll-track--gallery {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 1280px) {
    .catalog-results-hero {
      grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem);
      align-items: end;
    }

    .catalog-results-search {
      max-width: 30rem;
    }
  }

  @media (min-width: 1440px) {
    .catalog-results-hero {
      grid-template-columns: minmax(0, 1fr) minmax(22rem, 34rem);
    }

    .catalog-results-search {
      max-width: none;
    }
  }

  @media (min-width: 1600px) {
    .catalog-results-grid.catalog-scroll-track--gallery {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (min-width: 640px) {
    .catalog-scroll-track--gallery {
      grid-auto-columns: minmax(20rem, 54vw);
    }
  }

  @media (min-width: 768px) {
    .catalog-scroll-track--gallery {
      grid-auto-columns: minmax(22rem, 42vw);
    }
  }

  @media (min-width: 1024px) {
    .catalog-scroll-track--gallery {
      grid-auto-columns: calc((100% - 2.5rem) / 5);
      gap: 0.625rem;
    }
  }

  @media (min-width: 1600px) {
    .catalog-scroll-track--gallery {
      grid-auto-columns: calc((100% - 3.125rem) / 6);
    }
  }

  @media (min-width: 2400px) {
    .catalog-scroll-track--gallery {
      grid-auto-columns: calc((100% - 3.75rem) / 7);
    }
  }

  @media (max-width: 767px) {
    .catalog-scroll-track--gallery > .catalog-card {
      transform: none !important;
    }

    .catalog-card__overlay,
    .catalog-card-smooth-blur {
      display: none;
    }
  }

  @media (hover: none), (pointer: coarse) {
    .catalog-scroll-track--gallery > .catalog-card:hover {
      filter: none;
      transform: none;
      will-change: auto;
    }

    .catalog-card:hover .catalog-card__rest-copy {
      opacity: 1;
      transform: none;
    }

    .catalog-card__overlay,
    .catalog-card-smooth-blur {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .catalog-scroll-track--gallery,
    .catalog-scroll-track--gallery *,
    .catalog-card-reveal,
    .catalog-card-reveal-75,
    .catalog-card-reveal-150,
    .catalog-card-reveal-200 {
      animation: none !important;
      transition-duration: 0.01ms !important;
    }

    .catalog-scroll-track--gallery > .catalog-card,
    .catalog-scroll-track--gallery > .catalog-card:hover {
      transform: none !important;
    }

    .catalog-card--hovered .catalog-card__rest-copy,
    .catalog-card:hover .catalog-card__rest-copy {
      opacity: 1;
      transform: none;
    }

    .catalog-card-smooth-blur,
    .catalog-card__overlay {
      display: none;
    }
  }

  .tacet-home-page [data-home-selected-view] {
    display: none;
  }

  .tacet-home-page
    [data-home-catalog-stream]:not([data-home-stream-ready])
    [data-home-selected-view] {
    visibility: hidden;
  }

  html[data-home-category-view='selected'] .tacet-home-page [data-home-all-rows] {
    display: none;
  }

  html[data-home-category-view='selected'] .tacet-home-page [data-home-selected-view] {
    display: block;
  }

  .tacet-home-page [data-home-all-rows][hidden],
  .tacet-home-page [data-home-selected-view][hidden] {
    display: none;
  }

  .home-selected-category {
    --home-catalog-row-inline: clamp(0.5rem, 1.6vw, 2rem);

    box-sizing: border-box;
    width: 100%;
    margin-inline: 0;
    padding: clamp(2rem, 4vw, 4rem) var(--home-catalog-row-inline) clamp(3rem, 7vw, 7rem);
  }

  .home-selected-category__all {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
  }

  .home-selected-category__all:hover,
  .home-selected-category__all:focus-visible {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
  }

  .home-selected-category__all:focus-visible {
    outline: var(--outline-width) solid var(--ring);
    outline-offset: var(--space-2);
  }

  .home-selected-category__all-icon {
    width: 1rem;
    height: 1rem;
  }

  .home-selected-category .home-catalog-results {
    margin-block-end: var(--space-4);
    padding-block: 0;
  }

  .home-selected-category .home-catalog-results__title-row {
    gap: var(--space-3) var(--space-4);
  }

  .home-catalog-results__summary--linked {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid color-mix(in oklch, var(--home-results-accent), transparent 68%);
    border-radius: var(--radius-lg);
    padding: 0.125rem;
    padding-inline-start: 0.5rem;
    background: color-mix(in oklch, var(--home-results-accent), transparent 94%);
  }

  .home-catalog-results__summary--linked .home-catalog-results__shortcut-arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--home-results-accent);
    text-decoration: none;
  }

  .home-catalog-results__summary--linked .home-catalog-results__shortcut-arrow:hover,
  .home-catalog-results__summary--linked .home-catalog-results__shortcut-arrow:focus-visible {
    border-color: var(--home-results-accent);
    background: color-mix(in oklch, var(--home-results-accent), transparent 80%);
    color: var(--home-results-accent);
    transform: translateX(0.125rem);
  }

  .home-catalog-results__summary--linked .home-catalog-results__shortcut-arrow:focus-visible {
    outline: var(--outline-width) solid var(--ring);
    outline-offset: var(--space-1);
  }

  @media (max-width: 639px) {
    .catalog-row-header {
      gap: var(--space-3);
      min-height: auto;
      padding-right: 0;
    }

    .catalog-row-heading {
      gap: 0.55rem;
    }

    .catalog-row-title {
      white-space: normal;
      text-wrap: balance;
    }

    .catalog-row-count {
      grid-template-columns: auto minmax(0, 1fr) auto;
      max-width: 100%;
      min-height: auto;
    }

    .catalog-row-count__coverage {
      max-width: min(100%, 20rem);
    }

    .catalog-row-tools {
      position: relative;
      top: auto;
      right: auto;
      align-self: stretch;
      justify-content: space-between;
      padding-bottom: 0;
      transform: none;
    }
  }

  /* -- Catalog modal: shared Swage product sheet -------------------------- */
  html.catalog-modal-open .proto-nav,
  body.catalog-modal-open .proto-nav {
    opacity: 0;
    pointer-events: none;
  }

  html.catalog-modal-open .catalog-track-wrap--card-hovered .catalog-inline-scroll,
  body.catalog-modal-open .catalog-track-wrap--card-hovered .catalog-inline-scroll,
  html.catalog-modal-open .catalog-track-wrap--card-hovered .catalog-row-progress,
  body.catalog-modal-open .catalog-track-wrap--card-hovered .catalog-row-progress {
    opacity: 0.9 !important;
    pointer-events: auto;
  }

  html.catalog-modal-open .catalog-scroll-track--gallery > .catalog-card,
  body.catalog-modal-open .catalog-scroll-track--gallery > .catalog-card,
  html.catalog-modal-open .catalog-scroll-track--gallery > .catalog-card:hover,
  body.catalog-modal-open .catalog-scroll-track--gallery > .catalog-card:hover,
  html.catalog-modal-open .catalog-scroll-track--gallery > .catalog-card--hovered,
  body.catalog-modal-open .catalog-scroll-track--gallery > .catalog-card--hovered {
    z-index: auto !important;
    filter: none !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%) !important;
    transform: none !important;
  }

  html.catalog-modal-open .catalog-card:hover .catalog-card-media,
  body.catalog-modal-open .catalog-card:hover .catalog-card-media,
  html.catalog-modal-open .catalog-card--hovered .catalog-card-media,
  body.catalog-modal-open .catalog-card--hovered .catalog-card-media {
    transform: scale(1.02) !important;
  }

  html.catalog-modal-open .catalog-card:hover .catalog-card__rest-copy,
  body.catalog-modal-open .catalog-card:hover .catalog-card__rest-copy,
  html.catalog-modal-open .catalog-card--hovered .catalog-card__rest-copy,
  body.catalog-modal-open .catalog-card--hovered .catalog-card__rest-copy {
    opacity: 1 !important;
    transform: none !important;
  }

  html.catalog-modal-open .catalog-card:hover .catalog-card-smooth-blur,
  body.catalog-modal-open .catalog-card:hover .catalog-card-smooth-blur,
  html.catalog-modal-open .catalog-card:hover .catalog-card__overlay,
  body.catalog-modal-open .catalog-card:hover .catalog-card__overlay,
  html.catalog-modal-open .catalog-card--hovered .catalog-card-smooth-blur,
  body.catalog-modal-open .catalog-card--hovered .catalog-card-smooth-blur,
  html.catalog-modal-open .catalog-card--hovered .catalog-card__overlay,
  body.catalog-modal-open .catalog-card--hovered .catalog-card__overlay {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html.catalog-modal-open .catalog-card:hover .catalog-card-smooth-blur > div,
  body.catalog-modal-open .catalog-card:hover .catalog-card-smooth-blur > div,
  html.catalog-modal-open .catalog-card--hovered .catalog-card-smooth-blur > div,
  body.catalog-modal-open .catalog-card--hovered .catalog-card-smooth-blur > div {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #app-modal {
    z-index: 1200;
  }

  .app-modal-panel {
    display: flex;
    flex-direction: column;
    height: min(92dvh, calc(100dvh - 2rem));
    overflow: hidden;
    background: var(--background) !important;
    border-color: var(--tacet-panel-border, var(--border)) !important;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgb(0 0 0 / 0.28);
  }

  .app-modal-icon-btn {
    align-items: center;
    background: color-mix(in oklch, var(--background), transparent 10%);
    color: var(--foreground);
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(16px);
    transition:
      background var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

  .app-modal-icon-btn:hover {
    background: var(--foreground) !important;
    color: var(--background) !important;
  }

  .app-modal-icon-btn:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  .app-modal-icon-btn[aria-disabled='true'] {
    opacity: 0.55;
    pointer-events: none;
  }

  @media (min-width: 40rem) {
    .app-modal-panel {
      height: min(92dvh, calc(100dvh - 3rem));
    }
  }

  @media (min-width: 48rem) {
    .app-modal-panel {
      height: min(92dvh, calc(100dvh - 4rem));
    }
  }

  @media (min-width: 80rem) {
    .app-modal-panel {
      height: min(88dvh, calc(100dvh - 5rem));
    }
  }

  .app-modal-sheet--swage {
    --swage-canvas: #fbfbf8;
    --swage-surface: #f4f5f2;
    --swage-elevated: #fff;
    --swage-ink: #17191d;
    --swage-muted: #67707c;
    --swage-faint: #9199a5;
    --swage-line: rgb(23 25 29 / 13%);
    --swage-line-strong: rgb(23 25 29 / 22%);
    --swage-accent: #5356c2;
    --swage-accent-soft: #eeedfb;
    --swage-on-accent: #fff;
    --swage-media-scrim: #17191d;
    --swage-on-media: #fff;
    --swage-frame-radius: 0.45rem;
    --swage-control-radius: 0.625rem;
    --swage-panel-radius: 0.65rem;

    border-color: var(--swage-line-strong) !important;
    border-radius: var(--swage-panel-radius);
    background: var(--swage-canvas) !important;
    color: var(--swage-ink);
  }

  html.dark .app-modal-sheet--swage {
    --swage-canvas: #0d1015;
    --swage-surface: #141922;
    --swage-elevated: #1a202b;
    --swage-ink: #f5f2ea;
    --swage-muted: #a6adba;
    --swage-faint: #707887;
    --swage-line: rgb(240 236 226 / 14%);
    --swage-line-strong: rgb(240 236 226 / 24%);
    --swage-accent: #b3b2fa;
    --swage-accent-soft: #292852;
    --swage-on-accent: #0d1015;
  }

  .app-modal-sheet--swage:focus {
    outline: none;
  }

  .app-modal-sheet-view {
    --app-modal-sheet-rail-width: 21rem;

    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--swage-canvas);
    color: var(--swage-ink);
  }

  .app-modal-sheet-view[hidden] {
    display: none;
  }

  .app-modal-sheet__scroll {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .app-modal-sheet__scroll::-webkit-scrollbar {
    display: none;
  }

  .app-modal-sheet__sticky-header {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    width: 100%;
    height: 3rem;
    align-items: center;
    margin-bottom: -3rem;
    padding: 0 clamp(3.5rem, 6vw, 5rem) 0 clamp(1.25rem, 4vw, 3.75rem);
    overflow: hidden;
    background: var(--swage-media-scrim);
    color: var(--swage-on-media);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .app-modal-sheet__sticky-header::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--swage-media-scrim), transparent 12%),
      color-mix(in srgb, var(--swage-media-scrim), transparent 40%)
    );
    content: '';
    pointer-events: none;
  }

  .app-modal-sheet__sticky-header[data-visible='true'] {
    visibility: visible;
    opacity: 1;
  }

  .app-modal-sheet__sticky-image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(6px) brightness(0.58) saturate(0.72);
    transform: scale(1.03);
  }

  .app-modal-sheet__sticky-image[hidden] {
    display: none;
  }

  .app-modal-sheet__sticky-header span {
    position: relative;
    z-index: 2;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 760;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-modal-sheet__eyebrow,
  .app-modal-sheet__section-label,
  .app-modal-sheet__status {
    color: var(--swage-accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    line-height: 1.2;
  }

  .app-modal-sheet__hero,
  .app-modal-sheet__planned {
    padding: clamp(2rem, 3vw, 3rem) clamp(1.25rem, 4vw, 3.75rem) clamp(1.75rem, 3vw, 2.5rem);
  }

  .app-modal-sheet__hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--swage-line);
  }

  .app-modal-sheet__hero-image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .app-modal-sheet__hero-image[hidden] {
    display: none;
  }

  .app-modal-sheet__hero--has-media::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--swage-media-scrim), transparent 4%) 0%,
      color-mix(in srgb, var(--swage-media-scrim), transparent 18%) 58%,
      color-mix(in srgb, var(--swage-media-scrim), transparent 42%) 100%
    );
    content: '';
    pointer-events: none;
  }

  .app-modal-sheet__hero::after {
    position: absolute;
    right: -0.02em;
    bottom: -0.22em;
    color: color-mix(in srgb, var(--swage-accent), transparent 94%);
    content: 'ERP';
    font-family: var(--font-heading);
    font-size: clamp(9rem, 22vw, 22rem);
    font-weight: 900;
    letter-spacing: -0.08em;
    line-height: 0.7;
    pointer-events: none;
  }

  .app-modal-sheet__hero--has-media::after {
    opacity: 0;
  }

  .app-modal-sheet__hero > * {
    position: relative;
    z-index: 2;
  }

  .app-modal-sheet__hero > .app-modal-sheet__hero-image {
    position: absolute;
    z-index: 0;
  }

  .app-modal-sheet__hero--has-media .app-modal-sheet__eyebrow,
  .app-modal-sheet__hero--has-media .app-modal-sheet__title {
    color: var(--swage-on-media);
  }

  .app-modal-sheet__hero--has-media .app-modal-sheet__lead {
    color: color-mix(in srgb, var(--swage-on-media), transparent 18%);
  }

  .app-modal-sheet__hero--has-media .app-modal-sheet__tags li {
    border-color: color-mix(in srgb, var(--swage-on-media), transparent 62%);
    background: color-mix(in srgb, var(--swage-media-scrim), transparent 30%);
    color: color-mix(in srgb, var(--swage-on-media), transparent 12%);
    backdrop-filter: blur(8px);
  }

  .app-modal-sheet__title {
    max-width: 14ch;
    margin: 0.65rem 0 0;
    color: var(--swage-ink);
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.85;
    overflow-wrap: anywhere;
  }

  .app-modal-sheet__lead {
    max-width: 58rem;
    margin: clamp(1.25rem, 2.4vw, 2rem) 0 0;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.65;
  }

  .app-modal-sheet__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
  }

  .app-modal-sheet__tags[hidden] {
    display: none;
  }

  .app-modal-sheet__tags li {
    padding: 0.42rem 0.65rem;
    border: 1px solid var(--swage-line);
    border-radius: var(--swage-frame-radius);
    background: color-mix(in srgb, var(--swage-canvas), var(--swage-surface) 55%);
    color: var(--swage-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    line-height: 1;
  }

  .app-modal-sheet__evidence {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--swage-line);
  }

  .app-modal-sheet__evidence:not([hidden])::after {
    position: absolute;
    bottom: -1px;
    left: 100%;
    width: var(--app-modal-sheet-rail-width);
    border-bottom: 1px solid var(--swage-line);
    content: '';
    pointer-events: none;
  }

  .app-modal-sheet__evidence[hidden] {
    display: none;
  }

  .app-modal-sheet__evidence-list {
    display: grid;
    margin: 0;
  }

  .app-modal-sheet__evidence-list[data-count='1'] {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-modal-sheet__evidence-list[data-count='2'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-modal-sheet__evidence-list[data-count='3'],
  .app-modal-sheet__evidence-list[data-count='6'] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-modal-sheet__evidence-list[data-count='4'] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .app-modal-sheet__evidence-list[data-count='5'] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .app-modal-sheet__evidence-list[data-count='5'] > div {
    grid-column: span 2;
  }

  .app-modal-sheet__evidence-list[data-count='5'] > div:nth-child(n + 4) {
    grid-column: span 3;
  }

  .app-modal-sheet__evidence-list[data-count='5'] > div:nth-child(4),
  .app-modal-sheet__evidence-list[data-count='6'] > div:nth-child(4) {
    border-left: 0;
  }

  .app-modal-sheet__evidence-list[data-count='5'] > div:nth-child(n + 4),
  .app-modal-sheet__evidence-list[data-count='6'] > div:nth-child(n + 4) {
    border-top: 1px solid var(--swage-line);
  }

  .app-modal-sheet__evidence-list > div {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 0.3rem;
    padding: 1.25rem clamp(0.85rem, 2vw, 1.4rem);
  }

  .app-modal-sheet__evidence-list > div + div {
    border-left: 1px solid var(--swage-line);
  }

  .app-modal-sheet__evidence-list dd {
    display: grid;
    gap: 0.3rem;
    margin: 0;
  }

  .app-modal-sheet__evidence-value {
    color: var(--swage-ink);
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 850;
    line-height: 1;
  }

  .app-modal-sheet__evidence-list dt,
  .app-modal-sheet__evidence-list small {
    color: var(--swage-muted);
    font-family: var(--font-mono);
    font-size: 0.69rem;
    letter-spacing: 0.05em;
    line-height: 1.35;
  }

  .app-modal-sheet__evidence-list small {
    color: var(--swage-muted);
    letter-spacing: 0;
    text-transform: none;
  }

  .app-modal-sheet__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, var(--app-modal-sheet-rail-width));
    align-items: stretch;
  }

  .app-modal-sheet__main {
    min-width: 0;
  }

  .app-modal-sheet__inside {
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.75rem);
  }

  .app-modal-sheet__inside[hidden] {
    display: none;
  }

  .app-modal-sheet__inside h4 {
    margin: 0.55rem 0 1.5rem;
    color: var(--swage-ink);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 0.95;
  }

  .app-modal-sheet__inside-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--swage-line);
    background: var(--swage-line);
  }

  .app-modal-sheet__inside-list article {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 1.15rem;
    background: var(--swage-elevated);
  }

  .app-modal-sheet__inside-list article:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .app-modal-sheet__inside-list article > span {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--swage-accent-soft);
    color: var(--swage-accent);
    font-size: 0.72rem;
    font-weight: 800;
  }

  .app-modal-sheet__inside-list h5 {
    margin: 0;
    color: var(--swage-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.3;
  }

  .app-modal-sheet__inside-list p {
    margin: 0.35rem 0 0;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .app-modal-sheet__details[hidden],
  .app-modal-sheet__related[hidden] {
    display: none;
  }

  .app-modal-sheet__detail,
  .app-modal-sheet__related {
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.75rem);
    border-top: 1px solid var(--swage-line);
  }

  .app-modal-sheet__detail h4,
  .app-modal-sheet__related h4 {
    max-width: 14ch;
    margin: 0.55rem 0 0;
    color: var(--swage-ink);
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.3vw, 3rem);
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1;
  }

  .app-modal-sheet__detail-intro,
  .app-modal-sheet__related > p {
    max-width: 52ch;
    margin: 0.85rem 0 1.5rem;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .app-modal-sheet__detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 1.5rem 0 0;
    padding: 1px;
    background: var(--swage-line);
    list-style: none;
  }

  .app-modal-sheet__detail-list > * {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    padding: 1.15rem;
    background: var(--swage-elevated);
  }

  .app-modal-sheet__detail-list--steps > *,
  .app-modal-sheet__detail-list--records > * {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .app-modal-sheet__detail-list > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .app-modal-sheet__detail-list h5 {
    margin: 0;
    color: var(--swage-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.3;
  }

  .app-modal-sheet__detail-list p,
  .app-modal-sheet__detail-list small {
    margin: 0.35rem 0 0;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .app-modal-sheet__detail-marker {
    color: var(--swage-accent);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .app-modal-sheet__detail--quote blockquote {
    max-width: 24ch;
    margin: 1rem 0;
    color: var(--swage-ink);
    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 3vw, 2.5rem);
    font-weight: 760;
    line-height: 1.08;
  }

  .app-modal-sheet__detail--quote cite {
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-style: normal;
  }

  .app-modal-sheet__comparison {
    display: grid;
    margin-top: 1.5rem;
    border: 1px solid var(--swage-line);
  }

  .app-modal-sheet__comparison-row {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) repeat(2, minmax(0, 1fr));
  }

  .app-modal-sheet__comparison-row + .app-modal-sheet__comparison-row {
    border-top: 1px solid var(--swage-line);
  }

  .app-modal-sheet__comparison-row > * {
    min-width: 0;
    padding: 0.8rem;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: 0.84rem;
    line-height: 1.4;
  }

  .app-modal-sheet__comparison-row > * + * {
    border-left: 1px solid var(--swage-line);
  }

  .app-modal-sheet__comparison-row strong,
  .app-modal-sheet__comparison-row--header > * {
    color: var(--swage-ink);
    font-weight: 740;
  }

  .app-modal-sheet__comparison-row--header > * {
    background: var(--swage-surface);
    font-family: var(--font-mono);
    font-size: 0.68rem;
  }

  .app-modal-sheet__faq-list {
    display: grid;
    margin-top: 1.5rem;
    border-top: 1px solid var(--swage-line);
  }

  .app-modal-sheet__faq-list details {
    padding: 1rem 0;
    border-bottom: 1px solid var(--swage-line);
  }

  .app-modal-sheet__faq-list summary {
    color: var(--swage-ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 740;
    cursor: pointer;
  }

  .app-modal-sheet__faq-list p {
    max-width: 58ch;
    margin: 0.75rem 0 0;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .app-modal-sheet__related-list {
    margin-top: 1.5rem;
  }

  .app-modal-sheet__rail {
    --app-modal-sheet-rail-inline: clamp(1.25rem, 2.5vw, 2rem);

    position: relative;
    display: grid;
    align-content: start;
    gap: 1rem;
    min-height: 0;
    padding: 0 var(--app-modal-sheet-rail-inline) clamp(1.75rem, 2.5vw, 2.25rem);
    border-left: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  .app-modal-sheet__rail-actions-sticky {
    position: sticky;
    top: 3rem;
    z-index: 16;
    display: grid;
    margin: 0 calc(-1 * var(--app-modal-sheet-rail-inline));
    padding: 1rem var(--app-modal-sheet-rail-inline);
    background: var(--swage-surface);
  }

  .app-modal-sheet__rail-actions-sticky::after {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 0.75rem;
    background: linear-gradient(var(--swage-surface), transparent);
    content: '';
    pointer-events: none;
    backdrop-filter: blur(3px);
  }

  .app-modal-sheet__body:has(.app-modal-sheet__evidence[hidden])
    .app-modal-sheet__rail-actions-sticky::after,
  .app-modal-sheet-view:has(.app-modal-sheet__sticky-header[data-visible='true'])
    .app-modal-sheet__rail-actions-sticky::after {
    border-bottom: 1px solid var(--swage-line-strong);
  }

  .app-modal-sheet-view:has(.app-modal-sheet__sticky-header[data-visible='true'])
    .app-modal-sheet__evidence::after {
    display: none;
  }

  .app-modal-sheet__facts {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--swage-line);
  }

  .app-modal-sheet__facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--swage-line);
  }

  .app-modal-sheet__facts > div[hidden] {
    display: none;
  }

  .app-modal-sheet__facts dt {
    color: var(--swage-muted);
    font-family: var(--font-mono);
    font-size: 0.69rem;
    letter-spacing: 0.06em;
  }

  .app-modal-sheet__facts dd {
    margin: 0;
    color: var(--swage-ink);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 740;
    text-align: right;
  }

  .app-modal-sheet__actions {
    display: grid;
    gap: 0.65rem;
  }

  .app-modal-sheet__rail-section {
    padding-top: 1rem;
    border-top: 1px solid var(--swage-line);
  }

  .app-modal-sheet__rail-section[hidden] {
    display: none;
  }

  .app-modal-sheet__rail-actions-sticky + .app-modal-sheet__rail-section {
    border-top: 0;
  }

  .app-modal-sheet__rail-actions-sticky
    + .app-modal-sheet__rail-section[hidden]
    + .app-modal-sheet__rail-section,
  .app-modal-sheet__rail-actions-sticky
    + .app-modal-sheet__rail-section[hidden]
    + .app-modal-sheet__rail-section[hidden]
    + .app-modal-sheet__facts {
    border-top: 0;
  }

  .app-modal-sheet__rail-section h4 {
    margin: 0 0 0.75rem;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 740;
    line-height: 1.3;
  }

  .app-modal-sheet__keyword-list,
  .app-modal-sheet__function-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .app-modal-sheet__keyword-list li {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--swage-line);
    border-radius: var(--swage-frame-radius);
    background: var(--swage-canvas);
    color: var(--swage-ink);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.2;
  }

  .app-modal-sheet__function-list {
    display: grid;
    gap: 0.4rem;
  }

  .app-modal-sheet__function-list li {
    color: var(--swage-ink);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 740;
    line-height: 1.4;
  }

  .app-modal-sheet__action {
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--swage-ink);
    border-radius: var(--swage-control-radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 740;
    line-height: 1;
    text-decoration: none;
    transition:
      background var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

  .app-modal-sheet__action[hidden] {
    display: none;
  }

  .app-modal-sheet__action--primary {
    background: var(--swage-ink);
    color: var(--swage-on-accent);
  }

  .app-modal-sheet__action--primary:hover {
    border-color: var(--swage-accent);
    background: var(--swage-accent);
    color: var(--swage-on-accent);
  }

  .app-modal-sheet__action--secondary {
    border-color: var(--swage-line-strong);
    background: var(--swage-elevated);
    color: var(--swage-ink);
  }

  .app-modal-sheet__action--secondary:hover {
    border-color: var(--swage-accent);
    color: var(--swage-accent);
  }

  .app-modal-sheet__action:focus-visible {
    outline: 2px solid var(--swage-accent);
    outline-offset: 3px;
  }

  .app-modal-sheet__rail-note {
    margin: 0;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .app-modal-sheet__planned {
    display: grid;
    min-height: calc(100% - 3.5rem);
    align-content: center;
    justify-items: start;
  }

  .app-modal-sheet__planned[hidden] {
    display: none;
  }

  .app-modal-sheet__status {
    margin-bottom: 1.75rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--swage-line-strong);
    border-radius: var(--radius-full);
    background: var(--swage-surface);
    color: var(--swage-muted);
  }

  .app-modal-sheet__browse {
    min-width: min(100%, 18rem);
    margin-top: 2rem;
  }

  .app-modal-sheet__fade {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 14;
    height: 1.5rem;
    pointer-events: none;
    backdrop-filter: blur(5px);
  }

  .app-modal-sheet__fade[hidden] {
    display: none;
  }

  .app-modal-sheet__fade--top {
    top: 3rem;
    background: linear-gradient(
      color-mix(in srgb, var(--swage-canvas), transparent 18%),
      transparent
    );
    backdrop-filter: blur(3px);
  }

  .app-modal-sheet__fade--bottom {
    bottom: 0;
    background: linear-gradient(transparent, var(--swage-canvas));
  }

  .app-modal-sheet--swage > .app-modal-sheet__controls {
    top: 0.75rem !important;
    right: 0.75rem !important;
    gap: 0.25rem;
  }

  .app-modal-sheet--swage > .app-modal-sheet__controls .app-modal-icon-btn {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    padding: 0 !important;
    place-items: center;
    border-color: transparent !important;
    border-radius: var(--swage-control-radius);
    background: transparent;
    color: var(--swage-ink);
    backdrop-filter: none;
  }

  .app-modal-sheet--swage:has(
      #app-modal-sheet-published:not([hidden]) .app-modal-sheet__hero--has-media
    ):not(:has(#app-modal-sheet-fade-top:not([hidden])))
    > .app-modal-sheet__controls
    .app-modal-icon-btn {
    color: var(--swage-on-media);
  }

  .app-modal-sheet--swage:has(#app-modal-sheet-sticky-header[data-visible='true'])
    > .app-modal-sheet__controls
    .app-modal-icon-btn {
    color: var(--swage-on-media);
  }

  .app-modal-sheet--swage > .app-modal-sheet__controls .app-modal-icon-btn:hover {
    border-color: var(--swage-line-strong) !important;
    background: var(--swage-elevated) !important;
    color: var(--swage-ink) !important;
  }

  @media (max-width: 56.25rem) {
    .app-modal-sheet__evidence:not([hidden])::after {
      display: none;
    }

    .app-modal-sheet__rail-actions-sticky::after {
      border-bottom: 1px solid var(--swage-line-strong);
    }

    .app-modal-sheet__body {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-modal-sheet__rail {
      position: static;
      min-height: 0;
      border-top: 1px solid var(--swage-line);
      border-left: 0;
    }
  }

  @media (max-width: 40rem) {
    .app-modal-sheet--swage > .app-modal-sheet__controls {
      top: 0.625rem !important;
      right: 0.625rem !important;
    }

    .app-modal-sheet__hero,
    .app-modal-sheet__planned {
      padding: 1.5rem 1rem 2rem;
    }

    .app-modal-sheet__title {
      font-size: clamp(2.25rem, 10vw, 3rem);
    }

    .app-modal-sheet__evidence-list[data-count] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-modal-sheet__evidence-list > div {
      grid-column: span 1;
    }

    .app-modal-sheet__evidence-list > div:nth-child(odd) {
      border-left: 0;
    }

    .app-modal-sheet__evidence-list > div:nth-child(n + 3) {
      border-top: 1px solid var(--swage-line);
    }

    .app-modal-sheet__evidence-list[data-count='1'] > div,
    .app-modal-sheet__evidence-list[data-count='3'] > div:last-child,
    .app-modal-sheet__evidence-list[data-count='5'] > div:last-child {
      grid-column: 1 / -1;
    }

    .app-modal-sheet__inside,
    .app-modal-sheet__detail,
    .app-modal-sheet__related,
    .app-modal-sheet__rail {
      padding: 2.25rem 1rem;
    }

    .app-modal-sheet__rail-actions-sticky {
      margin-right: 0;
      margin-left: 0;
      padding-right: 0;
      padding-left: 0;
    }

    .app-modal-sheet__inside-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-modal-sheet__detail-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-modal-sheet__detail-list > *:last-child:nth-child(odd) {
      grid-column: 1;
    }

    .app-modal-sheet__comparison-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-modal-sheet__comparison-row--header {
      display: none;
    }

    .app-modal-sheet__comparison-row > * + * {
      border-top: 1px solid var(--swage-line);
      border-left: 0;
    }

    .app-modal-sheet__comparison-row > [role='cell']::before {
      display: block;
      margin-bottom: 0.35rem;
      color: var(--swage-accent);
      content: attr(data-label);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      font-weight: 700;
    }
  }

  @media (max-width: 22rem) {
    .app-modal-sheet__evidence-list[data-count] {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-modal-sheet__evidence-list > div,
    .app-modal-sheet__evidence-list[data-count] > div:last-child {
      grid-column: 1;
      border-left: 0;
    }

    .app-modal-sheet__evidence-list > div:nth-child(n + 2) {
      border-top: 1px solid var(--swage-line);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .app-modal-sheet__action {
      transition: none;
    }
  }

  /* -- 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(--org-on-light);
    position: relative; /* containing block for the injected arrow buttons */
  }

  [data-inpage-nav]:not(.proto-page-nav):not(.tacet-page-nav) {
    background: color-mix(in oklch, var(--background), transparent 4%) !important;
    backdrop-filter: blur(14px) saturate(1.1);
  }

  /* Hide the native horizontal scrollbar — on mobile webkit a visible
     bar eats vertical space below the strip and leaks past the sticky
     header look. inpage-nav-scrollspy.js injects [<] / [>] buttons
     when scrollWidth > clientWidth so the user can still navigate
     off-screen items. */
  [data-inpage-nav] > div {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [data-inpage-nav] > div::-webkit-scrollbar {
    display: none;
  }

  /* Arrow buttons — injected by inpage-nav-scrollspy.js. Hidden by
     default; JS toggles `display: flex` whenever the strip can scroll
     in that direction. */
  .inpage-nav-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--background);
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    padding: 0;
  }
  .inpage-nav-arrow--left {
    left: 0;
    border-right: 1px solid var(--border);
  }
  .inpage-nav-arrow--right {
    right: 0;
    border-left: 1px solid var(--border);
  }
  .inpage-nav-arrow:hover,
  .inpage-nav-arrow:focus-visible {
    color: var(--foreground);
  }
  .inpage-nav-arrow:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }

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

  /* Match enterprise suite strip: --nav-link + transparent 2px bar; active = accent */
  [data-inpage-nav] a[href^='#'] {
    color: var(--nav-link);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    border-bottom-color: transparent;
    text-transform: none;
  }

  [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;
  }

  #cta .btn--ghost {
    --btn-rail: var(--cta-accent-text);
    --btn-rail-hover: var(--cta-accent-text);
  }

  #cta:not(.proto-cta--left) .btn--ghost {
    --btn-text-hover: var(--cream);

    box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--cream), transparent 72%);
  }

  /* -- SDK tabs (proto/sdk-01) -------------------------------------------- */
  .sdk-tab-btn {
    color: var(--text-m);
    border-bottom-color: transparent;
  }
  .sdk-tab-btn[aria-selected='true'] {
    color: var(--org-on-light);
    border-bottom-color: var(--org);
  }
  .sdk-tab-btn: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. */
  /* `.accent` spans inside h1/h2 sit on a yellow highlighter swipe, so
     their text must use the paired `--accent-yellow-fg` token to stay
     legible. The `.ft-cta-bottom .btn` / `.ag-cta-bottom .btn` /
     `.agi-cta-bottom .btn` selectors were dropped from this list when
     those bottom CTAs migrated to canonical `.btn .btn--primary`
     (signal-red bg, cream text via `--primary-foreground`) — leaving
     them in here forced black text on red. */
  .ft-hero h1 .accent,
  .ft-section h2 .accent,
  .ft-agent-card .agt-saves,
  .ft-cta-bottom .accent,
  .ag-section .ag-h2 .accent,
  .ag-cta-bottom .accent,
  .agi-hero h1 .accent,
  .agi-card .meta .saves,
  .agi-cta-bottom .accent {
    color: var(--accent-yellow-fg);
  }

  /* -- Hero catalog (hero-catalog.njk on /) -------------------------------
     Outlined packet object inspired by the Proto signature artifact. Fixed
     row sizing keeps glitch text from shifting the first viewport. */
  .hero-catalog {
    --hero-packet-ink: var(--ink-deep);
    --hero-packet-muted: var(--ink-mid);
    --hero-packet-line: color-mix(in oklch, var(--ink-deep), transparent 78%);
    --hero-packet-cell: color-mix(in oklch, var(--background), var(--beige-100) 34%);
    --hero-packet-soft: color-mix(in oklch, var(--beige-200), var(--background) 58%);
    --hero-packet-cta: var(--hero-packet-accent);
    --hero-packet-cta-text: var(--beige-50);
    --hero-packet-accent: var(--org-on-light);
    --hero-cta-rule-color: var(--org-on-light);

    overflow: hidden;
    background: transparent;
    block-size: clamp(37rem, 48vw, 42rem);
    min-block-size: 37rem;
    max-block-size: 42rem;
  }

  html.dark .hero-catalog {
    --hero-packet-ink: var(--beige-100);
    --hero-packet-muted: color-mix(in oklch, var(--beige-300), transparent 18%);
    --hero-packet-line: color-mix(in oklch, var(--beige-200), transparent 82%);
    --hero-packet-cell: color-mix(in oklch, var(--beige-900), var(--beige-950) 34%);
    --hero-packet-soft: color-mix(in oklch, var(--beige-800), var(--beige-950) 42%);
    --hero-packet-cta: var(--hero-packet-accent);
    --hero-packet-cta-text: var(--beige-50);
    --hero-packet-accent: var(--org);
    --hero-cta-rule-color: var(--org);
  }

  .hero-catalog__inner {
    display: flex;
    width: var(--tacet-nav-width, min(calc(100% - clamp(4rem, 18vw, 18rem)), 58rem));
    height: 100%;
    align-items: center;
    margin-inline: auto;
    padding-block: clamp(2.5rem, 3.5vw, 4.5rem) clamp(1.5rem, 2.5vw, 3.5rem);
  }

  .hero-catalog__packet {
    --hero-packet-inset: clamp(1.35rem, 2.1vw, 1.75rem);
    --hero-metal-surface-a: color-mix(in oklch, var(--beige-100), white 8%);
    --hero-metal-surface-b: color-mix(in oklch, var(--beige-200), var(--beige-50) 18%);
    --hero-metal-surface-c: color-mix(in oklch, var(--beige-300), var(--beige-100) 18%);
    --hero-metal-surface-d: color-mix(in oklch, var(--beige-400), var(--beige-200) 24%);
    --hero-metal-surface-e: color-mix(in oklch, var(--beige-500), var(--beige-300) 30%);
    --hero-metal-flare-a: color-mix(in oklch, var(--beige-100), white 8%);
    --hero-metal-flare-b: color-mix(in oklch, var(--beige-400), var(--pur) 8%);
    --hero-metal-flare-c: color-mix(in oklch, var(--beige-500), var(--hero-packet-accent) 9%);
    --hero-metal-sheen: radial-gradient(64% 87% at 12.2% 21.5%, #fefaf5 0%, #ded8d3 100%);

    position: relative;
    display: grid;
    grid-template-rows:
      minmax(2.25rem, auto)
      minmax(8.75rem, 1fr)
      minmax(3.65rem, auto)
      minmax(2.75rem, auto)
      minmax(2.75rem, auto);
    width: 100%;
    height: min(34rem, calc(100% - clamp(3.5rem, 6vw, 7rem)));
    min-height: 24rem;
    max-height: none;
    overflow: hidden;
    border: 1px solid var(--hero-packet-line);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--hero-packet-cell), transparent 8%);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-standard);
  }

  html.dark .hero-catalog__packet {
    --hero-metal-surface-a: color-mix(in oklch, var(--beige-700), var(--beige-800) 38%);
    --hero-metal-surface-b: color-mix(in oklch, var(--beige-800), var(--beige-700) 18%);
    --hero-metal-surface-c: color-mix(in oklch, var(--beige-900), var(--beige-800) 32%);
    --hero-metal-surface-d: color-mix(in oklch, var(--beige-800), var(--beige-950) 22%);
    --hero-metal-surface-e: color-mix(in oklch, var(--beige-700), var(--beige-900) 42%);
    --hero-metal-flare-a: color-mix(in oklch, var(--beige-500), transparent 66%);
    --hero-metal-flare-b: color-mix(in oklch, var(--pur), transparent 84%);
    --hero-metal-flare-c: color-mix(in oklch, var(--hero-packet-accent), transparent 82%);
    --hero-metal-sheen: radial-gradient(
      64% 87% at 12.2% 21.5%,
      color-mix(in oklch, var(--beige-500), transparent 58%) 0%,
      color-mix(in oklch, var(--beige-900), transparent 26%) 100%
    );
  }

  .hero-catalog__packet::before,
  .hero-catalog__packet::after {
    content: '';
    position: absolute;
    inset-block: 0;
    z-index: 0;
    width: 50%;
    opacity: 0;
    pointer-events: none;
    background:
      radial-gradient(
        circle at var(--hero-glare-x, 50%) var(--hero-glare-y, 50%),
        color-mix(in oklch, var(--hero-metal-surface-a), white 14%) 0%,
        color-mix(in oklch, var(--hero-metal-surface-a), transparent 58%) 16%,
        transparent 38%
      ),
      var(--hero-metal-sheen),
      radial-gradient(circle at 12% 18%, var(--hero-metal-flare-a) 0%, transparent 34%),
      radial-gradient(circle at 88% 12%, var(--hero-metal-flare-b) 0%, transparent 34%),
      radial-gradient(circle at 80% 92%, var(--hero-metal-flare-c) 0%, transparent 42%),
      linear-gradient(
        118deg,
        var(--hero-metal-surface-a) 0%,
        var(--hero-metal-surface-b) 22%,
        var(--hero-metal-surface-c) 42%,
        var(--hero-metal-surface-d) 62%,
        var(--hero-metal-surface-e) 82%,
        var(--hero-metal-surface-d) 100%
      );
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  .hero-catalog__packet::before {
    inset-inline-start: 0;
  }

  .hero-catalog__packet::after {
    inset-inline-end: 0;
  }

  .hero-catalog__packet[data-hero-hover-side='human']::before,
  .hero-catalog__packet:has(.hero-catalog__story--human:hover)::before,
  .hero-catalog__packet:has(.hero-catalog__story--human:focus-within)::before {
    opacity: 0.96;
  }

  .hero-catalog__packet[data-hero-hover-side='agent']::after,
  .hero-catalog__packet:has(.hero-catalog__story--agent:hover)::after,
  .hero-catalog__packet:has(.hero-catalog__story--agent:focus-within)::after {
    opacity: 0.96;
  }

  .hero-catalog__row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 1px solid var(--hero-packet-line);
  }

  .hero-catalog__row > * + * {
    border-left: 1px solid var(--hero-packet-line);
  }

  .hero-catalog__row--top {
    min-height: 2.25rem;
  }

  .hero-catalog__layer-icon {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
    stroke-width: 2.5;
  }

  .hero-catalog__layer-icon--agent {
    --hero-catalog-icon-direction: -1;

    color: var(--hero-packet-accent);
    transform: scaleX(-1);
  }

  .hero-catalog__row--story {
    align-items: stretch;
  }

  .hero-catalog__story {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(4.1rem, 1fr) minmax(2.1rem, auto);
    align-content: center;
    gap: clamp(0.4rem, 0.6vw, 0.8rem);
    min-width: 0;
    padding: clamp(0.75rem, 1vw, 1.25rem) var(--hero-packet-inset);
    overflow: hidden;
    transition:
      color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  }

  .hero-catalog__story > * {
    position: relative;
    z-index: 1;
  }

  .hero-catalog__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--hero-catalog-eyebrow-gap);
    color: var(--hero-packet-muted);
    font-family: var(--font-body);
    font-size: var(--hero-catalog-copy-size);
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.2;
  }

  .hero-catalog__eyebrow .hero-catalog__layer-icon {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--duration-fast) var(--ease-decelerate);
  }

  @keyframes hero-catalog-icon-signal {
    0%,
    100% {
      transform: scaleX(var(--hero-catalog-icon-direction, 1)) translateY(0) rotate(0) scale(1);
    }
    12% {
      transform: scaleX(var(--hero-catalog-icon-direction, 1)) translateY(-0.15rem) rotate(-14deg)
        scale(1.18);
    }
    26% {
      transform: scaleX(var(--hero-catalog-icon-direction, 1)) translateY(0.04rem) rotate(12deg)
        scale(1.08);
    }
    42% {
      transform: scaleX(var(--hero-catalog-icon-direction, 1)) translateY(-0.1rem) rotate(-10deg)
        scale(1.16);
    }
    58% {
      transform: scaleX(var(--hero-catalog-icon-direction, 1)) translateY(0) rotate(7deg)
        scale(1.09);
    }
    74% {
      transform: scaleX(var(--hero-catalog-icon-direction, 1)) translateY(-0.05rem) rotate(-4deg)
        scale(1.13);
    }
    88% {
      transform: scaleX(var(--hero-catalog-icon-direction, 1)) translateY(0) rotate(2deg)
        scale(1.07);
    }
  }

  .hero-catalog__story--human .hero-catalog__eyebrow {
    justify-self: end;
    margin-inline-end: var(--space-4);
    text-align: right;
  }

  .hero-catalog__story--agent .hero-catalog__eyebrow {
    justify-self: start;
    margin-inline-start: var(--space-4);
    text-align: left;
  }

  .hero-catalog__metric > *,
  .hero-catalog__steps > * {
    position: relative;
    z-index: 1;
  }

  .hero-catalog__packet[data-hero-hover-side='human']
    .hero-catalog__panel--human
    .hero-catalog__metric,
  .hero-catalog__packet[data-hero-hover-side='agent']
    .hero-catalog__panel--agent
    .hero-catalog__metric {
    background: transparent;
  }

  .hero-catalog__headline {
    --hero-headline-fit: 1;
    --hero-headline-lines: 1;
    --hero-headline-size: clamp(2.75rem, 4.4vw, 3.9rem);

    display: block;
    max-width: min(100%, 14ch);
    min-height: 2.08em;
    margin: 0;
    color: var(--hero-packet-ink);
    font-family: var(--font-display);
    font-size: calc(var(--hero-headline-size) * var(--hero-headline-fit));
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.06;
    text-wrap: balance;
  }

  .hero-catalog__headline > span {
    display: block;
    min-height: 2.04em;
    line-height: inherit;
  }

  .hero-catalog__headline .hero-headline__line {
    display: block;
    line-height: 1.06;
    white-space: nowrap;
  }

  .hero-catalog__story--agent .hero-catalog__headline {
    color: var(--hero-packet-accent);
  }

  .hero-catalog__description {
    max-width: 36ch;
    min-height: 2.7em;
    margin: 0;
    color: var(--hero-packet-muted);
    font-size: clamp(0.8rem, 0.95vw, 0.95rem);
    font-weight: 560;
    line-height: 1.5;
    transition:
      opacity 160ms ease,
      transform 160ms ease;
    text-wrap: pretty;
  }

  .hero-catalog__description.is-glitching {
    opacity: 0.4;
    transform: translateY(0.125rem);
  }

  .hero-catalog__row--metrics {
    background: transparent;
  }

  .hero-catalog__metric {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 3.65rem;
    padding: 0.72rem var(--hero-packet-inset);
    overflow: hidden;
    background: transparent;
    color: var(--hero-packet-muted);
    font-size: 0.78rem;
    line-height: 1.3;
  }

  .hero-catalog__metric-box {
    display: grid;
    gap: 0.2rem;
    width: 100%;
    max-width: 25rem;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--hero-packet-line);
    background: color-mix(in oklch, var(--hero-packet-soft), transparent 18%);
  }

  .hero-catalog__metric-box p {
    margin: 0;
  }

  .hero-catalog__metric-box strong {
    color: var(--hero-packet-accent);
    font-weight: 720;
  }

  .hero-catalog__row--cta {
    background: transparent;
  }

  .hero-catalog__cta {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.58rem var(--hero-packet-inset);
    overflow: hidden;
    background: var(--hero-packet-cell);
    color: var(--hero-packet-ink);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    font-weight: 680;
    line-height: 1;
    text-decoration: none;
    transition:
      background var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  }

  /* Copy-prompt variant — the agent-panel CTA is a <button>; normalize UA
     chrome so it renders identically to the anchor variant. */
  button.hero-catalog__cta {
    inline-size: 100%;
    cursor: pointer;
    text-align: start;
    appearance: none;
  }

  .hero-catalog__cta-group {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
  }

  .hero-catalog__cta::before {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, var(--hero-cta-rule-color), var(--hero-cta-rule-color)),
      linear-gradient(
        90deg,
        var(--hero-cta-metal-a) 0%,
        var(--hero-cta-metal-b) 34%,
        var(--hero-cta-metal-c) 58%,
        var(--hero-cta-metal-b) 82%,
        var(--hero-cta-metal-a) 100%
      );
    background-position:
      0 100%,
      0 0;
    background-repeat: no-repeat;
    background-size:
      100% var(--hero-cta-rule-resting),
      0 100%;
    content: '';
    opacity: 0.98;
    transition: background-size var(--duration-normal) var(--ease-decelerate);
    pointer-events: none;
  }

  .hero-catalog__cta > * {
    position: relative;
    z-index: 1;
  }

  .hero-catalog__cta svg {
    flex: none;
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .hero-catalog__cta:hover,
  .hero-catalog__cta:focus-visible {
    color: var(--hero-packet-cta-text);
    box-shadow: inset 0 0 0 1px var(--hero-packet-accent);
  }

  .hero-catalog__packet[data-hero-hover-side='human']
    .hero-catalog__panel--human
    .hero-catalog__cta,
  .hero-catalog__packet[data-hero-hover-side='agent']
    .hero-catalog__panel--agent
    .hero-catalog__cta,
  .hero-catalog__panel:focus-within .hero-catalog__cta {
    color: var(--hero-packet-cta-text);
    box-shadow: inset 0 0 0 1px var(--hero-packet-accent);
  }

  .hero-catalog__cta:hover::before,
  .hero-catalog__cta:focus-visible::before {
    background-size:
      100% var(--hero-cta-rule-hover),
      100% 100%;
  }

  .hero-catalog__packet[data-hero-hover-side='human']
    .hero-catalog__panel--human
    .hero-catalog__cta::before,
  .hero-catalog__packet[data-hero-hover-side='agent']
    .hero-catalog__panel--agent
    .hero-catalog__cta::before,
  .hero-catalog__panel:focus-within .hero-catalog__cta::before {
    background-size:
      100% var(--hero-cta-rule-hover),
      100% 100%;
  }

  .hero-catalog__cta:hover svg,
  .hero-catalog__cta:focus-visible svg {
    transform: translateX(0.25rem);
  }

  .hero-catalog__cta:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -0.375rem;
  }

  .hero-catalog__row--steps {
    border-bottom: 0;
  }

  .hero-catalog__steps {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
  }

  .hero-catalog__steps li {
    display: grid;
    align-content: center;
    gap: 0.28rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.42rem clamp(0.7rem, 1vw, 0.9rem);
    border-right: 1px solid var(--hero-packet-line);
    color: var(--hero-packet-muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.2;
  }

  .hero-catalog__steps li:last-child {
    border-right: 0;
    padding-inline-end: var(--hero-packet-inset);
  }

  .hero-catalog__steps li:first-child {
    padding-inline-start: var(--hero-packet-inset);
  }

  .hero-catalog__steps span {
    color: var(--hero-packet-accent);
    font-size: 0.62rem;
    font-weight: 760;
  }

  .hero-catalog__steps strong {
    overflow: hidden;
    color: var(--hero-packet-ink);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-catalog__steps em {
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (max-width: 64rem) {
    .hero-catalog {
      block-size: auto;
      min-block-size: 0;
      max-block-size: none;
    }

    .hero-catalog__inner {
      display: block;
      width: var(--tacet-nav-width, min(calc(100% - 2rem), 58rem));
      padding-block: 5rem 1.25rem;
    }

    .hero-catalog__packet {
      height: auto;
      max-height: none;
      min-height: 0;
    }

    .hero-catalog__row {
      grid-template-columns: 1fr;
    }

    .hero-catalog__row > * + * {
      border-left: 0;
      border-top: 1px solid var(--hero-packet-line);
    }

    .hero-catalog__story {
      min-height: 14rem;
    }

    .hero-catalog__headline {
      --hero-headline-size: clamp(2.25rem, 11vw, 4rem);
    }

    .hero-catalog__steps {
      grid-template-columns: 1fr;
    }

    .hero-catalog__steps li {
      min-height: 3.75rem;
      border-right: 0;
      border-bottom: 1px solid var(--hero-packet-line);
    }

    .hero-catalog__steps li:last-child {
      border-bottom: 0;
    }
  }

  @media (max-width: 40rem) {
    .hero-catalog__inner {
      width: min(calc(100% - 1.5rem), 58rem);
    }

    .hero-catalog__story {
      min-height: 13rem;
      padding: 1rem;
    }

    .hero-catalog__headline {
      max-width: 11ch;
      min-height: 2.7em;
      --hero-headline-size: clamp(2rem, 10vw, 3.25rem);
    }

    .hero-catalog__description {
      min-height: 4.4em;
      font-size: 0.95rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-catalog__cta,
    .hero-catalog__cta::before,
    .hero-catalog__cta svg,
    .hero-catalog__description,
    .hero-catalog__layer-icon {
      transition: none;
      animation: none;
    }
  }

  /* -- Home hero, delayed audience chrome, and chronological catalog -----
     The hero panels are full-bleed while each panel's content shares the
     canonical 90rem section rail. The primary pill floats above the hero;
     the audience notice joins it only after the hero leaves view. */
  :where(.page-shell) > .hero-catalog {
    --hero-center-gutter: var(--hero-catalog-center-gutter);
    --home-hero-content-height: clamp(36rem, 48vw, 46rem);
    --hero-content-edge: max(
      var(--tacet-section-pad-x, clamp(1.5rem, 4vw, 3rem)),
      calc(
        (100vw - var(--tacet-section-max, 90rem)) / 2 +
          var(--tacet-section-pad-x, clamp(1.5rem, 4vw, 3rem))
      )
    );

    position: relative;
    z-index: 2;
    box-sizing: border-box;
    block-size: auto;
    min-block-size: 0;
    max-block-size: none;
    overflow: clip;
    border-block-start: 0;
    border-block-end: 1px solid var(--hero-packet-line);
    border-inline: 1px solid var(--hero-packet-line);
    background:
      radial-gradient(
        circle at 50% 0%,
        color-mix(in oklch, var(--pur), transparent 88%),
        transparent 42%
      ),
      var(--background);
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__packet {
    display: grid;
    grid-template: minmax(clamp(39rem, 57vw, 46rem), auto) / repeat(2, minmax(0, 1fr));
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__packet::before,
  :where(.page-shell > .hero-catalog) .hero-catalog__packet::after {
    content: none;
  }

  .hero-catalog__panel {
    --hero-human-hover-bg: color-mix(in oklch, var(--red), var(--tacet-orange) 22%);
    --hero-human-cta-hover-bg: color-mix(in oklch, var(--hero-human-hover-bg), var(--ink-deep) 34%);
    --hero-agent-cta-hover-bg: color-mix(
      in oklch,
      var(--hero-catalog-dark-ink),
      var(--hero-catalog-on-solid) 20%
    );
    --hero-agent-dark-hover-bg: var(--hero-catalog-agent-dark-surface);
    --hero-agent-dark-hover-text: var(--hero-catalog-dark-ink);
    --hero-agent-dark-hover-muted: var(--hero-catalog-agent-dark-muted);
    --hero-agent-dark-cta-hover-bg: var(--hero-catalog-agent-dark-action);
    --hero-agent-dark-cta-hover-text: var(--hero-catalog-on-solid);
    --hero-panel-hover-text: var(--hero-catalog-on-solid);
    --hero-panel-hover-muted: var(--hero-catalog-muted-on-solid);
    --hero-panel-hover-glow: color-mix(
      in oklch,
      var(--hero-panel-hover-bg),
      var(--hero-panel-hover-text) 12%
    );
    --hero-panel-metal-a: color-mix(
      in oklch,
      var(--hero-panel-hover-bg),
      var(--hero-panel-hover-text) 18%
    );
    --hero-panel-metal-b: color-mix(
      in oklch,
      var(--hero-panel-hover-bg),
      var(--hero-panel-hover-text) 7%
    );
    --hero-panel-metal-c: var(--hero-panel-hover-bg);
    --hero-panel-metal-d: color-mix(
      in oklch,
      var(--hero-panel-hover-bg),
      var(--hero-panel-hover-text) 12%
    );
    --hero-panel-metal-e: color-mix(
      in oklch,
      var(--hero-panel-hover-bg),
      var(--hero-panel-hover-text) 3%
    );
    --hero-cta-metal-a: color-mix(
      in oklch,
      var(--hero-cta-hover-bg),
      var(--hero-panel-hover-bg) 4%
    );
    --hero-cta-metal-b: var(--hero-cta-hover-bg);
    --hero-cta-metal-c: color-mix(
      in oklch,
      var(--hero-cta-hover-bg),
      var(--hero-panel-hover-bg) 12%
    );
    --hero-cta-rule-resting: var(--border-width-md);
    --hero-cta-rule-hover: calc(var(--hero-cta-rule-resting) * 2);

    position: relative;
    isolation: isolate;
    container-type: inline-size;
    min-width: 0;
    overflow: hidden;
    background-color: color-mix(in oklch, var(--hero-packet-cell), transparent 15%);
    transition: background-color var(--hero-catalog-panel-duration) var(--ease-standard);
  }

  .hero-catalog__panel--human {
    --hero-panel-hover-bg: var(--hero-human-hover-bg);
    --hero-cta-hover-bg: var(--hero-human-cta-hover-bg);
    --hero-cta-hover-text: var(--hero-catalog-on-solid);
  }

  .hero-catalog__panel--agent {
    --hero-panel-hover-bg: var(--hero-catalog-dark-ink);
    --hero-panel-hover-muted: var(--hero-catalog-agent-dark-surface);
    --hero-cta-hover-bg: var(--hero-agent-cta-hover-bg);
    --hero-cta-hover-text: var(--hero-catalog-on-solid);

    border-inline-start: 1px solid var(--hero-packet-line);
  }

  html.dark .hero-catalog__panel--agent {
    --hero-panel-hover-bg: var(--hero-agent-dark-hover-bg);
    --hero-panel-hover-text: var(--hero-agent-dark-hover-text);
    --hero-panel-hover-muted: var(--hero-agent-dark-hover-muted);
    --hero-cta-hover-bg: var(--hero-agent-dark-cta-hover-bg);
    --hero-cta-hover-text: var(--hero-agent-dark-cta-hover-text);
  }

  .hero-catalog__panel::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(
        circle at var(--hero-glare-x, 50%) var(--hero-glare-y, 32%),
        color-mix(in oklch, var(--hero-panel-hover-glow), transparent 84%) 0%,
        color-mix(in oklch, var(--hero-panel-hover-glow), transparent 94%) 24%,
        transparent 50%
      ),
      linear-gradient(
        118deg,
        var(--hero-panel-metal-a) 0%,
        var(--hero-panel-metal-b) 16%,
        var(--hero-panel-metal-c) 36%,
        var(--hero-panel-metal-d) 54%,
        var(--hero-panel-metal-e) 74%,
        var(--hero-panel-metal-c) 88%,
        var(--hero-panel-metal-b) 100%
      );
    content: '';
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--hero-catalog-panel-duration) var(--ease-standard);
  }

  .hero-catalog__packet[data-hero-hover-side='human'] .hero-catalog__panel--human::before,
  .hero-catalog__packet[data-hero-hover-side='agent'] .hero-catalog__panel--agent::before,
  .hero-catalog__panel:focus-within::before {
    opacity: 1;
  }

  .hero-catalog__packet[data-hero-hover-side='human'] .hero-catalog__panel--human,
  .hero-catalog__packet[data-hero-hover-side='agent'] .hero-catalog__panel--agent,
  .hero-catalog__panel:focus-within {
    --hero-packet-ink: var(--hero-panel-hover-text);
    --hero-packet-muted: var(--hero-panel-hover-muted);
    --hero-packet-line: color-mix(in oklch, var(--hero-panel-hover-text), transparent 65%);
    --hero-packet-cell: color-mix(
      in oklch,
      var(--hero-panel-hover-bg),
      var(--hero-panel-hover-text) 8%
    );
    --hero-packet-soft: color-mix(
      in oklch,
      var(--hero-panel-hover-bg),
      var(--hero-panel-hover-text) 4%
    );
    --hero-packet-accent: var(--hero-panel-hover-text);
    --hero-packet-cta: var(--hero-cta-hover-bg);
    --hero-packet-cta-text: var(--hero-cta-hover-text);

    background-color: var(--hero-panel-hover-bg);
  }

  @media (hover: hover) and (pointer: fine) {
    .hero-catalog__panel:hover::before {
      opacity: 1;
    }

    .hero-catalog__panel:hover {
      --hero-packet-ink: var(--hero-panel-hover-text);
      --hero-packet-muted: var(--hero-panel-hover-muted);
      --hero-packet-line: color-mix(in oklch, var(--hero-panel-hover-text), transparent 65%);
      --hero-packet-cell: color-mix(
        in oklch,
        var(--hero-panel-hover-bg),
        var(--hero-panel-hover-text) 8%
      );
      --hero-packet-soft: color-mix(
        in oklch,
        var(--hero-panel-hover-bg),
        var(--hero-panel-hover-text) 4%
      );
      --hero-packet-accent: var(--hero-panel-hover-text);
      --hero-packet-cta: var(--hero-cta-hover-bg);
      --hero-packet-cta-text: var(--hero-cta-hover-text);

      background-color: var(--hero-panel-hover-bg);
    }

    .hero-catalog__panel:hover .hero-catalog__cta {
      color: var(--hero-packet-cta-text);
      box-shadow: inset 0 0 0 1px var(--hero-packet-accent);
    }

    .hero-catalog__panel:hover .hero-catalog__cta::before {
      background-size:
        100% var(--hero-cta-rule-hover),
        100% 100%;
    }

    .hero-catalog__panel:hover .hero-catalog__eyebrow .hero-catalog__layer-icon {
      animation: hero-catalog-icon-signal var(--duration-cinema) var(--ease-standard) both;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-catalog__panel,
    .hero-catalog__panel::before {
      transition: none;
    }

    .hero-catalog__panel:hover .hero-catalog__eyebrow .hero-catalog__layer-icon {
      animation: none;
    }
  }

  .hero-catalog__panel-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: minmax(15rem, 1fr) auto auto auto;
    width: 100%;
    min-height: 100%;
  }

  .hero-catalog__panel--human .hero-catalog__panel-inner {
    margin-inline-start: auto;
  }

  .hero-catalog__panel--agent .hero-catalog__panel-inner {
    margin-inline-end: auto;
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__story,
  :where(.page-shell > .hero-catalog) .hero-catalog__metric,
  :where(.page-shell > .hero-catalog) .hero-catalog__cta,
  :where(.page-shell > .hero-catalog) .hero-catalog__steps {
    padding-inline: var(--tacet-section-pad-x, clamp(1.5rem, 4vw, 3rem));
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__story {
    grid-template-rows: auto minmax(7.75rem, auto) minmax(3rem, auto);
    align-content: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    min-height: 0;
    padding-block: clamp(2.5rem, 5vw, 5.5rem);
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__panel--human .hero-catalog__story {
    padding-block-start: max(clamp(2.5rem, 5vw, 5.5rem), var(--home-primary-nav-safe-area));
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__headline {
    --hero-headline-size: clamp(2rem, 9.4cqi, 4.35rem);

    width: 100%;
    max-width: none;
    /* The glitch cycle swaps one- and two-line headlines. Reserve the full
       two-line measure before JS fits the first phrase so every beat keeps the
       story, metrics, and CTA rows fixed in place. */
    min-height: 4.75rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.9;
    overflow-wrap: normal;
    text-transform: uppercase;
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__headline > span {
    display: block;
    max-width: none;
    min-height: 0;
    white-space: nowrap;
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__headline.is-stacked {
    --hero-headline-size: clamp(2.55rem, 12cqi, 5.45rem);

    min-height: 7rem;
    line-height: 0.72;
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__headline .hero-headline__line {
    line-height: 0.72;
    white-space: nowrap;
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__story--human .hero-headline__line {
    text-align: right;
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__story--agent .hero-headline__line {
    text-align: left;
  }

  @media (min-width: 48rem) {
    :where(.page-shell > .hero-catalog) .hero-catalog__headline {
      min-height: 5.15rem;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__headline.is-stacked {
      min-height: 7.2rem;
    }
  }

  @media (min-width: 64.0625rem) {
    :where(.page-shell > .hero-catalog) .hero-catalog__headline {
      min-height: 6.1rem;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__headline.is-stacked {
      --hero-headline-size: clamp(5.15rem, 15.4cqi, 7.85rem);

      min-height: 8.9rem;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__story--human .hero-catalog__headline {
      text-align: right;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__story--agent .hero-catalog__headline {
      text-align: left;
    }
  }

  @media (min-width: 80rem) {
    :where(.page-shell > .hero-catalog) .hero-catalog__headline {
      --hero-headline-size: clamp(4.8rem, 12.2cqi, 5.9rem);

      min-height: 6.9rem;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__headline.is-stacked {
      --hero-headline-size: clamp(5.9rem, 15.8cqi, 8.35rem);

      min-height: 12.125rem;
    }
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__description {
    max-width: 42ch;
    /* Longest rotating descriptions wrap to three lines around the 64rem split.
       Reserve that measure on every panel so subtitle swaps do not shift rows. */
    min-height: 4.5em;
    font-size: clamp(0.925rem, 1.1vw, 1.075rem);
  }

  .hero-catalog__cta,
  .hero-catalog__steps {
    border-block-start: 1px solid var(--hero-packet-line);
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__metric {
    min-height: 6rem;
    align-items: flex-start;
    padding-block: var(--space-2) var(--space-4);
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__metric-box {
    width: min(100%, 25rem);
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__cta {
    min-height: 5.25rem;
    padding-block: 1rem;
  }

  :where(.page-shell > .hero-catalog) .hero-catalog__steps li {
    min-height: 4.25rem;
    padding-block: 0.7rem;
  }

  @media (min-width: 64.01rem) {
    :where(.page-shell) > .hero-catalog {
      min-block-size: var(--home-hero-content-height);
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__packet {
      grid-template: minmax(var(--home-hero-content-height), auto) / repeat(2, minmax(0, 1fr));
      height: auto;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__panel-inner {
      grid-template-rows: minmax(0, 1fr) auto auto auto;
      min-height: var(--home-hero-content-height);
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__story {
      grid-template-rows: auto auto auto;
      gap: clamp(0.75rem, 1.8dvh, 1.5rem);
      padding-block: clamp(1.5rem, 4dvh, 3.5rem);
      /* Tighten only the description-to-metric handoff by roughly 35%. */
      padding-block-end: calc(var(--space-6) + var(--border-width-md));
      padding-block-start: max(clamp(1.5rem, 4dvh, 3.5rem), var(--home-primary-nav-safe-area));
    }

    .hero-catalog__panel--human
      :is(.hero-catalog__story, .hero-catalog__metric, .hero-catalog__cta) {
      padding-inline: var(--hero-content-edge) var(--hero-center-gutter);
    }

    .hero-catalog__panel--agent
      :is(.hero-catalog__story, .hero-catalog__metric, .hero-catalog__cta) {
      padding-inline: var(--hero-center-gutter) var(--hero-content-edge);
    }

    .hero-catalog__panel--human .hero-catalog__cta {
      justify-content: flex-end;
      text-align: right;
    }

    .hero-catalog__panel--human .hero-catalog__story,
    .hero-catalog__panel--human .hero-catalog__metric {
      justify-items: end;
      text-align: right;
    }

    .hero-catalog__panel--human .hero-catalog__metric {
      justify-content: flex-end;
    }

    .hero-catalog__panel--agent .hero-catalog__metric {
      justify-content: flex-start;
    }

    .hero-catalog__panel--human .hero-catalog__description {
      margin-inline-start: auto;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__steps {
      padding-inline: 0;
      border-block-end: 1px solid var(--hero-packet-line);
    }

    .hero-catalog__panel--human .hero-catalog__steps {
      grid-template-columns:
        var(--hero-content-edge) repeat(3, minmax(0, 1fr))
        var(--hero-center-gutter);
    }

    .hero-catalog__panel--human .hero-catalog__steps li {
      justify-items: end;
      text-align: right;
    }

    .hero-catalog__panel--human .hero-catalog__steps li:last-child {
      padding-inline-end: 0;
    }

    .hero-catalog__panel--agent .hero-catalog__steps {
      grid-template-columns:
        var(--hero-center-gutter) repeat(3, minmax(0, 1fr))
        var(--hero-content-edge);
    }

    .hero-catalog__panel .hero-catalog__steps li:first-child {
      padding-inline-start: 0;
    }

    .hero-catalog__panel .hero-catalog__steps li:nth-child(1) {
      grid-column: 2;
    }

    .hero-catalog__panel .hero-catalog__steps li:nth-child(2) {
      grid-column: 3;
    }

    .hero-catalog__panel .hero-catalog__steps li:nth-child(3) {
      grid-column: 4;
    }
  }

  @media (min-width: 64.01rem) and (max-height: 48rem) {
    :where(.page-shell > .hero-catalog) .hero-catalog__story {
      gap: clamp(0.6rem, 1.5dvh, 0.875rem);
      padding-block: 1rem;
      padding-block-start: var(--home-primary-nav-safe-area);
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__metric {
      min-height: 5rem;
      padding-block: 0.65rem;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__cta {
      min-height: 4.5rem;
      padding-block: 0.85rem;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__steps li {
      min-height: 3.75rem;
      padding-block: 0.55rem;
    }
  }

  /* -- Home shared chrome -------------------------------------------------
     The primary Tacet pill floats over the split hero. Only the audience
     notice is conditional: it joins the normal chrome stack once the hero
     has left the visible area beneath the pill. */
  .page-shell:has(> .hero-catalog) {
    --home-nav-inset-top: var(--space-2);
    --home-nav-notice-block-size: 2.125rem;
    --home-nav-notice-overlap: 0rem;
    --home-nav-bar-block-size: 4.125rem;
    --home-hero-nav-clearance: var(--space-24);
    --home-primary-nav-safe-area: calc(
      var(--home-nav-inset-top) + var(--home-nav-notice-block-size) -
        var(--home-nav-notice-overlap) + var(--home-nav-bar-block-size) +
        var(--home-hero-nav-clearance)
    );
  }

  .home-nav-shell {
    gap: 0;
    padding-top: var(--home-nav-inset-top, var(--space-2));
  }

  .home-nav-shell .proto-nav__notice {
    min-height: var(--home-nav-notice-block-size);
  }

  .home-nav-shell .proto-nav__bar {
    min-height: var(--home-nav-bar-block-size);
  }

  .home-nav-shell .home-nav-audience {
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--duration-normal) var(--ease-standard),
      transform var(--duration-normal) var(--ease-standard);
  }

  .home-nav-shell[data-home-audience-visible='false'] .home-nav-audience {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-1 * var(--space-2)));
  }

  .tacet-home-page #catalog-filter-bar {
    position: relative;
    top: auto;
    z-index: auto;
    min-height: var(--home-category-rail-height, 3.5rem);
    scroll-margin-top: calc(
      var(--home-sticky-chrome-height, var(--tacet-nav-bottom, var(--nav-height))) +
        var(--home-category-rail-height, 3.5rem) + var(--space-4)
    );
  }

  .tacet-home-page #catalog-filter-bar[data-stuck='true'] {
    border-bottom: 1px solid var(--border);
    background: var(--background) !important;
  }

  .tacet-home-page #catalog-filter-bar .catalog-filter-shell,
  .tacet-home-page #catalog-filter-bar[data-stuck='true'] .catalog-filter-shell {
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    max-width: none;
    min-height: var(--home-category-rail-height, 3.5rem);
    overflow: hidden;
    padding-top: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    backdrop-filter: none;
  }

  .tacet-home-page #catalog-filter-bar .catalog-filter-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tacet-home-page .catalog-filter-btn {
    min-height: calc(var(--home-category-rail-height, 3.5rem) - 1px);
  }

  @media (prefers-reduced-motion: reduce) {
    .home-nav-shell .home-nav-audience {
      transition: none;
    }
  }

  @media (max-width: 63.99rem) {
    .page-shell:has(> .hero-catalog) {
      --home-nav-bar-block-size: 4.25rem;
    }
  }
  .home-catalog {
    --home-category-cloud-bg: color-mix(in oklch, var(--background), var(--beige-100) 55%);
    --home-category-all-bg: color-mix(in oklch, var(--background), var(--beige-200) 42%);

    border-block-end: 1px solid var(--border);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--beige-100), transparent 54%),
        transparent 22rem
      ),
      var(--background);
  }

  /* The catalog index starts beneath the fixed Tacet chrome, so the shared
     shell owns the complete wash through this handoff in both themes. */
  .tacet-catalog-page > .home-catalog {
    background: transparent;
  }

  html.dark .home-catalog {
    --home-category-cloud-bg: color-mix(in oklch, var(--background), var(--beige-800) 14%);
    --home-category-all-bg: color-mix(in oklch, var(--background), var(--beige-950) 16%);
  }

  .home-row-catalog {
    min-height: 100dvh;
    background: var(--background);
  }

  .home-catalog__rail {
    width: min(
      calc(100% - (2 * var(--tacet-section-pad-x, clamp(1.5rem, 4vw, 3rem)))),
      calc(
        var(--tacet-section-max, 90rem) - (2 * var(--tacet-section-pad-x, clamp(1.5rem, 4vw, 3rem)))
      )
    );
    margin-inline: auto;
    padding-block: 0 clamp(3rem, 7vw, 7rem);
  }

  .tacet-home-page [data-home-all-rows] {
    padding-top: clamp(var(--space-4), 2vw, var(--space-8));
  }

  .tacet-home-page .catalog-row {
    --home-catalog-row-inline: clamp(0.5rem, 1.6vw, 2rem);

    contain-intrinsic-size: auto 22rem;
  }

  .tacet-home-page .catalog-row-header {
    padding: var(--space-2) var(--home-catalog-row-inline) 0 !important;
  }

  .tacet-home-page .catalog-row-title {
    font-size: var(--text-xl);
    line-height: 1.12;
  }

  .tacet-home-page .catalog-track-wrap {
    --catalog-rail-pad-x: var(--home-catalog-row-inline);
    --catalog-rail-pad-top: var(--space-6);
    --catalog-rail-pad-bottom: var(--space-6);

    margin-top: calc(-1 * var(--space-4));
    margin-bottom: 0;
  }

  @media (hover: hover) and (pointer: fine) and (min-width: 48rem) {
    .tacet-home-page .catalog-track-wrap {
      --catalog-rail-pad-bottom: var(--space-8);
    }
  }

  .tacet-home-page .catalog-scroll-track--gallery ~ .catalog-inline-scroll {
    --catalog-gallery-hover-y-outset: var(--space-2);
  }

  @media (max-width: 47.5rem) {
    .tacet-home-page .catalog-row-header {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 0 var(--space-2);
      padding-right: var(--home-catalog-row-inline) !important;
    }

    .tacet-home-page .catalog-row-copy {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--space-2);
      min-width: 0;
    }

    .tacet-home-page .catalog-row-heading {
      grid-column: 1;
      grid-row: 1;
      min-width: 0;
      overflow: hidden;
    }

    .tacet-home-page .catalog-row-title {
      overflow: hidden;
      font-size: 1rem;
      text-overflow: ellipsis;
      text-wrap: nowrap;
      white-space: nowrap;
    }

    .tacet-home-page .catalog-row-count {
      grid-column: 2;
      grid-row: 1;
      max-width: none;
    }

    .tacet-home-page .catalog-row-tools {
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      justify-self: end;
      justify-content: flex-end;
      gap: 0.125rem;
      max-inline-size: none;
      overflow: visible;
      padding: 0;
    }

    .tacet-home-page .catalog-scroll-btn {
      width: 1.75rem;
      min-width: 1.75rem;
      height: 1.75rem;
      min-height: 1.75rem;
      padding: 0 !important;
    }

    .tacet-home-page .catalog-scroll-track--gallery ~ .catalog-inline-scroll,
    .tacet-home-page
      .catalog-track-wrap:hover
      .catalog-scroll-track--gallery
      ~ .catalog-inline-scroll,
    .tacet-home-page
      .catalog-track-wrap:focus-within
      .catalog-scroll-track--gallery
      ~ .catalog-inline-scroll,
    .tacet-home-page
      .catalog-track-wrap--card-hovered
      .catalog-scroll-track--gallery
      ~ .catalog-inline-scroll {
      top: var(--catalog-rail-pad-top) !important;
      bottom: var(--catalog-rail-pad-bottom) !important;
      width: 2.75rem;
      padding-inline: 0.25rem;
    }

    .tacet-home-page .catalog-scroll-track--gallery ~ .catalog-inline-scroll svg {
      width: 1.75rem !important;
      height: 1.75rem !important;
      padding: 0.4rem;
      box-shadow: var(--shadow-sm);
    }

    .tacet-home-page .catalog-scroll-track--gallery ~ .catalog-inline-scroll:hover svg,
    .tacet-home-page .catalog-scroll-track--gallery ~ .catalog-inline-scroll:focus-visible svg {
      transform: translateX(0.05rem) scale(1.02);
    }

    .tacet-home-page
      .catalog-scroll-track--gallery
      ~ .catalog-inline-scroll[data-dir='left']:hover
      svg,
    .tacet-home-page
      .catalog-scroll-track--gallery
      ~ .catalog-inline-scroll[data-dir='left']:focus-visible
      svg {
      transform: translateX(-0.05rem) scale(1.02);
    }
  }

  @media (max-width: 22.5rem) {
    .tacet-home-page .home-catalog-results__count > span:last-child {
      display: none;
    }
  }

  @media (min-width: 48rem) {
    .tacet-home-page .catalog-row-title {
      font-size: var(--text-2xl);
    }
  }

  .home-category-cloud {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    padding-block: clamp(2.25rem, 5vw, 5rem) clamp(1rem, 3vw, 2.5rem);
    scroll-margin-top: calc(var(--home-sticky-chrome-height, var(--nav-height)) + 1rem);
  }

  .home-category-cloud::before {
    position: absolute;
    inset-block: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    border-block-end: 1px solid var(--border);
    background: var(--home-category-cloud-bg);
    content: '';
    transform: translateX(-50%);
  }

  .tacet-catalog-page .home-category-cloud::before {
    background: transparent;
  }

  .home-category-tag {
    --home-category-accent: var(--catalog-taxonomy-accent, var(--cat-default));
    --home-category-border: var(--card);

    position: relative;
    isolation: isolate;
    display: inline-flex;
    min-height: 2.75rem;
    border: 1px solid var(--home-category-border);
    border-radius: var(--radius-2xl);
    padding: 0.3125rem;
    background: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
    font-size: 0.8rem;
    font-weight: 680;
    line-height: 1;
    text-decoration: none;
    transform: translateZ(0);
    transition:
      background var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .home-category-tag__face {
    --category-tint-accent: var(--home-category-accent);

    display: inline-flex;
    max-width: 100%;
    align-items: stretch;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--category-tint-fill);
    transition:
      background var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  html.dark .home-category-tag {
    --home-category-border: color-mix(in oklch, var(--foreground), transparent 78%);
  }

  html.dark .home-category-tag--all {
    --home-category-accent: var(--foreground);
  }

  .home-category-tag__label {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    padding: 0.55rem 0.75rem;
    line-height: 1.2;
  }

  .home-category-tag__counts {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.55rem;
    border-inline-start: 1px solid color-mix(in oklch, var(--home-category-accent), transparent 78%);
    padding: 0.45rem 0.65rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.675rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .home-category-tag__count {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
  }

  .home-category-tag__count-icon {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
  }

  .home-category-tag__tooltip {
    position: absolute;
    z-index: 10;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    width: max-content;
    max-width: min(12rem, calc(100vw - 2rem));
    border-radius: var(--radius-md);
    padding: 0.45rem 0.55rem;
    background: var(--surface-invert);
    color: var(--background);
    box-shadow: var(--shadow-md);
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 0.25rem, 0);
    transition:
      opacity var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .home-category-tag:hover,
  .home-category-tag:focus-visible,
  .home-category-tag[aria-current='true'] {
    z-index: 2;
    border-color: color-mix(in oklch, var(--home-category-accent), transparent 88%);
    background: color-mix(in oklch, var(--home-category-accent), transparent 94%);
    transform: translate3d(0, -1px, 0);
  }

  .home-category-tag:hover .home-category-tag__face,
  .home-category-tag:focus-visible .home-category-tag__face,
  .home-category-tag[aria-current='true'] .home-category-tag__face {
    border-color: color-mix(in oklch, var(--home-category-accent), transparent 48%);
    background: color-mix(in oklch, var(--home-category-accent), transparent 88%);
  }

  .home-category-tag--all,
  .home-category-tag--all:hover,
  .home-category-tag--all:focus-visible,
  .home-category-tag--all[aria-current='true'] {
    border-color: color-mix(in oklch, var(--beige-400), transparent 64%);
    background: var(--home-category-cloud-bg);
  }

  .home-category-tag--all .home-category-tag__face,
  .home-category-tag--all:hover .home-category-tag__face,
  .home-category-tag--all:focus-visible .home-category-tag__face,
  .home-category-tag--all[aria-current='true'] .home-category-tag__face {
    border-color: color-mix(in oklch, var(--beige-500), transparent 66%);
    background: var(--home-category-all-bg);
  }

  .home-category-tag:hover .home-category-tag__tooltip,
  .home-category-tag:focus-visible .home-category-tag__tooltip {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }

  .home-category-tag:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
  }

  .home-catalog-results {
    --home-results-accent: var(--foreground);

    margin-block: 0 1.25rem;
    padding-block: 1rem;
  }

  .home-catalog-results__copy {
    min-width: 0;
  }

  .home-catalog-results__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
  }

  .home-catalog-results__heading {
    flex: none;
    max-width: 100%;
    margin: 0;
    scroll-margin-top: calc(
      var(--home-sticky-chrome-height, var(--tacet-nav-bottom, var(--nav-height))) + var(--space-4)
    );
  }

  .home-catalog-results__heading:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--ring);
    outline-offset: 4px;
  }

  .home-catalog-results__description {
    max-width: 62ch;
    margin: 0.4rem 0 0;
    color: var(--text-m);
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  .home-catalog-results__summary,
  .home-catalog-results__shortcut-counts {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
  }

  .home-catalog-results__count {
    display: inline-flex;
    align-items: center;
    gap: 0.16rem;
    white-space: nowrap;
  }

  .home-catalog-results__count[hidden],
  .home-catalog-results__summary[hidden],
  .home-catalog-results__shortcut[hidden] {
    display: none;
  }

  .home-catalog-results__count-icon {
    width: 0.7rem;
    height: 0.7rem;
    flex: none;
    color: var(--home-results-accent);
  }

  .home-catalog-results__count-value {
    color: var(--foreground);
    font-weight: 800;
  }

  .catalog-row-count .home-catalog-results__count-label {
    display: inline-block;
    overflow: hidden;
    max-width: 0;
    margin-inline-start: -0.16rem;
    opacity: 0;
    letter-spacing: 0;
    text-transform: none;
    transform: translateX(-0.2rem);
    transition:
      max-width 180ms var(--ease-decelerate),
      margin-inline-start 180ms var(--ease-decelerate),
      opacity 140ms var(--ease-standard),
      transform 180ms var(--ease-decelerate);
  }

  @media (hover: hover) and (pointer: fine) {
    .catalog-row-count:hover .home-catalog-results__count-label {
      max-width: 4.75rem;
      margin-inline-start: 0;
      opacity: 1;
      transform: translateX(0);
    }
  }

  .catalog-row-count:focus-visible .home-catalog-results__count-label {
    max-width: 4.75rem;
    margin-inline-start: 0;
    opacity: 1;
    transform: translateX(0);
  }

  .home-catalog-results__shortcut {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid color-mix(in oklch, var(--home-results-accent), transparent 68%);
    border-radius: var(--radius-lg);
    padding: 0.125rem 0.2rem 0.125rem 0.5rem;
    background: color-mix(in oklch, var(--home-results-accent), transparent 94%);
    color: var(--foreground);
    text-decoration: none;
    transition:
      background var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .catalog-row-count.home-catalog-results__shortcut {
    --catalog-row-count-radius: var(--radius-lg);
    --catalog-row-count-border-color: transparent;
    --catalog-row-count-divider-color: transparent;

    overflow: hidden;
    gap: 0;
    border-color: var(--catalog-row-count-border-color);
    border-radius: var(--catalog-row-count-radius);
    padding: 0;
    background: transparent;
  }

  .catalog-row-count.home-catalog-results__shortcut:hover,
  .catalog-row-count.home-catalog-results__shortcut:focus-visible {
    --catalog-row-count-border-color: color-mix(
      in oklch,
      var(--home-results-accent),
      transparent 68%
    );
    --catalog-row-count-divider-color: color-mix(
      in oklch,
      var(--home-results-accent),
      transparent 78%
    );

    border-color: var(--catalog-row-count-border-color);
    background: color-mix(in oklch, var(--home-results-accent), transparent 94%);
  }

  .catalog-row-count .home-catalog-results__shortcut-counts {
    flex-wrap: nowrap;
    padding: 0.28rem 0.5rem;
  }

  .home-catalog-results__shortcut-arrow {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in oklch, var(--home-results-accent), transparent 48%);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--home-results-accent), transparent 90%);
    color: var(--home-results-accent);
    transition:
      background var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .home-catalog-results__shortcut-icon {
    width: 0.68rem;
    height: 0.68rem;
  }

  .catalog-row-count .home-catalog-results__shortcut-icon {
    width: 1.15rem;
    height: 1.15rem;
    stroke-width: 3.25;
    transform: none;
  }

  .home-catalog-results__shortcut:hover,
  .home-catalog-results__shortcut:focus-visible {
    border-color: color-mix(in oklch, var(--home-results-accent), transparent 48%);
    background: color-mix(in oklch, var(--home-results-accent), transparent 88%);
  }

  .home-catalog-results__shortcut:hover .home-catalog-results__shortcut-arrow,
  .home-catalog-results__shortcut:focus-visible .home-catalog-results__shortcut-arrow {
    background: color-mix(in oklch, var(--home-results-accent), transparent 80%);
    color: var(--home-results-accent);
    transform: translateX(0.125rem);
  }

  .catalog-row-count.home-catalog-results__shortcut:hover .catalog-row-count__arrow,
  .catalog-row-count.home-catalog-results__shortcut:focus-visible .catalog-row-count__arrow {
    background: transparent;
    color: var(--row-accent);
    transform: translateX(0.22rem);
  }

  .home-catalog-results__shortcut:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
  }

  .home-catalog-results__shortcut:active {
    transform: translateY(1px);
  }

  .home-catalog__availability {
    margin: 0 0 1.25rem;
    border: 1px solid color-mix(in oklch, var(--hero-packet-accent), var(--border) 45%);
    padding: 0.75rem 1rem;
    background: color-mix(in oklch, var(--hero-packet-accent), transparent 92%);
    color: var(--text-m);
    font-size: 0.85rem;
  }

  .home-catalog-row {
    content-visibility: visible;
    contain-intrinsic-size: none;
    scroll-margin-top: calc(var(--home-sticky-chrome-height, var(--nav-height)) + 1rem);
  }

  .home-catalog-grid.catalog-scroll-track--gallery {
    display: grid;
    grid-auto-columns: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.625rem;
    align-items: start;
    overflow: visible;
    padding: 0;
    background: transparent;
    scroll-padding-inline: 0;
    scroll-snap-type: none;
  }

  .home-catalog-grid.catalog-scroll-track--gallery > .catalog-card {
    width: 100%;
    min-width: 0;
    aspect-ratio: 430 / 286;
    scroll-snap-align: none;
    touch-action: manipulation;
    will-change: auto;
  }

  .home-catalog-grid .home-catalog-card--animating {
    will-change: transform, opacity;
  }

  .home-catalog-progress,
  .home-catalog-end {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
    justify-content: center;
    margin-block-start: 2rem;
    border-block-start: 1px solid var(--border);
    padding-block: 1.25rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  .home-catalog-progress p {
    margin: 0;
  }

  .home-catalog-load-more,
  .home-catalog-back,
  .home-catalog-end a,
  .home-catalog-end button {
    min-height: 2.5rem;
    border: 1px solid var(--border);
    padding: 0.7rem 0.9rem;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-weight: 680;
    line-height: 1;
    text-decoration: none;
  }

  .home-catalog-load-more:hover,
  .home-catalog-load-more:focus-visible,
  .home-catalog-back:hover,
  .home-catalog-back:focus-visible,
  .home-catalog-end a:hover,
  .home-catalog-end a:focus-visible,
  .home-catalog-end button:hover,
  .home-catalog-end button:focus-visible {
    border-color: var(--foreground);
    background: var(--foreground);
    color: var(--background);
  }

  .home-catalog-sentinel {
    width: 100%;
    height: 1px;
  }

  .home-catalog-end {
    flex-direction: column;
    margin-block-start: 0;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
    text-align: center;
    text-transform: none;
  }

  .home-catalog-end p {
    margin: 0;
  }

  .home-catalog-end__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }

  .home-catalog-end[hidden],
  .home-catalog-progress [hidden] {
    display: none;
  }

  @media (max-width: 80rem) {
    .home-catalog-grid.catalog-scroll-track--gallery {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 64rem) {
    .hero-catalog__packet {
      grid-template: auto / minmax(0, 1fr);
    }

    .hero-catalog__panel--agent {
      border-block-start: 1px solid var(--hero-packet-line);
      border-inline-start: 0;
    }

    .hero-catalog__panel-inner {
      grid-template-rows: auto auto auto auto;
      width: min(100%, var(--tacet-section-max, 90rem));
      margin-inline: auto !important;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__story {
      grid-template-rows: auto auto auto;
      gap: clamp(var(--space-3), 2vw, var(--space-6));
      padding-block-end: clamp(var(--space-4), 3vw, var(--space-6));
    }

    .hero-catalog__panel--human
      :is(.hero-catalog__story, .hero-catalog__metric, .hero-catalog__cta) {
      justify-content: flex-end;
      text-align: right;
    }

    .hero-catalog__panel--human .hero-catalog__story {
      justify-items: end;
    }

    .hero-catalog__panel--human .hero-catalog__description {
      margin-inline-start: auto;
    }

    .hero-catalog__panel--human .hero-catalog__steps li {
      justify-items: end;
      text-align: right;
    }

    .hero-catalog__panel--agent
      :is(.hero-catalog__story, .hero-catalog__metric, .hero-catalog__cta) {
      justify-content: flex-start;
      text-align: left;
    }

    .hero-catalog__headline {
      --hero-headline-size: clamp(2rem, 9.4cqi, 4.35rem);
    }

    .hero-catalog__headline.is-stacked {
      --hero-headline-size: clamp(2.55rem, 12cqi, 5.45rem);
    }

    .hero-catalog__steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-catalog__steps li {
      min-height: 4.25rem;
      border-right: 1px solid var(--hero-packet-line);
      border-bottom: 0;
    }

    .hero-catalog__steps li:last-child {
      border-right: 0;
    }

    .home-catalog-grid.catalog-scroll-track--gallery {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 48rem) {
    .home-catalog-results__title-row {
      align-items: flex-start;
    }

    .home-catalog-results__shortcut {
      max-width: 100%;
    }

    .home-catalog-grid.catalog-scroll-track--gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 40rem) {
    .hero-catalog__story,
    .hero-catalog__metric,
    .hero-catalog__cta,
    .hero-catalog__steps {
      padding-inline: 1rem;
    }

    :where(.page-shell > .hero-catalog) .hero-catalog__story {
      min-height: 0;
      padding-block-start: var(--space-8);
      padding-block-end: var(--space-4);
    }

    .hero-catalog__headline {
      --hero-headline-size: clamp(1.8rem, 7.2cqi, 2.15rem);

      max-width: none;
      min-height: 3.35rem;
    }

    .hero-catalog__headline.is-stacked {
      --hero-headline-size: clamp(2rem, 11cqi, 2.55rem);

      min-height: 4rem;
    }

    .hero-catalog__description {
      min-height: 4.5em;
    }

    .hero-catalog__steps {
      padding-inline: 0;
    }

    .hero-catalog__steps li:first-child {
      padding-inline-start: 1rem;
    }

    .hero-catalog__steps li:last-child {
      padding-inline-end: 1rem;
    }

    .home-catalog__rail {
      width: min(calc(100% - 2rem), var(--tacet-section-max, 90rem));
    }

    .home-category-cloud {
      justify-content: flex-start;
    }

    .home-category-tag {
      max-width: 100%;
    }
  }

  @media (max-width: 28rem) {
    .home-catalog-grid.catalog-scroll-track--gallery {
      grid-template-columns: 1fr;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-catalog__panel::before,
    .home-nav-shell > nav,
    .home-nav-audience,
    .tacet-home-page #catalog-filter-bar,
    .home-category-tag,
    .home-category-tag__face,
    .home-category-tag__tooltip,
    .catalog-row-count .home-catalog-results__count-label,
    .catalog-row-count__arrow,
    .home-catalog-grid.catalog-scroll-track--gallery > .catalog-card {
      transition: none;
    }

    .home-category-tag:hover,
    .home-category-tag:focus-visible,
    .home-category-tag[aria-current='true'] {
      transform: none;
    }

    .home-category-tag:hover .home-category-tag__tooltip,
    .home-category-tag:focus-visible .home-category-tag__tooltip {
      transform: translate3d(-50%, 0, 0);
    }
  }

  /* -- Step-card gradient (4 cards across the #steps section) -------------
     Used by /proto and /proto/discovery — both pages render their cycle
     (ORAI on /proto, Scope→Observe→Extract→Replay on /proto/discovery)
     as a 4-tile band with this 4-step beige gradient. Light mode goes
     light → dark (beige-50 → -300); dark mode reverses (beige-950 → -700)
     so the gradient direction inverts when the surface inverts. The raw
     beige-N references are an intentional exception to "Beige Scale Rule"
     (no raw stops in pages) — there is no semantic 4-step elevation token
     set in the system, and synthesizing one only for this gradient would
     bloat the token surface area for a small set of consumers. */
  #steps .steps-card--1 {
    background: var(--beige-50);
  }
  #steps .steps-card--2 {
    background: var(--beige-100);
  }
  #steps .steps-card--3 {
    background: var(--beige-200);
  }
  #steps .steps-card--4 {
    background: var(--beige-300);
  }
  html.dark #steps .steps-card--1 {
    background: var(--beige-950);
  }
  html.dark #steps .steps-card--2 {
    background: var(--beige-900);
  }
  html.dark #steps .steps-card--3 {
    background: var(--beige-800);
  }
  html.dark #steps .steps-card--4 {
    background: var(--beige-700);
  }

  /* ════════════════════════════════════════════════════════════
     PAGE-SCOPED STYLES — migrated from inline \3c style> blocks
     ════════════════════════════════════════════════════════════
     Inline \3c style> blocks inside `#main-content` are stripped
     by DOMPurify on view-transition soft-nav, even with
     `ADD_TAGS: ['style']` set on the sanitize config (the
     `ADD_TAGS` allowlist for `style` is not honored in
     practice; verified by direct DOMPurify.sanitize test —
     a `\3c style>` tag inside the fragment is removed). Page-
     scoped CSS that needs to survive view-transition swaps
     must live in this shared stylesheet (loaded once from
     `<head>`), not in per-page \3c style> blocks.

     Class names retain their page prefix so cross-page bleed
     stays impossible:
       .erpai-hero__left-rail → hero-atsh.njk (ultra-wide rail)
     ════════════════════════════════════════════════════════════ */

  /* ──────────────────────────────────────────────────────────
     Hero left-rail (ultra-wide) — `.erpai-hero__left-rail`
     activates only when the viewport has at least 220px of
     gutter on each side of the 90rem container (i.e. viewport
     ≥ 1880px). The rail itself always fills the entire left
     gutter (`calc((100vw - 90rem) / 2)`), so its background
     runs edge-to-edge and the column reads as flush with the
     page rather than a floating vertical band. The actual
     live-feed content is a flex child capped at 340px and
     pinned to the right edge of the rail (next to the main
     container), while the remaining gutter width shows the
     same background — effectively the "pseudo background
     bleed" without a separate pseudo-element.

     Used by pages that set `h.leftInclude` on hero-atsh.njk
     (e.g. /enterprise's `sections/discovery/hero-prepend-01`).
     Migrated from an inline \3c style> block in hero-atsh.njk
     because that block sits inside `#main-content` and was
     stripped by DOMPurify on view-transition soft-nav, making
     the rail vanish post-nav on >1880px viewports.
     ────────────────────────────────────────────────────────── */
  @media (min-width: 1880px) {
    .erpai-hero__left-rail {
      display: flex;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      right: 100%;
      height: 100%;
      overflow: hidden;
      border-right: 1px solid var(--border);
      z-index: 10;
      width: calc((100vw - 90rem) / 2);
    }
    .erpai-hero__left-rail > * {
      width: min(340px, 100%);
    }
  }

  /* ──────────────────────────────────────────────────────────
     Chrome arrows — audience-bar inline indicator icons. Tabler
     outline icons default to stroke-width 2; the chrome bar is
     compact, so the 2-stroke arrows render thinner than the
     surrounding type weight. Bumping to 2.5 matches the perceived
     weight of the audience 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;
  }

  /* ──────────────────────────────────────────────────────────────────────────
     ERP + CRM product microsites — migrated from inline \3c style> blocks per
     AGENTS.md rule #11 (DOMPurify strips \3c style> inside #main-content during
     view-transition soft-nav, regardless of ADD_TAGS: ['style']).

     Scoping discipline (post PR #231):
     - Selectors are now top-level (no `.product-page` wrapper). Classes are
       page-family-prefixed (`.app-*` for anchors, `.ft-*` for feature subpages,
       `.ag-*` / `.agi-*` for agent + agents-index subpages) so collisions
       with the rest of the site are prevented by naming, not nesting.
     - The one site-wide collision (`.card`) is handled via the `.pp-card`
       rename inside this scope. See the `.pp-card` block below.
     - Subnavs (.erpnav, .crmnav) are independent components.
     - Live-dashboard preview keeps its own .live-dashboard scope per the
       documented design boundary (DESIGN.md §7).
     ────────────────────────────────────────────────────────────────────── */

  /* -- ERP product subnav (erp-subnav.njk) -------------------------------- */
  .erpnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .erpnav-inner {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    height: 56px;
  }
  .erpnav-left,
  .erpnav-right {
    display: flex;
    align-items: stretch;
  }

  .erpnav-brand-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid var(--border);
  }
  .erpnav-logo {
    display: inline-flex;
    align-items: center;
    color: var(--foreground);
    text-decoration: none;
  }
  .erpnav-logo:hover {
    color: var(--red-on-light);
  }
  .erpnav-logo svg {
    height: 16px;
    width: auto;
  }
  .erpnav-product {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--foreground);
    text-decoration: none;
  }
  .erpnav-product::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--red-on-light);
  }
  .erpnav-product:hover {
    color: var(--red-on-light);
  }

  .erpnav a.erpnav-link,
  .erpnav button.erpnav-link {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: var(--foreground);
    text-decoration: none;
    border: none;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    border-bottom: 2px solid transparent;
    transition: border-color 120ms;
    cursor: pointer;
  }
  .erpnav a.erpnav-link:hover,
  .erpnav button.erpnav-link:hover {
    border-bottom-color: var(--red-on-light);
  }
  .erpnav a.erpnav-link.is-current {
    border-bottom-color: var(--foreground);
    font-weight: 700;
  }

  .erpnav-features {
    position: relative;
    display: inline-flex;
    align-items: stretch;
  }
  /* Caret on the Features trigger — renders the Tabler `chevron-down`
     SVG inline. Rotation handled by the shared `.nav-caret` rule
     below; see also `.crmnav-features-trigger`. */
  .erpnav-features:hover .erpnav-features-trigger {
    border-bottom-color: var(--red-on-light);
  }

  /* Mega-menu reveal: Bloom-style (joshpuckett.me/bloom) grammar
     adapted for a stationary trigger. The panel itself does the morph
     — opacity + scale + slide + blur with `transform-origin: left top`
     so it expands down-and-right from the trigger's left edge. Closed
     state stays in the DOM (display: grid kept) so the transition can
     run; `visibility: hidden` + delayed visibility toggle on close
     hides it from AT/keyboard until the animation finishes. Inner
     content (.mega-side + .mega-grid) staggers in 80ms behind the
     panel — same `CONTENT_ENTER_DELAY` as Bloom. */
  .erpnav-mega {
    /* `--erpnav-mega-inset` = the trigger inset: distance from the viewport
       left edge to `.erpnav-features` (the absolute panel's containing
       block). It's layout-stable at ~358px for 721–1488px wide (full-bleed
       .erpnav-inner, left-aligned brand + Overview), which is exactly the
       band where the 920px panel would otherwise overflow. */
    --erpnav-mega-inset: 358px;
    --erpnav-mega-w: min(920px, calc(100vw - 48px));
    position: absolute;
    top: 100%;
    /* Pin the panel inside the viewport: pull `left` negative just enough
       to keep the right edge a 24px page-gutter inside the viewport. The
       calc only goes negative while the panel can't fit trigger-anchored;
       at >=~1302px it turns positive and `min()` floors `left` back to 0,
       so wide screens render exactly as before (no regression). Only
       width/left change — the Bloom opacity/scale/blur reveal is untouched. */
    left: min(0px, calc(100vw - 24px - var(--erpnav-mega-w) - var(--erpnav-mega-inset)));
    width: var(--erpnav-mega-w);
    background: var(--background);
    border: 1px solid var(--foreground);
    box-shadow: 6px 6px 0 var(--foreground);
    padding: 0;
    display: grid;
    grid-template-columns: 240px 1fr;
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    transform-origin: left top;
    filter: blur(8px);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 250ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 250ms cubic-bezier(0.32, 0.72, 0, 1),
      filter 250ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 250ms;
    will-change: transform, opacity, filter;
  }
  .erpnav-features:focus-within .erpnav-mega,
  .erpnav-features[data-open='true'] .erpnav-mega {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 250ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 250ms cubic-bezier(0.32, 0.72, 0, 1),
      filter 250ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 0s;
  }
  /* Inner content stagger — panel arrives first, content fades in 80ms
     behind it. Same delay value Bloom uses (CONTENT_ENTER_DELAY). */
  .erpnav-mega .mega-side,
  .erpnav-mega .mega-grid {
    opacity: 0;
    transform: translateY(4px);
    transition:
      opacity 200ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .erpnav-features:focus-within .erpnav-mega .mega-side,
  .erpnav-features:focus-within .erpnav-mega .mega-grid,
  .erpnav-features[data-open='true'] .erpnav-mega .mega-side,
  .erpnav-features[data-open='true'] .erpnav-mega .mega-grid {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
  }
  @media (prefers-reduced-motion: reduce) {
    .erpnav-mega,
    .erpnav-features:focus-within .erpnav-mega,
    .erpnav-features[data-open='true'] .erpnav-mega,
    .erpnav-mega .mega-side,
    .erpnav-mega .mega-grid,
    .erpnav-features:focus-within .erpnav-mega .mega-side,
    .erpnav-features:focus-within .erpnav-mega .mega-grid,
    .erpnav-features[data-open='true'] .erpnav-mega .mega-side,
    .erpnav-features[data-open='true'] .erpnav-mega .mega-grid {
      transition-duration: 0s;
      transition-delay: 0s;
      transform: none;
      filter: none;
    }
  }

  .erpnav-mega .mega-side {
    background: var(--foreground);
    color: var(--background);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .erpnav-mega .mega-side .mega-side-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .erpnav-mega .mega-side .mega-side-sub {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: oklch(85% 0.005 78);
    line-height: 1.4;
  }
  .erpnav-mega .mega-side a {
    margin-top: auto;
    padding: 8px 10px;
    background: var(--accent-yellow);
    color: var(--foreground);
    border: 1px solid var(--accent-yellow);
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  .erpnav-mega .mega-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .erpnav-mega .mega-domain {
    padding: 14px 16px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-transform: none;
  }
  .erpnav-mega .mega-domain:nth-child(2n) {
    border-right: 0;
  }
  .erpnav-mega .mega-domain-title {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 8px;
  }
  .erpnav-mega .mega-domain ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .erpnav-mega .mega-domain a {
    display: block;
    padding: 4px 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--foreground);
    text-decoration: none;
  }
  .erpnav-mega .mega-domain a:hover {
    background: var(--surface-dim);
  }

  .erpnav-right .erpnav-back {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: var(--text-m);
    text-decoration: none;
    font-size: 10px;
  }
  .erpnav-right .erpnav-back:hover {
    color: var(--foreground);
  }
  .erpnav-right .erpnav-signin {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: var(--foreground);
    text-decoration: none;
  }
  .erpnav-right .erpnav-signin:hover {
    color: var(--red-on-light);
  }
  /* Subnav CTA — positioning only. Visual styling (background, border,
     color, padding, hover) comes from the canonical .btn .btn--primary
     .btn--sm classes added on the anchor itself; the inline
     `box-shadow: 3px 3px 0 var(--border)` on the markup mirrors the
     hard-shadow vocabulary used by /enterprise + /apps + /proto. */
  .erpnav-right .erpnav-cta {
    margin-left: 8px;
    align-self: center;
  }

  @media (max-width: 720px) {
    .erpnav-inner {
      height: auto;
      padding: 8px 12px;
      flex-direction: column;
      gap: 6px;
    }
    .erpnav-left,
    .erpnav-right {
      flex-wrap: wrap;
    }
    .erpnav-brand {
      padding-right: 0;
      margin-right: 0;
      border-right: 0;
    }
    .erpnav a.erpnav-link,
    .erpnav button.erpnav-link {
      padding: 8px 10px;
    }
    /* Mobile (<720px): subnav flows as a column, mega panel sits inline.
       Bloom-style transform animation would reserve vertical space (since
       `visibility: hidden` keeps layout space), so collapse back to a
       display toggle at this breakpoint. Animation is desktop-only. */
    .erpnav-mega {
      position: static;
      width: 100%;
      box-shadow: none;
      display: none;
      opacity: 1;
      transform: none;
      filter: none;
      visibility: visible;
      transition: none;
    }
    .erpnav-features:focus-within .erpnav-mega,
    .erpnav-features[data-open='true'] .erpnav-mega {
      display: grid;
      grid-template-columns: 1fr;
    }
    .erpnav-mega .mega-side,
    .erpnav-mega .mega-grid {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .erpnav-right .erpnav-cta {
      margin-left: 0;
    }
  }

  /* -- CRM product subnav (crm-subnav.njk) -------------------------------- */
  .crmnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .crmnav-inner {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    height: 56px;
  }
  .crmnav-left,
  .crmnav-right {
    display: flex;
    align-items: stretch;
  }

  .crmnav-brand-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid var(--border);
  }
  .crmnav-logo {
    display: inline-flex;
    align-items: center;
    color: var(--foreground);
    text-decoration: none;
  }
  .crmnav-logo:hover {
    color: var(--red-on-light);
  }
  .crmnav-logo svg {
    height: 16px;
    width: auto;
  }
  .crmnav-product {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--foreground);
    text-decoration: none;
  }
  .crmnav-product::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--red-on-light);
  }
  .crmnav-product:hover {
    color: var(--red-on-light);
  }

  .crmnav a.crmnav-link,
  .crmnav button.crmnav-link {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: var(--foreground);
    text-decoration: none;
    border: none;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    border-bottom: 2px solid transparent;
    transition: border-color 120ms;
    cursor: pointer;
  }
  .crmnav a.crmnav-link:hover,
  .crmnav button.crmnav-link:hover {
    border-bottom-color: var(--red-on-light);
  }
  .crmnav a.crmnav-link.is-current {
    border-bottom-color: var(--foreground);
    font-weight: 700;
  }

  .crmnav-features {
    position: relative;
    display: inline-flex;
    align-items: stretch;
  }
  /* Caret on the Features trigger — see `.erpnav-features-trigger`
     above; rotation handled by the shared `.nav-caret` rule. */
  .crmnav-features:hover .crmnav-features-trigger {
    border-bottom-color: var(--red-on-light);
  }

  /* Mega-menu reveal — see .erpnav-mega above for the Bloom adaptation
     rationale. Same grammar (opacity + scale + slide + blur,
     transform-origin: left top, 80ms content stagger). */
  .crmnav-mega {
    /* See .erpnav-mega for the rationale. CRM's trigger inset is ~363px
       (slightly wider product-switcher label) but the mechanism is
       identical: keep the panel a 24px gutter inside the viewport,
       self-deactivating at wide widths. */
    --crmnav-mega-inset: 363px;
    --crmnav-mega-w: min(920px, calc(100vw - 48px));
    position: absolute;
    top: 100%;
    left: min(0px, calc(100vw - 24px - var(--crmnav-mega-w) - var(--crmnav-mega-inset)));
    width: var(--crmnav-mega-w);
    background: var(--background);
    border: 1px solid var(--foreground);
    box-shadow: 6px 6px 0 var(--foreground);
    padding: 0;
    display: grid;
    grid-template-columns: 240px 1fr;
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    transform-origin: left top;
    filter: blur(8px);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 250ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 250ms cubic-bezier(0.32, 0.72, 0, 1),
      filter 250ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 250ms;
    will-change: transform, opacity, filter;
  }
  .crmnav-features:focus-within .crmnav-mega,
  .crmnav-features[data-open='true'] .crmnav-mega {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 250ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 250ms cubic-bezier(0.32, 0.72, 0, 1),
      filter 250ms cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 0s;
  }
  .crmnav-mega .mega-side,
  .crmnav-mega .mega-grid {
    opacity: 0;
    transform: translateY(4px);
    transition:
      opacity 200ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .crmnav-features:focus-within .crmnav-mega .mega-side,
  .crmnav-features:focus-within .crmnav-mega .mega-grid,
  .crmnav-features[data-open='true'] .crmnav-mega .mega-side,
  .crmnav-features[data-open='true'] .crmnav-mega .mega-grid {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
  }
  @media (prefers-reduced-motion: reduce) {
    .crmnav-mega,
    .crmnav-features:focus-within .crmnav-mega,
    .crmnav-features[data-open='true'] .crmnav-mega,
    .crmnav-mega .mega-side,
    .crmnav-mega .mega-grid,
    .crmnav-features:focus-within .crmnav-mega .mega-side,
    .crmnav-features:focus-within .crmnav-mega .mega-grid,
    .crmnav-features[data-open='true'] .crmnav-mega .mega-side,
    .crmnav-features[data-open='true'] .crmnav-mega .mega-grid {
      transition-duration: 0s;
      transition-delay: 0s;
      transform: none;
      filter: none;
    }
  }

  .crmnav-mega .mega-side {
    background: var(--foreground);
    color: var(--background);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .crmnav-mega .mega-side .mega-side-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .crmnav-mega .mega-side .mega-side-sub {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: oklch(85% 0.005 78);
    line-height: 1.4;
  }
  .crmnav-mega .mega-side a {
    margin-top: auto;
    padding: 8px 10px;
    background: var(--accent-yellow);
    color: var(--foreground);
    border: 1px solid var(--accent-yellow);
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  .crmnav-mega .mega-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .crmnav-mega .mega-domain {
    padding: 14px 16px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-transform: none;
  }
  .crmnav-mega .mega-domain:nth-child(2n) {
    border-right: 0;
  }
  .crmnav-mega .mega-domain-title {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 8px;
  }
  .crmnav-mega .mega-domain ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .crmnav-mega .mega-domain a {
    display: block;
    padding: 4px 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--foreground);
    text-decoration: none;
  }
  .crmnav-mega .mega-domain a:hover {
    background: var(--surface-dim);
  }

  /* Subnav CTA — positioning only. See ERP subnav above for the
     canonical .btn .btn--primary .btn--sm contract. */
  .crmnav-right .crmnav-cta {
    margin-left: 8px;
    align-self: center;
  }

  @media (max-width: 720px) {
    .crmnav-inner {
      height: auto;
      padding: 8px 12px;
      flex-direction: column;
      gap: 6px;
    }
    .crmnav-left,
    .crmnav-right {
      flex-wrap: wrap;
    }
    .crmnav-brand {
      padding-right: 0;
      margin-right: 0;
      border-right: 0;
    }
    .crmnav a.crmnav-link,
    .crmnav button.crmnav-link {
      padding: 8px 10px;
    }
    /* See .erpnav-mega mobile note — animation is desktop-only, mobile
       falls back to display toggle so the panel doesn't reserve space. */
    .crmnav-mega {
      position: static;
      width: 100%;
      box-shadow: none;
      display: none;
      opacity: 1;
      transform: none;
      filter: none;
      visibility: visible;
      transition: none;
    }
    .crmnav-features:focus-within .crmnav-mega,
    .crmnav-features[data-open='true'] .crmnav-mega {
      display: grid;
      grid-template-columns: 1fr;
    }
    .crmnav-mega .mega-side,
    .crmnav-mega .mega-grid {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .crmnav-right .crmnav-cta {
      margin-left: 0;
    }
  }

  /* -- Product switcher (shared between erp/crm-subnav) ------------------- */
  .ps {
    position: relative;
    display: inline-flex;
    align-items: stretch;
  }
  .ps-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--foreground);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
  }
  .ps-trigger::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--red-on-light);
  }
  .ps-trigger:hover {
    color: var(--red-on-light);
  }
  .ps-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 320px;
    background: var(--background);
    border: 1px solid var(--foreground);
    box-shadow: 6px 6px 0 var(--foreground);
    padding: 0;
    display: none;
    z-index: 60;
  }
  /* Transparent hover bridge across the 6px visual gap between the
     trigger and the menu. Without this the cursor leaves `.ps`'s bbox
     mid-traverse, `.ps:hover` flips false, and the menu disappears
     before the cursor reaches the first item. The bridge is a pseudo-
     element on `.ps-menu` (DOM child of `.ps`) so hovering it keeps
     `.ps:hover` active. Same trick used by macOS/iOS dropdown
     vocabulary. */
  .ps-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
  }
  .ps:hover .ps-menu,
  .ps:focus-within .ps-menu,
  .ps[data-open='true'] .ps-menu {
    display: block;
  }

  .ps-menu-head {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
    padding: 12px 14px 8px;
    border-bottom: 1px dashed var(--border);
  }
  .ps-menu-head::before {
    content: '● ';
    color: var(--red-on-light);
  }

  .ps-app {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--foreground);
    transition: background 120ms;
  }
  .ps-app:last-child {
    border-bottom: 0;
  }
  .ps-app:hover {
    background: var(--surface-dim);
  }
  .ps-app.is-current {
    background: var(--accent-yellow);
  }
  .ps-app.is-current:hover {
    background: var(--accent-yellow);
    cursor: default;
  }

  .ps-app .ps-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--foreground);
    background: var(--background);
    box-shadow: 2px 2px 0 var(--foreground);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    color: var(--foreground);
  }
  .ps-app .ps-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .ps-app .ps-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--foreground);
  }
  .ps-app .ps-line {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-m);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Trailing affordance icon (arrow-right for clickable rows,
     check for the current row). Sized so the SVG inherits the same
     14px visual weight the prior unicode glyph carried. */
  .ps-app .ps-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--red-on-light);
  }
  .ps-app .ps-tick [data-icon] {
    width: 14px;
    height: 14px;
  }

  .ps-menu-foot {
    padding: 10px 14px;
    background: var(--surface-dim);
    border-top: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-m);
    text-align: center;
  }
  .ps-menu-foot a {
    color: var(--foreground);
    text-decoration: none;
    border-bottom: 1px solid var(--foreground);
  }
  .ps-menu-foot a:hover {
    color: var(--red-on-light);
    border-bottom-color: var(--red-on-light);
  }

  @media (max-width: 720px) {
    .ps-menu {
      position: static;
      width: 100%;
      box-shadow: none;
    }
  }

  /* -- "More from ERP.AI" product rail (more-products.njk) ---------------- */
  .moreprod {
    background: var(--background);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 56px 24px 64px;
  }
  .moreprod-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .moreprod-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .moreprod-eb {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .moreprod-eb::before {
    content: '● ';
    color: var(--red-on-light);
  }
  .moreprod-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(22px, 2.4vw, 32px);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--foreground);
    margin: 6px 0 0;
  }
  .moreprod-sub {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--text-m);
    font-size: 14px;
    max-width: 50ch;
    margin-top: 4px;
  }
  .moreprod-allbtn {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--foreground);
    text-decoration: none;
    border-bottom: 1.5px solid var(--foreground);
    padding-bottom: 2px;
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 6px;
  }
  .moreprod-allbtn:hover {
    color: var(--red-on-light);
    border-bottom-color: var(--red-on-light);
  }

  .moreprod-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  @media (max-width: 980px) {
    .moreprod-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 540px) {
    .moreprod-grid {
      grid-template-columns: 1fr;
    }
  }

  .mpcard {
    display: flex;
    flex-direction: column;
    background: var(--background);
    border: 1px solid var(--foreground);
    color: var(--foreground);
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--foreground);
    transition:
      transform 120ms,
      box-shadow 120ms;
    overflow: hidden;
  }
  .mpcard:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--foreground);
  }

  .mpcard-thumb {
    aspect-ratio: 16/10;
    border-bottom: 1px solid var(--foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .mpcard-thumb .mono {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 56px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    line-height: 1;
  }
  .mpcard-thumb .tag {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 7px 4px;
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--foreground);
  }
  /* Per-card thumb tints — mode-aware where possible, theme-constant where the
     design intent is a fixed surface (Proto = always-dark "terminal" feel).
     Text on theme-constant surfaces uses the paired theme-constant fg token
     so contrast survives both modes. */
  .mpcard.t-crm .mpcard-thumb {
    background: var(--surface-bright);
  }
  .mpcard.t-crm .mpcard-thumb .mono {
    color: var(--foreground);
  }
  .mpcard.t-erp .mpcard-thumb {
    background: var(--surface-bright);
  }
  .mpcard.t-erp .mpcard-thumb .mono {
    color: var(--foreground);
  }
  .mpcard.t-headless .mpcard-thumb {
    background: repeating-linear-gradient(
      45deg,
      var(--background) 0 6px,
      var(--surface-dim) 6px 12px
    );
  }
  .mpcard.t-headless .mpcard-thumb .mono {
    color: var(--foreground);
  }
  .mpcard.t-proto .mpcard-thumb {
    background: var(--accent-yellow-fg);
    color: var(--accent-yellow);
  }
  .mpcard.t-proto .mpcard-thumb .mono {
    color: var(--accent-yellow);
  }
  .mpcard.t-proto .mpcard-thumb .tag {
    background: var(--accent-yellow);
    color: var(--accent-yellow-fg);
    border-color: var(--accent-yellow);
  }
  .mpcard-body {
    padding: 14px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .mpcard-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--foreground);
    margin-bottom: 4px;
  }
  .mpcard-line {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-m);
    margin-bottom: 12px;
  }
  .mpcard-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .mpcard-foot .arrow {
    color: var(--red-on-light);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* -- ERP + CRM anchor pages — shared styles ----------------------------- *
   * Migrated from inline \3c style> in src/pages/erp-enterprise/index.njk
   * (lines 31-945, 949-1043) and src/pages/crm-platform/index.njk
   * (lines 30-1017). The two pages' CSS was byte-identical except for
   *   .loop-step .body h4 (ERP) vs h3 (CRM)
   * → consolidated as top-level selectors. Per-page divergence (one rule
   * today: `.ag-log--crm .row`) uses a modifier class instead of a
   * wrapper qualifier.
   * ───────────────────────────────────────────────────────────────────── */

  /* App-page styles — brutalist, theme-aware via tokens. */
  /* Product-preview hero variant (DESIGN.md §6) — the third hero
     pattern in the system, used on /erp-enterprise/ and /crm-platform/.
     Copy column sits in the top half; the live-dashboard preview
     occupies the bottom half. On first paint the viewport's bottom
     edge does the clipping — the dashboard renders at its full
     natural height and continues into normal page flow, so scrolling
     reveals the rest of the dashboard before the next section. The
     sticky product subnav (56px) docks immediately below the hero
     on first scroll. No global nav, no audience bar on these pages. */
  .app-hero {
    position: relative;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-x: clip;
  }
  /* Fill the viewport (minus the 56px subnav) on first paint when the
     content is shorter than the viewport — keeps the hero feeling
     monumental on tall desktops. `min-height` instead of `height` so
     the hero grows past the viewport when the dashboard preview is
     taller; the bottom of the dashboard stays accessible on scroll
     instead of being literally clipped by `overflow: hidden`. On
     smaller viewports (≥769px wide, ≥720px tall not met) we let it
     flow naturally so mobile / short-screen users don't get a
     squeezed copy column. */
  @media (min-height: 720px) and (min-width: 769px) {
    .app-hero {
      min-height: calc(100dvh - 56px);
    }
  }
  /* Subtle dot-grid backdrop on hero — adds texture without softening
     the brutalist edges. Fades out toward the edges. */
  .app-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--border) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse at center, oklch(8% 0.035 65 / 80%) 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(
      ellipse at center,
      oklch(8% 0.035 65 / 80%) 0%,
      transparent 75%
    );
    pointer-events: none;
    opacity: 0.5;
  }
  .app-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
    gap: clamp(48px, 5vw, 96px);
    align-items: center;
  }
  @media (max-width: 1024px) {
    .app-hero-grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }
  }

  /* `.app-hero-image-wrap`, `.app-hero-float`, and the
     `@keyframes app-hero-pulse` were carried over from an earlier
     hero design that used an image with a "LIVE" ribbon overlay.
     The current product-preview hero renders a real live-dashboard
     widget instead, and these classes are no longer referenced in
     any template. Removed 2026-05-14 as part of the FOCUSED motion
     pass: orchestrated keyframe animations violate the
     Motion-Is-Structural Rule (DESIGN.md §5), and dead CSS is
     dead CSS. */

  .app-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .app-eyebrow .dot {
    width: 6px;
    height: 6px;
    background: var(--red);
  }

  .app-h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    /* Hero h1 lever — re-enabled 2026-05-16 scoped to hero h1 hooks
       (.erpai-hero h1, .hero-half__headline, .app-h1). Phase 3 Step 2 of
       docs/plans/DESIGN-ELEVATE-LAB-CHROME-WEB-LAB-WEB-NEO-PLAN.md;
       /erp-enterprise + /crm-platform use this hook. */
    letter-spacing: var(--tracking-hero);
    line-height: 0.95;
    color: var(--foreground);
    font-size: var(--text-5xl);
    margin: var(--space-6) 0 var(--space-6);
    text-wrap: balance;
  }
  .app-lead {
    font-family: var(--font-body);
    color: var(--text-m);
    font-size: var(--text-base);
    line-height: 1.5;
    max-width: 64ch;
    text-wrap: pretty;
  }
  @media (min-width: 768px) {
    .app-h1 {
      font-size: var(--text-6xl);
    }
    .app-lead {
      font-size: var(--text-lg);
    }
  }
  @media (min-width: 1024px) {
    .app-h1 {
      font-size: var(--text-7xl);
    }
    .app-lead {
      font-size: var(--text-xl);
    }
  }

  /* Hero copy column — sits in the top of the product-preview hero;
     shrinks to its natural content (eyebrow + H1 + lead + CTA +
     trust strip). The previous `min-height: 70vh` squeezed the
     dashboard preview below the fold; FOCUSED dial wants more
     dashboard visible on first paint. The live-dashboard wrapper
     below this gets the remaining height inside the hero box. */
  .app-hero-copy {
    min-height: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) 0 var(--space-6);
    text-align: center;
  }
  @media (min-width: 1024px) {
    .app-hero-copy {
      padding: var(--space-12) 0 var(--space-8);
    }
  }
  .app-hero-copy-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 100%;
  }
  @media (min-width: 1024px) {
    .app-hero-copy-inner {
      align-items: flex-start;
      text-align: left;
      margin-left: clamp(0rem, 5vw, 5rem);
      margin-right: auto;
      max-width: min(100%, 74rem);
    }
    .app-hero-copy-inner .app-eyebrow,
    .app-hero-copy-inner .app-lead,
    .app-hero-copy-inner .app-hero-cta,
    .app-hero-copy-inner .cta-micro {
      margin-left: clamp(1.25rem, 5vw, 5.5rem);
    }
  }
  .app-h1.app-h1--tight {
    font-size: var(--text-4xl);
    line-height: 1;
    margin: 0;
    max-width: 18ch;
  }
  @media (min-width: 768px) {
    .app-h1.app-h1--tight {
      font-size: var(--text-6xl);
    }
  }
  @media (min-width: 1024px) {
    .app-h1.app-h1--tight {
      font-size: var(--text-7xl);
    }
  }
  /* Red period accent at the end of the hero H1 — replaces the inline
     style="color: var(--red-on-light);" attribute that the original
     templates carried on the trailing ".". Keeps the color hookable
     from CSS so dark-mode + theme work uniformly. */
  .app-h1-accent {
    color: var(--red-on-light);
  }
  /* signature-reveal cascade — each visual line in the H1 unmasks one
     after the other. The data-line spans are inline; we force them
     onto their own visual line so the unmask reads as line-by-line
     reveal (matches the previous <br /> behavior). */
  .app-h1[data-observe='signature-reveal'] > [data-line] {
    display: block;
  }
  @media (min-width: 1024px) {
    .app-h1[data-observe='signature-reveal'] > [data-line]:nth-child(2) {
      margin-left: clamp(1.75rem, 7vw, 7.5rem);
    }
  }
  .app-lead.app-lead--tight {
    font-size: var(--text-base);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 56ch;
    color: var(--text-m);
  }
  @media (min-width: 768px) {
    .app-lead.app-lead--tight {
      font-size: var(--text-lg);
    }
  }
  .app-hero-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 8px;
  }
  .app-hero-preview {
    position: relative;
    width: 100%;
  }
  @media (max-width: 767px) {
    .app-hero-preview {
      display: none;
    }
  }
  @media (min-width: 1024px) {
    .app-hero-preview {
      margin-right: calc(50% - 50vw);
      padding-right: clamp(0rem, 3vw, 3rem);
      transform: translateX(clamp(0.75rem, 3vw, 2.5rem));
    }
    .app-hero-preview .live-dashboard {
      max-width: min(100%, 92rem);
    }
  }
  @media (max-width: 1023px) {
    .app-hero-copy-inner {
      text-align: center;
    }
  }
  /* Trust strip below dashboard — replaces in-hero trust list */
  .app-trust-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    padding: 14px 12px 0;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .app-trust-strip .ts-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  /* Trust-strip leading check icon. Was previously a round green pill
     wrapping a small ✓; switched to a bare green-colored Tabler
     `check` SVG sized proportional to the row's cap-height (1.2em)
     so it reads as a balanced confirm-mark beside the uppercase
     mono label without the heavy bg pill. */
  .app-trust-strip .ts-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ad-accent-text, #166534);
    flex-shrink: 0;
  }
  .app-trust-strip .ts-tick [data-icon] {
    width: 1.2em;
    height: 1.2em;
  }

  .app-section {
    border-top: 1px solid var(--border);
    background: var(--background);
    position: relative;
  }
  .app-section--alt {
    background: var(--surface-dim);
  }

  /* Subtle per-section backgrounds (cream-family only). All variations stay
     within the warm-paper palette so they don't fight the brutalist hierarchy.
     Each variant is < 4% deviation from base cream. */
  .app-bg-cream {
    background: var(--background);
  }
  .app-bg-dim {
    background: var(--surface-dim);
  }
  /* Per-section bg variants — slight tonal shifts within the
     warm-paper palette. `--surface-dim`, `--background` flip per
     mode via tokens; `app-bg-warm` and `app-bg-paper` need explicit
     dark-mode overrides because the original light-mode values
     (oklch 94–96% lightness) are hard-coded cream. Without the
     override, dark-mode renders the FAQ / Loop / "Built for"
     sections as light-cream islands in an otherwise espresso page. */
  .app-bg-warm {
    background: oklch(94.5% 0.014 78);
  }
  html.dark .app-bg-warm {
    /* Slightly elevated dark tier with the same warm-cocoa hue. */
    background: oklch(18% 0.06 70);
  }
  .app-bg-paper {
    background: linear-gradient(180deg, oklch(96% 0.005 80) 0%, oklch(94% 0.012 80) 100%);
  }
  html.dark .app-bg-paper {
    /* Elevated dark gradient: beige-900 → beige-800 tier rather
       than the cream gradient. Mirrors the "paper bright" feel
       on a dark surface. */
    background: linear-gradient(180deg, oklch(17% 0.055 68) 0%, oklch(20% 0.06 70) 100%);
  }
  .app-bg-grid {
    background-color: var(--background);
    background-image: radial-gradient(oklch(8% 0.035 65 / 0.06) 1px, transparent 1.4px);
    background-size: 18px 18px;
    background-position: 0 0;
  }
  /* Dark-mode dot-grid uses a light-stop dot color since the dark
     beige-950 dots would be invisible against the espresso bg. */
  html.dark .app-bg-grid {
    background-image: radial-gradient(oklch(95% 0.005 78 / 0.04) 1px, transparent 1.4px);
  }
  .app-bg-hatch {
    background-color: var(--background);
    background-image: repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 9px,
      oklch(8% 0.035 65 / 0.035) 9px,
      oklch(8% 0.035 65 / 0.035) 10px
    );
  }
  /* Dark-mode hatch: same flip — light stripes on dark bg. */
  html.dark .app-bg-hatch {
    background-image: repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 9px,
      oklch(95% 0.005 78 / 0.025) 9px,
      oklch(95% 0.005 78 / 0.025) 10px
    );
  }
  /* Dark inversion — only used for hero showpiece sections */
  .app-bg-dark {
    background: oklch(15% 0.05 68);
    color: oklch(95% 0.02 80);
  }
  .app-bg-dark .app-h2 {
    color: oklch(95% 0.02 80);
  }
  .app-bg-dark .app-italic {
    color: oklch(80% 0.14 30);
  }

  /* 3D button system (page-scoped). Brutalist 3D: 1px border + hard offset
     shadow that compresses on hover and fully presses on click. */
  .btn-3d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 26px;
    border: 1.5px solid var(--foreground);
    background: var(--background);
    color: var(--foreground);
    box-shadow: 6px 6px 0 var(--foreground);
    transform: translate(0, 0);
    transition:
      transform 90ms ease-out,
      box-shadow 90ms ease-out,
      background 120ms;
    cursor: pointer;
    will-change: transform, box-shadow;
  }
  .btn-3d:hover {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--foreground);
  }
  .btn-3d:active {
    transform: translate(6px, 6px);
    box-shadow: 0 0 0 var(--foreground);
  }
  .btn-3d--primary {
    background: var(--red-on-light);
    color: var(--background);
    border-color: var(--foreground);
  }
  .btn-3d--primary:hover {
    background: var(--foreground);
    color: var(--background);
  }
  .btn-3d--yellow {
    background: var(--accent-yellow);
    color: var(--foreground);
    border-color: var(--foreground);
  }
  .btn-3d--yellow:hover {
    background: var(--foreground);
    color: var(--accent-yellow);
  }
  .btn-3d--lg {
    font-size: 14px;
    padding: 20px 32px;
    box-shadow: 7px 7px 0 var(--foreground);
  }
  .btn-3d--lg:hover {
    box-shadow: 5px 5px 0 var(--foreground);
  }
  .btn-3d--lg:active {
    transform: translate(7px, 7px);
    box-shadow: 0 0 0 var(--foreground);
  }

  /* CTA microcopy strip — sits just below a button to add risk-reversal.
     Each span carries a Tabler `check` SVG (set in the page template);
     the icon is sized proportional to the text's cap-height via `1.1em`
     so it scales with the row's font-size and reads as a balanced
     glyph instead of a tiny mark. */
  .cta-micro {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-m);
  }
  .cta-micro span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .cta-micro span [data-icon] {
    width: 1.1em;
    height: 1.1em;
    color: var(--red-on-light);
    flex-shrink: 0;
  }

  /* Time-to-value timeline — sub-block under the comparison table. */
  .ttv {
    margin: var(--space-12) auto 0;
    max-width: 1200px;
    border: 1px solid var(--border);
    background: var(--background);
  }
  .ttv-hd {
    padding: 16px 20px;
    background: var(--foreground);
    color: var(--background);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }
  .ttv-hd .ttv-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.01em;
  }
  .ttv-hd .ttv-sub {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .ttv-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 900px) {
    .ttv-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 540px) {
    .ttv-grid {
      grid-template-columns: 1fr;
    }
  }
  .ttv-cell {
    padding: 22px 20px;
    border-right: 1px solid var(--border);
    position: relative;
  }
  .ttv-cell:last-child {
    border-right: 0;
  }
  @media (max-width: 900px) {
    .ttv-cell:nth-child(2n) {
      border-right: 0;
    }
    .ttv-cell:nth-child(n + 3) {
      border-top: 1px solid var(--border);
    }
  }
  .ttv-cell .ttv-when {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-m);
    margin-bottom: 12px;
  }
  .ttv-cell .ttv-when::before {
    content: attr(data-step);
    background: var(--foreground);
    color: var(--background);
    padding: 2px 7px 3px;
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .ttv-cell .ttv-h {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--foreground);
    line-height: 1.05;
    margin-bottom: 6px;
  }
  .ttv-cell .ttv-h .ttv-h-num {
    font-size: 32px;
    letter-spacing: -0.04em;
    margin-right: 4px;
    position: relative;
    z-index: 1;
  }
  .ttv-cell .ttv-h .ttv-h-num::before {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 4px;
    height: 10px;
    background: var(--accent-yellow);
    z-index: -1;
  }
  .ttv-cell .ttv-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-m);
  }
  .ttv-cell .ttv-list li {
    padding: 4px 0;
    border-top: 1px dashed var(--border);
  }
  .ttv-cell .ttv-list li:first-child {
    border-top: 0;
  }
  .ttv-cell .ttv-list li .ttv-tick {
    display: inline-flex;
    align-items: center;
    color: var(--red-on-light);
    margin-right: 5px;
    flex-shrink: 0;
  }
  .ttv-cell .ttv-list li .ttv-tick [data-icon] {
    width: 1em;
    height: 1em;
  }

  /* Comparison table — old way vs ERP•AI way */
  .compare-table {
    border: 1px solid var(--border);
    background: var(--background);
    max-width: 1200px;
    margin: 0 auto;
  }
  .compare-row {
    display: grid;
    grid-template-columns: 180px 1fr 1fr;
    border-top: 1px solid var(--border);
  }
  .compare-row:first-child {
    border-top: 0;
  }
  @media (max-width: 720px) {
    .compare-row {
      grid-template-columns: 1fr;
    }
    .compare-cell {
      border-right: 0 !important;
      border-bottom: 1px dashed var(--border);
    }
    .compare-cell--label {
      background: var(--surface-dim);
    }
  }
  .compare-cell {
    padding: 18px 20px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-m);
    border-right: 1px solid var(--border);
  }
  .compare-cell:last-child {
    border-right: 0;
  }
  .compare-cell--label {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--foreground);
    background: var(--background);
  }
  .compare-cell--old {
    color: var(--text-m);
    background: var(--surface-dim);
    text-decoration: line-through;
    text-decoration-color: oklch(50% 0.005 78 / 0.4);
    text-decoration-thickness: 1px;
  }
  .compare-cell--new {
    color: var(--foreground);
    background: var(--background);
    font-weight: 600;
    position: relative;
  }
  /* Tick on the ERP•AI column cells — Tabler `check` SVG injected via
     the .compare-tick span on the template. The header row (no tick
     content) gets the rule below to suppress mistaken styling. */
  .compare-cell--new .compare-tick {
    display: inline-flex;
    align-items: center;
    color: var(--red-on-light);
    margin-right: 8px;
    flex-shrink: 0;
  }
  .compare-cell--new .compare-tick [data-icon] {
    width: 1em;
    height: 1em;
  }
  .compare-head .compare-cell {
    background: var(--foreground);
    color: var(--background);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 12px 20px;
    text-decoration: none;
  }
  .compare-head .compare-cell--label {
    background: var(--foreground);
  }
  .compare-head .compare-cell--new {
    background: var(--accent-yellow);
    color: var(--foreground);
  }

  /* Integrations grid — categorized chip cells */
  .integ-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    background: var(--background);
  }
  @media (max-width: 900px) {
    .integ-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 540px) {
    .integ-grid {
      grid-template-columns: 1fr;
    }
  }
  .integ-cell {
    padding: 16px 18px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .integ-cell:nth-child(4n) {
    border-right: 0;
  }
  .integ-cell:nth-last-child(-n + 4) {
    border-bottom: 0;
  }
  @media (max-width: 900px) {
    .integ-cell:nth-child(4n) {
      border-right: 1px solid var(--border);
    }
    .integ-cell:nth-child(2n) {
      border-right: 0;
    }
    .integ-cell:nth-last-child(-n + 4) {
      border-bottom: 1px solid var(--border);
    }
    .integ-cell:nth-last-child(-n + 2) {
      border-bottom: 0;
    }
  }
  .integ-cat {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--foreground);
    margin-bottom: 8px;
  }
  .integ-cat .integ-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--red-on-light);
    margin-right: 6px;
    flex-shrink: 0;
  }
  .integ-cat .integ-arrow [data-icon] {
    width: 1em;
    height: 1em;
  }
  .integ-items {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-m);
  }

  /* Mid-page CTA bands — narrow brutalist strip with red border */
  .cta-band {
    margin-top: var(--space-10);
    border: 1.5px solid var(--foreground);
    background: var(--background);
    box-shadow: 8px 8px 0 var(--foreground);
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
  }
  @media (max-width: 720px) {
    .cta-band {
      grid-template-columns: 1fr;
      box-shadow: 6px 6px 0 var(--foreground);
    }
  }
  .cta-band .cta-band-hd {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(18px, 1.6vw, 22px);
    letter-spacing: -0.01em;
    color: var(--foreground);
    line-height: 1.15;
  }
  .cta-band .cta-band-sub {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-m);
    margin-top: 6px;
  }

  .app-section-num {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--red-on-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in oklch, var(--red-on-light), transparent 75%);
    background: color-mix(in oklch, var(--red-on-light), transparent 92%);
  }
  .app-h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.025em;
    line-height: 0.98;
    color: var(--foreground);
    font-size: var(--text-4xl);
    max-width: 22ch;
    text-wrap: balance;
  }
  .app-italic {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--red-on-light);
    font-size: var(--text-xl);
    line-height: 1.25;
    text-wrap: pretty;
  }
  @media (min-width: 1024px) {
    .app-h2 {
      font-size: var(--text-5xl);
    }
    .app-italic {
      font-size: var(--text-2xl);
    }
  }

  /* Per-section hero header — every section gets the same centered
     "hero" treatment: index chip → big h2 → italic subline → optional CTA. */
  .section-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto var(--space-12);
    max-width: 880px;
    gap: 18px;
  }
  .section-hero .sh-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .section-hero .sh-chip .sh-num {
    background: var(--foreground);
    color: var(--background);
    padding: 3px 8px 4px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .section-hero .app-h2 {
    max-width: 24ch;
    margin: 0 auto;
  }
  .section-hero .app-italic {
    max-width: 70ch;
    margin: 0 auto;
  }
  .section-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 8px;
  }
  /* When an entire section's *body* should be center-aligned too */
  .app-section-centered {
    text-align: center;
  }
  .app-section-centered .grid-cards {
    text-align: left;
  }
  .app-section-centered .loop-step {
    text-align: left;
  }
  .app-section-centered details.faq-item {
    text-align: left;
  }

  /* Stat band */
  .app-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--background);
  }
  /* 6 cols only ≥1281px — below that 6 equal tracks crush the mono
     copy (number + ticks overflow into the next card). 6 is clean at
     6/3/2/1, so step straight to 3 (two rows of three). */
  @media (max-width: 1280px) {
    .app-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 600px) {
    .app-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 420px) {
    .app-stats {
      grid-template-columns: 1fr;
    }
  }
  .app-stat {
    position: relative;
    padding: 22px 20px 20px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 168px;
  }
  .app-stat:last-child {
    border-right: 0;
  }
  @media (max-width: 1280px) {
    .app-stat:nth-child(3n) {
      border-right: 0;
    }
    .app-stat:nth-child(n + 4) {
      border-top: 1px solid var(--border);
    }
  }
  @media (max-width: 600px) {
    .app-stat {
      border-right: 1px solid var(--border);
    }
    .app-stat:nth-child(3n) {
      border-right: 1px solid var(--border);
    }
    .app-stat:nth-child(2n) {
      border-right: 0;
    }
    .app-stat:nth-child(n + 3) {
      border-top: 1px solid var(--border);
    }
  }
  @media (max-width: 420px) {
    .app-stat,
    .app-stat:nth-child(2n),
    .app-stat:nth-child(3n) {
      border-right: 0;
    }
    .app-stat:nth-child(n + 2) {
      border-top: 1px solid var(--border);
    }
  }
  .app-stat .eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .app-stat .eyebrow::before {
    content: attr(data-idx);
    background: var(--foreground);
    color: var(--background);
    padding: 2px 6px 3px;
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .app-stat .v {
    position: relative;
    isolation: isolate;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(36px, 4vw, 56px);
    color: var(--foreground);
    letter-spacing: -0.04em;
    line-height: 0.9;
    display: inline-block;
    align-self: flex-start;
    padding: 0 4px;
  }
  .app-stat .v::before {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 6px;
    height: 16px;
    background: var(--accent-yellow);
    z-index: -1;
    transform: skewX(-6deg);
  }
  .app-stat .v sup {
    font-size: 0.4em;
    font-weight: 700;
    color: var(--text-m);
    margin-left: 2px;
    letter-spacing: 0;
    vertical-align: top;
    top: 0.4em;
    position: relative;
  }
  .app-stat .l {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: -0.005em;
    color: var(--foreground);
  }
  .app-stat .sub {
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--text-m);
    margin-top: auto;
  }
  .app-stat .ticks {
    display: flex;
    gap: 2px;
    margin-top: 6px;
    height: 8px;
    align-items: stretch;
  }
  .app-stat .ticks span {
    flex: 1;
    background: var(--foreground);
    opacity: 0.18;
  }
  .app-stat .ticks span.on {
    opacity: 1;
  }
  .app-stat .ticks.dense span {
    flex: none;
    width: 3px;
  }
  /* Per-cell glyph in top-right */
  .app-stat .mark {
    position: absolute;
    top: 18px;
    right: 18px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-m);
    opacity: 0.7;
    letter-spacing: 0;
  }

  /* Card grids */
  /* Card-lattice grid. Column count is now driven here (not via an
     inline style on each section) so it can step down with viewport
     width. The cells carry border-right/border-bottom and the
     container closes the outer edge, so uneven trailing rows still
     read as a clean lattice. Mono body copy needs ~300px of column
     to avoid the ragged 6-line wrap seen on /erp-enterprise §03. */
  .grid-cards {
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 1280px) {
    .grid-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 960px) {
    .grid-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 620px) {
    .grid-cards {
      grid-template-columns: 1fr;
    }
  }
  .pp-card {
    padding: var(--space-6);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--background);
  }
  /* .card-tag — consolidated rule. The page originally declared two
     rule blocks (the second with !important markers to win against the
     first). Now collapsed to one rule with the !important-winning
     property set. The !important markers stay as documentation of the
     original intent; a future PR can clean them up alongside the
     .product-page card-cell vocab refresh. */
  /* "Agent" tag (§03 only) — demoted from a solid dark chip to a
     muted mono-caps label so the monogram chip + tag + title read as
     a clean eyebrow → headline hierarchy (same vocabulary as the
     section eyebrow's label). */
  .pp-card .card-tag {
    font-family: var(--font-body);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
    display: inline-block !important;
    width: auto !important;
    color: var(--text-m) !important;
    background: transparent !important;
    padding: 0 !important;
    align-self: flex-start;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.18em !important;
  }
  .pp-card .card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin-bottom: var(--space-3);
  }
  .pp-card .card-divider {
    height: 1px;
    background: var(--border);
    margin-bottom: var(--space-3);
  }
  .pp-card .card-body {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-m);
  }

  /* The loop — flow steps */
  .loop-step {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 320px;
    gap: var(--space-6);
    padding: var(--space-6) 0;
    border-top: 1px dashed var(--border);
    align-items: start;
  }
  @media (max-width: 960px) {
    .loop-step {
      grid-template-columns: 60px 1fr;
    }
    .loop-step .je-chip {
      grid-column: 2 / -1;
      max-width: 320px;
    }
  }
  @media (max-width: 520px) {
    .loop-step {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }
    .loop-step .je-chip {
      grid-column: 1 / -1;
      max-width: 100%;
    }
  }
  .loop-step:first-of-type {
    border-top: 0;
  }
  .loop-step .num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.04em;
    color: var(--red-on-light);
    line-height: 1;
  }
  /* h3 (CRM) + h4 (ERP) both render as the step-body heading — consolidated. */
  .loop-step .body h3,
  .loop-step .body h4 {
    font-family: var(--font-heading);
    text-transform: none;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--foreground);
    margin: 0 0 var(--space-2);
  }
  .loop-step .body p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-m);
    margin: 0;
    max-width: 60ch;
  }

  /* JE T-account chip — the posting that step generates (ERP) / the state
     transition each step fires (CRM). Reinforces "one ledger" / "one record"
     by showing the downstream artifact at every step. */
  .je-chip {
    border: 1px solid var(--foreground);
    background: var(--background);
    box-shadow: 4px 4px 0 var(--foreground);
    font-family: var(--font-body);
    font-size: 11px;
    width: 100%;
  }
  @media (max-width: 520px) {
    .je-chip {
      box-shadow: none;
    }
  }
  .je-chip .je-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--foreground);
    color: var(--background);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .je-chip .je-hd .je-tag {
    background: var(--accent-yellow);
    color: var(--foreground);
    padding: 1px 5px;
    font-size: 9px;
  }
  .je-chip .je-hd .je-tag--muted {
    background: transparent;
    color: var(--background);
    border: 1px solid var(--background);
  }
  .je-chip .je-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .je-chip .je-col {
    padding: 8px 10px;
  }
  .je-chip .je-col + .je-col {
    border-left: 1px solid var(--border);
  }
  .je-chip .je-col-hd {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-m);
    margin-bottom: 4px;
  }
  .je-chip .je-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--foreground);
    line-height: 1.4;
  }
  .je-chip .je-row + .je-row {
    margin-top: 2px;
  }
  .je-chip .je-row .je-acct {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .je-chip .je-row .je-amt {
    color: var(--text-m);
    font-variant-numeric: tabular-nums;
  }
  .je-chip .je-foot {
    padding: 6px 10px;
    border-top: 1px solid var(--border);
    font-size: 10px;
    color: var(--text-m);
    letter-spacing: 0.04em;
  }
  /* Non-posting step: single-cell info badge */
  .je-chip--info {
    background: var(--background);
  }
  .je-chip--info .je-grid {
    grid-template-columns: 1fr;
  }
  .je-chip--info .je-col + .je-col {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  /* FAQ */
  details.faq-item {
    border-top: 1px solid var(--border);
    padding: var(--space-4) 0;
  }
  details.faq-item:last-of-type {
    border-bottom: 1px solid var(--border);
  }
  details.faq-item summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
  }
  details.faq-item summary::-webkit-details-marker {
    display: none;
  }
  details.faq-item summary::after {
    content: '+';
    font-family: var(--font-body);
    color: var(--red-on-light);
    font-size: 24px;
    line-height: 1;
  }
  details.faq-item[open] summary::after {
    content: '–';
  }
  details.faq-item p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-m);
    margin: var(--space-3) 0 0;
    max-width: 75ch;
  }

  /* Real screenshot frame */
  .app-shot {
    margin: 0 auto;
    max-width: 1100px;
    border: 1px solid var(--border);
    background: var(--background);
    box-shadow: 8px 8px 0 var(--text-d);
    padding: 0;
  }
  .app-shot img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Mockup screenshots — brutalist UI specs rendered in HTML/CSS, not images. */
  .mockup {
    border: 1px solid var(--border);
    background: var(--background);
    margin: 0 auto;
    max-width: 1100px;
    box-shadow: 6px 6px 0 var(--surface-dim);
  }
  .mockup-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .mockup-bar .left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }
  .mockup-bar .left .liveDot {
    width: 6px;
    height: 6px;
    background: var(--grn);
    display: inline-block;
  }
  .mockup-bar .left .title {
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mockup-bar .right {
    color: var(--text-m);
    white-space: nowrap;
  }
  @media (max-width: 520px) {
    .mockup-bar {
      align-items: flex-start;
      flex-direction: column;
    }
    .mockup-bar .right {
      max-width: 100%;
      white-space: normal;
    }
    .mockup-bar .left {
      max-width: 100%;
      width: 100%;
    }
  }
  .mockup-status {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-m);
    background: var(--surface-dim);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .mockup-caption {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-m);
    text-align: center;
    margin-top: var(--space-4);
  }

  /* Mockup 1: data table */
  .m-tbl {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12px;
  }
  .m-tbl th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    color: var(--text-m);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: var(--background);
  }
  .m-tbl th.num {
    text-align: right;
  }
  .m-tbl td {
    padding: 10px var(--space-4);
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
  }
  .m-tbl td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .m-tbl td.code {
    color: var(--text-m);
  }
  .m-tbl tr.parent td {
    font-weight: 700;
    background: var(--surface-dim);
  }
  .m-tbl tr.total td {
    font-weight: 800;
    background: var(--surface-dim);
    border-top: 2px solid var(--foreground);
    border-bottom: 0;
  }
  .m-tbl tr:last-child td {
    border-bottom: 0;
  }
  @media (max-width: 520px) {
    .m-tbl {
      table-layout: fixed;
      font-size: 10px;
    }
    .m-tbl th,
    .m-tbl td {
      overflow: hidden;
      padding: 8px 6px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* Mockup 2: KPI grid */
  .m-kpi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 768px) {
    .m-kpi {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 420px) {
    .m-kpi {
      grid-template-columns: 1fr;
    }
  }
  .m-kpi .cell {
    padding: var(--space-6);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .m-kpi .cell:nth-child(3n) {
    border-right: 0;
  }
  @media (max-width: 768px) {
    .m-kpi .cell:nth-child(3n) {
      border-right: 1px solid var(--border);
    }
    .m-kpi .cell:nth-child(2n) {
      border-right: 0;
    }
  }
  .m-kpi .cell:nth-last-child(-n + 3) {
    border-bottom: 0;
  }
  @media (max-width: 768px) {
    .m-kpi .cell:nth-last-child(-n + 3) {
      border-bottom: 1px solid var(--border);
    }
    .m-kpi .cell:nth-last-child(-n + 2) {
      border-bottom: 0;
    }
  }
  @media (max-width: 420px) {
    .m-kpi .cell,
    .m-kpi .cell:nth-child(2n),
    .m-kpi .cell:nth-child(3n) {
      border-right: 0;
    }
    .m-kpi .cell:nth-last-child(-n + 2) {
      border-bottom: 1px solid var(--border);
    }
    .m-kpi .cell:last-child {
      border-bottom: 0;
    }
  }
  .m-kpi .label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-m);
    margin-bottom: var(--space-3);
  }
  .m-kpi .value {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 36px;
    letter-spacing: -0.03em;
    color: var(--foreground);
    line-height: 1;
    margin-bottom: var(--space-3);
  }
  .m-kpi .sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-m);
    display: flex;
    gap: var(--space-2);
    align-items: center;
  }
  .m-kpi .sub .up {
    color: oklch(55% 0.15 148);
    font-weight: 700;
  }
  .m-kpi .sub .down {
    color: var(--red-on-light);
    font-weight: 700;
  }

  /* Mockup 3: checklist */
  .m-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
  }
  .m-list li {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
  }
  .m-list li:last-child {
    border-bottom: 0;
  }
  .m-list .icon {
    font-size: 16px;
    line-height: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 700;
  }
  .m-list .icon.done {
    color: oklch(55% 0.15 148);
  }
  .m-list .icon.progress {
    color: var(--red-on-light);
  }
  .m-list .icon.todo {
    color: var(--text-m);
    opacity: 0.45;
  }
  .m-list .icon.blocked {
    color: var(--text-m);
    opacity: 0.6;
  }
  .m-list .name {
    color: var(--foreground);
  }
  .m-list .name .meta {
    color: var(--text-m);
    font-size: 11px;
    margin-left: var(--space-2);
  }
  .m-list .status {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .m-list .status.done {
    color: oklch(55% 0.15 148);
  }
  .m-list .status.progress {
    color: var(--red-on-light);
  }
  .m-list .status.blocked {
    color: var(--text-m);
  }

  /* Published app + contributor pages: keep these in the persistent shell
     because view-transitions swaps only #main-content and drops fetched
     page-scoped head styles. */
  .catalog-page mark {
    background: #ffe45c;
    color: inherit;
    padding: 0 0.08em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .catalog-page .app-hero-copy-inner {
    align-items: center;
    margin-inline: auto;
    max-width: min(100%, 74rem);
    text-align: center;
  }

  .catalog-page .app-hero-copy-inner .app-eyebrow,
  .catalog-page .app-hero-copy-inner .app-lead,
  .catalog-page .app-hero-copy-inner .app-hero-cta,
  .catalog-page .app-hero-copy-inner .cta-micro {
    margin-left: 0;
  }

  .catalog-page .app-lead.app-lead--tight {
    margin-inline: auto;
  }

  .catalog-page .app-hero-preview {
    margin-inline: auto;
    padding-inline: clamp(1rem, 2vw, 2rem);
    transform: none;
  }

  .catalog-page .app-hero-preview .live-dashboard {
    max-width: 100%;
  }

  .catalog-page .catalog-hero-main .live-dashboard {
    overflow: hidden;
  }

  .catalog-page .catalog-hero-main .live-dashboard .ld-topbar {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding-inline: clamp(0.75rem, 1.5vw, 1rem);
  }

  .catalog-page .catalog-hero-main .live-dashboard .ld-crumb {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
  }

  .catalog-page .catalog-hero-main .live-dashboard .ld-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .catalog-page .catalog-hero-main .live-dashboard .ld-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.15rem;
    min-width: 2.15rem;
    padding: 0;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  .catalog-page .catalog-hero-main .live-dashboard .ld-btn-icon {
    width: 2.15rem;
    padding: 0;
  }

  .catalog-page .catalog-hero-main .live-dashboard .ld-btn-icon-svg {
    display: block;
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  .catalog-page .catalog-hero-main .live-dashboard .ld-btn-primary.ld-btn-icon .ld-btn-icon-svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .catalog-page .catalog-hero-main .live-dashboard .ld-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .catalog-hero-screenshot {
    display: block;
    width: 100%;
    height: auto;
    transform: translateY(0) scale(1);
    transition:
      transform 400ms cubic-bezier(0.2, 0, 0.1, 1),
      filter 400ms cubic-bezier(0.2, 0, 0.1, 1);
    filter: drop-shadow(0 24px 64px rgb(15 23 42 / 10%));
    will-change: transform;
  }

  .catalog-hero-screenshot:hover {
    transform: translateY(-4px) scale(1.012);
    filter: drop-shadow(0 40px 96px rgb(15 23 42 / 14%));
  }

  .catalog-hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(14rem, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: start;
    max-width: 94rem;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  }

  .catalog-hero-main {
    min-width: 0;
  }

  .catalog-page .catalog-hero-main .app-hero-preview {
    display: block;
    max-width: none;
    padding-inline: 0;
    padding-bottom: 0;
  }

  .catalog-sidebar-shell {
    min-width: 0;
    padding-top: 0.35rem;
  }

  .catalog-sidebar {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    font-family: var(--font-body);
  }

  .catalog-sidebar-section + .catalog-sidebar-section {
    border-top: 1px solid var(--border);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  .catalog-sidebar-title {
    margin: 0 0 1rem;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    text-transform: none;
  }

  .catalog-sidebar-text {
    margin: 0 0 1rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .catalog-sidebar-list {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding: 0;
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    list-style: none;
    text-transform: uppercase;
  }

  .catalog-sidebar-list strong {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
  }

  .catalog-contributors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  .catalog-contributor-avatar {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--background);
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 0 1px var(--border);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
  }

  .catalog-contributor-avatar--initials {
    background: #f8f3e8;
    color: #12110f;
  }

  .catalog-contributor-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .catalog-contributor-avatar:hover {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px var(--border),
      0 8px 18px rgb(15 23 42 / 14%);
  }

  .contributor-profile-main {
    flex: 1;
    width: min(100%, 82rem);
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  }

  .contributor-profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .contributor-profile-hero > * {
    margin-inline: 0;
    max-width: none;
  }

  .contributor-profile-copy {
    min-width: 0;
  }

  .contributor-profile-copy .app-eyebrow {
    margin-bottom: 0.45rem !important;
  }

  .contributor-profile-copy .catalog-sidebar-text {
    margin: 0;
    color: var(--text-m);
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .contributor-profile-avatar {
    display: inline-flex;
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--cream);
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
  }

  .contributor-profile-avatar--initials {
    background: #f8f3e8;
    color: #12110f;
  }

  .contributor-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .contributor-profile-name {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.95;
  }

  .contributor-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 17.5rem));
    gap: 1rem;
    align-items: start;
  }

  .contributor-app-card {
    position: relative;
    display: flex;
    width: 17.5rem;
    height: 12.5rem;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--card-bg);
    box-shadow: 0 0 0 1px var(--border);
    padding: 1rem;
    text-align: left;
    text-decoration: none;
  }

  .contributor-app-card .catalog-card-media,
  .contributor-app-card .catalog-card-media-scrim,
  .contributor-app-card .contributor-card-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .contributor-app-card .catalog-card-media {
    z-index: 0;
    background-position: center;
    background-size: cover;
  }

  .contributor-app-card .catalog-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .contributor-app-card .catalog-card-media-scrim {
    z-index: 1;
  }

  .contributor-app-card-fallback {
    background:
      radial-gradient(circle at 18% 18%, rgb(255 255 255 / 22%), transparent 30%),
      linear-gradient(135deg, var(--card-bg), color-mix(in oklch, var(--card-bg), black 24%));
  }

  .contributor-card-pattern {
    z-index: 2;
  }

  .contributor-app-card .catalog-card__content {
    position: relative;
    z-index: 10;
  }

  .contributor-app-card .catalog-card__title {
    font-size: clamp(1.45rem, 3vw, 1.9rem);
  }

  .contributor-app-card .catalog-card__desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.15;
    opacity: 0.84;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .catalog-page .related-grid {
    display: flex;
    width: 100%;
    gap: 1px;
    overflow-x: auto;
    overflow-y: hidden;
    border-block: 1px solid var(--border);
    margin: 0;
    background: var(--surface-dim);
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .catalog-page .related-grid::-webkit-scrollbar {
    display: none;
  }

  .catalog-page .related-card {
    position: relative;
    display: flex;
    width: 17.5rem;
    height: 12.5rem;
    flex: 0 0 17.5rem;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--card-bg);
    box-shadow: none;
    color: var(--card-fg);
    padding: 1rem;
    scroll-snap-align: start;
    text-align: left;
    text-decoration: none;
  }

  .catalog-page .related-card:last-child {
    border-right: 0;
  }

  .catalog-page .related-card .catalog-card-media,
  .catalog-page .related-card .catalog-card-media-scrim,
  .catalog-page .related-card .contributor-card-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .catalog-page .related-card .catalog-card-media {
    z-index: 0;
    background-position: center;
    background-size: cover;
  }

  .catalog-page .related-card .catalog-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .catalog-page .related-card .catalog-card-media-scrim {
    z-index: 1;
  }

  .catalog-page .related-card-fallback {
    background:
      radial-gradient(circle at 18% 18%, rgb(255 255 255 / 20%), transparent 30%),
      linear-gradient(135deg, var(--card-bg), color-mix(in oklch, var(--card-bg), black 26%));
  }

  .catalog-page .related-card .catalog-card-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
  }

  .catalog-page .related-card .catalog-card__content {
    position: relative;
    z-index: 10;
    margin-top: auto;
  }

  .catalog-page .related-card .catalog-card__title {
    font-size: clamp(1.65rem, 3vw, 2.4rem);
  }

  .catalog-page .related-card .catalog-card__desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.15;
    opacity: 0.86;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  @media (prefers-reduced-motion: reduce) {
    .catalog-hero-screenshot,
    .catalog-hero-screenshot:hover {
      transform: none;
      transition: none;
    }
  }

  @media (max-width: 1100px) {
    .catalog-hero-shell {
      grid-template-columns: 1fr;
    }

    .catalog-sidebar-shell {
      padding-top: 1rem;
    }
  }

  @media (max-width: 700px) {
    .contributor-profile-hero {
      grid-template-columns: 1fr;
      align-items: flex-start;
    }

    .contributor-profile-main {
      padding-top: 1.5rem;
    }

    .contributor-profile-name {
      font-size: clamp(1.85rem, 12vw, 2.5rem);
    }

    .contributor-app-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .contributor-app-card {
      width: 100%;
      max-width: 22rem;
    }

    .catalog-page .related-card {
      height: 12rem;
      flex-basis: min(82vw, 17.5rem);
    }
  }

  /* Published catalog app pages — Tacet SaaS treatment.
     The backend-rendered pages ship their own inline catalog styles after
     linked CSS, so these selectors intentionally use the body qualifier and
     narrow !important overrides where inline style attributes would otherwise
     win. */
  html:has(body.catalog-page) {
    background:
      linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 90rem),
      radial-gradient(
        circle at 16% 0%,
        color-mix(in oklch, var(--org), transparent 82%),
        transparent 30rem
      ),
      radial-gradient(
        circle at 78% 5rem,
        color-mix(in oklch, var(--grn), transparent 88%),
        transparent 26rem
      ),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--background), white 8%) 0%,
        color-mix(in oklch, var(--background), var(--card) 22%) 48%,
        transparent 100%
      ),
      var(--background);
    background-position: top center;
    background-repeat: no-repeat;
    background-size:
      100% 90rem,
      100% 90rem,
      100% 90rem,
      100% 90rem,
      auto;
  }

  body.catalog-page {
    --catalog-page-rail: min(calc(100vw - 3rem), 86rem);
    --catalog-page-copy: 64ch;
    --catalog-generated-wash-height: 90rem;
    --catalog-card-surface: color-mix(in oklch, var(--card), var(--background) 18%);
    --catalog-panel-border: color-mix(in oklch, var(--border), transparent 10%);
    --catalog-generated-wash-a: radial-gradient(
      circle at 16% 0%,
      color-mix(in oklch, var(--org), transparent 82%),
      transparent 30rem
    );
    --catalog-generated-wash-b: radial-gradient(
      circle at 78% 5rem,
      color-mix(in oklch, var(--grn), transparent 88%),
      transparent 26rem
    );
    --catalog-generated-wash-c: linear-gradient(
      180deg,
      color-mix(in oklch, var(--background), white 8%) 0%,
      color-mix(in oklch, var(--background), var(--card) 22%) 48%,
      transparent 100%
    );
    --tacet-nav-bg:
      var(--catalog-generated-wash-a), var(--catalog-generated-wash-b),
      var(--catalog-generated-wash-c);
    --tacet-nav-width: min(calc((100vw - 2rem) * 0.985), 70rem);
    --tacet-nav-width-scrolled: min(calc((100vw - 2rem) * 0.88), 70rem);
    --tacet-nav-panel-rest: color-mix(in oklch, var(--background), transparent 76%);
    --tacet-nav-panel-scrolled: color-mix(in oklch, var(--background), transparent 34%);
    --tacet-nav-border-rest: color-mix(in oklch, white, transparent 32%);
    --tacet-nav-border-scrolled: color-mix(in oklch, var(--foreground), transparent 82%);
    --tacet-nav-shadow-scrolled:
      0 1rem 2.5rem -1.5rem color-mix(in oklch, var(--foreground), transparent 78%),
      0 0 0 1px color-mix(in oklch, var(--foreground), transparent 90%);
    --catalog-nav-width: var(--tacet-nav-width);
    --catalog-nav-width-scrolled: var(--tacet-nav-width-scrolled);

    background:
      linear-gradient(
        to bottom,
        rgb(255 255 255 / 0.2),
        rgb(255 255 255 / 0) var(--catalog-generated-wash-height)
      ),
      var(--catalog-generated-wash-a), var(--catalog-generated-wash-b),
      var(--catalog-generated-wash-c), var(--background);
    background-position: top center;
    background-repeat: no-repeat;
    background-size:
      100% var(--catalog-generated-wash-height),
      100% var(--catalog-generated-wash-height),
      100% var(--catalog-generated-wash-height),
      100% var(--catalog-generated-wash-height),
      auto;
  }

  body.catalog-page .proto-nav {
    --tacet-nav-bg:
      var(--catalog-generated-wash-a), var(--catalog-generated-wash-b),
      var(--catalog-generated-wash-c);
  }

  body.catalog-page .erpnav,
  body.catalog-page .crmnav {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    justify-content: center;
    border-bottom: 0;
    background: transparent;
    isolation: isolate;
    overflow: visible;
    padding: 0.75rem 1rem 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
    pointer-events: none;
    transition:
      padding var(--duration-normal) var(--ease-standard),
      background var(--duration-normal) var(--ease-standard);
  }

  body.catalog-page .erpnav::before,
  body.catalog-page .crmnav::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(
        to bottom,
        color-mix(in oklch, var(--background), transparent 2%),
        color-mix(in oklch, var(--background), transparent 14%)
      ),
      var(--tacet-nav-bg), var(--background);
    background-position: top center;
    background-repeat: no-repeat;
    background-size:
      100% var(--catalog-generated-wash-height),
      100% var(--catalog-generated-wash-height),
      100% var(--catalog-generated-wash-height),
      auto;
    opacity: 0;
    content: '';
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  body.catalog-page .erpnav[data-scrolled='true'],
  body.catalog-page .crmnav[data-scrolled='true'] {
    padding-top: 0.5rem;
  }

  body.catalog-page .erpnav[data-scrolled='true']::before,
  body.catalog-page .crmnav[data-scrolled='true']::before {
    opacity: 1;
  }

  body.catalog-page .erpnav-inner,
  body.catalog-page .crmnav-inner {
    position: relative;
    z-index: 1;
    width: var(--catalog-nav-width);
    max-width: var(--catalog-nav-width);
    height: 3.875rem;
    align-items: center;
    gap: 0.5rem;
    overflow: visible;
    border: 1px solid var(--tacet-nav-border-rest);
    border-radius: 10px;
    background: var(--tacet-nav-panel-rest);
    color: var(--foreground);
    box-shadow: none;
    padding: 0.5rem 0.65rem 0.5rem 0.75rem;
    pointer-events: auto;
    transition:
      width var(--duration-normal) var(--ease-standard),
      max-width var(--duration-normal) var(--ease-standard),
      background var(--duration-normal) var(--ease-standard),
      border-color var(--duration-normal) var(--ease-standard),
      box-shadow var(--duration-normal) var(--ease-standard),
      backdrop-filter var(--duration-normal) var(--ease-standard);
  }

  body.catalog-page .erpnav[data-scrolled='true'] .erpnav-inner,
  body.catalog-page .crmnav[data-scrolled='true'] .crmnav-inner {
    width: var(--catalog-nav-width-scrolled);
    max-width: var(--catalog-nav-width-scrolled);
    border-color: var(--tacet-nav-border-scrolled);
    background: var(--tacet-nav-panel-scrolled);
    box-shadow: var(--tacet-nav-shadow-scrolled);
    backdrop-filter: blur(16px) grayscale(1%) saturate(180%);
  }

  body.catalog-page .erpnav-brand-wrap,
  body.catalog-page .crmnav-brand-wrap {
    height: 100%;
    gap: 0.6rem;
    margin-right: 0.4rem;
    padding-right: 0.6rem;
    border-right: 1px solid color-mix(in oklch, var(--foreground), transparent 88%);
  }

  body.catalog-page .erpnav-logo,
  body.catalog-page .crmnav-logo {
    min-height: 2.625rem;
    padding-inline: 0.2rem 0.45rem;
  }

  body.catalog-page .erpnav-logo svg,
  body.catalog-page .crmnav-logo svg {
    height: 1.28rem;
  }

  body.catalog-page .erpnav-product,
  body.catalog-page .crmnav-product {
    gap: 0.45rem;
    min-height: 24px;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .erpnav-product::before,
  body.catalog-page .crmnav-product::before {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--org-on-light);
  }

  body.catalog-page .ps-trigger {
    gap: 0.45rem;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .ps-trigger::before {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--org-on-light);
  }

  body.catalog-page .ps-menu {
    top: calc(100% + 0.75rem);
    overflow: hidden;
    border: 1px solid var(--catalog-panel-border);
    border-radius: 8px;
    background: var(--catalog-card-surface);
    box-shadow: 0 1.25rem 4rem color-mix(in oklch, var(--foreground), transparent 88%);
  }

  body.catalog-page .ps-menu-head {
    color: var(--text-m);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .ps-menu-head::before {
    content: '';
  }

  body.catalog-page .ps-app {
    border-color: var(--catalog-panel-border);
  }

  body.catalog-page .ps-app:hover {
    background: color-mix(in oklch, var(--foreground), transparent 94%);
  }

  body.catalog-page .ps-app.is-current {
    background: color-mix(in oklch, var(--org), transparent 88%);
  }

  body.catalog-page .ps-app .ps-mono {
    border: 0;
    border-radius: 4px;
    background: color-mix(in oklch, var(--org), transparent 90%);
    box-shadow: none;
    color: var(--org-on-light);
  }

  body.catalog-page .ps-app .ps-name {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 720;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .ps-app .ps-line,
  body.catalog-page .ps-menu-foot {
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .erpnav a.erpnav-link,
  body.catalog-page .erpnav button.erpnav-link,
  body.catalog-page .crmnav a.crmnav-link,
  body.catalog-page .crmnav button.crmnav-link {
    min-height: 2.15rem;
    align-items: center;
    border: 0;
    border-radius: 6px;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    padding-inline: 0.7rem;
    transition:
      background var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  body.catalog-page .erpnav a.erpnav-link:hover,
  body.catalog-page .erpnav button.erpnav-link:hover,
  body.catalog-page .crmnav a.crmnav-link:hover,
  body.catalog-page .crmnav button.crmnav-link:hover {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
    color: var(--foreground);
  }

  body.catalog-page .erpnav a.erpnav-link.is-current,
  body.catalog-page .crmnav a.crmnav-link.is-current {
    background: var(--foreground);
    color: var(--background);
    font-weight: 700;
  }

  body.catalog-page .erpnav-right,
  body.catalog-page .crmnav-right {
    margin-left: auto;
  }

  body.catalog-page .erpnav-right .erpnav-cta,
  body.catalog-page .crmnav-right .crmnav-cta {
    display: inline-flex;
    min-height: 2.35rem;
    padding: 0 0.9rem !important;
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 84%) !important;
    border-radius: 6px;
    background: var(--background) !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .erpnav-right .erpnav-cta:hover,
  body.catalog-page .crmnav-right .crmnav-cta:hover {
    border-color: color-mix(in oklch, var(--foreground), transparent 70%) !important;
    background: color-mix(in oklch, var(--foreground), transparent 94%) !important;
  }

  body.catalog-page .erpnav-mega,
  body.catalog-page .crmnav-mega {
    overflow: hidden;
    border: 1px solid var(--catalog-panel-border);
    border-radius: 8px;
    background: var(--catalog-card-surface);
    box-shadow: 0 1.25rem 4rem color-mix(in oklch, var(--foreground), transparent 88%);
  }

  body.catalog-page .erpnav-mega .mega-side,
  body.catalog-page .crmnav-mega .mega-side {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
    color: var(--foreground);
  }

  body.catalog-page .erpnav-mega .mega-side .mega-side-title,
  body.catalog-page .crmnav-mega .mega-side .mega-side-title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 740;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .erpnav-mega .mega-side .mega-side-sub,
  body.catalog-page .crmnav-mega .mega-side .mega-side-sub {
    color: var(--text-m);
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .erpnav-mega .mega-side a,
  body.catalog-page .crmnav-mega .mega-side a {
    border: 0;
    border-radius: 6px;
    background: var(--foreground);
    color: var(--background);
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
  }

  @media (max-width: 720px) {
    body.catalog-page .erpnav,
    body.catalog-page .crmnav {
      padding-inline: 0.75rem;
    }

    body.catalog-page .erpnav-inner,
    body.catalog-page .crmnav-inner {
      width: calc(100vw - 1.5rem);
      max-width: calc(100vw - 1.5rem);
      height: 3.75rem;
      overflow: hidden;
      padding-inline: 0.55rem;
    }

    body.catalog-page .erpnav-left,
    body.catalog-page .crmnav-left {
      min-width: 0;
      flex: 1 1 auto;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
    }

    body.catalog-page .erpnav-left::-webkit-scrollbar,
    body.catalog-page .crmnav-left::-webkit-scrollbar {
      display: none;
    }

    body.catalog-page .erpnav-right,
    body.catalog-page .crmnav-right {
      display: none;
    }

    body.catalog-page .erpnav-brand-wrap,
    body.catalog-page .crmnav-brand-wrap {
      flex: 0 0 auto;
      gap: 0.45rem;
      margin-right: 0.25rem;
      padding-right: 0.45rem;
    }

    body.catalog-page .erpnav-logo svg,
    body.catalog-page .crmnav-logo svg {
      height: 1.05rem;
    }

    body.catalog-page .ps,
    body.catalog-page .erpnav-features,
    body.catalog-page .crmnav-features,
    body.catalog-page .erpnav a.erpnav-link,
    body.catalog-page .erpnav button.erpnav-link,
    body.catalog-page .crmnav a.crmnav-link,
    body.catalog-page .crmnav button.crmnav-link {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    body.catalog-page .ps-trigger,
    body.catalog-page .erpnav a.erpnav-link,
    body.catalog-page .erpnav button.erpnav-link,
    body.catalog-page .crmnav a.crmnav-link,
    body.catalog-page .crmnav button.crmnav-link {
      font-size: 0.8rem;
    }

    body.catalog-page .ps-menu,
    body.catalog-page .erpnav-mega,
    body.catalog-page .crmnav-mega {
      width: min(20rem, calc(100vw - 2rem));
    }
  }

  body.catalog-page > .fixed.top-0.left-0.right-0.z-50 {
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem 0;
    pointer-events: none;
    transition: none;
  }

  body.catalog-page > .fixed.top-0.left-0.right-0.z-50[data-scrolled='true'] {
    padding-top: 0.5rem;
  }

  body.catalog-page > .fixed .audience-bar {
    display: none !important;
  }

  body.catalog-page > .fixed nav[aria-label='Primary'] {
    position: relative;
    width: var(--catalog-nav-width) !important;
    height: 3.875rem !important;
    overflow: hidden;
    border: 1px solid var(--tacet-nav-border-rest) !important;
    border-radius: 10px !important;
    background: var(--tacet-nav-panel-rest) !important;
    color: var(--foreground);
    box-shadow: none;
    pointer-events: auto;
    backdrop-filter: none;
    transition:
      width 0.5s var(--ease-standard),
      background 0.5s var(--ease-standard),
      border-color 0.5s var(--ease-standard),
      box-shadow 0.5s var(--ease-standard),
      backdrop-filter 0.5s var(--ease-standard);
  }

  body.catalog-page > .fixed nav[aria-label='Primary']::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: var(--tacet-nav-bg);
    background-position: top center;
    background-size: cover;
    opacity: 0;
    content: '';
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  body.catalog-page
    > .fixed.top-0.left-0.right-0.z-50[data-scrolled='true']
    nav[aria-label='Primary'] {
    width: var(--catalog-nav-width-scrolled) !important;
    border-color: var(--tacet-nav-border-scrolled) !important;
    background: var(--tacet-nav-panel-scrolled) !important;
    box-shadow: var(--tacet-nav-shadow-scrolled);
    backdrop-filter: blur(16px) grayscale(1%) saturate(180%);
  }

  body.catalog-page
    > .fixed.top-0.left-0.right-0.z-50[data-scrolled='true']
    nav[aria-label='Primary']::before {
    opacity: 0.55;
  }

  body.catalog-page > .fixed nav[aria-label='Primary'] > div {
    position: relative;
    z-index: 1;
    max-width: none !important;
    align-items: center !important;
    padding: 0.5rem 0.65rem 0.5rem 0.75rem !important;
  }

  body.catalog-page > .fixed nav[aria-label='Primary'] a[aria-label='ERP.AI home'] {
    min-height: 2.625rem;
    padding-inline: 0.2rem 0.65rem;
  }

  body.catalog-page > .fixed nav[aria-label='Primary'] a[aria-label='ERP.AI home'] span {
    border: 0 !important;
    padding: 0 !important;
    color: var(--foreground);
    font-size: 1.02rem;
    letter-spacing: -0.055em !important;
    line-height: 1;
  }

  body.catalog-page > .fixed nav[aria-label='Primary'] .hidden.xl\:flex {
    align-items: center !important;
    gap: 0.25rem !important;
    height: auto !important;
    padding: 0.25rem;
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 91%);
    border-radius: 8px;
    background: color-mix(in oklch, var(--foreground), transparent 96%);
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.catalog-page .nav-primary-link,
  body.catalog-page .nav-signin-link {
    min-height: 2.15rem;
    align-items: center;
    border: 0 !important;
    border-radius: 6px;
    color: var(--text-m);
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    transition:
      background var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  body.catalog-page .nav-primary-link {
    padding-inline: 0.7rem !important;
  }

  body.catalog-page .nav-primary-link:hover,
  body.catalog-page .nav-primary-link:focus-visible {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
    color: var(--foreground);
  }

  body.catalog-page .nav-primary-link--current {
    background: var(--foreground);
    color: var(--background) !important;
  }

  body.catalog-page .nav-signin-link {
    display: inline-flex;
    min-height: 2.35rem;
    padding: 0 0.9rem !important;
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 84%) !important;
    background: var(--background);
    color: var(--foreground);
  }

  body.catalog-page .nav-signin-link:hover,
  body.catalog-page .nav-signin-link:focus-visible {
    border-color: color-mix(in oklch, var(--foreground), transparent 70%) !important;
    background: color-mix(in oklch, var(--foreground), transparent 94%);
  }

  body.catalog-page > .fixed + div[style] {
    height: 5.25rem !important;
  }

  body.catalog-page
    :is(
      .app-eyebrow,
      .app-h1,
      .app-h2,
      .section-hero .sh-chip,
      .app-stat .eyebrow,
      .catalog-sidebar-list,
      .pp-card .card-tag,
      .loop-step .num,
      .je-chip .je-hd,
      .je-chip .je-col-hd,
      .je-chip .je-foot,
      .mockup-bar,
      .mockup-status,
      .mockup-caption,
      .m-kpi .label,
      .compare-head .compare-cell,
      .compare-cell--label,
      .catalog-card-badge,
      .hero-secondary,
      .btn
    ) {
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.catalog-page .app-hero {
    overflow-x: clip;
    overflow-y: visible;
    border-bottom: 1px solid var(--catalog-panel-border);
    background: transparent;
  }

  body.catalog-page .app-hero::before {
    opacity: 0.16;
    mask-image: linear-gradient(180deg, black 0%, transparent 78%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 78%);
  }

  body.catalog-page .app-hero-copy {
    padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2rem, 4vw, 3.5rem);
    text-align: left !important;
  }

  body.catalog-page .app-hero-copy-inner {
    display: grid;
    width: var(--catalog-page-rail);
    max-width: var(--catalog-page-rail);
    align-items: start !important;
    justify-items: start !important;
    gap: clamp(0.95rem, 1.6vw, 1.35rem);
    margin-inline: auto !important;
    padding-inline: 0 !important;
    text-align: left !important;
  }

  body.catalog-page .app-hero-copy-inner > * {
    justify-self: start !important;
  }

  body.catalog-page .app-hero-copy-inner .app-eyebrow {
    display: none;
  }

  body.catalog-page .app-hero-copy-inner .app-eyebrow,
  body.catalog-page .app-hero-copy-inner .app-lead,
  body.catalog-page .app-hero-copy-inner .app-hero-cta,
  body.catalog-page .app-hero-copy-inner .cta-micro {
    margin-left: 0 !important;
  }

  body.catalog-page .app-eyebrow {
    gap: 0.55rem;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
  }

  body.catalog-page .app-eyebrow .dot {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: var(--org-on-light);
  }

  body.catalog-page .app-h1.app-h1--tight {
    max-width: 13ch;
    color: var(--foreground);
    font-size: clamp(3rem, 7.4vw, 6rem);
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 0.9;
    text-transform: none;
  }

  body.catalog-page .app-h1-accent,
  body.catalog-page .hl-yellow {
    color: var(--org-on-light) !important;
  }

  body.catalog-page .hl-yellow {
    background: linear-gradient(
      180deg,
      transparent 54%,
      color-mix(in oklch, var(--org), transparent 78%) 54%
    ) !important;
  }

  body.catalog-page .app-lead.app-lead--tight {
    max-width: var(--catalog-page-copy);
    margin-inline: 0 !important;
    color: color-mix(in oklch, var(--foreground), transparent 28%);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.62;
    text-align: left !important;
  }

  body.catalog-page .app-hero-cta {
    justify-content: flex-start !important;
    gap: 0.85rem;
  }

  body.catalog-page .app-hero-cta .btn,
  body.catalog-page #cta .btn {
    --btn-face: var(--foreground);
    --btn-fill-hover: var(--org-on-light);
    --btn-text: var(--background);
    --btn-border: var(--org-on-light);
    --btn-text-hover: var(--beige-50);
    --btn-border-hover: var(--foreground);
    --btn-rail: var(--org-on-light);
    --btn-rail-hover: var(--foreground);

    min-height: 2.875rem;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    transition:
      transform var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  body.catalog-page .hero-secondary {
    min-height: 2.75rem;
    color: var(--text-m);
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.catalog-page .cta-micro,
  body.catalog-page .app-trust-strip {
    justify-content: flex-start;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
  }

  body.catalog-page .cta-micro {
    display: none !important;
  }

  body.catalog-page .catalog-hero-shell {
    width: var(--catalog-page-rail);
    max-width: var(--catalog-page-rail);
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: 0 0 clamp(3rem, 6vw, 5rem);
  }

  body.catalog-page .app-hero-preview {
    padding-inline: 0 !important;
  }

  body.catalog-page .live-dashboard,
  body.catalog-page .mockup,
  body.catalog-page .compare-table {
    overflow: hidden;
    border: 1px solid var(--catalog-panel-border);
    border-radius: 8px;
    background: var(--catalog-card-surface);
    box-shadow: 0 1.25rem 4rem color-mix(in oklch, var(--foreground), transparent 92%);
  }

  body.catalog-page .catalog-sidebar {
    border: 1px solid var(--catalog-panel-border);
    border-radius: 8px;
    background: color-mix(in oklch, var(--card), var(--background) 18%);
    padding: 1.15rem;
  }

  body.catalog-page .catalog-sidebar-title {
    margin-bottom: 0.65rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
  }

  body.catalog-page .catalog-sidebar-text {
    font-size: 0.9rem;
    line-height: 1.58;
  }

  body.catalog-page .catalog-sidebar-list {
    gap: 0;
    margin-top: 0.9rem;
    border-top: 1px solid var(--catalog-panel-border);
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .catalog-sidebar-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--catalog-panel-border);
  }

  body.catalog-page .catalog-contributor-avatar {
    width: 2.35rem;
    height: 2.35rem;
    border-width: 1px;
    border-radius: 8px;
    box-shadow: none;
  }

  body.catalog-page .app-stats {
    width: var(--catalog-page-rail);
    max-width: var(--catalog-page-rail);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    margin: clamp(1.5rem, 3vw, 2.25rem) auto;
    border: 1px solid var(--catalog-panel-border);
    border-radius: 8px;
    background: var(--catalog-card-surface);
  }

  body.catalog-page .app-stat {
    min-height: 0;
    gap: 0.45rem;
    padding: 1.05rem;
    border-color: var(--catalog-panel-border);
  }

  body.catalog-page .app-stat .eyebrow {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .app-stat .eyebrow::before,
  body.catalog-page .app-stat .mark,
  body.catalog-page .app-stat .ticks {
    display: none;
  }

  body.catalog-page .app-stat .v {
    padding: 0;
    color: var(--foreground);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 760;
  }

  body.catalog-page .app-stat .v::before {
    display: none;
  }

  body.catalog-page .app-stat .l {
    font-size: 0.95rem;
    font-weight: 700;
  }

  body.catalog-page .app-stat .sub {
    margin-top: 0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0;
    line-height: 1.45;
  }

  body.catalog-page .app-section {
    border-top: 1px solid var(--catalog-panel-border);
    background: var(--background);
  }

  body.catalog-page .app-bg-paper,
  body.catalog-page .app-bg-dim,
  body.catalog-page .app-bg-warm,
  body.catalog-page .app-bg-cream,
  body.catalog-page .app-bg-grid,
  body.catalog-page .app-bg-hatch {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--background), white 2%),
      var(--background)
    ) !important;
    background-image: none !important;
  }

  body.catalog-page .app-section > div {
    width: var(--catalog-page-rail);
    max-width: var(--catalog-page-rail);
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.catalog-page .section-hero {
    align-items: flex-start;
    max-width: var(--catalog-page-rail);
    gap: 0.55rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    text-align: left;
  }

  body.catalog-page .section-hero .sh-chip {
    display: none;
    color: var(--org-on-light);
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .section-hero .sh-chip .sh-num {
    display: none;
  }

  body.catalog-page .section-hero .app-h2,
  body.catalog-page .app-h2 {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.55rem);
    font-weight: 740;
    letter-spacing: -0.025em;
    line-height: 1.04;
  }

  body.catalog-page .section-hero .app-italic,
  body.catalog-page .app-italic {
    max-width: 62ch;
    margin: 0;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1.25vw, 1.08rem);
    font-style: normal;
    line-height: 1.58;
  }

  body.catalog-page .grid-cards {
    gap: clamp(0.75rem, 1.6vw, 1rem);
    border: 0;
  }

  body.catalog-page .pp-card {
    min-width: 0;
    border: 1px solid var(--catalog-panel-border);
    border-radius: 8px;
    background: var(--catalog-card-surface);
    padding: clamp(1rem, 2vw, 1.2rem);
    box-shadow: 0 0.75rem 2rem color-mix(in oklch, var(--foreground), transparent 96%);
  }

  body.catalog-page .pp-card[data-icon] {
    padding-top: clamp(1rem, 2vw, 1.2rem);
  }

  body.catalog-page .pp-card[data-icon]::before {
    position: static;
    width: fit-content;
    margin-bottom: 0.8rem;
    border-radius: 4px;
    background: color-mix(in oklch, var(--org), transparent 90%);
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0;
  }

  body.catalog-page .pp-card .card-tag {
    margin-bottom: 0.5rem;
    color: var(--text-m) !important;
    font-size: 0.78rem !important;
    font-weight: 650;
    letter-spacing: 0 !important;
    text-transform: none;
  }

  body.catalog-page .pp-card .card-title {
    margin-bottom: 0.55rem;
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    font-weight: 720;
    line-height: 1.18;
  }

  body.catalog-page .pp-card .card-divider {
    display: none;
  }

  body.catalog-page .pp-card .card-body {
    color: var(--text-m);
    font-size: 0.9rem;
    line-height: 1.55;
  }

  body.catalog-page .loop-step {
    grid-template-columns: minmax(3rem, 0.12fr) minmax(0, 0.5fr) minmax(16rem, 0.38fr);
    gap: clamp(1rem, 2.5vw, 2.25rem);
    border-top: 1px solid var(--catalog-panel-border);
    padding: clamp(1.2rem, 2.5vw, 1.85rem) 0;
  }

  body.catalog-page .loop-step .num {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 740;
    letter-spacing: 0;
  }

  body.catalog-page [data-section='process'] .section-hero {
    align-items: start;
    text-align: left;
    max-width: 58rem;
    margin: 0;
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  }

  body.catalog-page [data-section='process'] .section-hero .sh-chip {
    display: none;
  }

  body.catalog-page [data-section='process'] .section-hero .app-h2,
  body.catalog-page [data-section='process'] .section-hero .app-italic {
    margin-inline: 0;
  }

  body.catalog-page [data-section='process'] .section-hero + div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.25rem);
  }

  body.catalog-page [data-section='process'] .loop-step {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.25rem);
    min-width: 0;
    padding: clamp(1.15rem, 2vw, 1.5rem);
    overflow: hidden;
    border: 1px solid var(--catalog-panel-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--background), white 5%),
      color-mix(in oklch, var(--catalog-card-surface), var(--background) 35%)
    );
    box-shadow: 0 1.25rem 2.75rem -2.45rem color-mix(in oklch, var(--foreground), transparent 45%);
  }

  body.catalog-page [data-section='process'] .loop-step:first-of-type {
    border-top: 1px solid var(--catalog-panel-border);
  }

  body.catalog-page [data-section='process'] .loop-step .num {
    display: none;
  }

  body.catalog-page [data-section='process'] .loop-step .body {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding-left: 0.15rem;
  }

  body.catalog-page .loop-step .body h3,
  body.catalog-page .loop-step .body h4 {
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    font-weight: 720;
    line-height: 1.2;
  }

  body.catalog-page .loop-step .body p {
    font-size: 0.92rem;
  }

  body.catalog-page [data-section='process'] .loop-step .body h3,
  body.catalog-page [data-section='process'] .loop-step .body h4 {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 760;
    line-height: 1.08;
  }

  body.catalog-page [data-section='process'] .loop-step .body p {
    max-width: 44rem;
    color: var(--text-m);
    font-size: clamp(0.94rem, 1vw, 1rem);
    line-height: 1.55;
  }

  body.catalog-page .je-chip {
    overflow: hidden;
    border: 1px solid var(--catalog-panel-border);
    border-radius: 8px;
    background: var(--catalog-card-surface);
    box-shadow: none;
    font-size: 0.82rem;
  }

  body.catalog-page [data-section='process'] .je-chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.72rem 0.8rem;
    border-radius: 6px;
    background: color-mix(in oklch, var(--background), var(--foreground) 2%);
  }

  body.catalog-page .je-chip .je-hd {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
    color: var(--foreground);
    font-size: 0.72rem;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .je-chip .je-hd .je-tag--muted {
    border: 0;
    color: var(--text-m);
  }

  body.catalog-page [data-section='process'] .je-chip .je-hd {
    padding: 0;
    background: transparent;
    border-bottom: 0;
    color: var(--foreground);
    font-weight: 680;
    white-space: nowrap;
  }

  body.catalog-page [data-section='process'] .je-chip .je-hd .je-tag--muted {
    display: none;
  }

  body.catalog-page [data-section='process'] .je-chip .je-grid,
  body.catalog-page [data-section='process'] .je-chip .je-col,
  body.catalog-page [data-section='process'] .je-chip .je-row {
    min-width: 0;
  }

  body.catalog-page [data-section='process'] .je-chip .je-grid {
    display: block;
  }

  body.catalog-page [data-section='process'] .je-chip .je-col {
    padding: 0;
  }

  body.catalog-page [data-section='process'] .je-chip .je-col-hd,
  body.catalog-page [data-section='process'] .je-chip .je-foot {
    display: none;
  }

  body.catalog-page [data-section='process'] .je-chip .je-row {
    overflow: hidden;
    justify-content: flex-start;
    color: var(--text-m) !important;
    font-size: 0.84rem;
    text-overflow: ellipsis;
  }

  body.catalog-page .je-chip .je-col-hd,
  body.catalog-page .je-chip .je-foot {
    font-size: 0.72rem;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .mockup {
    max-width: var(--catalog-page-rail);
    box-shadow: 0 1rem 3rem color-mix(in oklch, var(--foreground), transparent 94%);
  }

  body.catalog-page .mockup-bar,
  body.catalog-page .mockup-status,
  body.catalog-page .mockup-caption,
  body.catalog-page .m-kpi .label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .mockup-caption {
    margin-top: 0.75rem;
  }

  body.catalog-page .m-kpi .cell {
    padding: clamp(1rem, 2vw, 1.25rem);
    border-color: var(--catalog-panel-border);
  }

  body.catalog-page .m-kpi .value {
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    font-weight: 740;
  }

  body.catalog-page .m-kpi .sub {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.45;
  }

  body.catalog-page .compare-table {
    max-width: var(--catalog-page-rail);
  }

  body.catalog-page .compare-row {
    border-color: var(--catalog-panel-border);
  }

  body.catalog-page .compare-head .compare-cell {
    background: color-mix(in oklch, var(--foreground), transparent 92%);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .compare-head .compare-cell--new {
    background: color-mix(in oklch, var(--org), transparent 88%);
    color: var(--org-on-light);
  }

  body.catalog-page .compare-cell {
    border-color: var(--catalog-panel-border);
    font-size: 0.92rem;
  }

  body.catalog-page .compare-cell--label {
    font-size: 0.84rem;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page details.faq-item {
    border-color: var(--catalog-panel-border);
  }

  body.catalog-page details.faq-item summary {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
  }

  body.catalog-page details.faq-item p {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  body.catalog-page [data-section='relatedApps'] > div:first-child {
    padding-bottom: 1.5rem !important;
  }

  body.catalog-page .related-grid {
    width: var(--catalog-page-rail);
    max-width: var(--catalog-page-rail);
    gap: 0.9rem !important;
    margin-inline: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border: 0;
    background: transparent !important;
    padding-bottom: 1rem !important;
  }

  body.catalog-page .related-card {
    width: clamp(17.5rem, 30vw, 26.875rem) !important;
    height: auto !important;
    aspect-ratio: 430 / 242;
    flex-basis: clamp(17.5rem, 30vw, 26.875rem) !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--card-bg) !important;
    color: white !important;
    container-type: inline-size;
    padding: 0 !important;
    box-shadow: none;
    transform: translateZ(0);
    transform-origin: center center;
    transition:
      filter 260ms var(--ease-standard),
      box-shadow 260ms var(--ease-standard),
      transform 420ms var(--ease-signature);
  }

  body.catalog-page .related-card:hover,
  body.catalog-page .related-card:focus-visible {
    filter: brightness(1.05) saturate(1.03);
    box-shadow:
      0 22px 70px rgb(0 0 0 / 28%),
      inset 0 0 0 1px rgb(255 255 255 / 34%);
    transform: translateY(-3px) scale(1.018);
  }

  body.catalog-page .related-card::after {
    display: block !important;
    content: '' !important;
    z-index: 2;
    background:
      linear-gradient(180deg, rgb(0 0 0 / 2%) 0%, rgb(0 0 0 / 12%) 42%, rgb(0 0 0 / 62%) 100%),
      linear-gradient(90deg, rgb(0 0 0 / 16%) 0%, rgb(0 0 0 / 0%) 58%);
  }

  body.catalog-page .related-card .catalog-card-media {
    display: block !important;
    opacity: 1 !important;
    transform: scale(1.04);
    filter: saturate(1.08) contrast(1.12) brightness(0.94);
    transition: transform 720ms var(--ease-signature);
  }

  body.catalog-page .related-card:hover .catalog-card-media,
  body.catalog-page .related-card:focus-visible .catalog-card-media {
    transform: scale(1.1);
  }

  body.catalog-page .related-card .catalog-card-media-scrim {
    display: block !important;
    background: linear-gradient(
      180deg,
      rgb(0 0 0 / 14%) 0%,
      rgb(0 0 0 / 24%) 48%,
      rgb(0 0 0 / 58%) 100%
    ) !important;
  }

  body.catalog-page .related-card .contributor-card-pattern {
    display: block !important;
    z-index: 2;
    color: var(--primary-foreground);
    mix-blend-mode: overlay;
    opacity: 0.05 !important;
  }

  body.catalog-page .related-card .catalog-card-badge {
    position: absolute;
    top: clamp(0.7rem, 0.9vw, 0.9rem);
    left: clamp(0.75rem, 1vw, 1rem);
    z-index: 10;
    max-width: calc(100% - clamp(1.5rem, 2vw, 2rem));
    border: 0;
    border-radius: 2px;
    background: var(--red);
    color: white;
    font-family: var(--font-body);
    font-size: 0.75rem !important;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page .related-card .catalog-card__content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    justify-content: flex-end;
    margin-top: auto !important;
    padding: clamp(0.75rem, 1vw, 1rem);
    padding-top: clamp(2.4rem, 3vw, 3rem);
    color: white;
    pointer-events: none;
    text-shadow: 0 2px 14px rgb(0 0 0 / 62%);
  }

  body.catalog-page .related-card .catalog-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: white;
    font-family: var(--font-heading);
    font-size: clamp(1.12rem, 7.25cqw, 1.85rem) !important;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.92;
    overflow-wrap: anywhere;
    text-transform: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.catalog-page .related-card .catalog-card__desc {
    display: -webkit-box;
    overflow: hidden;
    color: rgb(255 255 255 / 82%);
    font-family: var(--font-body);
    font-size: clamp(0.72rem, 0.72vw, 0.8rem) !important;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.25 !important;
    opacity: 1 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.catalog-page #cta {
    border-top: 1px solid var(--catalog-panel-border) !important;
    background:
      radial-gradient(
        circle at 14% 0%,
        color-mix(in oklch, var(--org), transparent 88%),
        transparent 34rem
      ),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--background), var(--card) 34%),
        var(--background)
      ) !important;
    color: var(--foreground) !important;
    padding-block: clamp(4rem, 8vw, 7rem) !important;
  }

  body.catalog-page #cta > div {
    display: grid;
    width: var(--catalog-page-rail);
    max-width: var(--catalog-page-rail) !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-inline: auto !important;
    padding-inline: 0 !important;
    text-align: left !important;
  }

  body.catalog-page #cta .inline-flex:not(.btn) {
    display: none !important;
  }

  body.catalog-page #cta h2 {
    max-width: 16ch;
    margin: 0 !important;
    color: var(--foreground) !important;
    font-size: clamp(2.2rem, 4.8vw, 4.4rem) !important;
    letter-spacing: -0.04em !important;
    line-height: 0.94 !important;
    text-transform: none !important;
  }

  body.catalog-page #cta h2 span[style] {
    color: var(--org-on-light) !important;
  }

  body.catalog-page #cta p {
    max-width: 58ch !important;
    margin: 1.1rem 0 0 !important;
    color: var(--text-m) !important;
    font-size: clamp(1rem, 1.35vw, 1.15rem) !important;
    line-height: 1.62 !important;
    text-align: left !important;
  }

  body.catalog-page #cta .btn {
    width: fit-content;
    min-width: 9rem;
    align-self: end;
    white-space: nowrap;
  }

  body.catalog-page #cta .flex.flex-stack {
    grid-column: 2;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    gap: 1rem !important;
    margin-top: 0.35rem;
  }

  body.catalog-page #cta .flex.flex-stack a:not(.btn) {
    color: var(--text-m) !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
    font-weight: 650;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.catalog-page #cta p.font-mono {
    display: none !important;
  }

  body.catalog-page #cta [data-cta-chip-copy],
  body.catalog-page #cta [data-cta-heading-main],
  body.catalog-page #cta [data-hero-primary-cta],
  body.catalog-page #cta [data-copy-key='ctaPricing'] {
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  @media (max-width: 1279px) {
    body.catalog-page > .fixed nav[aria-label='Primary'] {
      width: min(calc(100% - 2rem), 34rem) !important;
    }
  }

  @media (max-width: 1100px) {
    body.catalog-page .catalog-hero-shell {
      grid-template-columns: 1fr;
    }

    body.catalog-page .catalog-sidebar-shell {
      padding-top: 0;
    }

    body.catalog-page .app-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.catalog-page .app-stat:nth-child(2n) {
      border-right: 0;
    }

    body.catalog-page .app-stat:nth-child(n + 3) {
      border-top: 1px solid var(--catalog-panel-border);
    }
  }

  @media (max-width: 760px) {
    body.catalog-page {
      --catalog-page-rail: min(calc(100% - 2rem), 86rem);
    }

    body.catalog-page > .fixed.top-0.left-0.right-0.z-50 {
      padding-inline: 0.75rem;
    }

    body.catalog-page > .fixed nav[aria-label='Primary'] {
      width: 100% !important;
      height: 3.5rem !important;
    }

    body.catalog-page > .fixed nav[aria-label='Primary'] > div {
      padding-inline: 0.6rem !important;
    }

    body.catalog-page > .fixed nav[aria-label='Primary'] a[aria-label='ERP.AI home'] span {
      font-size: 0.95rem;
    }

    body.catalog-page > .fixed + div[style] {
      height: 4.75rem !important;
    }

    body.catalog-page .app-hero-copy {
      padding-top: 2.25rem;
    }

    body.catalog-page .app-hero-cta {
      align-items: stretch;
      flex-direction: column;
    }

    body.catalog-page .app-hero-cta .btn,
    body.catalog-page .hero-secondary {
      width: 100%;
      justify-content: center;
    }

    body.catalog-page .catalog-hero-shell {
      padding-bottom: 2.5rem;
    }

    body.catalog-page .app-stats {
      grid-template-columns: 1fr;
    }

    body.catalog-page .app-stat,
    body.catalog-page .app-stat:nth-child(2n) {
      border-right: 0;
    }

    body.catalog-page .app-stat:nth-child(n + 2) {
      border-top: 1px solid var(--catalog-panel-border);
    }

    body.catalog-page .loop-step {
      grid-template-columns: 1fr;
      gap: 0.8rem;
    }

    body.catalog-page [data-section='process'] .section-hero + div {
      grid-template-columns: 1fr;
    }

    body.catalog-page [data-section='process'] .loop-step {
      gap: 1rem;
      padding: 1.1rem;
    }

    body.catalog-page .loop-step .je-chip {
      grid-column: 1 / -1;
      max-width: 100%;
    }

    body.catalog-page .related-card {
      height: 15rem !important;
      flex-basis: min(84vw, 19rem) !important;
    }

    body.catalog-page #cta > div {
      grid-template-columns: 1fr;
      align-items: start;
    }

    body.catalog-page #cta .flex.flex-stack {
      grid-column: 1;
      flex-direction: column !important;
      align-items: stretch !important;
      width: 100%;
    }

    body.catalog-page #cta .btn {
      width: 100%;
      justify-content: center;
    }
  }

  /* -- Tacet explanatory note -------------------------------------------- *
     A ruled annotation with a dedicated information-icon gutter and one
     aligned prose column. Use for clarifications, billing bases, and policy
     invariants that support a section without becoming another card. */
  .tacet-info-note {
    --tacet-info-note-font-size: var(--text-note);

    display: grid;
    grid-template-columns: var(--space-4) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
    max-width: calc(var(--container-measure) + var(--space-4) + var(--space-6));
    margin: 0;
    padding-block: var(--space-4);
    border-block: 1px solid var(--border);
  }
  .tacet-info-note__icon {
    width: var(--space-4);
    height: var(--space-4);
    margin-block-start: calc(var(--space-1) / 2);
    color: var(--foreground);
  }
  .tacet-info-note__body {
    min-width: 0;
    max-width: var(--container-measure);
  }
  .tacet-info-note__heading,
  .tacet-info-note__description {
    font-size: var(--tacet-info-note-font-size);
  }
  .tacet-info-note__heading {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.4;
    text-wrap: balance;
  }
  .tacet-info-note__description {
    margin: var(--space-1) 0 0;
    color: var(--text-m);
    line-height: 1.45;
    text-wrap: pretty;
  }
  .tacet-info-note__description strong {
    color: var(--foreground);
    font-weight: 600;
  }

  /* -- Tacet boxed stat section --------------------------------------- *
     A full-bleed ruled section containing a four-cell content-rail definition
     band. Values lead visually while labels remain
     first in the accessible source order. */
  .tacet-stat-section {
    border-block: 1px solid var(--border);
    background: var(--background);
  }
  .tacet-stat-section__inner {
    width: var(--tacet-visible-rail);
    margin-inline: auto;
  }
  .tacet-stat-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    border-inline: 1px solid var(--border);
    background: var(--border);
  }
  .tacet-stat-band > div {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--background);
  }
  .tacet-stat-band dt {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--text-note);
    line-height: 1.4;
    text-wrap: pretty;
  }
  .tacet-stat-band dd {
    order: -1;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.95;
    text-wrap: nowrap;
  }
  @media (max-width: 52rem) {
    .tacet-stat-band {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 32rem) {
    .tacet-stat-band > div {
      padding: var(--space-4);
    }
  }
  @media (max-width: 22rem) {
    .tacet-stat-band {
      grid-template-columns: 1fr;
    }
  }

  /* -- Tacet credit pricing: /pricing (model 2026.08). The credit meter
     page in the site's light language: thesis + what-a-credit-buys, plan
     grid, headless promo, live estimator, rate card, packages, guardrails.
     No mono — the page-scoped token override retires it for the route;
     figures align via tabular-nums. Estimator: assets/js/calculator.js.
     Owns every .tacet-credit* class. */
  .tacet-pricing-page {
    --font-mono: var(--font-body);
  }
  .tacet-pricing-page .tacet-credit-section {
    background: var(--background);
    border-bottom: 1px solid var(--border);
  }
  .tacet-pricing-page .tacet-credit-hero-section {
    background: transparent;
    border-bottom: 0;
  }
  .tacet-pricing-page .tacet-credit-section--dark {
    background: var(--darker);
  }
  .tacet-pricing-page .tacet-credit-wrap {
    max-width: var(--tacet-section-max);
    margin: 0 auto;
    padding: var(--tacet-section-pad-y) var(--tacet-section-pad-x);
  }
  .tacet-pricing-page .tacet-credit-hero-section .tacet-credit-wrap {
    padding-block: clamp(var(--space-16), 12vh, calc(var(--space-16) + var(--space-16)));
  }
  .tacet-pricing-page .tacet-credit-eyebrow {
    margin: 0 0 var(--space-4);
  }
  .tacet-pricing-page .tacet-credit-h1 {
    max-width: 15ch;
    margin: 0 0 var(--space-6);
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: 700;
    letter-spacing: var(--tracking-hero);
    line-height: 1;
    text-transform: none;
    text-wrap: balance;
  }
  .tacet-pricing-page .tacet-credit-h2 {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--foreground);
    margin: 0 0 12px;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .tacet-pricing-page .tacet-credit-lede {
    max-width: 58ch;
    color: var(--text-m);
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0;
  }
  .tacet-pricing-page .tacet-credit-lede strong {
    color: var(--foreground);
    font-weight: 600;
  }
  .tacet-pricing-page .tacet-credit-fine {
    max-width: 72ch;
    margin: 0;
    color: var(--text-m);
    font-size: var(--text-meta);
    line-height: 1.55;
  }
  .tacet-pricing-page .tacet-credit-fine strong {
    color: var(--foreground);
    font-weight: 600;
  }
  .tacet-pricing-page .tacet-credit-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
    gap: 48px;
    align-items: start;
    container-type: inline-size;
  }
  @media (max-width: 880px) {
    .tacet-pricing-page .tacet-credit-hero {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }
  .tacet-pricing-page .tacet-credit-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: var(--space-6);
  }
  .tacet-pricing-page .tacet-credit-buys {
    background: var(--darker);
    border: 1px solid var(--border);
    padding: 20px 22px 12px;
  }
  .tacet-pricing-page .tacet-credit-buys__t {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-m);
    margin: 0 0 6px;
  }
  .tacet-pricing-page .tacet-credit-buys__icon {
    display: inline-flex;
    width: var(--space-5);
    height: var(--space-5);
    color: var(--red-on-light);
    flex: 0 0 auto;
  }
  .tacet-pricing-page .tacet-credit-buys__icon svg {
    width: 100%;
    height: 100%;
  }
  .tacet-pricing-page .tacet-credit-buys__one {
    font-size: 24px;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.02em;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
  }
  .tacet-pricing-page .tacet-credit-buys__one small {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-m);
  }
  .tacet-pricing-page .tacet-credit-buys ul {
    list-style: none;
    margin: 0;
    padding: 6px 0 0;
  }
  .tacet-pricing-page .tacet-credit-buys li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-m);
  }
  .tacet-pricing-page .tacet-credit-buys li:last-child {
    border-bottom: 0;
  }
  .tacet-pricing-page .tacet-credit-buys li .n {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--red-on-light);
    white-space: nowrap;
  }

  .tacet-pricing-page .tacet-credit-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 24px;
  }
  .tacet-pricing-page .tacet-credit-options article {
    background: var(--background);
    border: 1px solid var(--border);
    padding: 18px 20px;
  }
  .tacet-pricing-page .tacet-credit-options h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 8px;
  }
  .tacet-pricing-page .tacet-credit-options p {
    font-size: 13.5px;
    color: var(--text-m);
    line-height: 1.6;
    margin: 0;
  }
  .tacet-pricing-page .tacet-credit-options h3 a {
    display: inline-block;
    min-height: 24px;
  }
  .tacet-pricing-page .tacet-credit-options + .tacet-info-note {
    margin-block-start: var(--space-6);
  }

  .tacet-pricing-page .tacet-credit-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    gap: 24px;
    margin-top: 24px;
  }
  @media (max-width: 880px) {
    .tacet-pricing-page .tacet-credit-calc {
      grid-template-columns: 1fr;
    }
  }
  .tacet-pricing-page .tacet-credit-panel {
    background: var(--darker);
    border: 1px solid var(--border);
    padding: 22px 24px;
  }
  .tacet-pricing-page .tacet-credit-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    align-items: baseline;
    margin-bottom: 16px;
  }
  .tacet-pricing-page .tacet-credit-field label {
    font-size: 14px;
    color: var(--foreground);
    font-weight: 600;
  }
  .tacet-pricing-page .tacet-credit-field .hint {
    grid-column: 1 / 2;
    font-size: 12px;
    color: var(--text-m);
    margin: 0;
  }
  .tacet-pricing-page .tacet-credit-field output {
    font-size: 14px;
    font-weight: 700;
    color: var(--foreground);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-variant-numeric: tabular-nums;
  }
  .tacet-pricing-page .tacet-credit-field input[type='range'] {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 24px;
    margin: 8px 0 0;
    accent-color: var(--red);
  }
  .tacet-pricing-page .tacet-credit-verdict {
    font-size: 13.5px;
    color: var(--foreground);
    border: 1px solid var(--border);
    padding: 11px 13px;
    margin-bottom: 14px;
    background: var(--darker);
  }
  .tacet-pricing-page .tacet-credit-readout {
    border: 1px solid var(--border);
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--background);
  }
  .tacet-pricing-page .tacet-credit-readout .cap {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-m);
    margin: 0 0 6px;
  }
  .tacet-pricing-page .tacet-credit-readout .line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    font-size: 13.5px;
    border-bottom: 1px solid var(--border);
  }
  .tacet-pricing-page .tacet-credit-readout .line:last-child {
    border-bottom: 0;
  }
  .tacet-pricing-page .tacet-credit-readout .line:has(+ .line.is-total) {
    border-bottom: 0;
  }
  .tacet-pricing-page .tacet-credit-readout .k {
    color: var(--text-m);
  }
  .tacet-pricing-page .tacet-credit-readout .v {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--foreground);
  }
  .tacet-pricing-page .tacet-credit-readout .line.is-total {
    border-top: 1px solid var(--foreground);
    margin-top: 6px;
    padding-top: 11px;
  }
  .tacet-pricing-page .tacet-credit-readout .line.is-total .v {
    font-size: 22px;
    letter-spacing: -0.02em;
  }

  .tacet-pricing-page .tacet-credit-tblwrap {
    overflow-x: auto;
    margin-top: 16px;
    border: 1px solid var(--border);
    background: var(--background);
  }
  .tacet-pricing-page .tacet-credit-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
  }
  .tacet-pricing-page .tacet-credit-tbl th {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-m);
    text-align: left;
    font-weight: 600;
    padding: 11px 15px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .tacet-pricing-page .tacet-credit-tbl td {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border);
    vertical-align: baseline;
    color: var(--text-m);
  }
  .tacet-pricing-page .tacet-credit-tbl td:first-child {
    color: var(--foreground);
  }
  .tacet-pricing-page .tacet-credit-tbl tbody tr:last-child td {
    border-bottom: 0;
  }
  .tacet-pricing-page .tacet-credit-tbl td.r,
  .tacet-pricing-page .tacet-credit-tbl th.r {
    text-align: right;
    white-space: nowrap;
  }
  .tacet-pricing-page .tacet-credit-tbl tr.grp td {
    background: var(--darker);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-m);
    font-weight: 600;
    padding: 8px 15px;
  }
  .tacet-pricing-page .tacet-credit-tbl .sub {
    display: block;
    color: var(--text-m);
    font-size: 12px;
  }

  .tacet-pricing-page .tacet-credit-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 20px;
  }
  .tacet-pricing-page .tacet-credit-packs .pack {
    border: 1px solid var(--border);
    padding: 16px 18px;
    background: var(--darker);
  }
  .tacet-pricing-page .tacet-credit-packs .t {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-m);
    font-weight: 600;
    margin: 0;
  }
  .tacet-pricing-page .tacet-credit-packs .p {
    font-size: 22px;
    font-weight: 700;
    color: var(--foreground);
    margin: 6px 0 2px;
    font-variant-numeric: tabular-nums;
  }
  .tacet-pricing-page .tacet-credit-packs .d {
    font-size: 13px;
    color: var(--text-m);
    margin: 0;
  }
  .tacet-pricing-page .tacet-credit-packs .off {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--red-on-light);
    border: 1px solid var(--red);
    padding: 2px 8px;
  }

  .tacet-pricing-page .tacet-credit-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 20px;
  }
  .tacet-pricing-page .tacet-credit-cards .card {
    background: var(--background);
    border: 1px solid var(--border);
    padding: 18px 20px;
  }
  .tacet-pricing-page .tacet-credit-cards h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 8px;
  }
  .tacet-pricing-page .tacet-credit-cards p {
    font-size: 13.5px;
    color: var(--text-m);
    line-height: 1.6;
    margin: 0;
  }

  /* -- Swage product landing direction ----------------------------------- *
     The ERP Enterprise and CRM Platform anchors use the same category-aware
     editorial system as generated published-app pages. The modifier keeps
     this blue, ruled, product-first register isolated from other catalog
     routes while retaining their shared dashboard and section markup. */
  body.catalog-page.catalog-page--swage {
    --font-heading: 'Mozilla Headline', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Supreme', ui-sans-serif, system-ui, sans-serif;
    --font-body: var(--font-sans);
    --font-eyebrow: var(--font-sans);
    --swage-display-tracking: -0.025em;
    --swage-display-tracking-compact: -0.015em;
    --swage-type-micro: 0.75rem;
    --swage-type-caption: 0.8125rem;
    --swage-type-label: 0.875rem;
    --swage-type-ui: 0.9375rem;
    --swage-type-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --swage-page-frame-pad: clamp(1rem, 1.5vw, 1.5rem);
    --swage-section-pad-x: clamp(1.5rem, 4vw, 3rem);
    --swage-section-max: 90rem;
    --swage-max-content-rail: min(
      calc(
        100vw - var(--swage-page-frame-pad) - var(--swage-page-frame-pad) -
          var(--swage-section-pad-x) - var(--swage-section-pad-x)
      ),
      calc(var(--swage-section-max) - var(--swage-section-pad-x) - var(--swage-section-pad-x))
    );
    --swage-canvas: #fbfbf8;
    --swage-surface: #f4f5f2;
    --swage-elevated: #fff;
    --swage-ink: #17191d;
    --swage-muted: #67707c;
    --swage-faint: #9199a5;
    --swage-line: rgb(23 25 29 / 13%);
    --swage-line-strong: rgb(23 25 29 / 22%);
    --swage-grid: transparent;
    --swage-accent: #5356c2;
    --swage-accent-soft: #eeedfb;
    --swage-annotation: #ea580c;
    --swage-on-accent: #fff;
    --swage-shadow: 0 28px 80px rgb(17 25 39 / 11%);
    --swage-control-height: 3rem;
    --swage-control-height-compact: 2.75rem;
    --swage-control-radius: 0.625rem;
    --swage-panel-radius: 0.65rem;
    --swage-control-gap: 0.5rem;
    --swage-control-pad-x: 1rem;
    --swage-live-preview-max-height: 75rem;
    --swage-live-preview-scrollbar-track: color-mix(
      in srgb,
      var(--swage-surface),
      var(--swage-canvas) 45%
    );
    --swage-live-preview-scrollbar-thumb: color-mix(in srgb, var(--swage-muted), transparent 48%);
    --swage-live-preview-scrollbar-thumb-hover: color-mix(
      in srgb,
      var(--swage-muted),
      var(--swage-ink) 18%
    );
    background-color: var(--swage-canvas) !important;
    background-image: none !important;
    color: var(--swage-ink);
  }

  body.catalog-page.catalog-page--swage .erpnav,
  body.catalog-page.catalog-page--swage .crmnav {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    justify-content: stretch;
    padding: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    backdrop-filter: none;
    transition:
      background 180ms ease,
      border-color 180ms ease,
      backdrop-filter 180ms ease;
  }

  body.catalog-page.catalog-page--swage .erpnav::before,
  body.catalog-page.catalog-page--swage .crmnav::before {
    display: none;
  }

  body.catalog-page.catalog-page--swage .erpnav-inner,
  body.catalog-page.catalog-page--swage .crmnav-inner,
  body.catalog-page.catalog-page--swage .erpnav[data-scrolled='true'] .erpnav-inner,
  body.catalog-page.catalog-page--swage .crmnav[data-scrolled='true'] .crmnav-inner {
    width: min(calc(100% - 3rem), 90rem);
    max-width: min(calc(100% - 3rem), 90rem);
    height: 4.75rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
  }

  body.catalog-page.catalog-page--swage .erpnav-brand-wrap,
  body.catalog-page.catalog-page--swage .crmnav-brand-wrap {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    width: max-content;
    margin: 0;
    padding: 0;
    border: 0;
  }

  body.catalog-page.catalog-page--swage .erpnav-product::before,
  body.catalog-page.catalog-page--swage .crmnav-product::before,
  body.catalog-page.catalog-page--swage .ps-trigger::before {
    background: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage .erpnav a.erpnav-link,
  body.catalog-page.catalog-page--swage .erpnav button.erpnav-link,
  body.catalog-page.catalog-page--swage .crmnav a.crmnav-link,
  body.catalog-page.catalog-page--swage .crmnav button.crmnav-link {
    padding: 0.55rem 0.72rem;
    border-radius: 0.45rem;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage .erpnav a.erpnav-link:hover,
  body.catalog-page.catalog-page--swage .erpnav button.erpnav-link:hover,
  body.catalog-page.catalog-page--swage .crmnav a.crmnav-link:hover,
  body.catalog-page.catalog-page--swage .crmnav button.crmnav-link:hover {
    color: var(--swage-accent);
    background: var(--swage-accent-soft);
  }

  body.catalog-page.catalog-page--swage .erpnav a.erpnav-link.is-current,
  body.catalog-page.catalog-page--swage .crmnav a.crmnav-link.is-current {
    color: var(--swage-accent);
    background: transparent;
  }

  body.catalog-page.catalog-page--swage .erpnav-right .erpnav-cta,
  body.catalog-page.catalog-page--swage .crmnav-right .crmnav-cta {
    --swage-button-height: var(--swage-control-height-compact);
    --swage-button-pad-x: 0.75rem;
  }

  body.catalog-page.catalog-page--swage .erpnav-mobile-menu,
  body.catalog-page.catalog-page--swage .crmnav-mobile-menu {
    display: none;
  }

  body.catalog-page.catalog-page--swage .app-hero {
    padding-top: 4.75rem;
    border-bottom: 1px solid var(--swage-line);
    background-image: none !important;
  }

  body.catalog-page.catalog-page--swage .app-hero::before {
    display: none;
  }

  body.catalog-page.catalog-page--swage .app-hero-copy {
    padding: clamp(5rem, 10vw, 9rem) 1.5rem clamp(2rem, 4vw, 3.5rem);
    text-align: center !important;
  }

  body.catalog-page.catalog-page--swage .app-hero-copy-inner {
    width: min(100%, 48rem);
    max-width: 48rem;
    justify-items: center !important;
    gap: 1.35rem;
    text-align: center !important;
  }

  body.catalog-page.catalog-page--swage .app-hero-copy-inner > * {
    justify-self: center !important;
  }

  body.catalog-page.catalog-page--swage .app-hero-copy-inner .app-eyebrow {
    display: inline-flex;
    color: var(--swage-accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
  }

  body.catalog-page.catalog-page--swage .app-eyebrow .dot {
    background: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage .app-h1.app-h1--tight {
    max-width: 11ch;
    color: var(--swage-ink);
    font-size: clamp(3.4rem, 6.1vw, 6rem);
    font-weight: 700;
    letter-spacing: var(--swage-display-tracking);
    line-height: 1.02;
  }

  body.catalog-page.catalog-page--swage .app-h1-accent,
  body.catalog-page.catalog-page--swage .hl-yellow {
    color: var(--swage-accent) !important;
  }

  body.catalog-page.catalog-page--swage .hl-yellow {
    background: transparent !important;
  }

  body.catalog-page.catalog-page--swage .app-lead.app-lead--tight {
    max-width: 34rem;
    margin-inline: auto !important;
    color: var(--swage-muted);
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.6;
    text-align: center !important;
  }

  body.catalog-page.catalog-page--swage .app-hero-cta {
    justify-content: center !important;
    gap: 1rem;
  }

  body.catalog-page.catalog-page--swage .app-hero-cta .btn,
  body.catalog-page.catalog-page--swage #cta .btn {
    --btn-face: var(--swage-ink);
    --btn-fill-hover: var(--swage-accent);
    --btn-text: var(--swage-on-accent);
    --btn-border: var(--swage-accent);
    --btn-text-hover: var(--swage-on-accent);
    --btn-border-hover: var(--swage-ink);
    --btn-rail: var(--swage-accent);
    --btn-rail-hover: var(--swage-ink);

    border-radius: 0;
  }

  body.catalog-page.catalog-page--swage .hero-secondary {
    color: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage .cta-micro {
    display: flex !important;
    justify-content: center;
    color: var(--swage-muted);
  }

  body.catalog-page.catalog-page--swage .app-hero-preview {
    width: min(calc(100% - 3rem), 68rem);
    max-width: 68rem;
    padding: 0 0 clamp(4rem, 8vw, 7rem) !important;
  }

  body.catalog-page.catalog-page--swage .live-dashboard {
    border-color: var(--swage-line-strong);
    border-radius: 0.65rem;
    background: var(--swage-surface);
    box-shadow: var(--swage-shadow);
  }

  body.catalog-page.catalog-page--swage .app-trust-strip {
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.5rem;
  }

  body.catalog-page.catalog-page--swage .app-trust-strip .ts-item {
    padding: 0.47rem 0.6rem;
    border: 1px solid var(--swage-line);
    border-radius: 999px;
    color: var(--swage-muted);
    background: var(--swage-surface);
    font-size: 0.68rem;
    font-weight: 600;
  }

  body.catalog-page.catalog-page--swage .ts-tick {
    display: none;
  }

  body.catalog-page.catalog-page--swage .app-stats-band {
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage .app-stats {
    width: min(calc(100% - 3rem), 72rem);
    max-width: 72rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.catalog-page.catalog-page--swage .app-stat {
    min-height: 11rem;
    padding: 2rem;
    border-color: var(--swage-line);
  }

  body.catalog-page.catalog-page--swage .app-stat:nth-child(3n + 1) {
    border-left: 0;
  }

  body.catalog-page.catalog-page--swage .app-stat .eyebrow {
    color: var(--swage-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body.catalog-page.catalog-page--swage .app-stat .v {
    color: var(--swage-ink);
    font-size: clamp(2.6rem, 4vw, 4.5rem);
    font-weight: 700;
    letter-spacing: var(--swage-display-tracking);
    line-height: 0.95;
  }

  body.catalog-page.catalog-page--swage .app-stat .l {
    color: var(--swage-accent);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  body.catalog-page.catalog-page--swage .app-stat .sub {
    color: var(--swage-muted);
    font-size: 0.78rem;
  }

  body.catalog-page.catalog-page--swage .app-section,
  body.catalog-page.catalog-page--swage .app-bg-paper,
  body.catalog-page.catalog-page--swage .app-bg-dim,
  body.catalog-page.catalog-page--swage .app-bg-warm,
  body.catalog-page.catalog-page--swage .app-bg-cream,
  body.catalog-page.catalog-page--swage .app-bg-grid,
  body.catalog-page.catalog-page--swage .app-bg-hatch {
    border-top: 0;
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-canvas) !important;
    background-image: none !important;
  }

  body.catalog-page.catalog-page--swage .app-section:nth-of-type(even) {
    background: var(--swage-surface) !important;
  }

  body.catalog-page.catalog-page--swage .section-hero .sh-chip {
    display: inline-flex;
    color: var(--swage-accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
  }

  body.catalog-page.catalog-page--swage .section-hero .app-h2,
  body.catalog-page.catalog-page--swage .app-h2 {
    max-width: 12ch;
    color: var(--swage-ink);
    font-size: clamp(2.55rem, 4.7vw, 5rem);
    font-weight: 700;
    letter-spacing: var(--swage-display-tracking);
    line-height: 1.02;
  }

  body.catalog-page.catalog-page--swage .app-italic {
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    font-style: normal;
    line-height: 1.65;
  }

  body.catalog-page.catalog-page--swage .grid-cards,
  body.catalog-page.catalog-page--swage .loop-step,
  body.catalog-page.catalog-page--swage .je-chip,
  body.catalog-page.catalog-page--swage .mockup,
  body.catalog-page.catalog-page--swage details.faq-item {
    border-color: var(--swage-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* The catalogue pages predate Swage and contain several dense, bespoke
     content systems. Recompose those systems here rather than treating the
     top of the document as a separate landing page: every rail below uses
     the same cool paper, blue signal, and structural divider vocabulary. */
  body.catalog-page.catalog-page--swage .app-section > div {
    width: min(calc(100% - 3rem), 72rem);
    max-width: 72rem;
  }

  body.catalog-page.catalog-page--swage .section-hero {
    max-width: 48rem;
    gap: 0.8rem;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  }

  body.catalog-page.catalog-page--swage .section-hero .sh-num {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-size: 0.66rem;
  }

  body.catalog-page.catalog-page--swage .hl-circle {
    padding: 0;
    color: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage .hl-circle::before {
    display: none;
  }

  body.catalog-page.catalog-page--swage .grid-cards {
    overflow: hidden;
    border: 1px solid var(--swage-line);
    border-radius: 0.65rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--swage-surface);
    gap: 1px;
  }

  body.catalog-page.catalog-page--swage .pp-card,
  body.catalog-page.catalog-page--swage .pp-card[data-icon] {
    min-height: 17.5rem;
    padding: 1.5rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--swage-surface) !important;
    box-shadow: none !important;
    transition:
      background 160ms ease,
      color 160ms ease !important;
  }

  body.catalog-page.catalog-page--swage a.pp-card:hover,
  body.catalog-page.catalog-page--swage a.pp-card:focus-visible {
    outline: 0;
    background: var(--swage-accent-soft) !important;
  }

  body.catalog-page.catalog-page--swage .pp-card[data-icon]::before {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
    border: 1px solid var(--swage-line-strong);
    border-radius: 0.35rem;
    background: var(--swage-accent-soft);
    color: var(--swage-accent);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  body.catalog-page.catalog-page--swage .pp-card--mono-inline[data-icon]::before {
    position: static;
    margin-right: 0.6rem !important;
    margin-bottom: 0 !important;
    vertical-align: middle;
  }

  body.catalog-page.catalog-page--swage .pp-card .card-tag {
    color: var(--swage-accent) !important;
    font-family: var(--font-mono);
    font-size: 0.68rem !important;
    font-weight: 700;
    letter-spacing: 0.09em !important;
  }

  body.catalog-page.catalog-page--swage .pp-card .card-title {
    color: var(--swage-ink) !important;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;
    font-weight: 700;
    letter-spacing: var(--swage-display-tracking-compact) !important;
    line-height: 1.08;
  }

  body.catalog-page.catalog-page--swage .pp-card .card-divider {
    display: block;
    margin-block: 1rem !important;
    background: var(--swage-line);
  }

  body.catalog-page.catalog-page--swage .pp-card .card-body {
    color: var(--swage-muted) !important;
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.55;
  }

  body.catalog-page.catalog-page--swage .pp-card [style*='accent-yellow'] {
    background: var(--swage-accent-soft) !important;
    color: var(--swage-accent) !important;
  }

  body.catalog-page.catalog-page--swage .pp-card [style*='red-on-light'] {
    color: var(--swage-accent) !important;
  }

  body.catalog-page.catalog-page--swage [data-section='process'] .section-hero + div {
    display: block;
  }

  body.catalog-page.catalog-page--swage [data-section='process'] .loop-step {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(14rem, 0.45fr);
    gap: 1.5rem;
    padding: 1.65rem 0;
    border: 0 !important;
    border-top: 1px solid var(--swage-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.catalog-page.catalog-page--swage [data-section='process'] .loop-step::before {
    display: none;
  }

  body.catalog-page.catalog-page--swage [data-section='process'] .loop-step .num {
    display: block;
    color: var(--swage-accent);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  body.catalog-page.catalog-page--swage [data-section='process'] .loop-step .body h3,
  body.catalog-page.catalog-page--swage [data-section='process'] .loop-step .body h4 {
    max-width: none;
    color: var(--swage-ink);
    font-size: 1.15rem;
  }

  body.catalog-page.catalog-page--swage [data-section='process'] .je-chip {
    padding: 0.85rem;
    border-radius: 0.35rem !important;
    background: var(--swage-surface) !important;
  }

  body.catalog-page.catalog-page--swage .cta-band {
    border: 1px solid var(--swage-line-strong) !important;
    border-radius: 0.65rem;
    background: var(--swage-ink) !important;
    box-shadow: none !important;
  }

  body.catalog-page.catalog-page--swage .cta-band .cta-band-hd {
    color: var(--swage-on-accent);
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage .cta-band .cta-band-sub {
    color: color-mix(in srgb, var(--swage-on-accent), transparent 28%);
  }

  body.catalog-page.catalog-page--swage .cta-band .btn {
    --btn-face: var(--swage-on-accent);
    --btn-fill-hover: var(--swage-accent);
    --btn-text: var(--swage-ink);
    --btn-border: var(--swage-on-accent);
    --btn-text-hover: var(--swage-on-accent);
    --btn-border-hover: var(--swage-on-accent);
    --btn-rail: var(--swage-accent);
    --btn-rail-hover: var(--swage-on-accent);
  }

  body.catalog-page.catalog-page--swage .mockup {
    overflow: hidden;
    border: 1px solid var(--swage-line-strong) !important;
    border-radius: 0.65rem !important;
    background: var(--swage-surface) !important;
  }

  body.catalog-page.catalog-page--swage .mockup-bar,
  body.catalog-page.catalog-page--swage .mockup-status,
  body.catalog-page.catalog-page--swage .mockup-caption {
    border-color: var(--swage-line) !important;
    background: var(--swage-canvas);
    color: var(--swage-muted);
    font-family: var(--font-mono);
  }

  body.catalog-page.catalog-page--swage .mockup-bar .left .liveDot {
    border-radius: 50%;
    background: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage .m-tbl th,
  body.catalog-page.catalog-page--swage .m-tbl td,
  body.catalog-page.catalog-page--swage .m-kpi .cell {
    border-color: var(--swage-line) !important;
  }

  body.catalog-page.catalog-page--swage .m-tbl tr.parent td,
  body.catalog-page.catalog-page--swage .m-tbl tr.total td {
    background: var(--swage-accent-soft);
  }

  body.catalog-page.catalog-page--swage .compare-table,
  body.catalog-page.catalog-page--swage .integ-grid {
    overflow: hidden;
    border-color: var(--swage-line) !important;
    border-radius: 0.65rem;
  }

  body.catalog-page.catalog-page--swage .compare-row,
  body.catalog-page.catalog-page--swage .compare-cell,
  body.catalog-page.catalog-page--swage .integ-cell {
    border-color: var(--swage-line) !important;
  }

  body.catalog-page.catalog-page--swage .compare-head .compare-cell,
  body.catalog-page.catalog-page--swage .compare-head .compare-cell--new {
    background: var(--swage-accent-soft);
    color: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage .compare-cell--new,
  body.catalog-page.catalog-page--swage .integ-arrow,
  body.catalog-page.catalog-page--swage .compare-tick {
    color: var(--swage-accent) !important;
  }

  body.catalog-page.catalog-page--swage .ttv {
    border-color: var(--swage-line);
    border-radius: 0.65rem;
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage .ttv-hd,
  body.catalog-page.catalog-page--swage .ttv-cell,
  body.catalog-page.catalog-page--swage .ttv-list li {
    border-color: var(--swage-line) !important;
  }

  body.catalog-page.catalog-page--swage .ttv-cell .ttv-when,
  body.catalog-page.catalog-page--swage .ttv-cell .ttv-h-num,
  body.catalog-page.catalog-page--swage .ttv-tick {
    color: var(--swage-accent) !important;
  }

  body.catalog-page.catalog-page--swage details.faq-item {
    padding: 1.2rem 0;
    background: transparent;
  }

  body.catalog-page.catalog-page--swage details.faq-item summary {
    color: var(--swage-ink);
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage details.faq-item summary::after {
    color: var(--swage-accent);
  }

  @media (max-width: 68.75rem) {
    body.catalog-page.catalog-page--swage .grid-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 40rem) {
    body.catalog-page.catalog-page--swage .grid-cards {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage [data-section='process'] .loop-step {
      grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    body.catalog-page.catalog-page--swage [data-section='process'] .je-chip {
      grid-column: 2;
    }
  }

  @media (max-width: 68.75rem) {
    body.catalog-page.catalog-page--swage .app-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.catalog-page.catalog-page--swage .app-stat:nth-child(3n + 1) {
      border-left: 1px solid var(--swage-line);
    }

    body.catalog-page.catalog-page--swage .app-stat:nth-child(2n + 1) {
      border-left: 0;
    }
  }

  @media (max-width: 47.5rem) {
    body.catalog-page.catalog-page--swage .erpnav-inner,
    body.catalog-page.catalog-page--swage .crmnav-inner,
    body.catalog-page.catalog-page--swage .erpnav[data-scrolled='true'] .erpnav-inner,
    body.catalog-page.catalog-page--swage .crmnav[data-scrolled='true'] .crmnav-inner {
      width: min(calc(100% - 1.5rem), 90rem);
      max-width: min(calc(100% - 1.5rem), 90rem);
      height: 4.25rem;
    }

    body.catalog-page.catalog-page--swage .erpnav-left,
    body.catalog-page.catalog-page--swage .crmnav-left {
      min-width: 0;
    }

    body.catalog-page.catalog-page--swage .erpnav-brand-wrap,
    body.catalog-page.catalog-page--swage .crmnav-brand-wrap {
      margin-right: 0;
      padding-right: 0;
      border-right: 0;
    }

    body.catalog-page.catalog-page--swage .erpnav a.erpnav-link,
    body.catalog-page.catalog-page--swage .erpnav button.erpnav-link,
    body.catalog-page.catalog-page--swage .crmnav a.crmnav-link,
    body.catalog-page.catalog-page--swage .crmnav button.crmnav-link {
      display: none;
    }

    body.catalog-page.catalog-page--swage .erpnav-right .erpnav-cta,
    body.catalog-page.catalog-page--swage .crmnav-right .crmnav-cta {
      min-height: 2.5rem;
      padding-inline: 0.75rem !important;
      font-size: 0.72rem;
    }

    body.catalog-page.catalog-page--swage .app-hero-copy {
      padding: 3.75rem 0.75rem 3.5rem;
    }

    body.catalog-page.catalog-page--swage .app-h1.app-h1--tight {
      max-width: 100%;
      font-size: clamp(2.75rem, 13vw, 4rem);
      line-height: 1.08;
    }

    body.catalog-page.catalog-page--swage .app-hero-cta {
      flex-direction: row;
      align-items: center;
    }

    body.catalog-page.catalog-page--swage .app-hero-cta .btn,
    body.catalog-page.catalog-page--swage .hero-secondary {
      width: auto;
    }

    body.catalog-page.catalog-page--swage .app-hero-preview,
    body.catalog-page.catalog-page--swage .app-stats {
      width: min(calc(100% - 1.5rem), 72rem);
    }

    body.catalog-page.catalog-page--swage .app-stats {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage .app-stat,
    body.catalog-page.catalog-page--swage .app-stat:nth-child(3n + 1),
    body.catalog-page.catalog-page--swage .app-stat:nth-child(2n + 1) {
      min-height: 0;
      border-top: 1px solid var(--swage-line);
      border-left: 0;
    }

    body.catalog-page.catalog-page--swage .app-stat:first-child {
      border-top: 0;
    }

    body.catalog-page.catalog-page--swage .section-hero .app-h2,
    body.catalog-page.catalog-page--swage .app-h2 {
      max-width: 100%;
      font-size: clamp(2.35rem, 11vw, 3.5rem);
      line-height: 1.1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.catalog-page.catalog-page--swage .btn,
    body.catalog-page.catalog-page--swage .hero-secondary {
      transition: none !important;
      animation: none !important;
    }
  }

  /* Swage product chrome: the page reference keeps the navigation quiet at
     rest. Brand and action stay at the perimeter; the information architecture
     is centered, with the feature disclosure retaining the full sub-page map. */
  body.catalog-page.catalog-page--swage .erpnav[data-scrolled='true'],
  body.catalog-page.catalog-page--swage .crmnav[data-scrolled='true'] {
    border-bottom-color: var(--swage-line);
    background: color-mix(in srgb, var(--swage-canvas), transparent 6%);
    backdrop-filter: blur(1.125rem);
  }

  body.catalog-page.catalog-page--swage .erpnav-inner,
  body.catalog-page.catalog-page--swage .crmnav-inner {
    --swage-nav-rest-inset: clamp(0rem, calc(50vw - 38.5rem), 8rem);

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  body.catalog-page.catalog-page--swage .erpnav-left,
  body.catalog-page.catalog-page--swage .crmnav-left {
    display: contents;
  }

  body.catalog-page.catalog-page--swage .erpnav-product-label,
  body.catalog-page.catalog-page--swage .crmnav-product-label {
    color: var(--swage-ink);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 650;
  }

  body.catalog-page.catalog-page--swage .erpnav-center,
  body.catalog-page.catalog-page--swage .crmnav-center {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
  }

  body.catalog-page.catalog-page--swage .erpnav-right,
  body.catalog-page.catalog-page--swage .crmnav-right {
    grid-column: 3;
    justify-self: end;
  }

  /* This is the Core Banking preview annotation: one animated label and
     arrow above the real shell, never a pill, traffic light, or second chrome. */
  body.catalog-page.catalog-page--swage .swage-live-preview {
    position: relative;
    width: 100%;
  }

  body.catalog-page.catalog-page--swage .swage-live-preview-annotation {
    position: absolute;
    z-index: 3;
    top: -3rem;
    right: 7%;
    width: clamp(13rem, 21vw, 17rem);
    height: auto;
    margin: 0;
    color: var(--swage-annotation, #ea580c);
    opacity: 0;
    pointer-events: none;
    transform: rotate(-2deg);
    animation: swage-annotation-arrive 0.7s 1.4s ease-out forwards;
  }

  body.catalog-page.catalog-page--swage .swage-live-preview-annotation svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  body.catalog-page.catalog-page--swage .swage-live-preview-annotation text {
    fill: currentColor;
    font: 700 25px/1 var(--font-heading);
    letter-spacing: -0.025em;
  }

  body.catalog-page.catalog-page--swage .swage-live-preview-annotation path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.catalog-page.catalog-page--swage .swage-live-preview-annotation .swage-annotation__line {
    stroke-dasharray: 245;
    stroke-dashoffset: 245;
    animation: swage-annotation-draw 2.3s 2s cubic-bezier(0.45, 0, 0.35, 1) infinite;
  }

  body.catalog-page.catalog-page--swage .swage-live-preview-annotation .swage-annotation__tip {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: swage-annotation-tip 2.3s 2s cubic-bezier(0.45, 0, 0.35, 1) infinite;
  }

  @keyframes swage-annotation-arrive {
    to {
      opacity: 1;
    }
  }

  @keyframes swage-annotation-draw {
    0%,
    8% {
      stroke-dashoffset: 245;
      opacity: 0;
    }
    12% {
      opacity: 1;
    }
    65%,
    82% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 0;
    }
  }

  @keyframes swage-annotation-tip {
    0%,
    45% {
      stroke-dashoffset: 32;
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    65%,
    82% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 0;
    }
  }

  body.catalog-page.catalog-page--swage .live-dashboard .ld-tabbar {
    justify-content: flex-start;
    min-height: 2.6rem;
    padding-inline: 1rem;
    border-color: var(--swage-line);
    background: var(--swage-canvas);
  }

  body.catalog-page.catalog-page--swage .live-dashboard .ld-tabbar .ld-url {
    margin-left: 0;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage .live-dashboard .ld-live,
  body.catalog-page.catalog-page--swage .live-dashboard .ld-preview-pill,
  body.catalog-page.catalog-page--swage .live-dashboard .dot {
    display: none !important;
  }

  body.catalog-page.catalog-page--swage .font-heading.uppercase,
  body.catalog-page.catalog-page--swage .font-mono.uppercase,
  body.catalog-page.catalog-page--swage .text-label.uppercase {
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  /* The final conversion point now behaves like the Core Banking closer: a
     calm, centered installation decision, not a dark marketing billboard. */
  body.catalog-page.catalog-page--swage #cta {
    border-color: var(--swage-line) !important;
    background-color: var(--swage-surface) !important;
    background-image: none !important;
    color: var(--swage-ink) !important;
  }

  body.catalog-page.catalog-page--swage #cta > div {
    max-width: 42rem;
  }

  body.catalog-page.catalog-page--swage #cta h2,
  body.catalog-page.catalog-page--swage #cta h2 span {
    color: var(--swage-ink) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: var(--swage-display-tracking) !important;
    text-transform: none !important;
  }

  body.catalog-page.catalog-page--swage #cta h2 span {
    color: var(--swage-accent) !important;
  }

  body.catalog-page.catalog-page--swage #cta .inline-flex {
    border-color: var(--swage-line) !important;
    background: var(--swage-surface) !important;
    color: var(--swage-accent) !important;
    font-family: var(--font-body);
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage #cta p {
    color: var(--swage-muted) !important;
  }

  body.catalog-page.catalog-page--swage #cta .btn--ghost {
    --btn-text: var(--swage-ink);
    --btn-text-hover: var(--swage-ink);
    --btn-rail: var(--swage-accent);
    --btn-rail-hover: var(--swage-accent);
  }

  /* The Swage closer remains a quiet product action while inheriting the
     canonical button geometry and state engine. */
  body.catalog-page.catalog-page--swage #main-content > #cta.swage-final-cta {
    display: grid;
    place-items: center;
    min-height: min(44rem, 78vh);
    padding: clamp(5rem, 11vw, 9rem) 1.5rem;
    border-block: 1px solid var(--swage-line) !important;
  }

  body.catalog-page.catalog-page--swage #cta.swage-final-cta > .swage-final-cta__inner {
    display: block !important;
    width: min(100%, 43rem) !important;
    max-width: 43rem !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    text-align: center !important;
  }

  body.catalog-page.catalog-page--swage .swage-final-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    margin-bottom: 1.5rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--swage-line-strong);
    border-radius: 999px;
    background: color-mix(in oklch, var(--swage-surface), transparent 7%);
    color: var(--swage-accent);
    font-family: var(--font-body);
    font-size: var(--swage-type-label);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  body.catalog-page.catalog-page--swage #cta.swage-final-cta h2 {
    max-width: 13ch;
    margin: 0 auto !important;
    color: var(--swage-ink) !important;
    font-size: clamp(2.65rem, 6vw, 5.4rem);
    font-weight: 750 !important;
    letter-spacing: var(--swage-display-tracking) !important;
    line-height: 0.91;
  }

  body.catalog-page.catalog-page--swage #cta.swage-final-cta h2 span {
    display: block;
    margin-top: 0.08em;
    color: var(--swage-accent) !important;
  }

  body.catalog-page.catalog-page--swage #cta.swage-final-cta p {
    max-width: 56ch;
    margin: 1.5rem auto 0 !important;
    color: var(--swage-muted) !important;
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.12rem);
    line-height: 1.6;
    text-align: center !important;
  }

  body.catalog-page.catalog-page--swage .swage-final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.25rem;
  }

  body.catalog-page.catalog-page--swage #cta .swage-button::before,
  body.catalog-page.catalog-page--swage #cta .swage-button::after {
    content: none !important;
  }

  body.catalog-page.catalog-page--swage #cta .swage-final-cta__note {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--swage-line);
    font-size: var(--swage-type-label);
  }

  .app-modal-related-track {
    display: grid;
    grid-auto-columns: minmax(15.5rem, 18rem);
    grid-auto-flow: column;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.75rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .app-modal-related-track::-webkit-scrollbar {
    display: none;
  }

  .app-modal-related-card {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border, var(--border));
    border-radius: var(--radius-lg);
    background: var(--tacet-panel-cell, var(--background));
    color: var(--foreground);
    scroll-snap-align: start;
    text-decoration: none;
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      background var(--duration-fast) var(--ease-standard);
  }

  .app-modal-related-card:hover {
    border-color: color-mix(in oklch, var(--foreground), transparent 72%);
    background: color-mix(
      in oklch,
      var(--tacet-panel-cell, var(--background)),
      var(--foreground) 3%
    );
  }

  .app-modal-related-card:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  .app-modal-related-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: color-mix(in oklch, var(--foreground), var(--background) 86%);
  }

  .app-modal-related-card__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(13 12 10 / 42%), rgb(13 12 10 / 0%));
    content: '';
  }

  .app-modal-related-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .app-modal-related-card__body {
    display: grid;
    gap: 0.45rem;
    padding: 0.95rem;
  }

  .app-modal-related-card__meta {
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 620;
    line-height: 1.2;
  }

  .app-modal-related-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 860;
    line-height: 1.02;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .app-modal-related-card__desc {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.86rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Cross-sell keeps the previous page-paper surface as a distinct closer.
     Elevated cards and the edge reveal provide the hierarchy; media never
     receives a dark hover scrim or floating action. */
  body.catalog-page.catalog-page--swage .swage-related-apps {
    border-top: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__inner {
    width: min(calc(100% - 3rem), 84rem);
    margin: 0 auto;
    padding-block: clamp(4.5rem, 8vw, 7rem);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.25rem;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__eyebrow {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--swage-accent);
    font-family: var(--font-body);
    font-size: var(--swage-type-label);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps h2 {
    max-width: 16ch;
    margin: 0;
    color: var(--swage-ink);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.75rem);
    font-weight: 720;
    letter-spacing: var(--swage-display-tracking);
    line-height: 0.95;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__header p {
    max-width: 54ch;
    margin: 1rem 0 0;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: var(--swage-type-body);
    line-height: 1.6;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--swage-line-strong);
    border-radius: 0.45rem;
    color: var(--swage-ink);
    font-family: var(--font-body);
    font-size: var(--swage-type-ui);
    font-weight: 700;
    text-decoration: none;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__all:hover,
  body.catalog-page.catalog-page--swage .swage-related-apps__all:focus-visible {
    border-color: var(--swage-accent);
    color: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__rail {
    position: relative;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__track.app-modal-related-track {
    grid-auto-columns: minmax(20rem, 26rem);
    gap: 1rem;
    padding: 0 0 0.85rem;
    scroll-padding-inline: 0;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__card {
    border-color: var(--swage-line-strong);
    border-radius: 0.65rem;
    background: var(--swage-elevated);
    box-shadow: none;
    transform: translateY(0);
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__card:hover,
  body.catalog-page.catalog-page--swage .swage-related-apps__card:focus-visible {
    border-color: var(--swage-accent);
    background: var(--swage-elevated);
    box-shadow:
      0 1px 2px rgb(17 25 39 / 7%),
      0 0.625rem 1.5rem rgb(17 25 39 / 8%);
    transform: translateY(-0.125rem);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__card .app-modal-related-card__media {
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage
    .swage-related-apps__card
    .app-modal-related-card__media::after {
    content: none;
  }

  body.catalog-page.catalog-page--swage
    .swage-related-apps__card
    .app-modal-related-card__media
    img {
    filter: saturate(0.9) contrast(1.02) brightness(0.94);
    transition:
      filter 240ms ease,
      transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.catalog-page.catalog-page--swage
    .swage-related-apps__card:hover
    .app-modal-related-card__media
    img,
  body.catalog-page.catalog-page--swage
    .swage-related-apps__card:focus-visible
    .app-modal-related-card__media
    img {
    filter: saturate(1) contrast(1.02) brightness(1);
    transform: scale(1.03);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__card .app-modal-related-card__body {
    min-height: 12.75rem;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.65rem;
    padding: 1.1rem 1.2rem 1.2rem;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__card .app-modal-related-card__meta {
    color: var(--swage-muted);
    font-size: var(--swage-type-label);
    font-weight: 650;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__card .app-modal-related-card__title {
    color: var(--swage-ink);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 780;
    letter-spacing: var(--swage-display-tracking-compact);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__card .app-modal-related-card__desc {
    color: var(--swage-muted);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-line-clamp: 2;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__preview {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.25rem;
    color: var(--swage-muted);
    font-family: var(--font-body);
    font-size: var(--swage-type-caption);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: color 160ms ease;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__preview-icon {
    width: 1rem;
    height: 1rem;
    color: currentcolor;
    stroke-width: 2.5;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  body.catalog-page.catalog-page--swage
    .swage-related-apps__card:hover
    .swage-related-apps__preview,
  body.catalog-page.catalog-page--swage
    .swage-related-apps__card:focus-visible
    .swage-related-apps__preview {
    color: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage
    .swage-related-apps__card:hover
    .swage-related-apps__preview-icon,
  body.catalog-page.catalog-page--swage
    .swage-related-apps__card:focus-visible
    .swage-related-apps__preview-icon {
    transform: rotate(-45deg);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__scroll {
    position: absolute;
    top: 0;
    bottom: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(5.75rem, 8vw, 8.5rem);
    padding-inline: clamp(0.7rem, 1vw, 1.1rem);
    border: 0;
    color: var(--swage-ink);
    cursor: pointer;
    opacity: 0.56;
    text-shadow: none;
    transition:
      opacity 180ms ease,
      width 220ms ease,
      color 180ms ease,
      background 180ms ease;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__scroll[data-dir='left'] {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(
      90deg,
      var(--swage-surface) 0%,
      color-mix(in oklch, var(--swage-surface), transparent 22%) 48%,
      color-mix(in oklch, var(--swage-surface), transparent 100%) 100%
    );
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__scroll[data-dir='right'] {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(
      270deg,
      var(--swage-surface) 0%,
      color-mix(in oklch, var(--swage-surface), transparent 22%) 48%,
      color-mix(in oklch, var(--swage-surface), transparent 100%) 100%
    );
  }

  html[data-catalog-theme='dark']
    body.catalog-page.catalog-page--swage
    .swage-related-apps__scroll[data-dir='left'],
  html.dark body.catalog-page.catalog-page--swage .swage-related-apps__scroll[data-dir='left'] {
    background: linear-gradient(
      90deg,
      var(--swage-surface) 0%,
      color-mix(in srgb, var(--swage-surface), transparent 22%) 48%,
      color-mix(in srgb, var(--swage-surface), transparent 100%) 100%
    );
  }

  html[data-catalog-theme='dark']
    body.catalog-page.catalog-page--swage
    .swage-related-apps__scroll[data-dir='right'],
  html.dark body.catalog-page.catalog-page--swage .swage-related-apps__scroll[data-dir='right'] {
    background: linear-gradient(
      270deg,
      var(--swage-surface) 0%,
      color-mix(in srgb, var(--swage-surface), transparent 22%) 48%,
      color-mix(in srgb, var(--swage-surface), transparent 100%) 100%
    );
  }

  body.catalog-page.catalog-page--swage
    .swage-related-apps__rail:hover
    .swage-related-apps__scroll:not([disabled]),
  body.catalog-page.catalog-page--swage
    .swage-related-apps__rail:focus-within
    .swage-related-apps__scroll:not([disabled]) {
    width: clamp(6.25rem, 9vw, 9.25rem);
    opacity: 0.98;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__scroll:hover {
    opacity: 1;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__scroll:focus-visible {
    color: var(--swage-accent);
    opacity: 1;
    outline: none;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__scroll[disabled],
  body.catalog-page.catalog-page--swage .swage-related-apps__scroll[hidden] {
    display: none;
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__scroll svg {
    width: clamp(2.45rem, 3.2vw, 3rem) !important;
    height: clamp(2.45rem, 3.2vw, 3rem) !important;
    padding: 0.66rem;
    border: 1px solid var(--swage-line-strong);
    border-radius: 999px;
    color: currentcolor;
    background: color-mix(in oklch, var(--swage-elevated), transparent 7%);
    box-shadow:
      0 1px 2px rgb(23 32 51 / 8%),
      0 0.5rem 1.25rem rgb(23 32 51 / 10%);
    filter: none;
    stroke-width: 2.25;
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__scroll:hover svg {
    background: var(--swage-elevated);
    box-shadow:
      0 1px 2px rgb(23 32 51 / 10%),
      0 0.75rem 1.75rem rgb(23 32 51 / 14%);
    transform: translateX(0.1rem) scale(1.03);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__scroll[data-dir='left']:hover svg {
    transform: translateX(-0.1rem) scale(1.03);
  }

  body.catalog-page.catalog-page--swage .swage-related-apps__scroll:focus-visible svg {
    border-color: var(--swage-accent);
    background: var(--swage-elevated);
    box-shadow:
      0 0 0 2px var(--swage-surface),
      0 0 0 4px var(--swage-accent),
      0 0.75rem 1.75rem rgb(23 32 51 / 14%);
    transform: translateX(0.1rem) scale(1.03);
  }

  body.catalog-page.catalog-page--swage
    .swage-related-apps__scroll[data-dir='left']:focus-visible
    svg {
    transform: translateX(-0.1rem) scale(1.03);
  }

  @media (max-width: 48rem) {
    body.catalog-page.catalog-page--swage .swage-related-apps__inner {
      width: min(calc(100% - 2rem), 84rem);
    }

    body.catalog-page.catalog-page--swage .swage-related-apps__header {
      align-items: start;
      flex-direction: column;
      gap: 1.25rem;
    }

    body.catalog-page.catalog-page--swage .swage-related-apps__track.app-modal-related-track {
      grid-auto-columns: minmax(17rem, 82vw);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.catalog-page.catalog-page--swage .swage-related-apps__card,
    body.catalog-page.catalog-page--swage
      .swage-related-apps__card
      .app-modal-related-card__media
      img,
    body.catalog-page.catalog-page--swage .swage-related-apps__preview-icon,
    body.catalog-page.catalog-page--swage .swage-related-apps__scroll,
    body.catalog-page.catalog-page--swage .swage-related-apps__scroll svg {
      transition: none;
      transform: none;
    }

    body.catalog-page.catalog-page--swage .swage-related-apps__card:hover,
    body.catalog-page.catalog-page--swage .swage-related-apps__card:focus-visible,
    body.catalog-page.catalog-page--swage
      .swage-related-apps__card:hover
      .app-modal-related-card__media
      img,
    body.catalog-page.catalog-page--swage
      .swage-related-apps__card:focus-visible
      .app-modal-related-card__media
      img,
    body.catalog-page.catalog-page--swage
      .swage-related-apps__card:hover
      .swage-related-apps__preview-icon,
    body.catalog-page.catalog-page--swage
      .swage-related-apps__card:focus-visible
      .swage-related-apps__preview-icon {
      transform: none;
    }
  }

  /* Swage footer presentation remains independently owned even though the
     structure and reveal behavior are shared with Tacet. */
  .site-footer--swage .site-footer__logo {
    --site-footer-icon: url('../images/erp-ai-wordmark.svg');

    position: relative;
    color: var(--site-footer-ink-strong);
    transition: color 150ms ease;
  }

  .site-footer--swage .site-footer__badge-icon,
  .site-footer--swage .site-footer__social a {
    position: relative;
    color: var(--site-footer-ink-muted);
  }

  .site-footer--swage [data-footer-icon='iso'] {
    --site-footer-icon: url('../images/footer/ic-iso-copper.svg');
  }

  .site-footer--swage [data-footer-icon='soc2'] {
    --site-footer-icon: url('../images/footer/ic-soc2-copper.svg');
  }

  .site-footer--swage [data-footer-icon='gdpr'] {
    --site-footer-icon: url('../images/footer/ic-gdpr-copper.svg');
  }

  .site-footer--swage [data-footer-icon='ccpa'] {
    --site-footer-icon: url('../images/footer/ic-ccpa-copper.svg');
  }

  .site-footer--swage [data-footer-icon='hittrust'] {
    --site-footer-icon: url('../images/footer/ic-hittrust-copper.svg');
  }

  .site-footer--swage [data-footer-icon='pci'] {
    --site-footer-icon: url('../images/footer/ic-pci-copper.svg');
  }

  .site-footer--swage [data-footer-icon='x'] {
    --site-footer-icon: url('../images/footer/x-twitter-brands.svg');
  }

  .site-footer--swage [data-footer-icon='reddit'] {
    --site-footer-icon: url('../images/footer/reddit-alien-brands.svg');
  }

  .site-footer--swage [data-footer-icon='linkedin'] {
    --site-footer-icon: url('../images/footer/linkedin-brands.svg');
  }

  .site-footer--swage .site-footer__logo::before,
  .site-footer--swage .site-footer__badge-icon::before,
  .site-footer--swage .site-footer__social a::before {
    position: absolute;
    inset: 0;
    background: currentcolor;
    content: '';
    -webkit-mask: var(--site-footer-icon) center / contain no-repeat;
    mask: var(--site-footer-icon) center / contain no-repeat;
    pointer-events: none;
  }

  .site-footer--swage .site-footer__social a::before {
    inset: 0.1875rem;
  }

  .site-footer--swage .site-footer__logo img,
  .site-footer--swage .site-footer__badge-icon img,
  .site-footer--swage .site-footer__social img {
    opacity: 0;
    filter: none;
  }

  .site-footer--swage .site-footer__social a {
    opacity: 1;
    transition:
      color 150ms ease,
      transform var(--duration-fast) var(--ease-standard);
  }

  .site-footer--swage .site-footer__logo:hover,
  .site-footer--swage .site-footer__logo:focus-visible,
  .site-footer--swage .site-footer__nav a:hover,
  .site-footer--swage .site-footer__nav a:focus-visible,
  .site-footer--swage .site-footer__social a:hover,
  .site-footer--swage .site-footer__social a:focus-visible {
    color: var(--swage-accent);
  }

  .site-footer--swage .site-footer__status:hover,
  .site-footer--swage .site-footer__status:focus-visible {
    border-color: var(--swage-accent);
    color: var(--swage-accent);
  }

  /* Tacet's pale footer uses its own monochrome asset treatment. Dark mode
     intentionally keeps the established filtered copper artwork. */
  html:not(.dark) .site-footer--tacet .site-footer__logo {
    --site-footer-icon: url('../images/erp-ai-wordmark.svg');

    position: relative;
    color: var(--site-footer-ink-strong);
  }

  html:not(.dark) .site-footer--tacet .site-footer__badge-icon,
  html:not(.dark) .site-footer--tacet .site-footer__social a {
    position: relative;
    color: var(--site-footer-ink-muted);
  }

  html:not(.dark) .site-footer--tacet [data-footer-icon='iso'] {
    --site-footer-icon: url('../images/footer/ic-iso-copper.svg');
  }

  html:not(.dark) .site-footer--tacet [data-footer-icon='soc2'] {
    --site-footer-icon: url('../images/footer/ic-soc2-copper.svg');
  }

  html:not(.dark) .site-footer--tacet [data-footer-icon='gdpr'] {
    --site-footer-icon: url('../images/footer/ic-gdpr-copper.svg');
  }

  html:not(.dark) .site-footer--tacet [data-footer-icon='ccpa'] {
    --site-footer-icon: url('../images/footer/ic-ccpa-copper.svg');
  }

  html:not(.dark) .site-footer--tacet [data-footer-icon='hittrust'] {
    --site-footer-icon: url('../images/footer/ic-hittrust-copper.svg');
  }

  html:not(.dark) .site-footer--tacet [data-footer-icon='pci'] {
    --site-footer-icon: url('../images/footer/ic-pci-copper.svg');
  }

  html:not(.dark) .site-footer--tacet [data-footer-icon='x'] {
    --site-footer-icon: url('../images/footer/x-twitter-brands.svg');
  }

  html:not(.dark) .site-footer--tacet [data-footer-icon='reddit'] {
    --site-footer-icon: url('../images/footer/reddit-alien-brands.svg');
  }

  html:not(.dark) .site-footer--tacet [data-footer-icon='linkedin'] {
    --site-footer-icon: url('../images/footer/linkedin-brands.svg');
  }

  html:not(.dark) .site-footer--tacet .site-footer__logo::before,
  html:not(.dark) .site-footer--tacet .site-footer__badge-icon::before,
  html:not(.dark) .site-footer--tacet .site-footer__social a::before {
    position: absolute;
    inset: 0;
    background: currentcolor;
    content: '';
    -webkit-mask: var(--site-footer-icon) center / contain no-repeat;
    mask: var(--site-footer-icon) center / contain no-repeat;
    pointer-events: none;
  }

  html:not(.dark) .site-footer--tacet .site-footer__social a::before {
    inset: 0.1875rem;
  }

  html:not(.dark) .site-footer--tacet .site-footer__logo img,
  html:not(.dark) .site-footer--tacet .site-footer__badge-icon img,
  html:not(.dark) .site-footer--tacet .site-footer__social img {
    opacity: 0;
    filter: none;
  }

  .site-footer--tacet .site-footer__logo:hover,
  .site-footer--tacet .site-footer__logo:focus-visible,
  .site-footer--tacet .site-footer__nav a:hover,
  .site-footer--tacet .site-footer__nav a:focus-visible,
  .site-footer--tacet .site-footer__social a:hover,
  .site-footer--tacet .site-footer__social a:focus-visible {
    color: var(--tacet-orange);
  }

  .site-footer--tacet .site-footer__status:hover,
  .site-footer--tacet .site-footer__status:focus-visible {
    border-color: var(--tacet-orange);
    color: var(--tacet-orange);
  }

  /* Related apps */
  .related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
  }
  @media (max-width: 768px) {
    .related-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .related-card {
    padding: var(--space-6);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--background);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard);
  }
  .related-card:hover {
    background: var(--surface-dim);
  }
  .related-card .rc-tag {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red-on-light);
    margin-bottom: var(--space-2);
    display: block;
  }
  .related-card .rc-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin-bottom: var(--space-3);
  }
  .related-card .rc-body {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-m);
  }

  /* Role / module cards — monochrome on cream. Pastel tints don't survive
     on the cream background (they read as washed-out and sickly).
     Treatment: white card with 1px foreground border, a bordered icon
     block, and a SOLID foreground tag with cream text. Per-category
     visual difference comes from the icon glyph (data-icon), not from
     background tint. */
  /* Monogram marker — demoted to the section-eyebrow chip vocabulary
     (small solid dark chip, no border, no drop-shadow) so it reads as
     a quiet corner tag instead of a boxed brand mark competing with
     the card title. Matches `.agi-card .mono` / `.ft-agent-card
     .agt-mono` / `.ft-section .eb span`. */
  .pp-card[data-icon] {
    position: relative;
    padding-top: 44px;
  }
  .pp-card[data-icon]::before {
    content: attr(data-icon);
    position: absolute;
    top: 20px;
    left: var(--space-6);
    background: var(--foreground);
    color: var(--background);
    padding: 4px 8px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
  /* §03 agent cards (.pp-card--mono-inline): the monogram chip sits on
     the same line as the "AGENT" label, sharing its text baseline,
     instead of floating absolutely above it. Scoped via the modifier
     so the §04/§08 icon cards (no .card-tag) keep the stacked chip. */
  .pp-card--mono-inline[data-icon] {
    padding-top: var(--space-6);
  }
  .pp-card--mono-inline[data-icon]::before {
    position: static;
    vertical-align: baseline;
    margin-right: 10px;
  }
  .pp-card--mono-inline .card-tag {
    display: inline !important;
    margin-bottom: 0 !important;
  }
  .pp-card--mono-inline .card-title {
    margin-top: var(--space-4);
  }

  /* .card .card-tag — merged into the canonical rule above (search this
     file for ".product-page .pp-card .card-tag — consolidated rule"). */

  /* Highlights — Basecamp-style hand-drawn marker effects.
     - .hl-yellow : yellow highlighter swipe behind text (covers ~70% of the
                    line height to look like a real marker pass)
     - .hl-circle : red hand-drawn ellipse around text (inline SVG)
     - .hl-tag    : yellow rotated tag block on section eyebrow labels */
  .hl-yellow {
    /* Solid yellow box covering the full line-height of the
       highlighted span. Previously a marker-swipe gradient stripe
       (32%–92% line-height) which left ascender/descender slivers
       showing on the large hero H1; solid bg fills the line-box
       cleanly via `box-decoration-break: clone` so multi-line
       wrapping (e.g. "ONE LEDGER." breaking across lines) keeps
       per-line backgrounds intact. No vertical padding — the
       line-box itself is the highlight height. */
    background: var(--accent-yellow);
    padding: 0 6px;
    margin: 0 -2px;
    /* Yellow is theme-constant, so the text sitting on the yellow
       must use the paired `--accent-yellow-fg` token in both modes.
       `color: inherit` would inherit cream in dark mode and fail
       AA contrast (~1.5:1) — same fix as the centralized
       "yellow highlight: text stays dark in both modes" block above. */
    color: var(--accent-yellow-fg);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .hl-circle {
    position: relative;
    display: inline-block;
    padding: 4px 14px;
    color: inherit;
    z-index: 1;
  }
  .hl-circle::before {
    content: '';
    position: absolute;
    inset: -10% -8%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M 18,46 C 14,18 70,6 110,8 C 162,10 192,28 188,48 C 184,68 130,76 88,72 C 46,68 8,60 16,40' fill='none' stroke='%23e84230' stroke-width='3' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: -1;
  }
  .hl-tag {
    display: inline-block;
    background: var(--accent-yellow);
    /* Same theme-constant pairing as .hl-yellow: yellow stays
       yellow in both modes, so the text on it must use the dark
       paired token (`--accent-yellow-fg`) regardless of theme. */
    color: var(--accent-yellow-fg);
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 14px 8px;
    transform: rotate(-2deg);
    box-shadow: 3px 3px 0 oklch(20% 0.005 78 / 12%);
  }

  /* -- ERP + CRM feature pages (feature.njk paginated) ------------------- *
   * Migrated from inline \3c style> in src/pages/{erp-enterprise,crm-platform}/
   * feature.njk (lines 51-251). ERP and CRM feature templates have
   * byte-identical CSS, so consolidated under `.product-page .ft-*`.
   * Generated URLs: /<department>/<feature-slug>/ (e.g.
   * /finance-accounting/accounts-payable/).
   * ───────────────────────────────────────────────────────────────────── */

  /* Breadcrumb */
  /* See `.ag-crumb` above for the 90rem-centering rationale. */
  .ft-crumb {
    padding-block: 14px;
    padding-inline: max(24px, calc((100% - 90rem) / 2 + 24px));
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-m);
    border-bottom: 1px solid var(--border);
    background: var(--background);
  }
  .ft-crumb a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    color: var(--foreground);
    text-decoration: none;
    border-bottom: 1px solid var(--foreground);
  }
  .ft-crumb span {
    color: var(--text-m);
    margin: 0 8px;
  }
  .ft-crumb .crumb-sep {
    display: inline-flex;
    align-items: center;
  }
  .ft-crumb .crumb-sep [data-icon] {
    width: 1em;
    height: 1em;
  }

  /* Hero — feature-first, search-friendly */
  .ft-hero {
    padding: 72px 24px 56px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--surface-bright);
  }
  /* Eyebrow row on feature subpages — three parts on one line:
     monogram-box (PC) + dark chip (domain) + label (feature name).
     The two text labels are sized at the same font-size as the
     monogram so their cap-height matches the monogram's visible
     letter height (the "x-height match" pattern). `vertical-align:
     middle` on both inline-flex siblings keeps them vertically
     centered with respect to the 64px box — the row reads as a
     baseline-anchored unit instead of three differently-sized
     atoms drifting on the line. */
  /* Eyebrow row on feature subpages — flex container brackets the
     monogram box + dark domain chip + plain feature-name label as a
     single visual unit. Gap is `0` between the box and the chip so
     they read as one chip-bracketed shape; an 8px gap separates the
     plain label from the chip. The box and chip share the same
     internal padding rhythm so their heights match at the
     pixel level. */
  .ft-hero .ft-eyebrow-row {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-bottom: 22px;
    vertical-align: middle;
  }
  /* Box height = chip height (32px) + shadow offset (3px) = 35px.
     Center-aligned in the eyebrow row so the box extends 1.5px above
     and 1.5px below the chip — the bottom-right shadow then reads as
     a balanced brand bracket instead of a one-sided offset under the
     chip's baseline. Width matches chip-row height (32px) — keeps the
     box square-ish and lets the chip butt cleanly against its right
     edge. */
  .ft-hero .ft-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 35px;
    border: 1.5px solid var(--foreground);
    background: var(--background);
    box-shadow: 3px 3px 0 var(--foreground);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
  }
  .ft-hero .ft-eb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .ft-hero .ft-eb::before {
    content: attr(data-domain);
    display: inline-flex;
    align-items: center;
    background: var(--foreground);
    color: var(--background);
    padding: 0 10px;
    height: 32px;
    font-size: 12px;
    letter-spacing: 0.12em;
  }
  .ft-hero h1 {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--foreground);
    max-width: 26ch;
    margin: 0 auto 18px;
  }
  .ft-hero h1 .accent {
    background: var(--accent-yellow);
    padding: 0 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .ft-hero .tagline {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--red-on-light);
    font-size: clamp(16px, 1.4vw, 22px);
    max-width: 70ch;
    margin: 0 auto 14px;
  }
  .ft-hero .summary {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.1vw, 17px);
    color: var(--text-m);
    line-height: 1.6;
    max-width: 70ch;
    margin: 0 auto 28px;
  }
  .ft-hero .ft-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
  }
  /* Hero CTA on /erp-enterprise/ and /crm-platform/ feature subpages
     now uses the canonical `.btn .btn--primary .btn--xl` family —
     no bespoke override needed. The prior `.ft-hero a.btn-3d` rule
     was dropped 2026-05-15. */
  .ft-hero .micro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-m);
    margin-top: 10px;
  }
  /* Subpage hero microcopy ticks — Tabler `check` SVG injected via
     template spans, sized to 1.1em proportional to the row's font. */
  .ft-hero .micro span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .ft-hero .micro span [data-icon] {
    width: 1.1em;
    height: 1.1em;
    color: var(--red-on-light);
    flex-shrink: 0;
  }

  /* Section + grid system */
  .ft-section {
    padding: 56px 24px;
    border-bottom: 1px solid var(--border);
  }
  .ft-section .wrap {
    max-width: 1100px;
    margin: 0 auto;
  }
  .ft-section h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(24px, 2.6vw, 36px);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--foreground);
    margin: 0 0 6px;
    text-align: center;
  }
  .ft-section h2 .accent {
    background: var(--accent-yellow);
    padding: 0 8px;
  }
  .ft-section .eb {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
    margin-bottom: 14px;
  }
  .ft-section .eb span {
    display: inline-flex;
    align-items: center;
    background: var(--foreground);
    color: var(--background);
    padding: 4px 8px 5px;
    font-size: 10px;
    margin-right: 10px;
  }
  .ft-section .sub {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--red-on-light);
    text-align: center;
    max-width: 70ch;
    margin: 0 auto 36px;
  }
  .ft-section--alt {
    background: var(--surface-dim);
  }

  .ft-grid {
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    background: var(--background);
  }
  .ft-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ft-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ft-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 800px) {
    .ft-grid--2,
    .ft-grid--3,
    .ft-grid--4 {
      grid-template-columns: 1fr;
    }
  }
  .ft-cell {
    padding: 22px 24px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--background);
    position: relative;
  }
  .ft-cell:last-child {
    border-right: 0;
    border-bottom: 0;
  }
  .ft-cell .h {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin: 0 0 10px;
  }
  .ft-cell .b {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-m);
  }
  .ft-cell .num {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-m);
    opacity: 0.6;
  }

  /* Agents-on-this-feature strip */
  .ft-agents {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
  }
  @media (max-width: 800px) {
    .ft-agents {
      grid-template-columns: 1fr;
    }
  }
  .ft-agent-card {
    display: block;
    padding: 22px 24px;
    border-right: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    text-decoration: none;
    transition: background 120ms;
  }
  .ft-agent-card:hover {
    background: var(--surface-dim);
  }
  .ft-agent-card:last-child {
    border-right: 0;
  }
  /* Card eyebrow — same lightweight vocabulary as `.agi-card .row1`
     and the section eyebrow. Small dark monogram chip + muted
     mono-caps label so the card title stays the focal point. */
  /* Card eyebrow row — chip + tag share a text baseline, matching the
     §03 .pp-card--mono-inline treatment so every chip→tag→title
     hierarchy reads identically across anchor and subpages. */
  .ft-agent-card .agt-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
  }
  .ft-agent-card .agt-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--foreground);
    color: var(--background);
    padding: 4px 8px 5px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .ft-agent-card .agt-tag {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--text-m);
    text-transform: uppercase;
  }
  .ft-agent-card .agt-name {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 15px;
    color: var(--foreground);
    margin-bottom: 6px;
  }
  .ft-agent-card .agt-sum {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-m);
    margin-bottom: 12px;
  }
  .ft-agent-card .agt-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-family: var(--font-body);
    font-size: 11px;
  }
  .ft-agent-card .agt-saves {
    background: var(--accent-yellow);
    padding: 2px 6px;
    color: var(--foreground);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .ft-agent-card .agt-arrow {
    color: var(--red-on-light);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* Used-by table */
  .ft-roles {
    border: 1px solid var(--border);
    background: var(--background);
    max-width: 880px;
    margin: 0 auto;
  }
  .ft-roles .row {
    display: grid;
    grid-template-columns: 220px 1fr;
    border-top: 1px solid var(--border);
  }
  .ft-roles .row:first-child {
    border-top: 0;
  }
  .ft-roles .role {
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--foreground);
    background: var(--surface-dim);
    border-right: 1px solid var(--border);
  }
  .ft-roles .what {
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-m);
  }

  /* Integrations strip */
  .ft-integ {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    background: var(--background);
    max-width: 880px;
    margin: 0 auto;
  }
  @media (max-width: 720px) {
    .ft-integ {
      grid-template-columns: 1fr;
    }
  }
  .ft-integ .ic {
    padding: 16px 18px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .ft-integ .ic:nth-child(2n) {
    border-right: 0;
  }
  .ft-integ .ic:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .ft-integ .ic .cat {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--foreground);
    margin-bottom: 6px;
  }
  .ft-integ .ic .cat .ft-integ-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--red-on-light);
    margin-right: 6px;
    flex-shrink: 0;
  }
  .ft-integ .ic .cat .ft-integ-arrow [data-icon] {
    width: 1em;
    height: 1em;
  }
  .ft-integ .ic .items {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-m);
  }

  /* FAQ */
  details.ft-faq {
    border-top: 1px solid var(--border);
    padding: 18px 0;
  }
  details.ft-faq:last-of-type {
    border-bottom: 1px solid var(--border);
  }
  details.ft-faq summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 16px;
    color: var(--foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  details.ft-faq summary::-webkit-details-marker {
    display: none;
  }
  details.ft-faq summary::after {
    content: '+';
    font-family: var(--font-body);
    color: var(--red-on-light);
    font-size: 24px;
    line-height: 1;
  }
  details.ft-faq[open] summary::after {
    content: '–';
  }
  details.ft-faq p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-m);
    margin: 12px 0 0;
    max-width: 75ch;
  }

  /* Related features */
  .ft-related {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
  }
  @media (max-width: 800px) {
    .ft-related {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .ft-related a {
    display: block;
    padding: 18px 20px;
    border-right: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    text-decoration: none;
    transition: background 120ms;
  }
  .ft-related a:hover {
    background: var(--surface-dim);
  }
  .ft-related a:last-child {
    border-right: 0;
  }
  .ft-related .mono {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .ft-related .name {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 15px;
    color: var(--foreground);
    margin-top: 6px;
  }

  /* Bottom CTA */
  .ft-cta-bottom {
    padding: 56px 24px;
    text-align: center;
    background: var(--surface-container-highest);
    color: var(--foreground);
  }
  .ft-cta-bottom h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 auto 14px;
    max-width: 22ch;
    color: var(--foreground);
  }
  .ft-cta-bottom .accent {
    background: var(--accent-yellow);
    color: var(--foreground);
    padding: 0 8px;
  }
  .ft-cta-bottom p {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text-m);
    max-width: 60ch;
    margin: 0 auto 26px;
  }
  /* Bottom CTA on feature subpages now uses canonical
     `.btn .btn--primary .btn--lg`. The prior yellow brutalist
     override was dropped 2026-05-15 in favor of the sitewide
     red primary. */

  /* App-context cards — one per app composing this skill */
  .ft-app-contexts {
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    background: var(--background);
    max-width: 1100px;
    margin: 0 auto;
  }
  .ft-app-context {
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
  }
  .ft-app-context:last-child {
    border-bottom: 0;
  }
  .ft-app-context-head {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
    margin-bottom: 10px;
  }
  .ft-app-context-head a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    color: var(--foreground);
    border-bottom: 1px solid var(--foreground);
    text-decoration: none;
  }
  .ft-app-context p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-m);
    margin: 0;
  }
  .ft-app-context p code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--foreground);
    background: var(--surface-dim);
    padding: 1px 4px;
  }

  /* Skill body — canonical SKILL.md rendering. The document keeps the
     editorial rail/stage-card feel, with the rail sticky through the section. */
  .ft-section--skill-doc .wrap {
    max-width: 90rem;
  }
  .ft-section--skill-doc {
    --ft-product-nav-height: 56px;
  }
  .ft-section--skill-doc .sub {
    max-width: 86ch;
    margin-bottom: var(--space-20);
    overflow-wrap: anywhere;
  }
  .ft-section--skill-doc .sub code {
    background: var(--surface-dim);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: var(--space-1) var(--space-2);
    overflow-wrap: anywhere;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .ft-skill-doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
    margin-top: var(--space-12);
  }
  .ft-skill-rail {
    position: sticky;
    top: var(--ft-product-nav-height);
    z-index: 30;
    max-width: none;
    margin-block: 0;
    margin-inline: calc(var(--space-6) * -1);
    border-bottom: var(--border-width-sm) solid var(--border);
    background: var(--background);
  }
  #main-content > .ft-section--skill-doc > .ft-skill-rail {
    max-width: none;
    margin-inline: calc(var(--space-6) * -1);
  }
  .ft-skill-rail__track {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: var(--space-6);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .ft-skill-rail__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--space-11);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width-md) solid transparent;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-m);
    background: var(--background);
    white-space: nowrap;
  }
  .ft-skill-rail[data-inpage-nav] a.ft-skill-rail__item {
    color: var(--nav-link);
    font-weight: 700;
    border-bottom: var(--border-width-md) solid transparent;
  }
  .ft-skill-rail[data-inpage-nav] a.ft-skill-rail__item:hover {
    color: var(--foreground);
    background: transparent;
  }
  .ft-skill-rail__item span {
    color: var(--red-on-light);
  }
  .ft-skill-rail[data-inpage-nav] a.ft-skill-rail__item.inpage-nav-link--active {
    color: var(--inpage-nav-active);
    border-bottom-color: var(--inpage-nav-active);
    background: transparent;
  }
  .ft-skill-body {
    max-width: 72rem;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: 1.75;
    color: var(--text-m);
    overflow-wrap: break-word;
  }
  .ft-skill-body__context {
    max-width: 74ch;
    margin: 0 auto var(--space-16);
  }
  .ft-skill-body h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    letter-spacing: 0;
    line-height: 1;
    text-align: left;
    color: var(--foreground);
    margin: 0 0 var(--space-6);
  }
  .ft-skill-body h2:first-child {
    margin-top: 0;
  }
  .ft-skill-body h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--text-xl);
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--foreground);
    margin: var(--space-8) 0 var(--space-4);
  }
  .ft-skill-body h4 {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--foreground);
    margin: var(--space-6) 0 var(--space-2);
  }
  .ft-skill-body p {
    margin: 0 auto var(--space-6);
    max-width: 74ch;
  }
  .ft-skill-body ul,
  .ft-skill-body ol {
    max-width: 74ch;
    margin: 0 auto var(--space-8);
    padding-left: var(--space-6);
  }
  .ft-skill-body ol {
    padding-left: var(--space-8);
  }
  .ft-skill-body li {
    margin: 0;
    padding-left: var(--space-2);
  }
  .ft-skill-body li + li {
    margin-top: var(--space-4);
  }
  .ft-skill-body li::marker {
    color: var(--foreground);
    font-family: var(--font-body);
    font-weight: 700;
  }
  .ft-skill-body strong {
    color: var(--foreground);
    font-weight: 700;
  }
  .ft-skill-body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--foreground);
    background: var(--surface-dim);
    padding: var(--space-1) var(--space-2);
    overflow-wrap: anywhere;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .ft-skill-body pre {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    line-height: 1.55;
    background: var(--surface-container-highest);
    color: var(--foreground);
    padding: var(--space-4);
    overflow-x: auto;
    margin: 0 0 var(--space-8);
    border: var(--border-width-sm) solid var(--border);
  }
  .ft-skill-body pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
    overflow-wrap: normal;
  }
  .ft-skill-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 var(--space-8);
    font-size: var(--text-sm);
  }
  .ft-skill-body th,
  .ft-skill-body td {
    padding: var(--space-2) var(--space-3);
    border: var(--border-width-sm) solid var(--border);
    text-align: left;
    vertical-align: top;
  }
  .ft-skill-body th {
    background: var(--surface-dim);
    color: var(--foreground);
    font-weight: 700;
  }
  .ft-skill-body blockquote {
    border-left: var(--border-width-md) solid var(--red-on-light);
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
    max-width: 74ch;
    margin: var(--space-8) auto;
    color: var(--text-m);
    font-style: italic;
  }
  .ft-skill-body blockquote > :last-child {
    margin-bottom: 0;
  }
  .ft-skill-body a {
    color: var(--red-on-light);
    border-bottom: var(--border-width-sm) solid var(--red-on-light);
    text-decoration: none;
  }
  .ft-skill-card {
    position: relative;
    max-width: 64rem;
    margin: 0 auto var(--space-16);
    padding: var(--space-16) var(--space-12) var(--space-12);
    border: var(--border-width-sm) solid var(--foreground);
    background: color-mix(in oklch, var(--surface-container), var(--background) 68%);
    box-shadow: var(--space-2) var(--space-2) 0 var(--foreground);
  }
  .ft-skill-card:last-child {
    margin-bottom: 0;
  }
  .ft-skill-card__stage {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-12);
    padding: var(--space-2) var(--space-4);
    background: var(--foreground);
    color: var(--background);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .ft-skill-card__stage span {
    color: inherit;
  }
  .ft-skill-card h2 {
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-8);
    border-bottom: var(--border-width-sm) solid var(--foreground);
  }
  .ft-skill-card--appendix h2:first-of-type {
    display: none;
  }
  .ft-skill-body__context p,
  .ft-skill-body__context ul,
  .ft-skill-body__context ol,
  .ft-skill-body__context blockquote,
  .ft-skill-card p,
  .ft-skill-card ul,
  .ft-skill-card ol,
  .ft-skill-card blockquote {
    margin-right: 0;
    margin-left: 0;
  }
  .ft-skill-card--build h2,
  .ft-skill-card--maintain h2,
  .ft-skill-card--scale h2 {
    color: var(--foreground);
  }
  @media (min-width: 80rem) {
    .ft-skill-doc {
      gap: var(--space-12);
    }
    .ft-skill-rail__track {
      padding-inline: var(--space-12);
    }
  }
  @media (max-width: 79.9375rem) {
    .ft-section--skill-doc .sub {
      margin-bottom: var(--space-12);
    }
    .ft-skill-body {
      font-size: var(--text-base);
    }
  }
  @media (max-width: 45rem) {
    .ft-section--skill-doc {
      --ft-product-nav-height: 89px;
      padding-inline: var(--space-4);
    }
    .ft-section--skill-doc .sub {
      margin-bottom: var(--space-8);
    }
    .ft-section--skill-doc .sub code {
      padding-inline: 0;
    }
    .ft-skill-doc {
      gap: var(--space-8);
    }
    .ft-skill-rail {
      margin-inline: calc(var(--space-4) * -1);
    }
    #main-content > .ft-section--skill-doc > .ft-skill-rail {
      margin-inline: calc(var(--space-4) * -1);
    }
    .ft-skill-rail__track {
      padding-inline: var(--space-6);
    }
    .ft-skill-rail__item {
      font-size: var(--text-label);
    }
    .ft-skill-body {
      max-width: 100%;
      font-size: var(--text-base);
      line-height: 1.7;
    }
    .ft-skill-body h2 {
      font-size: clamp(var(--text-2xl), 9vw, var(--text-4xl));
      text-align: left;
    }
    .ft-skill-body h3 {
      margin-top: var(--space-6);
    }
    .ft-skill-body ul,
    .ft-skill-body ol {
      padding-left: var(--space-6);
    }
    .ft-skill-body__context {
      margin-bottom: var(--space-12);
    }
    .ft-skill-card {
      margin-bottom: var(--space-12);
      padding: var(--space-8) var(--space-4);
      box-shadow: var(--space-2) var(--space-2) 0 var(--foreground);
    }
    .ft-skill-card__stage {
      margin-bottom: var(--space-8);
    }
    .ft-skill-card h2 {
      margin-bottom: var(--space-8);
      padding-bottom: var(--space-6);
    }
  }
  @media (max-width: 32.5rem) {
    .ft-section--skill-doc {
      --ft-product-nav-height: 124px;
    }
  }

  /* -- ERP + CRM agents index (agents/index.njk) ------------------------- *
   * Migrated from inline \3c style> in src/pages/{erp-enterprise,crm-platform}/
   * agents/index.njk (lines 42-141). Identical between ERP and CRM.
   * ───────────────────────────────────────────────────────────────────── */

  /* See `.ag-crumb` above for the 90rem-centering rationale. */
  .agi-crumb {
    padding-block: 14px;
    padding-inline: max(24px, calc((100% - 90rem) / 2 + 24px));
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-m);
    border-bottom: 1px solid var(--border);
    background: var(--background);
  }
  .agi-crumb a {
    color: var(--foreground);
    text-decoration: none;
    border-bottom: 1px solid var(--foreground);
  }
  .agi-crumb span {
    color: var(--text-m);
    margin: 0 8px;
  }
  .agi-crumb .crumb-sep {
    display: inline-flex;
    align-items: center;
  }
  .agi-crumb .crumb-sep [data-icon] {
    width: 1em;
    height: 1em;
  }

  .agi-hero {
    padding: 72px 24px 56px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--surface-bright);
  }
  .agi-hero .eb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
    margin-bottom: 16px;
  }
  .agi-hero .eb::before {
    content: 'AI · 8 AGENTS';
    background: var(--foreground);
    color: var(--background);
    padding: 3px 8px 4px;
    font-size: 10px;
  }
  .agi-hero h1 {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--foreground);
    max-width: 24ch;
    margin: 0 auto 18px;
  }
  .agi-hero h1 .accent {
    background: var(--accent-yellow);
    padding: 0 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  /* .agi-cta-bottom h2 { line-height: 1.05 } was originally declared
     here too — confirmed dead code, the canonical rule below sets
     line-height: 1 and wins on cascade order. Removed. */
  /* .agi-cta-bottom .accent box-decoration-break: clone is merged into
     the canonical rule below to keep the cascade collapsed. */
  .agi-hero .sub {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--red-on-light);
    font-size: clamp(16px, 1.4vw, 20px);
    max-width: 70ch;
    margin: 0 auto 28px;
  }
  /* Hero CTA on /erp-enterprise/agents/ + /crm-platform/agents/
     index pages now uses canonical `.btn .btn--primary .btn--xl`.
     Prior `.agi-hero a.btn-3d` rule dropped 2026-05-15. */

  .agi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    margin: 0 auto;
    max-width: 1200px;
  }
  @media (max-width: 800px) {
    .agi-grid {
      grid-template-columns: 1fr;
    }
  }

  .agi-card {
    display: block;
    padding: 32px 28px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    text-decoration: none;
    position: relative;
    transition: background 120ms;
  }
  .agi-card:hover {
    background: var(--surface-dim);
  }
  .agi-card:nth-child(2n) {
    border-right: 0;
  }
  @media (max-width: 800px) {
    .agi-card {
      border-right: 0;
    }
  }
  /* Card eyebrow — same lightweight vocabulary as the section
     eyebrow (`.ft-section .eb`): a small dark monogram chip + muted
     mono-caps label. The previous 40×40 bordered + shadowed box read
     louder than the card title and broke the hierarchy; demoting it
     to a chip keeps the title (`.name`) as the focal point. */
  /* Card eyebrow row — baseline-aligned chip + tag (see .agt-row note). */
  .agi-card .row1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
  }
  .agi-card .mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--foreground);
    color: var(--background);
    padding: 4px 8px 5px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .agi-card .tag {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--text-m);
    text-transform: uppercase;
  }
  .agi-card .name {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin-bottom: 8px;
  }
  .agi-card .tagline {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--red-on-light);
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 14px;
  }
  .agi-card .summary {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-m);
    margin-bottom: 16px;
  }
  .agi-card .meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
  }
  .agi-card .meta .saves {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--foreground);
    background: var(--accent-yellow);
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .agi-card .meta .arrow {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--red-on-light);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .agi-card:hover .meta .arrow {
    transform: translateX(2px);
  }

  .agi-section {
    padding: 56px 24px;
    border-bottom: 1px solid var(--border);
  }
  .agi-section .wrap {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }
  .agi-section h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(24px, 2.6vw, 36px);
    letter-spacing: -0.02em;
    color: var(--foreground);
    margin: 0 0 14px;
  }
  .agi-section p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-m);
    max-width: 70ch;
    margin: 0 auto;
  }

  .agi-cta-bottom {
    padding: 56px 24px;
    text-align: center;
    background: var(--surface-container-highest);
    color: var(--foreground);
  }
  .agi-cta-bottom h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 auto 14px;
    max-width: 22ch;
    color: var(--foreground);
  }
  .agi-cta-bottom .accent {
    background: var(--accent-yellow);
    color: var(--foreground);
    padding: 0 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .agi-cta-bottom p {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text-m);
    max-width: 60ch;
    margin: 0 auto 26px;
  }
  /* Bottom CTA on agents-index pages now canonical .btn--primary .btn--lg.
     Prior yellow override dropped 2026-05-15. */

  /* -- ERP + CRM agent detail page (agent.njk paginated) ----------------- *
   * Migrated from inline \3c style> in src/pages/{erp-enterprise,crm-platform}/
   * agent.njk (lines 50-240 ERP, 50-236 CRM). CSS is identical except for
   * `.ag-log .row` grid-template-columns: 60px (ERP) vs 80px (CRM).
   * Default uses ERP; CRM override below.
   * ───────────────────────────────────────────────────────────────────── */

  /* Hero */
  .ag-hero {
    padding: 64px 24px 48px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--surface-bright);
  }
  /* Eyebrow row on agent detail subpages — same pattern as
     `.ft-hero` above. See that block for the x-height-match rationale. */
  /* Same pattern as `.ft-hero .ft-eyebrow-row`. */
  .ag-hero .ag-eyebrow-row {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-bottom: 22px;
    vertical-align: middle;
  }
  /* See `.ft-hero .ft-mono` above for the height+shadow rationale. */
  .ag-hero .ag-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 35px;
    border: 1.5px solid var(--foreground);
    background: var(--background);
    box-shadow: 3px 3px 0 var(--foreground);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .ag-hero .ag-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .ag-hero .ag-eyebrow::before {
    content: 'AI AGENT';
    display: inline-flex;
    align-items: center;
    background: var(--foreground);
    color: var(--background);
    padding: 0 10px;
    height: 32px;
    font-size: 12px;
    letter-spacing: 0.12em;
  }
  .ag-hero h1 {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--foreground);
    max-width: 24ch;
    margin: 0 auto 18px;
  }
  .ag-hero .ag-summary {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--red-on-light);
    font-size: clamp(16px, 1.4vw, 20px);
    max-width: 70ch;
    margin: 0 auto 28px;
  }
  .ag-hero .ag-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
  }
  /* Hero CTA on agent detail pages now canonical .btn--primary .btn--xl.
     Prior `.ag-hero .ag-cta-row a.btn-3d` rule dropped 2026-05-15. */
  .ag-hero .ag-micro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-m);
  }
  /* Agent subpage hero microcopy — same pattern as `.ft-hero .micro`. */
  .ag-hero .ag-micro span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .ag-hero .ag-micro span [data-icon] {
    width: 1.1em;
    height: 1.1em;
    color: var(--red-on-light);
    flex-shrink: 0;
  }

  /* Stat strip — saves + touches */
  /* SAVES / TOUCHES band: full-width bg + border, grid contents
     constrained to the 90rem envelope on large viewports. */
  .ag-stats {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding-inline: max(0px, calc((100% - 90rem) / 2));
    border-bottom: 1px solid var(--border);
    background: var(--background);
  }
  @media (max-width: 720px) {
    .ag-stats {
      grid-template-columns: 1fr;
    }
  }
  .ag-stats > div {
    padding: 22px 28px;
  }
  .ag-stats .ag-saves {
    border-right: 1px solid var(--border);
  }
  @media (max-width: 720px) {
    .ag-stats .ag-saves {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }
  }
  .ag-stats .lbl {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
    margin-bottom: 6px;
  }
  .ag-stats .val {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -0.02em;
    color: var(--foreground);
    display: inline-block;
    padding: 0 4px;
    position: relative;
    isolation: isolate;
  }
  .ag-stats .val::before {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 4px;
    height: 12px;
    background: var(--accent-yellow);
    z-index: -1;
  }
  .ag-stats .ag-touches .chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .ag-stats .ag-touches .chip {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    background: var(--foreground);
    color: var(--background);
  }

  /* Generic section */
  .ag-section {
    padding: 56px 24px;
    border-bottom: 1px solid var(--border);
  }
  .ag-section .ag-wrap {
    max-width: 1100px;
    margin: 0 auto;
  }
  .ag-section .ag-h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(24px, 2.6vw, 36px);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--foreground);
    margin: 0 0 6px;
    text-align: center;
  }
  .ag-section .ag-h2 .accent {
    background: var(--accent-yellow);
    padding: 0 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .ag-section .ag-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
    margin-bottom: 14px;
  }
  .ag-section .ag-eyebrow span {
    display: inline-flex;
    align-items: center;
    background: var(--foreground);
    color: var(--background);
    padding: 4px 8px 5px;
    font-size: 10px;
    margin-right: 10px;
  }
  .ag-section .ag-sub {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--red-on-light);
    text-align: center;
    max-width: 70ch;
    margin: 0 auto 36px;
  }
  .ag-section--alt {
    background: var(--surface-dim);
  }

  /* Card grids */
  .ag-grid {
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    background: var(--background);
  }
  .ag-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ag-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ag-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 800px) {
    .ag-grid--2,
    .ag-grid--3,
    .ag-grid--4 {
      grid-template-columns: 1fr;
    }
  }
  .ag-card {
    padding: 22px 24px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--background);
    position: relative;
  }
  .ag-card:last-child {
    border-right: 0;
    border-bottom: 0;
  }
  .ag-card .h {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin: 0 0 10px;
  }
  .ag-card .b {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-m);
  }
  .ag-card .num {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-m);
    opacity: 0.6;
  }

  /* Sample log — terminal feel, monospace.
     Theme-constant by design: the dark-on-warm-cream palette is the
     "terminal" mockup aesthetic; making it mode-aware would flip it
     to light-on-dark in dark mode and lose the visual metaphor.
     Bg uses --accent-yellow-fg (the existing theme-constant dark
     token); text colors stay as literals for the intentional
     warm-cream / amber / muted-warm terminal palette. */
  .ag-log {
    border: 1px solid var(--foreground);
    background: var(--accent-yellow-fg);
    color: oklch(94% 0.02 80);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
    padding: 18px 22px;
    box-shadow: 6px 6px 0 var(--foreground);
  }
  /* Default (ERP): 60px timestamp column. CRM override below. */
  .ag-log .row {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 16px;
    padding: 4px 0;
    border-top: 1px dashed oklch(50% 0.005 78 / 0.4);
  }
  .ag-log--crm .row {
    grid-template-columns: 80px 1fr;
  }
  .ag-log .row:first-child {
    border-top: 0;
  }
  .ag-log .row .t {
    color: oklch(80% 0.14 30);
    font-weight: 700;
  }
  .ag-log .row .e {
    color: oklch(94% 0.02 80);
  }
  .ag-log .ag-log-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid oklch(40% 0.005 78 / 0.4);
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(70% 0.04 80);
  }
  .ag-log .ag-log-bar .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-yellow);
    box-shadow: 0 0 0 2px rgb(255 229 82 / 0.25);
  }

  /* Skills strip */
  .ag-skills-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }
  .ag-skills-strip a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 10px 16px;
    border: 1px solid var(--foreground);
    background: var(--background);
    color: var(--foreground);
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--foreground);
    transition:
      transform 90ms ease-out,
      box-shadow 90ms ease-out;
  }
  .ag-skills-strip a:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--foreground);
  }
  /* Skill chip leading arrow — Tabler `arrow-right` SVG (.ag-skill-arrow
     span injected via the template). Replaces the previous unicode '→'
     `::before` glyph for visual consistency with the rest of the system. */
  .ag-skills-strip .ag-skill-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--red-on-light);
    flex-shrink: 0;
  }
  .ag-skills-strip .ag-skill-arrow [data-icon] {
    width: 1em;
    height: 1em;
  }

  /* FAQ */
  details.ag-faq {
    border-top: 1px solid var(--border);
    padding: 18px 0;
  }
  details.ag-faq:last-of-type {
    border-bottom: 1px solid var(--border);
  }
  details.ag-faq summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 16px;
    color: var(--foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  details.ag-faq summary::-webkit-details-marker {
    display: none;
  }
  details.ag-faq summary::after {
    content: '+';
    font-family: var(--font-body);
    color: var(--red-on-light);
    font-size: 24px;
    line-height: 1;
  }
  details.ag-faq[open] summary::after {
    content: '–';
  }
  details.ag-faq p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-m);
    margin: 12px 0 0;
    max-width: 75ch;
  }

  /* Related agents strip */
  .ag-related {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
  }
  @media (max-width: 800px) {
    .ag-related {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .ag-related a {
    display: block;
    padding: 18px 20px;
    border-right: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    text-decoration: none;
    transition: background 120ms;
  }
  .ag-related a:hover {
    background: var(--surface-dim);
  }
  .ag-related a:last-child {
    border-right: 0;
  }
  .ag-related .mono {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
  }
  .ag-related .name {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--foreground);
    margin-top: 6px;
  }

  /* Bottom CTA — compact */
  .ag-cta-bottom {
    padding: 56px 24px;
    text-align: center;
    background: var(--surface-container-highest);
    color: var(--foreground);
  }
  .ag-cta-bottom h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 auto 14px;
    max-width: 22ch;
    color: var(--foreground);
  }
  .ag-cta-bottom .accent {
    background: var(--accent-yellow);
    color: var(--foreground);
    padding: 0 8px;
  }
  .ag-cta-bottom p {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text-m);
    max-width: 60ch;
    margin: 0 auto 26px;
  }
  /* Bottom CTA on agent detail pages now canonical .btn--primary .btn--lg.
     Prior yellow override dropped 2026-05-15. */

  /* Breadcrumb */
  /* Breadcrumb: element itself stays full-width (bg + border-bottom
     span edge to edge). Content is centered into the standard 90rem
     envelope via `padding-inline: max(...)` — on small viewports the
     gutter stays at 24px; on viewports wider than 90rem, side padding
     grows so the inline content aligns with the rest of the page's
     90rem-centered content. CSS-only; no markup change needed. */
  .ag-crumb {
    padding-block: 14px;
    padding-inline: max(24px, calc((100% - 90rem) / 2 + 24px));
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-m);
    border-bottom: 1px solid var(--border);
    background: var(--background);
  }
  .ag-crumb a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    color: var(--foreground);
    text-decoration: none;
    border-bottom: 1px solid var(--foreground);
  }
  .ag-crumb span {
    color: var(--text-m);
    margin: 0 8px;
  }
  .ag-crumb .crumb-sep {
    display: inline-flex;
    align-items: center;
  }
  .ag-crumb .crumb-sep [data-icon] {
    width: 1em;
    height: 1em;
  }

  /* -- Design system reference -------------------------------------------- */
  :root {
    --tacet-accent-text: var(--tacet-orange-on-light);
    --ds-accent-text: var(--tacet-accent-text);
  }

  html.dark {
    --tacet-accent-text: var(--tacet-orange);
    --ds-accent-text: var(--tacet-accent-text);
  }

  .tacet-design-system-page .ds-section {
    scroll-margin-top: calc(var(--tacet-page-nav-height) + var(--space-4));
  }

  .ds-wrap {
    width: min(100%, 90rem);
    margin-inline: auto;
    padding-inline: var(--space-6);
  }

  .ds-section__header > span,
  .ds-spec-card__meta,
  .ds-rule-grid article > span,
  .ds-card-demo article > span,
  .ds-icon-grid article > span,
  .ds-card-type > span,
  .ds-hero-type > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--fs-chip);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ds-accent-text);
  }

  .ds-section__header h2 {
    max-width: 16ch;
    font-family: var(--font-heading);
    font-size: var(--fs-section);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--foreground);
  }

  .ds-section__header p,
  .ds-spec-card p,
  .ds-rule-grid p,
  .ds-contract-card p,
  .ds-card-demo p,
  .ds-icon-grid p,
  .ds-eyebrow-grid p,
  .ds-card-types p,
  .ds-hero-types p {
    max-width: 68ch;
    font-family: var(--font-body);
    font-size: var(--fs-subhead);
    line-height: 1.6;
    color: var(--text-m);
  }

  .ds-token code {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-m);
  }

  .ds-section {
    padding-block: var(--space-20);
    border-bottom: var(--border-width-base) solid var(--border);
    background: var(--background);
  }

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

  .ds-section__header {
    display: grid;
    grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 0.68fr);
    gap: var(--space-8);
    align-items: start;
    margin-bottom: var(--space-10);
  }

  .ds-section__header > span {
    padding-top: var(--space-2);
  }

  .ds-section__header p {
    grid-column: 2;
    margin-top: calc(var(--space-4) * -1);
  }

  .ds-rule-grid,
  .ds-contract-grid,
  .ds-spec-grid,
  .ds-token-grid,
  .ds-card-demo,
  .ds-icon-grid,
  .ds-quote-grid,
  .ds-eyebrow-grid,
  .ds-code-grid,
  .ds-reference-pages,
  .ds-runtime-grid,
  .ds-hero-types {
    display: grid;
    border: var(--border-width-base) solid var(--border);
    background: var(--border);
    gap: var(--border-width-base);
  }

  .ds-card-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-8);
  }

  .ds-rule-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ds-rule-grid article,
  .ds-contract-card,
  .ds-spec-card,
  .ds-token,
  .ds-card-demo article,
  .ds-icon-grid article,
  .ds-quote-card,
  .ds-eyebrow-grid article,
  .ds-code-card,
  .ds-hero-type {
    min-width: 0;
    background: var(--background);
    padding: var(--space-6);
  }

  .ds-card-type {
    display: flex;
    min-height: 20rem;
    flex-direction: column;
    border: var(--border-width-base) solid var(--border);
    background: var(--background);
    padding: var(--space-8);
    overflow: visible;
  }

  .ds-section--alt .ds-rule-grid article,
  .ds-section--alt .ds-contract-card,
  .ds-section--alt .ds-spec-card,
  .ds-section--alt .ds-token,
  .ds-section--alt .ds-card-demo article,
  .ds-section--alt .ds-icon-grid article,
  .ds-section--alt .ds-quote-card,
  .ds-section--alt .ds-eyebrow-grid article,
  .ds-section--alt .ds-code-card,
  .ds-section--alt .ds-hero-type {
    background: var(--surface-dim);
  }

  .ds-section--alt .ds-card-type {
    background: var(--background);
  }

  .ds-section--alt .ds-contract-card {
    background: var(--background);
  }

  .ds-rule-grid h3,
  .ds-contract-card h3,
  .ds-spec-card h3,
  .ds-card-demo h3,
  .ds-icon-grid h3,
  .ds-quote-grid h3,
  .ds-eyebrow-grid h3,
  .ds-code-grid h3,
  .ds-runtime-grid h3,
  .ds-card-types h3,
  .ds-hero-types h3 {
    margin-top: var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--foreground);
  }

  .ds-rule-grid p,
  .ds-contract-card p,
  .ds-spec-card p,
  .ds-card-demo p,
  .ds-icon-grid p,
  .ds-quote-grid p,
  .ds-eyebrow-grid p,
  .ds-code-grid p,
  .ds-runtime-grid p,
  .ds-card-types p,
  .ds-hero-types p {
    margin-top: var(--space-4);
    font-size: var(--fs-body);
  }

  .ds-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-contract-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ds-contract-card > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--fs-chip);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ds-accent-text);
  }

  .ds-contract-card code,
  .ds-reference-table code,
  .ds-reference-quote code,
  .ds-audit-rule code,
  .ds-state-list code,
  .ds-code-card code,
  .ds-runtime-grid code,
  .ds-card-types code,
  .ds-hero-types code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    color: var(--foreground);
  }

  .ds-contract-card ul {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-left: var(--space-6);
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    list-style-position: outside;
    list-style-type: disc;
  }

  .ds-contract-card li::marker {
    color: var(--ds-accent-text);
  }

  .ds-state-list {
    display: grid;
    grid-template-columns: minmax(7rem, 0.18fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
    border: var(--border-width-base) solid var(--border);
    background: var(--background);
    padding: var(--space-4) var(--space-6);
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
  }

  .ds-state-list > span {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .ds-audit-rule {
    display: grid;
    grid-template-columns: minmax(8rem, 0.2fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
    margin-top: var(--space-8);
    border-top: var(--border-width-base) solid var(--border);
    border-bottom: var(--border-width-base) solid var(--border);
    padding: var(--space-6) 0;
    color: var(--text-m);
  }

  .ds-audit-rule > span {
    color: var(--ds-accent-text);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .ds-audit-rule p {
    max-width: 74ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
  }

  .ds-audit-rule--compact {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    min-height: 0;
    margin-top: var(--space-6);
    padding-block: var(--space-4);
  }

  .ds-reference-quote {
    position: relative;
    margin: var(--space-8) 0 0;
    padding: var(--space-3) 0 0;
    overflow: visible;
  }

  .ds-reference-quote__mark {
    position: absolute;
    top: calc(var(--space-6) * -1);
    left: 0;
    color: var(--ds-accent-text);
    font-family: var(--font-heading);
    font-size: clamp(4.75rem, 10vw, 7.5rem);
    font-weight: 900;
    line-height: 1;
    opacity: 0.24;
    pointer-events: none;
  }

  .ds-reference-quote p {
    position: relative;
    max-width: 64ch;
    margin: 0;
    padding-left: var(--space-6);
    color: var(--foreground);
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 1.4vw, 1.75rem);
    font-style: italic;
    line-height: 1.22;
  }

  .ds-reference-quote cite {
    position: relative;
    display: block;
    margin-top: var(--space-6);
    padding-left: var(--space-6);
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
  }

  .ds-reference-table {
    border: var(--border-width-base) solid var(--border);
    background: var(--background);
    margin-bottom: var(--space-8);
  }

  .ds-reference-table__row {
    display: grid;
    grid-template-columns: minmax(10rem, 0.28fr) minmax(12rem, 0.26fr) minmax(0, 0.46fr);
    border-bottom: var(--border-width-base) solid var(--border);
  }

  .ds-reference-table--type .ds-reference-table__row {
    grid-template-columns: minmax(9rem, 0.2fr) minmax(5rem, 0.12fr) minmax(0, 0.43fr) minmax(
        12rem,
        0.25fr
      );
  }

  .ds-reference-table__row:last-child {
    border-bottom: 0;
  }

  .ds-reference-table__row > span,
  .ds-reference-table__row > code {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: var(--space-4);
    border-right: var(--border-width-base) solid var(--border);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .ds-reference-table__row > span:last-child,
  .ds-reference-table__row > code:last-child {
    border-right: 0;
  }

  .ds-reference-table__row--head {
    background: var(--surface-dim);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .ds-state-list p {
    max-width: 62ch;
    margin: 0;
    color: var(--text-m);
    font-size: var(--fs-body);
    line-height: 1.55;
  }

  .ds-spec-card--wide {
    grid-column: span 1;
  }

  .ds-button-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .ds-secondary-button,
  .ds-tertiary-button,
  .ds-ghost-button,
  .ds-nav-button {
    max-width: 100%;
    min-width: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ds-nav-button {
    position: relative;
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-6);
    background: var(--ink-deep);
    border: 1px solid var(--tacet-orange);
    box-shadow: none;
    font-family: var(--font-body);
    color: var(--beige-50);
  }

  .ds-nav-button::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0.875rem;
    height: 0.875rem;
    background: var(--tacet-orange);
    pointer-events: none;
  }

  .ds-nav-button:hover,
  .ds-nav-button:focus-visible {
    background: var(--tacet-orange-on-light);
    border-color: var(--ink-deep);
    color: var(--beige-50);
  }

  .ds-nav-button:hover::after,
  .ds-nav-button:focus-visible::after {
    background: var(--ink-deep);
  }

  .ds-spec-card .system-cta-primary,
  .ds-spec-card .system-cta-secondary,
  .ds-spec-card .system-cta-ghost,
  .ds-spec-card .btn {
    max-width: 100%;
    min-width: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ds-icon-grid,
  .ds-quote-grid,
  .ds-eyebrow-grid,
  .ds-code-grid,
  .ds-reference-pages,
  .ds-hero-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-reference-pages article {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: var(--border-width-base) solid var(--border);
    background: var(--background);
  }

  .ds-reference-pages article > span {
    color: var(--ds-accent-text);
    font-family: var(--font-body);
    font-size: var(--fs-chip);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
  }

  .ds-case-normal {
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .ds-reference-pages h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
  }

  .ds-reference-pages a {
    display: inline-flex;
    min-width: var(--space-6);
    min-height: var(--space-6);
    align-items: center;
    color: var(--foreground);
    text-decoration-thickness: var(--border-width-base);
    text-underline-offset: 0.18em;
  }

  .ds-reference-pages p {
    max-width: 56ch;
    margin: 0;
    color: var(--text-m);
    font-size: var(--fs-body);
    line-height: 1.55;
  }

  .ds-big-icon {
    width: var(--space-16);
    height: var(--space-16);
    color: var(--ds-accent-text);
  }

  .ds-icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
  }

  .ds-icon svg {
    width: 100%;
    height: 100%;
  }

  .ds-icon--xs {
    font-size: 0.8125rem;
  }

  .ds-icon--sm {
    font-size: 0.875rem;
  }

  .ds-icon--md {
    font-size: 1rem;
  }

  .ds-icon--lg {
    font-size: 1.125rem;
  }

  .ds-icon-grid h3 {
    margin-top: var(--space-8);
  }

  .ds-quote-card > span,
  .ds-code-card > span {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-chip);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ds-accent-text);
  }

  .ds-quote-card > span {
    font-family: var(--font-body);
  }

  .ds-code-card > span {
    font-family: var(--font-mono);
  }

  .ds-quote-card .ds-reference-quote {
    margin-top: var(--space-6);
  }

  .ds-reference-quote--packet {
    overflow: hidden;
    border: var(--border-width-base) solid var(--border);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--org), transparent 92%), transparent 48%),
      var(--surface-container);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
  }

  .ds-reference-quote--packet .ds-reference-quote__mark {
    top: var(--space-2);
    left: var(--space-4);
    color: var(--org-on-light);
    font-size: clamp(3.75rem, 7vw, 5rem);
    opacity: 0.18;
  }

  .ds-reference-quote--packet p {
    max-width: 18ch;
    padding-left: 0;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-style: normal;
    font-weight: 700;
    letter-spacing: var(--tacet-type-hero-track);
    line-height: 1;
    text-wrap: balance;
  }

  .ds-reference-quote--packet cite {
    padding-left: 0;
    color: var(--org-on-light);
    letter-spacing: 0;
    text-transform: none;
  }

  .ds-reference-quote--rail {
    display: grid;
    grid-template-columns: minmax(5rem, 0.18fr) minmax(0, 0.82fr);
    gap: var(--space-6);
    border-top: var(--border-width-base) solid var(--border);
    border-bottom: var(--border-width-base) solid var(--border);
    padding-block: var(--space-6);
  }

  .ds-reference-quote--rail::before {
    content: 'Quote';
    color: var(--org-on-light);
    font-family: var(--font-body);
    font-size: var(--fs-chip);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .ds-reference-quote--rail p,
  .ds-reference-quote--rail cite {
    grid-column: 2;
    padding-left: 0;
  }

  .ds-reference-quote--rail p {
    max-width: 48ch;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 1.8vw, 1.85rem);
    font-style: normal;
    font-weight: 650;
    letter-spacing: var(--tacet-type-section-track);
    line-height: 1.12;
  }

  .ds-reference-quote--rail cite {
    margin-top: var(--space-2);
    letter-spacing: 0;
    text-transform: none;
  }

  .ds-code-card--wide {
    grid-column: span 2;
  }

  .ds-code-window {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: var(--space-6);
    border: var(--border-width-base) solid var(--border);
    background: var(--surface-container-highest);
    color: var(--foreground);
    overflow: hidden;
  }

  .ds-code-window code {
    color: inherit;
    font-size: inherit;
  }

  .ds-code-window__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width-base) solid var(--border);
    background: var(--background);
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
  }

  .ds-code-block {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--space-4);
    overflow-x: auto;
    background: var(--surface-container-highest);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.75;
    white-space: pre;
  }

  .ds-code-block code {
    display: block;
    width: max-content;
    min-width: 100%;
  }

  .ds-code-block:focus-visible {
    outline: var(--outline-width) solid var(--ring);
    outline-offset: calc(var(--outline-offset) * -1);
  }

  .ds-code-comment {
    color: var(--text-m);
  }

  .ds-code-string {
    color: var(--grn-on-light);
  }

  .ds-code-key {
    color: var(--ds-accent-text);
  }

  .ds-code-inline-stack {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .ds-code-inline-stack code {
    display: block;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-base) solid var(--border);
    background: var(--background);
    color: var(--foreground);
    overflow-wrap: anywhere;
  }

  .ds-code-inline-stack .ds-code-comment {
    color: var(--text-m);
  }

  .ds-code-inline-stack .ds-code-string {
    color: var(--gold-on-light);
  }

  .ds-code-inline-stack .ds-code-key {
    color: var(--ds-accent-text);
  }

  .ds-eyebrow-grid article {
    min-height: 16rem;
  }

  .ds-eyebrow-grid .ds-eyebrow-pattern {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 0.55fr);
    gap: clamp(var(--space-8), 6vw, var(--space-16));
    min-height: 0;
    align-items: end;
    padding: clamp(var(--space-8), 5vw, var(--space-16));
  }

  .ds-eyebrow-pattern__specimen {
    min-width: 0;
  }

  .ds-eyebrow-grid .ds-eyebrow-pattern__title {
    max-width: 19ch;
    margin-top: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 4.75rem);
    font-weight: 760;
    letter-spacing: 0;
    line-height: 0.98;
    text-transform: none;
  }

  .ds-eyebrow-grid .ds-eyebrow-pattern__summary {
    max-width: 58ch;
    margin-top: var(--space-6);
    font-size: var(--fs-subhead);
  }

  .ds-eyebrow-pattern__anatomy {
    padding-block: var(--space-4);
    border-top: var(--border-width-base) solid var(--border);
    border-bottom: var(--border-width-base) solid var(--border);
  }

  .ds-eyebrow-pattern__anatomy > span {
    color: var(--ds-accent-text);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: none;
  }

  .ds-eyebrow-pattern__anatomy dl {
    margin-top: var(--space-5);
  }

  .ds-eyebrow-pattern__anatomy dl > div {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-top: var(--border-width-base) solid var(--border);
  }

  .ds-eyebrow-pattern__anatomy dt {
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
  }

  .ds-eyebrow-pattern__anatomy dd {
    color: var(--text-m);
    font-size: var(--fs-xs);
    line-height: 1.45;
  }

  .ds-eyebrow-sample {
    min-height: 3rem;
    margin-bottom: var(--space-8);
  }

  .ds-eyebrow-sample--feature {
    display: inline-flex;
    align-items: center;
    gap: 0;
  }

  .ds-feature-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: calc(var(--space-8) + var(--space-1));
    border: 1.5px solid var(--foreground);
    background: var(--background);
    box-shadow: 3px 3px 0 var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    font-weight: 700;
    color: var(--foreground);
  }

  .ds-feature-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-m);
  }

  .ds-feature-label::before {
    content: attr(data-domain);
    display: inline-flex;
    align-items: center;
    height: var(--space-8);
    padding-inline: var(--space-3);
    background: var(--foreground);
    color: var(--background);
  }

  .ds-eyebrow-sample--section,
  .ds-eyebrow-sample--card,
  .ds-eyebrow-sample--badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--fs-chip);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
  }

  .ds-eyebrow-sample--section span,
  .ds-eyebrow-sample--card span {
    display: inline-flex;
    align-items: center;
    background: var(--foreground);
    color: var(--background);
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-label);
  }

  .ds-eyebrow-sample--badge span {
    width: var(--space-2);
    aspect-ratio: 1;
    background: var(--red);
  }

  .ds-token-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ds-token {
    display: grid;
    gap: var(--space-4);
    min-height: 13rem;
  }

  .ds-token span {
    min-height: var(--space-16);
    border: var(--border-width-base) solid var(--border);
    background: var(--ds-token-color);
  }

  .ds-token--background {
    --ds-token-color: var(--background);
  }

  .ds-token--foreground {
    --ds-token-color: var(--foreground);
  }

  .ds-token--border {
    --ds-token-color: var(--border);
  }

  .ds-token--red {
    --ds-token-color: var(--red);
  }

  .ds-token--tacet-orange,
  .ds-token--org {
    --ds-token-color: var(--tacet-orange);
  }

  .ds-token--grn {
    --ds-token-color: var(--grn);
  }

  .ds-token--ylw {
    --ds-token-color: var(--ylw);
  }

  .ds-token--pur {
    --ds-token-color: var(--pur);
  }

  .ds-token--surface-dim {
    --ds-token-color: var(--surface-dim);
  }

  .ds-token--radius-lg {
    --ds-token-color: var(--surface-container);
  }

  .ds-token--radius-lg span {
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border);
  }

  .ds-token--shadow-sm,
  .ds-token--shadow-hard-md {
    --ds-token-color: var(--surface-container);
  }

  .ds-token--shadow-sm span {
    box-shadow: var(--shadow-sm);
  }

  .ds-token--shadow-hard-md span {
    box-shadow: var(--shadow-hard-md);
  }

  .ds-token strong {
    align-self: end;
    font-family: var(--font-heading);
    font-size: var(--fs-title);
    font-weight: 900;
    line-height: 1;
    color: var(--foreground);
  }

  .ds-type-sample {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    color: var(--foreground);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: none;
    overflow-wrap: anywhere;
  }

  .ds-type-sample--micro {
    gap: var(--space-1);
    min-width: var(--space-12);
    height: var(--space-2);
  }

  .ds-type-sample--micro::before,
  .ds-type-sample--micro::after {
    content: '';
    width: var(--space-6);
    height: var(--border-width-base);
    background: var(--foreground);
  }

  .ds-type-sample--caption {
    font-size: var(--fs-caption);
  }

  .ds-type-sample--label {
    font-size: var(--fs-label);
  }

  .ds-type-sample--chip {
    font-size: var(--fs-chip);
  }

  .ds-type-sample--xs {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  .ds-type-sample--body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  .ds-card-demo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-runtime-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ds-runtime-card {
    min-width: 0;
    padding: var(--space-6);
    background: var(--background);
  }

  .ds-runtime-card > span,
  .ds-runtime-packet,
  .ds-runtime-nav,
  .ds-runtime-diagram,
  .ds-runtime-trace,
  .ds-runtime-credit {
    font-family: var(--font-mono);
  }

  .ds-runtime-card > span {
    display: inline-flex;
    color: var(--tacet-orange-on-light);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
  }

  .ds-runtime-packet,
  .ds-runtime-nav,
  .ds-runtime-diagram,
  .ds-runtime-trace,
  .ds-runtime-credit {
    margin-top: var(--space-6);
    border: var(--border-width-base) solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-container);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .ds-runtime-packet,
  .ds-runtime-section,
  .ds-runtime-trace,
  .ds-runtime-credit {
    display: grid;
  }

  .ds-runtime-packet span,
  .ds-runtime-section span,
  .ds-runtime-trace span,
  .ds-runtime-credit span {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width-base) solid var(--border);
    color: var(--text-m);
    font-size: var(--fs-xs);
  }

  .ds-runtime-packet span:last-child,
  .ds-runtime-section span:last-child,
  .ds-runtime-trace span:last-child,
  .ds-runtime-credit span:last-child {
    border-bottom: 0;
  }

  .ds-runtime-packet b,
  .ds-runtime-section b,
  .ds-runtime-trace b,
  .ds-runtime-credit b {
    color: var(--foreground);
    font-weight: 700;
  }

  .ds-runtime-packet b:last-child,
  .ds-runtime-section b:last-child,
  .ds-runtime-trace b:last-child,
  .ds-runtime-credit b:last-child {
    color: var(--tacet-orange-on-light);
  }

  .ds-runtime-credit {
    position: relative;
    background:
      linear-gradient(
        90deg,
        color-mix(in oklch, var(--tacet-orange), transparent 94%) 0 1px,
        transparent 1px 100%
      ),
      var(--surface-container);
    background-size: 2rem 100%;
  }

  .ds-runtime-credit strong {
    padding: var(--space-8) var(--space-4);
    border-bottom: var(--border-width-base) solid var(--border);
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5.4vw, 4.75rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.9;
  }

  .ds-runtime-section {
    margin-top: var(--space-6);
    border-top: var(--border-width-base) solid var(--border);
    border-bottom: var(--border-width-base) solid var(--border);
    font-family: var(--font-mono);
  }

  .ds-runtime-eyebrow-sample {
    margin-top: var(--space-6);
  }

  .ds-runtime-nav {
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--radius-none);
    box-shadow: none;
  }

  .ds-runtime-nav a {
    flex: 1 1 auto;
    min-width: 8rem;
    padding: var(--space-3) var(--space-4);
    border-right: var(--border-width-base) solid var(--border);
    color: var(--text-m);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }

  .ds-runtime-nav a:last-child {
    border-right: 0;
  }

  .ds-runtime-nav a[aria-current='true'] {
    background: var(--foreground);
    color: var(--background);
  }

  .ds-runtime-nav a:focus-visible {
    outline: var(--outline-width) solid var(--ring);
    outline-offset: calc(var(--outline-offset) * -1);
  }

  .ds-runtime-diagram {
    border-radius: var(--radius-lg);
  }

  .ds-runtime-diagram > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width-base) solid var(--border);
    color: var(--text-m);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .ds-runtime-diagram svg {
    display: block;
    width: 100%;
    height: auto;
    padding: var(--space-6);
  }

  .ds-runtime-diagram circle {
    fill: color-mix(in oklch, var(--tacet-orange), var(--background) 86%);
    stroke: var(--foreground);
    stroke-width: 2;
  }

  .ds-runtime-diagram path {
    fill: none;
    stroke: var(--tacet-orange-on-light);
    stroke-width: 2;
    stroke-linecap: square;
  }

  .ds-runtime-card--local {
    border: var(--border-width-base) dashed var(--border);
    background: color-mix(in oklch, var(--surface-container), var(--background) 64%);
  }

  .ds-card-type h3 {
    max-width: 14ch;
  }

  .ds-card-type p {
    max-width: 48ch;
  }

  .ds-card-type--base {
    transition:
      box-shadow var(--duration-normal) var(--ease-standard),
      transform var(--duration-normal) var(--ease-standard);
  }

  .ds-card-type--base:hover {
    box-shadow: var(--shadow-4);
    transform: translate(-2px, -2px);
  }

  .ds-card-type--agent {
    padding: var(--space-8) var(--space-6);
  }

  .ds-card-brow {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-chip);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-m);
  }

  .ds-card-brow span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-2);
    background: var(--foreground);
    color: var(--background);
    letter-spacing: 0.06em;
  }

  .ds-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: var(--border-width-base) dashed var(--border);
    font-family: var(--font-mono);
    font-size: var(--fs-chip);
    font-weight: 700;
    color: var(--ds-accent-text);
  }

  .ds-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .ds-card-type--skill {
    margin-right: var(--space-2);
    margin-bottom: var(--space-2);
    padding: var(--space-10);
    border-color: var(--foreground);
    background: color-mix(in oklch, var(--surface-container), var(--background) 68%);
    box-shadow: var(--space-2) var(--space-2) 0 var(--foreground);
  }

  .ds-card-type--skill > span {
    align-self: flex-start;
    padding: var(--space-2) var(--space-4);
    background: var(--foreground);
    color: var(--background);
  }

  .ds-card-type--skill h3 {
    margin-top: var(--space-12);
    padding-bottom: var(--space-6);
    border-bottom: var(--border-width-base) solid var(--foreground);
    max-width: 18ch;
  }

  .ds-card-type--tool {
    background: var(--background);
  }

  .ds-card-type--catalog {
    background: color-mix(in oklch, var(--ylw), var(--background) 76%);
  }

  .ds-card-type--catalog p {
    color: var(--foreground);
  }

  .ds-card-type--live {
    border-color: color-mix(in oklch, var(--foreground), transparent 88%);
    border-radius: var(--space-2);
    background: oklch(99% 0.005 78);
    box-shadow: 0 0 0 var(--border-width-base) oklch(14.1% 0.005 285.823 / 0.08);
  }

  .ds-card-type--live > span {
    color: var(--text-m);
  }

  .ds-card-type--live h3 {
    font-family: var(--font-body);
    font-size: var(--fs-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: none;
  }

  html.dark .ds-card-type--live {
    background: oklch(18% 0.012 78);
  }

  .ds-card-demo a,
  .ds-card-demo button,
  .ds-card-type button {
    display: inline-flex;
    min-height: var(--space-6);
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding: 0 0 var(--space-1);
    border: 0;
    border-bottom: var(--border-width-base) solid var(--ds-accent-text);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ds-accent-text);
    cursor: pointer;
  }

  .ds-spec-card :is(a, button):focus-visible,
  .ds-card-demo :is(a, button):focus-visible,
  .ds-card-type button:focus-visible {
    outline: var(--outline-width) solid var(--ring);
    outline-offset: var(--outline-offset);
  }

  .ds-hero-mini {
    width: 100%;
    height: 100%;
    background: var(--background);
  }

  .ds-hero-frame {
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-6);
    border: var(--border-width-base) solid var(--border);
    background: var(--background);
    overflow: hidden;
  }

  .ds-hero-mini--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-hero-mini--split > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-8);
    border-right: var(--border-width-base) solid var(--border);
  }

  .ds-hero-mini--split > div:last-child {
    border-right: 0;
    background: var(--surface-dim);
  }

  .ds-hero-mini span {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-m);
  }

  .ds-hero-mini strong {
    display: block;
    max-width: 100%;
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--foreground);
    overflow-wrap: anywhere;
  }

  .ds-hero-mini--standard,
  .ds-hero-mini--runtime,
  .ds-hero-mini--editorial-left,
  .ds-hero-mini--monumental,
  .ds-hero-mini--feature {
    padding: var(--space-8);
  }

  .ds-hero-mini--standard,
  .ds-hero-mini--runtime {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.42fr);
  }

  .ds-hero-mini--standard > div,
  .ds-hero-mini--standard > aside,
  .ds-hero-mini--runtime > div,
  .ds-hero-mini--runtime > aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ds-hero-mini--standard > aside,
  .ds-hero-mini--runtime > aside {
    padding-left: var(--space-6);
    border-left: var(--border-width-base) solid var(--border);
    background: var(--surface-dim);
  }

  .ds-hero-mini--standard > aside strong {
    color: var(--tacet-orange-on-light);
  }

  .ds-hero-mini--standard p,
  .ds-hero-mini--runtime p,
  .ds-hero-mini--editorial-left p {
    margin-top: var(--space-4);
    padding-left: var(--space-4);
    border-left: var(--border-width-base) solid var(--border);
    max-width: 32ch;
    font-size: var(--fs-xs);
  }

  .ds-hero-mini--runtime {
    position: relative;
    background:
      linear-gradient(
        90deg,
        color-mix(in oklch, var(--tacet-orange), transparent 95%) 0 1px,
        transparent 1px 100%
      ),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--tacet-orange), transparent 95%) 0 1px,
        transparent 1px 100%
      ),
      var(--background);
    background-size: 18% 18%;
  }

  .ds-hero-mini--runtime > div > span,
  .ds-hero-mini--runtime strong span,
  .ds-hero-mini--runtime > aside strong {
    color: var(--tacet-orange-on-light);
  }

  .ds-hero-mini--runtime > aside {
    gap: var(--space-2);
  }

  .ds-hero-mini--runtime > aside span {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: var(--border-width-base) solid var(--border);
    padding-block: var(--space-2);
  }

  .ds-hero-mini--runtime > aside span:last-child {
    border-bottom: 0;
  }

  .ds-hero-mini--editorial-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: var(--background);
  }

  .ds-hero-mini--editorial-left strong {
    max-width: 9ch;
    font-size: clamp(3rem, 7vw, 5.5rem);
    text-transform: none;
  }

  .ds-hero-mini--editorial-left strong span {
    color: var(--tacet-orange-on-light);
  }

  .ds-hero-mini--monumental {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .ds-hero-mini--monumental strong {
    font-size: clamp(3rem, 7vw, 5.5rem);
  }

  .ds-hero-mini--feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--surface-dim);
  }

  .ds-hero-mini--feature strong {
    margin-top: var(--space-6);
    font-size: clamp(2.5rem, 5vw, 4.25rem);
  }

  /* The reference page demonstrates Tacet's sentence-case default. Capitals
     remain meaningful for acronyms, protocols, and literal code specimens. */
  .tacet-design-system-page
    :is(
      .ds-section__header > span,
      .ds-rule-grid article > span,
      .ds-reference-pages article > span,
      .ds-contract-card > span,
      .ds-spec-card__meta,
      .ds-state-list > span,
      .ds-audit-rule > span,
      .ds-reference-table__row--head,
      .ds-icon-grid article > span,
      .ds-quote-card > span,
      .ds-eyebrow-pattern__anatomy > span,
      .ds-code-card > span,
      .ds-card-type > span,
      .ds-runtime-card > span
    ) {
    letter-spacing: 0.08em;
    text-transform: none;
  }

  .tacet-design-system-page
    :is(.btn, .ds-card-type button, .ds-nav-button, .tacet-design-system-nav a) {
    text-transform: none;
  }

  @media (max-width: 64rem) {
    .ds-section__header,
    .ds-rule-grid,
    .ds-contract-grid,
    .ds-spec-grid,
    .ds-token-grid,
    .ds-card-demo,
    .ds-icon-grid,
    .ds-quote-grid,
    .ds-eyebrow-grid,
    .ds-code-grid,
    .ds-runtime-grid,
    .ds-reference-pages,
    .ds-card-types,
    .ds-hero-types {
      grid-template-columns: 1fr;
    }

    .ds-reference-quote--rail {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    .ds-reference-quote--rail p,
    .ds-reference-quote--rail cite {
      grid-column: 1;
    }

    .ds-section__header p,
    .ds-code-card--wide {
      grid-column: auto;
    }

    .ds-eyebrow-grid .ds-eyebrow-pattern {
      grid-template-columns: 1fr;
    }

    .ds-state-list {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    .ds-audit-rule {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    .ds-reference-table__row {
      grid-template-columns: 1fr;
    }

    .ds-reference-table--type .ds-reference-table__row {
      grid-template-columns: 1fr;
    }

    .ds-reference-table__row > span,
    .ds-reference-table__row > code {
      border-right: 0;
      border-bottom: var(--border-width-base) solid var(--border);
    }

    .ds-reference-table__row > span:last-child,
    .ds-reference-table__row > code:last-child {
      border-bottom: 0;
    }
  }

  @media (max-width: 40rem) {
    .ds-wrap {
      padding-inline: var(--space-4);
    }

    .ds-hero-mini--split > div,
    .ds-hero-mini--standard,
    .ds-hero-mini--runtime,
    .ds-hero-mini--editorial-left,
    .ds-hero-mini--monumental,
    .ds-hero-mini--feature {
      padding: var(--space-4);
    }

    .ds-hero-mini--standard,
    .ds-hero-mini--runtime {
      grid-template-columns: 1fr;
    }

    .ds-hero-mini--standard > aside,
    .ds-hero-mini--runtime > aside {
      margin-top: var(--space-4);
      padding-top: var(--space-4);
      padding-left: 0;
      border-top: var(--border-width-base) solid var(--border);
      border-left: 0;
    }

    .ds-hero-mini strong,
    .ds-hero-mini--editorial-left strong,
    .ds-hero-mini--monumental strong,
    .ds-hero-mini--feature strong {
      font-size: clamp(1.75rem, 11vw, 3rem);
      line-height: 0.9;
    }

    .ds-hero-mini--standard p {
      max-width: none;
    }
  }

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

  /* -- Proto diagram zoom shell ------------------------------------------ */
  .proto-diagram-shell {
    --tacet-diagram-label-size: clamp(0.5rem, 0.47rem + 0.16vw, 0.8125rem);
    --tacet-diagram-min-width: 58rem;
    position: relative;
    overflow: visible;
  }

  .proto-saas .observed:has(.proto-diagram-shell) {
    transform: none !important;
  }

  .proto-diagram-toolbar {
    position: relative;
    z-index: 8;
    width: max-content;
    margin-left: auto;
    margin-bottom: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.375rem;
    border: var(--border-width-base) solid color-mix(in oklch, var(--border), var(--ink-deep) 10%);
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--card), transparent 10%);
    box-shadow: 0 0.75rem 2rem color-mix(in oklch, var(--ink-deep), transparent 90%);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 180ms ease,
      transform 180ms ease;
    backdrop-filter: blur(12px);
  }

  .proto-diagram-shell[data-diagram-active='true'] > .proto-diagram-toolbar {
    position: fixed;
    top: calc(clamp(9.25rem, 15vh, 11.25rem) + 0.875rem);
    right: max(1rem, calc((100vw - min(88rem, 100vw)) / 2 + 1rem));
    z-index: 42;
    margin: 0;
  }

  .proto-diagram-toolbar__title {
    display: none;
    max-width: none;
    padding-inline-start: 0;
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: max(0.5rem, 0.75rem);
    font-weight: 700;
    letter-spacing: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .proto-diagram-toolbar__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: max(0.5rem, 0.6875rem);
    white-space: nowrap;
  }

  .proto-diagram-toolbar__controls button,
  .proto-diagram-toolbar__controls [data-proto-diagram-status] {
    min-width: 2.125rem;
    height: 2.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-base) solid color-mix(in oklch, var(--border), var(--ink-deep) 8%);
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--card), transparent 12%);
    color: var(--foreground);
    font: inherit;
    line-height: 1;
  }

  .proto-diagram-toolbar__controls button {
    gap: 0.375rem;
    padding-inline: 0.75rem;
    cursor: pointer;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      transform 160ms ease;
  }

  .proto-diagram-toolbar__controls button:hover {
    border-color: color-mix(in oklch, var(--org-on-light), var(--border) 45%);
    background: color-mix(in oklch, var(--org), transparent 92%);
    color: var(--org-on-light);
  }

  .proto-diagram-toolbar__controls button:active {
    transform: translateY(1px);
  }

  .proto-diagram-toolbar__controls button:focus-visible {
    outline: 2px solid var(--org-on-light);
    outline-offset: 2px;
  }

  .proto-diagram-toolbar__controls [data-proto-diagram-status] {
    min-width: 3rem;
    color: var(--text-m);
  }

  .proto-diagram-toolbar__controls svg {
    width: 1rem;
    height: 1rem;
  }

  .proto-diagram-viewport {
    overflow: visible;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--ink-deep), transparent 78%) transparent;
  }

  .proto-diagram-viewport::-webkit-scrollbar {
    height: 0.5rem;
    width: 0.5rem;
  }

  .proto-diagram-viewport::-webkit-scrollbar-thumb {
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--ink-deep), transparent 82%);
  }

  .proto-diagram-canvas {
    width: 100%;
    min-width: 0;
    padding: 0;
    transform-origin: 0 0;
    transition: transform 180ms ease;
  }

  .proto-diagram-shell[data-diagram-ready='true'] .proto-diagram-viewport {
    overflow-x: visible;
    overflow-y: visible;
    cursor: auto;
    touch-action: auto;
  }

  .proto-diagram-shell:is(:hover, :focus-within),
  .proto-diagram-shell[data-controls-visible='true'],
  .proto-diagram-shell[data-diagram-zoomed='true'] {
    z-index: 2;
  }

  .proto-diagram-shell
    :is(
      .text-\[6px\],
      .text-\[7px\],
      .text-\[8px\],
      .text-\[9px\],
      .text-label,
      .text-xs,
      small,
      code,
      text
    ) {
    font-size: max(8px, var(--tacet-diagram-label-size)) !important;
  }

  .proto-diagram-shell
    :is(.font-heading.text-\[9px\], .font-heading.text-label, .font-heading.text-xs) {
    font-size: max(0.625rem, calc(var(--tacet-diagram-label-size) + 0.0625rem)) !important;
  }

  @media (min-width: 64rem) {
    .proto-diagram-shell {
      --tacet-diagram-label-size: clamp(0.625rem, 0.55rem + 0.18vw, 0.875rem);
    }

    .proto-diagram-canvas {
      width: 100%;
      min-width: 0;
    }
  }

  @media (max-width: 48rem) {
    .proto-diagram-shell {
      margin-inline: calc(var(--space-2) * -1);
    }

    .proto-diagram-toolbar {
      top: clamp(8rem, 14vh, 9.5rem);
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.375rem;
      border-radius: 0.5rem;
    }

    .proto-diagram-toolbar__controls {
      justify-content: flex-start;
      overflow-x: auto;
      padding-bottom: 0.125rem;
    }

    .proto-diagram-toolbar__controls button span {
      max-width: 15rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  html.proto-diagram-modal-open,
  body.proto-diagram-modal-open {
    overflow: hidden;
  }

  .proto-diagram-modal[hidden] {
    display: none;
  }

  .proto-diagram-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 2vw, 1.5rem);
  }

  .proto-diagram-modal__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in oklch, var(--ink-deep), transparent 28%);
  }

  .proto-diagram-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(92rem, 100%);
    height: min(52rem, 100%);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: var(--border-width-base) solid color-mix(in oklch, var(--border), var(--ink-deep) 16%);
    border-radius: 0.75rem;
    background: var(--background);
    box-shadow: 0 2rem 5rem color-mix(in oklch, var(--ink-deep), transparent 72%);
    overflow: hidden;
  }

  .proto-diagram-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem;
    border-bottom: var(--border-width-base) solid var(--border);
    background: color-mix(in oklch, var(--beige-100), transparent 34%);
  }

  .proto-diagram-modal__title {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.2vw, 0.9375rem);
    font-weight: 700;
    letter-spacing: 0;
  }

  .proto-diagram-modal__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    white-space: nowrap;
  }

  .proto-diagram-modal__controls button,
  .proto-diagram-modal__status {
    min-width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-base) solid color-mix(in oklch, var(--border), var(--ink-deep) 10%);
    border-radius: 0.5rem;
    background: color-mix(in oklch, var(--card), transparent 10%);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
  }

  .proto-diagram-modal__controls button {
    cursor: pointer;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      transform 160ms ease;
  }

  .proto-diagram-modal__controls button:hover {
    border-color: color-mix(in oklch, var(--org-on-light), var(--border) 45%);
    background: color-mix(in oklch, var(--org), transparent 92%);
    color: var(--org-on-light);
  }

  .proto-diagram-modal__controls button:active {
    transform: translateY(1px);
  }

  .proto-diagram-modal__controls button:focus-visible {
    outline: 2px solid var(--org-on-light);
    outline-offset: 2px;
  }

  .proto-diagram-modal__controls svg {
    width: 1rem;
    height: 1rem;
  }

  .proto-diagram-modal__status {
    min-width: 3.375rem;
    color: var(--text-m);
  }

  .proto-diagram-modal__controls [data-diagram-action='reset'] {
    min-width: 4.5rem;
    padding-inline: 0.75rem;
  }

  .proto-diagram-modal__viewport {
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .proto-diagram-modal[data-diagram-dragging='true'] .proto-diagram-modal__viewport {
    cursor: grabbing;
  }

  .proto-diagram-modal__canvas {
    width: max-content;
    min-width: min(72rem, 100%);
    padding: clamp(1rem, 2vw, 1.5rem);
    transform-origin: 0 0;
    transition: transform 180ms ease;
    user-select: none;
    -webkit-user-select: none;
  }

  .proto-diagram-modal__canvas * {
    user-select: none;
    -webkit-user-select: none;
  }

  @media (max-width: 48rem) {
    .proto-diagram-modal {
      padding: 0.5rem;
    }

    .proto-diagram-modal__dialog {
      height: min(44rem, 96dvh);
      border-radius: 0.625rem;
    }

    .proto-diagram-modal__header {
      align-items: flex-start;
      flex-direction: column;
      gap: 0.5rem;
    }

    .proto-diagram-modal__controls {
      width: 100%;
      justify-content: flex-start;
      overflow-x: auto;
      padding-bottom: 0.125rem;
    }
  }

  /* -- Shared site-footer reveal ------------------------------------------
     Behavior stays app-owned. Separate Tacet and Swage palettes are applied
     after the generic chrome rules in @lab/chrome/assets/css/footer.css. */

  body.has-site-footer,
  body:has(.site-footer) {
    background: var(--site-footer-backdrop);
  }

  html:has(.proto-saas),
  body.has-site-footer:has(.proto-saas),
  body:has(.proto-saas):has(.site-footer) {
    --tacet-page-bg: var(--background);

    background: var(--site-footer-backdrop);
  }

  :where(.page-shell--footer-tacet, .page-shell--footer-swage) {
    --footer-underlap: clamp(2.5rem, 5vw, 5rem);
    --site-main-seam-radius: clamp(1.25rem, 2.2vw, 2rem);
    --site-main-seam-surface: var(--background);
    --tacet-page-bg: var(--background);
    --tacet-chrome-bg-depth: 46rem;
    --tacet-chrome-bg-fade-start: calc(var(--tacet-chrome-bg-depth) - 6rem);
    --tacet-chrome-bg-fade-end: calc(var(--tacet-chrome-bg-depth) + 2rem);

    position: relative;
    z-index: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    isolation: isolate;
    background: var(--site-footer-backdrop);
  }

  .page-shell--footer-tacet:has(.proto-nav)::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    height: var(--tacet-chrome-bg-fade-end);
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        rgb(255 255 255 / 0.38),
        rgb(255 255 255 / 0.1) 18rem,
        var(--tacet-page-bg) var(--tacet-chrome-bg-fade-end)
      ),
      url('../images/proto/gradient-navbar-bg.png') top center / 100% 38rem no-repeat,
      var(--tacet-page-bg);
  }

  .page-shell--footer-tacet:has(.hero-catalog)::before {
    height: 58rem;
    background:
      linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 34rem),
      url('../images/proto/gradient-navbar-bg.png') top center / 100% 58rem no-repeat,
      var(--background);
  }

  .page-shell--footer-tacet:has(.proto-saas) {
    --tacet-page-bg: var(--background);

    background: var(--site-footer-backdrop);
  }

  html.dark:has(.proto-saas),
  html.dark body.has-site-footer:has(.proto-saas),
  html.dark body:has(.proto-saas):has(.site-footer) {
    background: var(--site-footer-backdrop);
  }

  html.dark .page-shell--footer-tacet:has(.proto-saas) {
    --tacet-page-bg: var(--background);

    background: var(--site-footer-backdrop);
  }

  html.dark .page-shell--footer-tacet:has(.proto-nav)::before {
    background:
      linear-gradient(
        to bottom,
        color-mix(in oklch, var(--tacet-page-bg), transparent 42%),
        color-mix(in oklch, var(--tacet-page-bg), transparent 62%) 18rem,
        var(--tacet-page-bg) var(--tacet-chrome-bg-fade-end)
      ),
      url('../images/proto/gradient-navbar-bg.png') top center / 100% 38rem no-repeat,
      var(--tacet-page-bg);
  }

  .page-shell--footer-tacet > .proto-nav-spacer {
    position: relative;
    z-index: 1;
    background: transparent;
  }

  .page-shell--footer-tacet > #main-content {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    margin-bottom: 0;
    overflow: visible;
    border-bottom-right-radius: var(--site-main-seam-radius);
    border-bottom-left-radius: var(--site-main-seam-radius);
    background: var(--background) !important;
  }

  .page-shell--footer-swage > #main-content {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    margin-bottom: 0;
    overflow: visible;
    border-bottom-right-radius: var(--site-main-seam-radius);
    border-bottom-left-radius: var(--site-main-seam-radius);
    background: var(--background) !important;
  }

  .page-shell--footer-swage {
    --site-main-seam-surface: var(--swage-surface, var(--background));
  }

  .page-shell--footer-tacet > #main-content.tacet-byoa-page {
    --site-main-seam-surface: var(--darker);
  }

  .page-shell--footer-tacet > #main-content > .tacet-footer-seam:last-of-type {
    border-block-end: 0 !important;
    background: var(--site-main-seam-surface) !important;
  }

  /* Footer reservation is layout state, not motion. Keeping it atomic also
     prevents reduced-motion's global transition-duration override from
     briefly interpolating the main surface through an inaccessible gap. */
  :where(.page-shell--footer-tacet, .page-shell--footer-swage) > #main-content {
    transition-property: none;
  }

  :where(.page-shell--footer-tacet, .page-shell--footer-swage)[data-site-footer-layout='reveal']
    > #main-content {
    margin-bottom: var(--footer-height, 0px);
  }

  :where(.page-shell--footer-tacet, .page-shell--footer-swage)[data-site-footer-layout='flow']
    > #main-content {
    margin-bottom: 0;
  }

  .page-shell--footer-tacet > #main-content.proto-saas {
    margin-top: calc(-1 * var(--chrome-height, 0px));
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--tacet-chrome-bg-fade-start),
      var(--tacet-page-bg) var(--tacet-chrome-bg-fade-end)
    ) !important;
    padding-top: var(--chrome-height, 0px);
  }

  .page-shell--footer-tacet > #main-content.tacet-chrome-page {
    margin-top: calc(-1 * var(--chrome-height, 0px));
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--tacet-chrome-bg-fade-start),
      var(--tacet-page-bg) var(--tacet-chrome-bg-fade-end)
    ) !important;
    padding-top: var(--chrome-height, 0px);
  }

  .page-shell--footer-tacet > #main-content.tacet-design-system-page {
    --chrome-height: 0px;
    --tacet-nav-bottom: 0px;

    margin-top: 0;
    overflow-x: clip;
    padding-top: 0;
  }

  .page-shell--footer-tacet > #main-content.tacet-home-page {
    margin-top: calc(-1 * var(--chrome-height, 0px));
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 58rem,
      var(--tacet-page-bg) 58rem
    ) !important;
    padding-top: var(--chrome-height, 0px);
  }

  .page-shell--footer-tacet > #main-content.tacet-catalog-page {
    margin-top: calc(-1 * var(--chrome-height, 0px));
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--tacet-chrome-bg-fade-start),
      var(--tacet-page-bg) var(--tacet-chrome-bg-fade-end)
    ) !important;
    padding-top: var(--chrome-height, 0px);
  }

  .page-shell--footer-tacet > #main-content.main--catalog-results {
    margin-top: calc(-1 * var(--chrome-height, 0px));
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 34rem,
      var(--tacet-page-bg) 34rem
    ) !important;
    padding-top: var(--chrome-height, 0px);
  }

  .page-shell--footer-tacet > #main-content.tacet-chrome-page .erpai-hero {
    background: transparent !important;
    border-bottom: 0 !important;
  }

  :where(.page-shell--footer-tacet, .page-shell--footer-swage) > #main-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--background);
    pointer-events: none;
  }

  /* Never clip the complete main surface to obtain the footer corners. Proto
     exceeds 32k device pixels at DPR 2, where Chromium can drop raster tiles
     from a single oversized rounded clip and expose the fixed footer through
     live sections. This small in-flow cap owns only the final curve, keeping
     the long page uncomposited while preventing the last child from painting
     square corners over the seam. */
  :where(.page-shell--footer-tacet, .page-shell--footer-swage) > #main-content::after {
    content: '';
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: var(--site-main-seam-radius);
    flex: none;
    border-bottom-right-radius: var(--site-main-seam-radius);
    border-bottom-left-radius: var(--site-main-seam-radius);
    background: var(--site-main-seam-surface);
    pointer-events: none;
  }

  .page-shell--footer-tacet > #main-content.proto-saas::before {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--tacet-chrome-bg-fade-start),
      var(--tacet-page-bg) var(--tacet-chrome-bg-fade-end)
    );
  }

  .page-shell--footer-tacet > #main-content.tacet-chrome-page::before {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--tacet-chrome-bg-fade-start),
      var(--tacet-page-bg) var(--tacet-chrome-bg-fade-end)
    );
  }

  .page-shell--footer-tacet > #main-content.tacet-home-page::before {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 58rem,
      var(--tacet-page-bg) 58rem
    );
  }

  .page-shell--footer-tacet > #main-content.tacet-catalog-page::before {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--tacet-chrome-bg-fade-start),
      var(--tacet-page-bg) var(--tacet-chrome-bg-fade-end)
    );
  }

  .page-shell--footer-tacet > #main-content.main--catalog-results::before {
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent 34rem,
      var(--tacet-page-bg) 34rem
    );
  }

  .site-footer {
    --site-footer-section-pad-x: clamp(1.5rem, 4vw, 3rem);
    --site-footer-section-max: 90rem;
    --site-footer-content-rail: min(
      calc(100% - (2 * var(--site-footer-section-pad-x))),
      var(--site-footer-section-max)
    );
    --site-footer-visible-rail: min(
      calc(100% - (2 * var(--site-footer-section-pad-x))),
      calc(var(--site-footer-section-max) - (2 * var(--site-footer-section-pad-x)))
    );

    position: relative;
    z-index: 0;
    box-sizing: border-box;
    width: 100%;
    flex: none;
    isolation: isolate;
    overflow: visible;
    padding: clamp(1rem, 1.5vw, 1.5rem);
    color: var(--site-footer-ink);
    background: var(--site-footer-backdrop);
  }

  .site-footer--swage {
    --swage-footer-visible-rail: min(
      calc(100vw - (2 * var(--swage-page-frame-pad)) - (2 * var(--swage-section-pad-x))),
      calc(var(--swage-section-max) - (2 * var(--swage-section-pad-x)))
    );

    padding: var(--swage-page-frame-pad);
  }

  .site-footer--swage .site-footer__inner {
    width: var(--swage-footer-visible-rail);
    max-width: none;
  }

  :where(.page-shell--footer-tacet, .page-shell--footer-swage)[data-site-footer-layout='reveal']
    > .site-footer {
    position: fixed;
    inset: auto 0 0;
    z-index: -1;
  }

  :where(.page-shell--footer-tacet, .page-shell--footer-swage)[data-site-footer-layout='reveal']
    > .site-footer::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--site-main-seam-radius)) 0 auto;
    z-index: 0;
    height: calc(3 * var(--site-main-seam-radius));
    background: linear-gradient(
      to bottom,
      var(--site-footer-seam-surface) 0 66.666%,
      transparent 100%
    );
    pointer-events: none;
  }

  :where(.page-shell--footer-tacet, .page-shell--footer-swage)[data-site-footer-layout='flow']
    > .site-footer {
    position: relative;
    inset: auto;
    z-index: 0;
  }

  .site-footer__inner {
    position: relative;
    z-index: 1;
    width: var(--site-footer-visible-rail);
    max-width: calc(var(--site-footer-section-max) - (2 * var(--site-footer-section-pad-x)));
    margin-inline: auto;
    padding-block: clamp(1.55rem, 3vw, 2.5rem) clamp(1rem, 1.8vw, 1.5rem);
    padding-inline: 0;
  }

  .site-footer__top {
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(24rem, 1.1fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
  }

  .site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .site-footer__logo {
    display: inline-flex;
    width: min(9.6rem, 48vw);
    color: var(--site-footer-ink-strong);
  }

  .site-footer__logo img {
    display: block;
    width: 100%;
    height: auto;
    filter: var(--site-footer-logo-filter);
  }

  .site-footer__summary {
    max-width: 25rem;
    margin: 0;
    color: var(--site-footer-ink-muted);
    font-family: var(--font-body);
    font-size: clamp(0.84rem, 0.8rem + 0.16vw, 0.96rem);
    line-height: 1.5;
  }

  .site-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
  }

  .site-footer__badge-icon {
    display: inline-flex;
    width: 3.15rem;
    height: 3.15rem;
  }

  .site-footer__badges img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: var(--site-footer-icon-filter);
    opacity: 0.86;
  }

  .site-footer__social {
    display: flex;
    gap: 0.85rem;
    align-items: center;
  }

  .site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.78;
    transition:
      opacity var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .site-footer__social a:hover,
  .site-footer__social a:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
  }

  .site-footer__social img {
    width: 1.125rem;
    height: 1.125rem;
    filter: var(--site-footer-icon-filter);
  }

  @media (pointer: coarse) {
    .site-footer__social a {
      width: 2.75rem;
      height: 2.75rem;
    }

    .site-footer--swage .site-footer__social a::before,
    html:not(.dark) .site-footer--tacet .site-footer__social a::before {
      inset: 0.8125rem;
    }
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 3rem);
  }

  .site-footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__nav a {
    display: inline-flex;
    min-width: 1.5rem;
    min-height: 1.5rem;
    align-items: center;
    color: var(--site-footer-ink-muted);
    font-family: var(--font-body);
    font-size: clamp(0.82rem, 0.78rem + 0.12vw, 0.92rem);
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    transition:
      color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .site-footer__nav a:hover,
  .site-footer__nav a:focus-visible {
    color: var(--site-footer-ink-strong);
    transform: translateX(2px);
  }

  .site-footer__mark {
    position: relative;
    width: 100%;
    aspect-ratio: 768 / 204;
    height: auto;
    margin-inline: 0;
    margin-block: clamp(1.55rem, 3vw, 2.45rem) clamp(0.85rem, 2vw, 1.4rem);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
  }

  .site-footer__mark-outline,
  .site-footer__mark-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .site-footer__mark-outline {
    background: color-mix(in oklch, var(--site-footer-ink), transparent 58%);
    opacity: 0.72;
    mask-image: url('../images/footer/erp-ai-wordmark-outline.svg');
    -webkit-mask-image: url('../images/footer/erp-ai-wordmark-outline.svg');
    mask-position: left center;
    -webkit-mask-position: left center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% auto;
    -webkit-mask-size: 100% auto;
  }

  .site-footer__mark-mask {
    opacity: 1;
    mask-image: url('../images/erp-ai-wordmark.svg');
    -webkit-mask-image: url('../images/erp-ai-wordmark.svg');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% auto;
    -webkit-mask-size: 100% auto;
    mask-position: left center;
    -webkit-mask-position: left center;
  }

  .site-footer__mark-searchlight {
    position: absolute;
    width: 16rem;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: radial-gradient(
      circle,
      color-mix(in oklch, var(--site-footer-ink-strong), transparent 42%),
      color-mix(in oklch, var(--site-footer-ink), transparent 70%) 48%,
      transparent 72%
    );
    opacity: 0.92;
    filter: blur(4.75rem);
    transform: translate(
      calc(var(--footer-mark-x, -100%) - 5rem),
      calc(var(--footer-mark-y, -100%) - 5rem)
    );
    transition: opacity 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    color: var(--site-footer-ink-muted);
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .site-footer__utilities {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
  }

  .site-footer__theme-toggle {
    position: relative;
    display: inline-flex;
    gap: 0;
    align-items: center;
    width: 4.625rem;
    height: 2.125rem;
    padding: 0.1875rem;
    border: 1px solid color-mix(in oklch, var(--site-footer-ink), transparent 84%);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--site-footer-ink), transparent 94%);
    box-shadow:
      inset 0 1px 1px rgb(0 0 0 / 22%),
      0 1px 0 color-mix(in oklch, var(--site-footer-ink), transparent 92%);
    isolation: isolate;
  }

  .site-footer__theme-toggle::before {
    display: none;
  }

  .site-footer__theme-thumb {
    position: absolute;
    z-index: 0;
    top: 0.1875rem;
    bottom: 0.1875rem;
    left: 0.1875rem;
    width: calc(50% - 0.1875rem);
    border: 1px solid color-mix(in oklch, var(--site-footer-ink), transparent 72%);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--site-footer-ink), transparent 10%);
    box-shadow:
      0 0.5rem 1rem rgb(0 0 0 / 22%),
      inset 0 1px 0 color-mix(in oklch, white, transparent 76%);
    transform: translateX(0);
    transition:
      transform var(--duration-normal) var(--ease-decelerate),
      background var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
    pointer-events: none;
  }

  .site-footer__theme-toggle:has(.theme-btn[data-theme='dark'][data-active='true'])
    .site-footer__theme-thumb {
    transform: translateX(100%);
  }

  .site-footer__theme-toggle .theme-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 50%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in oklch, var(--site-footer-ink), transparent 62%);
    cursor: pointer;
    transition:
      color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .site-footer__theme-toggle .theme-btn:hover,
  .site-footer__theme-toggle .theme-btn:focus-visible {
    color: color-mix(in oklch, var(--site-footer-ink), transparent 18%);
  }

  .site-footer__theme-toggle .theme-btn[data-active='true'] {
    color: var(--site-footer-bg);
  }

  .site-footer__theme-toggle .theme-btn[data-active='true']:hover,
  .site-footer__theme-toggle .theme-btn[data-active='true']:focus-visible {
    color: var(--site-footer-bg);
  }

  .site-footer__theme-toggle .theme-btn:active {
    transform: translateY(1px);
  }

  .site-footer__theme-toggle .theme-btn:hover {
    box-shadow: none;
  }

  .site-footer__theme-toggle .theme-btn:focus-visible {
    outline: 2px solid var(--site-footer-accent);
    outline-offset: 0.125rem;
  }

  .site-footer__theme-icon {
    position: relative;
    display: inline-flex;
    width: 0.9375rem;
    height: 0.9375rem;
    align-items: center;
    justify-content: center;
  }

  .site-footer__theme-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2.15;
  }

  .site-footer__status {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--site-footer-rule);
    border-radius: var(--radius-full);
    color: var(--site-footer-ink-strong);
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
    background: color-mix(in oklch, var(--beige-300), transparent 96%);
  }

  .site-footer__status span {
    position: relative;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--radius-full);
    background: var(--grn, #22c55e);
    box-shadow:
      0 0 0 0.25rem color-mix(in oklch, var(--grn, #22c55e), transparent 84%),
      0 0 1rem color-mix(in oklch, var(--grn, #22c55e), transparent 58%);
  }

  .site-footer__status span::after {
    position: absolute;
    inset: -0.38rem;
    border: 1px solid color-mix(in oklch, var(--grn, #22c55e), transparent 34%);
    border-radius: inherit;
    animation: footer-status-heartbeat 1800ms ease-out infinite;
    content: '';
  }

  @keyframes footer-status-heartbeat {
    0%,
    42%,
    100% {
      opacity: 0;
      transform: scale(0.72);
    }

    12% {
      opacity: 0.85;
      transform: scale(1);
    }

    24% {
      opacity: 0;
      transform: scale(1.65);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-footer__status span::after {
      animation: none;
      opacity: 0.7;
      transform: scale(1);
    }
  }

  @media (max-width: 56rem) {
    .site-footer__top {
      grid-template-columns: 1fr;
      gap: 2.25rem;
    }

    .site-footer__nav {
      grid-template-columns: repeat(3, minmax(8rem, 1fr));
      overflow-x: auto;
      padding-bottom: 0.25rem;
    }
  }

  @media (max-width: 42rem) {
    .site-footer {
      padding: 0.75rem;
    }

    .site-footer--swage {
      --swage-footer-visible-rail: min(
        calc(100vw - (2 * var(--swage-page-frame-pad)) - 1.5rem),
        var(--swage-section-max)
      );
    }

    .site-footer__inner {
      width: min(calc(100% - 1.5rem), var(--site-footer-section-max));
    }

    .site-footer__nav {
      grid-template-columns: 1fr;
      gap: 1.75rem;
    }

    .site-footer__bottom {
      align-items: flex-start;
      flex-direction: column;
    }

    .site-footer__utilities {
      justify-content: flex-start;
    }
  }

  .tacet-legal {
    --legal-gutter: 1rem;
    --legal-content-padding: 1.5rem;
    --legal-toc-inline: 0.65rem;
    --legal-rail: min(calc(100% - (2 * var(--legal-gutter))), 67.5rem);
    --legal-rule: color-mix(in oklch, var(--border), transparent 10%);
    --legal-muted: color-mix(in oklch, var(--foreground), transparent 42%);
    --legal-surface: var(--tacet-panel-bg, color-mix(in oklch, var(--card), var(--background) 55%));
    color: var(--foreground);
    background: transparent;
  }

  .tacet-legal__mast {
    border-bottom: 1px solid var(--legal-rule);
    background: transparent;
    background-image:
      linear-gradient(
        to right,
        color-mix(in oklch, var(--border), transparent 82%) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        color-mix(in oklch, var(--border), transparent 88%) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        rgb(255 255 255 / 0.26),
        rgb(255 255 255 / 0.08) 18rem,
        transparent 38rem
      ),
      url('../images/proto/gradient-navbar-bg.png');
    background-position:
      50% 0,
      50% 0,
      50% calc(-1 * var(--chrome-height, 5rem)),
      50% calc(-1 * var(--chrome-height, 5rem));
    background-size:
      clamp(4.5rem, 7vw, 7rem) clamp(4.5rem, 7vw, 7rem),
      clamp(4.5rem, 7vw, 7rem) clamp(4.5rem, 7vw, 7rem),
      100% 38rem,
      100% 38rem;
    padding: calc(var(--chrome-height, 5rem) + clamp(2rem, 4vw, 3.5rem)) 0 clamp(2rem, 4vw, 3rem);
  }

  .tacet-legal__mast-inner {
    width: var(--legal-rail);
    margin: 0 auto;
  }

  .tacet-legal__mast h1 {
    max-width: 18ch;
    margin: 1.25rem 0 1rem;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 2.7vw, 2.75rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: var(--tacet-type-hero-track, 0);
    text-transform: none;
  }

  .tacet-legal__mast p {
    max-width: 56rem;
    margin: 0;
    color: var(--legal-muted);
    font-size: clamp(0.95rem, 0.9rem + 0.18vw, 1.08rem);
    line-height: 1.65;
  }

  .tacet-legal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }

  .tacet-legal__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--legal-rule);
    border-radius: var(--radius-full);
    color: var(--legal-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: none;
  }

  .tacet-legal__shell {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0;
    width: var(--legal-rail);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) 0 var(--tacet-section-pad-y, clamp(3.5rem, 6vw, 4rem));
  }

  .tacet-legal__article {
    min-width: 0;
    padding-inline: var(--legal-content-padding);
    font-size: 1rem;
    line-height: 1.7;
  }

  .tacet-legal__article > :first-child {
    margin-top: 0;
  }

  .tacet-legal__article h2,
  .tacet-legal__article h3 {
    font-family: var(--font-heading);
    line-height: var(--tacet-type-heading-lh, 1.08);
    letter-spacing: var(--tacet-type-section-track, 0);
    text-transform: none;
  }

  .tacet-legal__article h2 {
    margin: 3.25rem 0 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--legal-rule);
    font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
    font-weight: 700;
  }

  .tacet-legal__article h3 {
    margin: 2rem 0 0.75rem;
    color: var(--tacet-saas-accent, var(--org-on-light));
    font-size: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
    font-weight: 650;
  }

  .tacet-legal__article p,
  .tacet-legal__article li {
    color: color-mix(in oklch, var(--foreground), transparent 14%);
  }

  .tacet-legal__article p {
    margin: 0 0 1.1rem;
  }

  .tacet-legal__article ol,
  .tacet-legal__article ul {
    display: grid;
    gap: 0.7rem;
    margin: 1rem 0 1.35rem;
    padding-left: 1.35rem;
  }

  .tacet-legal__article strong {
    color: var(--foreground);
    font-weight: 760;
  }

  .tacet-legal__article a {
    color: var(--tacet-saas-accent, var(--org-on-light));
    text-decoration-color: color-mix(in oklch, currentColor, transparent 58%);
    text-underline-offset: 0.18em;
  }

  .tacet-legal__article a:hover,
  .tacet-legal__article a:focus-visible {
    text-decoration-color: currentColor;
  }

  .tacet-legal__policy-nav {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(3.5rem, 7vw, 5rem);
    padding-top: 1rem;
    border-top: 1px solid var(--legal-rule);
    color: var(--legal-muted);
  }

  .tacet-legal__policy-nav-label {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .tacet-legal__policy-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tacet-legal__policy-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    color: var(--legal-muted);
    font-size: 0.8125rem;
    text-decoration-color: transparent;
  }

  .tacet-legal__policy-nav a:hover,
  .tacet-legal__policy-nav a:focus-visible,
  .tacet-legal__policy-nav a[aria-current='page'] {
    color: var(--foreground);
    text-decoration-color: currentColor;
  }

  .tacet-legal__policy-nav a[aria-current='page'] {
    font-weight: 650;
  }

  .tacet-legal__toc {
    position: relative;
    min-width: 0;
  }

  .tacet-legal__toc-panel {
    position: sticky;
    top: calc(var(--chrome-height, 5rem) + 1rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: calc(100vh - var(--chrome-height, 5rem) - 2rem);
    padding-block: var(--legal-content-padding);
    background: transparent;
    overflow: hidden;
  }

  .tacet-legal__toc-panel::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: var(--legal-rule);
    pointer-events: none;
  }

  .tacet-legal__toc-title {
    padding: 0 var(--legal-toc-inline) 0.75rem;
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .tacet-legal__toc-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.25rem;
    padding: 0 1rem;
    border: 0;
    border-bottom: 1px solid var(--legal-rule);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
  }

  .tacet-legal__toc-toggle i {
    display: none;
    width: 1rem;
    height: 1rem;
  }

  .tacet-legal__toc-nav {
    min-height: 0;
    overflow: auto;
    padding: 0.75rem 0 0;
    scrollbar-color: color-mix(in oklch, var(--foreground), transparent 78%) transparent;
    scrollbar-width: thin;
  }

  .tacet-legal__toc-nav::-webkit-scrollbar {
    width: 0.5rem;
  }

  .tacet-legal__toc-nav::-webkit-scrollbar-track {
    background: transparent;
  }

  .tacet-legal__toc-nav::-webkit-scrollbar-thumb {
    border: 0.125rem solid transparent;
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--foreground), transparent 78%);
    background-clip: content-box;
  }

  .tacet-legal__toc-list {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tacet-legal__toc-children {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tacet-legal__toc-link {
    display: block;
    border-left: 1px solid transparent;
    color: var(--legal-muted);
    font-size: 0.9rem;
    line-height: 1.25;
    text-decoration: none;
  }

  .tacet-legal__toc-link--h2 {
    padding: 0.45rem var(--legal-toc-inline);
    font-weight: 650;
  }

  .tacet-legal__toc-link--h3 {
    padding: 0.35rem var(--legal-toc-inline) 0.35rem calc(var(--legal-toc-inline) + 0.9rem);
    font-size: 0.82rem;
  }

  .tacet-legal__toc-link:hover,
  .tacet-legal__toc-link:focus-visible,
  .tacet-legal__toc-link--active {
    border-left-color: var(--tacet-saas-accent, var(--org-on-light));
    color: var(--foreground);
    background: color-mix(in oklch, var(--tacet-saas-accent, var(--org-on-light)), transparent 92%);
  }

  @media (min-width: 48rem) {
    .tacet-legal {
      --legal-gutter: 2rem;
      --legal-content-padding: 2.5rem;
      --legal-toc-inline: 1.5rem;
    }
  }

  @media (min-width: 64rem) {
    .tacet-legal {
      --legal-content-padding: 3rem;
    }
  }

  @media (max-width: 47.999rem) {
    .tacet-legal__shell {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .tacet-legal__toc {
      order: -1;
    }

    .tacet-legal__toc-panel {
      position: static;
      display: block;
      max-height: none;
      padding: 0;
      border: 1px solid var(--legal-rule);
      background: var(--legal-surface);
    }

    .tacet-legal__toc-panel::before {
      display: none;
    }

    .tacet-legal__toc-title {
      display: none;
    }

    .tacet-legal__toc-toggle {
      display: flex;
    }

    .tacet-legal__toc-toggle i {
      display: inline-flex;
    }

    .tacet-legal__toc-toggle[aria-expanded='true'] i {
      transform: rotate(180deg);
    }

    .tacet-legal__toc-nav {
      display: none;
      max-height: 22rem;
      padding: 0.75rem;
    }

    .tacet-legal__toc[data-open='true'] .tacet-legal__toc-nav {
      display: block;
    }
  }

  @media (max-width: 42rem) {
    .tacet-legal__mast {
      padding-top: calc(var(--chrome-height, 5rem) + 1.5rem);
    }

    .tacet-legal__policy-nav {
      align-items: flex-start;
      flex-direction: column;
    }

    .tacet-legal__policy-nav ul {
      justify-content: flex-start;
    }
  }

  .tacet-brand {
    --brand-rail: min(
      calc(100% - (2 * var(--tacet-section-pad-x, clamp(1.5rem, 4vw, 3rem)))),
      var(--tacet-section-max, 90rem)
    );
    --brand-rule: color-mix(in oklch, var(--border), transparent 10%);
    --brand-muted: color-mix(in oklch, var(--foreground), transparent 38%);
    --brand-surface: color-mix(in oklch, var(--card), var(--background) 58%);
    color: var(--foreground);
  }

  #main-content > .tacet-brand > .tacet-brand__hero {
    max-width: none;
  }

  .tacet-brand__hero {
    background-image: linear-gradient(
      to right,
      color-mix(in oklch, var(--border), transparent 87%) 1px,
      transparent 1px
    );
    background-size: 8.333% 100%;
    padding: calc(var(--chrome-height, 5rem) + clamp(3.5rem, 7vw, 6rem)) 0 clamp(3.5rem, 7vw, 6rem);
  }

  .tacet-brand__hero-inner,
  .tacet-brand__content {
    width: var(--brand-rail);
    margin-inline: auto;
  }

  .tacet-brand__hero-inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: 1rem;
  }

  .tacet-brand__hero h1 {
    grid-column: 1 / span 7;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: var(--tacet-type-hero-track, 0);
  }

  .tacet-brand__hero p {
    grid-column: 9 / -1;
    max-width: 40rem;
    margin: 0;
    color: var(--brand-muted);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.12rem);
    line-height: 1.65;
  }

  .tacet-brand__content {
    padding-bottom: var(--tacet-section-pad-y, clamp(3.5rem, 6vw, 5rem));
  }

  .tacet-brand__section {
    display: grid;
    grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    border-top: 1px solid var(--brand-rule);
    scroll-margin-top: calc(var(--chrome-height, 5rem) + 4rem);
  }

  .tacet-brand__section:first-child {
    border-top: 0;
  }

  .tacet-brand__section-header {
    position: sticky;
    top: calc(var(--chrome-height, 5rem) + 2rem);
    display: block;
    align-self: start;
    margin: 0;
  }

  .tacet-brand__section-header > div:first-child {
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--tacet-saas-accent, var(--org-on-light));
  }

  .tacet-brand__section-header h2 {
    max-width: 22ch;
    margin: 0 0 0.8rem;
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 1.25rem + 1.15vw, 2.25rem);
    font-weight: 700;
    line-height: 1.05;
  }

  .tacet-brand__section-header p {
    max-width: 48rem;
    margin: 0;
    color: var(--brand-muted);
    line-height: 1.65;
  }

  .tacet-brand__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .tacet-brand__section > :not(.tacet-brand__section-header) {
    grid-column: 2;
  }

  .tacet-brand__asset-grid,
  .tacet-brand__palette {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--brand-rule);
    border-left: 1px solid var(--brand-rule);
  }

  .tacet-brand__asset-card--logo {
    grid-column: 1 / -1;
  }

  .tacet-brand__asset-card {
    display: grid;
    grid-template-rows: auto 1fr;
    border-right: 1px solid var(--brand-rule);
    border-bottom: 1px solid var(--brand-rule);
  }

  .tacet-brand__asset-card > span,
  .tacet-brand__variation-groups > section > h3 {
    margin: 0;
    padding: 0.75rem 1rem;
    color: var(--brand-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .tacet-brand__asset-stage {
    display: grid;
    place-items: center;
    min-height: clamp(15rem, 25vw, 23rem);
    padding: clamp(2rem, 5vw, 5rem);
    border-top: 1px solid var(--brand-rule);
    background: var(--brand-surface);
  }

  .tacet-brand__asset-card--symbol .tacet-brand__asset-stage img {
    width: min(100%, 8rem);
  }

  .tacet-brand__asset-card--wordmark .tacet-brand__asset-stage img,
  .tacet-brand__asset-card--logo .tacet-brand__asset-stage img {
    width: min(100%, 16rem);
  }

  .tacet-brand__logo-clearspace {
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: 1px dashed var(--brand-muted);
  }

  .tacet-brand__usage-list,
  .tacet-brand__type-list {
    border-top: 1px solid var(--brand-rule);
  }

  .tacet-brand__usage-list > article,
  .tacet-brand__type-list > article {
    display: grid;
    grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    border-bottom: 1px solid var(--brand-rule);
  }

  .tacet-brand__usage-list h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  }

  .tacet-brand__usage-list p {
    max-width: 50rem;
    margin: 0;
    color: var(--brand-muted);
    line-height: 1.7;
  }

  .tacet-brand__usage-list p + p {
    margin-top: 1rem;
  }

  .tacet-brand__clearspace-figure {
    margin: 2rem 0 0;
  }

  .tacet-brand__clearspace-frame {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 15rem;
    padding: clamp(3rem, 8vw, 7rem);
    border: 1px dashed var(--brand-muted);
    background: var(--brand-surface);
  }

  .tacet-brand__clearspace-frame span {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    color: var(--brand-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
  }

  .tacet-brand__clearspace-frame img {
    width: min(100%, 22rem);
  }

  .tacet-brand__clearspace-figure figcaption {
    margin-top: 0.6rem;
    color: var(--brand-muted);
    font-size: 0.75rem;
  }

  .tacet-brand__palette {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
  }

  .tacet-brand__palette li {
    display: grid;
    justify-items: start;
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    border-right: 1px solid var(--brand-rule);
    border-bottom: 1px solid var(--brand-rule);
  }

  .tacet-brand__swatch {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.5rem;
  }

  .tacet-brand__palette strong {
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
  }

  .tacet-brand__palette code,
  .tacet-brand__palette span {
    max-width: 100%;
    color: var(--brand-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    overflow-wrap: anywhere;
  }

  .tacet-brand__palette code {
    margin-bottom: 0.35rem;
    color: var(--foreground);
  }

  .tacet-brand__variation-groups {
    display: grid;
    gap: clamp(3rem, 6vw, 5rem);
  }

  .tacet-brand__variation-groups > section > h3 {
    padding-inline: 0;
  }

  .tacet-brand__variation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--brand-rule);
    border-left: 1px solid var(--brand-rule);
  }

  .tacet-brand__variation {
    display: grid;
    place-items: center;
    min-height: clamp(15rem, 28vw, 24rem);
    margin: 0;
    padding: clamp(2.5rem, 6vw, 6rem);
    border-right: 1px solid var(--brand-rule);
    border-bottom: 1px solid var(--brand-rule);
    background: var(--brand-surface);
  }

  .tacet-brand__variation img {
    width: min(100%, 18rem);
    max-height: 8rem;
  }

  .tacet-brand__variation .tacet-brand__logo-clearspace {
    width: min(100%, 26rem);
  }

  .tacet-brand__variation figcaption {
    align-self: end;
    margin-top: 2rem;
    color: var(--brand-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
  }

  .tacet-brand__variation--dark {
    color: var(--background);
    background: var(--foreground);
  }

  .tacet-brand__variation--dark img {
    filter: invert(1);
  }

  .tacet-brand__variation--dark figcaption {
    color: color-mix(in oklch, var(--background), transparent 22%);
  }

  .tacet-brand__type-list > article {
    grid-template-columns: minmax(7rem, 0.2fr) minmax(14rem, 0.55fr) minmax(0, 0.45fr);
    align-items: baseline;
    gap: clamp(1.5rem, 4vw, 4rem);
  }

  .tacet-brand__type-list > article > span,
  .tacet-brand__type-list p {
    color: var(--brand-muted);
    font-size: 0.8125rem;
  }

  .tacet-brand__type-list p {
    margin: 0;
    line-height: 1.6;
  }

  .tacet-brand__type-sample {
    font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2.25rem);
    line-height: 1.1;
  }

  .tacet-brand__type-sample--heading {
    font-family: var(--font-heading);
  }

  .tacet-brand__type-sample--body {
    font-family: var(--font-body);
  }

  .tacet-brand__type-sample--mono {
    font-family: var(--font-mono);
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.5rem);
  }

  .tacet-brand__type-sample--system {
    font-family: system-ui, sans-serif;
  }

  html.dark .tacet-brand__asset-stage img,
  html.dark .tacet-brand__clearspace-frame img,
  html.dark .tacet-brand__variation--light img {
    filter: invert(1);
  }

  html.dark .tacet-brand__variation--dark img {
    filter: none;
  }

  @media (max-width: 64rem) {
    .tacet-brand__hero-inner {
      grid-template-columns: minmax(0, 1fr);
    }

    .tacet-brand__hero h1,
    .tacet-brand__hero p {
      grid-column: 1;
    }

    .tacet-brand__hero p {
      margin-top: 1.5rem;
    }

    .tacet-brand__section {
      grid-template-columns: minmax(0, 1fr);
      gap: 2rem;
    }

    .tacet-brand__section-header {
      position: static;
    }

    .tacet-brand__section > :not(.tacet-brand__section-header) {
      grid-column: 1;
    }

    .tacet-brand__palette {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tacet-brand__type-list > article {
      grid-template-columns: minmax(7rem, 0.3fr) minmax(0, 0.7fr);
    }

    .tacet-brand__type-list p {
      grid-column: 2;
    }
  }

  @media (max-width: 42rem) {
    .tacet-brand__hero {
      padding-top: calc(var(--chrome-height, 5rem) + 2rem);
    }

    .tacet-brand__asset-grid,
    .tacet-brand__palette,
    .tacet-brand__variation-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .tacet-brand__usage-list > article,
    .tacet-brand__type-list > article {
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;
    }

    .tacet-brand__type-list p {
      grid-column: auto;
    }

    .tacet-brand__clearspace-frame {
      min-height: 12rem;
      padding: 3rem;
    }
  }

  /* Cookie consent notice -------------------------------------------------- */
  .cookie-consent {
    --cookie-panel-bg: var(--surface-bright);
    --cookie-panel-ink: var(--foreground);
    --cookie-panel-muted: color-mix(in oklch, var(--foreground), transparent 34%);
    --cookie-panel-border: color-mix(in oklch, var(--border), transparent 12%);
    --cookie-panel-strong: color-mix(in oklch, var(--foreground), transparent 4%);
    position: fixed;
    right: clamp(1rem, 2.2vw, 1.5rem);
    bottom: clamp(1rem, 2.2vw, 1.5rem);
    z-index: 80;
    width: min(24rem, calc(100vw - 2rem));
    border: 1px solid var(--cookie-panel-border);
    border-radius: 0.75rem;
    background: var(--cookie-panel-bg);
    color: var(--cookie-panel-ink);
    box-shadow:
      0 1.5rem 3.5rem color-mix(in oklch, black, transparent 82%),
      0 0.25rem 1rem color-mix(in oklch, black, transparent 90%);
    overflow: hidden;
  }

  html.dark .cookie-consent {
    --cookie-panel-muted: color-mix(in oklch, var(--foreground), transparent 28%);
    box-shadow:
      0 1.5rem 3.5rem color-mix(in oklch, black, transparent 58%),
      0 0.25rem 1rem color-mix(in oklch, black, transparent 68%);
  }

  .cookie-consent[hidden],
  .cookie-consent [hidden] {
    display: none !important;
  }

  .cookie-consent__view {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
  }

  .cookie-consent__view--banner {
    gap: 0.65rem;
    padding: 0.875rem;
  }

  .cookie-consent__view--preferences {
    max-height: min(40rem, calc(100dvh - 2rem));
    padding: 0;
  }

  .cookie-consent__heading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .cookie-consent__heading svg,
  .cookie-consent__heading i {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    color: var(--tacet-saas-accent, var(--org-on-light));
  }

  .cookie-consent__heading h2 {
    margin: 0;
    color: var(--cookie-panel-strong);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.94rem + 0.25vw, 1.16rem);
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: 0;
  }

  .cookie-consent p {
    margin: 0;
    color: var(--cookie-panel-muted);
    font-size: 0.86rem;
    line-height: 1.48;
  }

  .cookie-consent__learn-more {
    justify-self: start;
    color: var(--cookie-panel-strong);
    font-size: 0.84rem;
    font-weight: 620;
    text-decoration: none;
  }

  .cookie-consent__learn-more:hover,
  .cookie-consent__learn-more:focus-visible {
    color: var(--tacet-saas-accent, var(--org-on-light));
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .cookie-consent__summary .cookie-consent__learn-more {
    white-space: nowrap;
  }

  .cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .cookie-consent__actions--preferences {
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid var(--cookie-panel-border);
    background: color-mix(in oklch, var(--cookie-panel-bg), transparent 6%);
  }

  .cookie-consent__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.45rem 0.8rem;
    border-radius: 0.42rem;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition:
      background 140ms ease,
      border-color 140ms ease,
      color 140ms ease,
      transform 140ms ease;
  }

  .cookie-consent__button:hover,
  .cookie-consent__button:focus-visible {
    transform: translateY(-1px);
  }

  .cookie-consent__button--secondary {
    border: 1px solid var(--cookie-panel-border);
    background: color-mix(in oklch, var(--background), transparent 56%);
    color: var(--cookie-panel-strong);
  }

  .cookie-consent__button--secondary:hover,
  .cookie-consent__button--secondary:focus-visible {
    border-color: color-mix(in oklch, var(--foreground), transparent 66%);
    background: color-mix(in oklch, var(--background), transparent 28%);
  }

  .cookie-consent__button--primary {
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 8%);
    background: color-mix(in oklch, var(--foreground), transparent 8%);
    color: var(--background);
  }

  .cookie-consent__button--primary:hover,
  .cookie-consent__button--primary:focus-visible {
    border-color: var(--tacet-saas-accent, var(--org-on-light));
    background: var(--tacet-saas-accent, var(--org-on-light));
    color: white;
  }

  .cookie-consent__preferences-head {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-bottom: 1px solid var(--cookie-panel-border);
  }

  .cookie-consent__options {
    display: grid;
    gap: 0.65rem;
    max-height: min(22rem, calc(100dvh - 18rem));
    padding: 1rem;
    overflow: auto;
  }

  .cookie-consent__option {
    border: 1px solid var(--cookie-panel-border);
    border-radius: 0.55rem;
    background: color-mix(in oklch, var(--background), transparent 72%);
    overflow: hidden;
  }

  .cookie-consent__option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.5rem;
    padding: 0.25rem 0.7rem;
  }

  .cookie-consent__option-toggle {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.45rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--cookie-panel-strong);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .cookie-consent__option-toggle svg,
  .cookie-consent__option-toggle i {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    color: var(--cookie-panel-muted);
    transition: transform 140ms ease;
  }

  .cookie-consent__option-toggle span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .cookie-consent__option-toggle[aria-expanded='true'] svg,
  .cookie-consent__option-toggle[aria-expanded='true'] i {
    transform: rotate(180deg);
  }

  .cookie-consent__option-toggle:hover,
  .cookie-consent__option-toggle:focus-visible {
    color: var(--tacet-saas-accent, var(--org-on-light));
  }

  .cookie-consent__switch {
    position: relative;
    width: 2.5rem;
    height: 1.35rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in oklch, var(--foreground), transparent 66%);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--foreground), transparent 48%);
    cursor: pointer;
  }

  .cookie-consent__switch[disabled] {
    opacity: 0.64;
    cursor: not-allowed;
  }

  .cookie-consent__switch span {
    position: absolute;
    top: 50%;
    left: 0.18rem;
    width: 0.92rem;
    height: 0.92rem;
    border-radius: var(--radius-full);
    background: var(--background);
    transform: translateY(-50%);
    transition:
      left 140ms ease,
      background 140ms ease;
  }

  .cookie-consent__switch[aria-checked='true'] {
    border-color: color-mix(in oklch, var(--foreground), transparent 10%);
    background: color-mix(in oklch, var(--foreground), transparent 10%);
  }

  .cookie-consent__switch[aria-checked='true'] span {
    left: calc(100% - 1.1rem);
  }

  .cookie-consent__switch:not([disabled]):hover,
  .cookie-consent__switch:not([disabled]):focus-visible {
    border-color: var(--tacet-saas-accent, var(--org-on-light));
  }

  .cookie-consent__option-description {
    padding: 0 0.8rem 0.75rem 2.1rem;
    font-size: 0.82rem;
  }

  @media (max-width: 42rem) {
    .cookie-consent {
      right: 0.75rem;
      bottom: 0.75rem;
      left: 0.75rem;
      width: auto;
      max-height: calc(100dvh - 1.5rem);
    }

    .cookie-consent__view--preferences {
      max-height: calc(100dvh - 1.5rem);
    }

    .cookie-consent__options {
      max-height: calc(100dvh - 20rem);
    }

    .cookie-consent__actions,
    .cookie-consent__actions--preferences {
      display: grid;
      grid-template-columns: 1fr;
    }

    .cookie-consent__button {
      width: 100%;
    }
  }

  .tacet-contact-page .tacet-contact-grid {
    width: min(
      calc(100% - (2 * var(--tacet-section-pad-x))),
      calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)))
    );
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 0.76fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    margin-inline: auto;
    padding-block: calc(var(--tacet-section-pad-y) + 1.5rem) var(--tacet-section-pad-y);
  }

  .tacet-contact-page .tacet-contact-copy {
    display: grid;
    gap: 1.75rem;
    max-width: 48rem;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-form-header h1 {
    margin: 0;
    max-width: 12ch;
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.88;
    color: var(--foreground);
  }

  .tacet-contact-page .tacet-contact-copy p,
  .tacet-contact-page .tacet-contact-form-header p {
    margin: 0;
    max-width: 56ch;
    color: var(--text-m);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.65;
  }

  .tacet-contact-page .tacet-contact-routes {
    border-top: 1px solid var(--border);
  }

  .tacet-contact-page .tacet-contact-route {
    display: grid;
    grid-template-columns: 1.5rem minmax(8rem, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    min-height: 5.25rem;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
  }

  .tacet-contact-page .tacet-contact-route > span {
    color: var(--org-on-light);
  }

  .tacet-contact-page .tacet-contact-route strong {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 850;
    letter-spacing: -0.015em;
  }

  .tacet-contact-page .tacet-contact-route em {
    color: var(--text-m);
    font-style: normal;
    line-height: 1.5;
  }

  .tacet-contact-page .tacet-contact-route small {
    grid-column: 3;
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 700;
  }

  .tacet-contact-page .tacet-contact-form-shell {
    position: sticky;
    top: calc(var(--tacet-nav-bottom, var(--chrome-height)) + 1.5rem);
    display: grid;
    gap: 1.25rem;
  }

  .tacet-contact-page .tacet-contact-form-header {
    display: grid;
    gap: 0.9rem;
  }

  .tacet-contact-page .tacet-contact-form {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--border);
    background: color-mix(in oklch, var(--background) 92%, var(--org) 8%);
  }

  .tacet-contact-page .tacet-contact-form__embed {
    display: block;
    width: 100%;
    height: 30rem;
    min-height: 30rem;
    border: 0;
  }

  @media (max-width: 47.5rem) {
    .tacet-contact-page .tacet-contact-form__embed {
      height: 38rem;
      min-height: 38rem;
    }
  }

  .tacet-contact-page .tacet-contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .tacet-contact-page .tacet-contact-field {
    display: grid;
    gap: 0.45rem;
  }

  .tacet-contact-page .tacet-contact-field label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-m);
  }

  .tacet-contact-page .tacet-contact-field input,
  .tacet-contact-page .tacet-contact-field select,
  .tacet-contact-page .tacet-contact-field textarea {
    min-height: 3rem;
    width: 100%;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    padding: 0.85rem 1rem;
    font: 600 0.94rem/1.45 var(--font-mono);
    outline: none;
    transition:
      border-color 160ms ease,
      background 160ms ease,
      box-shadow 160ms ease;
  }

  .tacet-contact-page .tacet-contact-field textarea {
    min-height: 8.5rem;
    resize: vertical;
  }

  .tacet-contact-page .tacet-contact-field input::placeholder,
  .tacet-contact-page .tacet-contact-field textarea::placeholder {
    color: color-mix(in oklch, var(--text-m), transparent 46%);
    font-weight: 500;
    opacity: 1;
  }

  .tacet-contact-page .tacet-contact-field select:invalid {
    color: color-mix(in oklch, var(--text-m), transparent 46%);
    font-weight: 500;
  }

  .tacet-contact-page .tacet-contact-field select option {
    color: var(--foreground);
    font-weight: 600;
  }

  .tacet-contact-page .tacet-contact-field input:focus-visible,
  .tacet-contact-page .tacet-contact-field select:focus-visible,
  .tacet-contact-page .tacet-contact-field textarea:focus-visible {
    border-color: var(--org-on-light);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--org), transparent 82%);
  }

  .tacet-contact-page .tacet-contact-form .btn {
    justify-self: start;
  }

  .tacet-contact-page .tacet-contact-form__note {
    margin: 0;
    max-width: 42rem;
    font-family: var(--font-mono);
    font-size: var(--text-label);
    line-height: 1.55;
    color: var(--text-m);
  }

  .tacet-contact-page .tacet-contact-success {
    padding: clamp(2rem, 6vw, 3rem);
    border: 1px solid var(--border);
    background: color-mix(in oklch, var(--background) 92%, var(--grn) 8%);
    color: var(--foreground);
  }

  .tacet-contact-page .tacet-contact-success h3 {
    margin: 1rem 0 0.35rem;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
  }

  .tacet-contact-page .tacet-contact-success p {
    margin: 0;
    color: var(--text-m);
  }

  @media (max-width: 48rem) {
    .tacet-contact-page .tacet-contact-grid {
      width: min(calc(100% - 2rem), calc(var(--tacet-section-max) - 2rem));
      grid-template-columns: 1fr;
    }

    .tacet-contact-page .tacet-contact-form-shell {
      position: static;
    }

    .tacet-contact-page .tacet-contact-form__grid {
      grid-template-columns: 1fr;
    }

    .tacet-contact-page .tacet-contact-route {
      grid-template-columns: 1.5rem minmax(0, 1fr);
      gap: 0.25rem 0.85rem;
      padding-block: 1rem;
    }

    .tacet-contact-page .tacet-contact-route em,
    .tacet-contact-page .tacet-contact-route small {
      grid-column: 2;
    }
  }

  /* -- Swage product spine primitives ------------------------------------ *
     Shared Core-Banking-derived editorial spine. These are deliberately
     structural components rather than restyles of the retired long-form
     product blocks above. */
  body.catalog-page.catalog-page--swage .swage-shell {
    width: min(calc(100% - 3rem), 72rem);
    margin-inline: auto;
  }

  body.catalog-page.catalog-page--swage .swage-metric-rail {
    padding-block: clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-canvas);
  }

  body.catalog-page.catalog-page--swage .swage-metric-rail__frame {
    overflow: hidden;
    border: 1px solid var(--swage-line-strong);
    border-radius: var(--swage-panel-radius);
    background: var(--swage-line);
    box-shadow: var(--swage-shadow);
  }

  body.catalog-page.catalog-page--swage .swage-metric-rail__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: first baseline;
    gap: 0.75rem 1.5rem;
    padding: 1.35rem 1.5rem;
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage .swage-metric-rail__header h2 {
    margin: 0;
    color: var(--swage-ink);
    font: 650 clamp(1.35rem, 2.2vw, 1.8rem) / 1.15 var(--font-heading);
    letter-spacing: var(--swage-display-tracking-compact);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage .swage-metric-rail__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    background: var(--swage-line);
  }

  body.catalog-page.catalog-page--swage .swage-metric-rail__inner--count-1 {
    grid-template-columns: 1fr;
  }

  body.catalog-page.catalog-page--swage .swage-metric-rail__inner--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.catalog-page.catalog-page--swage .swage-metric-rail__inner--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.catalog-page.catalog-page--swage .swage-metric-rail__inner--count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.catalog-page.catalog-page--swage
    :is(.swage-metric-rail__inner--count-5, .swage-metric-rail__inner--count-6) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.catalog-page.catalog-page--swage
    .swage-metric-rail__inner--count-5
    .swage-metric:nth-child(-n + 3),
  body.catalog-page.catalog-page--swage .swage-metric-rail__inner--count-6 .swage-metric {
    grid-column: span 2;
  }

  body.catalog-page.catalog-page--swage
    .swage-metric-rail__inner--count-5
    .swage-metric:nth-child(n + 4) {
    grid-column: span 3;
  }

  body.catalog-page.catalog-page--swage .swage-metric {
    display: grid;
    min-height: 9.6rem;
    align-content: start;
    gap: 0.65rem;
    padding: 1.45rem;
    background: var(--swage-elevated);
  }

  body.catalog-page.catalog-page--swage .swage-metric dd {
    display: grid;
    gap: 0.65rem;
    margin: 0;
  }
  body.catalog-page.catalog-page--swage .swage-metric dt,
  body.catalog-page.catalog-page--swage .swage-section-heading > span,
  body.catalog-page.catalog-page--swage .swage-copy > span,
  body.catalog-page.catalog-page--swage .swage-proof span,
  body.catalog-page.catalog-page--swage .swage-technical header > span {
    color: var(--swage-accent);
    font-family: var(--font-mono);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.085em;
    text-transform: uppercase;
  }

  body.catalog-page.catalog-page--swage .swage-metric strong {
    color: var(--swage-ink);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.55rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--swage-display-tracking);
    line-height: 0.9;
  }

  body.catalog-page.catalog-page--swage .swage-metric small,
  body.catalog-page.catalog-page--swage .swage-schema__record small,
  body.catalog-page.catalog-page--swage .swage-workflow-artifact small {
    color: var(--swage-muted);
    font-size: var(--swage-type-ui);
    line-height: 1.5;
  }

  body.catalog-page.catalog-page--swage .swage-inside,
  body.catalog-page.catalog-page--swage .swage-section,
  body.catalog-page.catalog-page--swage .swage-technical {
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-canvas);
  }

  body.catalog-page.catalog-page--swage .swage-inside > .swage-shell,
  body.catalog-page.catalog-page--swage .swage-section > .swage-shell,
  body.catalog-page.catalog-page--swage .swage-technical > .swage-shell {
    padding-block: clamp(4.5rem, 9vw, 8rem);
  }

  body.catalog-page.catalog-page--swage .swage-section-heading {
    max-width: 42rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }
  body.catalog-page.catalog-page--swage .swage-section-heading h2,
  body.catalog-page.catalog-page--swage .swage-copy h2,
  body.catalog-page.catalog-page--swage .swage-technical h2 {
    margin: 0.65rem 0 0;
    color: var(--swage-ink);
    font-family: var(--font-heading);
    font-size: clamp(2.35rem, 4.8vw, 4.8rem);
    font-weight: 700;
    letter-spacing: var(--swage-display-tracking);
    line-height: 0.98;
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage .swage-section-heading p,
  body.catalog-page.catalog-page--swage .swage-copy p {
    margin: 1rem 0 0;
    color: var(--swage-muted);
    font-size: 1.03rem;
    line-height: 1.65;
  }

  body.catalog-page.catalog-page--swage .swage-inside__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
  }
  body.catalog-page.catalog-page--swage .swage-inside__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    min-height: 12rem;
    padding: 1.5rem;
    border: 1px solid var(--swage-line);
    border-radius: 0.65rem;
    background: var(--swage-surface);
  }
  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(1),
  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(4) {
    grid-column: span 7;
  }
  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(2),
  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(3),
  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(5),
  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(6) {
    grid-column: span 5;
  }
  body.catalog-page.catalog-page--swage .swage-inside__icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid var(--swage-line-strong);
    border-radius: 0.4rem;
    color: var(--swage-accent);
    background: var(--swage-accent-soft);
  }
  body.catalog-page.catalog-page--swage .swage-inside__card h3 {
    margin: 0.15rem 0 0;
    color: var(--swage-ink);
    font-size: 1.12rem;
    letter-spacing: var(--swage-display-tracking-compact);
    text-transform: none;
  }
  body.catalog-page.catalog-page--swage .swage-inside__card p {
    margin: 0.55rem 0 0;
    color: var(--swage-muted);
    font-size: 1rem;
    line-height: 1.6;
  }

  body.catalog-page.catalog-page--swage .swage-proof {
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-ink);
  }
  body.catalog-page.catalog-page--swage .swage-proof__inner {
    padding-block: clamp(4.5rem, 9vw, 8rem);
  }
  body.catalog-page.catalog-page--swage .swage-proof span {
    color: color-mix(in srgb, var(--swage-accent), white 20%);
  }
  body.catalog-page.catalog-page--swage .swage-proof blockquote {
    max-width: 18ch;
    margin: 1rem 0;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 5.6vw, 5.8rem);
    font-weight: 700;
    letter-spacing: var(--swage-display-tracking);
    line-height: 0.94;
  }
  body.catalog-page.catalog-page--swage .swage-proof cite {
    color: color-mix(in srgb, #fff, transparent 42%);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-style: normal;
  }

  body.catalog-page.catalog-page--swage .swage-section--workflow {
    background: var(--swage-surface);
  }
  body.catalog-page.catalog-page--swage .swage-split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 8rem);
  }
  body.catalog-page.catalog-page--swage .swage-split--reverse {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  body.catalog-page.catalog-page--swage .swage-split--reverse .swage-copy {
    order: 2;
  }
  body.catalog-page.catalog-page--swage .swage-copy a {
    display: inline-flex;
    gap: 0.45rem;
    margin-top: 1.5rem;
    color: var(--swage-accent);
    font-size: var(--swage-type-ui);
    font-weight: 700;
    text-decoration: none;
  }
  body.catalog-page.catalog-page--swage .swage-copy a:hover,
  body.catalog-page.catalog-page--swage .swage-copy a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
  }
  body.catalog-page.catalog-page--swage .swage-interface {
    overflow: hidden;
    border: 1px solid var(--swage-line-strong);
    border-radius: 0.65rem;
    background: var(--swage-surface);
    box-shadow: var(--swage-shadow);
  }
  body.catalog-page.catalog-page--swage .swage-interface__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--swage-line);
    color: var(--swage-muted);
    font-family: var(--font-mono);
    font-size: var(--swage-type-caption);
    letter-spacing: 0.04em;
  }
  body.catalog-page.catalog-page--swage .swage-interface__bar strong {
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
    color: var(--swage-accent);
    background: var(--swage-accent-soft);
    font-size: var(--swage-type-micro);
    text-transform: uppercase;
  }
  body.catalog-page.catalog-page--swage .swage-schema__body {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
  }
  body.catalog-page.catalog-page--swage .swage-schema__body > aside {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 1.25rem;
    border-right: 1px solid var(--swage-line);
    background: color-mix(in srgb, var(--swage-accent-soft), white 58%);
  }
  body.catalog-page.catalog-page--swage .swage-schema__body > aside span,
  body.catalog-page.catalog-page--swage .swage-schema__body > aside small {
    color: var(--swage-muted);
    font-size: 0.7rem;
  }
  body.catalog-page.catalog-page--swage .swage-schema__body > aside strong {
    color: var(--swage-ink);
    font-size: 2rem;
    letter-spacing: var(--swage-display-tracking);
  }
  body.catalog-page.catalog-page--swage .swage-schema__record,
  body.catalog-page.catalog-page--swage .swage-workflow-artifact li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 1rem;
    border-bottom: 1px solid var(--swage-line);
  }
  body.catalog-page.catalog-page--swage .swage-schema__record:last-child,
  body.catalog-page.catalog-page--swage .swage-workflow-artifact li:last-child {
    border-bottom: 0;
  }
  body.catalog-page.catalog-page--swage .swage-schema__record > span,
  body.catalog-page.catalog-page--swage .swage-workflow-artifact li > span,
  body.catalog-page.catalog-page--swage .swage-assistant-queue article > span {
    color: var(--swage-accent);
    font-family: var(--font-mono);
    font-size: var(--swage-type-caption);
    font-weight: 700;
  }
  body.catalog-page.catalog-page--swage .swage-schema__record strong,
  body.catalog-page.catalog-page--swage .swage-workflow-artifact strong,
  body.catalog-page.catalog-page--swage .swage-assistant-queue article strong {
    display: block;
    color: var(--swage-ink);
    font-size: 1rem;
  }
  body.catalog-page.catalog-page--swage .swage-schema__record small,
  body.catalog-page.catalog-page--swage .swage-workflow-artifact small {
    display: block;
    margin-top: 0.3rem;
  }
  body.catalog-page.catalog-page--swage .swage-schema__record i,
  body.catalog-page.catalog-page--swage .swage-workflow-artifact i {
    display: none;
  }
  body.catalog-page.catalog-page--swage .swage-workflow-artifact {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--swage-line-strong);
    border-radius: 0.65rem;
    list-style: none;
    background: var(--swage-canvas);
  }
  body.catalog-page.catalog-page--swage .swage-workflow-artifact li {
    min-height: 5.3rem;
    align-items: first baseline;
    align-content: center;
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage .swage-workflow-artifact li > span {
    align-self: first baseline;
    line-height: 1;
  }

  body.catalog-page.catalog-page--swage .swage-workflow-artifact li > i {
    align-self: start;
  }

  body.catalog-page.catalog-page--swage .swage-section--automation {
    background: var(--swage-canvas);
  }
  body.catalog-page.catalog-page--swage .swage-assistant-queue article {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: first baseline;
    padding: 1rem;
    border-bottom: 1px solid var(--swage-line);
  }
  body.catalog-page.catalog-page--swage .swage-assistant-queue article:last-child {
    border-bottom: 0;
  }
  body.catalog-page.catalog-page--swage .swage-assistant-queue article p {
    margin: 0.3rem 0 0;
    color: var(--swage-muted);
    font-size: 1rem;
    line-height: 1.55;
  }
  body.catalog-page.catalog-page--swage .swage-assistant-queue__status {
    align-self: first baseline;
    color: var(--swage-accent);
    font-family: var(--font-mono);
    font-size: var(--swage-type-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  body.catalog-page.catalog-page--swage .swage-technical {
    --swage-technical-muted: color-mix(in srgb, var(--swage-muted), var(--swage-ink) 16%);

    background: var(--swage-surface);
  }
  body.catalog-page.catalog-page--swage .swage-technical__header {
    max-width: 48rem;
  }
  body.catalog-page.catalog-page--swage .swage-technical__header p {
    max-width: 42rem;
    margin: 1.25rem 0 0;
    color: var(--swage-technical-muted);
    font-size: 1rem;
    line-height: 1.65;
  }
  body.catalog-page.catalog-page--swage .swage-technical__principles {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 1rem clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(3rem, 6vw, 5rem);
  }
  body.catalog-page.catalog-page--swage .swage-technical__principle {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    padding: clamp(1.5rem, 2.5vw, 2rem) 0;
    border-top: 1px solid var(--swage-line-strong);
  }
  body.catalog-page.catalog-page--swage .swage-technical__principle:last-child {
    border-bottom: 1px solid var(--swage-line-strong);
  }
  body.catalog-page.catalog-page--swage .swage-technical__principle--primary {
    grid-row: 1 / span 2;
    grid-template-columns: 1fr;
    align-content: space-between;
    min-height: 22rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid var(--swage-line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--swage-accent-soft), var(--swage-elevated) 68%);
  }
  body.catalog-page.catalog-page--swage .swage-technical__icon {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    color: var(--swage-accent);
  }
  body.catalog-page.catalog-page--swage
    .swage-technical__principle--primary
    .swage-technical__icon {
    width: 3.5rem;
    height: 3.5rem;
  }
  body.catalog-page.catalog-page--swage .swage-technical__icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
  }
  body.catalog-page.catalog-page--swage .swage-technical__principle h3 {
    margin: 0;
    color: var(--swage-ink);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 650;
    letter-spacing: var(--swage-display-tracking-compact);
    line-height: 1.15;
    text-transform: none;
    text-wrap: balance;
  }
  body.catalog-page.catalog-page--swage .swage-technical__principle--primary h3 {
    max-width: 14ch;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    letter-spacing: var(--swage-display-tracking);
    line-height: 1;
  }
  body.catalog-page.catalog-page--swage .swage-technical__principle p {
    max-width: 38rem;
    margin: 0.65rem 0 0;
    color: var(--swage-technical-muted);
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
  }
  body.catalog-page.catalog-page--swage .swage-technical__principle--primary p {
    max-width: 34rem;
    font-size: 1rem;
  }

  @media (max-width: 52rem) {
    body.catalog-page.catalog-page--swage .swage-shell {
      width: min(calc(100% - 2rem), 72rem);
    }
    body.catalog-page.catalog-page--swage .swage-metric-rail__inner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.catalog-page.catalog-page--swage .swage-metric {
      grid-column: auto !important;
    }

    body.catalog-page.catalog-page--swage
      :is(.swage-metric-rail__inner--count-1, .swage-metric-rail__inner--count-3) {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage
      .swage-metric-rail__inner--count-5
      .swage-metric:last-child {
      grid-column: 1 / -1 !important;
    }
    body.catalog-page.catalog-page--swage .swage-inside__card {
      grid-column: span 12 !important;
      min-height: auto;
    }
    body.catalog-page.catalog-page--swage .swage-split,
    body.catalog-page.catalog-page--swage .swage-split--reverse {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    body.catalog-page.catalog-page--swage .swage-split--reverse .swage-copy {
      order: 0;
    }
    body.catalog-page.catalog-page--swage .swage-proof blockquote {
      max-width: none;
    }
    body.catalog-page.catalog-page--swage .swage-technical__principles {
      grid-template-columns: 1fr;
      grid-template-rows: none;
      gap: 0;
    }
    body.catalog-page.catalog-page--swage .swage-technical__principle--primary {
      grid-row: auto;
      min-height: 16rem;
      margin-bottom: 1.5rem;
    }
  }

  @media (max-width: 32rem) {
    body.catalog-page.catalog-page--swage .swage-metric-rail__header {
      grid-template-columns: 1fr;
      padding: 1.2rem;
    }

    body.catalog-page.catalog-page--swage .swage-metric-rail__inner {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage .swage-metric {
      min-height: 0;
      grid-column: auto !important;
    }
    body.catalog-page.catalog-page--swage .swage-schema__body {
      grid-template-columns: 1fr;
    }
    body.catalog-page.catalog-page--swage .swage-schema__body > aside {
      border-right: 0;
      border-bottom: 1px solid var(--swage-line);
    }
  }

  /* Swage closer/footer seam. Core Banking leaves the final CTA as a clean
     surface and lets the rounded main edge reveal the same footer backdrop.
     Do not put the page grid or any illustrative chart treatment here. */
  body.catalog-page.catalog-page--swage #cta.swage-final-cta {
    background-color: var(--swage-surface) !important;
    background-image: none !important;
  }

  html[data-catalog-theme='dark'] body.catalog-page.catalog-page--swage #cta.swage-final-cta,
  html.dark body.catalog-page.catalog-page--swage #cta.swage-final-cta {
    border-color: var(--swage-line) !important;
    background-image: none !important;
  }

  /* The fixed footer keeps its blue-black reveal, but the shell itself sits
     behind the resting navigation and the rounded end of main. Keep that
     exposed layer on the Swage canvas instead of Tacet's warm footer wash. */
  html[data-catalog-theme='dark'] body.catalog-page.catalog-page--swage .page-shell--footer-swage,
  html.dark body.catalog-page.catalog-page--swage .page-shell--footer-swage {
    background: var(--swage-canvas) !important;
  }

  html[data-catalog-theme='dark']
    body.catalog-page.catalog-page--swage
    .page-shell--footer-swage
    > #main-content::before,
  html.dark
    body.catalog-page.catalog-page--swage
    .page-shell--footer-swage
    > #main-content::before {
    background: var(--swage-canvas);
  }

  /* Core Banking parity corrective.  These pages share the exact semantic
     token contract, clear canvas, and unwrapped application-area icons. */
  body.catalog-page.catalog-page--swage main#main-content {
    position: relative;
    z-index: 1;
    background-color: var(--swage-canvas) !important;
    background-image: none !important;
  }

  body.catalog-page.catalog-page--swage .app-hero,
  body.catalog-page.catalog-page--swage .app-section,
  body.catalog-page.catalog-page--swage .app-bg-paper,
  body.catalog-page.catalog-page--swage .app-bg-dim,
  body.catalog-page.catalog-page--swage .app-bg-warm,
  body.catalog-page.catalog-page--swage .app-bg-cream,
  body.catalog-page.catalog-page--swage .app-bg-grid,
  body.catalog-page.catalog-page--swage .app-bg-hatch,
  body.catalog-page.catalog-page--swage #cta.swage-final-cta {
    background-image: none !important;
  }

  body.catalog-page.catalog-page--swage .swage-inside .swage-inside__card {
    display: flex;
    flex-direction: column;
    min-height: 13.5rem;
    padding: 1.4rem;
    border-color: var(--swage-line);
    border-radius: 0.65rem;
    background: var(--swage-elevated);
    box-shadow: none;
  }

  body.catalog-page.catalog-page--swage .swage-inside .swage-inside__icon {
    display: block;
    width: 3.35rem;
    height: 3.35rem;
    border: 0 !important;
    border-radius: 0 !important;
    color: color-mix(in srgb, var(--swage-accent), var(--swage-ink) 12%);
    background: transparent !important;
  }

  body.catalog-page.catalog-page--swage .swage-inside__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  body.catalog-page.catalog-page--swage .swage-inside__copy {
    margin-top: auto;
  }

  /* Ledger cards are a bento inventory: align their copy row instead of
     bottom-aligning it, so longer descriptions never stagger adjacent titles. */
  body.catalog-page.catalog-page--swage .swage-inside--ledger .swage-inside__card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3.35rem auto;
    align-content: start;
    gap: clamp(2.25rem, 3vw, 3.25rem);
  }

  body.catalog-page.catalog-page--swage .swage-inside--ledger .swage-inside__copy {
    margin-top: 0;
  }

  body.catalog-page.catalog-page--swage .swage-inside__card:hover .swage-inside__icon {
    background: transparent;
    transform: scale(1.045);
  }

  body.catalog-page.catalog-page--swage .app-hero-preview .live-dashboard,
  body.catalog-page.catalog-page--swage .swage-hero__product .live-dashboard {
    --ld-bg: var(--swage-elevated);
    --ld-fg: var(--swage-ink);
    --ld-card: var(--swage-elevated);
    --ld-muted: var(--swage-surface);
    --ld-muted-fg: var(--swage-muted);
    --ld-accent: color-mix(in srgb, var(--swage-accent), transparent 90%);
    --ld-border: var(--swage-line);
    --ld-sidebar: var(--swage-surface);
    --ld-brand: var(--swage-accent);
    --ld-ring-card: 0 0 0 1px var(--swage-line);
    --ld-shadow-sm: 0 1px 2px rgb(0 0 0 / 12%);
    background: var(--ld-bg);
    color: var(--ld-fg);
  }

  body.catalog-page.catalog-page--swage .live-dashboard .ld-signup::before {
    background: var(--swage-accent);
  }

  html[data-catalog-theme='dark'] body.catalog-page.catalog-page--swage,
  html.dark body.catalog-page.catalog-page--swage {
    --swage-canvas: #0d1015;
    --swage-surface: #141922;
    --swage-elevated: #1a202b;
    --swage-ink: #f5f2ea;
    --swage-muted: #a6adba;
    --swage-faint: #707887;
    --swage-line: rgb(240 236 226 / 14%);
    --swage-line-strong: rgb(240 236 226 / 24%);
    --swage-grid: transparent;
    --swage-accent: #b3b2fa;
    --swage-accent-soft: #292852;
    --swage-annotation: #ff7a2f;
    --swage-on-accent: #0d1015;
    --swage-shadow: 0 28px 80px rgb(0 0 0 / 28%);
    background-color: var(--swage-canvas) !important;
    background-image: none !important;
    color: var(--swage-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    body.catalog-page.catalog-page--swage .swage-live-preview-annotation {
      opacity: 1;
      animation: none;
    }

    body.catalog-page.catalog-page--swage .swage-live-preview-annotation .swage-annotation__line,
    body.catalog-page.catalog-page--swage .swage-live-preview-annotation .swage-annotation__tip {
      stroke-dashoffset: 0;
      opacity: 1;
      animation: none;
    }
  }

  @media (max-width: 47.9375rem) {
    body.catalog-page.catalog-page--swage .app-hero-preview {
      display: block;
      width: min(calc(100% - 1.5rem), 72rem);
      padding-top: 1.5rem !important;
    }

    body.catalog-page.catalog-page--swage .app-hero-preview .live-dashboard {
      max-height: 34rem;
    }

    body.catalog-page.catalog-page--swage .swage-live-preview-annotation {
      top: -1.2rem;
      right: 0.75rem;
      width: min(12rem, 58vw);
    }
  }
}

/* --------------------------------------------------------------------------
   Swage Technical Reference

   Long IT handbooks keep their real heading hierarchy without introducing a
   procedural index or artificial sequence. Tables and code receive more room
   than ordinary prose. */
@layer components {
  body.catalog-page.catalog-page--swage.swage-page--technical-reference .swage-child-hero h1 {
    max-width: 18ch;
    font-size: clamp(2.85rem, 7vw, 4.75rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__header {
    display: block;
    padding-block: clamp(5rem, 9vw, 8rem) clamp(2.5rem, 5vw, 4rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__header
    h2 {
    max-width: 55rem;
    font-size: clamp(2.4rem, 4vw, 3.75rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__header
    > div {
    margin-top: 1.5rem;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__header
    p {
    max-width: 64ch;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__body {
    padding-block: clamp(2rem, 5vw, 4rem) clamp(6rem, 11vw, 10rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__body
    > article {
    max-width: 72rem;
    margin-inline: auto;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter {
    padding-block: clamp(3.5rem, 7vw, 6.5rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose {
    min-width: 0;
    font-size: clamp(1rem, 0.98rem + 0.12vw, 1.075rem);
    line-height: 1.76;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    h2 {
    max-width: 25ch;
    margin-bottom: 1.5rem;
    font-size: clamp(2rem, 3.2vw, 3.15rem);
    line-height: 1.08;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    h3 {
    max-width: 34ch;
    margin-top: 3.25rem;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    :is(p, ul, ol, blockquote) {
    max-width: 72ch;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    :is(ul, ol) {
    padding-left: 1.75rem;
    list-style-position: outside;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    ul {
    list-style-type: disc;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    ol {
    list-style-type: decimal;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    li::marker {
    color: var(--swage-accent);
    font-weight: 650;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    a {
    display: inline-flex;
    min-height: 1.5rem;
    align-items: center;
    text-decoration-line: underline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.18em;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    .task-list-item {
    list-style: none;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    input[type='checkbox'] {
    width: 1rem;
    height: 1rem;
    margin: 0 0.65rem 0 -1.65rem;
    accent-color: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    :is(table, pre) {
    width: 100%;
    max-width: 100%;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-technical-reference__chapter
    .swage-prose
    :is(table, pre):focus-visible {
    outline: 2px solid var(--swage-accent);
    outline-offset: 3px;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference .swage-child-breadcrumb a {
    display: inline-flex;
    min-width: 1.5rem;
    min-height: 1.5rem;
    align-items: center;
    justify-content: center;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference
    .swage-linked-capabilities__list
    li:nth-child(odd) {
    border-right: 0;
  }

  @media (max-width: 42rem) {
    body.catalog-page.catalog-page--swage.swage-page--technical-reference
      .swage-technical-reference__chapter {
      padding-block: 3.5rem;
    }

    body.catalog-page.catalog-page--swage.swage-page--technical-reference
      .swage-technical-reference__chapter
      .swage-prose
      h2 {
      max-width: 19ch;
      font-size: clamp(1.85rem, 8vw, 2.35rem);
    }
  }
}

/* --------------------------------------------------------------------------
   Swage agent roster

   Agents are an unordered set of operating roles, so this uses a ruled
   inventory rather than sequence numbers, metric badges, or elevated cards. */
@layer components {
  body.catalog-page.catalog-page--swage-child .swage-agent-roster {
    padding: clamp(4.5rem, 8vw, 7.5rem) 0;
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__header {
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__header h2 {
    max-width: 13ch;
    margin: 0;
    color: var(--swage-ink);
    font: 700 clamp(2.75rem, 5vw, 4.8rem) / 0.96 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__header p {
    max-width: 36rem;
    margin: 1.25rem 0 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-body) / 1.6 var(--font-sans);
    text-wrap: pretty;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--swage-line-strong);
    list-style: none;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__list--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__list li {
    min-width: 0;
    border-bottom: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__list li:nth-child(odd) {
    border-right: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__list--count-3 li {
    border-right: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__list--count-3 li:last-child {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__list a {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 1.25rem;
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
    min-height: 9.5rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    color: var(--swage-ink);
    text-decoration: none;
    transition:
      color 160ms ease,
      background-color 160ms ease;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__list a:hover,
  body.catalog-page.catalog-page--swage-child .swage-agent-roster__list a:focus-visible {
    color: var(--swage-accent);
    background: var(--swage-accent-soft);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__list a:focus-visible {
    outline: 2px solid var(--swage-accent);
    outline-offset: -2px;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    color: var(--swage-muted);
    stroke-width: 1.8;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__copy {
    display: grid;
    gap: 0.65rem;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__copy strong {
    color: currentcolor;
    font: 700 clamp(1.25rem, 2vw, 1.65rem) / 1.05 var(--font-heading);
    letter-spacing: var(--swage-display-tracking-compact);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__copy > span {
    max-width: 31rem;
    color: var(--swage-muted);
    font: 400 var(--swage-type-ui) / 1.55 var(--font-sans);
    text-wrap: pretty;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-roster__arrow {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--swage-muted);
    stroke-width: 1.8;
    transition: transform 160ms ease;
  }

  body.catalog-page.catalog-page--swage-child
    .swage-agent-roster__list
    a:is(:hover, :focus-visible)
    .swage-agent-roster__arrow {
    color: currentcolor;
    transform: translateX(0.2rem);
  }

  @media (max-width: 62rem) {
    body.catalog-page.catalog-page--swage-child .swage-agent-roster__list--count-3 {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-roster__list--count-3 li {
      border-right: 0;
    }
  }

  @media (max-width: 47.9375rem) {
    body.catalog-page.catalog-page--swage-child .swage-agent-roster {
      padding: 4rem 0;
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-roster__header {
      margin-bottom: 2.5rem;
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-roster__header h2 {
      font-size: clamp(2.5rem, 12vw, 3.7rem);
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-roster__list {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-roster__list li:nth-child(odd) {
      border-right: 0;
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-roster__list a {
      grid-template-columns: 1.5rem minmax(0, 1fr) 1.125rem;
      gap: 1rem;
      min-height: 0;
      padding: 1.5rem 0;
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-roster__arrow {
      width: 1.125rem;
      height: 1.125rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.catalog-page.catalog-page--swage-child .swage-agent-roster__list a,
    body.catalog-page.catalog-page--swage-child .swage-agent-roster__arrow {
      transition: none;
    }

    body.catalog-page.catalog-page--swage-child
      .swage-agent-roster__list
      a:is(:hover, :focus-visible)
      .swage-agent-roster__arrow {
      transform: none;
    }
  }
}

/* --------------------------------------------------------------------------
   Swage agent operating context

   A detail-page rail for qualitative inputs, decisions, and outputs. It is
   deliberately separate from the numeric landing-page metric rail. */
@layer components {
  body.catalog-page.catalog-page--swage-child .swage-agent-context {
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-context__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-context__item {
    min-width: 0;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-right: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-context__item:last-child {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-context__item dt {
    margin: 0 0 0.7rem;
    color: var(--swage-muted);
    font: 600 var(--swage-type-label) / 1.3 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-context__item dd {
    display: grid;
    gap: 0.55rem;
    margin: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-context__item strong {
    color: var(--swage-ink);
    font: 700 clamp(1.2rem, 1.8vw, 1.55rem) / 1.1 var(--font-heading);
    letter-spacing: var(--swage-display-tracking-compact);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-context__item dd span {
    max-width: 30rem;
    color: var(--swage-muted);
    font: 400 var(--swage-type-ui) / 1.55 var(--font-sans);
    text-wrap: pretty;
  }

  @media (max-width: 47.9375rem) {
    body.catalog-page.catalog-page--swage-child .swage-agent-context__list {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-context__item {
      padding: 1.5rem 0;
      border-right: 0;
      border-bottom: 1px solid var(--swage-line);
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-context__item:last-child {
      border-bottom: 0;
    }
  }
}

/* --------------------------------------------------------------------------
   Swage feature context

   A qualitative three-part rail for the records, decisions, and controls that
   define a feature. It shares the operating-context rhythm without presenting
   unsupported metrics. */
@layer components {
  body.catalog-page.catalog-page--swage-child .swage-feature-context {
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage-child .swage-feature-context__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-feature-context__item {
    min-width: 0;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-right: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-feature-context__item:last-child {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-feature-context__item dt {
    margin: 0 0 0.7rem;
    color: var(--swage-muted);
    font: 600 var(--swage-type-label) / 1.3 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage-child .swage-feature-context__item dd {
    display: grid;
    gap: 0.55rem;
    margin: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-feature-context__item strong {
    color: var(--swage-ink);
    font: 700 clamp(1.2rem, 1.8vw, 1.55rem) / 1.1 var(--font-heading);
    letter-spacing: var(--swage-display-tracking-compact);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage-child .swage-feature-context__item dd span {
    max-width: 30rem;
    color: var(--swage-muted);
    font: 400 var(--swage-type-ui) / 1.55 var(--font-sans);
    text-wrap: pretty;
  }

  @media (max-width: 47.9375rem) {
    body.catalog-page.catalog-page--swage-child .swage-feature-context__list {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage-child .swage-feature-context__item {
      padding: 1.5rem 0;
      border-right: 0;
      border-bottom: 1px solid var(--swage-line);
    }

    body.catalog-page.catalog-page--swage-child .swage-feature-context__item:last-child {
      border-bottom: 0;
    }
  }
}

/* --------------------------------------------------------------------------
   Swage app contexts

   Canonical skills may materialize in more than one workspace. These are
   factual composition notes, not app cards or marketing badges. */
@layer components {
  body.catalog-page.catalog-page--swage-child .swage-app-contexts {
    padding-block: clamp(5rem, 10vw, 9rem);
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
    gap: 1.25rem 5rem;
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.75rem);
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__header h2 {
    max-width: 14ch;
    margin: 0;
    color: var(--swage-ink);
    font: 650 clamp(2.45rem, 4.7vw, 5rem) / 1.02 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__header p {
    max-width: 32rem;
    margin: 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-body) / 1.65 var(--font-sans);
    text-wrap: pretty;
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--swage-line-strong);
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__list--count-1 {
    grid-template-columns: 1fr;
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__list article {
    min-width: 0;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-right: 1px solid var(--swage-line);
    border-bottom: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__list article:last-child {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__list h3 {
    margin: 0 0 0.8rem;
    color: var(--swage-ink);
    font: 650 clamp(1.25rem, 2vw, 1.65rem) / 1.2 var(--font-heading);
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__list h3 a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    color: inherit;
    text-decoration-color: var(--swage-accent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }

  body.catalog-page.catalog-page--swage-child
    .swage-app-contexts__list
    h3
    a:is(:hover, :focus-visible) {
    color: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__list p {
    max-width: 43rem;
    margin: 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-ui) / 1.65 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage-child .swage-app-contexts__list code {
    color: var(--swage-ink);
    font: 500 0.88em / 1.4 var(--font-mono);
  }

  @media (max-width: 42rem) {
    body.catalog-page.catalog-page--swage-child .swage-app-contexts__header,
    body.catalog-page.catalog-page--swage-child .swage-app-contexts__list {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage-child .swage-app-contexts__list article {
      padding-inline: 0;
      border-right: 0;
    }
  }
}

/* --------------------------------------------------------------------------
   Swage operating manual

   Renders the complete canonical SKILL.md as durable long-form documentation.
   Ordered markers are reserved for the real Build, Maintain, Scale sequence. */
@layer components {
  body.catalog-page.catalog-page--swage-child .swage-skill-manual {
    --swage-manual-sticky-top: 4.75rem;

    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-canvas);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.78fr);
    gap: 2rem 5rem;
    align-items: end;
    padding-block: clamp(6rem, 11vw, 10rem) clamp(3rem, 6vw, 5rem);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__header h2 {
    max-width: 13ch;
    margin: 0;
    color: var(--swage-ink);
    font: 650 clamp(2.8rem, 5.6vw, 5.8rem) / 0.98 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__header > div {
    display: grid;
    gap: 1rem;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__header p {
    max-width: 34rem;
    margin: 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-body) / 1.65 var(--font-sans);
    text-wrap: pretty;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__header code {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--swage-line);
    background: var(--swage-surface);
    overflow-wrap: anywhere;
    color: var(--swage-muted);
    font: 500 0.75rem / 1.55 var(--font-mono);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__nav-sentinel {
    display: block;
    width: 1px;
    height: 1px;
    margin-bottom: -1px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-1 * var(--swage-manual-sticky-top)));
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__nav {
    position: sticky;
    z-index: 4;
    top: var(--swage-manual-sticky-top);
    background: transparent;
  }

  body.catalog-page.catalog-page--swage-child
    .swage-skill-manual__nav
    .swage-skill-manual__nav-track {
    display: flex;
    width: var(--swage-max-content-rail);
    max-width: none;
    overflow-x: auto;
    border-inline: 1px solid var(--swage-line);
    border-bottom: 1px solid var(--swage-line);
    background: color-mix(in srgb, var(--swage-surface) 76%, var(--swage-canvas));
    backdrop-filter: blur(12px);
    scrollbar-width: none;
  }

  body.catalog-page.catalog-page--swage-child
    .swage-skill-manual__nav:not(.is-stuck)
    .swage-skill-manual__nav-track {
    box-shadow: inset 0 1px 0 var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__nav-track::-webkit-scrollbar {
    display: none;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__nav a {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.75rem;
    padding-inline: 1.25rem;
    border-bottom: 2px solid transparent;
    color: var(--swage-muted);
    font: 600 var(--swage-type-label) / 1.3 var(--font-sans);
    text-decoration: none;
    transition:
      color 150ms ease,
      background-color 150ms ease;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__nav a span {
    color: var(--swage-faint);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    transition: color 150ms ease;
  }

  body.catalog-page.catalog-page--swage-child
    .swage-skill-manual__nav
    a:is(:hover, :focus-visible) {
    color: var(--swage-ink);
    background: color-mix(in srgb, var(--swage-elevated) 42%, transparent);
    outline: none;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__nav a.is-active {
    border-bottom-color: var(--swage-accent);
    color: var(--swage-ink);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__nav a.is-active span {
    color: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__nav a:focus-visible {
    box-shadow: inset 0 0 0 2px var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__body {
    padding-block: clamp(3rem, 7vw, 7rem) clamp(6rem, 11vw, 10rem);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__body > article {
    max-width: 65rem;
    margin-inline: auto;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__section {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    border-top: 1px solid var(--swage-line-strong);
    scroll-margin-top: 9rem;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__section:first-child {
    border-top: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__stage {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    color: var(--swage-muted);
    font: 600 var(--swage-type-label) / 1.3 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__stage span {
    color: var(--swage-accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content {
    color: var(--swage-ink);
    font: 400 var(--swage-type-body) / 1.72 var(--font-sans);
    overflow-wrap: anywhere;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content > :first-child {
    margin-top: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content > :last-child {
    margin-bottom: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content h2 {
    max-width: 18ch;
    margin: 0 0 1.5rem;
    color: var(--swage-ink);
    font: 650 clamp(2.15rem, 4vw, 3.75rem) / 1.05 var(--font-heading);
    letter-spacing: var(--swage-display-tracking-compact);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content h3 {
    margin: 2.75rem 0 1rem;
    color: var(--swage-ink);
    font: 650 clamp(1.4rem, 2.2vw, 1.85rem) / 1.2 var(--font-heading);
    letter-spacing: var(--swage-display-tracking-compact);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content h4 {
    margin: 2rem 0 0.75rem;
    color: var(--swage-ink);
    font: 650 1.12rem / 1.3 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content :is(p, ul, ol) {
    max-width: 58rem;
    margin-block: 1rem;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content :is(ul, ol) {
    padding-left: 1.4rem;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content li {
    margin-block: 0.55rem;
    padding-left: 0.25rem;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content a {
    color: var(--swage-accent);
    text-underline-offset: 0.16em;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content code {
    padding: 0.12em 0.32em;
    border: 1px solid var(--swage-line);
    border-radius: 0.2rem;
    background: var(--swage-surface);
    font: 500 0.88em / 1.4 var(--font-mono);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content pre {
    max-width: 100%;
    overflow-x: auto;
    margin-block: 1.5rem;
    padding: 1.25rem;
    border-radius: 0.35rem;
    background: var(--swage-ink);
    color: var(--swage-canvas);
    font: 500 0.82rem / 1.65 var(--font-mono);
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content pre code {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin-block: 1.75rem;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content :is(th, td) {
    min-width: 9rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--swage-line);
    text-align: left;
    vertical-align: top;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content th {
    background: var(--swage-surface);
    font-weight: 650;
  }

  body.catalog-page.catalog-page--swage-child .swage-skill-manual__content blockquote {
    margin: 1.75rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--swage-line);
    border-left-color: var(--swage-accent);
    background: color-mix(in srgb, var(--swage-surface) 72%, var(--swage-canvas));
    color: var(--swage-muted);
  }

  @media (max-width: 42rem) {
    body.catalog-page.catalog-page--swage-child .swage-skill-manual__header {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage-child .swage-skill-manual__nav a {
      flex: 0 0 auto;
      min-height: 3.25rem;
      padding-inline: 1rem;
    }

    body.catalog-page.catalog-page--swage-child .swage-skill-manual__body {
      padding-top: 1.5rem;
    }

    body.catalog-page.catalog-page--swage-child .swage-skill-manual__section {
      padding-block: 3rem;
    }

    body.catalog-page.catalog-page--swage-child .swage-skill-manual__content {
      font-size: 1rem;
    }

    body.catalog-page.catalog-page--swage-child .swage-skill-manual__content :is(th, td) {
      min-width: 11rem;
    }
  }
}

/* --------------------------------------------------------------------------
   Swage child-route mast

   This first child-route primitive extends the Product Proof Spine with a
   quieter page mast. It deliberately excludes graph fields, promotional
   badges, and all-caps type so the hierarchy comes from the Swage type and
   spacing scales. */
@layer components {
  body.catalog-page.catalog-page--swage-child .swage-child-mast {
    padding-top: 4.75rem;
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-canvas);
  }

  body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: safe center;
    gap: 0.5rem;
    margin: 0 auto;
    overflow-x: auto;
    color: var(--swage-muted);
    font: 600 var(--swage-type-label) / 1.4 var(--font-sans);
    white-space: nowrap;
    scrollbar-width: none;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb::-webkit-scrollbar {
    display: none;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb > :is(a, span) {
    flex: 0 0 auto;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb__label--short {
    display: none;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    color: var(--swage-ink);
    text-decoration-color: color-mix(in srgb, var(--swage-ink), transparent 68%);
    text-underline-offset: 0.18em;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb a:hover,
  body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb a:focus-visible {
    color: var(--swage-accent);
    text-decoration-color: currentcolor;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb a:focus-visible {
    border-radius: 0.2rem;
    outline: 2px solid var(--swage-accent);
    outline-offset: 0.2rem;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb__separator {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
    color: var(--swage-muted);
    stroke-width: 1.7;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-hero {
    width: min(calc(100% - 3rem), 52rem);
    margin: 0 auto;
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(4.5rem, 8vw, 7.5rem);
    text-align: center;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-hero h1 {
    max-width: 11ch;
    margin: 1.25rem auto 0;
    color: var(--swage-ink);
    font: 700 clamp(3.25rem, 6vw, 5.75rem) / 0.92 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-hero h1 em {
    color: var(--swage-accent);
    font-style: normal;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-hero > p {
    max-width: 37rem;
    margin: 1.5rem auto 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-body) / 1.6 var(--font-sans);
    text-wrap: pretty;
  }

  body.catalog-page.catalog-page--swage-child .swage-child-hero__actions {
    display: flex;
    justify-content: center;
    margin-top: 1.75rem;
  }

  @media (max-width: 47.9375rem) {
    body.catalog-page.catalog-page--swage-child .swage-child-mast {
      padding-top: 4.25rem;
    }

    body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb,
    body.catalog-page.catalog-page--swage-child .swage-child-hero {
      width: min(calc(100% - 2rem), var(--swage-section-max));
    }

    body.catalog-page.catalog-page--swage-child
      .swage-child-breadcrumb
      .swage-child-breadcrumb__label--replaced {
      display: none;
    }

    body.catalog-page.catalog-page--swage-child .swage-child-breadcrumb__label--short {
      display: inline;
    }

    body.catalog-page.catalog-page--swage-child .swage-child-hero {
      padding: 3.25rem 0 4rem;
    }

    body.catalog-page.catalog-page--swage-child .swage-child-hero h1 {
      max-width: 9.5ch;
      font-size: clamp(2.75rem, 13vw, 4.2rem);
      line-height: 0.94;
    }

    body.catalog-page.catalog-page--swage-child .swage-child-hero > p {
      max-width: 31rem;
      margin-top: 1.25rem;
    }

    body.catalog-page.catalog-page--swage-child .swage-child-hero__actions {
      margin-top: 1.5rem;
    }
  }
}

/* --------------------------------------------------------------------------
   Swage agent activity record

   A chronological, reviewable ledger for agent decisions. It is intentionally
   not terminal chrome: the hierarchy comes from time, copy, and ruled rows. */
@layer components {
  body.catalog-page.catalog-page--swage-child .swage-agent-log {
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-canvas);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log > .swage-shell {
    padding-block: clamp(5rem, 10vw, 9rem);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
    gap: 1.25rem 5rem;
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.75rem);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__header h2 {
    max-width: 14ch;
    margin: 0;
    color: var(--swage-ink);
    font: 650 clamp(2.45rem, 4.7vw, 5rem) / 1.02 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__header p {
    max-width: 32rem;
    margin: 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-body) / 1.65 var(--font-sans);
    text-wrap: pretty;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__record {
    border-top: 1px solid var(--swage-line-strong);
    border-bottom: 1px solid var(--swage-line-strong);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__mast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    min-height: 4.25rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.8rem;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    color: var(--swage-ink);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__identity strong {
    color: var(--swage-ink);
    font: 650 var(--swage-type-ui) / 1.35 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__mast > span {
    color: var(--swage-muted);
    font: 500 var(--swage-type-label) / 1.35 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__entries {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__entries li {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    min-height: 5.5rem;
    border-bottom: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__entries li:last-child {
    border-bottom: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__entries time {
    padding: 1.4rem 1.25rem;
    border-right: 1px solid var(--swage-line);
    color: var(--swage-muted);
    font: 500 0.82rem / 1.5 var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  body.catalog-page.catalog-page--swage-child .swage-agent-log__entries p {
    align-self: center;
    max-width: 59rem;
    margin: 0;
    padding: 1.35rem 1.5rem;
    color: var(--swage-ink);
    font: 450 var(--swage-type-ui) / 1.6 var(--font-sans);
    text-wrap: pretty;
  }

  @media (max-width: 42rem) {
    body.catalog-page.catalog-page--swage-child .swage-agent-log__header {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-log__mast {
      align-items: flex-start;
      flex-direction: column;
      padding-inline: 0;
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-log__entries li {
      grid-template-columns: 4.75rem minmax(0, 1fr);
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-log__entries time {
      padding-inline: 0;
    }

    body.catalog-page.catalog-page--swage-child .swage-agent-log__entries p {
      padding-right: 0;
      padding-left: 1.25rem;
    }
  }
}

/* --------------------------------------------------------------------------
   Swage linked capabilities

   A ruled dependency inventory for the published skills an agent composes.
   Links use bare system-size Tabler icons and expose their complete hit area. */
@layer components {
  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities {
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities > .swage-shell {
    padding-block: clamp(5rem, 10vw, 9rem);
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
    gap: 1.25rem 5rem;
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.75rem);
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__header h2 {
    max-width: 20ch;
    margin: 0;
    color: var(--swage-ink);
    font: 650 clamp(2.25rem, 3.6vw, 3.75rem) / 1.04 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__header p {
    max-width: 32rem;
    margin: 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-body) / 1.65 var(--font-sans);
    text-wrap: pretty;
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--swage-line-strong);
    list-style: none;
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list li {
    min-width: 0;
    border-bottom: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list li:nth-child(odd) {
    border-right: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list--count-3 li {
    border-right: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage-child
    .swage-linked-capabilities__list--count-3
    li:last-child {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list a {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 1.25rem;
    gap: 1.25rem;
    align-items: start;
    min-height: 9.5rem;
    padding: 1.75rem;
    color: var(--swage-ink);
    text-decoration: none;
    transition:
      color 180ms var(--swage-menu-ease),
      background-color 180ms var(--swage-menu-ease);
  }

  body.catalog-page.catalog-page--swage-child
    .swage-linked-capabilities__list
    a:is(:hover, :focus-visible) {
    color: var(--swage-accent);
    background: var(--swage-canvas);
    outline: none;
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list a:focus-visible {
    box-shadow: inset 0 0 0 2px var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__icon,
  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: currentColor;
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__arrow {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    transition: transform 180ms var(--swage-menu-ease);
  }

  body.catalog-page.catalog-page--swage-child
    .swage-linked-capabilities__list
    a:is(:hover, :focus-visible)
    .swage-linked-capabilities__arrow {
    transform: translateX(0.2rem);
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__copy {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__copy strong {
    font: 650 clamp(1.25rem, 2vw, 1.65rem) / 1.2 var(--font-heading);
  }

  body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__copy > span {
    max-width: 28rem;
    color: var(--swage-muted);
    font: 400 var(--swage-type-ui) / 1.55 var(--font-sans);
    text-wrap: pretty;
  }

  @media (max-width: 62rem) {
    body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list--count-3 {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list--count-3 li {
      border-right: 0;
    }
  }

  @media (max-width: 42rem) {
    body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__header,
    body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list li:nth-child(odd) {
      border-right: 0;
    }

    body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list a {
      grid-template-columns: 1.5rem minmax(0, 1fr) 1.125rem;
      gap: 1rem;
      min-height: 0;
      padding: 1.5rem 0;
    }

    body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__arrow {
      width: 1.125rem;
      height: 1.125rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__list a,
    body.catalog-page.catalog-page--swage-child .swage-linked-capabilities__arrow {
      transition: none;
    }

    body.catalog-page.catalog-page--swage-child
      .swage-linked-capabilities__list
      a:is(:hover, :focus-visible)
      .swage-linked-capabilities__arrow {
      transform: none;
    }
  }
}

/* --------------------------------------------------------------------------
   Swage route-family navigation contract

   The same ERP/CRM product navigation is rendered on landing, feature, and
   agent routes. Keep its resting and mobile states independent of each
   page's legacy body modifier so the shared component cannot fall back to
   Tacet chrome outside the two landing templates. */
@layer components {
  .erpnav,
  .crmnav {
    --swage-canvas: #fbfbf8;
    --swage-surface: #f4f5f2;
    --swage-menu-rail: #f2efe9;
    --swage-elevated: #fff;
    --swage-ink: #17191d;
    --swage-muted: #67707c;
    --swage-faint: #9199a5;
    --swage-line: rgb(23 25 29 / 13%);
    --swage-line-strong: rgb(23 25 29 / 22%);
    --swage-accent: #5356c2;
    --swage-accent-soft: #eeedfb;
    --swage-on-accent: #fff;
    --swage-control-height: 3rem;
    --swage-control-height-compact: 2.75rem;
    --swage-control-radius: 0.625rem;
    --swage-control-gap: 0.5rem;
    --swage-control-pad-x: 1rem;
    --swage-menu-duration: 300ms;
    --swage-menu-content-duration: 200ms;
    --swage-menu-content-delay: 80ms;
    --swage-menu-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --swage-menu-shadow:
      0 0.625rem 1.25rem 0.0625rem rgb(17 25 39 / 4%), 0 3rem 3rem -1.5rem rgb(17 25 39 / 9%),
      0 0.25rem 0.75rem rgb(17 25 39 / 6%);
    position: sticky;
    top: 0;
    z-index: 90;
    display: block;
    min-height: 4.75rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    font-family: var(--font-sans);
    letter-spacing: normal;
    text-transform: none;
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      backdrop-filter 180ms ease;
  }

  .erpnav[data-scrolled='true'],
  .crmnav[data-scrolled='true'] {
    border-bottom: 1px solid var(--swage-line, var(--border));
    background: color-mix(in srgb, var(--swage-canvas, var(--background)), transparent 14%);
    backdrop-filter: blur(18px);
  }

  .erpnav-inner,
  .crmnav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: min(calc(100% - 3rem), 72rem);
    max-width: none;
    height: 4.75rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .erpnav-left,
  .crmnav-left {
    display: contents;
  }

  .erpnav-brand-wrap,
  .crmnav-brand-wrap {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-width: max-content;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .erpnav-logo,
  .crmnav-logo {
    display: inline-flex;
    align-items: center;
    padding: 0;
    color: var(--swage-ink);
  }

  .erpnav-logo :is(svg, img),
  .crmnav-logo :is(svg, img) {
    display: block;
    width: 4.9rem;
    height: auto;
  }

  .erpnav-center,
  .crmnav-center {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 0.25rem;
    min-width: 0;
  }

  .erpnav-right,
  .crmnav-right {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }

  .erpnav a.erpnav-link,
  .erpnav button.erpnav-link,
  .crmnav a.crmnav-link,
  .crmnav button.crmnav-link {
    padding: 0.5rem 0.7rem;
    border-bottom-color: transparent;
    color: var(--swage-muted, var(--text-m));
    background: transparent;
    font: 600 0.72rem/1 var(--font-sans);
    letter-spacing: -0.01em;
    text-transform: none;
  }

  .erpnav a.erpnav-link:hover,
  .erpnav button.erpnav-link:hover,
  .crmnav a.crmnav-link:hover,
  .crmnav button.crmnav-link:hover,
  .erpnav a.erpnav-link.is-current,
  .crmnav a.crmnav-link.is-current {
    border-bottom-color: transparent;
    color: var(--swage-ink, var(--foreground));
    background: transparent;
  }

  .erpnav button.erpnav-features-trigger,
  .crmnav button.crmnav-features-trigger {
    gap: 0.375rem;
    border-radius: 0.45rem;
    transition:
      color 150ms ease,
      background-color 150ms ease,
      box-shadow 150ms ease;
  }

  .erpnav-features-trigger .nav-caret,
  .crmnav-features-trigger .nav-caret {
    display: block;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: currentcolor;
    stroke-width: 2.25;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 180ms var(--swage-menu-ease);
  }

  .erpnav-features[data-open='true'] .nav-caret,
  .crmnav-features[data-open='true'] .nav-caret {
    transform: rotate(180deg);
  }

  .erpnav-features::after,
  .crmnav-features::after {
    position: absolute;
    top: 100%;
    right: -0.65rem;
    left: -0.65rem;
    height: 0.75rem;
    content: '';
    pointer-events: none;
  }

  .erpnav-features[data-open='true']::after,
  .crmnav-features[data-open='true']::after {
    pointer-events: auto;
  }

  .erpnav-features:hover .erpnav-features-trigger,
  .erpnav-features[data-open='true'] .erpnav-features-trigger,
  .crmnav-features:hover .crmnav-features-trigger,
  .crmnav-features[data-open='true'] .crmnav-features-trigger {
    color: var(--swage-ink);
    background: color-mix(in srgb, var(--swage-ink), transparent 95%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swage-line), transparent 30%);
  }

  .erpnav-right .erpnav-cta,
  .crmnav-right .crmnav-cta {
    --swage-button-height: var(--swage-control-height-compact);
    --swage-button-pad-x: 0.75rem;
    margin-left: 0;
  }

  .erpnav-mobile-menu,
  .crmnav-mobile-menu {
    display: none;
  }

  html[data-catalog-theme='dark'] .erpnav,
  html[data-catalog-theme='dark'] .crmnav,
  html.dark .erpnav,
  html.dark .crmnav {
    --swage-canvas: #0d1015;
    --swage-surface: #141922;
    --swage-menu-rail: #191817;
    --swage-elevated: #1a202b;
    --swage-ink: #f5f2ea;
    --swage-muted: #a6adba;
    --swage-faint: #707887;
    --swage-line: rgb(240 236 226 / 14%);
    --swage-line-strong: rgb(240 236 226 / 24%);
    --swage-accent: #b3b2fa;
    --swage-accent-soft: #292852;
    --swage-on-accent: #0d1015;
    --swage-menu-shadow:
      0 0.625rem 1.25rem 0.0625rem rgb(0 0 0 / 18%), 0 3rem 3rem -1.5rem rgb(0 0 0 / 34%),
      0 0.25rem 0.75rem rgb(0 0 0 / 20%);
  }

  @media (min-width: 47.5625rem) {
    .erpnav-mega {
      position: fixed;
      top: 4.75rem;
      left: max(1.5rem, calc((100vw - var(--erpnav-mega-w)) / 2));
    }

    .crmnav-mega {
      position: fixed;
      top: 4.75rem;
      left: max(1.5rem, calc((100vw - var(--crmnav-mega-w)) / 2));
    }
  }

  @media (max-width: 47.5rem) {
    .erpnav-inner,
    .crmnav-inner {
      width: min(calc(100% - 1.5rem), 72rem);
    }

    .erpnav-center,
    .crmnav-center,
    .erpnav-right,
    .crmnav-right {
      display: none;
    }

    .erpnav-logo :is(svg, img),
    .crmnav-logo :is(svg, img) {
      height: 1.6rem;
    }

    .erpnav-mobile-menu,
    .crmnav-mobile-menu {
      position: relative;
      z-index: 2;
      grid-column: 3;
      display: block;
      justify-self: end;
    }

    .erpnav-mobile-menu > summary,
    .crmnav-mobile-menu > summary {
      display: grid;
      width: 2.75rem;
      height: 2.75rem;
      place-content: center;
      gap: 0.22rem;
      border: 1px solid var(--swage-line-strong, var(--border));
      border-radius: 0.45rem;
      background: var(--swage-elevated, var(--background));
      cursor: pointer;
      list-style: none;
    }

    .erpnav-mobile-menu > summary::-webkit-details-marker,
    .crmnav-mobile-menu > summary::-webkit-details-marker,
    .erpnav-mobile-menu details > summary::-webkit-details-marker,
    .crmnav-mobile-menu details > summary::-webkit-details-marker {
      display: none;
    }

    .erpnav-mobile-menu > summary span,
    .crmnav-mobile-menu > summary span {
      display: block;
      width: 1rem;
      height: 1px;
      background: var(--swage-ink, var(--foreground));
      transition:
        transform 180ms ease,
        opacity 180ms ease;
    }

    .erpnav-mobile-menu[open] > summary span:nth-child(1),
    .crmnav-mobile-menu[open] > summary span:nth-child(1) {
      transform: translateY(0.3rem) rotate(45deg);
    }

    .erpnav-mobile-menu[open] > summary span:nth-child(2),
    .crmnav-mobile-menu[open] > summary span:nth-child(2) {
      opacity: 0;
    }

    .erpnav-mobile-menu[open] > summary span:nth-child(3),
    .crmnav-mobile-menu[open] > summary span:nth-child(3) {
      transform: translateY(-0.3rem) rotate(-45deg);
    }

    .erpnav-mobile-panel,
    .crmnav-mobile-panel {
      position: fixed;
      z-index: 9999;
      top: 4.45rem;
      right: 0.75rem;
      display: grid;
      width: min(24rem, calc(100vw - 1.5rem));
      max-height: calc(100dvh - 6.5rem);
      gap: 0;
      overflow: auto;
      padding: 0.65rem;
      border: 1px solid var(--swage-line-strong, var(--border));
      border-radius: 0.65rem;
      background: var(--swage-elevated, var(--background));
      box-shadow: var(--swage-shadow, 0 1.25rem 4rem rgb(0 0 0 / 16%));
      transform-origin: top right;
      animation: swage-mobile-menu-in 180ms ease-out both;
    }

    .erpnav-mobile-panel > a,
    .crmnav-mobile-panel > a,
    .erpnav-mobile-panel details > summary,
    .crmnav-mobile-panel details > summary,
    .erpnav-mobile-panel details a,
    .crmnav-mobile-panel details a {
      display: block;
      padding: 0.75rem;
      border-radius: 0.35rem;
      color: var(--swage-ink, var(--foreground));
      font: 600 0.82rem/1.25 var(--font-sans);
      letter-spacing: -0.01em;
      text-decoration: none;
      text-transform: none;
    }

    .erpnav-mobile-panel details > summary,
    .crmnav-mobile-panel details > summary {
      cursor: pointer;
      list-style: none;
    }

    .erpnav-mobile-panel details[open] > summary,
    .crmnav-mobile-panel details[open] > summary {
      background: var(--swage-surface, var(--surface-dim));
    }

    .erpnav-mobile-panel details > div,
    .crmnav-mobile-panel details > div {
      display: grid;
      padding: 0.2rem 0 0.35rem 0.75rem;
    }

    .erpnav-mobile-panel details a,
    .crmnav-mobile-panel details a {
      color: var(--swage-muted, var(--text-m));
      font-weight: 500;
    }

    .erpnav-mobile-panel > .erpnav-mobile-cta,
    .crmnav-mobile-panel > .crmnav-mobile-cta {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      margin-top: 0.35rem;
      color: var(--swage-on-accent, white) !important;
      background: var(--swage-accent, #5356c2);
      white-space: nowrap;
    }

    .erpnav-mobile-cta [data-icon],
    .crmnav-mobile-cta [data-icon] {
      flex: 0 0 auto;
    }

    .swage-mobile-nav__section {
      padding: 0.7rem;
      border-bottom: 1px solid var(--swage-line);
    }

    .swage-mobile-nav__label {
      display: block;
      margin-bottom: 0.5rem;
      color: var(--swage-muted);
      font: 500 0.7rem/1.2 var(--font-sans);
      letter-spacing: 0;
      text-transform: none;
    }

    .swage-mobile-nav__section > nav {
      display: grid;
      gap: 0.1rem;
    }

    .swage-mobile-nav__section > nav > a {
      min-height: 2.65rem;
      padding: 0.7rem 0.5rem;
      border-radius: 0.35rem;
      color: var(--swage-ink);
      font: 600 0.88rem/1.25 var(--font-sans);
      letter-spacing: -0.01em;
      text-decoration: none;
    }

    .swage-mobile-nav__section > nav > a:hover,
    .swage-mobile-nav__section > nav > a:focus-visible {
      color: var(--swage-accent);
      background: var(--swage-surface);
    }

    .swage-mobile-nav details.swage-mobile-nav__group > summary:hover,
    .swage-mobile-nav details.swage-mobile-nav__group > summary:focus-visible {
      color: var(--swage-accent);
      background: var(--swage-surface);
    }

    .swage-mobile-nav details.swage-mobile-nav__group > summary {
      display: flex;
      min-height: 2.75rem;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.72rem 0.5rem;
      border-radius: 0.35rem;
      color: var(--swage-ink);
      font: 600 0.84rem/1.25 var(--font-sans);
    }

    .swage-mobile-nav details.swage-mobile-nav__group[open] > summary {
      background: var(--swage-surface);
    }

    .swage-mobile-nav__caret {
      width: 1rem;
      height: 1rem;
      flex: 0 0 auto;
      color: var(--swage-muted);
      stroke-width: 2.25;
      transition: transform 180ms var(--swage-menu-ease);
    }

    .swage-mobile-nav__group[open] .swage-mobile-nav__caret {
      transform: rotate(180deg);
    }

    .swage-mobile-nav details.swage-mobile-nav__group > div {
      display: grid;
      gap: 0.05rem;
      padding: 0.25rem 0.15rem 0.55rem 0.65rem;
    }

    .swage-mobile-nav details.swage-mobile-nav__group > div > a {
      min-height: 2.45rem;
      padding: 0.65rem 0.5rem;
      border-radius: 0.3rem;
      color: var(--swage-muted);
      font: 500 0.78rem/1.25 var(--font-sans);
      letter-spacing: -0.005em;
      text-decoration: none;
    }

    .swage-mobile-nav details.swage-mobile-nav__group > div > a:hover,
    .swage-mobile-nav details.swage-mobile-nav__group > div > a:focus-visible {
      color: var(--swage-accent);
      background: var(--swage-surface);
    }

    .swage-mobile-nav > a.swage-mobile-nav__spotlight {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.75rem;
      min-height: 4.5rem;
      margin-top: 0.65rem;
      padding: 0.72rem;
      border: 1px solid var(--swage-line);
      border-radius: 0.55rem;
      color: var(--swage-ink);
      background: var(--swage-surface);
      text-decoration: none;
    }

    .swage-mobile-nav__spotlight > span:nth-child(2) {
      display: grid;
      min-width: 0;
      gap: 0.16rem;
    }

    .swage-mobile-nav__spotlight strong {
      font: 600 0.8rem/1.25 var(--font-sans);
    }

    .swage-mobile-nav__spotlight small {
      overflow: hidden;
      color: var(--swage-muted);
      font: 400 0.68rem/1.3 var(--font-sans);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .swage-mobile-nav .swage-product-mega__mark {
      display: grid;
      width: 2.35rem;
      height: 2.35rem;
      place-items: center;
      border-radius: 0.5rem;
      color: var(--swage-accent);
      background: var(--swage-accent-soft);
      font: 700 0.6rem/1 var(--font-sans);
    }

    .swage-mobile-nav__spotlight > [data-icon] {
      color: var(--swage-accent);
      transition: transform 150ms ease;
    }

    .swage-mobile-nav__spotlight:hover > [data-icon] {
      transform: translate(0.12rem, -0.12rem);
    }

    .swage-mobile-nav > a.swage-mobile-nav__spotlight:hover,
    .swage-mobile-nav > a.swage-mobile-nav__spotlight:focus-visible {
      border-color: var(--swage-accent);
      color: var(--swage-accent);
      background: var(--swage-accent-soft);
    }

    .swage-mobile-nav a:focus-visible,
    .swage-mobile-nav summary:focus-visible {
      outline: 2px solid var(--swage-accent);
      outline-offset: -2px;
    }
  }

  @media (min-width: 47.5625rem) {
    .erpnav-mega.swage-product-mega,
    .crmnav-mega.swage-product-mega {
      --swage-product-mega-width: min(75rem, calc(100vw - 3rem));
      position: fixed;
      top: 5.15rem;
      left: 50%;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      width: var(--swage-product-mega-width);
      height: min(34rem, calc(100dvh - 6.5rem));
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--swage-line-strong, var(--border));
      border-radius: 1.25rem;
      background: var(--swage-elevated, var(--background));
      box-shadow: var(--swage-menu-shadow);
      opacity: 0;
      filter: blur(0.25rem);
      visibility: hidden;
      pointer-events: none;
      transform: translate(-50%, -0.55rem) scale(0.985);
      transform-origin: top center;
      transition:
        opacity var(--swage-menu-duration) var(--swage-menu-ease),
        transform var(--swage-menu-duration) var(--swage-menu-ease),
        filter var(--swage-menu-duration) var(--swage-menu-ease),
        visibility 0s linear var(--swage-menu-duration);
    }

    .erpnav-features[data-open='true'] .erpnav-mega.swage-product-mega,
    .crmnav-features[data-open='true'] .crmnav-mega.swage-product-mega {
      opacity: 1;
      filter: none;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0) scale(1);
      transition:
        opacity var(--swage-menu-duration) var(--swage-menu-ease),
        transform var(--swage-menu-duration) var(--swage-menu-ease),
        filter var(--swage-menu-duration) var(--swage-menu-ease),
        visibility 0s;
    }

    .erpnav-features[data-open='false']:focus-within .erpnav-mega.swage-product-mega,
    .crmnav-features[data-open='false']:focus-within .crmnav-mega.swage-product-mega {
      opacity: 0;
      filter: blur(0.25rem);
      visibility: hidden;
      pointer-events: none;
      transform: translate(-50%, -0.55rem) scale(0.985);
    }

    .swage-product-mega__body {
      display: grid;
      grid-template-columns: minmax(12.5rem, 0.34fr) minmax(0, 1fr);
      width: 100%;
      min-height: 0;
      overflow: hidden;
    }

    .swage-product-mega__rail,
    .swage-product-mega__catalog {
      opacity: 0;
      transform: translateY(0.3rem);
      transition:
        opacity var(--swage-menu-content-duration) ease-out,
        transform var(--swage-menu-content-duration) var(--swage-menu-ease);
    }

    .erpnav-features[data-open='true'] .swage-product-mega__rail,
    .crmnav-features[data-open='true'] .swage-product-mega__rail,
    .erpnav-features[data-open='true'] .swage-product-mega__catalog,
    .crmnav-features[data-open='true'] .swage-product-mega__catalog {
      opacity: 1;
      transform: translateY(0);
    }

    .erpnav-features[data-open='true'] .swage-product-mega__rail,
    .crmnav-features[data-open='true'] .swage-product-mega__rail {
      transition-delay: var(--swage-menu-content-delay);
    }

    .erpnav-features[data-open='true'] .swage-product-mega__catalog,
    .crmnav-features[data-open='true'] .swage-product-mega__catalog {
      transition-delay: calc(var(--swage-menu-content-delay) + 25ms);
    }

    .swage-product-mega__rail {
      display: flex;
      min-height: 0;
      flex-direction: column;
      padding: 1.65rem 1.75rem;
      border-right: 1px solid var(--swage-line, var(--border));
      background: var(--swage-menu-rail, var(--swage-surface));
      text-align: left;
    }

    .swage-product-mega__label {
      display: block;
      margin-bottom: 1.35rem;
      color: var(--swage-muted, var(--text-m));
      font: 500 var(--swage-type-label) / 1.35 var(--font-sans);
      letter-spacing: 0;
      text-transform: none;
    }

    .swage-product-mega__rail nav {
      display: grid;
      gap: 0;
    }

    .swage-product-mega__rail nav a {
      display: block;
      padding: 0.5rem 0;
      border-radius: 0.4rem;
      color: var(--swage-ink, var(--foreground));
      font: 600 var(--swage-type-ui) / 1.35 var(--font-sans);
      letter-spacing: 0;
      text-decoration: none;
      text-transform: none;
      transition: color 120ms ease;
    }

    .swage-product-mega__rail nav a:hover {
      color: var(--swage-accent, #5356c2);
    }

    .swage-product-mega__catalog {
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      padding: 1.9rem 0 0 2.2rem;
    }

    .swage-product-mega__catalog-scroll {
      --swage-scroll-fade-size: 2.5rem;
      min-height: 0;
      overflow: auto;
      padding: 0.05rem 0 2.1rem;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: var(--swage-line-strong, var(--border)) transparent;
    }

    .swage-product-mega__catalog-scroll::-webkit-scrollbar {
      width: 0.45rem;
    }

    .swage-product-mega__catalog-scroll::-webkit-scrollbar-track {
      background: transparent;
    }

    .swage-product-mega__catalog-scroll::-webkit-scrollbar-thumb {
      border: 0.1rem solid transparent;
      border-radius: 999px;
      background: var(--swage-line-strong, var(--border));
      background-clip: padding-box;
    }

    .swage-product-mega__catalog-scroll[data-scrollable='true'][data-scroll-start='true'][data-scroll-end='false'] {
      -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - var(--swage-scroll-fade-size)),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - var(--swage-scroll-fade-size)),
        transparent 100%
      );
    }

    .swage-product-mega__catalog-scroll[data-scrollable='true'][data-scroll-start='false'][data-scroll-end='false'] {
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--swage-scroll-fade-size),
        #000 calc(100% - var(--swage-scroll-fade-size)),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--swage-scroll-fade-size),
        #000 calc(100% - var(--swage-scroll-fade-size)),
        transparent 100%
      );
    }

    .swage-product-mega__catalog-scroll[data-scrollable='true'][data-scroll-start='false'][data-scroll-end='true'] {
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--swage-scroll-fade-size),
        #000 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--swage-scroll-fade-size),
        #000 100%
      );
    }

    .swage-product-mega__catalog-scroll:focus-visible {
      outline: 2px solid var(--swage-accent, #5356c2);
      outline-offset: -2px;
    }

    .swage-product-mega__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: 1.1rem 1.5rem;
      padding: 0 2.2rem 0 0;
    }

    .swage-product-mega__group {
      min-width: 0;
    }

    .swage-product-mega__group h3 {
      margin: 0;
      padding: 0 0.7rem 0.62rem;
      border-bottom: 1px solid var(--swage-line, var(--border));
      color: var(--swage-muted, var(--text-m));
      font: 500 var(--swage-type-caption) / 1.35 var(--font-sans);
      letter-spacing: 0;
      text-transform: none;
    }

    .swage-product-mega__group > div {
      display: grid;
      padding-top: 0.2rem;
    }

    .swage-product-mega__item {
      display: grid;
      align-content: start;
      min-width: 0;
      min-height: 4rem;
      gap: 0.26rem;
      padding: 0.62rem 0.7rem;
      border-radius: 0.62rem;
      color: var(--swage-ink, var(--foreground));
      text-decoration: none;
      text-transform: none;
      transition:
        color 120ms ease,
        background-color 120ms ease;
    }

    .swage-product-mega__item:hover,
    .swage-product-mega__item:focus-visible {
      color: var(--swage-accent, #5356c2);
      background: var(--swage-accent-soft, var(--swage-surface, var(--surface-dim)));
    }

    .swage-product-mega__item strong {
      font: 600 var(--swage-type-ui) / 1.35 var(--font-sans);
      letter-spacing: 0;
    }

    .swage-product-mega__item > span {
      display: -webkit-box;
      overflow: hidden;
      color: var(--swage-muted, var(--text-m));
      font: 400 var(--swage-type-caption) / 1.45 var(--font-sans);
      letter-spacing: normal;
      text-transform: none;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .swage-product-mega__spotlight {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto minmax(0, 1fr) auto;
      width: calc(100% + 2rem);
      aspect-ratio: 1;
      align-items: start;
      gap: 0.75rem;
      margin-top: auto;
      margin-left: -1rem;
      padding: 1rem;
      border: 1px solid var(--swage-line, var(--border));
      border-radius: 0.9rem;
      color: var(--swage-ink, var(--foreground));
      background: var(--swage-elevated, var(--background));
      box-shadow: 0 1rem 2rem -1.6rem rgb(17 25 39 / 28%);
      text-decoration: none;
      text-align: left;
      text-transform: none;
      transition:
        color 120ms ease,
        background-color 120ms ease,
        border-color 120ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--swage-menu-ease);
    }

    .swage-product-mega__spotlight:hover {
      color: var(--swage-accent, #5356c2);
      background: var(--swage-surface, var(--surface-dim));
      border-color: var(--swage-line-strong, var(--border));
      box-shadow: 0 1.25rem 2.5rem -1.6rem rgb(17 25 39 / 34%);
      transform: translateY(-0.12rem);
    }

    .swage-product-mega__mark {
      display: grid;
      width: 2.7rem;
      height: 2.7rem;
      place-items: center;
      border-radius: 0.62rem;
      color: var(--swage-accent);
      background: var(--swage-accent-soft);
      font: 700 var(--swage-type-micro) / 1 var(--font-sans);
      letter-spacing: 0;
    }

    .swage-product-mega__spotlight > span:nth-child(2) {
      display: grid;
      grid-column: 1 / -1;
      grid-row: 3;
      align-self: end;
      min-width: 0;
      gap: 0.3rem;
    }

    .swage-product-mega__spotlight strong {
      font: 600 1rem/1.3 var(--font-sans);
      letter-spacing: 0;
    }

    .swage-product-mega__spotlight-eyebrow {
      color: var(--swage-accent, #5356c2);
      font: 600 var(--swage-type-caption) / 1.35 var(--font-sans);
      letter-spacing: 0.01em;
      text-transform: none;
    }

    .swage-product-mega__spotlight small {
      color: var(--swage-muted, var(--text-m));
      font: 400 var(--swage-type-caption) / 1.45 var(--font-sans);
      letter-spacing: normal;
      text-transform: none;
      text-wrap: balance;
    }

    .swage-product-mega__spotlight > [data-icon] {
      grid-column: 2;
      grid-row: 1;
      color: var(--swage-accent);
      transition: transform 150ms ease;
    }

    .swage-product-mega__spotlight:hover > [data-icon] {
      transform: translate(0.12rem, -0.12rem);
    }

    @media (max-height: 42rem) {
      .swage-product-mega__rail {
        padding-block: 1.25rem;
      }

      .swage-product-mega__label {
        margin-bottom: 0.8rem;
      }

      .swage-product-mega__rail a:not(.swage-product-mega__spotlight) {
        padding-block: 0.35rem;
      }

      .swage-product-mega__spotlight {
        width: calc(100% + 2rem);
      }

      .swage-product-mega__spotlight small {
        display: none;
      }
    }

    .swage-product-mega a:focus-visible {
      outline: 2px solid var(--swage-accent, #5356c2);
      outline-offset: -2px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .erpnav-mobile-panel,
    .crmnav-mobile-panel,
    .nav-caret,
    .swage-mobile-nav__caret,
    .erpnav-mobile-menu > summary span,
    .crmnav-mobile-menu > summary span,
    .erpnav-mega.swage-product-mega,
    .crmnav-mega.swage-product-mega,
    .swage-product-mega__rail,
    .swage-product-mega__catalog,
    .swage-product-mega__spotlight {
      animation: none;
      transition: none;
    }

    .erpnav-features[data-open='true'] .erpnav-mega.swage-product-mega,
    .crmnav-features[data-open='true'] .crmnav-mega.swage-product-mega {
      transform: translate(-50%, 0);
    }
  }
}

/* --------------------------------------------------------------------------
   Swage source-parity corrective

   These rules are deliberately scoped to the product-landings opt-in. They
   establish the same baseline geometry, type scale, muted proof band, and
   quiet resting chrome as the pinned Core Banking reference. The ERP/CRM
   menu retains its necessary nested disclosure, but does not inherit Tacet's
   surface or page-layout treatment.                                                     */
@layer components {
  body.catalog-page.catalog-page--swage .erpnav,
  body.catalog-page.catalog-page--swage .crmnav {
    position: sticky;
    top: 0;
    z-index: 90;
    display: block;
    min-height: 4.75rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      backdrop-filter 180ms ease;
  }

  body.catalog-page.catalog-page--swage .erpnav[data-scrolled='true'],
  body.catalog-page.catalog-page--swage .crmnav[data-scrolled='true'] {
    border-bottom: 1px solid var(--swage-line);
    background: color-mix(in srgb, var(--swage-canvas), transparent 14%);
    backdrop-filter: blur(18px);
  }

  body.catalog-page.catalog-page--swage .erpnav-inner,
  body.catalog-page.catalog-page--swage .crmnav-inner,
  body.catalog-page.catalog-page--swage .erpnav[data-scrolled='true'] .erpnav-inner,
  body.catalog-page.catalog-page--swage .crmnav[data-scrolled='true'] .crmnav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: var(--swage-max-content-rail);
    max-width: none;
    height: 4.75rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
  }

  body.catalog-page.catalog-page--swage .erpnav-left,
  body.catalog-page.catalog-page--swage .crmnav-left {
    display: contents;
  }

  body.catalog-page.catalog-page--swage .erpnav-brand-wrap,
  body.catalog-page.catalog-page--swage .crmnav-brand-wrap {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: max-content;
    justify-self: start;
    transform: translateX(var(--swage-nav-rest-inset));
    transition: transform var(--duration-normal) var(--ease-standard);
  }

  body.catalog-page.catalog-page--swage .erpnav[data-scrolled='true'] .erpnav-brand-wrap,
  body.catalog-page.catalog-page--swage .crmnav[data-scrolled='true'] .crmnav-brand-wrap {
    transform: none;
  }

  body.catalog-page.catalog-page--swage .erpnav-logo,
  body.catalog-page.catalog-page--swage .crmnav-logo {
    position: relative;
    color: var(--swage-ink);
    transition: color 150ms ease;
  }

  body.catalog-page.catalog-page--swage .erpnav-logo::before,
  body.catalog-page.catalog-page--swage .crmnav-logo::before {
    position: absolute;
    inset: 0 0.45rem 0 0.2rem;
    background: currentcolor;
    content: '';
    mask: url('../images/erp-ai-wordmark.svg') center / contain no-repeat;
    pointer-events: none;
  }

  body.catalog-page.catalog-page--swage .erpnav-logo img,
  body.catalog-page.catalog-page--swage .crmnav-logo img {
    opacity: 0;
  }

  body.catalog-page.catalog-page--swage .erpnav-logo:hover,
  body.catalog-page.catalog-page--swage .erpnav-logo:focus-visible,
  body.catalog-page.catalog-page--swage .crmnav-logo:hover,
  body.catalog-page.catalog-page--swage .crmnav-logo:focus-visible {
    color: var(--swage-accent);
  }

  body.catalog-page.catalog-page--swage .erpnav-product-label,
  body.catalog-page.catalog-page--swage .crmnav-product-label {
    color: var(--swage-ink);
    font: 600 var(--swage-type-label) / 1.35 var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage .erpnav-center,
  body.catalog-page.catalog-page--swage .crmnav-center {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 0.25rem;
    min-width: 0;
  }

  body.catalog-page.catalog-page--swage .erpnav-right,
  body.catalog-page.catalog-page--swage .crmnav-right {
    grid-column: 3;
    justify-self: end;
    transform: translateX(calc(-1 * var(--swage-nav-rest-inset)));
    transition: transform var(--duration-normal) var(--ease-standard);
  }

  body.catalog-page.catalog-page--swage .erpnav[data-scrolled='true'] .erpnav-right,
  body.catalog-page.catalog-page--swage .crmnav[data-scrolled='true'] .crmnav-right {
    transform: none;
  }

  body.catalog-page.catalog-page--swage .erpnav a.erpnav-link,
  body.catalog-page.catalog-page--swage .erpnav button.erpnav-link,
  body.catalog-page.catalog-page--swage .crmnav a.crmnav-link,
  body.catalog-page.catalog-page--swage .crmnav button.crmnav-link {
    padding: 0.5rem 0.7rem;
    color: var(--swage-technical-muted);
    background: transparent;
    font: 600 var(--swage-type-label) / 1.35 var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage .erpnav a.erpnav-link.is-current,
  body.catalog-page.catalog-page--swage .crmnav a.crmnav-link.is-current {
    color: var(--swage-ink);
    background: transparent;
  }

  body.catalog-page.catalog-page--swage .erpnav a.erpnav-link:hover,
  body.catalog-page.catalog-page--swage .erpnav a.erpnav-link:focus-visible,
  body.catalog-page.catalog-page--swage .erpnav button.erpnav-link:hover,
  body.catalog-page.catalog-page--swage .erpnav button.erpnav-link:focus-visible,
  body.catalog-page.catalog-page--swage .crmnav a.crmnav-link:hover,
  body.catalog-page.catalog-page--swage .crmnav a.crmnav-link:focus-visible,
  body.catalog-page.catalog-page--swage .crmnav button.crmnav-link:hover,
  body.catalog-page.catalog-page--swage .crmnav button.crmnav-link:focus-visible,
  body.catalog-page.catalog-page--swage .erpnav-features[data-open='true'] .erpnav-features-trigger,
  body.catalog-page.catalog-page--swage
    .crmnav-features[data-open='true']
    .crmnav-features-trigger {
    color: var(--swage-accent);
    background: transparent;
  }

  body.catalog-page.catalog-page--swage .erpnav-right .erpnav-cta,
  body.catalog-page.catalog-page--swage .crmnav-right .crmnav-cta {
    --swage-button-height: var(--swage-control-height-compact);
    --swage-button-pad-x: 0.75rem;
  }

  body.catalog-page.catalog-page--swage .erpnav-right .erpnav-cta:hover,
  body.catalog-page.catalog-page--swage .erpnav-right .erpnav-cta:focus-visible,
  body.catalog-page.catalog-page--swage .crmnav-right .crmnav-cta:hover,
  body.catalog-page.catalog-page--swage .crmnav-right .crmnav-cta:focus-visible {
    border-color: var(--swage-accent) !important;
    color: var(--swage-accent) !important;
    background: var(--swage-accent-soft) !important;
  }

  body.catalog-page.catalog-page--swage .swage-hero {
    border-top: 0;
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-canvas);
  }

  body.catalog-page.catalog-page--swage .swage-hero__inner {
    display: grid;
    gap: clamp(2.5rem, 4vw, 4.5rem);
    padding: clamp(3.75rem, 7vw, 6.25rem) 0 clamp(3.25rem, 5vw, 4.75rem);
  }

  body.catalog-page.catalog-page--swage .swage-hero__copy {
    width: min(100%, 48rem);
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
  }

  body.catalog-page.catalog-page--swage .swage-section-label,
  body.catalog-page.catalog-page--swage .swage-hero__copy > .swage-section-label,
  body.catalog-page.catalog-page--swage .swage-section-heading > span,
  body.catalog-page.catalog-page--swage .swage-copy > span,
  body.catalog-page.catalog-page--swage .swage-proof span,
  body.catalog-page.catalog-page--swage .swage-technical header > span {
    display: inline-flex;
    align-items: center;
    color: var(--swage-muted);
    font: 600 var(--swage-type-label) / 1.4 var(--font-sans);
    letter-spacing: 0.01em;
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage .swage-hero h1 {
    max-width: 12.5ch;
    margin: 1.25rem auto 0;
    color: var(--swage-ink);
    font: 700 clamp(3.4rem, 6.1vw, 6rem)/0.9 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  body.catalog-page.catalog-page--swage .swage-hero h1 em {
    color: var(--swage-accent);
    font-style: normal;
  }

  body.catalog-page.catalog-page--swage .swage-hero__copy > p {
    max-width: 31rem;
    margin: 1.4rem auto 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-body) / 1.6 var(--font-sans);
    text-wrap: pretty;
  }

  body.catalog-page.catalog-page--swage .swage-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1.7rem;
  }

  body.catalog-page.catalog-page--swage .swage-button,
  :is(.erpnav, .crmnav) .swage-button {
    --swage-button-height: var(--swage-control-height, 3rem);
    --swage-button-pad-x: var(--swage-control-pad-x, 1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--swage-control-gap, 0.5rem);
    min-height: var(--swage-button-height);
    box-sizing: border-box;
    padding: 0.5rem var(--swage-button-pad-x);
    border: 1px solid var(--swage-line-strong);
    border-radius: var(--swage-control-radius, 0.625rem);
    color: var(--swage-ink);
    background: var(--swage-elevated);
    box-shadow:
      0 1px 2px rgb(17 25 39 / 8%),
      0 0.375rem 1rem rgb(17 25 39 / 5%);
    font: 650 var(--swage-type-ui) / 1.2 var(--font-sans);
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
    transform: translateY(0);
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      box-shadow 140ms ease,
      color 140ms ease,
      transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  body.catalog-page.catalog-page--swage .swage-button__label,
  :is(.erpnav, .crmnav) .swage-button__label {
    display: block;
    line-height: 1.2;
  }

  body.catalog-page.catalog-page--swage .swage-button__icon,
  :is(.erpnav, .crmnav) .swage-button__icon {
    display: block;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    color: currentcolor;
    stroke-width: 2.5;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  body.catalog-page.catalog-page--swage .swage-button--compact,
  :is(.erpnav, .crmnav) .swage-button--compact {
    --swage-button-height: var(--swage-control-height-compact, 2.75rem);
    --swage-button-pad-x: 0.75rem;
  }

  body.catalog-page.catalog-page--swage .swage-button--compact .swage-button__icon,
  :is(.erpnav, .crmnav) .swage-button--compact .swage-button__icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  body.catalog-page.catalog-page--swage .swage-button--primary,
  :is(.erpnav, .crmnav) .swage-button--primary {
    border-color: var(--swage-accent);
    color: var(--swage-on-accent);
    background: var(--swage-accent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--swage-on-accent), transparent 76%),
      0 1px 2px rgb(17 25 39 / 16%),
      0 0.5rem 1.25rem color-mix(in srgb, var(--swage-accent), transparent 76%);
  }

  body.catalog-page.catalog-page--swage .swage-button:hover,
  :is(.erpnav, .crmnav) .swage-button:hover {
    transform: translateY(-2px);
  }

  body.catalog-page.catalog-page--swage .swage-button:hover .swage-button__icon--outbound,
  :is(.erpnav, .crmnav) .swage-button:hover .swage-button__icon--outbound {
    transform: rotate(-45deg);
  }

  body.catalog-page.catalog-page--swage .swage-button:hover .swage-button__icon--preview,
  :is(.erpnav, .crmnav) .swage-button:hover .swage-button__icon--preview {
    transform: scale(1.08);
  }

  body.catalog-page.catalog-page--swage .swage-button--primary:hover,
  :is(.erpnav, .crmnav) .swage-button--primary:hover {
    border-color: color-mix(in oklch, var(--swage-accent), var(--swage-ink) 10%);
    background: color-mix(in oklch, var(--swage-accent), var(--swage-ink) 10%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--swage-on-accent), transparent 72%),
      0 2px 4px rgb(17 25 39 / 18%),
      0 0.75rem 1.5rem color-mix(in srgb, var(--swage-accent), transparent 68%);
  }

  body.catalog-page.catalog-page--swage .swage-button--secondary:hover,
  :is(.erpnav, .crmnav) .swage-button--secondary:hover {
    border-color: var(--swage-accent);
    color: var(--swage-accent);
    background: var(--swage-accent-soft);
    box-shadow:
      0 2px 4px rgb(17 25 39 / 10%),
      0 0.625rem 1.25rem rgb(17 25 39 / 8%);
  }

  body.catalog-page.catalog-page--swage .swage-button:active,
  :is(.erpnav, .crmnav) .swage-button:active {
    box-shadow: 0 1px 2px rgb(17 25 39 / 12%);
    transform: translateY(0) scale(0.98);
    transition-duration: 70ms;
  }

  body.catalog-page.catalog-page--swage .swage-button:focus-visible,
  :is(.erpnav, .crmnav) .swage-button:focus-visible {
    outline: 2px solid var(--swage-accent);
    outline-offset: 3px;
  }

  body.catalog-page.catalog-page--swage .swage-button:is(:disabled, [aria-disabled='true']),
  :is(.erpnav, .crmnav) .swage-button:is(:disabled, [aria-disabled='true']) {
    cursor: not-allowed;
    opacity: 0.52;
    box-shadow: none;
    pointer-events: none;
    transform: none;
  }

  body.catalog-page.catalog-page--swage .swage-capability-index {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.65rem 0.9rem;
    margin: 2.2rem auto 0;
  }

  body.catalog-page.catalog-page--swage .swage-capability-index > span {
    color: var(--swage-muted);
    font: 600 var(--swage-type-caption) / 1.4 var(--font-sans);
    letter-spacing: 0.01em;
  }

  body.catalog-page.catalog-page--swage .swage-capability-index ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.catalog-page.catalog-page--swage .swage-capability-index li {
    display: inline-flex;
    align-items: center;
  }

  body.catalog-page.catalog-page--swage .swage-capability-index li + li::before {
    width: 1px;
    height: 0.8rem;
    margin-inline: 0.65rem;
    background: var(--swage-line-strong);
    content: '';
  }

  body.catalog-page.catalog-page--swage .swage-capability-index a {
    display: inline-flex;
    align-items: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding-inline: 0.25rem;
    color: var(--swage-muted);
    font: 550 var(--swage-type-label) / 1.4 var(--font-sans);
    letter-spacing: 0;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25rem;
    transition:
      color 160ms ease,
      text-decoration-color 160ms ease;
  }

  body.catalog-page.catalog-page--swage .swage-capability-index a:hover,
  body.catalog-page.catalog-page--swage .swage-capability-index a:focus-visible {
    color: var(--swage-accent);
    text-decoration-color: currentColor;
  }

  body.catalog-page.catalog-page--swage .swage-hero__product {
    position: relative;
    width: min(100%, 68rem);
    min-width: 0;
    margin: 0 auto;
    container-type: inline-size;
  }

  body.catalog-page.catalog-page--swage .swage-hero__product:focus-visible {
    outline-color: var(--swage-accent);
    outline-offset: var(--space-2);
  }

  body.catalog-page.catalog-page--swage .swage-hero__product .swage-live-preview,
  body.catalog-page.catalog-page--swage .swage-hero__product .live-dashboard {
    width: 100%;
    max-width: 100%;
  }

  body.catalog-page.catalog-page--swage .swage-hero__product .live-dashboard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 75cqw;
    max-height: var(--swage-live-preview-max-height);
    border: 1px solid var(--swage-line-strong);
    border-radius: 0.7rem;
    background: var(--swage-elevated);
    box-shadow: var(--swage-shadow);
  }

  body.catalog-page.catalog-page--swage .swage-hero__product .live-dashboard .ld-body {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
  }

  body.catalog-page.catalog-page--swage
    .swage-hero__product
    .live-dashboard
    :is(.ld-body, .ld-side, .ld-content) {
    scrollbar-color: var(--swage-live-preview-scrollbar-thumb)
      var(--swage-live-preview-scrollbar-track);
    scrollbar-width: thin;
  }

  body.catalog-page.catalog-page--swage
    .swage-hero__product
    .live-dashboard
    :is(.ld-body, .ld-side, .ld-content)::-webkit-scrollbar {
    width: 0.5rem;
  }

  body.catalog-page.catalog-page--swage
    .swage-hero__product
    .live-dashboard
    :is(.ld-body, .ld-side, .ld-content)::-webkit-scrollbar-track {
    background: var(--swage-live-preview-scrollbar-track);
  }

  body.catalog-page.catalog-page--swage
    .swage-hero__product
    .live-dashboard
    :is(.ld-body, .ld-side, .ld-content)::-webkit-scrollbar-thumb {
    border: 0.125rem solid var(--swage-live-preview-scrollbar-track);
    border-radius: 999px;
    background: var(--swage-live-preview-scrollbar-thumb);
    background-clip: padding-box;
  }

  body.catalog-page.catalog-page--swage
    .swage-hero__product
    .live-dashboard
    :is(.ld-body, .ld-side, .ld-content)::-webkit-scrollbar-thumb:hover {
    background: var(--swage-live-preview-scrollbar-thumb-hover);
    background-clip: padding-box;
  }

  body.catalog-page.catalog-page--swage .swage-live-preview-open {
    display: inline-flex;
    gap: 0.45rem;
    margin-top: 1rem;
    color: var(--swage-accent);
    font: 600 var(--swage-type-label) / 1.4 var(--font-sans);
    text-decoration: none;
  }

  body.catalog-page.catalog-page--swage .swage-proof {
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage .swage-proof__inner {
    padding: clamp(5.5rem, 11vw, 10rem) 0;
  }

  body.catalog-page.catalog-page--swage .swage-proof blockquote {
    max-width: 18ch;
    margin: 1.3rem 0 0;
    color: var(--swage-ink);
    font: 600 clamp(2.7rem, 5vw, 5.5rem)/0.95 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
  }

  body.catalog-page.catalog-page--swage .swage-proof cite {
    display: block;
    margin-top: 1.5rem;
    color: var(--swage-muted);
    font: 500 var(--swage-type-label) / 1.5 var(--font-sans);
    font-style: normal;
  }

  @media (max-width: 42rem) {
    body.catalog-page.catalog-page--swage {
      --swage-max-content-rail: min(
        calc(100vw - var(--swage-page-frame-pad) - var(--swage-page-frame-pad) - 1.5rem),
        var(--swage-section-max)
      );
    }
  }

  @media (max-width: 47.5rem) {
    body.catalog-page.catalog-page--swage .erpnav-inner,
    body.catalog-page.catalog-page--swage .crmnav-inner,
    body.catalog-page.catalog-page--swage .erpnav[data-scrolled='true'] .erpnav-inner,
    body.catalog-page.catalog-page--swage .crmnav[data-scrolled='true'] .crmnav-inner {
      width: var(--swage-max-content-rail);
    }

    body.catalog-page.catalog-page--swage .erpnav-product-label,
    body.catalog-page.catalog-page--swage .crmnav-product-label,
    body.catalog-page.catalog-page--swage .erpnav-center > :not(.erpnav-features),
    body.catalog-page.catalog-page--swage .crmnav-center > :not(.crmnav-features) {
      display: none;
    }

    body.catalog-page.catalog-page--swage .erpnav-center,
    body.catalog-page.catalog-page--swage .crmnav-center {
      display: none;
    }

    body.catalog-page.catalog-page--swage .erpnav-right,
    body.catalog-page.catalog-page--swage .crmnav-right {
      display: none;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-menu,
    body.catalog-page.catalog-page--swage .crmnav-mobile-menu {
      position: relative;
      grid-column: 3;
      display: block;
      justify-self: end;
      z-index: 2;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-menu > summary,
    body.catalog-page.catalog-page--swage .crmnav-mobile-menu > summary {
      display: grid;
      width: 2.75rem;
      height: 2.75rem;
      place-content: center;
      gap: 0.22rem;
      border: 1px solid var(--swage-line-strong);
      border-radius: 0.45rem;
      background: var(--swage-elevated);
      cursor: pointer;
      list-style: none;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-menu > summary::-webkit-details-marker,
    body.catalog-page.catalog-page--swage .crmnav-mobile-menu > summary::-webkit-details-marker,
    body.catalog-page.catalog-page--swage
      .erpnav-mobile-menu
      details
      > summary::-webkit-details-marker,
    body.catalog-page.catalog-page--swage
      .crmnav-mobile-menu
      details
      > summary::-webkit-details-marker {
      display: none;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-menu > summary span,
    body.catalog-page.catalog-page--swage .crmnav-mobile-menu > summary span {
      display: block;
      width: 1rem;
      height: 1px;
      background: var(--swage-ink);
      transition:
        transform 180ms ease,
        opacity 180ms ease;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-menu[open] > summary span:nth-child(1),
    body.catalog-page.catalog-page--swage .crmnav-mobile-menu[open] > summary span:nth-child(1) {
      transform: translateY(0.3rem) rotate(45deg);
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-menu[open] > summary span:nth-child(2),
    body.catalog-page.catalog-page--swage .crmnav-mobile-menu[open] > summary span:nth-child(2) {
      opacity: 0;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-menu[open] > summary span:nth-child(3),
    body.catalog-page.catalog-page--swage .crmnav-mobile-menu[open] > summary span:nth-child(3) {
      transform: translateY(-0.3rem) rotate(-45deg);
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-panel,
    body.catalog-page.catalog-page--swage .crmnav-mobile-panel {
      position: fixed;
      z-index: 9999;
      top: 4.45rem;
      right: 0.75rem;
      display: grid;
      width: min(24rem, calc(100vw - 1.5rem));
      max-height: calc(100dvh - 6.5rem);
      gap: 0;
      overflow: auto;
      padding: 0.65rem;
      border: 1px solid var(--swage-line-strong);
      border-radius: 0.65rem;
      background: var(--swage-elevated) !important;
      box-shadow: var(--swage-shadow);
      opacity: 1;
      transform-origin: top right;
      animation: swage-mobile-menu-in 180ms ease-out both;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-panel > a,
    body.catalog-page.catalog-page--swage .crmnav-mobile-panel > a,
    body.catalog-page.catalog-page--swage .erpnav-mobile-panel details > summary,
    body.catalog-page.catalog-page--swage .crmnav-mobile-panel details > summary,
    body.catalog-page.catalog-page--swage .erpnav-mobile-panel details a,
    body.catalog-page.catalog-page--swage .crmnav-mobile-panel details a {
      display: block;
      padding: 0.75rem;
      border-radius: 0.35rem;
      color: var(--swage-ink);
      font: 600 var(--swage-type-ui) / 1.4 var(--font-sans);
      text-decoration: none;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-panel details > summary,
    body.catalog-page.catalog-page--swage .crmnav-mobile-panel details > summary {
      display: flex;
      min-height: 2.75rem;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      cursor: pointer;
      list-style: none;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-panel details[open] > summary,
    body.catalog-page.catalog-page--swage .crmnav-mobile-panel details[open] > summary {
      background: var(--swage-surface);
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-panel details > div,
    body.catalog-page.catalog-page--swage .crmnav-mobile-panel details > div {
      display: grid;
      padding: 0.25rem 0.15rem 0.55rem 0.65rem;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-panel details a,
    body.catalog-page.catalog-page--swage .crmnav-mobile-panel details a {
      color: var(--swage-muted);
      font-weight: 500;
    }

    body.catalog-page.catalog-page--swage .swage-mobile-nav__section > nav > a {
      display: block;
      min-height: 2.65rem;
      padding: 0.7rem 0.5rem;
      border-radius: 0.35rem;
      color: var(--swage-ink);
      font: 600 var(--swage-type-ui) / 1.4 var(--font-sans);
    }

    body.catalog-page.catalog-page--swage .swage-mobile-nav__section > nav > a:hover,
    body.catalog-page.catalog-page--swage .swage-mobile-nav__section > nav > a:focus-visible {
      color: var(--swage-accent);
      background: var(--swage-surface);
    }

    body.catalog-page.catalog-page--swage
      .swage-mobile-nav
      details.swage-mobile-nav__group
      > summary {
      padding: 0.72rem 0.5rem;
      font: 600 var(--swage-type-ui) / 1.4 var(--font-sans);
    }

    body.catalog-page.catalog-page--swage
      .swage-mobile-nav
      details.swage-mobile-nav__group
      > summary:hover,
    body.catalog-page.catalog-page--swage
      .swage-mobile-nav
      details.swage-mobile-nav__group
      > summary:focus-visible {
      color: var(--swage-accent);
      background: var(--swage-surface);
    }

    body.catalog-page.catalog-page--swage
      .swage-mobile-nav
      details.swage-mobile-nav__group
      > div
      > a {
      min-height: 2.45rem;
      padding: 0.65rem 0.5rem;
      font: 500 var(--swage-type-label) / 1.4 var(--font-sans);
    }

    body.catalog-page.catalog-page--swage
      .swage-mobile-nav
      details.swage-mobile-nav__group
      > div
      > a:hover,
    body.catalog-page.catalog-page--swage
      .swage-mobile-nav
      details.swage-mobile-nav__group
      > div
      > a:focus-visible {
      color: var(--swage-accent);
      background: var(--swage-surface);
    }

    body.catalog-page.catalog-page--swage .swage-mobile-nav > a.swage-mobile-nav__spotlight {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      min-height: 4.5rem;
      padding: 0.72rem;
      color: var(--swage-ink);
      background: var(--swage-surface);
    }

    body.catalog-page.catalog-page--swage .swage-mobile-nav > a.swage-mobile-nav__spotlight:hover,
    body.catalog-page.catalog-page--swage
      .swage-mobile-nav
      > a.swage-mobile-nav__spotlight:focus-visible {
      border-color: var(--swage-accent);
      color: var(--swage-accent);
      background: var(--swage-accent-soft);
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-panel > .erpnav-mobile-cta,
    body.catalog-page.catalog-page--swage .crmnav-mobile-panel > .crmnav-mobile-cta {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      margin-top: 0.35rem;
      color: var(--swage-on-accent) !important;
      background: var(--swage-accent);
      white-space: nowrap;
    }

    body.catalog-page.catalog-page--swage .erpnav-mobile-cta [data-icon],
    body.catalog-page.catalog-page--swage .crmnav-mobile-cta [data-icon] {
      flex: 0 0 auto;
    }

    body.catalog-page.catalog-page--swage .swage-shell {
      width: min(calc(100% - 1.5rem), 72rem);
    }

    body.catalog-page.catalog-page--swage .swage-hero__inner {
      padding: 3.75rem 0 3.5rem;
    }

    /* The live Work surface belongs to desktop where it can be read as a
       credible product proof. Mobile keeps the editorial thesis and primary
       action, while the later static examples carry the operating detail. */
    body.catalog-page.catalog-page--swage .swage-hero__actions .swage-button--secondary,
    body.catalog-page.catalog-page--swage .swage-hero__product,
    body.catalog-page.catalog-page--swage a[href='#live-preview'],
    body.catalog-page.catalog-page--swage #cta a[href='#live-preview'] {
      display: none;
      align-items: center;
    }

    body.catalog-page.catalog-page--swage .swage-hero h1 {
      max-width: 100%;
      font-size: clamp(2.35rem, 11.8vw, 4rem);
      line-height: 1.08;
      letter-spacing: var(--swage-display-tracking);
    }

    body.catalog-page.catalog-page--swage .swage-proof blockquote {
      max-width: 100%;
      font-size: clamp(2.35rem, 11vw, 3.5rem);
      line-height: 1.1;
      letter-spacing: var(--swage-display-tracking);
    }
  }

  @keyframes swage-mobile-menu-in {
    from {
      opacity: 0;
      transform: translateY(-0.35rem) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* The Bloom panel is taken out of the trigger's layout box on desktop.
     That preserves the centered, viewport-safe reveal without letting a
     hidden panel widen the document. */
  @media (min-width: 42.0625rem) {
    body.catalog-page.catalog-page--swage .erpnav-mega.swage-product-mega {
      position: fixed;
      top: 5.15rem;
      left: 50%;
    }

    body.catalog-page.catalog-page--swage .crmnav-mega.swage-product-mega {
      position: fixed;
      top: 5.15rem;
      left: 50%;
    }
  }

  body.catalog-page.catalog-page--swage .swage-metric {
    align-content: center;
  }

  body.catalog-page.catalog-page--swage .swage-metric dt {
    color: var(--swage-muted);
    font: 600 var(--swage-type-label) / 1.4 var(--font-sans);
    letter-spacing: 0.01em;
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage .swage-metric strong {
    font: 700 clamp(1.8rem, 3vw, 2.7rem)/0.9 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
  }

  body.catalog-page.catalog-page--swage .swage-metric small {
    max-width: 16ch;
    color: var(--swage-muted);
    font: 400 var(--swage-type-ui) / 1.5 var(--font-sans);
    letter-spacing: 0;
  }

  @media (min-width: 52.0625rem) {
    body.catalog-page.catalog-page--swage .swage-metric {
      min-height: 10rem;
      align-content: start;
      padding: 1.75rem 1.5rem;
    }

    body.catalog-page.catalog-page--swage .swage-metric strong {
      font-size: clamp(2.6rem, 4vw, 3.55rem);
      letter-spacing: -0.02em;
    }

    body.catalog-page.catalog-page--swage .swage-metric small {
      max-width: 20ch;
    }
  }

  body.catalog-page.catalog-page--swage .swage-inside .swage-shell {
    padding-block: clamp(4.5rem, 9vw, 8rem);
  }

  body.catalog-page.catalog-page--swage .swage-inside__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
    gap: 1.5rem 5rem;
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }

  body.catalog-page.catalog-page--swage .swage-inside__header h2 {
    grid-column: 1;
    margin: 0.85rem 0 0;
    color: var(--swage-ink);
    font: 650 clamp(2.55rem, 4.7vw, 5rem)/1.02 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
  }

  body.catalog-page.catalog-page--swage .swage-inside__header p {
    grid-column: 2;
    grid-row: 2;
    max-width: 29rem;
    margin: 0;
    color: var(--swage-muted);
    font: 400 clamp(1rem, 1.1vw, 1.08rem)/1.65 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage .swage-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 9vw, 9rem);
    padding: clamp(5.5rem, 11vw, 10rem) 0;
  }

  body.catalog-page.catalog-page--swage .swage-split--reverse {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  body.catalog-page.catalog-page--swage .swage-split--reverse .swage-copy {
    grid-column: 2;
    order: initial;
  }

  body.catalog-page.catalog-page--swage .swage-split--reverse .swage-workflow-artifact {
    grid-row: 1;
  }

  /* The proof frame and editorial claim form one balanced unit. Give the
     claim a useful reading measure before increasing its type size; this
     keeps the operational proof visible at the section's visual centre. */
  body.catalog-page.catalog-page--swage .swage-copy h2 {
    max-width: 15.5ch;
    margin: 1rem 0 0;
    font: 650 clamp(2.5rem, 4vw, 4.55rem) / 0.94 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
  }

  body.catalog-page.catalog-page--swage .swage-copy p,
  body.catalog-page.catalog-page--swage .swage-technical header p {
    max-width: 31rem;
    margin: 1.2rem 0 0;
    font: 400 var(--swage-type-body) / 1.6 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage .swage-text-link {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding-inline: 0.15rem;
    gap: 0.45rem;
    margin-top: 1.55rem;
    color: var(--swage-accent);
    font: 650 var(--swage-type-ui) / 1.4 var(--font-sans);
    letter-spacing: 0;
    text-decoration: none;
  }

  body.catalog-page.catalog-page--swage .swage-schema__body {
    grid-template-columns: 10.5rem 1fr;
    min-height: 22rem;
  }

  body.catalog-page.catalog-page--swage .swage-schema__body > aside {
    gap: 0.65rem;
    background: rgb(0 0 0 / 12%);
  }

  body.catalog-page.catalog-page--swage .swage-schema__body > aside span,
  body.catalog-page.catalog-page--swage .swage-schema__body > aside small {
    color: var(--swage-muted);
    font: 600 var(--swage-type-micro) / 1.4 var(--font-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  body.catalog-page.catalog-page--swage .swage-schema__body > aside strong {
    font: 650 3.5rem/0.85 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
  }

  body.catalog-page.catalog-page--swage .swage-schema__records,
  body.catalog-page.catalog-page--swage .swage-assistant-queue__body {
    padding: 0.85rem;
  }

  /* Application-structure proofs are static examples, not miniature live
     dashboards. They retain the branded rail, then name their content in a
     quiet example bar rather than borrowing a URL or product controls. */
  body.catalog-page.catalog-page--swage .swage-schema.live-dashboard--proof {
    --ld-bg: var(--swage-elevated);
    --ld-fg: var(--swage-ink);
    --ld-card: var(--swage-elevated);
    --ld-muted: var(--swage-surface);
    --ld-muted-fg: var(--swage-muted);
    --ld-accent: var(--swage-accent-soft);
    --ld-border: var(--swage-line);
    --ld-sidebar: var(--swage-surface);
    --ld-brand: var(--swage-accent);
    --ld-ring-card: 0 0 0 1px var(--swage-line);
    border: 1px solid var(--swage-line-strong);
    border-radius: 0.65rem;
    background: var(--swage-elevated);
    box-shadow: var(--swage-shadow);
    transform: none;
    transition: none;
  }

  body.catalog-page.catalog-page--swage .swage-schema.live-dashboard--proof:hover {
    transform: none;
    box-shadow: var(--swage-shadow);
  }

  body.catalog-page.catalog-page--swage .swage-schema__example-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.6rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-canvas);
  }

  body.catalog-page.catalog-page--swage .swage-schema__example-bar > span {
    color: var(--swage-muted);
    font: 600 var(--swage-type-caption) / 1.2 var(--font-mono);
    letter-spacing: 0.04em;
  }

  body.catalog-page.catalog-page--swage .swage-schema__example-bar > span:last-child {
    text-transform: uppercase;
  }

  body.catalog-page.catalog-page--swage .swage-schema.live-dashboard--proof .ld-body {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    min-height: 22rem;
  }

  body.catalog-page.catalog-page--swage .swage-schema.live-dashboard--proof .ld-side {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  body.catalog-page.catalog-page--swage .swage-schema.live-dashboard--proof .ld-brand {
    font-size: 0.75rem;
  }

  body.catalog-page.catalog-page--swage .swage-schema.live-dashboard--proof .ld-brand .ld-mark {
    width: 1.35rem;
    height: 1.35rem;
  }

  body.catalog-page.catalog-page--swage .swage-schema.live-dashboard--proof .ld-brand img.ld-mark {
    background: transparent;
    border-radius: 0;
    object-fit: contain;
  }

  body.catalog-page.catalog-page--swage .live-dashboard--catalog-preview .ld-main-header {
    min-width: 0;
    padding: 1rem 2rem 0.9rem;
    border-bottom: 1px solid var(--ld-border);
    background: var(--ld-bg);
  }

  body.catalog-page.catalog-page--swage .live-dashboard--catalog-preview .ld-main-header > div {
    min-width: 0;
  }

  body.catalog-page.catalog-page--swage .live-dashboard--catalog-preview .ld-main-header span {
    display: block;
    color: var(--ld-muted-fg);
    font: inherit;
  }

  body.catalog-page.catalog-page--swage .live-dashboard--catalog-preview .ld-main-header strong {
    display: block;
    max-width: 100%;
    margin-top: 0.15rem;
    color: var(--ld-fg);
    font: 500 1.875rem/1.1 var(--font-heading);
    letter-spacing: normal;
    overflow-wrap: anywhere;
  }

  body.catalog-page.catalog-page--swage .swage-schema.live-dashboard--proof .ld-nav-item {
    gap: 0.45rem;
    padding: 0.38rem 0.48rem;
    font-size: var(--swage-type-micro);
    line-height: 1.3;
  }

  body.catalog-page.catalog-page--swage
    .swage-schema.live-dashboard--proof
    .ld-nav-item
    .ld-nav-icon {
    width: 0.28rem;
    height: 0.28rem;
  }

  body.catalog-page.catalog-page--swage .swage-schema__rail-summary {
    display: grid;
    gap: 0.3rem;
    margin: auto 0 0;
    padding: 0.85rem 0.48rem 0.25rem;
    border-top: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage .swage-schema__rail-summary span,
  body.catalog-page.catalog-page--swage .swage-schema__rail-summary small {
    color: var(--swage-muted);
    font: 600 var(--swage-type-micro) / 1.35 var(--font-sans);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  body.catalog-page.catalog-page--swage .swage-schema__rail-summary strong {
    color: var(--swage-ink);
    font: 650 2.15rem/0.9 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
  }

  body.catalog-page.catalog-page--swage .swage-schema__record {
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: first baseline;
    min-height: 4.3rem;
    padding: 1.1rem;
  }

  body.catalog-page.catalog-page--swage .swage-schema__record small {
    color: var(--swage-muted);
    font: 500 var(--swage-type-caption) / 1.45 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage .swage-schema__record > span {
    color: var(--swage-accent);
    font: 700 var(--swage-type-caption) / 1.2 var(--font-mono);
  }

  body.catalog-page.catalog-page--swage .swage-schema__record > span,
  body.catalog-page.catalog-page--swage .swage-assistant-queue article > span {
    align-self: first baseline;
  }

  body.catalog-page.catalog-page--swage .swage-schema__record strong {
    font: 600 var(--swage-type-ui) / 1.35 var(--font-sans);
    letter-spacing: 0;
  }

  body.catalog-page.catalog-page--swage .swage-schema__record > div {
    display: flex;
    min-height: 100%;
    flex-direction: column;
  }

  body.catalog-page.catalog-page--swage .swage-schema__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 0.75rem;
    margin: auto 0 0;
    padding: 0.75rem 0 0;
    color: var(--swage-muted);
    font: 500 var(--swage-type-caption) / 1.45 var(--font-sans);
    list-style: none;
  }

  body.catalog-page.catalog-page--swage .swage-schema__fields li {
    min-width: 0;
  }

  body.catalog-page.catalog-page--swage .swage-technical > .swage-shell {
    padding: clamp(5.5rem, 11vw, 10rem) 0;
  }

  body.catalog-page.catalog-page--swage .swage-technical__header {
    display: block;
  }

  body.catalog-page.catalog-page--swage .swage-technical h2 {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(2.7rem, 5.4vw, 5.35rem);
    line-height: 0.94;
    letter-spacing: var(--swage-display-tracking);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage .swage-technical__header p {
    max-width: 43rem;
    margin-top: 1.35rem;
    color: var(--swage-muted);
    font: 400 clamp(1rem, 1.2vw, 1.12rem)/1.65 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage
    :is(.swage-support, .swage-comparison, .swage-rollout, .swage-faq) {
    border-bottom: 1px solid var(--swage-line);
    background: var(--swage-canvas);
  }

  body.catalog-page.catalog-page--swage
    :is(.swage-support, .swage-comparison, .swage-rollout, .swage-faq)
    > .swage-shell {
    padding-block: clamp(5rem, 10vw, 9rem);
  }

  body.catalog-page.catalog-page--swage
    :is(.swage-support__header, .swage-comparison__header, .swage-rollout__header) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
    gap: 1.25rem 5rem;
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.75rem);
  }

  body.catalog-page.catalog-page--swage
    :is(.swage-support__header, .swage-comparison__header, .swage-rollout__header)
    .swage-section-label {
    grid-column: 1 / -1;
  }

  body.catalog-page.catalog-page--swage
    :is(.swage-support__header, .swage-comparison__header, .swage-rollout__header)
    h2,
  body.catalog-page.catalog-page--swage .swage-faq__header h2 {
    max-width: 15ch;
    margin: 0;
    color: var(--swage-ink);
    font: 650 clamp(2.45rem, 4.7vw, 5rem)/1.02 var(--font-heading);
    letter-spacing: var(--swage-display-tracking);
    text-wrap: balance;
  }

  body.catalog-page.catalog-page--swage
    :is(.swage-support__header, .swage-comparison__header, .swage-rollout__header)
    > p {
    max-width: 31rem;
    margin: 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-body) / 1.65 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage .swage-support__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--swage-line-strong);
    list-style: none;
  }

  /* Three audiences are one editorial set, not an incomplete two-column
     matrix. Keep the trio on one rail where there is room, then collapse it
     directly to a single reading column before the cards become cramped. */
  body.catalog-page.catalog-page--swage .swage-support__grid--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.catalog-page.catalog-page--swage .swage-support__grid--count-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.catalog-page.catalog-page--swage .swage-support__item {
    display: block;
    min-height: 10rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage .swage-support__item:nth-child(odd) {
    border-right: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage .swage-support__grid--count-3 .swage-support__item {
    border-right: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage
    .swage-support__grid--count-3
    .swage-support__item:last-child {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage .swage-support__grid--count-6 .swage-support__item {
    border-right: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage
    .swage-support__grid--count-6
    .swage-support__item:nth-child(3n) {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage .swage-support__item h3 {
    margin: 0;
    color: var(--swage-ink);
    font: 650 clamp(1.25rem, 2vw, 1.65rem)/1.2 var(--font-heading);
  }

  body.catalog-page.catalog-page--swage .swage-support__item p {
    max-width: 34rem;
    margin: 0.65rem 0 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-ui) / 1.55 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage .swage-comparison__table {
    overflow: hidden;
    border: 1px solid var(--swage-line-strong);
    border-radius: var(--swage-panel-radius);
    background: var(--swage-elevated);
    box-shadow: var(--swage-shadow);
  }

  body.catalog-page.catalog-page--swage .swage-comparison__row {
    display: grid;
    grid-template-columns: minmax(9rem, 0.55fr) repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage .swage-comparison__row > * {
    padding: 1.1rem 1.25rem;
    border-right: 1px solid var(--swage-line);
    color: var(--swage-muted);
    font: 400 var(--swage-type-ui) / 1.55 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage .swage-comparison__row > *:last-child {
    border-right: 0;
    background: var(--swage-accent-soft);
  }

  body.catalog-page.catalog-page--swage .swage-comparison__row > strong,
  body.catalog-page.catalog-page--swage .swage-comparison__row--header > * {
    color: var(--swage-ink);
    font-weight: 650;
  }

  body.catalog-page.catalog-page--swage .swage-comparison__row--header {
    background: var(--swage-surface);
  }

  body.catalog-page.catalog-page--swage .swage-comparison__row--header > * {
    font-size: var(--swage-type-caption);
    letter-spacing: 0.01em;
    text-transform: none;
  }

  body.catalog-page.catalog-page--swage .swage-comparison__mobile-label {
    display: none;
  }

  body.catalog-page.catalog-page--swage .swage-rollout__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--swage-line-strong);
    list-style: none;
  }

  body.catalog-page.catalog-page--swage .swage-rollout__steps li {
    min-height: 14rem;
    padding: 1.4rem;
    border-right: 1px solid var(--swage-line);
    border-bottom: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage .swage-rollout__steps li:last-child {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage .swage-rollout__steps span {
    display: block;
    color: var(--swage-accent);
    font: 700 var(--swage-type-caption) / 1.2 var(--font-mono);
  }

  body.catalog-page.catalog-page--swage .swage-rollout__steps strong {
    display: block;
    margin-top: 2.5rem;
    color: var(--swage-ink);
    font: 650 clamp(1.3rem, 2vw, 1.75rem)/1.2 var(--font-heading);
  }

  body.catalog-page.catalog-page--swage .swage-rollout__steps p {
    margin: 0.7rem 0 0;
    color: var(--swage-muted);
    font: 400 var(--swage-type-ui) / 1.55 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage .swage-faq__header {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }

  body.catalog-page.catalog-page--swage .swage-faq__items {
    border-top: 1px solid var(--swage-line-strong);
  }

  body.catalog-page.catalog-page--swage .swage-faq details {
    border-bottom: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage .swage-faq summary {
    display: grid;
    min-height: 4.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 0;
    color: var(--swage-ink);
    font: 650 clamp(1.05rem, 1.5vw, 1.3rem)/1.35 var(--font-sans);
    cursor: pointer;
    list-style: none;
  }

  body.catalog-page.catalog-page--swage .swage-faq summary::-webkit-details-marker {
    display: none;
  }

  body.catalog-page.catalog-page--swage .swage-faq summary:focus-visible {
    outline: 2px solid var(--swage-accent);
    outline-offset: 0.2rem;
  }

  body.catalog-page.catalog-page--swage .swage-faq summary span {
    color: var(--swage-accent);
    font: 500 1.5rem/1 var(--font-sans);
    transition: transform 180ms var(--swage-menu-ease);
  }

  body.catalog-page.catalog-page--swage .swage-faq details[open] summary span {
    transform: rotate(45deg);
  }

  body.catalog-page.catalog-page--swage .swage-faq details > p {
    max-width: 52rem;
    margin: 0;
    padding: 0 0 1.5rem;
    color: var(--swage-muted);
    font: 400 var(--swage-type-body) / 1.65 var(--font-sans);
  }

  @media (max-width: 62rem) {
    body.catalog-page.catalog-page--swage
      :is(.swage-support__grid--count-3, .swage-support__grid--count-6) {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage
      :is(.swage-support__grid--count-3, .swage-support__grid--count-6)
      .swage-support__item {
      border-right: 0;
    }
  }

  @media (max-width: 42rem) {
    body.catalog-page.catalog-page--swage .swage-inside__header {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage .swage-inside__header p {
      grid-column: 1;
      grid-row: auto;
    }

    body.catalog-page.catalog-page--swage .swage-split,
    body.catalog-page.catalog-page--swage .swage-split--reverse {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage .swage-split--reverse .swage-copy {
      grid-column: auto;
    }

    /* Queue entries use a metadata row above full-width copy on phones. This
       prevents an intrinsic status label from shrinking the title and body
       into a one-word-wide desktop column. */
    body.catalog-page.catalog-page--swage .swage-assistant-queue article {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.75rem 1rem;
      align-items: start;
    }

    body.catalog-page.catalog-page--swage .swage-assistant-queue article > span {
      grid-column: 1;
      grid-row: 1;
    }

    body.catalog-page.catalog-page--swage .swage-assistant-queue article > div {
      min-width: 0;
      grid-column: 1 / -1;
      grid-row: 2;
    }

    body.catalog-page.catalog-page--swage .swage-assistant-queue__status {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
    }

    body.catalog-page.catalog-page--swage
      :is(.swage-support__header, .swage-comparison__header, .swage-rollout__header) {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage
      :is(.swage-support__header, .swage-comparison__header, .swage-rollout__header)
      > p {
      grid-column: 1;
    }

    body.catalog-page.catalog-page--swage .swage-support__grid,
    body.catalog-page.catalog-page--swage .swage-rollout__steps {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage .swage-support__item,
    body.catalog-page.catalog-page--swage .swage-support__item:nth-child(odd),
    body.catalog-page.catalog-page--swage .swage-rollout__steps li {
      border-right: 0;
    }

    body.catalog-page.catalog-page--swage .swage-comparison__row {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage .swage-comparison__row > * {
      border-right: 0;
      border-bottom: 1px solid var(--swage-line);
    }

    body.catalog-page.catalog-page--swage .swage-comparison__mobile-label {
      display: block;
      margin-bottom: 0.4rem;
      color: var(--swage-accent);
      font: 650 var(--swage-type-caption) / 1.35 var(--font-sans);
      letter-spacing: 0.01em;
    }

    body.catalog-page.catalog-page--swage .swage-comparison__row > *:last-child {
      border-bottom: 0;
    }

    body.catalog-page.catalog-page--swage .swage-comparison__row--header {
      display: none;
    }
  }
}

/* Swage composition variants
   Ledger and Account are reusable page grammars built from the same section
   primitives. They prevent generated app landings from becoming content swaps
   inside one universal stack while preserving the Swage token contract. */
@layer components {
  /* A proof statement is read as a single editorial claim. Account claims are
     longer, so they use the same left origin as ledger rather than forcing a
     narrow offset column that turns the sentence into a text wall. */
  body.catalog-page.catalog-page--swage .swage-proof--account blockquote {
    max-width: 21ch;
    font-size: clamp(2.7rem, 4.7vw, 5.2rem);
  }

  body.catalog-page.catalog-page--swage .swage-proof--account cite {
    max-width: 21ch;
  }

  body.catalog-page.catalog-page--swage .swage-section--system.swage-section--account .swage-split {
    display: block;
  }

  body.catalog-page.catalog-page--swage .swage-section--system.swage-section--account .swage-copy {
    max-width: 52rem;
  }

  body.catalog-page.catalog-page--swage
    .swage-section--system.swage-section--account
    .swage-copy
    h2 {
    max-width: 15ch;
  }

  body.catalog-page.catalog-page--swage
    .swage-section--system.swage-section--account
    .swage-interface {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
  }

  body.catalog-page.catalog-page--swage
    .swage-section--system.swage-section--account
    .swage-schema.live-dashboard--proof
    .ld-body {
    grid-template-columns: 12rem minmax(0, 1fr);
  }

  body.catalog-page.catalog-page--swage
    .swage-section--system.swage-section--account
    .swage-schema__records {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.catalog-page.catalog-page--swage
    .swage-section--system.swage-section--account
    .swage-schema__record {
    border-right: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage
    .swage-section--system.swage-section--account
    .swage-schema__record:nth-child(2n) {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage
    .swage-section--system.swage-section--account
    .swage-schema__record:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  body.catalog-page.catalog-page--swage .swage-inside--account .swage-inside__header {
    display: block;
    max-width: 47rem;
  }

  body.catalog-page.catalog-page--swage .swage-inside--account .swage-inside__header p {
    max-width: 39rem;
    margin-top: 1.25rem;
  }

  body.catalog-page.catalog-page--swage .swage-inside--account .swage-inside__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(2rem, 5vw, 5rem);
  }

  body.catalog-page.catalog-page--swage .swage-inside--account .swage-inside__card {
    display: grid;
    grid-column: auto !important;
    grid-template-columns: 3rem minmax(0, 1fr);
    min-height: 9.5rem;
    gap: 1.25rem;
    align-items: start;
    padding: 1.5rem 0;
    border: 0;
    border-bottom: 1px solid var(--swage-line-strong);
    border-radius: 0;
    background: transparent;
  }

  body.catalog-page.catalog-page--swage
    .swage-inside--account
    .swage-inside__card:nth-child(-n + 2) {
    border-top: 1px solid var(--swage-line-strong);
  }

  body.catalog-page.catalog-page--swage .swage-inside--account .swage-inside__icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  body.catalog-page.catalog-page--swage .swage-inside--account .swage-inside__copy {
    margin-top: 0;
  }

  body.catalog-page.catalog-page--swage
    .swage-section--automation.swage-section--account
    .swage-split--reverse
    .swage-assistant-queue {
    grid-column: 1;
    grid-row: 1;
  }

  /* This is a paired editorial/operational section, not a height-matched
     card set. Start both columns at the same edge, let the queue retain its
     natural density, and give the revenue claim enough measure to read as a
     coherent phrase. */
  body.catalog-page.catalog-page--swage
    .swage-section--automation.swage-section--account
    .swage-split--reverse {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 7rem);
  }

  /* Revenue copy is necessarily longer than the ledger counterpart. Give the
     account automation claim a wider measure so it keeps its operational
     cadence instead of breaking into isolated single-word lines. */
  body.catalog-page.catalog-page--swage
    .swage-section--automation.swage-section--account
    .swage-copy
    h2 {
    max-width: 15.5ch;
    font-size: clamp(2.55rem, 4vw, 4.55rem);
  }

  body.catalog-page.catalog-page--swage
    .swage-section--workflow.swage-section--account
    .swage-split {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 6vw, 4.5rem);
  }

  body.catalog-page.catalog-page--swage
    .swage-section--workflow.swage-section--account
    .swage-copy {
    max-width: 54rem;
  }

  body.catalog-page.catalog-page--swage
    .swage-section--workflow.swage-section--account
    .swage-copy
    h2 {
    max-width: 17ch;
  }

  body.catalog-page.catalog-page--swage
    .swage-section--workflow.swage-section--account
    .swage-workflow-artifact {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.catalog-page.catalog-page--swage
    .swage-section--workflow.swage-section--account
    .swage-workflow-artifact
    li {
    grid-template-columns: 1fr;
    min-height: 13rem;
    align-content: space-between;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-right: 1px solid var(--swage-line);
    border-bottom: 0;
  }

  /* In a horizontal handoff the ordered verbs are the reader's takeaway.
     Keep the index as a quiet sequence marker, then let each stage name carry
     enough display weight to earn the room around it. */
  body.catalog-page.catalog-page--swage
    .swage-section--workflow.swage-section--account
    .swage-workflow-artifact
    li
    strong {
    font: 650 clamp(1.55rem, 2vw, 2.25rem) / 0.98 var(--font-heading);
    letter-spacing: var(--swage-display-tracking-compact);
  }

  body.catalog-page.catalog-page--swage
    .swage-section--workflow.swage-section--account
    .swage-workflow-artifact
    li
    small {
    max-width: 20ch;
    margin-top: 0.7rem;
    color: var(--swage-muted);
    font: 400 var(--swage-type-ui) / 1.55 var(--font-sans);
  }

  body.catalog-page.catalog-page--swage
    .swage-section--workflow.swage-section--account
    .swage-workflow-artifact
    li:last-child {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage
    .swage-section--workflow.swage-section--account
    .swage-workflow-artifact
    i {
    display: none;
  }

  @media (max-width: 52rem) {
    body.catalog-page.catalog-page--swage .swage-inside--account .swage-inside__grid {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage
      .swage-section--automation.swage-section--account
      .swage-split--reverse {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage
      .swage-section--automation.swage-section--account
      .swage-split--reverse
      .swage-copy {
      grid-column: 1;
      grid-row: 1;
    }

    body.catalog-page.catalog-page--swage
      .swage-section--automation.swage-section--account
      .swage-split--reverse
      .swage-assistant-queue {
      grid-column: 1;
      grid-row: 2;
    }

    body.catalog-page.catalog-page--swage .swage-inside--account .swage-inside__card:nth-child(2) {
      border-top: 0;
    }

    body.catalog-page.catalog-page--swage
      .swage-section--workflow.swage-section--account
      .swage-workflow-artifact {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.catalog-page.catalog-page--swage
      .swage-section--workflow.swage-section--account
      .swage-workflow-artifact
      li:nth-child(2n) {
      border-right: 0;
    }

    body.catalog-page.catalog-page--swage
      .swage-section--workflow.swage-section--account
      .swage-workflow-artifact
      li:nth-child(-n + 2) {
      border-bottom: 1px solid var(--swage-line);
    }

    body.catalog-page.catalog-page--swage
      .swage-section--workflow.swage-section--account
      .swage-workflow-artifact
      li
      strong {
      font-size: clamp(1.4rem, 7vw, 1.8rem);
    }
  }

  @media (max-width: 32rem) {
    body.catalog-page.catalog-page--swage .swage-capability-index {
      display: grid;
      justify-items: center;
    }

    body.catalog-page.catalog-page--swage
      .swage-section--system.swage-section--account
      .swage-schema__body,
    body.catalog-page.catalog-page--swage
      .swage-section--system.swage-section--account
      .swage-schema__records,
    body.catalog-page.catalog-page--swage
      .swage-section--workflow.swage-section--account
      .swage-workflow-artifact {
      grid-template-columns: 1fr;
    }

    body.catalog-page.catalog-page--swage
      .swage-section--system.swage-section--account
      .swage-schema__record,
    body.catalog-page.catalog-page--swage
      .swage-section--workflow.swage-section--account
      .swage-workflow-artifact
      li {
      min-height: 8.5rem;
      align-content: center;
      gap: 0.75rem;
      border-right: 0;
      border-bottom: 1px solid var(--swage-line);
    }

    body.catalog-page.catalog-page--swage
      .swage-section--system.swage-section--account
      .swage-schema__record:last-child,
    body.catalog-page.catalog-page--swage
      .swage-section--workflow.swage-section--account
      .swage-workflow-artifact
      li:last-child {
      border-bottom: 0;
    }

    /* The application-structure proof has its own mobile composition: retain
       the workspace bar, remove the desktop rail, and give each domain the
       full reading width rather than shrinking a desktop shell. */
    body.catalog-page.catalog-page--swage .swage-schema.live-dashboard--proof .ld-body {
      display: block;
      min-height: 0;
    }

    body.catalog-page.catalog-page--swage .swage-schema.live-dashboard--proof .ld-side {
      display: none;
    }

    body.catalog-page.catalog-page--swage .swage-schema__example-bar {
      min-height: 2.75rem;
      padding-inline: 0.9rem;
    }

    body.catalog-page.catalog-page--swage
      .swage-schema.live-dashboard--proof
      .swage-schema__record {
      grid-template-columns: 2rem minmax(0, 1fr);
      min-height: 0;
      padding: 1rem;
    }

    body.catalog-page.catalog-page--swage
      .swage-schema.live-dashboard--proof
      .swage-schema__record
      strong {
      font-size: 0.95rem;
    }

    body.catalog-page.catalog-page--swage
      .swage-schema.live-dashboard--proof
      .swage-schema__record
      small {
      font: 400 0.8rem/1.45 var(--font-sans);
    }

    body.catalog-page.catalog-page--swage
      .swage-schema.live-dashboard--proof
      .swage-schema__fields {
      grid-template-columns: 1fr;
      font-size: 0.75rem;
    }
  }

  /* Scroll motion is intentionally a one-time reveal: it starts once an
     element is entering the viewport, then leaves reading and scrolling under
     the user's control. The live dashboard gets the only scale treatment;
     every other section settles with a short vertical reveal. */
  body.catalog-page.catalog-page--swage .swage-scroll-reveal,
  body.catalog-page.catalog-page--swage .swage-scroll-zoom {
    opacity: 1;
    transform: none;
  }

  body.catalog-page.catalog-page--swage .swage-metric:nth-child(2) {
    --swage-motion-delay: 55ms;
  }

  body.catalog-page.catalog-page--swage .swage-metric:nth-child(3) {
    --swage-motion-delay: 110ms;
  }

  body.catalog-page.catalog-page--swage .swage-metric:nth-child(4) {
    --swage-motion-delay: 165ms;
  }

  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(2) {
    --swage-motion-delay: 65ms;
  }

  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(3) {
    --swage-motion-delay: 130ms;
  }

  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(4) {
    --swage-motion-delay: 195ms;
  }

  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(5) {
    --swage-motion-delay: 260ms;
  }

  body.catalog-page.catalog-page--swage .swage-inside__card:nth-child(6) {
    --swage-motion-delay: 325ms;
  }

  body.catalog-page.catalog-page--swage .swage-technical__principle:nth-child(2) {
    --swage-motion-delay: 70ms;
  }

  body.catalog-page.catalog-page--swage .swage-technical__principle:nth-child(3) {
    --swage-motion-delay: 140ms;
  }

  html.swage-scroll-motion-ready body.catalog-page.catalog-page--swage .swage-scroll-zoom {
    transform-origin: center top;
  }

  html.swage-scroll-motion-ready
    body.catalog-page.catalog-page--swage
    .swage-scroll-reveal.is-revealed,
  html.swage-scroll-motion-ready
    body.catalog-page.catalog-page--swage
    .swage-scroll-zoom.is-revealed {
    animation: swage-observed-reveal 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--swage-motion-delay, 0ms);
  }

  html.swage-scroll-motion-ready
    body.catalog-page.catalog-page--swage
    .swage-scroll-zoom.is-revealed {
    animation-name: swage-observed-zoom;
  }

  @keyframes swage-observed-reveal {
    from {
      opacity: 0.82;
      transform: translateY(1rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes swage-observed-zoom {
    from {
      opacity: 0.88;
      transform: translateY(1rem) scale(0.98);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.catalog-page.catalog-page--swage .swage-button,
    body.catalog-page.catalog-page--swage .swage-button__icon,
    :is(.erpnav, .crmnav) .swage-button,
    :is(.erpnav, .crmnav) .swage-button__icon {
      transition: none !important;
    }

    body.catalog-page.catalog-page--swage .swage-button:hover,
    body.catalog-page.catalog-page--swage .swage-button:active,
    body.catalog-page.catalog-page--swage .swage-button:hover .swage-button__icon,
    :is(.erpnav, .crmnav) .swage-button:hover,
    :is(.erpnav, .crmnav) .swage-button:active,
    :is(.erpnav, .crmnav) .swage-button:hover .swage-button__icon {
      transform: none;
    }

    body.catalog-page.catalog-page--swage .erpnav-brand-wrap,
    body.catalog-page.catalog-page--swage .crmnav-brand-wrap,
    body.catalog-page.catalog-page--swage .erpnav-right,
    body.catalog-page.catalog-page--swage .crmnav-right {
      transition: none;
    }

    html.swage-scroll-motion-ready body.catalog-page.catalog-page--swage .swage-scroll-reveal,
    html.swage-scroll-motion-ready body.catalog-page.catalog-page--swage .swage-scroll-zoom {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
  }
}

/* --------------------------------------------------------------------------
   Swage Hallmark page families

   These final, route-scoped rules remove the repeated centred marketing
   stack from the governed Swage child routes. Product roots retain the approved
   centred hero above a full-width live product proof; agent indexes become
   registries; agent details become evidence dossiers; and feature pages
   introduce their canonical manual or technical reference as a document. Tokens and navigation stay
   shared; component ownership and route evidence are governed alongside this
   block. */
@layer components {
  html:has(body.catalog-page.catalog-page--swage),
  body.catalog-page.catalog-page--swage {
    overflow-x: clip;
  }

  body.catalog-page.catalog-page--swage.swage-page--technical-reference .swage-technical-reference {
    background: var(--swage-canvas);
  }

  /* Child pages keep their headline as one editorial sentence. Product roots
     deliberately retain the established indigo proposition and CTA phrase. */
  body.catalog-page.catalog-page--swage.catalog-page--swage-child .swage-child-hero h1 > span,
  body.catalog-page.catalog-page--swage.catalog-page--swage-child #cta.swage-final-cta h2 span {
    display: inline;
    margin: 0;
    color: inherit !important;
    font-style: normal;
  }

  body.catalog-page.catalog-page--swage:not(.catalog-page--swage-child)
    #cta.swage-final-cta
    h2
    span {
    display: block;
    margin-top: 0.08em;
    color: var(--swage-accent) !important;
    font-style: normal;
  }

  body.catalog-page.catalog-page--swage :is(h1, h2) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.catalog-page.catalog-page--swage
    :is(
      .swage-button,
      .swage-child-breadcrumb a,
      .swage-skill-manual__nav a,
      .erpnav-link,
      .crmnav-link
    ) {
    white-space: nowrap;
  }

  body.catalog-page.catalog-page--swage.catalog-page--swage-child {
    --swage-child-content-rail: min(var(--swage-max-content-rail), 68rem);
  }

  body.catalog-page.catalog-page--swage.catalog-page--swage-child .swage-shell {
    width: var(--swage-child-content-rail);
  }

  body.catalog-page.catalog-page--swage .swage-child-hero {
    width: var(--swage-child-content-rail);
    max-width: none;
    margin-inline: auto;
    padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 6.5rem);
    text-align: left;
  }

  body.catalog-page.catalog-page--swage .swage-child-breadcrumb {
    width: var(--swage-child-content-rail);
    justify-content: flex-start;
    margin-inline: auto;
  }

  body.catalog-page.catalog-page--swage .swage-child-hero h1 {
    max-width: 15ch;
    margin: 1.25rem 0 0;
    overflow-wrap: anywhere;
  }

  body.catalog-page.catalog-page--swage .swage-child-hero > p {
    max-width: 46rem;
    margin: 1.4rem 0 0;
  }

  body.catalog-page.catalog-page--swage .swage-child-hero__actions {
    justify-content: flex-start;
  }

  /* The closer is a decisive handoff, not a second centred hero. */
  body.catalog-page.catalog-page--swage #main-content > #cta.swage-final-cta {
    display: block;
    min-height: 0;
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-top: 0 !important;
  }

  body.catalog-page.catalog-page--swage #cta.swage-final-cta > .swage-final-cta__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: var(--swage-max-content-rail) !important;
    max-width: none !important;
    margin-inline: auto !important;
    gap: 1.25rem;
    text-align: left !important;
  }

  body.catalog-page.catalog-page--swage.catalog-page--swage-child
    #cta.swage-final-cta
    > .swage-final-cta__inner {
    width: var(--swage-child-content-rail) !important;
  }

  body.catalog-page.catalog-page--swage .swage-final-cta__eyebrow {
    display: none;
  }

  body.catalog-page.catalog-page--swage #cta.swage-final-cta h2 {
    max-width: 15ch;
    margin: 0 !important;
    font-size: clamp(2.6rem, 5vw, 4.75rem);
    line-height: 0.96;
  }

  body.catalog-page.catalog-page--swage #cta.swage-final-cta p {
    max-width: 44rem;
    margin: 0 !important;
    text-align: left !important;
  }

  body.catalog-page.catalog-page--swage .swage-final-cta__actions {
    justify-content: flex-start;
    margin-top: 0;
  }

  body.catalog-page.catalog-page--swage .swage-final-cta__decision {
    display: grid;
    width: min(100%, 32rem);
    min-width: 0;
    gap: 1.25rem;
    margin-top: 0.75rem;
  }

  body.catalog-page.catalog-page--swage .swage-button:hover,
  body.catalog-page.catalog-page--swage .swage-button:active,
  :is(.erpnav, .crmnav) .swage-button:hover,
  :is(.erpnav, .crmnav) .swage-button:active,
  body.catalog-page.catalog-page--swage .swage-button:hover .swage-button__icon,
  :is(.erpnav, .crmnav) .swage-button:hover .swage-button__icon {
    transform: none;
  }

  body.catalog-page.catalog-page--swage #cta .swage-final-cta__note {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* Index-First agent registries. The links are the interface; the mast only
     names the collection and explains its operating boundary. */
  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-child-mast {
    padding-top: 3rem;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-child-hero {
    padding-block: 2.75rem 3.5rem;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-child-hero h1 {
    max-width: 21ch;
    font: 700 clamp(2.65rem, 7vw, 4.25rem) / 0.98 var(--font-heading);
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster {
    padding-block: clamp(3.5rem, 7vw, 6rem);
  }

  /* Keep the section title on the page's strong left rail, then indent the
     registry itself. The offset now reads as hierarchy instead of a nested
     container drifting between two full-rail sections. */
  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster > .swage-shell {
    width: var(--swage-child-content-rail);
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster__header {
    max-width: 54rem;
    margin-bottom: 2.5rem;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster__header h2 {
    max-width: 24ch;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster__list,
  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster__list--count-3 {
    grid-template-columns: minmax(0, 1fr);
    margin-inline-start: clamp(3.5rem, 7vw, 6rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster__list li,
  body.catalog-page.catalog-page--swage.swage-page--agent-index
    .swage-agent-roster__list
    li:nth-child(odd),
  body.catalog-page.catalog-page--swage.swage-page--agent-index
    .swage-agent-roster__list--count-3
    li {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster__list a {
    min-height: 0;
    padding: 1.35rem 0;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster__copy {
    gap: 0.45rem;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-technical__principles {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 0;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-technical__principle,
  body.catalog-page.catalog-page--swage.swage-page--agent-index
    .swage-technical__principle--primary {
    display: grid;
    grid-row: auto;
    grid-template-columns: 2rem minmax(0, 1fr);
    min-height: 0;
    margin: 0;
    padding: 1.6rem 0;
    border: 0;
    border-top: 1px solid var(--swage-line-strong);
    border-radius: 0;
    background: transparent;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index
    .swage-technical__principle:last-child {
    border-bottom: 1px solid var(--swage-line-strong);
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index
    :is(.swage-technical__icon, .swage-technical__principle--primary .swage-technical__icon) {
    width: 1.5rem;
    height: 1.5rem;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-index
    :is(.swage-technical__principle h3, .swage-technical__principle--primary h3) {
    max-width: none;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.15;
  }

  /* Evidence dossiers and feature specifications use ruled records rather
     than interchangeable cards. */
  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    :is(.swage-agent-context__list, .swage-feature-context__list) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    :is(.swage-agent-context__item, .swage-feature-context__item) {
    display: grid;
    grid-template-columns: minmax(6rem, 0.2fr) minmax(0, 1fr);
    padding: 1.4rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--swage-line);
  }

  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    :is(.swage-agent-context__item, .swage-feature-context__item):last-child {
    border-bottom: 0;
  }

  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    :is(.swage-agent-context__item, .swage-feature-context__item)
    dd {
    display: grid;
    gap: 0.45rem;
  }

  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    .swage-support__grid,
  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    :is(
      .swage-support__grid--count-3,
      .swage-support__grid--count-4,
      .swage-support__grid--count-6
    ),
  body.catalog-page.catalog-page--swage.swage-page--feature-manual .swage-agent-roster__list,
  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-linked-capabilities__list {
    grid-template-columns: minmax(0, 1fr);
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-linked-capabilities__list
    li,
  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-linked-capabilities__list
    li:nth-child(odd),
  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-linked-capabilities__list--count-3
    li {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    .swage-support__item,
  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    .swage-support__item:nth-child(odd),
  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    .swage-support__grid--count-3
    .swage-support__item,
  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    .swage-support__grid--count-6
    .swage-support__item {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(12rem, 0.36fr) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage:is(.swage-page--agent-dossier, .swage-page--feature-manual)
    .swage-support__item
    p {
    margin-top: 0;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-dossier .swage-child-hero h1 {
    max-width: 18ch;
    font-size: clamp(3rem, 7vw, 5rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-dossier .swage-linked-capabilities__list,
  body.catalog-page.catalog-page--swage.swage-page--agent-dossier
    .swage-linked-capabilities__list--count-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-dossier
    .swage-linked-capabilities__list
    li,
  body.catalog-page.catalog-page--swage.swage-page--agent-dossier
    .swage-linked-capabilities__list
    li:nth-child(odd),
  body.catalog-page.catalog-page--swage.swage-page--agent-dossier
    .swage-linked-capabilities__list--count-3
    li {
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage.swage-page--agent-dossier
    .swage-linked-capabilities__list
    a {
    min-height: 0;
    padding: 1.4rem 0;
  }

  /* Long Document feature manuals. The preface is a compact specification;
     the complete source document then owns the reading measure. */
  body.catalog-page.catalog-page--swage.swage-page--feature-manual .swage-child-hero h1 {
    max-width: 19ch;
    font-size: clamp(2.85rem, 7vw, 4.75rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual .swage-app-contexts__list {
    grid-template-columns: minmax(0, 1fr);
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-app-contexts__list
    article {
    padding-inline: 0;
    border-right: 0;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual .swage-skill-manual__header {
    display: block;
    max-width: none;
    padding-block: clamp(5rem, 9vw, 8rem) clamp(2.5rem, 5vw, 4rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual .swage-skill-manual__header h2 {
    max-width: 44rem;
    font-size: clamp(2.65rem, 5vw, 4.5rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__header
    > div {
    margin-top: 1.5rem;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__header
    > div
    > p {
    max-width: 64ch;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__body
    > article {
    max-width: none;
    margin-inline: 0;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__section:is(
      .swage-skill-manual__section--context,
      .swage-skill-manual__section--appendix
    ) {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__section:is(
      .swage-skill-manual__section--context,
      .swage-skill-manual__section--appendix
    )
    .swage-prose {
    max-width: 72ch;
    margin-inline: auto;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__section:is(
      .swage-skill-manual__section--build,
      .swage-skill-manual__section--maintain,
      .swage-skill-manual__section--scale
    ) {
    display: grid;
    position: relative;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-block: 0;
    border-top: 0;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__section:is(
      .swage-skill-manual__section--build,
      .swage-skill-manual__section--maintain,
      .swage-skill-manual__section--scale
    )
    .swage-skill-manual__stage {
    display: grid;
    position: relative;
    align-self: stretch;
    align-content: start;
    justify-items: center;
    gap: 0.7rem;
    padding-top: clamp(3rem, 5vw, 4rem);
    color: var(--swage-muted);
    font: 600 0.75rem / 1.2 var(--font-mono);
    letter-spacing: 0;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__section:is(
      .swage-skill-manual__section--build,
      .swage-skill-manual__section--maintain,
      .swage-skill-manual__section--scale
    )
    .swage-skill-manual__stage
    > span {
    display: grid;
    z-index: 1;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid var(--swage-line-strong);
    border-radius: 50%;
    color: var(--swage-accent);
    background: var(--swage-canvas);
    font: 650 0.78rem / 1 var(--font-mono);
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__section:is(
      .swage-skill-manual__section--build,
      .swage-skill-manual__section--maintain,
      .swage-skill-manual__section--scale
    )
    .swage-skill-manual__stage
    > strong {
    display: inline-flex;
    z-index: 1;
    min-height: 1.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: var(--swage-muted);
    background: var(--swage-surface);
    font: 600 0.75rem / 1.2 var(--font-sans);
    white-space: nowrap;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__section:is(
      .swage-skill-manual__section--build,
      .swage-skill-manual__section--maintain
    )
    .swage-skill-manual__stage::after {
    position: absolute;
    top: clamp(6.45rem, 8vw, 7.45rem);
    bottom: -4rem;
    left: 50%;
    width: 1px;
    background: var(--swage-line-strong);
    content: '';
    transform: translateX(-50%);
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__section:is(
      .swage-skill-manual__section--build,
      .swage-skill-manual__section--maintain,
      .swage-skill-manual__section--scale
    )
    .swage-prose {
    padding-block: clamp(3rem, 5vw, 4rem) clamp(4rem, 7vw, 6rem);
    border-top: 1px solid var(--swage-line-strong);
    font-size: clamp(1rem, 0.98rem + 0.12vw, 1.075rem);
    line-height: 1.75;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__section:is(
      .swage-skill-manual__section--build,
      .swage-skill-manual__section--maintain,
      .swage-skill-manual__section--scale
    )
    .swage-prose
    h2 {
    max-width: 24ch;
    margin-bottom: 1.5rem;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    line-height: 1.08;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual
    .swage-skill-manual__section:is(
      .swage-skill-manual__section--build,
      .swage-skill-manual__section--maintain,
      .swage-skill-manual__section--scale
    )
    .swage-prose
    h3 {
    margin-top: 2.5rem;
    font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual .swage-prose :is(p, ul, ol) {
    max-width: 72ch;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual .swage-prose ul {
    list-style-type: disc;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual .swage-prose ol {
    list-style-type: decimal;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual .swage-prose :is(ul, ol) {
    padding-left: 1.75rem;
    list-style-position: outside;
  }

  body.catalog-page.catalog-page--swage.swage-page--feature-manual .swage-prose li::marker {
    color: var(--swage-accent);
    font-weight: 650;
  }

  @media (min-width: 48rem) {
    body.catalog-page.catalog-page--swage:is(
        .swage-page--agent-dossier,
        .swage-page--feature-manual
      )
      :is(.swage-agent-context__item, .swage-feature-context__item)
      dd {
      grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 1fr);
      gap: 2rem;
    }

    body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster__copy {
      grid-template-columns: minmax(13rem, 0.38fr) minmax(0, 1fr);
      gap: 2rem;
    }
  }

  @media (min-width: 60rem) {
    body.catalog-page.catalog-page--swage #cta.swage-final-cta > .swage-final-cta__inner {
      grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.52fr);
      column-gap: clamp(3rem, 8vw, 8rem);
      align-items: end;
    }

    body.catalog-page.catalog-page--swage #cta.swage-final-cta h2 {
      grid-column: 1;
      grid-row: 1;
    }

    body.catalog-page.catalog-page--swage
      #cta.swage-final-cta
      > .swage-final-cta__inner
      > p:not(.swage-final-cta__note) {
      grid-column: 1;
      grid-row: 2;
    }

    body.catalog-page.catalog-page--swage .swage-final-cta__decision {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      justify-self: end;
      width: 100%;
      margin-top: 0;
      padding-inline-start: clamp(1.25rem, 2vw, 1.5rem);
      border-inline-start: 1px solid var(--swage-line-strong);
    }

    body.catalog-page.catalog-page--swage .swage-final-cta__actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 42rem) {
    body.catalog-page.catalog-page--swage.swage-page--feature-manual
      .swage-skill-manual__section:is(
        .swage-skill-manual__section--build,
        .swage-skill-manual__section--maintain,
        .swage-skill-manual__section--scale
      ) {
      grid-template-columns: 3rem minmax(0, 1fr);
      gap: 0.75rem;
    }

    body.catalog-page.catalog-page--swage.swage-page--feature-manual
      .swage-skill-manual__section:is(
        .swage-skill-manual__section--build,
        .swage-skill-manual__section--maintain,
        .swage-skill-manual__section--scale
      )
      .swage-skill-manual__stage {
      padding-top: 2.75rem;
    }

    body.catalog-page.catalog-page--swage.swage-page--feature-manual
      .swage-skill-manual__section:is(
        .swage-skill-manual__section--build,
        .swage-skill-manual__section--maintain,
        .swage-skill-manual__section--scale
      )
      .swage-skill-manual__stage
      > span {
      width: 2.25rem;
      height: 2.25rem;
      font-size: 0.7rem;
    }

    body.catalog-page.catalog-page--swage.swage-page--feature-manual
      .swage-skill-manual__section:is(
        .swage-skill-manual__section--build,
        .swage-skill-manual__section--maintain,
        .swage-skill-manual__section--scale
      )
      .swage-skill-manual__stage
      > strong {
      display: inline-flex;
      font-size: 0.75rem;
    }

    body.catalog-page.catalog-page--swage.swage-page--feature-manual
      .swage-skill-manual__section:is(
        .swage-skill-manual__section--build,
        .swage-skill-manual__section--maintain
      )
      .swage-skill-manual__stage::after {
      top: 5.35rem;
      bottom: -2.75rem;
    }

    body.catalog-page.catalog-page--swage.swage-page--feature-manual
      .swage-skill-manual__section:is(
        .swage-skill-manual__section--build,
        .swage-skill-manual__section--maintain,
        .swage-skill-manual__section--scale
      )
      .swage-prose {
      padding-block: 2.75rem 4rem;
    }

    body.catalog-page.catalog-page--swage.swage-page--feature-manual
      .swage-skill-manual__section:is(
        .swage-skill-manual__section--build,
        .swage-skill-manual__section--maintain,
        .swage-skill-manual__section--scale
      )
      .swage-prose
      h2 {
      font-size: clamp(1.75rem, 9vw, 2.15rem);
    }
  }

  @media (max-width: 35rem) {
    body.catalog-page.catalog-page--swage:is(
        .swage-page--agent-dossier,
        .swage-page--feature-manual
      )
      :is(.swage-agent-context__item, .swage-feature-context__item),
    body.catalog-page.catalog-page--swage:is(
        .swage-page--agent-dossier,
        .swage-page--feature-manual
      )
      .swage-support__item,
    body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-technical__principle,
    body.catalog-page.catalog-page--swage.swage-page--agent-index
      .swage-technical__principle--primary {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.75rem;
    }
  }

  @media (max-width: 52rem) {
    body.catalog-page.catalog-page--swage.swage-page--agent-index .swage-agent-roster__list,
    body.catalog-page.catalog-page--swage.swage-page--agent-index
      .swage-agent-roster__list--count-3 {
      margin-inline-start: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.catalog-page.catalog-page--swage :is(a, button, summary) {
      transition-duration: 0ms;
    }
  }

  /* -- Tacet runtime page archetypes --------------------------------------
     Hallmark · macrostructures: Proto Map/Diagram · BYOA Narrative Workflow
     · Headless Long Document · critique scores: P5 H5 E4 S5 R5 V4
     · existing Tacet tokens/chrome · one orange signal · responsive table
     fallbacks · shader-only heroes. */

  /* Proto run dossier: production topology + query-selectable ruled index. */
  .proto-heading-emphasis {
    display: inline-block;
    color: var(--org-on-light);
    font: inherit;
    font-weight: inherit;
  }

  .proto-heading-emphasis::after {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 0.08em;
    background: currentColor;
    content: '';
  }

  .proto-code-comment {
    color: var(--text-m);
    opacity: 0.72;
  }

  .proto-code-command,
  .proto-code-flag {
    color: var(--org-on-light);
  }

  .proto-code-string {
    color: var(--cream);
  }

  .proto-module-dossier {
    background: var(--background);
  }

  .proto-module-dossier__header,
  .headless-section-intro {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: var(--tacet-section-pad-y) var(--space-8);
  }

  .proto-module-dossier__header h2,
  .headless-section-intro h2 {
    max-width: 18ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 760;
    letter-spacing: var(--tacet-type-section-track);
    line-height: var(--tacet-type-heading-lh);
  }

  .proto-module-dossier__header > p,
  .headless-section-intro > p {
    max-width: 64ch;
    margin-top: var(--space-4);
    color: var(--text-m);
    font-size: var(--fs-body);
    line-height: 1.6;
  }

  .proto-module-topology,
  .proto-module-index {
    display: grid;
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    grid-template-columns: minmax(11rem, 0.26fr) minmax(0, 1fr);
    margin-inline: auto;
    padding-bottom: var(--tacet-section-pad-y);
  }

  .proto-module-index[hidden],
  .proto-module-topology[hidden] {
    display: none;
  }

  .proto-module-topology__run,
  .proto-module-index__packet {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-right: 0;
    padding: var(--space-6);
    background: var(--darker);
  }

  .proto-module-topology__run > span,
  .proto-module-index__packet > span {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .proto-module-topology__run > strong,
  .proto-module-index__packet > strong {
    margin-top: auto;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.75rem);
    line-height: 0.9;
  }

  .proto-module-topology__run > small,
  .proto-module-index__packet > small {
    margin-top: var(--space-4);
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    line-height: 1.5;
    text-transform: uppercase;
  }

  .proto-module-topology__stages {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    list-style: none;
  }

  .proto-module-stage {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) minmax(11rem, 0.36fr);
    min-height: 6.25rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .proto-module-stage__phase,
  .proto-module-stage__signal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .proto-module-stage__phase {
    border-right: 1px solid var(--border);
  }

  .proto-module-stage__phase span,
  .proto-module-stage__signal span,
  .proto-module-stage__modules span {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .proto-module-stage__phase strong,
  .proto-module-stage__signal strong,
  .proto-module-stage__modules strong {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    line-height: 1.35;
  }

  .proto-module-stage__modules {
    display: grid;
    align-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .proto-module-stage__modules li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .proto-module-stage__modules li + li {
    border-top: 1px solid var(--border);
  }

  .proto-module-stage__signal {
    border-left: 1px solid var(--border);
    background: var(--surface-dim);
  }

  .proto-module-stage[data-state='active'] {
    box-shadow: inset 3px 0 0 var(--org-on-light);
  }

  .proto-module-stage[data-state='active'] .proto-module-stage__signal span,
  .proto-module-stage[data-state='holding'] .proto-module-stage__signal span {
    color: var(--org-on-light);
  }

  .proto-module-index__scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
  }

  .proto-module-index table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
  }

  .proto-module-index :is(th, td) {
    border-bottom: 1px solid var(--border);
    padding: var(--space-4);
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    line-height: 1.4;
    text-align: left;
    vertical-align: top;
  }

  .proto-module-index tr:last-child :is(th, td) {
    border-bottom: 0;
  }

  .proto-module-index :is(th, td) + :is(th, td) {
    border-left: 1px solid var(--border);
  }

  .proto-module-index thead th,
  .proto-module-index tbody th span {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .proto-module-index tbody th {
    color: var(--foreground);
    font-size: var(--fs-btn);
  }

  .proto-module-index tbody th span {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--org-on-light);
  }

  .proto-module-index td[data-state='active'],
  .proto-module-index td[data-state='holding'] {
    color: var(--org-on-light);
    font-weight: 700;
  }

  /* Headless editorial thesis: one-axis taxonomies and ledgers. */
  .headless-caller-section,
  .headless-benefit-section {
    background: var(--background);
  }

  .headless-caller-taxonomy,
  .headless-comparison,
  .headless-advantage-ledger {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin: 0 auto var(--tacet-section-pad-y);
    border-top: 1px solid var(--border);
  }

  .headless-caller-taxonomy__row,
  .headless-comparison__row {
    display: grid;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }

  .headless-caller-taxonomy__row {
    grid-template-columns: minmax(8rem, 0.22fr) minmax(12rem, 0.34fr) minmax(9rem, 0.2fr) minmax(
        18rem,
        0.7fr
      );
  }

  .headless-comparison__row {
    grid-template-columns: minmax(8rem, 0.24fr) repeat(3, minmax(12rem, 0.5fr));
  }

  .headless-caller-taxonomy__row > *,
  .headless-comparison__row > * {
    min-width: 0;
    margin: 0;
    padding: var(--space-4);
  }

  .headless-caller-taxonomy__row > * + *,
  .headless-comparison__row > * + * {
    border-left: 1px solid var(--border);
  }

  .headless-caller-taxonomy__row--head,
  .headless-comparison__row--head {
    background: var(--darker);
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .headless-caller-taxonomy__type,
  .headless-caller-taxonomy__row > strong {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.45;
    text-transform: uppercase;
  }

  .headless-caller-taxonomy__row h3,
  .headless-comparison__row h3,
  .headless-advantage-ledger h3 {
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: var(--fs-subhead);
    font-weight: 700;
    line-height: 1.15;
  }

  .headless-caller-taxonomy__row p,
  .headless-comparison__row p,
  .headless-advantage-ledger p {
    color: var(--text-m);
    font-size: var(--fs-btn);
    line-height: 1.55;
  }

  .headless-comparison__row p:last-child {
    background: color-mix(in oklch, var(--background), var(--org) 6%);
  }

  .headless-comparison__row p:last-child strong {
    color: var(--foreground);
    font-weight: 700;
  }

  .headless-advantage-ledger {
    padding: 0;
    list-style: none;
  }

  .headless-advantage-ledger li {
    display: grid;
    grid-template-columns: 3.5rem minmax(10rem, 0.3fr) minmax(0, 1fr);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }

  .headless-advantage-ledger li > * {
    margin: 0;
    padding: var(--space-4);
  }

  .headless-advantage-ledger li > * + * {
    border-left: 1px solid var(--border);
  }

  .headless-advantage-ledger li > span {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  .headless-packet-quote {
    border: 1px solid var(--border);
    padding: var(--space-6);
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
    font-style: normal;
    font-weight: 650;
    line-height: 1.3;
  }

  .headless-layer-icon {
    width: 1rem;
    height: 1rem;
    margin-right: var(--space-2);
    flex: 0 0 auto;
    color: var(--org-on-light);
  }

  .headless-layer-icon--heading {
    display: inline-block;
    margin-right: var(--space-2);
    vertical-align: -0.12em;
  }

  .headless-comparison-list-icon {
    position: absolute;
    top: 0.2rem;
    left: 0;
    width: 0.875rem;
    height: 0.875rem;
  }

  .headless-comparison-list-icon--human {
    color: var(--text-m);
  }

  .headless-comparison-list-icon--agent {
    color: var(--org-on-light);
  }

  .tacet-headless-saas-page #real-applications pre .proto-code-command,
  .tacet-headless-saas-page #real-applications pre .proto-code-string {
    color: var(--org-on-light);
  }

  /* These three pages keep one meaningful body reveal each. The current
     shader is a separate retained hero treatment. */
  .tacet-motion-restrained
    [data-observe]:not(
      #modules [data-observe],
      #call-path [data-observe],
      #agent-economy [data-observe]
    ).observed,
  .tacet-motion-restrained
    [data-observe~='signature-reveal']:not(
      #modules [data-observe],
      #call-path [data-observe],
      #agent-economy [data-observe]
    ).observed
    [data-line] {
    animation: none !important;
    transition: none !important;
  }

  @media (max-width: 64rem) {
    .proto-module-topology,
    .proto-module-index {
      grid-template-columns: 1fr;
    }

    .proto-module-topology__run,
    .proto-module-index__packet {
      min-height: 10rem;
      border-right: 1px solid var(--border);
      border-bottom: 0;
    }

    .proto-module-topology__run > strong,
    .proto-module-index__packet > strong {
      margin-top: var(--space-8);
    }

    .proto-module-stage {
      grid-template-columns: 6rem minmax(0, 1fr);
    }

    .proto-module-stage__signal {
      grid-column: 1 / -1;
      border-top: 1px solid var(--border);
      border-left: 0;
    }

    .headless-caller-taxonomy__row {
      grid-template-columns: minmax(8rem, 0.32fr) minmax(0, 1fr);
    }

    .headless-caller-taxonomy__row--head {
      display: none;
    }

    .headless-caller-taxonomy__row > *:nth-child(3) {
      border-top: 1px solid var(--border);
      border-left: 0;
    }

    .headless-caller-taxonomy__row > *:nth-child(4) {
      border-top: 1px solid var(--border);
    }

    .headless-comparison__row--head {
      display: none;
    }

    .headless-comparison__row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .headless-comparison__row > :first-child {
      grid-column: 1 / -1;
      border-bottom: 1px solid var(--border);
    }

    .headless-comparison__row > :nth-child(2) {
      border-left: 0;
    }

    .headless-comparison__row > [data-label]::before {
      display: block;
      margin-bottom: var(--space-2);
      color: var(--org-on-light);
      content: attr(data-label);
      font-family: var(--font-mono);
      font-size: var(--fs-label);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
  }

  @media (max-width: 40rem) {
    .proto-module-stage {
      grid-template-columns: 1fr;
    }

    .proto-module-stage__phase {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .proto-module-stage__modules li {
      grid-template-columns: 3rem minmax(0, 1fr);
    }

    .headless-caller-taxonomy__row {
      grid-template-columns: 1fr;
    }

    .headless-caller-taxonomy__row > * + *,
    .headless-caller-taxonomy__row > *:nth-child(3),
    .headless-caller-taxonomy__row > *:nth-child(4) {
      border-top: 1px solid var(--border);
      border-left: 0;
    }

    .headless-comparison__row {
      grid-template-columns: 1fr;
    }

    .headless-comparison__row > :first-child {
      grid-column: auto;
    }

    .headless-comparison__row > * + * {
      border-top: 1px solid var(--border);
      border-left: 0;
    }

    .headless-advantage-ledger li {
      grid-template-columns: 3rem minmax(0, 1fr);
    }

    .headless-advantage-ledger li > p {
      grid-column: 2;
      border-top: 1px solid var(--border);
    }

    .headless-advantage-ledger li > * + * {
      border-left: 1px solid var(--border);
    }
  }

  /* -- Tacet page-role archetypes ------------------------------------------
     Hallmark redesign: one system, seven distinct reading structures. */
  .role-section {
    width: 100%;
    padding-block: clamp(4rem, 8vw, 7rem);
    border-bottom: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
  }

  .role-section--quiet {
    background: var(--surface-container);
    color: var(--foreground);
  }

  .role-intro,
  .discovery-record,
  .discovery-source-index,
  .discovery-review,
  .discovery-manifest,
  .managed-blueprint,
  .managed-boundary,
  .managed-brief,
  .managed-review,
  .version-record,
  .version-playground .tacet-diff-grid,
  .version-rollback,
  .version-export,
  .enterprise-map,
  .enterprise-policy__rows,
  .enterprise-deployment__matrix,
  .enterprise-deployment__note,
  .enterprise-operations {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
  }

  .role-intro {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }

  .role-intro--narrow {
    max-width: min(56rem, calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x))));
    margin-inline-start: max(
      calc((100% - var(--tacet-section-max)) / 2 + var(--tacet-section-pad-x)),
      calc((100% - var(--tacet-visible-rail)) / 2)
    );
  }

  .role-kicker {
    margin: 0;
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .role-intro h2,
  .discovery-review__statement h2,
  .managed-boundary__intro h2,
  .managed-brief__summary h2,
  .version-rollback__intro h2,
  .enterprise-operations__copy h2 {
    max-width: 19ch;
    min-width: 0;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 4.25rem);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 0.98;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .role-intro > p:last-child,
  .discovery-review__statement > p:last-child,
  .managed-boundary__intro > p:last-child,
  .version-rollback__intro > p:last-child,
  .enterprise-operations__copy > p {
    max-width: 66ch;
    margin: 0;
    color: var(--text-m);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.65;
  }

  .role-state {
    width: fit-content;
    border: 1px solid color-mix(in oklch, var(--org-on-light), transparent 58%);
    padding: 0.4rem 0.7rem;
    color: var(--org-on-light);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  /* Discovery · Workbench */
  .discovery-record {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-container);
    box-shadow: var(--shadow-sm);
  }

  .discovery-record__header,
  .version-record > header {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 2.5vw, 1.75rem);
    border-bottom: 1px solid var(--border);
  }

  .discovery-record__header > div,
  .version-record > header > div {
    display: grid;
    gap: 0.3rem;
  }

  .discovery-record__header span,
  .version-record > header span {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  .discovery-record__header strong,
  .version-record > header strong {
    color: var(--foreground);
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .discovery-record__body {
    display: grid;
    grid-template-columns: minmax(14rem, 0.28fr) minmax(0, 0.72fr);
  }

  .discovery-record__context {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-right: 1px solid var(--border);
    background: color-mix(in oklch, var(--surface-container), var(--org) 3%);
  }

  .discovery-record__context > p {
    margin: 0 0 1.25rem;
    color: var(--foreground);
    font-weight: 700;
  }

  .discovery-record__context dl {
    display: grid;
    gap: 0.85rem;
    margin: 0;
  }

  .discovery-record__context dl div {
    display: grid;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .discovery-record__context dt,
  .discovery-manifest dt,
  .managed-brief dt,
  .enterprise-operations__record dt,
  .ownership-matrix dt {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
  }

  .discovery-record__context dd,
  .discovery-manifest dd,
  .managed-brief dd,
  .enterprise-operations__record dd,
  .ownership-matrix dd {
    margin: 0;
    color: var(--foreground);
    line-height: 1.45;
  }

  .discovery-record__trace {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .discovery-record__trace li {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) minmax(7rem, auto);
    gap: clamp(0.8rem, 2vw, 1.5rem);
    align-items: start;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border-bottom: 1px solid var(--border);
  }

  .discovery-record__trace li:last-child {
    border-bottom: 0;
  }

  .discovery-record__trace > li > span,
  .discovery-source-index article > span,
  .discovery-review__queue span,
  .managed-blueprint__row > strong,
  .managed-brief__runbook > li > span,
  .version-rollback__path > li > span,
  .enterprise-policy__rows article > span {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
  }

  .discovery-record__trace strong,
  .discovery-source-index strong,
  .discovery-review__queue strong {
    color: var(--foreground);
    font-size: 1rem;
    line-height: 1.35;
  }

  .discovery-record__trace p,
  .discovery-source-index p,
  .discovery-review__queue p {
    margin: 0.35rem 0 0;
    color: var(--text-m);
    line-height: 1.55;
  }

  .discovery-record__trace em {
    color: var(--text-m);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 650;
    text-align: right;
  }

  .discovery-source-index {
    display: grid;
    border-top: 1px solid var(--border);
  }

  .discovery-source-index article {
    display: grid;
    grid-template-columns: minmax(7rem, 0.18fr) minmax(14rem, 0.32fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 3rem);
    padding: clamp(1.25rem, 2.5vw, 2rem) 0;
    border-bottom: 1px solid var(--border);
  }

  .discovery-source-index p {
    margin-top: 0;
  }

  .discovery-review {
    display: grid;
    grid-template-columns: minmax(16rem, 0.36fr) minmax(0, 0.64fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }

  .discovery-review__statement {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: calc(var(--tacet-nav-bottom, var(--chrome-height)) + 5rem);
  }

  .discovery-review__queue {
    border-top: 1px solid var(--border);
  }

  .discovery-review__queue > div {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
  }

  .discovery-review__queue p {
    margin: 0;
  }

  .discovery-review__queue strong {
    grid-column: 2;
    color: var(--org-on-light);
    font-size: 0.8rem;
  }

  .discovery-manifest {
    display: grid;
    margin-top: clamp(1rem, 3vw, 2rem);
    border-top: 1px solid var(--border);
  }

  .discovery-manifest > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
  }

  /* Managed Services · Narrative workflow */
  .managed-blueprint {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-container);
  }

  .managed-blueprint__row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.12fr) repeat(2, minmax(11rem, 0.31fr)) minmax(
        8rem,
        0.2fr
      );
  }

  .managed-blueprint__row + .managed-blueprint__row {
    border-top: 1px solid var(--border);
  }

  .managed-blueprint__row > * {
    margin: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    line-height: 1.5;
  }

  .managed-blueprint__row > * + * {
    border-left: 1px solid var(--border);
  }

  .managed-blueprint__row--head {
    background: var(--foreground);
    color: var(--background);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .managed-blueprint__row p {
    color: var(--text-m);
    font-size: 0.92rem;
  }

  .managed-blueprint__row em {
    color: var(--foreground);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 700;
  }

  .managed-boundary {
    display: grid;
    grid-template-columns: minmax(16rem, 0.38fr) minmax(0, 0.62fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .managed-boundary__intro {
    display: grid;
    gap: 1rem;
  }

  .managed-boundary__table {
    border-top: 1px solid var(--border);
  }

  .managed-boundary__table > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.3fr) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--border);
  }

  .managed-boundary__table strong {
    color: var(--foreground);
  }

  .managed-boundary__table p {
    margin: 0;
    color: var(--text-m);
    line-height: 1.55;
  }

  .managed-brief {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-container);
    box-shadow: var(--shadow-sm);
  }

  .managed-brief__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  .managed-brief__summary {
    display: grid;
    grid-template-columns: minmax(0, 0.58fr) minmax(18rem, 0.42fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--border);
  }

  .managed-brief__summary > div:first-child {
    display: grid;
    gap: 1rem;
  }

  .managed-brief__summary dl {
    display: grid;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--border);
  }

  .managed-brief__summary dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
  }

  .managed-brief__runbook {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .managed-brief__runbook > li {
    display: grid;
    grid-template-columns: 6rem minmax(12rem, 0.32fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: 1.4rem clamp(1.25rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--border);
  }

  .managed-brief__runbook > li:last-child {
    border-bottom: 0;
  }

  .managed-brief__runbook p {
    margin: 0;
    color: var(--text-m);
    line-height: 1.55;
  }

  .managed-review__ledger {
    display: grid;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
    list-style: none;
  }

  .managed-review__ledger li {
    display: grid;
    grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--border);
  }

  .managed-review__ledger span {
    color: var(--text-m);
  }

  /* Version Control · Component playground */
  .version-record {
    border: 1px solid var(--border);
    background: var(--surface-container);
  }

  .version-record dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
  }

  .version-record dl > div {
    display: grid;
    gap: 0.35rem;
    padding: 1.25rem;
  }

  .version-record dl > div + div {
    border-left: 1px solid var(--border);
  }

  .version-playground .tacet-diff-grid {
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
  }

  .version-rollback {
    display: grid;
    grid-template-columns: minmax(16rem, 0.32fr) minmax(0, 0.68fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .version-rollback__intro {
    display: grid;
    gap: 1rem;
  }

  .version-rollback__path {
    display: grid;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
    list-style: none;
  }

  .version-rollback__path li {
    display: grid;
    grid-template-columns: 5rem minmax(10rem, 0.3fr) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border);
  }

  .version-rollback__path p {
    margin: 0;
    color: var(--text-m);
    line-height: 1.5;
  }

  .version-export__ledger {
    border-top: 1px solid var(--border);
  }

  .version-export__ledger > div {
    display: grid;
    grid-template-columns: minmax(10rem, 0.26fr) minmax(0, 1fr) 5rem;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
  }

  .version-export__ledger span {
    color: var(--text-m);
  }

  .version-export__ledger em {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    text-align: right;
  }

  /* Enterprise · Map / Diagram */
  .enterprise-map {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-container);
    box-shadow: var(--shadow-sm);
  }

  .enterprise-map figcaption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }

  .enterprise-map figcaption > span:first-child {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  .enterprise-map__canvas {
    display: grid;
    grid-template-columns:
      minmax(9rem, 1fr) auto minmax(9rem, 1fr) auto minmax(9rem, 1fr)
      auto minmax(9rem, 1fr);
    align-items: stretch;
    padding: clamp(1.25rem, 4vw, 3.5rem);
  }

  .enterprise-map__node {
    display: grid;
    gap: 0.65rem;
    align-content: center;
    min-height: 14rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--border);
    background: var(--background);
  }

  .enterprise-map__node--gate {
    border-color: var(--org-on-light);
    background: color-mix(in oklch, var(--background), var(--org) 5%);
  }

  .enterprise-map__node span {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .enterprise-map__node strong {
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
  }

  .enterprise-map__node p {
    margin: 0;
    color: var(--text-m);
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .enterprise-map__edge {
    display: grid;
    min-width: clamp(1.5rem, 3vw, 3rem);
    place-items: center;
    color: var(--org-on-light);
    font-family: var(--font-mono);
  }

  .enterprise-map__evidence {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
  }

  .enterprise-map__evidence strong {
    margin-right: auto;
  }

  .enterprise-map__evidence span {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  .enterprise-policy__rows {
    border-top: 1px solid var(--border);
  }

  .enterprise-policy__rows article {
    display: grid;
    grid-template-columns: minmax(9rem, 0.2fr) minmax(12rem, 0.24fr) minmax(0, 1fr) minmax(
        9rem,
        auto
      );
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.25rem, 2.5vw, 2rem) 0;
    border-bottom: 1px solid var(--border);
  }

  .enterprise-policy__rows h3 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: 1.1rem;
  }

  .enterprise-policy__rows p {
    margin: 0;
    color: var(--text-m);
    line-height: 1.55;
  }

  .enterprise-policy__rows article > strong {
    color: var(--foreground);
    font-size: 0.8rem;
    text-align: right;
  }

  .enterprise-deployment__matrix {
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .enterprise-deployment__row {
    display: grid;
    grid-template-columns: minmax(10rem, 0.2fr) minmax(12rem, 0.3fr) minmax(12rem, 0.3fr) minmax(
        10rem,
        0.2fr
      );
  }

  .enterprise-deployment__row + .enterprise-deployment__row {
    border-top: 1px solid var(--border);
  }

  .enterprise-deployment__row > * {
    padding: 1.1rem;
    line-height: 1.45;
  }

  .enterprise-deployment__row > * + * {
    border-left: 1px solid var(--border);
  }

  .enterprise-deployment__row--head {
    background: var(--foreground);
    color: var(--background);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .enterprise-deployment__row span {
    color: var(--text-m);
    font-size: 0.9rem;
  }

  .enterprise-deployment__row--head span {
    color: inherit;
  }

  .enterprise-deployment__note {
    margin-top: 1rem;
    color: var(--text-m);
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .enterprise-operations {
    display: grid;
    grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .enterprise-operations__copy {
    display: grid;
    gap: 1rem;
  }

  .enterprise-operations__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  .enterprise-operations__record {
    display: grid;
    margin: 0;
    border-top: 1px solid var(--border);
  }

  .enterprise-operations__record > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--border);
  }

  /* Contact · Form First */
  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-grid {
    width: min(calc(100% - (2 * var(--tacet-section-pad-x))), 48rem);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-copy {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
    gap: 1.5rem;
    max-width: none;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-copy__intro {
    max-width: 60ch;
    margin-bottom: 0.5rem;
    text-wrap: pretty;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-separator {
    width: 100%;
    height: 0;
    margin-block: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
    border: 0;
    border-top: 1px solid var(--border);
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-routes {
    border-top: 0;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-route {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 0.3rem 1.5rem;
    min-height: auto;
    padding: 1rem 0;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-route strong {
    grid-column: 1;
    grid-row: 1;
    letter-spacing: 0;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-route span {
    grid-column: 1;
    grid-row: 2;
    max-width: 46ch;
    color: var(--text-m);
    line-height: 1.5;
    text-wrap: pretty;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-route small {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-body);
    white-space: nowrap;
  }

  @media (hover: hover) and (pointer: fine) {
    .tacet-contact-page .tacet-contact-route:hover {
      color: var(--org-on-light);
    }

    .tacet-contact-page .tacet-contact-field input:hover,
    .tacet-contact-page .tacet-contact-field select:hover,
    .tacet-contact-page .tacet-contact-field textarea:hover {
      background: var(--surface-container);
    }
  }

  .tacet-contact-page .tacet-contact-route:focus-visible {
    outline: 2px solid var(--org-on-light);
    outline-offset: 3px;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-form-header h1 {
    max-width: 20ch;
    min-width: 0;
    font-size: 4rem;
    letter-spacing: 0;
    line-height: 0.98;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-form-header > p {
    max-width: 70ch;
    text-wrap: pretty;
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-form-shell {
    grid-column: 1;
    grid-row: auto;
    position: static;
    gap: 1rem;
  }

  .tacet-contact-page .tacet-contact-tally {
    display: grid;
    gap: var(--space-3);
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-form {
    min-width: 0;
    gap: 1rem;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background: var(--surface-container);
  }

  .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-form--embed {
    border-color: var(--border);
    background: var(--surface-container);
    color-scheme: light;
  }

  .tacet-contact-page .tacet-contact-field label {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  .tacet-contact-page .tacet-contact-field label span,
  .tacet-contact-page .tacet-contact-field > small {
    color: var(--text-m);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .tacet-contact-page .tacet-contact-field > small {
    min-height: 1lh;
    line-height: 1.4;
  }

  .tacet-contact-page .tacet-contact-field input,
  .tacet-contact-page .tacet-contact-field select,
  .tacet-contact-page .tacet-contact-field textarea {
    min-height: 3rem;
    padding: 0.75rem 2.5rem 0.75rem 0.9rem;
    border: 1px solid var(--border);
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--background);
    color: var(--foreground);
    font: 600 0.95rem/1.45 var(--font-body);
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .tacet-contact-page .tacet-contact-field input:focus-visible,
  .tacet-contact-page .tacet-contact-field select:focus-visible,
  .tacet-contact-page .tacet-contact-field textarea:focus-visible {
    border-color: var(--border);
    outline-color: var(--org-on-light);
    box-shadow: none;
  }

  .tacet-contact-page .tacet-contact-field input:disabled,
  .tacet-contact-page .tacet-contact-field select:disabled,
  .tacet-contact-page .tacet-contact-field textarea:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    background: var(--surface-container);
  }

  .tacet-contact-page .tacet-contact-form__note {
    font-family: var(--font-body);
    font-size: 0.82rem;
  }

  .tacet-contact-page .tacet-contact-form__note--external,
  .tacet-contact-page .tacet-contact-form__note--external a {
    color: var(--text-m);
  }

  .tacet-contact-page .tacet-contact-form__note--external a {
    text-decoration-thickness: from-font;
    text-underline-offset: 0.2em;
  }

  .tacet-contact-page .tacet-contact-form__note--external a:hover,
  .tacet-contact-page .tacet-contact-form__note--external a:focus-visible {
    color: var(--foreground);
  }

  @media (max-width: 64rem) {
    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-form-header {
      max-width: 42rem;
    }

    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-form-header h1 {
      font-size: 3.5rem;
    }
  }

  @media (max-width: 40rem) {
    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-copy {
      gap: 1.25rem;
    }

    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-form-header h1 {
      max-width: 20ch;
      font-size: 2.75rem;
      line-height: 1;
    }

    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-copy__intro {
      margin-bottom: 0.25rem;
    }

    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-route {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      gap: 0.3rem;
      padding-block: 1rem;
    }

    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-route strong,
    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-route span,
    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-route small {
      grid-column: 1;
      grid-row: auto;
    }

    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-route small {
      justify-self: start;
      margin-top: 0.2rem;
    }

    .tacet-contact-page .tacet-contact-section--form-first .tacet-contact-form {
      padding: 1rem;
    }
  }

  /* Help · Index-First */
  .tacet-help-page .tacet-help-index {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: clamp(5rem, 10vw, 9rem);
  }

  .tacet-help-page .tacet-help-index__header {
    width: auto;
    max-width: 62rem;
    margin: 0 0 clamp(3rem, 6vw, 5rem);
  }

  .tacet-help-page .tacet-help-index__header h1 {
    max-width: 17ch;
    min-width: 0;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: 0.96;
    overflow-wrap: anywhere;
  }

  .help-live {
    border-block: 1px solid var(--border);
  }

  .help-live__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.7rem;
  }

  .help-live__article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
    padding: clamp(2rem, 5vw, 4rem) 0;
    color: var(--foreground);
  }

  .help-live__article h2 {
    max-width: 22ch;
    min-width: 0;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 4rem);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .help-live__article p {
    max-width: 62ch;
    margin: 1rem 0 0;
    color: var(--text-m);
    line-height: 1.6;
  }

  .help-live__article > span {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--org-on-light);
    font-weight: 700;
    white-space: nowrap;
  }

  .help-live__article:focus-visible {
    outline: 2px solid var(--org-on-light);
    outline-offset: 4px;
  }

  .help-coverage {
    padding-top: clamp(3rem, 6vw, 5rem);
  }

  .help-coverage > header {
    display: grid;
    grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .help-coverage h2 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
  }

  .help-coverage > header p,
  .help-coverage__list p {
    margin: 0;
    color: var(--text-m);
    line-height: 1.55;
  }

  .help-coverage__list {
    border-top: 1px solid var(--border);
  }

  .help-coverage__list article {
    display: grid;
    grid-template-columns: minmax(13rem, 0.32fr) minmax(0, 1fr) auto;
    gap: 2rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--border);
  }

  .help-coverage__list h3 {
    margin: 0;
    color: var(--foreground);
    font-size: 1rem;
  }

  .help-coverage__list span {
    color: var(--text-m);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .help-coverage__contact {
    margin: 1.5rem 0 0;
    color: var(--text-m);
  }

  .help-coverage__contact a {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    margin-left: 0.35rem;
    color: var(--org-on-light);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  /* Ownership · Conversational FAQ */
  .ownership-answers {
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    margin-inline: auto;
    padding-block: clamp(4rem, 8vw, 7rem);
  }

  .ownership-answers__intro {
    display: grid;
    gap: 1rem;
    max-width: 64rem;
    margin-bottom: clamp(3rem, 7vw, 6rem);
  }

  .ownership-answers__intro h1 {
    max-width: 18ch;
    min-width: 0;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2.3rem, 5.5vw, 5rem);
    line-height: 0.98;
    overflow-wrap: anywhere;
  }

  .ownership-answers__intro > p:last-child {
    max-width: 62ch;
    margin: 0;
    color: var(--text-m);
    font-size: 1.08rem;
    line-height: 1.65;
  }

  .ownership-answer {
    display: grid;
    grid-template-columns: minmax(15rem, 0.38fr) minmax(0, 0.62fr);
    gap: clamp(2rem, 7vw, 7rem);
    padding-block: clamp(2.5rem, 6vw, 5rem);
    border-top: 1px solid var(--border);
  }

  .ownership-answer > header {
    display: grid;
    gap: 0.75rem;
    align-content: start;
  }

  .ownership-answer > header span {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
  }

  .ownership-answer h2 {
    margin: 0;
    min-width: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 3.2vw, 3rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .ownership-answer__body > p {
    max-width: 64ch;
    margin: 0 0 1.75rem;
    color: var(--text-m);
    font-size: 1.02rem;
    line-height: 1.7;
  }

  .ownership-matrix,
  .ownership-checklist,
  .ownership-targets {
    margin: 0;
    border-top: 1px solid var(--border);
  }

  .ownership-matrix > div {
    display: grid;
    grid-template-columns: minmax(10rem, 0.34fr) minmax(6rem, 0.18fr) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
  }

  .ownership-matrix span {
    color: var(--text-m);
    font-size: 0.85rem;
  }

  .ownership-checklist {
    padding: 0;
    list-style: none;
  }

  .ownership-checklist li,
  .ownership-targets > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.25fr) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
  }

  .ownership-checklist span,
  .ownership-targets p {
    margin: 0;
    color: var(--text-m);
    line-height: 1.5;
  }

  .ownership-transfer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
  }

  .ownership-transfer span {
    padding: 1.1rem;
    color: var(--foreground);
    font-size: 0.86rem;
    font-weight: 700;
  }

  .ownership-transfer span + span {
    border-left: 1px solid var(--border);
  }

  @media (max-width: 64rem) {
    .discovery-record__body,
    .discovery-review,
    .managed-boundary,
    .managed-brief__summary,
    .version-rollback,
    .enterprise-operations,
    .ownership-answer {
      grid-template-columns: minmax(0, 1fr);
    }

    .discovery-record__context {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .discovery-review__statement {
      position: static;
    }

    .managed-blueprint__row {
      grid-template-columns: minmax(5rem, 0.15fr) repeat(2, minmax(10rem, 0.32fr)) minmax(
          7rem,
          0.21fr
        );
    }

    .enterprise-map__canvas {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }

    .enterprise-map__node {
      min-height: 0;
    }

    .enterprise-map__edge {
      min-height: 2rem;
      transform: rotate(90deg);
    }

    .enterprise-policy__rows article {
      grid-template-columns: minmax(9rem, 0.25fr) minmax(12rem, 0.3fr) minmax(0, 1fr);
    }

    .enterprise-policy__rows article > strong {
      grid-column: 2 / -1;
      text-align: left;
    }
  }

  @media (max-width: 48rem) {
    .role-intro,
    .discovery-record,
    .discovery-source-index,
    .discovery-review,
    .discovery-manifest,
    .managed-blueprint,
    .managed-boundary,
    .managed-brief,
    .managed-review,
    .version-record,
    .version-playground .tacet-diff-grid,
    .version-rollback,
    .version-export,
    .enterprise-map,
    .enterprise-policy__rows,
    .enterprise-deployment__matrix,
    .enterprise-deployment__note,
    .enterprise-operations,
    .tacet-help-page .tacet-help-index,
    .ownership-answers {
      width: min(calc(100% - 2rem), calc(var(--tacet-section-max) - 2rem));
    }

    .role-intro--narrow {
      margin-inline: auto;
    }

    .discovery-record__header,
    .version-record > header,
    .enterprise-map figcaption {
      align-items: start;
      grid-template-columns: minmax(0, 1fr);
      flex-direction: column;
    }

    .discovery-record__trace li,
    .discovery-source-index article,
    .managed-brief__runbook > li,
    .version-rollback__path li,
    .enterprise-policy__rows article {
      grid-template-columns: minmax(0, 1fr);
    }

    .discovery-record__trace em {
      text-align: left;
    }

    .discovery-review__queue > div,
    .discovery-manifest > div,
    .managed-boundary__table > div,
    .managed-review__ledger li,
    .version-export__ledger > div,
    .enterprise-operations__record > div,
    .ownership-matrix > div,
    .ownership-checklist li,
    .ownership-targets > div {
      grid-template-columns: minmax(0, 1fr);
    }

    .discovery-review__queue strong {
      grid-column: 1;
    }

    .managed-blueprint__row,
    .enterprise-deployment__row {
      grid-template-columns: minmax(0, 1fr);
    }

    .managed-blueprint__row--head,
    .enterprise-deployment__row--head {
      display: none;
    }

    .managed-blueprint__row > * + *,
    .enterprise-deployment__row > * + * {
      border-top: 1px solid var(--border);
      border-left: 0;
    }

    .version-record dl,
    .ownership-transfer {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .version-record dl > div + div {
      border-left: 0;
    }

    .version-record dl > div:nth-child(even) {
      border-left: 1px solid var(--border);
    }

    .version-record dl > div:nth-child(n + 3) {
      border-top: 1px solid var(--border);
    }

    .enterprise-map__evidence {
      align-items: flex-start;
      flex-direction: column;
    }

    .enterprise-map__evidence strong {
      margin-right: 0;
    }

    .tacet-contact-page .tacet-contact-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .tacet-contact-page .tacet-contact-route {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.35rem;
    }

    .tacet-contact-page .tacet-contact-route small {
      grid-column: 1;
    }

    .help-live__meta,
    .help-live__article,
    .help-coverage > header,
    .help-coverage__list article {
      grid-template-columns: minmax(0, 1fr);
    }

    .help-live__meta {
      display: grid;
    }

    .help-live__article {
      align-items: start;
    }

    .help-coverage__list article {
      gap: 0.5rem;
    }

    .help-coverage__contact a {
      margin: 0.5rem 0 0;
    }

    .ownership-transfer span:nth-child(odd) {
      border-left: 0;
    }

    .ownership-transfer span:nth-child(n + 3) {
      border-top: 1px solid var(--border);
    }
  }

  /* -- Not-found recovery page ------------------------------------------- */
  .tacet-not-found-page {
    background: var(--background);
  }

  .not-found {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: calc(100svh - var(--chrome-height));
    place-items: center;
    overflow: hidden;
    padding: clamp(8.5rem, 15vh, 11rem) var(--tacet-section-pad-x) clamp(4rem, 8vh, 6rem);
    background:
      linear-gradient(color-mix(in oklch, var(--border), transparent 62%) 1px, transparent 1px),
      linear-gradient(
        90deg,
        color-mix(in oklch, var(--border), transparent 62%) 1px,
        transparent 1px
      ),
      var(--background);
    background-size: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 6rem);
  }

  .not-found::before {
    position: absolute;
    z-index: -1;
    width: min(70vw, 58rem);
    aspect-ratio: 1;
    border: 1px solid color-mix(in oklch, var(--org), transparent 78%);
    background: radial-gradient(
      circle,
      color-mix(in oklch, var(--org), transparent 87%),
      transparent 68%
    );
    content: '';
    filter: blur(1px);
    pointer-events: none;
    transform: rotate(22deg) translate(28%, 2%);
  }

  .not-found__frame {
    display: grid;
    width: var(--tacet-visible-rail);
    max-width: calc(var(--tacet-section-max) - (2 * var(--tacet-section-pad-x)));
    grid-template-columns: minmax(0, 0.86fr) minmax(28rem, 1.14fr);
    border-block: 1px solid var(--border-strong);
    background: color-mix(in oklch, var(--background), transparent 5%);
  }

  .not-found__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 6vw, 5.75rem) clamp(1rem, 5vw, 4.75rem) clamp(2.5rem, 6vw, 5.75rem) 0;
  }

  .not-found-route__header,
  .not-found-route__footer,
  .not-found-route__label,
  .not-found__assurance {
    font-family: var(--font-mono);
  }

  .not-found__copy > .proto-section-eyebrow {
    position: absolute;
    top: -1px;
    left: 0;
    margin: 0;
    padding-top: var(--space-2);
    width: min(12rem, 100%);
    border-top: 2px solid var(--org-on-light);
  }

  .not-found h1 {
    max-width: 10ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(3.4rem, 6.7vw, 6.65rem);
    font-weight: 700;
    letter-spacing: var(--tacet-type-hero-track);
    line-height: 0.9;
  }

  .not-found__lede {
    max-width: 34rem;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    color: var(--text-m);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    line-height: 1.65;
  }

  .not-found__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: clamp(2rem, 4vw, 2.75rem);
  }

  .not-found__assurance {
    margin: 1.25rem 0 0;
    color: var(--text-m);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
  }

  .not-found-route {
    min-width: 0;
    margin: 0;
    border-left: 1px solid var(--border-strong);
    background: color-mix(in oklch, var(--surface-raised), transparent 16%);
  }

  .not-found-route__header,
  .not-found-route__footer {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: clamp(1rem, 3vw, 1.75rem);
    color: var(--text-m);
    font-size: 0.625rem;
    letter-spacing: 0.11em;
  }

  .not-found-route__header {
    border-bottom: 1px solid var(--border);
  }

  .not-found-route__header span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .not-found-route__header i {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--org-on-light);
    border-radius: 50%;
    box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--org), transparent 82%);
  }

  .not-found-route__canvas {
    position: relative;
    min-height: clamp(26rem, 46vw, 34rem);
    overflow: hidden;
  }

  .not-found-route__numeral {
    position: absolute;
    inset: 50% auto auto 50%;
    color: transparent;
    font-family: var(--font-heading);
    font-size: clamp(10rem, 24vw, 20rem);
    font-weight: 700;
    letter-spacing: var(--tacet-type-hero-track);
    line-height: 0.75;
    opacity: 0.48;
    pointer-events: none;
    transform: translate(-52%, -54%);
    white-space: nowrap;
    -webkit-text-stroke: 1px color-mix(in oklch, var(--foreground), transparent 77%);
  }

  .not-found-route__diagram {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .not-found-route__grid-line {
    fill: none;
    stroke: color-mix(in oklch, var(--border), transparent 32%);
    stroke-width: 1;
  }

  .not-found-route__base,
  .not-found-route__trace {
    fill: none;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }

  .not-found-route__base {
    stroke: color-mix(in oklch, var(--foreground), transparent 74%);
    stroke-dasharray: 3 8;
    stroke-width: 2;
  }

  .not-found-route__trace {
    stroke: var(--org-on-light);
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    stroke-width: 4;
  }

  .not-found-route__origin {
    fill: var(--background);
    stroke: var(--foreground);
    stroke-width: 3;
  }

  .not-found-route__break circle {
    fill: var(--background);
    stroke: var(--org-on-light);
    stroke-width: 2;
  }

  .not-found-route__break path {
    fill: none;
    stroke: var(--org-on-light);
    stroke-width: 3;
  }

  .not-found-route__label {
    position: absolute;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    font-size: 0.625rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }

  .not-found-route__label--origin {
    top: 55%;
    left: 3%;
  }

  .not-found-route__endpoint {
    position: absolute;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--foreground);
    transform: translate(-50%, -50%);
  }

  .not-found-route__endpoint--home {
    top: 29.1667%;
    left: 90%;
  }

  .not-found-route__endpoint--catalog {
    top: 48.3333%;
    left: 90%;
  }

  .not-found-route__endpoint-marker {
    position: absolute;
    inset: 0;
    border: 2px solid var(--org-on-light);
    border-radius: 50%;
  }

  .not-found-route__endpoint-marker::after {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 1.375rem;
    height: 1.375rem;
    background: var(--org-on-light);
    border-radius: 50%;
    content: '';
    transform: translate(-50%, -50%);
  }

  .not-found-route__endpoint .not-found-route__label {
    right: -0.5rem;
    bottom: calc(100% + 0.625rem);
  }

  .not-found-route__endpoint:is(:hover, :focus-visible) .not-found-route__label {
    border-color: var(--border-strong);
  }

  .not-found-route__endpoint:focus-visible {
    border-radius: 50%;
    outline: 2px solid var(--foreground);
    outline-offset: 4px;
  }

  .not-found-route__footer {
    border-top: 1px solid var(--border);
  }

  @keyframes not-found-route-trace {
    0% {
      stroke-dashoffset: 1;
    }

    72%,
    100% {
      stroke-dashoffset: 0;
    }
  }

  @keyframes not-found-route-arrive {
    0%,
    68% {
      opacity: 0;
      transform: scale(0.6);
    }

    82%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .not-found-route__trace {
      animation: not-found-route-trace 5s var(--ease-expo-in-out) both;
    }

    .not-found-route__trace--branch {
      animation-delay: 0.5s;
    }

    .not-found-route__endpoint-marker {
      transform-origin: center;
      animation: not-found-route-arrive 5s var(--ease-expo-in-out) both;
    }

    .not-found-route__endpoint--home .not-found-route__endpoint-marker {
      animation-delay: 0.5s;
    }
  }

  @media (max-width: 64rem) {
    .not-found__frame {
      grid-template-columns: minmax(0, 1fr);
    }

    .not-found__copy {
      padding: 6.5rem 0 3.5rem;
    }

    .not-found-route {
      border-top: 1px solid var(--border-strong);
      border-left: 0;
    }

    .not-found-route__canvas {
      min-height: clamp(23rem, 72vw, 32rem);
    }
  }

  @media (max-width: 40rem) {
    .not-found {
      padding-inline: 1rem;
    }

    .not-found__frame {
      width: 100%;
    }

    .not-found__copy {
      padding: 6rem 0 2.75rem;
    }

    .not-found h1 {
      font-size: clamp(3.25rem, 16vw, 5.25rem);
    }

    .not-found__actions {
      align-items: stretch;
      flex-direction: column;
    }

    .not-found__actions .btn {
      justify-content: center;
      width: 100%;
    }

    .not-found-route__header,
    .not-found-route__footer {
      align-items: flex-start;
      flex-direction: column;
      justify-content: center;
      padding-block: 0.75rem;
    }

    .not-found-route__canvas {
      min-height: 22rem;
    }

    .not-found-route__numeral {
      font-size: clamp(8.5rem, 43vw, 12rem);
    }

    .not-found-route__endpoint {
      left: 90%;
    }
  }

  @media (max-width: 24rem) {
    .version-record dl,
    .ownership-transfer {
      grid-template-columns: minmax(0, 1fr);
    }

    .version-record dl > div:nth-child(even),
    .ownership-transfer span + span {
      border-left: 0;
    }

    .version-record dl > div + div,
    .ownership-transfer span + span {
      border-top: 1px solid var(--border);
    }
  }
  /* -- Tacet Proto homepage -------------------------------------------------
     Local / rewrite based on the web-lab Tacet page family used by
     /headless-saas, with Proto-specific proof objects and copy. */
  body:has(#main-content.tacet-proto-page) {
    background:
      linear-gradient(
        to bottom,
        color-mix(in oklch, var(--beige-50), transparent 62%),
        color-mix(in oklch, var(--beige-50), transparent 90%) 18rem,
        var(--background) 46rem
      ),
      url('../images/proto/gradient-navbar-bg.webp') top center / 100% 38rem no-repeat,
      var(--background);
    overflow-x: clip;
    overscroll-behavior-x: none;
    scroll-padding-top: calc(
      var(--chrome-height, calc(var(--space-20) + var(--space-2))) + var(--tacet-page-nav-height) +
        var(--space-4)
    );
    touch-action: pan-y;
  }

  html.dark body:has(#main-content.tacet-proto-page) {
    background:
      linear-gradient(
        to bottom,
        color-mix(in oklch, var(--ink-deep), transparent 88%),
        color-mix(in oklch, var(--ink-deep), transparent 94%) 18rem,
        var(--background) 46rem
      ),
      url('../images/proto/gradient-navbar-bg.webp') top center / 100% 38rem no-repeat,
      var(--background);
  }

  html.dark body:has(#main-content.tacet-proto-page) .proto-nav {
    --tacet-nav-pill-bg: color-mix(in oklch, var(--ink-deep), transparent 58%);
    --tacet-nav-pill-ink: var(--beige-50);
    --tacet-nav-panel: var(--tacet-nav-panel-rest);
    --tacet-nav-panel-rest: color-mix(in oklch, var(--beige-900), transparent 0%);
    --tacet-nav-panel-scrolled: color-mix(in oklch, var(--beige-950), transparent 60%);
    --tacet-nav-border: var(--tacet-nav-border-rest);
    --tacet-nav-border-rest: var(--ink-deep);
    --tacet-nav-border-scrolled: color-mix(in oklch, var(--beige-50), transparent 60%);
    --tacet-nav-ink: var(--beige-100);
    --tacet-nav-muted: color-mix(in oklch, var(--beige-300), transparent 22%);
    --tacet-nav-shadow-scrolled: var(--tacet-shadow-sm);
  }

  html.dark
    body:has(#main-content.tacet-proto-page)
    .proto-nav[data-scrolled='false']
    .proto-nav__bar {
    border-color: var(--tacet-nav-border-rest);
    border-radius: var(--tacet-radius-xl);
    background: var(--tacet-nav-panel-rest);
    box-shadow: none;
    backdrop-filter: none;
  }

  .tacet-proto-page {
    background: transparent;
    color: var(--foreground);
  }

  .tacet-proto-wrap {
    width: var(--tacet-visible-rail);
    margin-inline: auto;
  }

  .tacet-proto-hero {
    --tacet-proto-hero-artwork-offset: calc(var(--chrome-height) * 1.5);

    position: relative;
    min-height: auto;
    margin-top: calc(-1 * var(--chrome-height));
    padding-block: calc(var(--chrome-height) + clamp(var(--space-4), 3vw, var(--space-10)))
      clamp(var(--space-4), 3vw, var(--space-10));
    overflow: clip;
    border-bottom: 1px solid var(--tacet-panel-border);
    background: transparent;
    color: var(--foreground);
  }

  .tacet-proto-hero::before {
    position: absolute;
    inset: 0;
    background: url('../images/proto/proto-global-sketch-hero-wide-v1.webp') center
      var(--tacet-proto-hero-artwork-offset) / 100% auto no-repeat;
    content: '';
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0 var(--tacet-proto-hero-artwork-offset),
      var(--foreground) calc(var(--tacet-proto-hero-artwork-offset) + var(--space-12))
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0 var(--tacet-proto-hero-artwork-offset),
      var(--foreground) calc(var(--tacet-proto-hero-artwork-offset) + var(--space-12))
    );
    opacity: 0.26;
    pointer-events: none;
  }

  .tacet-proto-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: auto;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(var(--space-8), 4vw, var(--space-16));
    align-content: start;
    align-items: start;
    padding-block: clamp(var(--space-8), 5vw, var(--space-20));
    overflow: visible;
    border-radius: var(--tacet-radius-none);
    background: transparent;
    color: var(--foreground);
    container-type: inline-size;
  }

  .tacet-proto-hero__story {
    display: grid;
    max-width: var(--container-measure);
    gap: 0;
  }

  .tacet-proto-hero__summary {
    display: grid;
    align-content: start;
    padding-top: var(--space-1);
  }

  .tacet-proto-hero h1 {
    max-width: 18ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: 700;
    letter-spacing: var(--tracking-hero);
    line-height: 1;
  }

  .tacet-proto-hero h1 span:nth-child(2) {
    color: var(--org-on-light);
  }

  .tacet-proto-hero__lede {
    max-width: 46ch;
    margin: 0;
    color: var(--text-m);
    font-size: clamp(var(--fs-body), 1.1cqi, var(--fs-subhead));
    line-height: 1.625;
  }

  .tacet-proto-actions {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: var(--space-3-5) var(--space-6);
    align-items: center;
    justify-content: start;
    margin-top: var(--space-8);
  }

  .tacet-proto-actions .download-menu {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .tacet-proto-actions .download-menu__panel {
    inset-inline: 0 auto;
  }

  .tacet-proto-console {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: clamp(var(--space-4), 3vw, var(--space-10));
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--tacet-radius-2xl);
    background: transparent;
    color: var(--foreground);
    box-shadow: var(--tacet-shadow-lg);
  }

  .tacet-proto-motion {
    grid-column: 1 / -1;
    width: 100%;
    margin: clamp(var(--space-10), 6vw, calc(var(--space-16) + var(--space-2))) 0 0;
  }

  .tacet-proto-motion--hero {
    grid-column: 1 / -1;
    margin: clamp(var(--space-4), 3vw, var(--space-10)) 0 0;
  }

  .tacet-proto-motion__frame {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: var(--tacet-radius-2xl);
    background: var(--background);
    box-shadow: var(--tacet-shadow-lg);
  }

  .tacet-proto-motion--hero .tacet-proto-motion__frame {
    box-shadow: none;
  }

  .tacet-proto-motion video {
    display: block;
    width: 100%;
    aspect-ratio: 1080 / 692;
    height: auto;
    object-fit: cover;
    background: var(--background);
  }

  .tacet-proto-motion--hero .tacet-proto-motion__toggle {
    top: auto;
    right: auto;
    bottom: var(--space-3);
    left: var(--space-3);
  }

  .tacet-proto-motion__toggle {
    position: absolute;
    right: var(--space-3);
    top: var(--space-3);
    min-width: 3.8rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid color-mix(in oklch, var(--ink-deep), transparent 88%);
    border-radius: var(--tacet-radius-full);
    background: color-mix(in oklch, var(--beige-50), transparent 12%);
    color: var(--foreground);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(0.5rem);
    box-shadow: var(--tacet-shadow-xs);
  }

  .tacet-proto-motion__toggle:hover,
  .tacet-proto-motion__toggle:focus-visible {
    background: var(--background);
  }

  .tacet-proto-story {
    display: grid;
    grid-template-columns: minmax(20rem, 0.38fr) minmax(0, 0.62fr);
    gap: clamp(var(--space-8), 4vw, var(--space-16));
    align-items: start;
    min-height: clamp(36rem, 54vw, 48rem);
  }

  .tacet-proto-story--media-left {
    grid-template-columns: minmax(0, 0.62fr) minmax(20rem, 0.38fr);
  }

  .tacet-proto-story--media-left .tacet-proto-story__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .tacet-proto-story--media-left .tacet-proto-story__media {
    grid-column: 1;
    grid-row: 1;
  }

  .tacet-proto-story__copy {
    align-self: start;
    max-width: 34rem;
  }

  .tacet-proto-story__copy h2 {
    max-width: 16ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2.15rem, 3.1vw, 3.6rem);
    font-weight: 700;
    letter-spacing: var(--tacet-type-section-track);
    line-height: var(--tacet-type-heading-lh);
  }

  .tacet-proto-story__intro > p {
    max-width: 43ch;
    margin: calc(var(--space-4) + var(--space-1)) 0 0;
    color: var(--text-m);
    font-size: 1rem;
    line-height: 1.625;
  }

  .tacet-proto-story__chapters {
    display: grid;
    margin-top: clamp(var(--space-8), 4vw, calc(var(--space-12) + var(--space-2)));
    border-bottom: 1px solid var(--tacet-panel-border);
  }

  .tacet-proto-story__chapter {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    align-content: start;
    gap: var(--space-3);
    width: 100%;
    padding: clamp(var(--space-8), 5vh, calc(var(--space-12) + var(--space-1))) 0;
    border: 0;
    border-top: 1px solid var(--tacet-panel-border);
    background: transparent;
    color: var(--text-m);
    text-align: left;
    cursor: pointer;
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      padding-left var(--duration-fast) var(--ease-standard);
  }

  .tacet-proto-story__chapter:hover,
  .tacet-proto-story__chapter:focus-visible,
  .tacet-proto-story__chapter[aria-pressed='true'] {
    border-top-color: var(--org-on-light);
    color: var(--foreground);
    padding-left: var(--space-2);
  }

  .tacet-proto-story__chapter:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
  }

  .tacet-proto-story__chapter > span:first-child {
    color: var(--org-on-light);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 740;
    line-height: 1.5;
  }

  .tacet-proto-story__chapter strong,
  .tacet-proto-story__chapter small {
    display: block;
  }

  .tacet-proto-story__chapter strong {
    color: inherit;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .tacet-proto-story__chapter small {
    margin-top: var(--space-1);
    color: var(--text-m);
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .tacet-proto-story__media {
    position: sticky;
    top: calc(
      var(--chrome-height, calc(var(--space-20) + var(--space-2))) + var(--tacet-page-nav-height) +
        clamp(var(--space-3), 2vh, var(--space-6))
    );
    z-index: 3;
    align-self: start;
    min-width: 0;
    margin: 0;
    padding: clamp(
      calc(var(--space-4) + var(--space-1)),
      3.6vw,
      calc(var(--space-12) + var(--space-2))
    );
    overflow: hidden;
    border: 1px solid var(--tacet-panel-border);
    background-color: var(--background);
    isolation: isolate;
  }

  .tacet-proto-story__stage,
  .tacet-proto-story__stage img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .tacet-proto-story__stage {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .tacet-proto-story__stage img {
    object-fit: cover;
  }

  .tacet-proto-story__media .tacet-proto-motion__frame {
    z-index: 1;
    border-radius: var(--tacet-radius-xl);
    box-shadow: var(--tacet-shadow-lg);
  }

  .tacet-proto-story__media video {
    display: block;
    width: 100%;
    aspect-ratio: 3840 / 1662;
    height: auto;
    object-fit: cover;
    background: var(--background);
  }

  .tacet-proto-story__media .tacet-proto-motion__toggle {
    right: var(--space-3);
    top: var(--space-3);
  }

  .tacet-proto-section {
    scroll-margin-top: calc(
      var(--chrome-height, calc(var(--space-20) + var(--space-2))) + var(--tacet-page-nav-height) +
        var(--space-4)
    );
    border-bottom: 1px solid var(--tacet-panel-border);
    background: var(--background);
  }

  .tacet-proto-section--darker {
    background: color-mix(in oklch, var(--background), var(--surface-container) 58%);
  }

  .tacet-proto-section > .tacet-proto-wrap {
    padding-block: clamp(calc(var(--space-12) + var(--space-2)), 7vw, var(--space-20));
  }

  .tacet-proto-two-col {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
    gap: clamp(var(--space-8), 5vw, var(--space-16));
  }

  .tacet-proto-copy {
    max-width: 68ch;
  }

  .tacet-proto-copy h2,
  .tacet-proto-section-head h2 {
    max-width: 18ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 2.4vw, 2.15rem);
    font-weight: 700;
    letter-spacing: var(--tacet-type-section-track);
    line-height: var(--tacet-type-heading-lh);
  }

  .tacet-proto-copy p,
  .tacet-proto-section-head p {
    margin: var(--space-4) 0 0;
    color: var(--text-m);
    font-size: 1rem;
    line-height: 1.625;
  }

  .tacet-proto-section-head {
    display: grid;
    gap: 0;
    margin-bottom: clamp(var(--space-6), 3vw, calc(var(--space-8) + var(--space-1)));
  }

  .tacet-proto-bulletin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--border-width-base);
    overflow: hidden;
    border: var(--border-width-base) solid var(--tacet-panel-border);
    background: var(--tacet-panel-border);
  }

  .tacet-proto-bulletin {
    display: grid;
    gap: var(--space-3-5);
    min-height: 18rem;
    padding: calc(var(--space-4) + var(--space-1));
    background: var(--background);
  }

  .tacet-proto-bulletin p,
  .tacet-proto-bulletin span {
    margin: 0;
    color: var(--text-m);
    line-height: 1.5;
  }

  .tacet-proto-bulletin p {
    color: var(--org-on-light);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .tacet-proto-bulletin__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .tacet-proto-bulletin__icon {
    width: 1em;
    height: 1em;
    flex: none;
  }

  .tacet-proto-bulletin h3 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 700;
    letter-spacing: var(--tacet-type-card-track);
    line-height: var(--tacet-type-card-lh);
  }

  .tacet-proto-bulletin a {
    align-self: end;
    color: var(--foreground);
    font-weight: 700;
    text-decoration-color: var(--tacet-panel-border);
    text-underline-offset: 0.35rem;
  }

  @media (max-width: 1099px) {
    .tacet-proto-bulletin-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 960px) and (max-width: 1199px) {
    .tacet-proto-story {
      grid-template-columns: minmax(18rem, 0.4fr) minmax(0, 0.6fr);
      gap: clamp(
        calc(var(--space-6) + var(--space-1)),
        4vw,
        calc(var(--space-12) + var(--space-1))
      );
    }

    .tacet-proto-story--media-left {
      grid-template-columns: minmax(0, 0.6fr) minmax(18rem, 0.4fr);
    }

    .tacet-proto-story__copy {
      max-width: 30rem;
    }
  }

  @media (max-width: 959px) {
    .tacet-proto-hero__grid,
    .tacet-proto-two-col,
    .tacet-proto-story,
    .tacet-proto-story--media-left {
      grid-template-columns: 1fr;
    }

    .tacet-proto-story {
      gap: var(--space-8);
      min-height: 0;
    }

    .tacet-proto-story--media-left .tacet-proto-story__copy,
    .tacet-proto-story--media-left .tacet-proto-story__media {
      grid-column: 1;
      grid-row: auto;
    }

    .tacet-proto-story__copy {
      max-width: 48rem;
    }

    .tacet-proto-story__media {
      position: relative;
      top: auto;
      z-index: auto;
      grid-row: 2;
    }
  }

  @media (max-width: 760px) {
    .tacet-proto-hero {
      min-height: auto;
      padding-block: calc(var(--chrome-height) + var(--space-3)) var(--space-3);
    }

    .tacet-proto-hero::before {
      background-image: url('../images/proto/proto-global-sketch-hero-mobile-v1.webp');
      opacity: 0.22;
    }

    .tacet-proto-hero__grid {
      gap: var(--space-6);
      min-height: auto;
      padding: var(--space-6) 0 var(--space-4);
      border-radius: var(--tacet-radius-none);
    }

    .tacet-proto-hero h1 {
      max-width: none;
    }

    .tacet-proto-hero__summary {
      padding-top: 0;
    }

    .tacet-proto-actions {
      display: grid;
      width: min(100%, 80vw);
      max-width: 80vw;
      grid-template-columns: minmax(0, max-content);
      gap: var(--space-2);
      justify-items: start;
      margin-top: var(--space-6);
    }

    .tacet-proto-actions .btn {
      width: fit-content;
      max-width: 80vw;
      justify-content: flex-start;
    }

    .tacet-proto-actions .download-menu,
    .tacet-proto-actions .download-menu__trigger {
      width: fit-content;
      max-width: 80vw;
    }

    .tacet-proto-actions .download-menu__trigger {
      justify-content: flex-start;
    }

    .tacet-proto-actions .download-menu__panel {
      width: min(22rem, 80vw);
    }

    .tacet-proto-motion--hero {
      margin-top: var(--space-6);
    }

    .tacet-proto-story__copy h2 {
      font-size: clamp(2rem, 10vw, 3rem);
    }

    .tacet-proto-story__media {
      padding: var(--space-3);
    }

    .tacet-proto-bulletin-grid {
      grid-template-columns: 1fr;
    }
  }
}