/* Product integrations use the same feature layout and product card tokens. */
.product-integrations-visual { margin: 0; height: 440px; min-width: 0; padding: 40px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: var(--site-media-surface); }
.product-integrations-caption { margin-top: 20px; color: var(--text-secondary); font-size: var(--regel-label-sm-size); line-height: var(--regel-label-sm-line); letter-spacing: var(--regel-label-sm-tracking); font-weight: var(--regel-type-label-weight); }
.product-integrations-tool-track { width: 824px; flex: 0 0 auto; }
.product-integrations-clients { width: 100%; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
:root .product-integrations-client.regel-card { min-width: 0; min-height: 88px; padding: 14px 4px; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; text-align: center; background: var(--regel-surface); border: 1px solid color-mix(in srgb, var(--regel-border) 40%, transparent); border-radius: var(--regel-card-radius); box-shadow: var(--regel-shadow-md); }
.product-integrations-tool-icon { display: block; width: 28px; height: 28px; flex: 0 0 auto; background: var(--text-primary); mask-size: contain; mask-repeat: no-repeat; mask-position: center; }
.product-integrations-client strong { color: var(--text-primary); white-space: nowrap; font-size: var(--regel-label-sm-size); line-height: var(--regel-label-sm-line); letter-spacing: var(--regel-label-sm-tracking); font-weight: var(--regel-type-label-weight); }
.product-integrations-branches { display: block; width: 100%; height: 96px; margin-top: -40px; stroke: var(--text-tertiary); stroke-width: 1; stroke-dasharray: 4 4; }
.product-integrations-connection { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; }
.product-integrations-connection::before { content: ""; width: 2px; height: 24px; background: var(--regel-color-solution, #00bc55); }
.product-integrations-connection > span { position: relative; z-index: 1; display: grid; place-items: center; min-width: 80px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: var(--regel-card-radius); color: var(--text-success); background: linear-gradient(var(--success-bg), var(--success-bg)), var(--site-media-surface); box-shadow: var(--regel-media-shadow); font-size: var(--regel-label-md-size); line-height: var(--regel-label-md-line); letter-spacing: var(--regel-label-md-tracking); font-weight: var(--regel-type-label-weight); }
:root .product-integrations-hybridity.regel-card { width: 240px; flex: 0 0 auto; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 1px solid var(--bg-inverse); border-radius: var(--regel-card-radius); background: var(--bg-inverse); color: var(--text-inverse); box-shadow: var(--regel-shadow-md); }
.product-integrations-brand { display: flex; align-items: center; gap: 8px; }
.product-integrations-logo { display: block; width: 22px; height: 27px; background: currentColor; mask: url('/assets/marketing/hybridity-symbol.svg') center / contain no-repeat; }
.product-integrations-hybridity strong { color: inherit; font-size: var(--regel-subtitle-size); line-height: var(--regel-subtitle-line); font-weight: var(--regel-type-label-weight); }
.product-integrations-hybridity > span { color: color-mix(in srgb, var(--text-inverse) 70%, transparent); font-size: var(--regel-label-sm-size); line-height: var(--regel-label-sm-line); letter-spacing: var(--regel-label-sm-tracking); font-weight: var(--regel-type-label-weight); }
@media (max-width: 599px) {
  .product-integrations-visual { height: 400px; padding-block: 32px; }
}
/* Regulations catalogue: shared line-list treatment and application controls. */
.platform-figma-page > .system-regulations { width: calc(100% + 2 * var(--landing-gutter)); max-width: none; margin-inline: calc(-1 * var(--landing-gutter)); }
.system-regulations { position: relative; isolation: isolate; display: grid; place-items: center; margin-block: 144px; padding: 192px 120px; background: var(--site-media-surface); }
.system-regulations .product-feature-copy { position: relative; z-index: 1; width: 100%; max-width: 640px; padding: 0; text-align: center; }
.system-regulations .product-feature-copy h2 { margin: 0; font-size: var(--regel-display-lg-size); line-height: var(--regel-display-lg-line); letter-spacing: var(--regel-display-lg-tracking); font-weight: var(--regel-type-display-weight); }
.system-regulations .product-feature-copy p { margin: 28px auto 24px; color: var(--text-secondary); font-size: var(--regel-body-lg-size); line-height: var(--regel-body-lg-line); letter-spacing: var(--regel-body-lg-tracking); font-weight: var(--regel-type-body-weight); }
.system-regulations-figure { position: absolute; inset: 0 auto 0 50%; width: min(100%, 900px); margin: 0; transform: translateX(-50%); pointer-events: none; }
.system-regulations-figure img { position: absolute; display: block; width: 56px; height: 56px; object-fit: contain; }
.system-regulations-figure img:nth-child(1) { left: 10%; top: 23%; }
.system-regulations-figure img:nth-child(2) { right: 12%; top: 21%; }
.system-regulations-figure img:nth-child(3) { left: 5%; top: 50%; }
.system-regulations-figure img:nth-child(4) { right: 5%; top: 52%; }
.system-regulations-figure img:nth-child(5) { left: 20%; bottom: 18%; }
.system-regulations-figure img:nth-child(6) { right: 20%; bottom: 16%; }
.system-regulations-figure img:nth-child(7) { left: 26%; top: 13%; }
@media (max-width: 900px) {
  .system-regulations { margin-block: 96px; padding: 168px var(--landing-gutter); }
  .system-regulations .product-feature-copy { max-width: min(600px, calc(100vw - 160px)); }
  .system-regulations-figure img { width: 40px; height: 40px; transform: translateX(-50%); }
  .system-regulations .product-feature-copy h2 { font-size: var(--regel-display-sm-size); line-height: var(--regel-display-sm-line); letter-spacing: var(--regel-display-sm-tracking); }
  .system-regulations-figure img:nth-child(1) { left: 16%; top: 21%; right: auto; bottom: auto; }
  .system-regulations-figure img:nth-child(2) { left: 80%; top: 18%; right: auto; bottom: auto; }
  .system-regulations-figure img:nth-child(3) { left: 7%; top: 45%; right: auto; bottom: auto; }
  .system-regulations-figure img:nth-child(4) { left: 93%; top: 56%; right: auto; bottom: auto; }
  .system-regulations-figure img:nth-child(5) { left: 22%; top: auto; bottom: 17%; }
  .system-regulations-figure img:nth-child(6) { left: 76%; top: auto; right: auto; bottom: 13%; }
  .system-regulations-figure img:nth-child(7) { left: 43%; top: 12%; bottom: auto; }
}
@media (max-width: 599px) {
  .system-regulations { padding-bottom: 184px; }
  .system-regulations .product-feature-copy { max-width: 100%; }
  .system-regulations-figure img:nth-child(1) { left: 20%; top: 94px; }
  .system-regulations-figure img:nth-child(2) { left: 76%; top: 108px; }
  .system-regulations-figure img:nth-child(3) { left: 16%; top: auto; bottom: 116px; }
  .system-regulations-figure img:nth-child(4) { left: 84%; top: auto; bottom: 132px; }
  .system-regulations-figure img:nth-child(5) { left: 34%; bottom: 56px; }
  .system-regulations-figure img:nth-child(6) { left: 66%; bottom: 44px; }
  .system-regulations-figure img:nth-child(7) { left: 46%; top: 50px; }
}
.regulations-page .regulations-hero { margin-bottom: 64px; }
.regulations-index { margin-bottom: 112px; }
.regulations-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Keep shared app control tokens inside the website theme, including portalled menus. */
.regulations-search, .regulations-tools, .regulations-menu { --radius: 0.625rem; --ring: var(--blue-500); }
.regulations-search { width: 320px; max-width: 100%; }
.regulations-tools { display: flex; align-items: center; gap: 8px; position: relative; flex-shrink: 0; }
.regulations-icon-trigger { position: relative; }
.regulations-icon-trigger > svg { width: 16px; height: 16px; }
.regulations-icon-trigger[aria-expanded="true"], .regulations-icon-trigger[data-active="true"] { background: var(--surface-sunken-hover); border-color: var(--border-strong); }
.regulations-filter-count { position: absolute; top: -6px; right: -6px; min-width: 20px; padding: 0 4px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-raised); font-size: 11px; line-height: 16px; }
.regel-menu-positioner:has(.regulations-menu) { z-index: 50; outline: none; }
.regulations-menu { width: 320px; min-width: 240px; max-width: calc(100vw - 24px); max-height: min(526px, var(--available-height, 80vh)); overflow: auto; padding: 8px; border: 1px solid var(--border-default); border-radius: 16px; background: var(--surface-raised); color: var(--text-primary); box-shadow: none; transform-origin: var(--transform-origin); outline: none; }
html[data-site-theme="dark"] .regulations-menu {
  color-scheme: dark;
  --surface-raised: var(--site-regel-dark-surface);
  --surface-default: var(--site-regel-dark-surface);
  --bg-base: var(--site-regel-dark-bg);
  --border-default: var(--site-regel-dark-border);
  --text-primary: var(--white);
  --text-secondary: var(--site-regel-dark-text-secondary);
  --text-tertiary: var(--site-regel-dark-text-tertiary);
  --text-inverse: var(--site-regel-dark-bg);
}
.regulations-menu[data-open] { animation: regulations-menu-in 100ms ease-out; }
.regulations-menu[data-closed] { animation: regulations-menu-out 100ms ease-in; }
@keyframes regulations-menu-in { from { opacity: 0; transform: translateY(-8px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes regulations-menu-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.95); } }
.regulations-menu .dropdown-section-label { color: var(--text-secondary); font-size: var(--regel-label-sm-size); line-height: var(--regel-label-sm-line); font-weight: var(--regel-type-label-weight); letter-spacing: var(--regel-label-sm-tracking); padding: 8px 8px 4px; }
.regulations-menu .dropdown-item { display: flex; gap: 8px; align-items: center; min-height: 38px; padding: 8px; border-radius: 10px; color: var(--text-primary); font-size: 14px; font-weight: 500; line-height: 22px; cursor: pointer; transition: background-color 150ms ease; outline: none; }
.regulations-menu .dropdown-item:is(:hover, :focus-visible, [data-highlighted]) { background: var(--bg-base); }
.regulations-menu .dropdown-item[data-disabled] { opacity: .5; pointer-events: none; }
.regulations-menu .dropdown-item-label { flex: 1; min-width: 0; }
.regulations-menu .dropdown-item-check { width: 16px; height: 16px; flex: 0 0 16px; visibility: hidden; }
.regulations-menu .dropdown-item[data-checked] .dropdown-item-check { visibility: visible; }
.regulations-menu .dropdown-account-separator { height: 1px; margin: 5px 0; background: var(--border-default); }
.regulations-menu-static { display: none; }
@media (prefers-reduced-motion: reduce) { .regulations-menu[data-open], .regulations-menu[data-closed] { animation: none; } }
.regulations-summary { display: flex; justify-content: flex-end; align-items: center; margin-top: 16px; color: var(--text-tertiary); font-size: 13px; }
.regulations-summary:not(:has(button:not([hidden]))) { display: none; }
.regulations-table-wrap { margin-top: 24px; }
.regulations-summary button { color: var(--text-secondary); background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: color 240ms ease; }
.regulations-summary button:hover { color: var(--text-primary); }
.regulations-table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; }
.regulations-table th, .regulations-table td { border-bottom: 1px solid var(--border-default); padding: 14px 16px; vertical-align: middle; font-size: 14px; line-height: 1.5; font-weight: 400; }
.regulations-table thead th { padding-block: 12px; color: var(--text-tertiary); font-size: var(--regel-label-sm-size); line-height: var(--regel-label-sm-line); font-weight: var(--regel-type-label-weight); letter-spacing: var(--regel-label-sm-tracking); }
.regulations-table [data-column="name"] { width: 50%; }
.regulations-table [data-column="type"] { width: 18%; }
.regulations-table [data-column="industries"] { width: 32%; }
.regulations-table td:last-child { padding-right: 48px; }
.regulations-table th button { display: flex; gap: 6px; align-items: center; background: transparent; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: color 240ms ease; }
.regulations-table th button:hover { color: var(--text-primary); }
.regulations-table th svg { width: 16px; height: 16px; flex: none; opacity: 0; transition: opacity 240ms ease, transform 240ms ease; }
.regulations-table th svg[data-active="true"], .regulations-table th button:hover svg { opacity: 1; }
.regulations-table th svg[data-active="true"] { transform: rotate(180deg); }
.regulations-table th svg[data-descending="true"] { transform: none; }
.regulations-table tbody tr { position: relative; }
.regulations-table td { color: var(--text-tertiary); transition: color 240ms ease; }
.regulations-table td:not([data-column="name"]), .regulations-table .regulation-mobile-meta { color: var(--text-secondary); font-size: var(--regel-label-sm-size); line-height: var(--regel-label-sm-line); letter-spacing: var(--regel-label-sm-tracking); font-weight: var(--regel-type-label-weight); }
body:has(#prototype-main) .regulations-table tbody tr:is(:hover, :focus-within) :is(td, .regulation-link, .regulation-full-title, .regulation-mobile-meta) { color: var(--text-primary); }
.regulation-link { display: grid; gap: 0; color: var(--text-primary); text-decoration: none; overflow-wrap: anywhere; }
.regulation-link-out { position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-primary); opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.regulations-table tbody tr:is(:hover, :focus-within) .regulation-link-out { opacity: 1; }
.regulation-link::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.regulation-link:focus-visible { outline: none; }
.regulation-link:focus-visible::after { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.regulation-link > span:first-child { font-size: var(--regel-label-md-size); line-height: var(--regel-label-md-line); letter-spacing: var(--regel-label-md-tracking); font-weight: var(--regel-type-label-weight); }
.regulation-full-title { color: var(--text-tertiary); font-size: var(--regel-label-sm-size); line-height: var(--regel-label-sm-line); font-weight: var(--regel-type-label-weight); letter-spacing: var(--regel-label-sm-tracking); transition: color 240ms ease; }
.regulation-mobile-meta { display: none; }
.regulations-empty { text-align: center; padding: 64px 16px; color: var(--text-secondary); }
.regulations-empty p { margin: 0 0 16px; font-size: var(--regel-label-lg-size); line-height: var(--regel-label-lg-line); letter-spacing: var(--regel-label-lg-tracking); font-weight: var(--regel-type-label-weight); color: var(--text-secondary); }

.regulations-table tfoot .regulations-contact-cell { padding: 0; border-bottom: 0; }
.regulations-contact-row { display: grid; grid-template-columns: 50fr 18fr 32fr; align-items: center; row-gap: 12px; padding: 24px 0; color: var(--text-secondary); text-decoration: none; font-size: var(--regel-label-md-size); line-height: var(--regel-label-md-line); letter-spacing: var(--regel-label-md-tracking); font-weight: var(--regel-type-label-weight); transition: color 240ms ease; }
.regulations-contact-row > span { padding-inline: 16px; }
.regulations-contact-row > span:first-child { grid-column: 1 / -2; transition: color 240ms ease; }
.regulations-contact-row > span:last-child { grid-column: -2 / -1; }
.regulations-contact-row a { color: var(--text-link); text-decoration: none; transition: color 240ms ease; }
.regulations-contact-row a:is(:hover, :focus-visible) { color: var(--text-link-hover); text-decoration: none; }
@media (min-width: 601px) {
.regulations-table:not(:has(th[data-column="type"])) .regulations-contact-row { grid-template-columns: 50fr 32fr; }
.regulations-table:not(:has(th[data-column="industries"])) .regulations-contact-row { grid-template-columns: 50fr 18fr; }
.regulations-table:not(:has(th[data-column="type"], th[data-column="industries"])) .regulations-contact-row { grid-template-columns: 1fr; }
.regulations-table:not(:has(th[data-column="type"], th[data-column="industries"])) .regulations-contact-row > span { grid-column: 1; }
}
.regulations-contact-row a:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 4px; }
.regulations-empty-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 600px) {
  .regulations-table .regulations-contact-row { grid-template-columns: 1fr; }
  .regulations-table .regulations-contact-row > span { grid-column: 1; }
  .regulations-page .regulations-hero { margin-bottom: 40px; }
  .regulations-toolbar { flex-wrap: wrap; gap: 12px; }
  .regulations-search { width: 100%; }
  .regulations-tools { margin-left: auto; }
  .regulations-table [data-column="type"] { display: none; }
  .regulations-table [data-column="name"] { width: 62%; }
  .regulations-table [data-column="industries"] { width: 38%; }
  .regulations-table th, .regulations-table td { padding-right: 16px; font-size: 13px; }
  .regulations-table tr:not(:has(td[data-column="industries"])) td[data-column="name"] { padding-right: 48px; }
  .regulation-mobile-meta { display: block; margin-top: 8px; font-size: 12px; }
  .regulations-index { margin-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .regulations-index *, .regulations-menu * { transition: none !important; }
}
.regulations-page .product-figma-lockup { margin-bottom: 0; }
.regulations-page > .regulations-index { margin-top: 0; }