/* Product-only composition. All colors resolve to the shared foundation tokens. */
.dokki {
  --dokki-sticky-top: calc(var(--dokki-header-bottom) + var(--dokki-subnav-height) + 24px);
  --dokki-fade-duration: 350ms;
  --dokki-step-height: clamp(24rem, 60vh, 36rem);
  --dokki-header-bottom: calc(var(--cd-header-height) + var(--cd-admin-offset));
  --dokki-subnav-height: 45px;
  --cd-text-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
  --cd-text-intro: clamp(1.125rem, 1rem + 0.25vw, 1.25rem);
  --cd-text-h2: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  --cd-text-h3: clamp(1.375rem, 1.25rem + 0.25vw, 1.625rem);
  --cd-section-space: clamp(3.5rem, 6vw, 6rem);
  font-size: var(--cd-text-body);
  line-height: 1.6;
}
.dokki :where(h1, h2, h3, p) { margin-block-start: 0; }
.dokki h2 { font-size: var(--cd-text-h2); margin-block-end: var(--cd-space-5); }
.dokki h3 { font-size: var(--cd-text-h3); margin-block-end: var(--cd-space-3); }
.dokki p:last-child { margin-block-end: 0; }
.dokki [id] { scroll-margin-top: max(0px, calc(var(--dokki-sticky-top) - var(--cd-header-height) - var(--cd-admin-offset) - var(--cd-space-4))); }
.dokki-section-heading { max-width: 48rem; margin-block-end: var(--cd-space-7); }
.dokki-section-heading p { max-width: var(--cd-width-text); }
.dokki-hero { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: var(--cd-space-7); align-items: center; padding-block: clamp(2.5rem, 4.5vw, 4.5rem); }
.dokki-hero__copy, .dokki-hero__visual { min-width: 0; }
.dokki-hero h1 { font-size: clamp(2rem, 0.5rem + 2.6vw, 3rem); margin-block: var(--cd-space-5) var(--cd-space-5); line-height: 1.12; }
.dokki-hero .cd-intro { margin-block-end: var(--cd-space-6); }
.dokki-hero__brand img { width: 64px; height: 64px; object-fit: contain; }
.dokki-hero .cd-intro { max-width: 46ch; }
.dokki-launch { color: var(--cd-muted); font-size: var(--cd-text-small); margin-block-start: var(--cd-space-4); }
.dokki-hero__visual { margin: 0; }
.dokki-hero figcaption, .dokki-integration figcaption { margin-block-start: var(--cd-space-5); color: var(--cd-muted); text-align: center; font-size: var(--cd-text-small); }
.dokki-sidecar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; isolation: isolate; }
.dokki-sidecar__panel { min-width: 0; border: var(--cd-border-width) solid var(--cd-blue); border-radius: var(--cd-radius); background: var(--cd-surface); box-shadow: var(--cd-shadow-small); overflow: hidden; z-index: 1; }
.dokki-sidecar__title { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--cd-space-1); align-items: center; min-height: 2.75rem; padding: var(--cd-space-2) var(--cd-space-3); background: var(--cd-white); color: var(--cd-brand-navy); font-weight: 700; font-size: var(--cd-text-small); border-bottom: var(--cd-border-width) solid var(--cd-border); }
.dokki-sidecar__title span { font-weight: 400; font-size: 0.75rem; }
.dokki-sidecar__panel img { width: 100%; height: auto; }
.dokki-pvs { min-width: 0; min-height: clamp(13rem, 20vw, 17rem); margin-block: var(--cd-space-3); border: var(--cd-border-width) solid var(--cd-border); border-inline-end: 0; border-radius: var(--cd-radius) 0 0 var(--cd-radius); overflow: hidden; background: var(--cd-white); color: var(--cd-muted); }
.dokki-pvs__toolbar { display: flex; align-items: center; gap: var(--cd-space-2); padding: var(--cd-space-3); border-bottom: var(--cd-border-width) solid var(--cd-border); font-size: var(--cd-text-small); }
.dokki-pvs__app-icon { width: 0.75rem; height: 0.75rem; border: 2px solid var(--cd-muted); border-radius: 2px; }
.dokki-pvs__dots { margin-inline-start: auto; letter-spacing: 2px; }
.dokki-pvs__workspace { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); }
.dokki-pvs__rail { display: flex; flex-direction: column; align-items: center; gap: var(--cd-space-5); padding-block: var(--cd-space-4); background: var(--cd-surface); }
.dokki-pvs__rail i { width: 0.625rem; height: 0.625rem; border: var(--cd-border-width) solid var(--cd-muted); border-radius: 2px; }
.dokki-pvs__body { padding: var(--cd-space-4); }
.dokki-pvs__heading { width: 52%; height: 0.5rem; margin-block-end: var(--cd-space-5); background: var(--cd-border); }
.dokki-pvs__tabs { display: flex; gap: var(--cd-space-3); margin-block-end: var(--cd-space-3); }
.dokki-pvs__tabs i { width: 20%; height: 0.375rem; background: var(--cd-border); }
.dokki-pvs__row { display: flex; gap: var(--cd-space-3); align-items: center; padding-block: var(--cd-space-3); border-top: var(--cd-border-width) solid var(--cd-border); }
.dokki-pvs__row i { width: 0.375rem; height: 0.375rem; background: var(--cd-border); }
.dokki-pvs__row span { width: 70%; height: 0.25rem; background: var(--cd-border); }
.dokki-pvs__row:nth-child(even) span { width: 52%; }
.dokki-section-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--cd-space-6); width: 100%; padding: 0 var(--cd-gutter); border-bottom: var(--cd-border-width) solid var(--cd-border); background: var(--cd-white); position: sticky; top: var(--dokki-header-bottom); z-index: calc(var(--cd-z-header) - 1); }
.dokki-section-nav a { display: inline-flex; align-items: center; min-height: var(--cd-touch-target); color: var(--cd-brand-navy); font-size: 0.875rem; text-decoration: none; border-bottom: 2px solid transparent; }
.dokki-section-nav a:hover, .dokki-section-nav a:focus-visible { text-decoration: underline; }
.dokki-section-nav a[aria-current="location"] { border-bottom-color: var(--cd-orange); font-weight: 650; }
.dokki-hero figcaption::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; margin: 0 0.5rem 0.25rem 0; background: var(--cd-orange); }
.dokki-split { display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; gap: var(--cd-space-8); }
.dokki-problem-copy { padding-block-start: var(--cd-space-2); }
.dokki-process { display: grid; grid-template-columns: 1fr 2rem 1fr 2rem 1fr; gap: var(--cd-space-5); align-items: center; list-style: none; margin: 0; padding: 0; }
.dokki-process > li { min-width: 0; text-align: center; }
.dokki-process h3 { font-size: var(--cd-text-h3); margin-block: var(--cd-space-5) var(--cd-space-3); }
.dokki-process p { color: var(--cd-muted); font-size: 1rem; }
.dokki-process__connector { font-size: 1.75rem; color: var(--cd-blue); }
.dokki-line-icon { display: block; width: 3.5rem; height: 3.5rem; margin-inline: auto; stroke: var(--cd-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dokki-process__logo { width: 4rem; height: 4rem; margin-inline: auto; }
.dokki-process__note { margin-block: var(--cd-space-7) 0; text-align: center; }
.dokki-workflow .dokki-section-heading { margin-inline: auto; text-align: center; }
.dokki-workflow .dokki-process { max-width: 65rem; margin-inline: auto; }
.dokki-product-step { margin-block: 0 var(--cd-space-9); }
.dokki-product-step:last-child { margin-block-end: 0; }
.dokki-product-step__copy { max-width: 40rem; margin-block-end: var(--cd-space-6); }
.dokki-product-step h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cd-space-4); }
.dokki-product-step__number { display: inline-flex; justify-content: center; min-width: 2.5rem; padding-block: var(--cd-space-1); border-block-end: 2px solid var(--cd-border); color: var(--cd-brand-navy); font-size: 1rem; letter-spacing: 0.05em; }
.dokki-product__inline { width: min(100%, 32.5rem); margin: 0; border: var(--cd-border-width) solid var(--cd-border); border-radius: var(--cd-radius); background: var(--cd-surface); overflow: hidden; }
.dokki-product__inline img { width: 100%; height: auto; }
.dokki-product__stage { display: none; }
.dokki-principles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cd-space-7) var(--cd-space-9); }
.dokki-principles > div { padding-block-start: var(--cd-space-5); border-top: var(--cd-border-width) solid var(--cd-border); }
.dokki-principles p { max-width: 42ch; }
.dokki-validation .dokki-section-heading { max-width: 46rem; }
.dokki-validation .cd-eyebrow { color: var(--cd-light-blue); }
.dokki-process--validation { max-width: 62rem; margin: var(--cd-space-6) auto; }
.dokki-process--validation h3, .dokki-process--validation p { color: var(--cd-white); }
.dokki-process--validation .dokki-process__connector { color: var(--cd-light-blue); }
.dokki-validation__gate { padding: var(--cd-space-6) var(--cd-space-4); border: 1px solid var(--cd-blue); border-radius: var(--cd-radius); background: var(--cd-brand-navy); }
.dokki-validation__gate h3 { margin-block-start: var(--cd-space-3); }
.dokki-validation__mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--cd-light-blue); color: var(--cd-brand-navy); font-size: 1.25rem; }
.dokki-outcomes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cd-space-5) var(--cd-space-8); list-style: none; margin: 0; padding: 0; }
.dokki-outcomes li { display: flex; align-items: center; gap: var(--cd-space-3); }
.dokki-outcome-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: 700; }
.dokki-outcome-icon--success { color: var(--cd-deep-navy); background: var(--cd-success); }
.dokki-outcome-icon--warning { color: var(--cd-warning-text); background: var(--cd-warning-surface); }
.dokki-validation__note { max-width: 65ch; margin: var(--cd-space-6) auto 0; text-align: center; }
.dokki-medical-control { max-width: 72ch; margin: var(--cd-space-5) auto 0; text-align: center; color: var(--cd-light-blue); font-size: var(--cd-text-small); }
.dokki-integration { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--cd-space-8); align-items: center; }
.dokki-integration__copy > div + div { margin-block-start: var(--cd-space-8); }
.dokki-integration h2 { font-size: clamp(1.875rem, 1.5rem + 1vw, 2.375rem); }
.dokki-integration__visual { min-width: 0; margin: 0; overflow: clip; }
.dokki-integration figcaption { display: grid; justify-items: center; gap: var(--cd-space-3); }
.dokki-demo { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--cd-space-9); align-items: center; }
.dokki-demo__followup { max-width: 50ch; margin-block-start: var(--cd-space-5); color: var(--cd-muted); font-size: 1rem; }
.dokki-demo__request { padding: var(--cd-space-5) 0; border-block: var(--cd-border-width) solid var(--cd-border); }
.dokki-demo__request p { color: var(--cd-muted); }
.dokki-demo__preview-note { font-size: var(--cd-text-small); }
.dokki-demo__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cd-space-4); }
.dokki-demo__field { min-width: 0; font-size: var(--cd-text-small); color: var(--cd-muted); }
.dokki-demo__field:last-child { grid-column: 1 / -1; }
.dokki-demo__field-line { display: block; height: 2rem; border-bottom: 1px solid var(--cd-border); }
.dokki-demo__field:last-child .dokki-demo__field-line { height: 3rem; }
/* Only JS may add this class, after all images have decoded successfully. */
@media (min-width: 900px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .dokki-product.is-enhanced { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: var(--cd-space-7); align-items: start; }
  .dokki-product.is-enhanced .dokki-product-step { display: flex; align-items: center; min-height: var(--dokki-step-height); margin: 0; padding-block: var(--cd-space-7); }
  .dokki-product.is-enhanced .dokki-product-step__copy { margin: 0; padding-inline-start: var(--cd-space-5); border-inline-start: 3px solid transparent; }
  .dokki-product.is-enhanced .dokki-product-step.is-current .dokki-product-step__copy { border-color: var(--cd-orange); }
  .dokki-product.is-enhanced .dokki-product-step.is-current .dokki-product-step__number { border-color: var(--cd-orange); font-weight: 700; }
  /* Original images remain in the accessibility tree alongside their text. */
  .dokki-product.is-enhanced .dokki-product__inline { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; }
  .dokki-product.is-enhanced .dokki-product__stage { display: block; position: sticky; top: var(--dokki-sticky-top); width: min(100%, 35rem); height: min(54svh, 35rem); margin: var(--cd-space-5) auto 0; }
  .dokki-product__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity var(--dokki-fade-duration) var(--cd-ease); }
  .dokki-product__stage img.is-current { opacity: 1; }
}
@media (max-width: 1199px) {
  .dokki-hero { grid-template-columns: 1fr; gap: var(--cd-space-7); }
  .dokki-hero__copy { max-width: 46rem; }
  .dokki-hero__visual { width: min(100%, 50rem); margin-inline: auto; }
  .dokki-split, .dokki-demo { gap: var(--cd-space-7); }
  .dokki-process { gap: var(--cd-space-3); }
}
@media (max-width: 899px) {
  .dokki-integration { grid-template-columns: 1fr; }
  .dokki-integration__visual { width: min(100%, 44rem); margin-inline: auto; }
  .dokki-principles { gap: var(--cd-space-7); }
}
@media (max-width: 767px) {
  .dokki-hero { padding-block: var(--cd-space-8); }
  .dokki-hero h1 { font-size: clamp(2rem, 7vw, 2.75rem); }
  .dokki-sidecar__title { padding: var(--cd-space-2); font-size: 0.75rem; }
  .dokki-sidecar__title span { font-size: 0.625rem; }
  .dokki-pvs { min-height: 12rem; }
  .dokki-pvs__toolbar { font-size: 0.6875rem; padding: var(--cd-space-2); }
  .dokki-pvs__workspace { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .dokki-pvs__body { padding: var(--cd-space-3); }
  .dokki-pvs__row { padding-block: var(--cd-space-2); }
  .dokki-section-nav { justify-content: space-between; gap: 0 var(--cd-space-2); }
  .dokki-product__inline { width: min(100%, 18.75rem); margin-inline: auto; }
  .dokki-split, .dokki-demo { grid-template-columns: 1fr; }
  .dokki-split { gap: var(--cd-space-5); }
  .dokki-section-heading { margin-block-end: var(--cd-space-7); }
  .dokki-process { grid-template-columns: 1fr; gap: var(--cd-space-5); }
  .dokki-process__connector { transform: rotate(90deg); }
  .dokki-process--validation { gap: var(--cd-space-4); }
  .dokki-validation__gate { width: 100%; max-width: 26rem; justify-self: center; }
  .dokki-outcomes { justify-content: flex-start; }
  .dokki-validation__note { text-align: start; }
  .dokki-demo__request { padding-inline: 0; }
}
@media (max-width: 479px) { .dokki-principles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dokki { --dokki-fade-duration: 0ms; } }

@media (max-width: 69.999rem) { .dokki { --dokki-header-bottom: 0px; } }
@media (min-width: 900px) and (max-height: 800px) {
  .dokki { --cd-section-space: 3.5rem; }
  .dokki-hero { padding-block: 2.5rem; }
  .dokki-section-heading { margin-block-end: 2rem; }
  .dokki-process__note { margin-block-start: 2rem; }
}