/* Product demonstrations consume SDS 1.2.0 tokens without overrides. */
.product-hero { padding-block: var(--sds-space-12) var(--sds-space-16); }
.product-hero-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: var(--sds-space-12); align-items: center; }
.product-intro { min-width: 0; }
.product-endorsement { display: block; width: var(--sds-layout-rail); max-width: 100%; margin-block-end: var(--sds-space-8); }
.product-endorsement img { display: block; width: 100%; height: auto; }
.product-endorsement .logo-on-dark { display: none; }
[data-sds-theme="dark"] .product-endorsement .logo-on-light { display: none; }
[data-sds-theme="dark"] .product-endorsement .logo-on-dark { display: block; }
.product-intro h1 { margin-block: var(--sds-space-3) var(--sds-space-5); }
.product-intro .hero-sub { font-size: var(--sds-type-body-size); line-height: var(--sds-type-body-line); color: var(--sds-color-sub); margin-block-end: var(--sds-space-6); }
.product-intro .hero-trust { display: grid; gap: var(--sds-space-2); margin-block-start: var(--sds-space-6); }
.product-intro .hero-trust a, .product-access-note a { display: inline-flex; align-items: center; min-height: var(--sds-control-height); }
.product-access-note { margin-block-start: var(--sds-space-4); color: var(--sds-color-sub); }
.product-context { color: var(--sds-color-sub); font-size: var(--sds-type-body-size); line-height: var(--sds-type-body-line); }
.product-section-head { max-width: var(--sds-layout-form-max); margin-block-end: var(--sds-space-8); }
.product-section-head h2 { margin-block: var(--sds-space-2) var(--sds-space-4); }
.product-section-head p:last-child { color: var(--sds-color-sub); }
.product-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-6); }
.product-feature { padding: var(--sds-panel-padding); background: var(--sds-color-surface); border: var(--sds-border-thin) solid var(--sds-color-border); border-radius: var(--sds-radius-card); min-width: 0; }
.product-feature h3 { margin-block: var(--sds-space-0) var(--sds-space-3); }
.product-feature p { color: var(--sds-color-sub); margin-block: var(--sds-space-0) var(--sds-space-3); }
.product-feature p:last-child { margin-block-end: var(--sds-space-0); }
.product-feature .product-feature-kicker { color: var(--sds-color-accent); font-weight: var(--sds-type-heading-weight); margin-block-end: var(--sds-space-2); }
.product-feature ul { margin-block: var(--sds-space-3) var(--sds-space-0); padding-inline-start: var(--sds-space-5); color: var(--sds-color-sub); }
.product-feature li + li { margin-block-start: var(--sds-space-2); }
.product-workflow { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--sds-space-0); margin: var(--sds-space-0); border-block: var(--sds-border-thin) solid var(--sds-color-border); }
.sds .product-workflow, .sds .demo-tool-list, .sds .demo-library, .sds .demo-slides, .sds .demo-checklist, .sds .demo-review-list { padding-inline-start: var(--sds-space-0); }
.product-workflow li { padding: var(--sds-space-6); border-inline-end: var(--sds-border-thin) solid var(--sds-color-border); min-width: 0; }
.product-workflow li:first-child { padding-inline-start: var(--sds-space-0); }
.product-workflow li:last-child { border-inline-end: none; }
.product-workflow strong { display: block; margin-block: var(--sds-space-2) var(--sds-space-3); font-size: var(--sds-type-heading-size); line-height: var(--sds-type-heading-line); font-weight: var(--sds-type-heading-weight); }
.product-workflow p { margin: var(--sds-space-0); color: var(--sds-color-sub); }
.workflow-number { color: var(--sds-color-accent); font-family: var(--sds-font-mono); font-size: var(--sds-type-caption-size); line-height: var(--sds-type-caption-line); }
.product-requirements { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sds-space-12); align-items: start; }
.product-requirements dl { margin: var(--sds-space-0); }
.product-requirements dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sds-space-4); padding-block: var(--sds-space-4); border-block-end: var(--sds-border-thin) solid var(--sds-color-border); }
.product-requirements dt { font-weight: var(--sds-type-heading-weight); }
.product-requirements dd { margin: var(--sds-space-0); color: var(--sds-color-sub); }
.product-data-note { padding: var(--sds-space-6); border-inline-start: var(--sds-border-focus-width) solid var(--sds-color-accent); background: var(--sds-color-tint); margin-block-start: var(--sds-space-8); }
.product-data-note p { margin: var(--sds-space-0); }
.product-data-note a { display: inline-flex; min-height: var(--sds-control-height); align-items: center; }
.product-close { display: flex; flex-wrap: wrap; gap: var(--sds-space-8); align-items: center; justify-content: space-between; padding: var(--sds-space-8); background: var(--sds-color-surface); border: var(--sds-border-thin) solid var(--sds-color-border); border-radius: var(--sds-radius-card); }
.product-close > div { min-width: 0; max-width: var(--sds-layout-form-max); }
.product-close h2 { margin-block: var(--sds-space-0) var(--sds-space-3); }
.product-close p { margin-block: var(--sds-space-0); color: var(--sds-color-sub); }
.product-close .hero-cta-row { margin-block: var(--sds-space-0); }

