/* AI in action. Documents are the demonstration. No inline styles. */
.workflow-page { background: var(--navy-950); }
.workflow-page .site { position: relative; }
.wf-header { position: sticky; top: 0; z-index: 30; background: rgba(6, 13, 27, .94); border-bottom: 1px solid var(--line); }
.wf-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; min-height: 64px; flex-wrap: wrap; }
.wf-nav, .wf-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.wf-nav a, .wf-langs a { color: var(--muted); text-decoration: none; font-size: .88rem; }
.wf-nav a[aria-current="page"] { color: var(--silver); }
.wf-langs a { border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; font-size: .72rem; }
.wf-langs a[aria-current="page"] { background: var(--silver); color: var(--navy-950); }

.wf-hero { padding: 22px 0 36px; }
@media (max-width: 720px) {
  .wf-langs { width: 100%; }
  .wf-hero { padding-top: 12px; }
}
.wf-hero h1, .ai-stage, .wf-block h2 { scroll-margin-top: 92px; }
.eyebrow { margin: 0; color: var(--steel); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.wf-hero h1 { max-width: 22ch; margin: 8px 0 0; font-size: clamp(1.7rem, 2.7vw, 2.45rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 620; }
.wf-lead { max-width: 40rem; margin: 8px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.wf-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.wf-switch button { border: 1px solid var(--line); background: #0c1c36; color: var(--muted); border-radius: 999px; min-height: 44px; padding: 8px 14px; }
.wf-switch button[aria-checked="true"] { background: var(--silver); color: var(--navy-950); border-color: var(--silver); }

.ai-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, 1.15fr); gap: 14px; align-items: stretch; padding: 12px; border: 1px solid rgba(166, 186, 214, .2); border-radius: 22px; background: linear-gradient(180deg, rgba(16, 28, 48, .96), rgba(8, 16, 30, .96)); box-shadow: 0 18px 50px rgba(2, 6, 16, .28); }
.ai-pane { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(166, 186, 214, .16); border-radius: 16px; background: #0e1a2e; padding: 12px; }
.ai-mind { background: linear-gradient(180deg, #13243f, #0e1a2e); }
h2.pane-h { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; }
.pane-h { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.pane-h span { color: #d5e4f6; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 650; }
#wf-status { margin-left: auto; color: #d5e4f6; font-style: normal; font-size: .75rem; letter-spacing: 0; text-transform: none; font-weight: 550; text-align: right; }
.ai-orb { width: 9px; height: 9px; border-radius: 50%; background: #9ec3ea; box-shadow: 0 0 0 4px rgba(158, 195, 234, .14); flex: 0 0 auto; }
.ai-stage.ph-read:not(.ph-check) .ai-orb { animation: ai-pulse 1.4s ease-in-out infinite; }
.ai-mind { position: relative; }
.ai-mind::before, .ai-pane:last-child::before { content: ""; position: absolute; top: 46%; width: 14px; height: 2px; background: #9ec3ea; opacity: 0; }
.ai-mind::before { left: -14px; }
.ai-pane:last-child::before { left: -14px; }
.ai-stage.ph-read .ai-mind::before { opacity: 1; }
.ai-stage.ph-result .ai-pane:last-child::before { opacity: 1; }

.win, .paper-out { border-radius: 12px; overflow: hidden; background: #f6f8fb; color: #14233a; border: 1px solid #d5deea; box-shadow: 0 12px 28px rgba(2, 8, 20, .2); }
.win + .win, .win + .slip { margin-top: 10px; }
.win-bar { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px; background: #e7eef6; color: #3d5270; font-size: .75rem; }
.dots { display: flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #b7c6d8; }
.paper { padding: 12px; }
.paper h3, .paper-out h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.25; letter-spacing: -.02em; color: #102033; }
.kicker { margin: 0 0 4px; color: #3d5270; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.mail-meta, .slip p { margin: 0; color: #3e5674; font-size: .78rem; line-height: 1.4; }
.mail-meta { display: grid; gap: 2px; margin-bottom: 8px; }
.mail-meta b, .slip b { color: #1c3352; font-weight: 650; }
.mail-body { margin: 0; font-size: .95rem; line-height: 1.45; color: #14233a; }
.rowline { margin: 0 0 4px; color: #14233a; font-size: .88rem; }
.rowline b { color: #1c3352; }
.rowline.warn { color: #5c4310; background: #fff1cc; border-radius: 6px; padding: 4px 6px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.doc-table th { text-align: left; font-weight: 650; color: #3e5674; padding: 4px 8px 4px 0; border-bottom: 1px solid #d5deea; }
.doc-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid #e6edf5; color: #14233a; vertical-align: top; }
.mark { border-radius: 3px; padding: 0 2px; background: transparent; color: inherit; }
.ai-stage.ph-read .mark, .mark.is-shown { background: #d5e6f8; box-shadow: inset 0 -1px 0 #2f5f93; }
.slip { padding: 8px 10px; border-radius: 10px; background: #eef3f9; border: 1px solid #d5deea; }
.note { margin: 8px 0 0; color: #3e5674; font-size: .8rem; }
.status { display: inline-flex; align-items: center; min-height: 28px; margin-top: 8px; padding: 2px 8px; border-radius: 999px; background: #e7eef8; color: #16345c; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.status.warn { background: #fff1cc; color: #5c4310; }
.reply { margin: 8px 0 0; padding: 10px; border-radius: 8px; background: #fff; border: 1px solid #d5deea; color: #14233a; font-size: .9rem; line-height: 1.45; }
.route { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.route b { color: #16345c; font-size: .82rem; font-weight: 650; }
.route i { flex: 1 1 auto; height: 2px; min-width: 24px; background: linear-gradient(90deg, #8eb4dc, #1d4e89); position: relative; }
.route i::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: #1d4e89; }

.ai-seq { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.ai-seq li { color: #d5e4f6; border: 1px solid rgba(213, 228, 246, .35); border-radius: 999px; padding: 4px 8px; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.ai-seq li.is-now { color: #f4f8ff; border-color: #d5e4f6; background: #1a3358; }
.ai-seq li.is-done { color: #d5e4f6; }
#wf-fields, #wf-checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.field { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 6px 8px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: #13243f; border: 1px solid rgba(158, 186, 220, .22); }
.field b { color: #c5d6ee; font-size: .75rem; font-weight: 600; }
.field span { color: #f4f8ff; font-size: .92rem; }
.check { padding: 8px 10px; border-radius: 10px; font-size: .84rem; line-height: 1.4; }
.check.ok { background: #12263f; color: #d5e4f6; }
.check.warn { background: #2c2616; color: #f6e7c3; border: 1px solid rgba(246, 231, 195, .35); }
.ai-review { border: 1px solid rgba(233, 239, 249, .4); border-radius: 12px; padding: 10px; background: #152848; }
#wf-review-note { margin: 0 0 8px; color: #e9eff9; font-size: .88rem; }
.ai-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-review-actions button { min-height: 44px; border-radius: 8px; border: 1px solid rgba(233, 239, 249, .35); background: transparent; color: #e9eff9; padding: 8px 10px; }
.ai-review-actions button[data-act="approve"] { background: var(--silver); color: var(--navy-950); border-color: var(--silver); }
.ai-wait { margin: 0; color: #c5d6ee; font-size: .92rem; }
.ai-stage.is-engine:not(.ph-extract) #wf-fields,
.ai-stage.is-engine:not(.ph-check) #wf-checks,
.ai-stage.is-engine:not(.ph-review) .ai-review,
.ai-stage.is-engine:not(.ph-result) #wf-paper,
.ai-stage:not(.is-engine) .ai-wait,
.ai-stage.ph-result .ai-wait { display: none; }
.ai-stage.ph-extract #wf-fields .field,
.ai-stage.ph-check #wf-checks .check,
.ai-stage.ph-result #wf-paper .paper-out,
.ai-stage.is-engine .win { animation: ai-rise .45s var(--ease) both; }
#wf-fields .field:nth-child(2) { animation-delay: .08s; }
#wf-fields .field:nth-child(3) { animation-delay: .16s; }
#wf-fields .field:nth-child(4) { animation-delay: .24s; }
#wf-checks .check:nth-child(2) { animation-delay: .08s; }
#wf-checks .check:nth-child(3) { animation-delay: .16s; }
@keyframes ai-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ai-pulse { 50% { box-shadow: 0 0 0 6px rgba(158, 195, 234, .05); } }

.ai-ask { margin: 14px 0 8px; color: var(--silver); }
.wf-note { margin: 8px 0 0; color: var(--faint); font-size: .86rem; max-width: 48rem; }
.wf-replay { display: none; margin: 6px 0 0; padding: 0; border: 0; background: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.wf-hero.is-engine .wf-replay { display: inline-flex; align-items: center; }
.ai-trace { margin-top: 12px; color: var(--muted); }
.ai-trace summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--silver); }
.trace { display: grid; gap: 2px; margin: 0 0 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #0c1a30; }
.trace p { margin: 0; color: #d5e4f6; font-size: .86rem; }
.trace b { color: var(--steel); font-weight: 650; }

.wf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wf-hero .wf-actions { margin-top: 8px; }
.wf-block { padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid rgba(141, 166, 201, .14); }
.wf-block h2 { margin: 0 0 14px; font-size: clamp(1.35rem, 2vw, 1.85rem); letter-spacing: -.03em; }
.ai-pillars, .wf-project { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wf-project { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ai-pillars article, .wf-project article { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(10, 23, 48, .8); min-width: 0; }
.ai-pillars span, .wf-project span { color: var(--steel); font-size: .75rem; letter-spacing: .08em; }
.ai-pillars h3, .wf-project h3 { margin: 8px 0; font-size: 1rem; }
.ai-pillars p, .wf-project p, .ai-scope { margin: 0; color: var(--muted); font-size: .92rem; }
.ai-scope { margin-top: 12px; max-width: 52rem; }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini article { min-width: 0; border-radius: 14px; overflow: hidden; border: 1px solid #d5deea; background: #f6f8fb; color: #14233a; }
.mini h3 { margin: 0; padding: 10px 12px; background: #e7eef6; color: #1c3352; font-size: .98rem; }
.mini .paper { color: #24384f; }
.mini p { margin: 0 0 6px; }
.wf-end { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.wf-end p { color: var(--muted); max-width: 38rem; margin: 8px 0 0; }

.workflow-page .site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 32px 0; }
.workflow-page .site-footer .wrap > div { min-width: 0; max-width: 100%; }
.workflow-page .site-footer .wrap > div:last-child { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.workflow-page .site-footer a { color: var(--muted); overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .ai-pillars { grid-template-columns: 1fr 1fr; }
  .wf-project { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ai-stage { grid-template-columns: 1fr; }
  .ai-mind::before, .ai-pane:last-child::before { display: none; }
  .wf-end, .mini { display: grid; grid-template-columns: 1fr; }
  .wf-project { grid-template-columns: 1fr; }
  #wf-status { margin-left: 0; text-align: left; }
}
.uc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.uc { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; min-height: 76px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #0c1c36; color: #e9eff9; }
.uc-icon { grid-row: 1 / span 2; color: #b7d0ee; }
.uc-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.uc strong { font-size: .95rem; line-height: 1.2; }
.uc span { color: #d5e4f6; font-size: .78rem; line-height: 1.35; }
.uc[aria-checked="true"] { background: #e9eff9; color: #0a1730; border-color: #e9eff9; }
.uc[aria-checked="true"] span, .uc[aria-checked="true"] .uc-icon { color: #16345c; }
.uc:focus-visible, .wf-switch button:focus-visible, .ai-review-actions button:focus-visible, .cap-grid button:focus-visible { outline: 2px solid #e9eff9; outline-offset: 2px; }
.cap { margin: 2px 0 0; color: #d5e4f6; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fact, .pair-col, .topic, .compose { margin: 0; }
.fact, .pair-col, .topic, .task-row, .queue-row, .q-row { padding: 8px; border-radius: 8px; background: #fff; border: 1px solid #d5deea; color: #14233a; }
.fact b, .q-row b, .topic b, .task-row b, .queue-row b { display: block; color: #3e5674; font-size: .72rem; font-weight: 650; }
.fact span, .topic q, .topic span { color: #14233a; }
.fact.warn, .diff.warn, .q-row.warn, .queue-row.warn, .task-row em.warn { background: #fff6df; }
.task-row em { font-style: normal; color: #5c4310; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair-col { font-weight: 650; }
.diff { margin: 6px 0 0; color: #14233a; }
.ask-line { margin: 0 0 6px; color: #1c3352; font-weight: 650; }
.cite { margin: 8px 0; padding: 8px 10px; border-left: 3px solid #1d4e89; background: #fff; color: #14233a; }
.cite-src { margin: 0; color: #3e5674; font-size: .78rem; }
.compose p { margin: 0 0 4px; color: #3e5674; font-size: .82rem; }
.task-row, .queue-row, .q-row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) auto; gap: 6px; margin: 0 0 6px; }
.topic { margin: 0 0 8px; }
.topic q { display: block; margin: 4px 0; }
.amount { margin: 8px 0 0; font-size: 1.2rem; font-weight: 700; color: #102033; }
.out-rapport { box-shadow: inset 4px 0 0 #1d4e89; }
.out-quality .q-row.warn { background: #fff1cc; }
.ai-stage.is-engine.ph-read:not(.ph-check) .mark { background: transparent; box-shadow: none; animation: lit .35s ease forwards; }
.ai-stage.is-engine.ph-read .mark.m2 { animation-delay: .2s; }
.ai-stage.is-engine.ph-read .mark.m3 { animation-delay: .4s; }
.ai-stage.is-engine.ph-read .mark.m4 { animation-delay: .55s; }
@keyframes lit { to { background: #d7e8f8; box-shadow: inset 0 -1px 0 #24588f; } }
.ai-review-actions button.is-blocked { background: transparent; color: #d5e4f6; border-style: dashed; }
.cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cap-grid button, .cap-grid article { min-width: 0; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: #0c1c36; color: #e9eff9; padding: 12px; min-height: 108px; }
.cap-grid b { display: block; margin-bottom: 6px; font-size: .98rem; }
.cap-grid span { color: #d5e4f6; font-size: .84rem; line-height: 1.4; }
.cap-grid button { cursor: pointer; }
@media (max-width: 1100px) {
  .uc-grid, .cap-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ai-stage.is-engine[data-focus="src"] .ai-mind,
  .ai-stage.is-engine[data-focus="src"] > .ai-pane:last-child,
  .ai-stage.is-engine[data-focus="mind"] > .ai-pane:last-child,
  .ai-stage.is-engine[data-focus="out"] > .ai-pane:first-child,
  .ai-stage.is-engine[data-focus="out"] .ai-mind { display: none; }
  .uc-grid, .cap-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .uc-grid, .cap-grid, .fact-grid, .pair, .task-row, .queue-row, .q-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-orb, .win, .field, .check, .paper-out, .mark { animation: none; }
  .ai-stage.ph-read .mark, .mark.is-shown { background: #d7e8f8; box-shadow: inset 0 -1px 0 #24588f; }
}