/* Isolated How To hub styles; loaded only on /how-tos/. */
.broel-howto-page{--kb-navy:#202b3d;--kb-blue:#377be7;--kb-green:#35ad70;--kb-orange:#fb8c32;--kb-purple:#7950bd;--kb-red:#e84d55;overflow:hidden;color:var(--kb-navy);background:#f7f9fd}.broel-howto-page :where(h1,h2,h3,p,figure){margin-top:0}.broel-howto-kicker{margin-bottom:.7rem;color:var(--kb-blue);font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.broel-howto-hero{position:relative;isolation:isolate;padding-block:clamp(3.5rem,6.5vw,6.4rem);background:linear-gradient(130deg,#edf5ff 0%,#fff 52%,#f5efff 100%)}.broel-howto-hero__grid{position:relative;z-index:2;display:grid;align-items:center;gap:clamp(3rem,6vw,6rem)}.broel-howto-hero__visual{min-width:0;margin:0}.broel-howto-hero__photo-wrap{position:relative;width:min(100%,31rem);margin-inline:auto;padding:.65rem;border:.08rem solid rgb(55 123 231/17%);border-radius:3.2rem 1.25rem;background:#fff;box-shadow:0 2rem 4.5rem rgb(39 68 112/18%);transform:rotate(-1.2deg)}.broel-howto-hero__photo-wrap::before{position:absolute;z-index:-1;inset:-1.1rem 1.8rem 1.4rem -1.2rem;border-radius:inherit;background:linear-gradient(145deg,var(--kb-green),var(--kb-blue));content:"";opacity:.18;transform:rotate(-3deg)}.broel-howto-hero__photo-wrap img{display:block;width:100%;aspect-ratio:3/4;border-radius:2.65rem .9rem;object-fit:cover;object-position:50% 42%}
.broel-howto-hero__step{position:absolute;display:flex;min-height:2.75rem;padding:.55rem .85rem;border:.16rem solid #fff;border-radius:.9rem;align-items:center;gap:.5rem;color:#fff;box-shadow:0 .9rem 2rem rgb(32 43 61/19%);font-size:.78rem;font-weight:850}.broel-howto-hero__step b{display:grid;width:1.55rem;height:1.55rem;place-items:center;border-radius:50%;background:rgb(255 255 255/20%);font-size:.64rem}.broel-howto-hero__step--one{top:8%;left:-1.6rem;background:var(--kb-blue)}.broel-howto-hero__step--two{top:44%;right:-1.8rem;background:var(--kb-orange)}.broel-howto-hero__step--three{bottom:8%;left:-1.25rem;background:var(--kb-purple)}.broel-howto-hero__copy h1{max-width:12ch;margin-bottom:1.2rem;color:var(--kb-blue);font-size:clamp(2.8rem,5.4vw,5.2rem);line-height:.98;letter-spacing:-.055em}.broel-howto-hero__copy>p:not(.broel-howto-kicker){max-width:48rem;color:#59677b;font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.65}.broel-howto-search{margin-top:1.5rem}.broel-howto-hero__proof{display:flex;margin-top:1.15rem;flex-wrap:wrap;gap:.5rem 1rem;color:#526176;font-size:.78rem;font-weight:800}.broel-howto-shape{position:absolute;z-index:-1;border-radius:50%}.broel-howto-shape--one{top:-7rem;right:-4rem;width:19rem;height:19rem;border:3.5rem solid rgb(121 80 189/9%)}.broel-howto-shape--two{bottom:-6rem;left:-3rem;width:14rem;height:14rem;background:rgb(251 140 50/8%)}
.broel-howto-paths,.broel-howto-library{padding-block:clamp(4rem,7vw,7rem);scroll-margin-top:10rem}.broel-howto-paths{background:#fff}.broel-howto-heading{display:grid;margin-bottom:2rem;align-items:end;gap:1rem 3rem}.broel-howto-heading h2{margin-bottom:0;font-size:clamp(2.2rem,4.3vw,4rem);line-height:1;letter-spacing:-.045em}.broel-howto-heading>p{max-width:43rem;margin-bottom:0;color:#647187;line-height:1.65}.broel-howto-stage-grid{display:grid;gap:1rem}.broel-howto-stage{position:relative;display:flex;min-height:12.5rem;padding:1.4rem;overflow:hidden;border-radius:1.35rem;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:0 1rem 2.5rem rgb(35 57 91/12%);text-decoration:none;transition:transform .18s ease}.broel-howto-stage:hover,.broel-howto-stage:focus-visible{color:#fff;transform:translateY(-.25rem)}.broel-howto-stage>span{position:absolute;top:1.2rem;left:1.3rem;color:rgb(255 255 255/70%);font-size:2rem;font-weight:950}.broel-howto-stage strong{font-size:1.65rem}.broel-howto-stage small{margin-top:.25rem;color:rgb(255 255 255/84%);font-size:.8rem}.broel-howto-stage--blue{background:linear-gradient(145deg,#377be7,#245ebb)}.broel-howto-stage--green{background:linear-gradient(145deg,#35ad70,#218554)}.broel-howto-stage--orange{background:linear-gradient(145deg,#fb8c32,#da6c18)}.broel-howto-stage--purple{background:linear-gradient(145deg,#7950bd,#5c349e)}
.broel-howto-library{background:linear-gradient(180deg,#f2f7ff,#f9fbfe)}.broel-howto-card{min-height:22rem}.broel-howto-request{padding-block:clamp(3.5rem,6vw,5.5rem);color:#fff;background:linear-gradient(128deg,#202b3d,#304765)}.broel-howto-request__inner{display:grid;align-items:center;gap:1.5rem 4rem}.broel-howto-request h2{margin-bottom:.7rem;color:#fff;font-size:clamp(2rem,4vw,3.5rem)}.broel-howto-request p:not(.broel-howto-kicker){max-width:54rem;margin-bottom:0;color:#dce5f1;line-height:1.65}.broel-howto-request__actions{display:flex;flex-wrap:wrap;gap:.75rem}.broel-howto-request__actions a{display:inline-flex;min-height:3rem;padding:.7rem 1rem;border:.08rem solid rgb(255 255 255/38%);border-radius:.75rem;align-items:center;color:#fff;font-weight:850;text-decoration:none}.broel-howto-request__actions a:first-child{border-color:var(--kb-orange);background:var(--kb-orange)}
@media(min-width:42rem){.broel-howto-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:64rem){.broel-howto-hero__grid{grid-template-columns:minmax(22rem,.78fr) minmax(0,1.22fr)}.broel-howto-heading{grid-template-columns:minmax(0,1fr) minmax(20rem,.72fr)}.broel-howto-stage-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.broel-howto-request__inner{grid-template-columns:minmax(0,1fr) auto}}@media(max-width:41.99rem){.broel-howto-hero__photo-wrap{width:min(85vw,23rem)}.broel-howto-hero__step--one{left:-.75rem}.broel-howto-hero__step--two{right:-.75rem}.broel-howto-hero__step--three{left:-.5rem}.broel-howto-hero__copy h1{font-size:clamp(2.55rem,13vw,4rem)}.broel-howto-card{min-height:0}}@media(prefers-reduced-motion:reduce){.broel-howto-stage,.broel-howto-hero__photo-wrap{transition:none;transform:none}}

/* Editorial workshop panel: one responsive image, supported by lightweight UI details. */
.broel-howto-workshop{display:grid;margin-top:clamp(2.2rem,5vw,4rem);overflow:hidden;border:.0625rem solid #dce5f1;border-radius:2rem;background:linear-gradient(135deg,#f5f9ff,#fff 50%,#f7f2ff);box-shadow:0 1.5rem 3.5rem rgb(35 57 91/10%)}.broel-howto-workshop figure{position:relative;min-height:18rem;margin:0;overflow:hidden}.broel-howto-workshop picture,.broel-howto-workshop img{display:block;width:100%;height:100%}.broel-howto-workshop img{position:absolute;inset:0;object-fit:cover;object-position:center}.broel-howto-workshop figcaption{position:absolute;right:1rem;bottom:1rem;left:1rem;padding:.8rem 1rem;border-radius:.85rem;color:#fff;background:rgb(32 43 61/84%);font-size:.78rem;font-weight:750;line-height:1.45;backdrop-filter:blur(.45rem)}.broel-howto-workshop>div{padding:clamp(1.6rem,4vw,3rem)}.broel-howto-workshop h2{margin-bottom:.8rem;font-size:clamp(2rem,3.5vw,3.3rem);line-height:1.02;letter-spacing:-.04em}.broel-howto-workshop>div>p:not(.broel-howto-kicker){color:#637084;line-height:1.65}.broel-howto-workshop ul{display:grid;margin:1.25rem 0 0;padding:0;gap:.65rem;list-style:none}.broel-howto-workshop li{display:flex;align-items:center;gap:.65rem;color:#425168;font-weight:800}.broel-howto-workshop li span{display:grid;width:1.65rem;height:1.65rem;flex:0 0 1.65rem;place-items:center;border-radius:50%;color:#fff;background:var(--kb-green);font-size:.72rem}@media(min-width:42rem){.broel-howto-workshop{grid-template-columns:minmax(0,1.05fr) minmax(19rem,.95fr)}.broel-howto-workshop figure{min-height:25rem}}@media(max-width:41.99rem){.broel-howto-workshop{border-radius:1.35rem}}