/* A quiet application frame keeps actual workflow information dominant. */
.showcase { min-width: 0; width: 100%; position: relative; background: var(--sds-color-surface); border: var(--sds-border-thin) solid var(--sds-color-border-subtle); border-radius: var(--sds-radius-card); overflow: visible; }
.showcase-tabs { display: none; gap: var(--sds-space-1); padding: var(--sds-space-2); background: var(--sds-color-surface2); border-block-end: var(--sds-border-thin) solid var(--sds-color-border); }
.showcase[data-enhanced="true"] .showcase-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.showcase-tab { position: relative; display: inline-flex; flex: 1 0 auto; white-space: nowrap; justify-content: center; align-items: center; min-width: 0; min-height: var(--sds-control-height); padding: 6px var(--sds-space-3); border: var(--sds-border-thin) solid transparent; border-radius: var(--sds-radius-small); background: transparent; color: var(--sds-color-sub); font-family: var(--sds-font-sans); font-size: var(--sds-type-body-size); line-height: var(--sds-type-body-line); font-weight: var(--sds-type-heading-weight); cursor: pointer; }
.showcase-tab:hover { background: var(--sds-color-hover); color: var(--sds-color-text); }
.showcase-tab[aria-selected="true"] { color: var(--sds-color-accent); background: var(--sds-color-tint); border-color: transparent; }
.showcase .showcase-tab:focus-visible, .showcase .showcase-panel:focus-visible { outline: var(--sds-border-focus-width) solid var(--sds-color-focus); outline-offset: var(--sds-border-focus-offset); box-shadow: 0 0 0 var(--sds-border-focus-offset) var(--sds-color-surface); }
.showcase-panel { display: flex; flex-direction: column; min-width: 0; }
.showcase-panel[hidden] { display: none; }
.showcase-panel + .showcase-panel:not([hidden]) { border-block-start: var(--sds-border-thin) solid var(--sds-color-border); }
.demo-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sds-space-2); padding: var(--sds-space-4) var(--sds-panel-padding); border-block-end: var(--sds-border-thin) solid var(--sds-color-border); }
.demo-titlebar h3 { margin: var(--sds-space-0); font-size: var(--sds-type-body-size); line-height: var(--sds-type-body-line); font-weight: var(--sds-type-heading-weight); }
.demo-meta { color: var(--sds-color-sub); font-size: var(--sds-type-caption-size); line-height: var(--sds-type-caption-line); }
.demo-stage { flex: 1; padding: var(--sds-panel-padding); background: var(--sds-color-bg); min-width: 0; }
.demo-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: var(--sds-space-4); }
.demo-document, .demo-inspector, .demo-record, .demo-calc-block { min-width: 0; padding: var(--sds-space-5); background: var(--sds-color-surface); border: var(--sds-border-thin) solid var(--sds-color-border); border-radius: var(--sds-radius-small); }
.demo-document { display: flex; flex-direction: column; gap: var(--sds-space-4); }
.demo-document h4 { margin: var(--sds-space-0); font-size: var(--sds-type-heading-size); line-height: var(--sds-type-heading-line); font-weight: var(--sds-type-heading-weight); }
.demo-document p { margin: var(--sds-space-0); color: var(--sds-color-sub); }
.demo-document .demo-doc-section { color: var(--sds-color-text); font-weight: var(--sds-type-heading-weight); }
.demo-stamp { display: flex; flex-wrap: wrap; gap: var(--sds-space-2); justify-content: space-between; padding-block-end: var(--sds-space-3); border-block-end: var(--sds-border-thin) solid var(--sds-color-border); color: var(--sds-color-accent); font-size: var(--sds-type-caption-size); line-height: var(--sds-type-caption-line); font-weight: var(--sds-type-heading-weight); }
.demo-document .demo-doc-footer { margin-block-start: auto; padding-block-start: var(--sds-space-4); border-block-start: var(--sds-border-thin) solid var(--sds-color-border); font-size: var(--sds-type-caption-size); line-height: var(--sds-type-caption-line); }
.demo-inspector { background: var(--sds-color-bg); border: 0; }
.demo-record { background: var(--sds-color-bg); border: 0; border-radius: 0; padding: 0; }
.demo-calc-block { border: 0; border-inline-start: var(--sds-border-focus-width) solid var(--sds-color-accent); }
.demo-inspector-title { margin: var(--sds-space-0) var(--sds-space-0) var(--sds-space-3); font-weight: var(--sds-type-heading-weight); }
.demo-tool-list { list-style: none; margin: var(--sds-space-0); padding: var(--sds-space-0); display: grid; gap: var(--sds-space-1); }
.demo-tool-list li { padding: var(--sds-space-1); border-radius: var(--sds-radius-small); color: var(--sds-color-sub); }
.demo-tool-list .is-current { background: var(--sds-color-tint); color: var(--sds-color-accent); font-weight: var(--sds-type-heading-weight); }
.demo-inspector .demo-meta { margin-block: var(--sds-space-4) var(--sds-space-0); }
.demo-caption { margin: var(--sds-space-0); padding: var(--sds-space-4) var(--sds-panel-padding); color: var(--sds-color-sub); border-block-start: var(--sds-border-thin) solid var(--sds-color-border); }
.demo-disclosure { margin: var(--sds-space-0); padding: var(--sds-space-3) var(--sds-panel-padding); color: var(--sds-color-sub); font-size: var(--sds-type-caption-size); line-height: var(--sds-type-caption-line); background: var(--sds-color-surface); border-block-start: var(--sds-border-thin) solid var(--sds-color-border-subtle); }
.demo-search-label { padding: var(--sds-space-3) var(--sds-space-4); margin: var(--sds-space-0) var(--sds-space-0) var(--sds-space-4); border: var(--sds-border-thin) solid var(--sds-color-edge); border-radius: var(--sds-radius-control); background: var(--sds-color-surface); color: var(--sds-color-sub); }
.demo-library { list-style: none; padding: var(--sds-space-0); margin: var(--sds-space-0); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-2); }
.demo-library li { padding: var(--sds-space-3); background: var(--sds-color-surface); border: var(--sds-border-thin) solid var(--sds-color-border); border-radius: var(--sds-radius-small); }
.demo-library .is-current { border-color: var(--sds-color-accent); color: var(--sds-color-accent); background: var(--sds-color-tint); }
.demo-formula { display: block; padding: var(--sds-space-4); margin-block: var(--sds-space-4) var(--sds-space-0); font-family: var(--sds-font-mono); font-size: var(--sds-type-body-size); line-height: var(--sds-type-body-line); color: var(--sds-color-text); background: var(--sds-color-surface); border-inline-start: var(--sds-border-focus-width) solid var(--sds-color-accent); overflow-wrap: anywhere; white-space: normal; }
.demo-formula-label { display: block; margin-block-end: var(--sds-space-2); color: var(--sds-color-sub); font-family: var(--sds-font-sans); font-size: var(--sds-type-caption-size); line-height: var(--sds-type-caption-line); }
.demo-slides { list-style: none; padding: var(--sds-space-0); margin: var(--sds-space-0); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sds-space-2); }
.demo-slides li { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sds-space-6); padding: var(--sds-space-3); background: var(--sds-color-surface); border: var(--sds-border-thin) solid var(--sds-color-border); border-radius: var(--sds-radius-small); }
.demo-slides .is-current { border-color: var(--sds-color-accent); background: var(--sds-color-tint); color: var(--sds-color-accent); }
.demo-checklist { list-style: none; padding: var(--sds-space-0); margin: var(--sds-space-4) var(--sds-space-0); display: grid; gap: var(--sds-space-3); }
.demo-checklist li { display: flex; align-items: flex-start; gap: var(--sds-space-2); }
.demo-checklist .demo-check { color: var(--sds-color-success); font-weight: var(--sds-type-heading-weight); }
.showcase .demo-note { color: var(--sds-color-sub); margin-block: var(--sds-space-4) var(--sds-space-0); }
.demo-mail dl { margin: var(--sds-space-0); }
.demo-mail dl > div { display: grid; grid-template-columns: var(--sds-space-16) minmax(0, 1fr); gap: var(--sds-space-3); padding-block: var(--sds-space-3); border-block-end: var(--sds-border-thin) solid var(--sds-color-border); }
.demo-mail dt { color: var(--sds-color-sub); }
.demo-mail dd { margin: var(--sds-space-0); overflow-wrap: anywhere; }
.demo-mail-body { padding-block: var(--sds-space-5); }
.demo-mail-body p { margin-block: var(--sds-space-0) var(--sds-space-3); }
.demo-attachment { display: flex; gap: var(--sds-space-3); align-items: flex-start; padding: var(--sds-space-3); background: var(--sds-color-tint); color: var(--sds-color-accent); border-radius: var(--sds-radius-small); overflow-wrap: anywhere; }
.demo-attachment strong { font-weight: var(--sds-type-heading-weight); }
.demo-status { display: inline-flex; align-items: center; gap: var(--sds-space-2); padding: var(--sds-space-1) var(--sds-space-2); color: var(--sds-color-accent); background: var(--sds-color-tint); border-radius: var(--sds-radius-small); font-size: var(--sds-type-caption-size); line-height: var(--sds-type-caption-line); font-weight: var(--sds-type-caption-weight); }
.demo-status--review { color: var(--sds-color-warning); background: var(--sds-color-warning-bg); }
.demo-status--confirmed { color: var(--sds-color-success); background: var(--sds-color-success-bg); }
.demo-calc-chain { display: grid; gap: var(--sds-space-3); }
.demo-calc-block h4 { margin: var(--sds-space-0) var(--sds-space-0) var(--sds-space-3); font-size: var(--sds-type-body-size); line-height: var(--sds-type-body-line); font-weight: var(--sds-type-heading-weight); }
.demo-calc-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sds-space-3); margin: var(--sds-space-0); }
.demo-calc-values dt { color: var(--sds-color-sub); font-size: var(--sds-type-caption-size); line-height: var(--sds-type-caption-line); }
.demo-calc-values dd { margin: var(--sds-space-1) var(--sds-space-0) var(--sds-space-0); font-family: var(--sds-font-mono); font-size: var(--sds-type-body-size); line-height: var(--sds-type-body-line); }
.demo-link-line { display: flex; align-items: center; justify-content: center; gap: var(--sds-space-2); color: var(--sds-color-accent); font-size: var(--sds-type-caption-size); line-height: var(--sds-type-caption-line); }
.demo-link-line::before { content: "↓"; font-size: var(--sds-type-heading-size); line-height: var(--sds-type-heading-line); }
.demo-result { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: var(--sds-space-3); padding-block-start: var(--sds-space-3); margin-block-start: var(--sds-space-3); border-block-start: var(--sds-border-thin) solid var(--sds-color-border); }
.demo-result strong { font-family: var(--sds-font-mono); font-size: var(--sds-type-heading-size); line-height: var(--sds-type-heading-line); font-weight: var(--sds-type-heading-weight); }
.demo-trace { margin: var(--sds-space-0); }
.demo-trace > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sds-space-4); padding-block: var(--sds-space-4); border-block-end: var(--sds-border-thin) solid var(--sds-color-border); }
.demo-trace dt { color: var(--sds-color-sub); }
.demo-trace dd { margin: var(--sds-space-0); font-family: var(--sds-font-mono); overflow-wrap: anywhere; }
.demo-review-list { list-style: none; display: grid; gap: var(--sds-space-4); margin: var(--sds-space-0); padding: var(--sds-space-0); }
.demo-review-list li { display: grid; grid-template-columns: var(--sds-space-8) minmax(0, 1fr); gap: var(--sds-space-3); align-items: start; }
.demo-review-list .review-step { display: grid; place-items: center; width: var(--sds-space-8); height: var(--sds-space-8); border: var(--sds-border-thin) solid var(--sds-color-edge); border-radius: var(--sds-radius-pill); color: var(--sds-color-accent); font-family: var(--sds-font-mono); }
.demo-review-list p { margin: var(--sds-space-1) var(--sds-space-0) var(--sds-space-0); color: var(--sds-color-sub); }
.demo-record-head { display: flex; align-items: start; flex-wrap: wrap; justify-content: space-between; gap: var(--sds-space-3); margin-block-end: var(--sds-space-4); }
.demo-record-head h4 { margin: var(--sds-space-0); font-size: var(--sds-type-heading-size); line-height: var(--sds-type-heading-line); font-weight: var(--sds-type-heading-weight); }
.demo-record-fields { margin: var(--sds-space-0); }
.demo-record-fields > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sds-space-3); padding-block: var(--sds-space-3); border-block-end: var(--sds-border-thin) solid var(--sds-color-border); }
.demo-record-fields dt { color: var(--sds-color-sub); }
.demo-record-fields dd { margin: var(--sds-space-0); overflow-wrap: anywhere; }
.demo-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--sds-type-body-size); line-height: var(--sds-type-body-line); }
.demo-table caption { text-align: start; color: var(--sds-color-sub); padding-block-end: var(--sds-space-3); }
.demo-table th, .demo-table td {  padding: var(--sds-space-3); border-block-end: var(--sds-border-thin) solid var(--sds-color-border); text-align: start; overflow-wrap: anywhere; }
.demo-table thead th { background: var(--sds-color-surface2); font-weight: var(--sds-type-heading-weight); }
.demo-table tbody th { font-weight: var(--sds-type-body-weight); }
.demo-table .demo-meta { display: block; }

