/* Service examples use fictional data. Shared EKWIS tokens remain in styles.css. */
.service-enhanced {
  --service-rule: rgba(30, 40, 51, 0.14);
  --service-panel: #f5f5f5;
}

.service-intro {
  padding-block: clamp(56px, 6.5vw, 96px);
}

.service-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(34px, 5vw, 70px);
}

.service-intro h1 {
  max-width: 16ch;
  margin: 0 0 24px;
  color: var(--white);
  font-size: clamp(2.3rem, 4.2vw, 3.7rem);
  line-height: 1.11;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.service-intro-copy > p:not(.page-eyebrow) {
  max-width: 58ch;
  margin: 0;
  color: var(--on-storm-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.service-intro .page-eyebrow { margin-bottom: 22px; }
.service-intro .hero-actions { justify-content: flex-start; margin-top: 30px; gap: 12px; }
.service-intro-copy > p.service-intro-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 7px 14px; color: var(--on-storm-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--storm-line); border-radius: 0; font-size: 0.82rem; }
.service-intro-copy > p.service-intro-note::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--blue); border-radius: 0; }

.service-example { min-width: 0; margin: 0; }
.service-example > figcaption {
  margin-top: 14px;
  color: var(--slate);
  font-size: 0.76rem;
  line-height: 1.6;
}
.service-intro .service-example > figcaption { color: var(--on-storm-muted); }
.service-canvas {
  overflow: hidden;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(30, 40, 51, 0.13);
  border-radius: 0;
}
.service-intro .service-canvas {
  border: 0;
  animation: service-canvas-enter 900ms var(--ease-out) 120ms both;
}
@keyframes service-canvas-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.service-canvas-header { background: var(--mist); }
.service-canvas-header {
  display: flex;
  min-height: 60px;
  padding: 18px 22px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--service-rule);
  font-size: 0.76rem;
}
.service-canvas-header > span { color: var(--slate); }
.service-canvas-header strong { font-family: var(--font-display); font-size: 0.85rem; }
.service-example-tag { display: inline-flex; padding: 4px 8px; color: #485462; background: var(--mist); border-radius: 0; font-size: 0.67rem; white-space: nowrap; }
.service-canvas-body { padding: clamp(20px, 3vw, 32px); }
.service-canvas p { color: #485462; }
.service-canvas h3 { margin: 0; color: var(--ink); font-size: 1.25rem; line-height: 1.35; }
.service-canvas .service-example-heading { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.35; }
.service-mini-label { display: block; margin: 0 0 8px; color: var(--slate); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; }
.service-status { display: inline-flex; width: fit-content; padding: 5px 9px; color: var(--blue); background: var(--blue-soft); border-radius: 0; font-size: 0.68rem; line-height: 1.5; font-weight: 500; }
.service-status--neutral { color: #485462; background: #edf0f4; }
.service-status--dark { color: var(--white); background: var(--ink); }

.service-section { padding-block: clamp(56px, 7vw, 94px); }
.service-section--soft { background: var(--mist); }
.service-section-header { max-width: 790px; margin-bottom: clamp(28px, 4vw, 48px); }
.service-section-header h2,
.service-editorial-copy h2 { margin: 0 0 20px; font-size: clamp(1.9rem, 3.1vw, 2.7rem); line-height: 1.17; letter-spacing: -0.045em; text-wrap: balance; }
.service-section-header p:last-child,
.service-editorial-copy > p:not(.section-kicker) { color: var(--slate); }
.service-section-header p:last-child { max-width: 68ch; margin-bottom: 0; }
.service-editorial { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(34px, 7vw, 96px); align-items: center; }
.service-editorial--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.service-editorial-copy { min-width: 0; }
.service-editorial-copy .learn-more { margin-top: 14px; }

.service-scope-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: scope; }
.service-scope-list > li { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 28px; padding: 26px 28px 26px 84px; background: var(--white); border: 1px solid var(--ink-soft); border-radius: 0; counter-increment: scope; }
.service-scope-list > li::before { content: "0" counter(scope); position: absolute; top: 22px; left: 26px; display: grid; width: 38px; height: 38px; place-items: center; color: var(--blue); background: var(--blue-tint); border: 0; border-radius: 0; font-size: 0.78rem; font-weight: 700; }
.service-scope-list h3 { margin: 6px 0 0; font-size: 1.12rem; line-height: 1.4; }
.service-scope-list p { margin: 0; color: var(--slate); font-size: 0.94rem; }
.service-two-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 5vw, 64px); }
.service-two-paths > article { position: relative; padding: 30px; background: var(--white); border: 1px solid var(--ink-soft); border-radius: 0; overflow: hidden; }
.service-two-paths > article::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--blue); }
.service-two-paths h3 { margin: 12px 0 16px; font-size: 1.5rem; line-height: 1.3; }
.service-two-paths p { color: var(--slate); }
.service-path-number { color: var(--blue); font-size: 0.78rem; font-weight: 500; }
.service-bullet-list { margin: 22px 0 0; padding-left: 20px; color: var(--slate); }
.service-bullet-list li { margin-block: 10px; padding-left: 4px; }
.service-bullet-list li::marker { color: var(--blue); }

