/* A restrained paper trail, scoped to the preparation page. */
body[data-page="how-it-works"] .workflow-hero { padding: 48px 0 42px; }
.workflow-hero .wf-hero-grid { display: grid; grid-template-columns: .9fr 1.25fr; gap: 48px; align-items: center; }
.workflow-hero .wf-hero-intro h1 { font-size: clamp(38px,3.6vw,54px); margin-bottom: 24px; text-wrap: balance; }
.workflow-hero .wf-pack-phrase { white-space: nowrap; }
.workflow-hero .wf-hero-intro .lead { font-size: 20px; max-width: 35ch; }
.workflow-hero .wf-hero-intro .eyebrow { margin-bottom: 18px; }
.workflow-hero .wf-handover { font-size: 15px; line-height: 1.7; color: #526577; margin: 28px 0 0; }
.workflow-journey { min-width: 0; }
.wf-board { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: 'one two' 'four three'; grid-template-rows: 270px 270px; gap: 30px 16px; position: relative; isolation: isolate; }
.wf-route { position: absolute; inset: 0; height: 100%; width: 100%; z-index: -1; overflow: visible; pointer-events: none; }
.wf-route-base, .wf-route-draw { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wf-route-base { stroke: #d4e3e5; stroke-width: 1.5px; }
.wf-route-draw { stroke: #096b71; stroke-width: 1.7px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wf-enhanced:not(.wf-playing) .wf-route-draw { stroke-dashoffset: 1; }
.wf-playing .wf-route-draw { animation: wf-trace 7s ease-in-out both; }
@keyframes wf-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.wf-stop { min-width: 0; text-align: center; }
.wf-stop-1 { grid-area: one; }
.wf-stop-2 { grid-area: two; }
.wf-stop-3 { grid-area: three; }
.wf-stop-4 { grid-area: four; }
.wf-scene { display: block; width: 180px; height: 140px; max-width: 100%; margin: 0 auto 5px; fill: none; stroke: #7b8e9b; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.wf-scene .wf-sheet { fill: #fffdf7; stroke: #acb9c1; }
.wf-scene .wf-back { fill: #f1f3ee; }
.wf-scene .wf-ink { stroke: #096b71; }
.wf-scene .wf-review { stroke: #a66a19; }
.wf-scene text { fill: #526577; stroke: none; font: 10px ui-monospace,monospace; }
.workflow-hero .wf-stop h2 { font-family: inherit; font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -.2px; margin: 0 0 9px; }
.wf-number { color: #096b71; font: 11px ui-monospace,monospace; margin-right: 7px; }
.wf-stop p { font-size: 14px; line-height: 1.5; color: #526577; max-width: 25ch; margin: 0 auto; }
.wf-toolbar { display: flex; justify-content: flex-end; min-height: 44px; }
.wf-replay { border: 0; border-bottom: 1px solid #c5d2df; background: none; color: #526577; font: inherit; font-size: 13px; min-height: 44px; cursor: pointer; }
.wf-replay span { color: #096b71; margin-left: 6px; }
.wf-replay[hidden] { display: none; }
.wf-replay:focus-visible { outline: 2px solid #096b71; outline-offset: 4px; }
.workflow-example .bp-anatomy .an-intro { padding-top: 0; }
.workflow-example .bp-anatomy .an-arithmetic-note { max-width: 44ch; }
.workflow-example .bp-anatomy .an-total-history { line-height: 1.6; }
.workflow-benefit .wf-benefit-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 52px; align-items: center; }
.workflow-benefit .lead { font-size: 20px; }
.workflow-benefit figure { margin: 0; min-width: 0; }
.wf-pack-art { display: block; width: 100%; height: auto; }
.wf-pack-paper { fill: #fffdf7; stroke: #b4bfc6; stroke-width: 1.2; }
.wf-pack-lines { fill: none; stroke: #b4bfc6; stroke-width: 1; }
.wf-pack-blue { fill: none; stroke: #096b71; stroke-width: 1.5; stroke-linecap: round; }
.wf-pack-type { fill: #526577; font: 11px ui-monospace,monospace; }
.wf-pack-label { fill: #096b71; font: italic 17px Georgia,serif; }
@media (max-width: 1100px) and (min-width: 851px) {
 .workflow-hero .wf-hero-grid { gap: 24px; grid-template-columns: .85fr 1.15fr; }
 .workflow-hero .wf-hero-intro h1 { font-size: 40px; }
 .workflow-hero .wf-stop h2 { font-size: 16px; }
 .wf-stop p { font-size: 13px; }
}
@media (max-width: 850px) {
 body[data-page="how-it-works"] .workflow-hero { padding-top: 32px; }
 .workflow-hero .wf-hero-grid { grid-template-columns: 1fr; gap: 32px; }
 .workflow-hero .wf-hero-intro h1 { font-size: clamp(36px,6vw,48px); }
 .workflow-hero .wf-hero-intro .lead { max-width: 45ch; }
 .workflow-hero .wf-handover { margin-top: 18px; }
 .workflow-journey { max-width: 620px; width: 100%; margin: 0 auto; }
 .workflow-benefit .wf-benefit-grid { grid-template-columns: 1fr; gap: 12px; }
 .workflow-benefit figure { max-width: 620px; }
}
@media (max-width: 480px) {
 .wf-board { grid-template-rows: 300px 300px; gap: 20px 12px; }
 .wf-scene { width: 145px; height: 135px; }
 .workflow-hero .wf-stop h2 { font-size: 16px; }
 .wf-number { display: block; margin: 0 0 5px; }
 .wf-stop p { font-size: 14px; max-width: 21ch; }
 .workflow-benefit .lead { font-size: 18px; }
 .workflow-benefit .wf-benefit-grid { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
 .workflow-journey.wf-enhanced .wf-route-draw, .workflow-journey .wf-route-draw { animation: none; stroke-dashoffset: 0; }
 .wf-replay { display: none; }
}
@media print {
 .workflow-journey.wf-enhanced .wf-route-draw, .workflow-journey .wf-route-draw { animation: none; stroke-dashoffset: 0; }
 .wf-replay { display: none; }
 .workflow-hero .wf-hero-grid { grid-template-columns: 1fr; }
 .workflow-journey { break-inside: avoid; }
}