/* The frame, not the sample data, supplies visual hierarchy. */
.showcase-tab { transition: color var(--sds-motion-fast) var(--sds-motion-ease), background-color var(--sds-motion-fast) var(--sds-motion-ease); }
.showcase-tab[aria-selected='true']::after { content: ''; position: absolute; inset: auto var(--sds-space-3) 0; height: var(--sds-border-focus-width); background: var(--sds-color-accent); }
.product-feature { border: 0; border-block-start: var(--sds-border-thin) solid var(--sds-color-accent); border-radius: 0; background: transparent; }
@media (max-width: 1279.98px) {
  .product-hero-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sds-space-8); }
  .demo-split { grid-template-columns: minmax(0, 1fr); }
  .demo-tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .product-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .product-intro { max-width: var(--sds-layout-form-max); }
  .demo-split { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
  .demo-tool-list { grid-template-columns: minmax(0, 1fr); }
  .product-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-workflow li { padding: var(--sds-space-5); }
  .product-workflow li:first-child { padding-inline-start: var(--sds-space-5); }
  .product-workflow li:nth-child(2) { border-inline-end: none; }
  .product-requirements { gap: var(--sds-space-8); }
}
@media (max-width: 639.98px) {
  .product-hero { padding-block: var(--sds-space-8); }
  .product-hero-grid { gap: var(--sds-space-8); }
  .product-endorsement { width: var(--sds-layout-nav); margin-block-end: var(--sds-space-6); }
  .product-feature-grid, .product-requirements, .demo-split { grid-template-columns: minmax(0, 1fr); }
  .product-workflow { grid-template-columns: minmax(0, 1fr); }
  .product-workflow li, .product-workflow li:first-child { padding: var(--sds-space-5) var(--sds-space-0); border-inline-end: none; border-block-end: var(--sds-border-thin) solid var(--sds-color-border); }
  .product-workflow li:last-child { border-block-end: none; }
  .product-close { padding: var(--sds-space-6); }
  .showcase-tab { flex-basis: auto; padding-inline: var(--sds-space-2); }
  .demo-slides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-document, .demo-inspector, .demo-calc-block { padding: var(--sds-space-4); }
  .demo-record { padding: 0; }
  .demo-trace > div, .demo-record-fields > div, .product-requirements dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--sds-space-1); }
}
@media (max-width: 639.98px) { .showcase { } }
@media (forced-colors: active) {
  .showcase::before { display: none; }
  .showcase { box-shadow: none; }
  .showcase-tab[aria-selected="true"]::after { background: Highlight; }
  .showcase-tab[aria-selected="true"] { border-color: Highlight; }
  .demo-status, .demo-attachment, .demo-library .is-current, .demo-slides .is-current, .demo-tool-list .is-current { border: var(--sds-border-thin) solid CanvasText; }
}