.service-story { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 84px); padding: clamp(28px, 5vw, 56px); background: var(--white); color: var(--ink); border: 1px solid var(--ink-soft); border-radius: 0; }
.service-story h2 { margin: 0 0 20px; font-size: 1.8rem; line-height: 1.2; letter-spacing: -0.035em; }
.service-story p:not(.section-kicker) { color: var(--slate); }
.service-story blockquote { position: relative; margin: 0; padding-top: 60px; }
.service-story blockquote::before { content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 42px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 17.5c0-4.6 2.3-8.6 6.4-11l1.1 1.6C9.3 9.7 8.1 11.4 7.8 13H10v5.5H4v-1Zm9.5 0c0-4.6 2.3-8.6 6.4-11l1.1 1.6c-2.2 1.6-3.4 3.3-3.7 4.9h2.2v5.5h-6v-1Z'/%3E%3C/svg%3E") center / 22px no-repeat, var(--blue); border-radius: 0; }
.service-story blockquote p { margin: 0 0 26px; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.5; letter-spacing: -0.02em; }
.service-story cite { display: block; color: var(--ink); font-size: 0.88rem; font-style: normal; font-weight: 700; }
.service-story small { display: block; margin-top: 5px; color: var(--slate); font-size: 0.78rem; }
.service-next { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 26px 30px; margin-top: 36px; background: var(--mist); border: 1px solid var(--ink-soft); border-radius: 0; }
.service-next p { margin: 0; max-width: 54ch; color: var(--slate); }
.service-next .btn { flex-shrink: 0; }
.service-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.service-related > a { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; text-decoration: none; background: var(--white); border: 1px solid var(--ink-soft); border-radius: 0; transition: transform 260ms var(--ease-out), box-shadow 260ms ease, border-color 260ms ease; }
.service-related > a:hover { border-color: var(--blue); }
.service-related > a strong { font-size: 1.22rem; line-height: 1.4; letter-spacing: -0.025em; }
.service-related > a > span:last-child { color: var(--blue); font-size: 0.9rem; font-weight: 700; }
.service-related > a > span:last-child::after { content: " →"; }
.service-related > a:hover > strong { color: var(--blue); }
.service-related .service-mini-label { margin: 0; }
.service-story + .service-related { margin-top: 24px; }

/* Named customer evidence placed beside the claim it supports. */
.service-proof { display: flex; align-items: center; justify-content: space-between; gap: 18px 30px; padding: 24px 28px; margin-top: 28px; background: var(--white); border: 1px solid var(--ink-soft); border-radius: 0; }
.service-editorial > .service-proof { grid-column: 1 / -1; margin-top: 0; }
.service-proof .service-mini-label { display: block; margin: 0 0 6px; }
.service-proof p { margin: 0; max-width: 62ch; color: var(--slate); }
.service-proof .text-link { flex-shrink: 0; }
.service-proof .service-proof-cite { margin-top: 10px; color: var(--ink); font-size: 0.85rem; font-weight: 500; }

/* EKWIS AI: the request path, from Flow to the customer's provider and back. */
.product-data-path { grid-column: 1 / -1; margin: 0; }
.product-data-path ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: data-path; }
.product-data-path li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; background: var(--white); border: 1px solid var(--ink-soft); border-radius: 0; counter-increment: data-path; }
.product-data-path li::before { content: "0" counter(data-path); color: var(--blue); font-size: 0.78rem; font-weight: 700; }
.product-data-path li:not(:last-child)::after { content: "→" / ""; position: absolute; top: 50%; right: -18px; width: 18px; color: var(--blue); font-weight: 700; text-align: center; transform: translateY(-50%); }
.product-data-path .data-path-zone { color: var(--slate); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.product-data-path strong { color: var(--ink); font-size: 1.02rem; line-height: 1.35; }
.product-data-path li > span:last-child { color: var(--slate); font-size: 0.88rem; line-height: 1.55; }
.product-data-path li.is-external { border-color: var(--blue); }
.product-data-path li.is-external .data-path-zone { color: var(--blue); }
.product-data-path figcaption { margin-top: 18px; color: var(--slate); font-size: 0.9rem; }

/* Support: useful work and allowance, rather than an unexplained chart. */
.support-example-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.support-example-title > div { min-width: 0; }
.support-allowance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.support-allowance dt { color: var(--slate); font-size: 0.72rem; }
.support-allowance dd { margin: 7px 0 0; color: var(--ink); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 500; letter-spacing: -0.04em; }
.support-allowance dd span { font-size: 0.8rem; font-weight: 400; }
.support-allowance > div:nth-child(2) dd { color: var(--blue); }
.support-allowance-bar { height: 7px; margin-bottom: 27px; border-radius: 0; overflow: hidden; background: #e8ecf2; }
.support-allowance-bar span { display: block; width: 60%; height: 100%; background: var(--blue); }
.support-work-items { margin: 0; padding: 0; list-style: none; }
.support-work-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 17px 0; border-top: 1px solid var(--service-rule); }
.support-work-items strong { display: block; font-size: 0.84rem; line-height: 1.45; }
.support-work-items small { display: block; margin-top: 5px; color: var(--slate); font-size: 0.71rem; }
.support-incident { padding: 32px; background: var(--white); border: 1px solid var(--ink-soft); border-radius: 0; }
.support-incident > p { margin-bottom: 25px; color: var(--slate); font-size: 0.96rem; }
.support-incident h3 { margin: 11px 0 17px; font-size: 1.3rem; }
.support-incident ol, .support-incident ul { margin: 0; padding-left: 22px; }
.support-incident li { margin: 18px 0; padding-left: 7px; font-size: 0.9rem; }
.support-incident li::marker { color: var(--blue); font-weight: 500; }
.support-incident li strong { display: block; margin-bottom: 5px; }
.support-incident li span { color: var(--slate); }
.support-incident > :last-child { margin-bottom: 0; }
.support-terms { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 28px; }
.support-portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.support-terms article,
.support-portal-grid article { position: relative; padding: 28px; background: var(--white); border: 1px solid var(--ink-soft); border-radius: 0; overflow: hidden; }
.support-terms article::before,
.support-portal-grid article::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--blue); }
.support-terms h3,
.support-portal-grid h3 { font-size: 1.2rem; margin: 0 0 14px; }
.support-terms p,
.support-portal-grid p { margin: 0; color: var(--slate); font-size: 0.93rem; }

