/* 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-section-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--cd-space-5); 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.9375rem; line-height: 1.4; 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 .dokki-process__note { margin-block: var(--cd-space-5) 0; text-align: center; }
.dokki-workflow, .dokki-validation, .dokki-security { padding-block: var(--cd-space-7); }
.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-5) var(--cd-space-8); }
.dokki-principles > div { padding-block-start: var(--cd-space-4); border-top: var(--cd-border-width) solid var(--cd-border); }
.dokki-principles p { max-width: 42ch; margin-block: 0; }
.dokki-security .dokki-section-heading { margin-block-end: var(--cd-space-5); }
.dokki-security .cd-eyebrow, .dokki-validation .cd-eyebrow { margin-block-end: var(--cd-space-3); }
.dokki-security h2, .dokki-validation h2 { margin-block-end: var(--cd-space-4); }
.dokki-security h3 { margin-block-end: var(--cd-space-2); }
.dokki-validation .dokki-section-heading { max-width: 46rem; margin-block-end: var(--cd-space-5); }
.dokki-validation .cd-intro { margin-block-end: var(--cd-space-3); }
.dokki-validation .cd-eyebrow { color: var(--cd-light-blue); }
.dokki-process--validation { max-width: 62rem; margin: 0 auto var(--cd-space-5); }
.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-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-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 .dokki-validation__note { max-width: 75ch; text-wrap: pretty; margin: var(--cd-space-5) auto 0; text-align: center; }
.dokki .dokki-medical-control { max-width: 75ch; text-wrap: pretty; margin: var(--cd-space-4) 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-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--cd-space-8); align-items: start; }
.dokki-demo--without-form { grid-template-columns: 1fr; }
.dokki-demo > div { min-width: 0; }
.dokki-demo--without-form > div { max-width: 44rem; }
.dokki-demo__followup { max-width: 50ch; margin-block-start: var(--cd-space-5); color: var(--cd-muted); font-size: 1rem; }

/* 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-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 { 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 .dokki-validation__note, .dokki .dokki-medical-control { text-align: start; }
}
@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; }
}
/* Final approved visual layer; blending never modifies the source pixels. */
.dokki-hero { position: relative; isolation: isolate; width: 100%; max-width: none; min-height: clamp(560px, 72svh, 720px); padding-inline: max(var(--cd-gutter), calc((100% - 1280px) / 2)); background: var(--cd-white); }
.dokki-hero__copy { position: relative; z-index: 2; max-width: 34rem; }
.dokki-hero__visual { position: absolute; inset: 0 0 0 auto; width: auto; max-width: 100%; height: 100%; aspect-ratio: 1644 / 957; z-index: -1; }
.dokki-hero__visual picture, .dokki-hero__visual img { display: block; width: 100%; height: 100%; }
.dokki-hero__visual img { object-fit: contain; object-position: right center; }
.dokki-hero__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, white 0%, rgb(255 255 255 / .95) 12%, rgb(255 255 255 / .35) 27%, transparent 40%), linear-gradient(0deg, white, transparent 9%); pointer-events: none; }
.dokki-product__inline { aspect-ratio: 4 / 3; }
.dokki-product__stage { border-radius: var(--cd-radius); background: var(--cd-surface); overflow: hidden; box-shadow: var(--cd-shadow-small); }
.dokki-product__inline picture { display: block; width: 100%; height: 100%; }
.dokki-product__inline img { width: 100%; height: 100%; object-fit: contain; }
.dokki-process--validation picture { display: block; }
.dokki-process--validation img { width: var(--dokki-icon-size, 60px); height: var(--dokki-icon-size, 60px); object-fit: contain; margin-inline: auto; }
@media (max-width: 1199px) {
  .dokki-hero { min-height: 0; padding-bottom: 0; gap: 1rem; }
  .dokki-hero__copy { max-width: 46rem; }
  .dokki-hero__visual { position: relative; inset: auto; z-index: 0; width: min(100%, 520px); max-width: none; height: auto; aspect-ratio: 6 / 5; }
  .dokki-hero__visual::after { background: linear-gradient(180deg, white, transparent 8%), linear-gradient(0deg, white, transparent 8%); }
}
@media (max-width: 767px) {
  .dokki-hero { padding-top: 2rem; }
  .dokki-hero__visual { width: calc(100% + 2 * var(--cd-gutter)); margin-inline: calc(-1 * var(--cd-gutter)); }
  .dokki-product__inline { width: min(100%, 340px); }
  .dokki-process--validation { --dokki-icon-size: 50px; }
  .dokki-validation__gate { --dokki-icon-size: 66px; }
}

@media (max-width: 69.999rem) { .dokki-demo { grid-template-columns: 1fr; } }

/* Phase 2.10: scoped visual hierarchy and initial form dimensions. */
.dokki-validation__gate { --dokki-icon-size: 78px; padding-block: 9px; }
.dokki-validation__gate h3 { margin-block-start: 8px; }
.dokki .dokki-problem-copy { font-size: 1.03125rem; line-height: 1.6; }
.dokki-integration__visual { width: min(100%, 600px); margin-inline: auto; }
.dokki-integration__visual picture { display: block; }
.dokki-integration__visual img { width: 100%; height: auto; object-fit: contain; }
.dokki-demo:not(.dokki-demo--without-form) { padding-block: 56px; }
@media (max-width: 767px) {
  .dokki-validation__gate { --dokki-icon-size: 66px; }
}