/* Lightweight editorial diagrams. All illustrations use fictional text. */
.blog-story-visual{margin:1.6rem 0 2rem;padding:clamp(1rem,3vw,2rem);border:1px solid #214c59;border-radius:1.1rem;background:linear-gradient(135deg,#102e40,#163e44);color:#f3fafb;overflow-wrap:anywhere}
.blog-story-kicker{display:block;color:#a8e9d4;font-size:14px;font-weight:800;letter-spacing:.08em}
.blog-story-visual figcaption h2{max-width:780px;margin:.6rem 0;font-size:clamp(23px,3vw,32px);line-height:1.2;color:#fff}
.blog-story-visual figcaption>p{max-width:800px;margin:0 0 1.4rem;color:#dfedf0;font-size:17px;line-height:1.6}
.blog-story-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.blog-story-step{min-width:0;padding:1.1rem;border:1px solid #d2e2e6;border-radius:.85rem;background:#f9fcfd;color:#203a46}
.blog-story-number{display:block;margin-bottom:.65rem;font-size:14px;font-weight:800;letter-spacing:.045em;line-height:1.4;color:#315c68}
.blog-story-step h3{margin:0 0 .7rem;font-size:20px;line-height:1.25;color:#173b49}
.blog-story-step p{margin:.5rem 0;font-size:16px;line-height:1.55}
.blog-story-alert{margin-top:1rem;padding:.8rem;border:1px dashed #b64a38;border-radius:.55rem;background:#fff0e8;color:#713427}
.blog-story-alert strong{font-size:14px;text-transform:uppercase;letter-spacing:.035em}
.blog-story-step-safe{background:#e6f7ef;border-color:#8bcab0}
.blog-story-gate{display:block;margin:.8rem 0;padding:.7rem;text-align:center;background:#e3edf6;border-radius:.55rem;color:#204e74;font-size:15px;font-weight:850;letter-spacing:.08em}
.blog-story-outcome{display:block;margin-top:1rem;padding:.8rem;border-radius:.5rem;background:#126a53;color:#fff;font-size:17px}
.blog-story-check{margin-top:1.1rem;border:1px solid #759da8;border-radius:.7rem;background:#123341}
.blog-story-check summary{padding:1rem;color:#f3fcff;font-size:16px;font-weight:750;line-height:1.4;cursor:pointer}
.blog-story-check summary:focus-visible{outline:3px solid #ffd57a;outline-offset:3px;border-radius:.6rem}
.blog-story-check p{margin:0;padding:0 1rem 1rem;color:#e6f3f7;font-size:16px;line-height:1.6}
.blog-story-caption{margin:1rem 0 0;color:#d3e7eb;font-size:14px;line-height:1.5}
.blog-signin-lanes{display:grid;gap:1rem}
.blog-signin-lane{min-width:0;padding:1rem;border:1px solid #e2b79c;border-radius:.85rem;background:#fff4eb;color:#573d30}
.blog-signin-lane-safe{border-color:#8bcab0;background:#e8f8f0;color:#244e40}
.blog-signin-lane .blog-story-number{color:inherit}
.blog-signin-path{display:grid;grid-template-columns:minmax(0,.7fr) auto minmax(0,1.6fr) auto minmax(0,1fr);align-items:center;gap:.65rem}
.blog-signin-path strong{display:grid;place-items:center;min-height:70px;min-width:0;padding:.75rem;border:1px solid #a9bfc6;border-radius:.65rem;background:#fff;color:#244b58;font-size:17px;text-align:center}
.blog-signin-path>span{font-size:25px;font-weight:800;color:#2b6470}
.blog-signin-path .blog-signin-fake{border:2px dashed #ad4b38;background:#fff0e8;color:#713427}
.blog-signin-lane>p{margin:.9rem 0 0;font-size:16px;line-height:1.6}
.blog-redactor-example{margin:.8rem;padding:.8rem;border:1px solid #d5e0e4;border-radius:.65rem;background:#f8fafb;min-width:0}
.blog-redactor-example>span{color:#455b65;font-size:14px;font-weight:800;letter-spacing:.05em}
.blog-redactor-example pre{margin:.6rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere;color:#263e4a;font:15px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
.blog-redactor-example code{font:inherit}
.blog-redactor-example-safe{background:#e9f7ef;border-color:#91cbb0}
.blog-redactor-motion{text-align:center;padding:.2rem .8rem;color:#176b54;font-size:14px;font-weight:850;line-height:1.5}
@media(max-width:760px){.blog-story-flow{grid-template-columns:1fr}.blog-story-step{padding:1rem}.blog-story-visual figcaption>p{font-size:16px}}
@media(max-width:480px){.blog-signin-path{grid-template-columns:1fr;gap:.4rem}.blog-signin-path>span{transform:rotate(90deg);text-align:center;line-height:1}.blog-signin-path strong{min-height:52px}.blog-story-visual{padding:1rem}}