/* Opaque examples preserve record meaning and stable, unanimated content. */
.showcase-tabs { border-start-start-radius: var(--sds-radius-card); border-start-end-radius: var(--sds-radius-card); }
.showcase[data-enhanced='true'] .showcase-tabs { padding: var(--sds-space-2); scroll-padding-inline: var(--sds-space-2); }
.demo-inspector, .demo-record { background: var(--sds-color-bg); }
.demo-stage { overflow-wrap: anywhere; }
.demo-document { box-shadow: none; }
.demo-table td[data-numeric], .demo-table th[data-numeric] { text-align: end; font-variant-numeric: tabular-nums; }
.demo-calc-values dd, .demo-result strong, .demo-record-fields dd { font-variant-numeric: tabular-nums; }
.demo-status { border: var(--sds-border-thin) solid var(--sds-component-badge-border); padding: var(--sds-component-badge-padding-block) var(--sds-component-badge-padding-inline); border-radius: var(--sds-component-badge-radius); }
@media (forced-colors: active) { .showcase .showcase-tab:focus-visible, .showcase .showcase-panel:focus-visible { outline-color: Highlight; box-shadow: none; } }

.demo-mail dl > div, .demo-trace > div, .demo-record-fields > div, .product-requirements dl > div { padding-block: var(--sds-space-2); align-content: center; }