/* Implementation: one customer record connects the commercial journey. */
.journey-customer { display: flex; align-items: center; gap: 15px; margin-bottom: 28px; }
.journey-customer > span { display: grid; width: 45px; height: 45px; flex-shrink: 0; place-items: center; border-radius: 0; background: var(--blue); color: var(--white); font-size: 1.1rem; }
.journey-customer p { margin: 5px 0 0; font-size: 0.75rem; }
.journey-lanes { position: relative; margin: 0; padding: 0; list-style: none; }
.journey-lanes::before { position: absolute; top: 15px; bottom: 26px; left: 6px; width: 1px; content: ""; background: var(--blue-mid); }
.journey-lanes li { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; margin: 0 0 22px; padding-left: 27px; }
.journey-lanes li:last-child { margin-bottom: 0; }
.journey-lanes li::before { position: absolute; top: 6px; left: 0; width: 13px; height: 13px; border: 3px solid var(--white); outline: 1px solid var(--blue); border-radius: 0; content: ""; background: var(--blue); }
.journey-lanes strong { font-size: 0.83rem; }
.journey-lanes p { margin: 0; font-size: 0.81rem; line-height: 1.6; }
.journey-lanes li:last-child p { color: var(--blue); }
.journey-handover { margin-top: 27px; padding-top: 20px; border-top: 1px solid var(--service-rule); font-size: 0.79rem; }
.journey-handover strong { display: block; margin-top: 5px; line-height: 1.55; }

