/* Diagram typography and relationships take priority over decoration. */
.learning-header-nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin:0;overflow:visible;font-size:14px;font-weight:700;color:#204f70}
@media(max-width:700px){.learning-header-nav{display:flex;gap:12px;font-size:12px;white-space:nowrap}}
.exercise__icon svg{display:block;width:21px;height:21px}
.learning-figure{background:#f5f8f8;border:1px solid #d9e5e8;border-radius:4px;padding:clamp(24px,3.2vw,44px)}
.figure-head{padding-bottom:22px;border-color:#cedde1}
.figure-head h3{font-size:clamp(21px,2vw,27px);line-height:1.55}
.figure-mark{font-size:0;width:30px;height:5px;margin-top:8px;background:#b9935d;flex:none}
.visual:before{display:none}
.visual__items{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;padding:32px 0 4px}
.visual__item{min-height:160px;padding:22px 22px 24px;border:0;border-top:3px solid #537f8d;border-radius:0;background:#fff;box-shadow:0 2px 0 #e0e9eb;display:flex;align-items:stretch}
.visual__number{display:block;font:700 12px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;color:#87662e;margin-bottom:18px}
.visual__copy strong{font-size:18px;line-height:1.55;color:#183d51}
.visual__copy small{font-size:14px;line-height:1.8;color:#526a76;margin-top:9px}
.visual__connector{right:-22px;width:22px;height:30px;background:#f5f8f8;color:#547e89;font-size:19px}
.visual--compare .visual__item:nth-child(even){border-top-color:#bd965d}
.visual--compare .visual__item{box-shadow:none;border:1px solid #d6e2e4;border-top:3px solid #537f8d}
.visual--compare .visual__item:nth-child(even){border-top-color:#bd965d}
.visual--compose .visual__item,.visual--compose .visual__item:nth-child(even){transform:none;box-shadow:0 2px 0 #e0e9eb}
.visual--compose .visual__connector{display:grid;font-size:22px}
.visual--timeline .visual__items{padding-top:42px}
.visual--timeline .visual__items:before{top:24px;border-color:#a8c2c9}
.visual--timeline .visual__item:before{top:-25px;left:22px;width:11px;height:11px;border-color:#f5f8f8;background:#416f80}
.visual--checklist .visual__items{gap:0;padding-top:26px}
.visual--checklist .visual__item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;min-height:0;padding:17px 18px;border:0;border-bottom:1px solid #dbe7e9;box-shadow:none}
.visual--checklist .visual__item:first-child{border-top:1px solid #dbe7e9}
.visual--checklist .visual__number{display:grid;place-items:center;width:25px;height:25px;margin:0;border:1px solid #83a8b2;color:#316778;font:700 15px/1 sans-serif}
.visual--checklist .visual__copy small{margin-top:4px}
.visual--decision .visual__item:nth-child(2){background:#e8f1f2;border-color:#537f8d}
.visual--cycle .visual__item{border-radius:0}
.visual__return{border:0;border-left:3px solid #b9935d;border-radius:0;background:#eaf2f3;margin-top:22px;padding:11px 16px;font-size:14px}
.anchor-board__intro{padding:16px 20px;background:#e7f0f1}
.anchor-board__items{gap:0;margin-top:0;background:#fff;border:1px solid #d9e5e7}
.anchor-board__items>div{min-height:145px;padding:22px;border:0;border-right:1px solid #d9e5e7}
.anchor-board__items>div:last-child{border-right:0}
.anchor-board__items strong{font-size:18px;margin:13px 0 5px}.anchor-board__items small{font-size:14px}
.learning-figure figcaption{font-size:14px;line-height:1.85;border-color:#cedde1;margin-top:24px;padding-top:18px}
@media(min-width:1101px){.visual:not(.visual--checklist) .visual__items{grid-template-columns:repeat(var(--diagram-steps),minmax(0,1fr))}}
@media(min-width:701px) and (max-width:1100px){
 .visual--flow .visual__items,.visual--cycle .visual__items,.visual--decision .visual__items,.visual--compose .visual__items,.visual--timeline .visual__items{grid-template-columns:1fr;gap:14px;padding-top:23px}
 .visual--flow .visual__item,.visual--cycle .visual__item,.visual--decision .visual__item,.visual--compose .visual__item,.visual--timeline .visual__item{min-height:0}
 .visual__connector{right:15px;top:auto;bottom:-17px;transform:rotate(90deg)}
 .visual--compose .visual__connector{transform:none}
 .visual--timeline .visual__items:before,.visual--timeline .visual__item:before{display:none}
}
@media(max-width:700px){
 .learning-figure{padding:22px 18px}.figure-head h3{font-size:20px}
 .visual__items{grid-template-columns:1fr;gap:14px;padding-top:23px}
 .visual__item,.visual--checklist .visual__item{display:grid;grid-template-columns:35px minmax(0,1fr);gap:10px;min-height:0;padding:16px}
 .visual__number{margin:3px 0 0}.visual__copy strong{font-size:16px}.visual__copy small{font-size:14px}
 .visual__connector{right:15px;bottom:-17px;top:auto;transform:rotate(90deg);background:#f5f8f8}
 .visual--compose .visual__connector{transform:none}
 .visual--timeline .visual__items{padding-top:23px}
 .visual--checklist .visual__items{gap:0}
 .anchor-board__items>div{display:block;min-height:0;padding:18px;border-right:0;border-bottom:1px solid #d9e5e7}
 .anchor-board__items>div:last-child{border-bottom:0}
 .anchor-board__items strong{display:block;font-size:16px;margin:8px 0 4px}.anchor-board__items small{display:block}
}