/* Scoped to the product story; the hero and all later sections are unchanged. */
.product-overview.workflow-overview {
  --wf-red: #a51422;
  --wf-line: #dedbd6;
  --wf-muted: #706d69;
  position: relative;
  padding: 0;
  overflow: visible;
  background: #faf9f6;
  color: #201c1d;
  border-bottom: 1px solid var(--wf-line);
}
.workflow-overview::before { display: none; }
.wf-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.workflow-overview svg:where(:not(.wf-symbols):not(.wf-links)) {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}
.workflow-sticky { padding: 80px 0; }
.workflow-overview.is-scroll-driven { height: var(--wf-story-height); }
.is-scroll-driven .workflow-sticky { position: sticky; top: var(--wf-sticky-top, 80px); padding: 24px 0; }
.wf-viewport-size {
  position: absolute; top: 0; left: 0; width: 0;
  height: 100vh; height: 100svh;
  visibility: hidden; pointer-events: none;
}
.workflow-heading {
  max-width: 850px; margin: 0 auto 32px; text-align: center;
  font: 500 clamp(36px, 4vw, 50px)/1.08 var(--font-display); letter-spacing: -2.1px;
}
.workflow-layout { display: grid; grid-template-columns: minmax(170px, 22%) minmax(0, 1fr); gap: 48px; align-items: center; }
.workflow-nav { padding: 28px 0 0; }
.workflow-nav ol { margin: 0; padding: 0; list-style: none; }
.workflow-nav li { position: relative; }
.workflow-nav li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 40px; height: 42px; width: 1px; background: var(--wf-line); }
.wf-step {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 19px;
  width: 100%; min-height: 64px; padding: 0 10px 0 0; border: 0;
  background: transparent; color: #817c78; cursor: pointer; text-align: left;
  font: 500 22px/1.2 var(--font-display); transition: color .2s;
}
.wf-step:hover { color: var(--wf-red); }
.wf-step:focus-visible { outline: 2px solid var(--wf-red); outline-offset: 5px; border-radius: 4px; }
.wf-step.is-active { color: #72000e; }
.wf-step-dot { display: block; width: 21px; height: 21px; flex: 0 0 21px; border: 1px solid #d5d0ca; border-radius: 50%; background: #faf9f6; transition: border-color .2s, box-shadow .2s; }
.wf-step.is-active .wf-step-dot { border: 6px solid var(--wf-red); box-shadow: 0 0 0 5px #a514220b; }
.wf-step.is-complete .wf-step-dot { background: #e8cbd0; border: 6px solid #faf9f6; box-shadow: 0 0 0 1px #d8bbc0; }
.wf-step-number { margin-left: auto; font: 400 12px var(--font-mono); opacity: 0; }
.wf-step.is-active .wf-step-number { opacity: .7; }
.wf-scroll-hint { display: none; margin: 30px 0 0 40px; color: var(--wf-muted); font-size: 12px; }
.is-scroll-driven .wf-scroll-hint { display: block; }
.wf-scroll-hint span { margin-right: 7px; }
.workflow-content { min-width: 0; }
.wf-canvas-frame { min-width: 0; }
.wf-canvas-frame > .wf-canvas { transform-origin: top center; }
.wf-panel-heading { min-height: 73px; }
.wf-panel-heading h3 { margin: 0 0 10px; font: 500 25px/1.2 var(--font-display); letter-spacing: -.65px; }
.wf-panel-heading p { margin: 0; color: var(--wf-muted); font-size: 15px; line-height: 1.5; }
.wf-canvas { position: relative; height: 430px; border: 1px solid #e3dfda; border-radius: 18px; background: #f2f0ec; overflow: hidden; }
.wf-canvas-footer { display: flex; justify-content: space-between; margin-top: 12px; color: var(--wf-muted); font-size: 11px; line-height: 1.5; }
.wf-current-count { font-family: var(--font-mono); }

/* One persistent canvas. JavaScript moves these nodes and their connecting paths. */
.wf-canvas { isolation: isolate; }
.wf-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; stroke: #d7c8c5; stroke-width: 1.25; pointer-events: none; }
.wf-links .wf-flow { stroke: #a51422; stroke-dasharray: 4 180; stroke-linecap: round; animation: wf-data-flow 4s linear infinite; }
@keyframes wf-data-flow { to { stroke-dashoffset: -368; } }
.wf-node { position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; box-sizing: border-box; will-change: transform; }
.wf-hub { justify-content: center; gap: 9px; border: 1px solid #dec8ca; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px #72000e08; }
.wf-hub img { width: 28px; height: 28px; }
.wf-hub strong { font: 500 16px var(--font-display); letter-spacing: -.3px; }
[data-stage="connect"] .wf-hub { flex-direction: column; }
[data-stage="connect"] .wf-hub img { width: 35px; height: 35px; }
.wf-source { padding: 0 10px; gap: 8px; border: 1px solid #e0dcd7; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; }
.wf-source-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; }
.workflow-overview .wf-source-icon svg { width: 20px; height: 20px; }
.wf-intune { color: #196fba; background: #e9f2fc; }
.wf-outlook { color: #096ac2; background: #e9f3ff; }
.wf-gmail { color: #c04639; background: #fcf0ee; }
.wf-policy { color: #8e4d57; background: #f7ecee; }
.wf-department { justify-content: center; gap: 7px; border: 1px solid #ded6cf; border-radius: 7px; background: #eae4df; font-size: 13px; font-weight: 500; }
.workflow-overview .wf-department svg { width: 17px; height: 17px; color: #8b7b71; }
.wf-person { gap: 7px; font-size: 13px; font-weight: 500; }
.wf-avatar { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; background: #e3d9e8; color: #665271; font-size: 11px; }
.wf-avatar-alt { background: #dce6de; color: #4b6753; }
.wf-avatar-finance { background: #e6decd; color: #756342; }
.wf-app { padding: 0 11px; border: 1px solid #e1dcd6; border-radius: 8px; background: #fff; box-shadow: 0 3px 10px #24121003; }
.wf-app-identity { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.wf-app-icon { display: inline-grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 6px; }
.workflow-overview .wf-app-icon svg { width: 18px; height: 18px; }
.wf-purple { background: #eee7f7; color: #7953a1; }
.wf-peach { background: #fae8df; color: #ac6349; }
.wf-blue { background: #e4edf7; color: #4e76a0; }
.wf-sage { background: #e5eee6; color: #54785b; }
.wf-gold { background: #f4ecd9; color: #997936; }
.wf-app-risk { position: absolute; left: 43%; display: flex; align-items: center; gap: 13px; opacity: 0; transform: translateX(12px); transition: opacity .3s, transform .5s; }
.wf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 5px; font-size: 11px; line-height: 1.3; font-weight: 600; white-space: nowrap; }
.wf-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.wf-high { color: #9e2030; background: #f9e8eb; }
.wf-medium { color: #8c6318; background: #f7efd9; }
.wf-low { color: #46725d; background: #e8f0e9; }
.wf-risk-reason { color: var(--wf-muted); font-size: 12px; white-space: nowrap; transition: opacity .25s; }
.wf-app-action { position: absolute; right: 12px; opacity: 0; transform: translateX(12px); transition: opacity .3s, transform .5s; }
.wf-app-action::before { display: none; }
.wf-result-label { display: none; }
[data-stage="assess"] .wf-app-risk, [data-stage="act"] .wf-app-risk, [data-stage="evidence"] .wf-app-risk,
[data-stage="act"] .wf-app-action, [data-stage="evidence"] .wf-app-action { opacity: 1; transform: none; transition-delay: .25s; }
[data-stage="act"] .wf-risk-reason, [data-stage="evidence"] .wf-risk-reason { opacity: 0; }
[data-stage="evidence"] .wf-action-label { display: none; }
[data-stage="evidence"] .wf-result-label { display: inline; }
.wf-paper { position: absolute; inset: 12px 20px 16px; z-index: 0; border: 1px solid #e0d8d3; border-radius: 6px 20px 6px 6px; background: #fff; box-shadow: 4px 4px 0 #e7e1db; opacity: 0; transform: translateY(25px) scale(.94); transition: opacity .5s, transform .8s; }
[data-stage="evidence"] .wf-paper { opacity: 1; transform: none; }
.wf-paper-format { position: absolute; top: 21px; right: 20px; font: 11px var(--font-mono); color: #928481; }
.wf-paper h4 { position: absolute; top: 63px; left: 17px; margin: 0; font: 500 22px/1.1 var(--font-display); letter-spacing: -.6px; }
.wf-paper > p { position: absolute; top: 93px; left: 17px; margin: 0; font-size: 11px; color: var(--wf-muted); }
.wf-paper > p span { margin: 0 5px; }
.wf-paper-footer { position: absolute; bottom: 13px; left: 17px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--wf-muted); }
.workflow-overview .wf-paper-footer svg { width: 15px; height: 15px; color: #46725d; }
.wf-context { position: absolute; top: 77px; left: 28px; right: 28px; color: var(--wf-muted); font-size: 12px; opacity: 0; transition: opacity .3s; }
[data-stage="assess"] .wf-context, [data-stage="act"] .wf-context { opacity: 1; transition-delay: .3s; }
.wf-context-act, [data-stage="act"] .wf-context-assess { display: none; }
[data-stage="act"] .wf-context-act { display: inline; }
.wf-canvas-caption { position: absolute; bottom: 12px; left: 0; width: 100%; margin: 0; text-align: center; font-size: 11px; color: var(--wf-muted); opacity: 0; transition: opacity .3s; }
.wf-canvas-caption span { margin: 0 6px; }
[data-stage="organize"] .wf-canvas-caption { opacity: 1; }
.wf-enforcement-note { position: absolute; bottom: 11px; left: 15px; right: 15px; margin: 0; color: var(--wf-muted); font-size: 10px; line-height: 1.4; text-align: center; opacity: 0; transition: opacity .3s; }
[data-stage="act"] .wf-enforcement-note { opacity: 1; transition-delay: .4s; }
.wf-mobile-workspace { display: none; }
.wf-desktop-only { display: none; }
.wf-column-short { display: none; }

@media (max-height: 820px) and (min-width: 900px) {
  .workflow-heading { font-size: 44px; margin-bottom: 24px; }
  .is-scroll-driven .workflow-sticky { padding: 20px 0; }
  .wf-panel-heading { min-height: 68px; }
  .wf-canvas { height: 390px; }
}
@media (max-width: 1120px) {
  .workflow-layout { grid-template-columns: 155px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 899px) {
  .workflow-sticky { padding: 70px 0; }
  .workflow-heading { margin-bottom: 34px; }
  .workflow-layout { grid-template-columns: 1fr; gap: 25px; }
  .workflow-nav { padding: 0; }
  .workflow-nav ol { display: flex; justify-content: space-between; }
  .workflow-nav li { flex: 1; }
  .wf-step { flex-direction: column; gap: 12px; padding: 4px 0; min-height: 60px; text-align: center; font-size: 16px; }
  .workflow-nav li:not(:last-child)::after { top: 14px; left: calc(50% + 16px); height: 1px; width: calc(100% - 32px); }
  .wf-step-dot { width: 19px; height: 19px; flex-basis: 19px; }
  .wf-step-number { display: none; }
  .wf-panel-heading { min-height: 78px; }
  .wf-panel-heading h3 { font-size: 24px; }
}
@media (max-width: 600px) {
  .workflow-sticky { padding: 56px 0; }
  .workflow-heading { font-size: 35px; letter-spacing: -1.4px; }
  .wf-desktop-break { display: none; }
  .wf-panel-heading { min-height: 99px; }
  .wf-panel-heading p { font-size: 15px; }
  .wf-step { font-size: 13px; }
  .wf-canvas { height: 535px; border-radius: 12px; }
  .wf-source { padding: 0 8px; font-size: 11px; gap: 6px; }
  .wf-source-icon { width: 24px; height: 26px; flex-basis: 24px; }
  .workflow-overview .wf-source-icon svg { width: 19px; height: 19px; }
  .wf-hub strong { font-size: 15px; }
  [data-stage="connect"] .wf-hub { flex-direction: row; }
  [data-stage="connect"] .wf-hub img { width: 28px; height: 28px; }
  .wf-department { gap: 5px; font-size: 11px; }
  .workflow-overview .wf-department svg { width: 14px; height: 14px; }
  .wf-app { padding: 0 8px; }
  .wf-app-identity { gap: 6px; font-size: 12px; }
  .wf-app-icon { width: 23px; height: 23px; flex-basis: 23px; }
  .wf-context { left: 14px; right: 14px; font-size: 11px; }
  [data-stage="assess"] .wf-app-identity, [data-stage="act"] .wf-app-identity, [data-stage="evidence"] .wf-app-identity { position: absolute; top: 7px; left: 9px; }
  .wf-app-risk { left: 10px; bottom: 6px; gap: 9px; }
  .wf-risk-reason { font-size: 11px; }
  .wf-app-action { right: 9px; top: 12px; font-size: 10px; }
  .wf-paper { left: 8px; right: 8px; }
  .wf-paper h4 { left: 12px; font-size: 20px; }
  .wf-paper > p { left: 12px; font-size: 10px; }
  .wf-paper > p span { margin: 0 3px; }
  .wf-paper-footer { left: 12px; font-size: 10px; }
}
/* Desktop revision only. The existing smaller-screen presentation is retained. */
@media (min-width: 900px) {
  .wf-legacy-only { display: none; }
  .wf-story-heading { min-height: 108px; margin-bottom: 28px; text-align: center; }
  .workflow-heading > .wf-desktop-only { display: inline; }
  .workflow-heading {
    max-width: none; width: 100%; margin: 0; white-space: nowrap;
    font-size: clamp(34px, 3.8vw, 50px); letter-spacing: -1.8px;
  }
  .wf-story-description.wf-desktop-only {
    display: block; max-width: none; margin: 15px auto 0;
    color: var(--wf-muted); font-size: clamp(11px, 1.06vw, 16px); line-height: 1.5;
    white-space: nowrap; text-wrap: nowrap;
  }
  .workflow-layout { grid-template-columns: minmax(155px, 20%) minmax(0, 1fr); gap: 32px; }
  .workflow-nav { padding-top: 0; }
  .wf-panel-heading { display: none; }
  .wf-canvas { height: 480px; }
  .wf-node.wf-desktop-only { display: flex; }
  .wf-node img.wf-desktop-only, .wf-entity-copy.wf-desktop-only { display: block; }
  .wf-hub { flex-direction: column; }
  .wf-hub img, [data-stage="connect"] .wf-hub img { width: 60px; height: 60px; }
  .wf-hub { box-shadow: none; }
  .wf-source { font-size: 13px; }
  .wf-source-icon:not(.wf-policy), .wf-app-icon { background: transparent; }
  .wf-source-icon img, .wf-os-icon img, .wf-app-icon img { width: 28px; height: 28px; object-fit: contain; }

  .wf-estate-region {
    display: block; position: absolute; z-index: 0;
    top: 14px; bottom: 14px; left: var(--wf-estate-left); right: 14px;
    border-radius: 12px; background: #ffffff60;
    opacity: 0; transition: opacity .35s;
  }
  .wf-estate-region > span {
    position: absolute; top: 12px; left: 12px;
    font: 500 18px/1.2 var(--font-display); letter-spacing: -.3px; color: #534440;
  }
  [data-stage="connect"] .wf-estate-region { opacity: 1; }
  .wf-estate-columns {
    display: grid; grid-template-columns: 21fr 20fr 24fr 35fr; gap: var(--wf-column-gap);
    position: absolute; top: 28px; left: 18px; right: 18px;
    opacity: 0; color: #756b66; font-size: 12px; transition: opacity .25s;
  }
  [data-stage="organize"] .wf-estate-columns { opacity: 1; transition-delay: .6s; }
  .wf-department, .wf-person, .wf-device {
    justify-content: flex-start; padding: 0 10px; gap: 9px;
    border: 1px solid #e6e1db; border-radius: 8px; background: #fff;
    font-size: 14px; font-weight: 500; white-space: nowrap;
  }
  .wf-entity-copy { min-width: 0; line-height: 1.25; font-size: 14px; transition: font-size .7s ease; }
  [data-stage="connect"] .wf-entity-copy { font-size: 13px; }
  .wf-entity-type, .wf-entity-type.wf-desktop-only {
    display: block; height: 0; margin-bottom: 0; overflow: hidden;
    opacity: 0; transform: translateY(-4px);
    color: #827b75; font-size: 11px; font-weight: 400;
    transition: opacity .35s ease, height .7s ease, margin-bottom .7s ease, transform .7s ease;
  }
  [data-stage="connect"] .wf-entity-type {
    height: 14px; margin-bottom: 2px; opacity: 1; transform: none;
  }
  .workflow-overview .wf-department svg { width: 28px; height: 28px; color: #82766e; }
  .wf-avatar .wf-desktop-only { display: block; width: 19px; height: 19px; }
  .wf-avatar {
    width: 28px; height: 28px; flex-basis: 28px;
    background: #f0ede9; color: #716963;
  }
  .wf-os-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; }
  .wf-app { overflow: hidden; border-color: #e6e1db; box-shadow: none; }
  .wf-app-identity { font-size: 14px; }
  .wf-app-icon { width: 28px; height: 28px; flex-basis: 28px; }
  [data-stage="connect"] .wf-app,
  [data-stage="connect"] .wf-department,
  [data-stage="connect"] .wf-person,
  [data-stage="connect"] .wf-device { padding: 0 10px; gap: 9px; font-size: 13px; }
  [data-stage="connect"] .wf-app-identity { width: 100%; min-width: 0; gap: 9px; font-size: 13px; }

  .wf-app-risk {
    top: 50%; bottom: auto; height: 40px; margin-top: -20px; left: 25%; right: 100px;
    display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: stretch; gap: 12px;
  }
  .wf-risk-summary.wf-desktop-only {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; padding: 0 6px; border-radius: 6px; color: #fff; background: #bb3c52;
  }
  .wf-risk-summary small { display: none; }
  .wf-risk-summary strong { font: 500 16px/1 var(--font-display); }
  .wf-risk-summary.wf-risk-medium { color: #513b0c; background: #f0ce7f; }
  .wf-risk-summary.wf-risk-low { color: #fff; background: #438269; }
  .wf-assessment-columns.wf-desktop-only {
    display: grid; grid-template-columns: 25% 100px minmax(0, 1fr) 100px;
    position: absolute; z-index: 3; top: 0; left: 0;
    font-size: 11px; line-height: 16px; color: #756b66;
    opacity: 0; pointer-events: none;
  }
  .wf-app-heading.wf-desktop-only {
    display: block; position: absolute; z-index: 3; top: 0; left: 0;
    color: #756b66; font-size: 11px; line-height: 16px;
    white-space: nowrap; pointer-events: none;
  }
  .wf-assessment-columns > :first-child { padding-left: 12px; }
  .wf-assessment-columns > :last-child { text-align: center; padding-right: 12px; }
  .wf-decision-heading { opacity: 0; transition: opacity .3s; }
  [data-stage="act"] .wf-decision-heading,
  [data-stage="evidence"] .wf-decision-heading { opacity: 1; }
  .wf-risk-signals.wf-desktop-only {
    display: flex; align-items: center; gap: 6px; min-width: 0;
  }
  .wf-risk-signal {
    display: flex; align-items: center; flex: 0 0 auto;
    min-height: 30px; padding: 5px 8px; border-radius: 8px;
    background: #faf0f2; color: #803047; font-size: 12px; line-height: 1.25; white-space: nowrap;
  }
  .wf-risk-medium + .wf-risk-signals .wf-risk-signal {
    background: #faf6ec; color: #75571e;
  }
  .wf-risk-low + .wf-risk-signals .wf-risk-signal {
    background: #f0f6f1; color: #38634d;
  }
  .wf-badge { font-size: 12px; }
  .wf-app-action { width: 78px; min-height: 30px; justify-content: center; padding: 4px 5px; }
  .wf-app-action.wf-desktop-only { display: flex; }
  .wf-result-label > .wf-desktop-only { display: inline; }
  [data-stage="evidence"] .wf-action-label { display: inline; }
  [data-stage="evidence"] .wf-result-label { display: none; }
  [data-stage="assess"] .wf-app-risk, [data-stage="act"] .wf-app-risk, [data-stage="evidence"] .wf-app-risk,
  [data-stage="act"] .wf-app-action, [data-stage="evidence"] .wf-app-action { transition-delay: .6s; }

  .wf-rules.wf-desktop-only {
    display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center;
    position: absolute; top: 18px; left: 24px; right: 24px; height: 82px;
    padding: 12px 16px; border: 1px solid #e1d9d1; border-radius: 8px;
    background: #fffdf9; opacity: 0; transform: translateY(-12px);
    transition: opacity .3s, transform .5s; pointer-events: none;
  }
  [data-stage="act"] .wf-rules { opacity: 1; transform: none; transition-delay: 1.05s; }
  .wf-rules-title { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #67584f; }
  .wf-rules-title strong { font-weight: 500; }
  .wf-rules ul {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.4; color: #776c65;
  }
  .wf-rules li { display: flex; align-items: center; gap: 8px; }
  .wf-rules li::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #c8aca4; }
  .wf-paper h4 { top: 25px; font-size: 24px; }
  .wf-paper > p { top: 63px; font-size: 12px; }
  .wf-paper > p .wf-desktop-only { display: inline; margin: 0; }
  .wf-paper-format { top: 28px; font-size: 12px; }
  .wf-paper-footer { font-size: 12px; }
  .wf-canvas-caption, .wf-enforcement-note, .is-scroll-driven .wf-scroll-hint { display: none; }
  .wf-canvas-footer { display: none; }
}
@media (min-width: 900px) and (max-width: 1120px) {
  .workflow-layout { grid-template-columns: 155px minmax(0, 1fr); gap: 24px; }
  .wf-department, .wf-person, .wf-device { padding: 0 8px; gap: 7px; font-size: 13px; }
  .wf-app-identity { font-size: 13px; }
  .wf-app-risk { grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
  .wf-assessment-columns.wf-desktop-only { grid-template-columns: 25% 88px minmax(0, 1fr) 100px; }
  .wf-risk-summary strong { font-size: 15px; }
  .wf-risk-signal { padding: 5px 6px; font-size: 11px; }
  .wf-rules.wf-desktop-only { grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .wf-rules ul { gap: 8px; }
}
/* Compact product story. It mirrors the desktop data without reusing the legacy canvas. */
@media (max-width: 899px) {
  .workflow-sticky { padding: 64px 0; }
  .wf-story-heading {
    min-height: 154px;
    margin-bottom: 22px;
    text-align: center;
  }
  .workflow-heading { max-width: 720px; margin: 0 auto; }
  .workflow-heading > .wf-desktop-only { display: inline; }
  .wf-story-description.wf-desktop-only {
    display: block;
    max-width: 650px;
    margin: 14px auto 0;
    color: var(--wf-muted);
    font-size: 15px;
    line-height: 1.55;
  }
  .wf-story-heading .wf-legacy-only,
  .wf-panel-heading,
  .wf-canvas,
  .wf-canvas-footer { display: none; }
  .workflow-layout { gap: 20px; }
  .wf-step {
    min-height: 64px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .wf-mobile-workspace {
    display: block;
    min-width: 0;
    border: 1px solid #e2ddd7;
    border-radius: 16px;
    background: #f2f0ec;
    isolation: isolate;
  }
  .wf-mobile-stage {
    display: none;
    min-width: 0;
    padding: 24px;
    box-sizing: border-box;
  }
  .wf-mobile-stage.is-active { display: block; }
  .wf-mobile-stage img {
    display: block;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    object-fit: contain;
  }
  .wf-mobile-card {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 54px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #e1dcd6;
    border-radius: 9px;
    background: #fff;
    color: #403835;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
  }
  .workflow-overview .wf-mobile-card > svg { width: 28px; height: 28px; color: #82766e; }
  .wf-mobile-connect,
  .wf-mobile-tree { position: relative; }
  .workflow-overview .wf-mobile-links {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    pointer-events: none;
  }
  .wf-mobile-links .wf-mobile-link { fill: none; stroke: #c6a5a7; stroke-width: 1.4; }
  .wf-mobile-links .wf-mobile-link-flow {
    fill: none;
    stroke: #a51422;
    stroke-width: 1.8;
    stroke-dasharray: 4 11;
    animation: wf-mobile-data-flow 1.8s linear infinite;
  }
  .wf-mobile-links .wf-mobile-arrowhead { fill: #a51422; stroke: none; }
  @keyframes wf-mobile-data-flow { to { stroke-dashoffset: -30; } }
  .wf-mobile-intake {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, .85fr);
    align-items: center;
  }
  .wf-mobile-sources {
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .wf-mobile-source {
    min-height: 58px;
    padding: 9px;
    font-size: 12px;
    font-weight: 600;
  }
  .wf-mobile-source > span { min-width: 0; }
  .workflow-overview .wf-mobile-policy svg { color: #8e4d57; }
  .wf-mobile-hub {
    position: relative;
    z-index: 1;
    grid-column: 3;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 108px;
    padding: 12px 5px;
    box-sizing: border-box;
    border: 1px solid #d9c0c4;
    border-radius: 11px;
    background: #fff;
  }
  .wf-mobile-hub img { width: 35px; height: 35px; }
  .wf-mobile-hub strong { font: 500 17px/1.2 var(--font-display); letter-spacing: -.3px; }
  .wf-mobile-estate {
    position: relative;
    z-index: 1;
    margin-top: 48px;
    padding: 12px;
    border: 1px solid #ded8d1;
    border-radius: 11px;
    background: #f9f7f4;
  }
  .wf-mobile-estate > p {
    margin: 0 0 12px;
    color: #534440;
    font: 500 18px/1.2 var(--font-display);
  }
  .wf-mobile-estate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .wf-mobile-entity-copy { display: block; min-width: 0; }
  .wf-mobile-entity-copy small {
    display: block;
    margin-bottom: 3px;
    color: #827b75;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.25;
  }
  .wf-mobile-tree { max-width: 520px; margin: 0 auto; }
  .wf-mobile-branch { list-style: none; margin: 0; padding: 0; }
  .wf-mobile-branch > li { min-width: 0; }
  .wf-mobile-branch > li + li { margin-top: 12px; }
  .wf-mobile-branch .wf-mobile-branch { margin-top: 12px; padding-left: 24px; }
  .wf-mobile-list { display: grid; gap: 10px; min-width: 0; }
  .wf-mobile-app-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e1dcd6;
    border-radius: 9px;
    background: #fff;
  }
  .wf-mobile-app-name {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
    color: #403835;
  }
  .wf-mobile-app-name > span { min-width: 0; }
  .wf-mobile-app-name strong { font-size: 13px; font-weight: 600; line-height: 1.3; }
  .wf-mobile-app-name small,
  .wf-mobile-risk-field > small,
  .wf-mobile-signal-field > small,
  .wf-mobile-decision-field > small {
    display: block;
    margin-bottom: 5px;
    color: var(--wf-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.25;
  }
  .wf-mobile-risk-field { min-width: 0; }
  .wf-mobile-risk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 9px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
  }
  .wf-mobile-risk-high { color: #fff; background: #bb3c52; }
  .wf-mobile-risk-medium { color: #513b0c; background: #f0ce7f; }
  .wf-mobile-risk-low { color: #fff; background: #438269; }
  .wf-mobile-signal-field { grid-column: 1 / -1; min-width: 0; }
  .wf-mobile-signals { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .wf-mobile-signals span {
    max-width: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
    border-radius: 7px;
    background: #faf0f2;
    color: #803047;
    font-size: 12px;
    line-height: 1.3;
  }
  .wf-mobile-app-row[data-risk="medium"] .wf-mobile-signals span { background: #faf6ec; color: #75571e; }
  .wf-mobile-app-row[data-risk="low"] .wf-mobile-signals span { background: #f0f6f1; color: #38634d; }
  .wf-mobile-decision-field {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee9e3;
  }
  .wf-mobile-decision-field > small { margin: 0; }
  .wf-mobile-decision-field > b {
    min-width: 68px;
    padding: 6px 9px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
  }
  .wf-mobile-restrict { color: #9e2030; background: #f9e8eb; }
  .wf-mobile-review { color: #8c6318; background: #f7efd9; }
  .wf-mobile-allow { color: #46725d; background: #e8f0e9; }
  .wf-mobile-rules {
    margin-bottom: 12px;
    padding: 13px;
    border: 1px solid #e0d7cf;
    border-radius: 9px;
    background: #fffaf4;
  }
  .wf-mobile-rules strong { display: flex; align-items: center; gap: 7px; font-size: 13px; }
  .workflow-overview .wf-mobile-rules svg { width: 20px; height: 20px; color: #8e4d57; }
  .wf-mobile-rules ul { display: grid; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
  .wf-mobile-rules li { display: flex; align-items: baseline; gap: 7px; color: #756b66; font-size: 12px; line-height: 1.4; }
  .wf-mobile-rules li::before { content: "•"; flex: 0 0 auto; color: #ad7377; }
  .wf-mobile-report {
    position: relative;
    min-width: 0;
    padding: 16px;
    border: 1px solid #ded6cf;
    border-radius: 7px 18px 7px 7px;
    background: #fff;
    box-shadow: 4px 4px 0 #e4ddd6;
  }
  .wf-mobile-report-format { position: absolute; top: 20px; right: 16px; color: #928481; font: 11px var(--font-mono); }
  .wf-mobile-report h3 { margin: 0 34px 8px 0; font: 500 22px/1.15 var(--font-display); letter-spacing: -.5px; }
  .wf-mobile-report > p { margin: 0 0 17px; color: var(--wf-muted); font-size: 12px; line-height: 1.4; }
  .wf-mobile-report-footer { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--wf-muted); font-size: 11px; line-height: 1.4; }
  .workflow-overview .wf-mobile-report-footer svg { width: 16px; height: 16px; color: #46725d; }
}
@media (min-width: 601px) and (max-width: 899px) {
  .wf-mobile-estate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wf-mobile-app-row:has(.wf-mobile-decision-field) { grid-template-columns: minmax(0, 1fr) 82px 82px; }
  .wf-mobile-app-row:has(.wf-mobile-decision-field) .wf-mobile-risk-field { grid-column: 2; grid-row: 1; }
  .wf-mobile-decision-field { grid-column: 3; grid-row: 1; display: block; padding: 0; border: 0; }
  .wf-mobile-decision-field > small { margin-bottom: 5px; }
  .wf-mobile-decision-field > b { display: inline-block; }
  .wf-mobile-rules ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) and (max-width: 899px) {
  .wf-mobile-estate-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .workflow-sticky { padding: 56px 0; }
  .wf-story-heading { min-height: 194px; margin-bottom: 14px; }
  .workflow-heading { font-size: clamp(31px, 9vw, 38px); line-height: 1.06; }
  .wf-story-description.wf-desktop-only { max-width: 410px; font-size: 14px; line-height: 1.5; }
  .workflow-layout { gap: 15px; }
  .workflow-nav ol { gap: 1px; }
  .wf-step { gap: 9px; min-height: 58px; padding: 4px 1px; font-size: clamp(10px, 3.25vw, 13px); }
  .workflow-nav li:not(:last-child)::after { left: calc(50% + 13px); width: calc(100% - 26px); }
  .wf-step-dot { width: 18px; height: 18px; flex-basis: 18px; }
  .wf-step.is-active .wf-step-dot { border-width: 5px; }
  .wf-mobile-workspace { border-radius: 12px; }
  .wf-mobile-stage { padding: 16px; }
  .wf-mobile-intake { grid-template-columns: minmax(0, 1fr) 36px minmax(0, .85fr); }
  .wf-mobile-source { gap: 7px; padding: 8px; }
  .wf-mobile-hub strong { font-size: 15px; }
  .wf-mobile-estate { padding: 10px; }
  .wf-mobile-estate-grid { gap: 7px; }
  .wf-mobile-estate .wf-mobile-card { gap: 7px; padding: 8px; font-size: 12px; }
  .wf-mobile-estate .wf-mobile-card img,
  .workflow-overview .wf-mobile-estate .wf-mobile-card > svg { width: 24px; height: 24px; }
  .wf-mobile-app-row { gap: 11px 8px; padding: 10px; }
  .wf-mobile-rules { padding: 11px; }
  .wf-mobile-report { padding: 14px 12px; }
  .wf-mobile-report-format { top: 18px; right: 13px; }
  .wf-mobile-report h3 { font-size: 20px; }
  .wf-mobile-report > p { margin-bottom: 13px; }
}
@media (max-width: 360px) {
  .wf-story-heading { min-height: 207px; }
  .wf-mobile-stage { padding: 13px; }
  .wf-mobile-intake { grid-template-columns: minmax(0, 1fr) 32px minmax(0, .85fr); }
  .wf-mobile-source { gap: 6px; padding: 8px 7px; }
  .wf-mobile-source img,
  .workflow-overview .wf-mobile-source > svg { width: 24px; height: 24px; }
  .wf-mobile-estate { padding: 9px; }
  .wf-mobile-estate .wf-mobile-card { gap: 6px; padding: 7px; }
  .wf-mobile-report { padding: 12px 10px; }
  .wf-mobile-report-format { top: 16px; right: 11px; }
  .wf-mobile-report .wf-mobile-app-row { padding: 9px 8px; }
  .wf-mobile-report .wf-mobile-app-name { gap: 7px; }
}

/* Mobile and tablet use the same persistent scene as desktop. Stage changes
   reposition these nodes instead of swapping in separately rendered panels. */
@media (max-width: 899px) {
  .is-scroll-driven .workflow-sticky { padding: 16px 0; }
  .is-scroll-driven .wf-scroll-hint { display: none; }
  .wf-story-heading {
    min-height: 128px;
    margin-bottom: 24px;
    text-align: center;
  }
  .workflow-heading {
    max-width: 680px;
    margin: 0 auto;
    font-size: clamp(31px, 7.8vw, 44px);
    line-height: 1.06;
    letter-spacing: -1.6px;
  }
  .workflow-heading > .wf-desktop-only { display: inline; }
  .wf-story-description.wf-desktop-only {
    display: block;
    max-width: 650px;
    margin: 13px auto 0;
    color: var(--wf-muted);
    font-size: clamp(13px, 2.7vw, 15px);
    line-height: 1.48;
  }
  .wf-story-heading .wf-legacy-only,
  .wf-panel-heading,
  .wf-canvas-footer,
  .wf-canvas .wf-legacy-only,
  .wf-context,
  .wf-canvas-caption,
  .wf-enforcement-note { display: none !important; }

  .workflow-layout { gap: 20px; }
  .workflow-nav ol { gap: 2px; }
  .wf-step {
    gap: 9px;
    min-height: 54px;
    padding: 3px 0;
    font-size: clamp(11px, 2.9vw, 15px);
  }
  .workflow-nav li:not(:last-child)::after {
    top: 12px;
    left: calc(50% + 14px);
    width: calc(100% - 28px);
  }
  .wf-step-dot { width: 18px; height: 18px; flex-basis: 18px; }
  .wf-step.is-active .wf-step-dot { border-width: 5px; }

  .wf-canvas {
    display: block;
    height: 480px;
    border-radius: 16px;
    background: #f2f0ec;
  }
  .wf-links { stroke: #cfc2bd; stroke-width: 1.15; }
  .wf-links .wf-flow { stroke-width: 1.35; }

  .wf-node.wf-desktop-only { display: flex; }
  .wf-node img.wf-desktop-only,
  .wf-entity-copy.wf-desktop-only,
  .wf-avatar .wf-desktop-only { display: block; }
  .wf-estate-region.wf-desktop-only { display: block; }
  .wf-estate-columns.wf-desktop-only,
  .wf-assessment-columns.wf-desktop-only { display: grid; }
  .wf-app-heading.wf-desktop-only { display: block; }
  .wf-app-action.wf-desktop-only,
  .wf-risk-summary.wf-desktop-only,
  .wf-risk-signals.wf-desktop-only { display: flex; }
  .wf-rules.wf-desktop-only { display: grid; }
  .wf-paper > p .wf-desktop-only,
  .wf-result-label > .wf-desktop-only { display: inline; }

  .wf-estate-region {
    position: absolute;
    z-index: 0;
    top: 234px;
    bottom: 6px;
    left: var(--wf-estate-left);
    right: var(--wf-estate-right, 10px);
    border-radius: 11px;
    background: #ffffff66;
    opacity: 0;
    transition: opacity .35s;
  }
  .wf-estate-region > span {
    position: absolute;
    top: 9px;
    left: 8px;
    color: #534440;
    font: 500 13px/1.2 var(--font-display);
    letter-spacing: -.25px;
  }
  [data-stage="connect"] .wf-estate-region { opacity: 1; }

  .wf-estate-columns {
    grid-template-columns: 29fr 30fr 41fr;
    gap: var(--wf-column-gap, 18px);
    position: absolute;
    z-index: 3;
    top: 76px;
    left: var(--wf-tree-left, 24px);
    right: var(--wf-tree-right, 12px);
    color: #756b66;
    font-size: clamp(9px, 2.4vw, 11px);
    line-height: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .wf-estate-columns > :first-child { display: none; }
  [data-stage="organize"] .wf-estate-columns {
    opacity: 1;
    transition-delay: .55s;
  }
  .wf-app-heading {
    position: absolute;
    z-index: 3;
    color: #756b66;
    font-size: clamp(9px, 2.4vw, 11px);
    line-height: 16px;
    white-space: nowrap;
    pointer-events: none;
  }

  .wf-hub {
    flex-direction: column !important;
    justify-content: center;
    gap: 6px;
    padding: 5px;
    text-align: center;
    box-shadow: none;
  }
  .wf-hub img,
  [data-stage="connect"] .wf-hub img {
    width: 32px;
    height: 32px;
  }
  .wf-hub strong {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(12px, 3.1vw, 15px);
    line-height: 1.05;
    letter-spacing: -.2px;
    text-overflow: ellipsis;
  }
  .wf-source {
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 0 7px;
    font-size: clamp(10px, 2.65vw, 12px);
    line-height: 1.12;
    white-space: normal;
  }
  .wf-source > span:last-child {
    min-width: 0;
  }
  .wf-source-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    background: transparent;
  }
  .wf-source-icon img,
  .wf-os-icon img,
  .wf-app-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .workflow-overview .wf-source-icon svg { width: 18px; height: 18px; }
  .wf-source-icon.wf-policy { background: #f7ecee; }

  .wf-department,
  .wf-person,
  .wf-device {
    justify-content: flex-start;
    gap: 5px;
    min-width: 0;
    padding: 0 6px;
    border: 1px solid #e3ddd7;
    border-radius: 7px;
    background: #fff;
    font-size: clamp(10px, 2.7vw, 12px);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
  }
  .wf-department {
    transition: background-color .7s ease, border-color .7s ease;
  }
  .workflow-overview .wf-department svg,
  .wf-avatar,
  .wf-os-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  .wf-avatar {
    display: grid;
    place-items: center;
    background: #f0ede9;
    color: #716963;
  }
  .wf-avatar .wf-desktop-only { width: 75%; height: 75%; }
  .wf-entity-copy {
    min-width: 0;
    overflow: visible;
    line-height: 1.15;
    white-space: normal;
  }
  .wf-entity-type,
  .wf-entity-type.wf-desktop-only {
    display: block;
    height: 0;
    margin: 0;
    overflow: hidden;
    color: #827b75;
    font-size: 8px;
    font-weight: 400;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .35s ease, height .7s ease, margin-bottom .7s ease, transform .7s ease;
  }
  [data-stage="connect"] .wf-entity-type {
    height: 9px;
    margin-bottom: 1px;
    opacity: 1;
    transform: none;
  }
  [data-stage="organize"] .wf-department {
    gap: 8px;
    padding: 0;
    border-color: transparent;
    background: transparent;
  }
  [data-stage="organize"] .wf-department .wf-entity-type {
    height: 9px;
    margin-bottom: 2px;
    opacity: 1;
    transform: none;
  }
  [data-stage="organize"] .wf-device {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 3px;
    font-size: clamp(10px, 2.6vw, 12px);
  }
  [data-stage="organize"] .wf-person { gap: 4px; padding: 0 5px; }
  [data-stage="organize"] .wf-avatar { width: 18px; height: 18px; flex-basis: 18px; }
  [data-stage="organize"] .wf-os-icon { width: 18px; height: 18px; flex-basis: 18px; }

  .wf-app,
  .wf-assessment-columns {
    --wf-identity-width: clamp(70px, 27%, 128px);
    --wf-risk-width: clamp(40px, 5.6vw, 44px);
    --wf-action-width: 52px;
  }
  .wf-app {
    min-width: 0;
    padding: 0 6px;
    overflow: hidden;
    border-color: #e3ddd7;
    box-shadow: none;
  }
  .wf-app-identity {
    min-width: 0;
    gap: 4px;
    font-size: clamp(9.5px, 2.6vw, 12px);
  }
  .wf-app-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    background: transparent;
  }
  [data-stage="assess"] .wf-app-identity,
  [data-stage="act"] .wf-app-identity,
  [data-stage="evidence"] .wf-app-identity {
    position: static;
    width: var(--wf-identity-width);
    flex-shrink: 0;
    padding-right: 0;
  }

  .wf-assessment-columns {
    grid-template-columns: calc(var(--wf-identity-width) + 11px) var(--wf-risk-width) minmax(0, 1fr) var(--wf-action-width);
    position: absolute;
    z-index: 3;
    color: #756b66;
    font-size: clamp(9px, 2.4vw, 11px);
    line-height: 16px;
    pointer-events: none;
  }
  .wf-assessment-columns > :nth-child(3) { padding-left: 4px; }
  .wf-column-long { display: none; }
  .wf-column-short { display: inline; }
  .wf-assessment-columns > :first-child { padding-left: 7px; }
  .wf-assessment-columns > :last-child { padding-right: 5px; text-align: center; }
  .wf-decision-heading { opacity: 0; transition: opacity .3s; }
  [data-stage="act"] .wf-decision-heading,
  [data-stage="evidence"] .wf-decision-heading { opacity: 1; }

  .wf-app-risk {
    top: 4px;
    bottom: 4px;
    left: calc(var(--wf-identity-width) + 11px);
    right: var(--wf-action-width);
    height: auto;
    margin: 0;
    display: grid;
    grid-template-columns: var(--wf-risk-width) minmax(0, 1fr);
    align-items: center;
    gap: 4px;
  }
  .wf-risk-summary {
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 24px;
    padding: 0 4px;
    border-radius: 6px;
    color: #fff;
    background: #bb3c52;
  }
  .wf-risk-summary small { display: none; }
  .wf-risk-summary strong {
    font: 500 10px/1 var(--font-display);
  }
  .wf-risk-summary.wf-risk-medium { color: #513b0c; background: #f0ce7f; }
  .wf-risk-summary.wf-risk-low { color: #fff; background: #438269; }
  .wf-risk-signals {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
  }
  .wf-risk-signal {
    display: flex;
    align-items: center;
    min-height: 17px;
    max-width: 100%;
    padding: 1px 3px;
    border-radius: 4px;
    background: #faf0f2;
    color: #803047;
    font-size: clamp(8.5px, 2.3vw, 10.5px);
    line-height: 1.12;
    white-space: nowrap;
  }
  .wf-risk-medium + .wf-risk-signals .wf-risk-signal { background: #faf6ec; color: #75571e; }
  .wf-risk-low + .wf-risk-signals .wf-risk-signal { background: #f0f6f1; color: #38634d; }
  .wf-app-action {
    top: 50%;
    right: 5px;
    bottom: auto;
    width: 42px;
    min-height: 24px;
    justify-content: center;
    padding: 4px;
    font-size: clamp(9px, 2.3vw, 10px);
    transform: translate(12px, -50%);
  }
  [data-stage="act"] .wf-app-action,
  [data-stage="evidence"] .wf-app-action { transform: translateY(-50%); }
  [data-stage="evidence"] .wf-action-label { display: inline; }
  [data-stage="evidence"] .wf-result-label { display: none; }

  .wf-rules {
    grid-template-columns: 1fr;
    gap: 7px;
    align-items: center;
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 10px;
    right: 10px;
    height: 78px;
    padding: 8px 10px;
    border: 1px solid #e1d9d1;
    border-radius: 8px;
    background: #fffdf9;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .3s, transform .5s;
    pointer-events: none;
  }
  [data-stage="act"] .wf-rules {
    opacity: 1;
    transform: none;
    transition-delay: .85s;
  }
  .wf-rules-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #67584f;
    font-size: 11px;
  }
  .workflow-overview .wf-rules-title svg { width: 18px; height: 18px; }
  .wf-rules-title strong { font-weight: 500; }
  .wf-rules ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
    padding: 0;
    color: #776c65;
    font-size: clamp(8.5px, 2.3vw, 10px);
    line-height: 1.25;
    list-style: none;
  }
  .wf-rules li { display: flex; align-items: center; gap: 4px; }
  .wf-rules li::before {
    content: "";
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: #c8aca4;
  }

  .wf-paper {
    inset: 10px 12px 12px;
    border-radius: 6px 16px 6px 6px;
    box-shadow: 3px 3px 0 #e7e1db;
  }
  .wf-paper-format { top: 10px; right: 12px; font-size: 10px; }
  .wf-paper h4 {
    top: 24px;
    left: 15px;
    font-size: clamp(18px, 4.2vw, 23px);
  }
  .wf-paper > p {
    top: 56px;
    left: 15px;
    right: 50px;
    font-size: clamp(8px, 1.9vw, 11px);
    line-height: 1.25;
  }
  .wf-paper > p .wf-desktop-only { margin: 0; }
  .wf-paper-footer {
    bottom: 12px;
    left: 15px;
    right: 10px;
    font-size: clamp(8px, 1.8vw, 11px);
  }
}

@media (max-width: 600px) {
  .wf-story-heading { min-height: 154px; margin-bottom: 16px; }
  .workflow-layout { gap: 14px; }
  .wf-canvas { height: 448px; border-radius: 13px; }
  .wf-rules ul { gap: 10px; align-items: start; }
  .wf-rules li { display: block; }
  .wf-rules li::before { display: none; }
  .wf-rule-copy > span { display: block; white-space: nowrap; }
  .wf-rule-action { color: #67584f; font-weight: 500; }
  .wf-rule-scope { margin-top: 3px; }
}

@media (max-width: 360px) {
  .wf-story-heading { min-height: 168px; }
  [data-stage="assess"] .wf-app-identity,
  [data-stage="act"] .wf-app-identity,
  [data-stage="evidence"] .wf-app-identity { gap: 3px; font-size: 9px; }
  [data-stage="assess"] .wf-app-icon,
  [data-stage="act"] .wf-app-icon,
  [data-stage="evidence"] .wf-app-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
  .wf-risk-summary { padding: 0 2px; }
  .wf-risk-summary strong { font-size: 9px; }
}

@media (max-width: 899px) {
  .is-compact-story .workflow-sticky { padding: 8px 0; }
  .is-compact-story .wf-story-heading { min-height: 0; margin-bottom: 12px; }
  .is-compact-story .workflow-heading {
    font-size: clamp(26px, 6.7vw, 32px);
    line-height: 1.08;
    letter-spacing: -1px;
  }
  .is-compact-story .wf-story-description { margin-top: 8px; font-size: 13px; line-height: 1.4; }
  .is-compact-story .workflow-layout { gap: 10px; }
  .is-compact-story .wf-step { min-height: 44px; gap: 5px; }
  .is-short-story .workflow-sticky { padding: 6px 0; }
  .is-short-story .wf-story-heading { margin-bottom: 6px; }
  .is-short-story .workflow-heading { font-size: 24px; }
  .is-short-story .wf-story-description { margin-top: 6px; font-size: 12px; }
  .is-short-story .workflow-layout { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-overview *, .workflow-overview *::before, .workflow-overview *::after { animation: none !important; transition: none !important; }
}

/* Signal colour reflects its relationship to the example company rules. */
.workflow-overview .wf-risk-signals .wf-risk-signal.wf-signal-neutral {
  background: #f2f0ec;
  color: #625954;
}

.workflow-overview .wf-risk-signals .wf-risk-signal.wf-signal-alert {
  background: #faf0f2;
  color: #803047;
}

.workflow-overview .wf-risk-signals .wf-risk-signal.wf-signal-positive {
  background: #f0f6f1;
  color: #38634d;
}

.workflow-overview .wf-app-icon { border-radius: 22%; overflow: hidden; }
.workflow-overview .wf-app-icon img { border-radius: 22%; }
.wf-signal-short { display: none; }
@media (max-width: 899px) {
  .wf-signal-full { display: none; }
  .wf-signal-short { display: inline; }
}