/* Migration: the relationships are the visual subject. */
.migration-map { position: relative; padding: 30px 24px 24px; }
.migration-root { width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 15px 30px; text-align: center; color: var(--white); background: var(--blue); border-radius: 0; }
.migration-root span { display: block; font-size: 0.68rem; margin-bottom: 5px; }
.migration-root strong { font-size: 1rem; }
.migration-relations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; position: relative; }
.migration-relations::before { position: absolute; left: 50%; top: -28px; height: 28px; content: ""; border-left: 1px solid var(--blue-mid); }
.migration-relation { padding: 18px 16px; border: 1px solid var(--blue-mid); border-radius: 0; background: #f5f7ff; }
.migration-relation strong { display: block; font-size: 0.81rem; margin-bottom: 7px; }
.migration-relation span { display: block; color: var(--slate); font-size: 0.71rem; line-height: 1.55; }
.migration-map-note { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--service-rule); font-size: 0.76rem; text-align: center; }
.migration-checks { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.migration-checks caption { text-align: left; color: var(--slate); padding-bottom: 17px; font-size: 0.8rem; }
.migration-checks th { text-align: left; font-weight: 500; }
.migration-checks th, .migration-checks td { padding: 21px 18px; border-bottom: 1px solid var(--service-rule); vertical-align: top; }
.migration-checks thead { color: var(--white); background: var(--ink); font-size: 0.8rem; }
.migration-checks tbody th { width: 28%; }
.migration-checks td { color: var(--slate); }
.migration-test { padding: 32px; border: 1px solid var(--ink-soft); border-radius: 0; background: var(--white); }
.migration-test h3 { margin: 12px 0 20px; font-size: 1.25rem; }
.migration-test p { font-size: 0.9rem; }
.migration-test dl { margin: 0; }
.migration-test dl > div { padding: 16px 0; border-top: 1px solid var(--service-rule); }
.migration-test dt { font-weight: 500; font-size: 0.79rem; }
.migration-test dd { margin: 6px 0 0; color: var(--slate); font-size: 0.83rem; }

/* Integrations: data ownership and the release path have different visual forms. */
.integration-map { padding: 28px; }
.integration-platform { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px 22px; color: var(--white); background: var(--blue); border-radius: 0; }
.integration-platform strong { font-size: 1.1rem; }
.integration-platform span { font-size: 0.72rem; }
.integration-endpoints { margin: 0; padding: 10px 0 0; list-style: none; }
.integration-endpoints li { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 12px; padding-top: 18px; align-items: center; }
.integration-endpoints .integration-link { color: var(--blue); font-size: 1.4rem; text-align: center; }
.integration-endpoints li > div { padding: 15px 17px; border: 1px solid var(--service-rule); border-radius: 0; }
.integration-endpoints strong { display: block; font-size: 0.84rem; }
.integration-endpoints p { margin: 5px 0 0; font-size: 0.73rem; }
.integration-observer { padding: 17px 0 0 47px; color: var(--slate); font-size: 0.75rem; }
.release-path { margin: 0; padding: 10px 26px 22px; list-style: none; counter-reset: release-path; }
.release-path li { position: relative; padding: 16px 0 16px 52px; border-top: 1px solid var(--service-rule); counter-increment: release-path; font-size: 0.85rem; line-height: 1.6; }
.release-path li:first-child { border-top: 0; }
.release-path li::before { content: "0" counter(release-path); position: absolute; top: 15px; left: 0; display: grid; width: 34px; height: 34px; place-items: center; color: var(--blue); background: var(--blue-tint); border-radius: 0; font-size: 0.75rem; font-weight: 700; }
.release-path strong { display: block; color: var(--ink); font-size: 0.92rem; line-height: 1.5; }
.release-path p { margin: 5px 0 0; }
.release-path .service-status { margin-top: 10px; }
.release-path li.is-decision { margin-inline: -14px; padding-inline: 66px 14px; background: var(--blue-soft); border-top-color: transparent; }
.release-path li.is-decision::before { left: 14px; background: var(--white); }
.release-path li.is-decision + li { border-top-color: transparent; }

/* Practical AI: source context alongside a reviewable working draft. */
.ai-workbench { padding: 24px; }
.ai-source-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ai-source-list > span { padding: 7px 10px; font-size: 0.71rem; border: 1px solid var(--service-rule); border-radius: 0; }
.ai-draft { padding: 22px; border-left: 3px solid var(--blue); background: #f5f7ff; }
.ai-draft-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ai-draft h3 { font-size: 1.04rem; }
.ai-draft p { margin: 0 0 14px; font-size: 0.85rem; }
.ai-draft p:last-child { margin-bottom: 0; }
.ai-draft small { color: var(--slate); font-size: 0.68rem; }
.ai-review-line { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--service-rule); font-size: 0.77rem; line-height: 1.6; }
.ai-review-line > span { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--blue-mid); border-radius: 0; color: var(--blue); font-weight: 500; }
.ai-review-line p { margin: 0; }
.ai-delivery-brief { padding: 30px; background: var(--storm); border-radius: 0; color: var(--white); }
.ai-delivery-brief .service-mini-label { color: var(--on-storm-muted); }
.ai-delivery-brief h3 { margin: 13px 0 24px; color: var(--white); font-size: 1.4rem; }
.ai-delivery-brief dl { margin: 0; }
.ai-delivery-brief dl > div { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.17); }
.ai-delivery-brief dt { color: var(--on-storm-muted); font-size: 0.74rem; }
.ai-delivery-brief dd { margin: 7px 0 0; color: var(--white); font-size: 0.86rem; line-height: 1.7; }
.ai-delivery-brief .service-status { margin-top: 24px; color: var(--white); background: var(--blue); }
.ai-adoption-steps { margin: 0; padding: 0; list-style: none; }
.ai-adoption-steps li { display: grid; grid-template-columns: 48px minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; padding: 29px 0; border-top: 1px solid var(--service-rule); }
.ai-adoption-steps li > span { color: var(--blue); font-size: 0.85rem; padding-top: 4px; }
.ai-adoption-steps h3 { margin: 0; font-size: 1.17rem; }
.ai-adoption-steps p { margin: 0; font-size: 0.94rem; color: var(--slate); }

