@media (max-width: 600px) {
  #prototype-main .platform-hero h1 { text-wrap: wrap; }
  .platform-hero h1 .prototype-heading-ending { display: inline; }
}
.product-figma-page > .product-showcase-hero { margin-top: 0; }
.product-showcase svg[data-regel-icon="BrandStatusFound"] { color: var(--regel-color-problem, var(--regel-hero-problem)); }
.product-showcase svg[data-regel-icon="BrandStatusClosed"] { color: var(--text-success); }
.product-showcase-hero .product-figma-lockup { margin-bottom: 64px; }
.prototype-hero-copy { min-width: 0; grid-column: 8 / -1; display: flex; align-items: flex-start; flex-direction: column; gap: 24px; padding-top: 0; }
.prototype-hero-copy p { margin: 0; }
.product-showcase-hero .product-figma-nav { justify-content: center; margin-top: 32px; }
.product-showcase { --product-card-surface: var(--regel-surface); position: relative; margin: 0; background: var(--site-media-surface); border-radius: var(--regel-media-frame-radius); overflow: hidden; isolation: isolate; color: var(--text-primary); }
.product-showcase-canvas { position: relative; border-radius: inherit; width: 100%; height: 440px; display: flex; align-items: center; justify-content: center; padding: 40px; }
.product-showcase .product-ui-card { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 32px; background: var(--regel-surface); color: var(--text-primary); 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-showcase p { margin: 0; }
.product-showcase .product-ui-title { font-size: var(--regel-heading-md-size); line-height: var(--regel-heading-md-line); letter-spacing: var(--regel-heading-md-tracking); font-weight: var(--regel-type-heading-weight); }
.product-ui-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--border-default); font-size: var(--regel-label-md-size); line-height: var(--regel-label-md-line); font-weight: var(--regel-type-label-weight); letter-spacing: var(--regel-label-md-tracking); }
.product-ui-heading > span { display: inline-flex; align-items: center; gap: 10px; }
.product-ui-heading svg { width: 20px; height: 20px; color: var(--text-secondary); }
.product-showcase .product-ui-tag { display: inline-flex; flex-shrink: 0; width: fit-content; align-items: center; gap: 6px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--bg-base); 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); padding: 4px 9px; white-space: nowrap; letter-spacing: var(--regel-label-sm-tracking); }
.product-showcase .product-ui-tag[data-status="problem"] { color: var(--regel-color-problem, var(--regel-hero-problem)); }
.product-showcase .product-ui-tag svg[data-regel-owner="StatusIcon"] { color: inherit; }
.product-showcase .product-ui-tag[data-status="solution"] { color: var(--text-success); }
.product-ui-status { display: inline-flex; }
.product-showcase .product-ui-status svg { width: 14px; height: 14px; }
.product-showcase .product-ui-tag > svg { width: 14px; height: 14px; }
.product-ui-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.product-ui-pdf { flex: 0 0 auto; width: 20px; height: 26px; }
.product-ui-pdf-large { width: 44px; height: 56px; }
.product-ui-file-icon { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.product-ui-lines { display: flex; flex-direction: column; gap: 10px; }
.product-ui-lines i { display: block; height: 5px; border-radius: 4px; background: var(--border-default); }
.product-ui-lines i:nth-child(2) { width: 84%; }
.product-ui-lines i:nth-child(3) { width: 61%; }
.product-ui-assignment { display: flex; align-items: center; justify-content: space-between; gap: 16px; 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); }
.product-ui-assignment > span:first-child, .product-ui-collection > span, .product-ui-eyebrow { 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-ui-person { display: inline-flex; gap: 8px; align-items: center; 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); }
.product-ui-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--text-secondary); background: var(--surface-sunken); font-size: 12px; }
.product-ui-collection { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border-default); }
.product-ui-collection > div { display: flex; gap: 10px; align-items: center; }
.product-ui-collection strong { font-size: var(--regel-label-md-size); font-weight: var(--regel-type-label-weight); line-height: var(--regel-label-md-line); letter-spacing: var(--regel-label-md-tracking); }
.product-showcase .product-ui-control { width: 370px; transform: none; }
.product-showcase .product-ui-assessment { width: 360px; transform: none; }
.product-showcase-evidence .product-ui-card { box-shadow: var(--regel-shadow-md); }
.product-ui-score { display: flex; align-items: center; gap: 20px; }
.product-ui-score > strong { font-size: 64px; letter-spacing: -3px; font-weight: 500; line-height: 1; }
.product-ui-score strong span { color: var(--text-tertiary); }
.product-ui-score > span { max-width: 92px; font-size: var(--regel-body-md-size); line-height: var(--regel-body-md-line); color: var(--text-secondary); letter-spacing: var(--regel-body-md-tracking); font-weight: var(--regel-type-body-weight); }
.product-ui-checks { display: flex; flex-direction: column; gap: 16px; }
.product-ui-checks p { display: flex; align-items: center; gap: 10px; font-size: var(--regel-body-md-size); line-height: var(--regel-body-md-line); letter-spacing: var(--regel-body-md-tracking); font-weight: var(--regel-type-body-weight); }
.product-ui-checks svg { width: 16px; height: 16px; flex: 0 0 auto; }
.product-showcase-hero > .product-showcase-canvas { height: 600px; max-width: 1120px; margin-inline: auto; padding: 0; }
.product-showcase-hero .product-hero-source { position: absolute; width: 260px; left: 6%; top: 78px; transform: none; padding: 32px; gap: 32px; }
.product-showcase-hero .product-ui-control { position: absolute; width: 380px; left: 31%; top: 64px; z-index: 1; transform: none; padding: 32px; }
.product-showcase-hero .product-ui-control .product-ui-title { font-size: var(--regel-heading-lg-size); line-height: var(--regel-heading-lg-line); letter-spacing: var(--regel-heading-lg-tracking); font-weight: var(--regel-type-heading-weight); }
.product-showcase-hero .product-ui-assessment { position: absolute; width: 330px; right: 4%; top: 174px; z-index: 2; transform: none; }
.product-hero-file { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; left: 17%; bottom: 62px; padding: 16px 20px; border-radius: var(--regel-card-radius); background: var(--regel-surface); border: 1px solid color-mix(in srgb, var(--regel-border) 40%, transparent); box-shadow: var(--regel-shadow-md); transform: 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); }
.product-showcase-hero > figcaption { position: absolute; bottom: 20px; right: 24px; font-size: var(--regel-label-sm-size); color: var(--text-secondary); line-height: var(--regel-label-sm-line); letter-spacing: var(--regel-label-sm-tracking); font-weight: var(--regel-type-label-weight); }
.product-features { display: flex; flex-direction: column; gap: 144px; }
.product-feature-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 48px; scroll-margin-top: 96px; }
.product-feature-row-reversed > .product-feature-copy { order: 2; }
.product-feature-copy { min-width: 0; padding-inline: 48px; }
.product-feature-copy .product-feature-badge { display: inline-flex; width: max-content; align-items: center; height: auto; padding: 4px 12px; margin-bottom: 24px; border: 0; border-radius: 24px; background: var(--bg-subtle); 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); }
.product-feature-copy :is(h2, h3) { margin: 0 0 24px; font-size: var(--regel-display-sm-size); line-height: var(--regel-display-sm-line); letter-spacing: var(--regel-display-sm-tracking); font-weight: var(--regel-type-display-weight); }
.product-feature-copy p { margin: 0; max-width: 55ch; }
.product-app-crop { position: relative; min-width: 0; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--regel-media-frame-radius); background: var(--site-media-surface); container: product-app / inline-size; }
.product-app-crop-window { position: absolute; inset: 40px 0 0 32px; overflow: hidden; border-top-left-radius: 16px; background: var(--bg-base); box-shadow: var(--regel-shadow-md); }
.product-app-crop iframe { position: absolute; width: 1000px; height: 820px; max-width: none; border: 0; pointer-events: none; transform: scale(1.2); transform-origin: top left; left: -96px; top: -48px; }
.product-app-crop-controls { width: 100%; min-height: 280px; }
.product-app-crop-controls .product-app-crop-window { inset: 0; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.product-app-crop-controls iframe { width: calc(100% + 32px); height: 100%; left: -16px; top: 0; transform: none; background: var(--site-media-surface); color-scheme: inherit; }
.product-app-crop-evidence { width: 100%; min-height: 600px; }
.product-app-crop-evidence .product-app-crop-window { inset: 0; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.product-app-crop-evidence iframe { width: calc(100% + 32px); height: 100%; left: -16px; top: 0; transform: none; background: var(--site-media-surface); color-scheme: inherit; }
@media (max-width: 600px) { .product-app-crop-evidence { min-height: 700px; } }
@container product-app (max-width: 519px) {
  .product-app-crop-window { inset: 24px 0 0 20px; }
}
/* Unsorted source files become a single, reviewable Rulebook. */
.product-showcase-sources { width: 100%; }
.product-document-flow { position: relative; width: 100%; max-width: 540px; height: 432px; }
.product-document-batch { position: absolute; top: 0; left: 0; width: 264px; display: flex; flex-direction: column; gap: 8px; }
.product-document-batch .product-document-file { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 252px; min-height: 40px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--regel-border) 40%, transparent); border-radius: 8px; background: var(--regel-surface); box-shadow: var(--regel-shadow-md); font-size: var(--regel-label-sm-size); line-height: var(--regel-label-sm-line); color: var(--text-secondary); letter-spacing: var(--regel-label-sm-tracking); font-weight: var(--regel-type-label-weight); }
.product-document-file:nth-child(3n + 2) { margin-left: 16px; }
.product-document-file:nth-child(3n) { margin-left: 6px; }
.product-document-file:nth-child(5) { margin-left: 24px; }
.product-document-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-document-file .product-ui-pdf { width: 16px; height: 20px; }
.product-document-file > svg { width: 16px; height: 20px; flex: 0 0 auto; color: var(--text-tertiary); }
.product-showcase .product-document-rulebook { background: var(--regel-surface); position: absolute; left: 176px; top: 36px; width: 480px; padding: 32px; gap: 20px; 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-document-rulebook-heading { display: flex; flex-direction: column; gap: 4px; }
.product-document-rulebook-heading p { font-size: var(--regel-heading-sm-size); line-height: var(--regel-heading-sm-line); font-weight: var(--regel-type-heading-weight); letter-spacing: var(--regel-heading-sm-tracking); }
.product-document-rulebook-heading > span { font-variant-numeric: proportional-nums; color: var(--text-tertiary); font-size: var(--regel-label-sm-size); line-height: var(--regel-label-sm-line); letter-spacing: 0; font-weight: var(--regel-type-label-weight); }
.product-document-rules { display: flex; flex-direction: column; }
.product-document-rule-columns, .product-document-rule { display: grid; grid-template-columns: 264px 1fr; gap: 24px; }
.product-document-rule-columns { padding-bottom: 10px; color: var(--text-tertiary); 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-document-rule { padding: 10px 0; border-top: 1px solid var(--border-default); }
.product-document-rule:last-child { padding-bottom: 0; }
.product-document-rule-copy, .product-document-rule-source { display: flex; flex-direction: column; gap: 4px; }
.product-document-rule strong { 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); }
.product-document-rule-copy > span, .product-document-rule-source { font-size: var(--regel-body-sm-size); line-height: var(--regel-body-sm-line); color: var(--text-tertiary); letter-spacing: var(--regel-body-sm-tracking); font-weight: var(--regel-type-body-weight); }
.product-document-rule-source > span:first-child { color: var(--text-secondary); }
html[data-site-theme="dark"] .product-document-rule-source .product-ui-tag { background: color-mix(in srgb, var(--text-primary) 8%, var(--bg-overlay)); }
.product-document-rule-source .product-ui-tag { max-width: 100%; height: 24px; min-height: 24px; padding-block: 0; white-space: normal; text-align: left; justify-content: flex-start; }
.product-showcase-rulebook { width: 100%; min-height: 384px; }
.product-showcase .product-rule-card { background: var(--regel-surface); width: calc(100% - 64px); max-width: 440px; padding: 32px; gap: 16px; 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-rule-card-heading { display: flex; flex-direction: column; gap: 4px; }
.product-rule-card-heading > span { color: var(--text-tertiary); font-size: var(--regel-body-sm-size); line-height: var(--regel-body-sm-line); letter-spacing: var(--regel-body-sm-tracking); font-weight: var(--regel-type-body-weight); }
.product-rule-card-field { display: flex; flex-direction: column; gap: 8px; }
.product-rule-card-field > span { font-size: var(--regel-body-sm-size); line-height: var(--regel-body-sm-line); color: var(--text-secondary); letter-spacing: var(--regel-body-sm-tracking); font-weight: var(--regel-type-body-weight); }
.product-rule-card-field p { font-size: var(--regel-body-md-size); line-height: var(--regel-body-md-line); letter-spacing: var(--regel-body-md-tracking); font-weight: var(--regel-type-body-weight); }
.product-rule-card-field mark { color: var(--info-text); background: var(--info-bg); border-radius: 4px; padding-block: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.product-rule-card-field .product-rule-suggestion { padding: 12px; border-radius: 12px; background: var(--info-bg); color: var(--info-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info-text) 35%, transparent); }
.product-showcase-rulebook .product-rule-card-field .product-rule-suggestion { background: var(--success-bg); color: var(--success-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success-text) 35%, transparent); }

.product-ui-description { font-size: var(--regel-body-md-size); line-height: var(--regel-body-md-line); color: var(--text-secondary); max-width: 230px; letter-spacing: var(--regel-body-md-tracking); font-weight: var(--regel-type-body-weight); }
.product-showcase-change { width: 100%; min-height: 360px; }
.product-work-queue { position: absolute; top: 50%; transform: translateY(calc(-50% + var(--work-queue-parallax-y, 0px))); display: flex; flex-direction: column; width: calc(100% - 64px); max-width: 480px; gap: 8px; }
.product-showcase .product-work-item { background: var(--regel-surface); flex-direction: row; align-items: center; gap: 12px; padding: 24px; border: 1px solid color-mix(in srgb, var(--regel-border) 40%, transparent); border-radius: var(--regel-card-radius); box-shadow: var(--regel-shadow-md); }
@media (prefers-reduced-motion: reduce) { .product-work-queue { transform: translateY(-50%); } }
html[data-site-theme="dark"] .product-work-queue .product-ui-work-icon { background: var(--bg-overlay); }
.product-ui-work-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: var(--site-media-surface); }
.product-ui-work-icon > svg { width: 22px; height: 22px; color: var(--text-secondary); }
.product-work-item > div { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.product-work-item > div > span { font-size: var(--regel-body-sm-size); line-height: var(--regel-body-sm-line); color: var(--text-tertiary); letter-spacing: var(--regel-body-sm-tracking); font-weight: var(--regel-type-body-weight); }
.product-work-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--regel-label-md-size); line-height: var(--regel-label-md-line); font-weight: var(--regel-type-label-weight); letter-spacing: var(--regel-label-md-tracking); }
@media (max-width: 1023px) {
  .product-feature-copy { padding-inline: 16px; }
  .product-feature-copy :is(h2, h3) { font-size: var(--regel-heading-lg-size); line-height: var(--regel-heading-lg-line); letter-spacing: var(--regel-heading-lg-tracking); font-weight: var(--regel-type-heading-weight); }
}
@media (max-width: 800px) {
  .product-features { gap: 80px; }
  .product-feature-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .product-feature-row-reversed > .product-feature-copy { order: 0; }
  .product-feature-copy { padding-inline: 0; }
  .product-feature-copy .product-feature-badge { margin-bottom: 16px; }
  .product-feature-copy :is(h2, h3) { margin-bottom: 16px; }
}
@media (max-width: 599px) {
  .product-showcase-hero .product-figma-lockup { margin-bottom: 40px; }
  .product-showcase-hero .product-figma-nav { justify-content: flex-start; }
}
/* Each illustration keeps its ratio and native card sizes at every viewport. */
.product-showcase { aspect-ratio: 4 / 3; container: product-art / inline-size; }
figure.product-showcase-hero { aspect-ratio: 16 / 9; container-name: product-hero; }
.product-showcase-canvas, .product-showcase-hero > .product-showcase-canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; }
.product-showcase .product-ui-card { flex-shrink: 0; }
.product-showcase .product-ui-control { height: 396px; }
.product-showcase .product-ui-assessment { height: 360px; }
.product-showcase-hero .product-hero-source { top: calc(50% - 220px); left: calc(50% - 470px); }
.product-showcase-hero .product-ui-control { top: calc(50% - 240px); left: calc(50% - 205px); }
.product-showcase-hero .product-ui-control .product-ui-title { font-size: var(--regel-heading-md-size); line-height: var(--regel-heading-md-line); letter-spacing: var(--regel-heading-md-tracking); font-weight: var(--regel-type-heading-weight); }
.product-showcase-hero .product-ui-assessment { top: calc(50% - 130px); left: calc(50% + 195px); right: auto; }
.product-showcase-hero .product-hero-file { top: calc(50% + 190px); bottom: auto; left: calc(50% - 335px); }
.product-hero-review { display: none; }
@container product-hero (max-width: 1099px) {
  .product-showcase-hero .product-hero-source { left: calc(50% - 435px); top: calc(50% - 175px); }
  .product-showcase-hero .product-ui-control { left: calc(50% - 230px); top: calc(50% - 205px); }
  .product-showcase-hero .product-ui-assessment { left: calc(50% + 115px); top: calc(50% - 115px); }
  .product-showcase-hero .product-hero-file { display: none; }
}
@container product-hero (max-width: 799px) {
  .product-showcase-hero .product-hero-source { display: none; }
  .product-showcase-hero .product-ui-control { left: 32px; top: 32px; }
  .product-showcase-hero .product-ui-assessment { left: calc(100% - 330px); top: 130px; }
  .product-showcase-hero > figcaption { display: none; }
}
@container product-hero (max-width: 599px) {
  .product-showcase-hero .product-ui-control { left: 24px; top: -52px; }
  .product-showcase-hero .product-ui-assessment { display: none; }
  .product-showcase-hero .product-ui-control > :is(.product-ui-tags, .product-ui-assignment, .product-ui-collection) { visibility: hidden; }
  .product-hero-review { position: absolute; display: flex; align-items: center; gap: 8px; bottom: 20px; left: 32px; width: 248px; height: 44px; padding: 12px; border: 1px solid color-mix(in srgb, var(--regel-border) 40%, transparent); background: var(--regel-surface); border-radius: var(--regel-card-radius); box-shadow: var(--regel-shadow-md); font-size: var(--regel-body-sm-size); z-index: 2; transform: none; line-height: var(--regel-body-sm-line); letter-spacing: var(--regel-body-sm-tracking); font-weight: var(--regel-type-body-weight); }
  .product-hero-review svg { width: 16px; height: 16px; color: var(--text-secondary); }
}
@container product-hero (max-width: 359px) {
  .product-showcase-hero .product-ui-control { left: 12px; top: -76px; }
  .product-hero-review { left: 16px; bottom: 12px; }
}
/* Compact tiles select a detail from the same native-size UI. */
@container product-art (max-width: 399px) {
  .product-showcase .product-rule-card { width: calc(100% - 32px); padding: 24px; }
  .product-showcase-controls .product-ui-control { position: absolute; top: 16px; left: 16px; }
  .product-showcase-controls .product-ui-heading, .product-showcase-controls .product-ui-assignment { width: 224px; }
  .product-showcase-controls .product-ui-tags { display: none; }
  .product-showcase-controls .product-ui-collection { visibility: hidden; }
  .product-showcase-evidence .product-ui-assessment { position: absolute; top: 16px; left: 16px; gap: 16px; }
  .product-showcase-evidence .product-ui-checks p:not(:last-child) { display: none; }
  .product-showcase-evidence .product-ui-assessment > .product-ui-tags { display: none; }
  .product-work-queue { width: calc(100% - 32px); }
  .product-showcase .product-work-item { padding: 20px; }
}
@container product-art (max-width: 319px) {
  .product-showcase-controls .product-ui-control { top: -40px; left: 8px; }
  .product-showcase-evidence .product-ui-assessment { top: -14px; left: 8px; }
}
/* Keep both source and organised states visible without scaling the type. */
figure.product-showcase-sources { aspect-ratio: auto; }
.product-showcase-sources > .product-showcase-canvas { position: relative; inset: auto; height: auto; padding: 40px 24px; }
@container product-art (max-width: 479px) {
  .product-showcase-sources > .product-showcase-canvas { padding: 24px 16px; }
  .product-document-flow { height: auto; min-height: 432px; padding-bottom: 48px; }
  .product-showcase .product-document-rulebook { position: relative; left: 96px; top: 48px; width: 480px; padding: 24px; }
  .product-document-rule-columns, .product-document-rule { grid-template-columns: min(264px, calc(100cqw - 160px)) 1fr; }
}
/* One gap detail keeps the finding and draft amendment together. */
figure.product-showcase-gaps { aspect-ratio: auto; }
.product-showcase-gaps > .product-showcase-canvas { position: relative; inset: auto; height: auto; padding: 40px 32px; }
.product-showcase .product-gap-review { width: 100%; max-width: 480px; padding: 40px; gap: 20px; border: 1px solid color-mix(in srgb, var(--regel-border) 40%, transparent); border-radius: var(--regel-card-radius); background: var(--regel-surface); box-shadow: var(--regel-shadow-md); }
.product-gap-review-meta, .product-gap-review-proposal { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.product-gap-review-meta > span, .product-gap-review-section > span, .product-gap-review-proposal > span { color: var(--text-tertiary); 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-gap-review-title { font-size: var(--regel-heading-sm-size); line-height: var(--regel-heading-sm-line); font-weight: var(--regel-type-heading-weight); letter-spacing: var(--regel-heading-sm-tracking); }
.product-gap-review-section { display: flex; flex-direction: column; gap: 8px; }
.product-gap-review-section > p { font-size: var(--regel-body-md-size); line-height: var(--regel-body-md-line); letter-spacing: var(--regel-body-md-tracking); font-weight: var(--regel-type-body-weight); }
:root .product-gap-review-proposal .report-cover-badge[data-status="guessing"] { color: var(--info-text); background: var(--info-bg); }
.product-gap-review-amendment { border-top: 1px solid var(--border-default); padding-top: 20px; }
.product-gap-review-amendment > p { padding: 16px; border-radius: 8px; background: var(--site-media-surface); }
@container product-art (max-width: 479px) {
  .product-showcase-gaps > .product-showcase-canvas { padding: 24px 16px; }
  .product-showcase .product-gap-review { padding: 24px; }
}
/* Product feature illustrations share a compact frame and crop long content. */
.product-features > .product-feature-row > :is(.product-showcase, .product-app-crop) { height: 440px; min-height: 0; aspect-ratio: auto; }
.product-features > .product-feature-row > .product-showcase > .product-showcase-canvas { position: absolute; inset: 0; height: 100%; align-items: flex-start; padding: 32px; }
@media (max-width: 800px) {
  .product-features > .product-feature-row > :is(.product-showcase, .product-app-crop) { height: 360px; }
  .product-features > .product-feature-row > .product-showcase > .product-showcase-canvas { padding: 24px 16px; }
}
.product-rule-approve { align-self: flex-end; pointer-events: none; margin-top: 4px; }
.product-features > #rulebook > .product-showcase-rulebook { height: auto; min-height: 440px; }
.product-features > #rulebook > .product-showcase-rulebook > .product-showcase-canvas { position: relative; inset: auto; height: auto; min-height: 440px; align-items: center; }
.product-showcase-rulebook .product-rule-card { width: 100%; max-width: 440px; }
.product-features > :is(#rulebook, #gaps) > .product-showcase > .product-showcase-canvas { padding-inline: 32px; }
.product-features > :is(#rulebook, #gaps) .product-ui-card { width: 100%; max-width: 440px; }
.product-features > :is(#controls, #evidence) .product-app-crop-window { inset-inline: 32px; }
@media (max-width: 800px) {
  .product-features > :is(#rulebook, #gaps) > .product-showcase > .product-showcase-canvas { padding-inline: 16px; }
  .product-features > :is(#controls, #evidence) .product-app-crop-window { inset-inline: 16px; }
}
.product-features > #evidence .product-app-crop iframe { height: 700px; }
/* The document intake scene spans the product grid, with a Rulebook above its sources. */
.product-features > #sources { grid-template-columns: minmax(0, 1fr); gap: 24px; }
#sources > .product-feature-copy { max-width: 760px; padding-inline: 0; margin-inline: auto; text-align: center; }
#sources > .product-feature-copy p { max-width: none; }
.product-features > #sources > .product-showcase-sources { height: 620px; }
.product-features > #sources > .product-showcase-sources > .product-showcase-canvas,
.product-showcase-sources > .product-showcase-canvas { position: absolute; inset: 0; padding: 0; height: 100%; }
figure.product-showcase-sources { aspect-ratio: 16 / 9; min-height: 540px; background: transparent; border-radius: 0; overflow: visible; }
.product-showcase-sources .product-document-flow { width: 100%; max-width: none; height: 100%; min-height: 0; padding: 0; }
.product-showcase-sources .product-document-batch { position: absolute; inset: 80px 0; width: auto; display: block; transform: translate3d(0, var(--documents-parallax-y, 0px), 0); }
@media (prefers-reduced-motion: reduce) { .product-showcase-sources .product-document-batch { transform: none; } }
/* Mix original document previews with the bespoke file-type artwork. */
.product-showcase-sources .product-document-file { position: absolute; left: var(--file-x); top: var(--file-y); width: 150px; min-width: 0; min-height: 0; margin: 0; padding: 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; background: transparent; border: 0; box-shadow: none; font-size: 12px; line-height: 18px; opacity: .9; transform: translate(-50%, -50%) rotate(var(--file-angle)) scale(.85); }
.product-showcase-sources .product-document-file > .product-ui-file-icon { width: 40px; height: 40px; object-fit: contain; }
.product-showcase-sources .product-document-file > .product-ui-document-preview { width: 84px; height: 72px; object-fit: contain; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 10%)); }
.product-showcase-sources .product-document-file > span { width: 100%; min-width: 0; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; text-align: center; }
/* A sparse, irregular cloud; avoid aligned rows or a rectangular perimeter. */
.product-showcase-sources .product-document-file:nth-child(1) { --file-x: 3%; --file-y: 18%; --file-angle: -7deg; }
.product-showcase-sources .product-document-file:nth-child(2) { --file-x: 19%; --file-y: -2%; --file-angle: 4deg; }
.product-showcase-sources .product-document-file:nth-child(3) { --file-x: 35%; --file-y: 9%; --file-angle: -3deg; }
.product-showcase-sources .product-document-file:nth-child(4) { --file-x: 59%; --file-y: -5%; --file-angle: 8deg; }
.product-showcase-sources .product-document-file:nth-child(5) { --file-x: 78%; --file-y: 12%; --file-angle: -5deg; }
.product-showcase-sources .product-document-file:nth-child(6) { --file-x: 96%; --file-y: 1%; --file-angle: 3deg; }
.product-showcase-sources .product-document-file:nth-child(7) { --file-x: 10%; --file-y: 43%; --file-angle: 6deg; }
.product-showcase-sources .product-document-file:nth-child(8) { --file-x: 21%; --file-y: 56%; --file-angle: -8deg; }
.product-showcase-sources .product-document-file:nth-child(9) { --file-x: 88%; --file-y: 35%; --file-angle: 4deg; }
.product-showcase-sources .product-document-file:nth-child(10) { --file-x: 97%; --file-y: 57%; --file-angle: -9deg; }
.product-showcase-sources .product-document-file:nth-child(11) { --file-x: 4%; --file-y: 77%; --file-angle: -4deg; }
.product-showcase-sources .product-document-file:nth-child(12) { --file-x: 16%; --file-y: 98%; --file-angle: 5deg; }
.product-showcase-sources .product-document-file:nth-child(13) { --file-x: 33%; --file-y: 89%; --file-angle: -7deg; }
.product-showcase-sources .product-document-file:nth-child(14) { --file-x: 46%; --file-y: 111%; --file-angle: 7deg; }
.product-showcase-sources .product-document-file:nth-child(15) { --file-x: 64%; --file-y: 96%; --file-angle: -4deg; }
.product-showcase-sources .product-document-file:nth-child(16) { --file-x: 81%; --file-y: 108%; --file-angle: 3deg; }
.product-showcase-sources .product-document-file:nth-child(17) { --file-x: 92%; --file-y: 85%; --file-angle: -6deg; }
.product-showcase-sources .product-document-file:nth-child(18) { --file-x: 70%; --file-y: 55%; --file-angle: 6deg; }
.product-showcase-sources .product-document-file:nth-child(19) { --file-x: 43%; --file-y: 39%; --file-angle: -3deg; }
.product-showcase-sources .product-document-file:nth-child(20) { --file-x: 56%; --file-y: 73%; --file-angle: 8deg; }
.product-showcase-sources .product-document-file::after { content: none; }
.product-showcase-sources .product-document-rulebook { z-index: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100% - 64px)); padding: 32px; background: var(--site-media-surface); border: 0; box-shadow: var(--regel-media-shadow); }
.product-showcase-sources .product-document-rule-columns,
.product-showcase-sources .product-document-rule { grid-template-columns: minmax(0, 1fr) 248px; gap: 24px; }
.product-showcase-sources .product-document-rule { position: relative; isolation: isolate; opacity: 1; transform: none; }
.product-showcase-sources .product-document-rule strong > span { padding: 2px 3px; margin-inline: -3px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: var(--success-bg); }
.product-showcase-sources .product-document-rule-source { flex-direction: row; align-items: flex-start; gap: 8px; }
:root .product-showcase-sources .product-document-rule-source .product-ui-tag { background: var(--surface-sunken); border-color: transparent; white-space: nowrap; }
.product-showcase-sources .product-document-rule strong { color: var(--text-success); }
@container product-art (min-width: 700px) and (max-width: 1023px) {
  .product-showcase-sources .product-document-file { left: clamp(70px, var(--file-x), calc(100% - 70px)); }
}
@container product-art (max-width: 699px) {
  .product-showcase-sources .product-document-batch { width: auto; inset: 48px 48px; }
  .product-showcase-sources .product-document-file { display: none; }
  .product-showcase-sources .product-document-file:is(:nth-child(2), :nth-child(4), :nth-child(13), :nth-child(16)) { display: flex; }
  .product-showcase-sources .product-document-file:nth-child(2) { --file-x: 18%; --file-y: -1%; }
  .product-showcase-sources .product-document-file:nth-child(4) { --file-x: 78%; --file-y: 5%; }
  .product-showcase-sources .product-document-file:nth-child(13) { --file-x: 24%; --file-y: 99%; }
  .product-showcase-sources .product-document-file:nth-child(16) { --file-x: 83%; --file-y: 106%; }
  .product-showcase-sources .product-document-rulebook { width: calc(100% - 32px); padding: 24px; }
  .product-showcase-sources .product-document-rule-columns,
  .product-showcase-sources .product-document-rule { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .product-showcase-sources .product-document-rule-columns > span:nth-child(2) { display: none; }
  .product-showcase-sources .product-document-rule-source { grid-column: 1 / -1; grid-row: 2; }
}
@container product-art (max-width: 349px) {
  .product-showcase-sources .product-document-rulebook { width: calc(100% - 16px); padding: 16px; }
  .product-showcase-sources .product-document-rule-columns,
  .product-showcase-sources .product-document-rule { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 599px) {
  .product-features > #sources { gap: 24px; }
  .product-features > #sources > .product-showcase-sources { height: 660px; }
}
/* Landing accordion uses the Product page illustrations at their native card sizes. */
.figma-product .figma-feature-image { padding: 0; }
.figma-product .figma-feature-image .product-showcase { width: 100%; min-height: 0; aspect-ratio: auto; border-radius: 0; }
.figma-product .figma-feature-image .product-showcase-canvas { position: relative; inset: auto; height: auto; min-height: 480px; padding: 24px 32px; }
@media (max-width: 800px) {
  .figma-product .figma-feature-inline-image { aspect-ratio: auto; padding: 0; }
  .figma-product .figma-feature-inline-image .product-showcase-canvas { min-height: 440px; padding: 24px 16px; }
  .figma-product .figma-feature-inline-image .product-ui-control,
  .figma-product .figma-feature-inline-image .product-ui-assessment { position: relative; top: auto; left: auto; width: 100%; height: auto; }
  .figma-product .figma-feature-inline-image .product-ui-heading,
  .figma-product .figma-feature-inline-image .product-ui-assignment { width: auto; }
  .figma-product .figma-feature-inline-image .product-ui-tags { display: flex; flex-wrap: wrap; }
  .figma-product .figma-feature-inline-image .product-ui-collection { visibility: visible; }
  .figma-product .figma-feature-inline-image .product-ui-checks p { display: flex; }
  .figma-product .figma-feature-inline-image .product-rule-card { width: 100%; }
}