/* EKWIS AI: a legible example in the first screen, with explicit review mode. */
.product-wordmark { display: flex; align-items: center; width: fit-content; gap: 13px; margin-bottom: 29px; }
.product-wordmark img { width: 112px; height: auto; filter: brightness(0) invert(1); }
.product-wordmark > span { padding-left: 13px; border-left: 1px solid rgba(255, 255, 255, 0.4); color: var(--white); font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; line-height: 1; }
.product-intro h1 { max-width: 14ch; }
.product-intro .page-eyebrow { font-size: 0.72rem; margin-bottom: 18px; }
.product-flow-example { padding: 24px; }
.product-flow-input { padding-bottom: 20px; }
.product-flow-input h3 { margin-bottom: 9px; font-size: 1.12rem; }
.product-flow-input .service-example-heading { margin-bottom: 9px; font-size: 1.12rem; }
.product-flow-input p { margin: 0; font-size: 0.82rem; line-height: 1.7; }
.product-flow-action { position: relative; padding: 19px 20px 19px 57px; background: var(--blue); color: var(--white); border-radius: 0; }
.product-flow-action::before { position: absolute; left: 18px; top: 20px; display: grid; place-items: center; width: 26px; height: 26px; content: "AI"; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 0; font-size: 0.65rem; font-weight: 500; }
.product-flow-action strong { display: block; font-size: 0.9rem; }
.product-flow-action span { display: block; margin-top: 5px; color: #e4ebff; font-size: 0.71rem; }
.product-flow-connector { height: 22px; margin-left: 30px; border-left: 1px solid var(--blue-mid); }
.product-flow-result { padding: 20px; border: 1px solid var(--blue-mid); border-radius: 0; background: #f5f7ff; }
.product-flow-result dl { margin: 0; }
.product-flow-result dl > div + div { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--service-rule); }
.product-flow-result dt { margin-bottom: 5px; color: var(--slate); font-size: 0.68rem; }
.product-flow-result dd { margin: 0; color: var(--ink); font-size: 0.83rem; line-height: 1.6; }
.product-flow-review { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 17px; font-size: 0.76rem; }
.product-flow-review > strong { font-size: 0.77rem; line-height: 1.5; }
.product-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.product-capabilities > article { padding: clamp(24px, 3.5vw, 38px); border: 1px solid var(--ink-soft); border-radius: 0; background: var(--white); }
.product-capabilities .service-path-number { margin: 0 0 15px; }
.product-capabilities h3 { margin: 0 0 17px; font-size: 1.55rem; }
.product-capabilities > article > p:not(.service-path-number) { color: var(--slate); font-size: 0.95rem; }
.product-mode { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--service-rule); }
.product-mode h4 { margin: 0 0 8px; font-size: 0.9rem; }
.product-mode p { margin: 0; color: var(--slate); font-size: 0.83rem; }
.product-mode-note { margin: 20px 0 0; padding: 19px 22px; color: #485462; background: var(--blue-soft); border-left: 3px solid var(--blue); font-size: 0.85rem; }
.product-controls { margin-top: 28px; padding: clamp(24px, 3.5vw, 38px); background: var(--white); border: 1px solid var(--ink-soft); border-radius: 0; }
.product-controls h3 { margin: 0 0 12px; font-size: 1.3rem; }
.product-controls > p { max-width: 68ch; margin: 0; color: var(--slate); font-size: 0.93rem; }
.product-controls .service-bullet-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 48px; margin: 20px 0 22px; font-size: 0.93rem; }
.product-controls .service-bullet-list li { margin: 0; }
.product-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.product-use-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; }
.product-use-cases article { position: relative; padding: 28px; background: var(--white); border: 1px solid var(--ink-soft); border-radius: 0; overflow: hidden; }
.product-use-cases article::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--blue); }
.product-use-cases h3 { font-size: 1.2rem; margin: 14px 0; }
.product-use-cases p { color: var(--slate); font-size: 0.93rem; }
.product-availability { position: relative; padding: clamp(25px, 4vw, 42px); background: var(--storm); border-radius: 0; color: var(--white); --focus-ring: var(--white); }
.product-availability h3 { margin: 0 0 24px; color: var(--white); font-size: 1.5rem; }
.product-availability dl { margin: 0; }
.product-availability dl > div { padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.product-availability dt { color: var(--white); font-size: 0.84rem; font-weight: 500; }
.product-availability dd { margin: 9px 0 0; color: var(--on-storm-muted); font-size: 0.85rem; line-height: 1.7; }
.product-availability .btn { margin-top: 22px; }
.product-faq { border-top: 1px solid var(--service-rule); }
.product-faq details { border-bottom: 1px solid var(--service-rule); }
.product-faq summary { position: relative; cursor: pointer; padding: 23px 34px 23px 0; font-size: 1rem; font-weight: 500; list-style: none; }
.product-faq summary::-webkit-details-marker { display: none; }
.product-faq summary::after { content: "+"; position: absolute; right: 2px; top: 18px; color: var(--blue); font-size: 1.5rem; font-weight: 400; }
.product-faq details[open] summary::after { content: "−"; }
.product-faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; border-radius: 0; }
.product-faq details > div { padding: 0 25px 22px 0; }
.product-faq details p { margin: 0 0 12px; color: var(--slate); font-size: 0.9rem; }
.product-faq details p:last-child { margin-bottom: 0; }

/* Keep the information in the illustrations readable at its displayed size. */
.service-example-tag, .service-mini-label, .service-status,
.support-work-items small, .migration-root span, .migration-relation span,
.integration-platform span, .integration-endpoints p, .ai-source-list > span,
.ai-draft small, .product-flow-action span, .product-flow-result dt {
  font-size: 0.75rem;
}
.ai-draft .service-example-heading { font-size: 1.04rem; }

@media (max-width: 980px) {
  .service-intro-grid { gap: 30px; }
  .service-intro h1 { font-size: clamp(2.3rem, 4.8vw, 3.4rem); }
  .service-intro .btn { font-size: 0.83rem; padding-inline: 17px; }
  .support-work-items li { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .support-work-items .service-status { font-size: 0.75rem; }
  .service-story { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .service-editorial { gap: 35px; }
  .journey-lanes li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .product-flow-example, .ai-workbench { padding: 20px; }
}

@media (max-width: 760px) {
  .service-intro-grid, .service-editorial, .service-editorial--reverse, .service-story { grid-template-columns: minmax(0, 1fr); }
  .service-intro h1 { max-width: 18ch; font-size: clamp(2.25rem, 8vw, 3.3rem); }
  .service-intro-copy > p:not(.page-eyebrow) { max-width: 62ch; }
  .service-intro-grid > .service-example { width: 100%; max-width: 590px; margin-top: 10px; }
  .support-work-items li { grid-template-columns: minmax(0, 1fr) auto; }
  .journey-lanes li { grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
  .service-intro .btn { font-size: 0.9rem; }
  .service-section-header h2, .service-editorial-copy h2 { max-width: 24ch; }
  .service-two-paths, .product-capabilities { gap: 27px; }
  .service-two-paths h3 { font-size: 1.3rem; }
  .service-scope-list > li { gap: 24px; }
  .support-terms,
  .support-portal-grid { grid-template-columns: minmax(0, 1fr); gap: 27px; }
  .product-use-cases { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .product-use-cases article { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px 14px; border-top-width: 1px; }
  .product-use-cases article > span { grid-row: 1 / 3; margin-top: 2px; }
  .product-use-cases h3 { margin: 0; }
  .product-use-cases p { margin: 0 0 20px; }
  .product-mode-note { margin-top: 26px; }
  .product-controls .service-bullet-list, .product-proof { grid-template-columns: minmax(0, 1fr); }
  .service-next, .service-proof { align-items: flex-start; flex-direction: column; }
  .product-data-path ol { grid-template-columns: minmax(0, 1fr); }
  .product-data-path li:not(:last-child)::after { content: "↓" / ""; top: auto; right: auto; bottom: -18px; left: 20px; height: 18px; line-height: 18px; transform: none; }
  .ai-adoption-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px 18px; }
  .ai-adoption-steps li > span { grid-row: 1 / 3; }
  .ai-adoption-steps p { grid-column: 2; }
}

@media (max-width: 540px) {
  .service-intro { padding-block: 42px; }
  .service-intro .hero-actions { align-items: stretch; }
  .service-intro .hero-actions .btn { width: 100%; }
  .service-intro-copy > p:not(.page-eyebrow) { font-size: 0.98rem; }
  .service-intro-copy > p.service-intro-note { font-size: 0.78rem; }
  .service-canvas-header { padding: 16px 18px; flex-wrap: wrap; gap: 9px; }
  .service-canvas-body, .integration-map, .product-flow-example, .ai-workbench { padding: 20px 18px; }
  .service-two-paths, .product-capabilities, .service-related { grid-template-columns: minmax(0, 1fr); }
  .service-scope-list > li { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 76px 22px 24px; }
  .service-scope-list > li::before { top: 22px; left: 22px; }
  .support-example-title { flex-direction: column; gap: 12px; }
  .support-work-items li { grid-template-columns: minmax(0, 1fr); }
  .support-incident, .migration-test { padding: 23px; }
  .service-story { padding: 28px 24px; gap: 25px; }
  .service-story blockquote p { font-size: 1.05rem; }
  .service-story h2 { font-size: 1.6rem; }
  .journey-lanes li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .migration-map { padding: 25px 17px 20px; }
  .migration-relations { gap: 10px; }
  .migration-relation { padding: 14px 12px; }
  .migration-relation strong { font-size: 0.76rem; }
  .migration-relation span { font-size: 0.75rem; }
  .migration-checks { font-size: 0.8rem; }
  .migration-checks th, .migration-checks td { padding: 16px 10px; }
  .migration-checks tbody th { width: 32%; }
  .integration-platform { flex-direction: column; align-items: flex-start; gap: 7px; padding: 17px; }
  .integration-endpoints li { grid-template-columns: 22px minmax(0, 1fr); gap: 7px; }
  .integration-observer { padding-left: 29px; }
  .release-path { padding: 6px 18px 18px; }
  .release-path li { padding-left: 48px; }
  .release-path li.is-decision { margin-inline: -10px; padding-inline: 58px 10px; }
  .release-path li.is-decision::before { left: 10px; }
  .ai-draft { padding: 18px; }
  .ai-draft-header { flex-direction: column; gap: 10px; }
  .ai-delivery-brief { padding: 25px; }
  .product-flow-review { flex-direction: column; gap: 9px; }
  .product-flow-action { padding-left: 53px; padding-right: 14px; }
  .product-wordmark { margin-bottom: 24px; }
  .product-wordmark img { width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-enhanced *, .service-enhanced *::before, .service-enhanced *::after { scroll-behavior: auto; }
  .service-intro .service-canvas { animation: none; }
}