/* Design Studio design guide — Template Design Studio (Detail "#own"): head (kicker "Design guide", H2, lead), panel
   .05/.12 radius 24 (mt 26); blocks padding 36/40 with a top separator; H3 700 20 (mb 20). */
.bd-ds-guide__panel { margin-top: 26px; }
.bd-ds-guide__block { padding: 36px 40px; }
.bd-ds-guide__title { margin: 0 0 20px; font: 700 20px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-guide__note { margin: 10px 0 0; font: 600 13.5px/1.5 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }
.bd-ds-guide__panel p { margin: 0; }

/* Layers: flex gap 44; visual 310 high with 300×190 planes (rotateX 58, rotateZ −38), legend column gap 20. */
.bd-ds-layers { display: flex; gap: 44px; align-items: center; }
.bd-ds-layers__visual { flex: 1; position: relative; height: 310px; }
.bd-ds-plane { position: absolute; left: 50%; width: 300px; height: 190px; margin-left: -150px; transform: rotateX(58deg) rotateZ(-38deg); transform-origin: center; border-radius: 4px; }
.bd-ds-plane__inner { position: absolute; inset: 0; }
.bd-ds-plane.is-path { background: rgba(250,154,66,.06); border: 1px solid rgba(250,154,66,.4); }
.bd-ds-plane.is-path .bd-ds-plane__inner { left: 12%; right: 10%; top: 22%; bottom: 24%; border: 3px dashed var(--bd-sun); border-radius: 100px 20px 100px 20px; }
.bd-ds-plane.is-bg { background: linear-gradient(120deg, rgba(163,0,190,.75), rgba(245,52,119,.55) 55%, rgba(250,154,66,.6)); box-shadow: 0 30px 40px -10px rgba(0,0,0,.5); }
.bd-ds-plane.is-stage { background: linear-gradient(150deg, #3b3966, #1a1746); border: 1px solid rgba(247,248,249,.2); box-shadow: 0 30px 40px -10px rgba(0,0,0,.5); }
.bd-ds-plane.is-stage .bd-ds-plane__inner { left: 14%; right: 14%; top: 38%; bottom: auto; height: 28%; background: repeating-linear-gradient(90deg, rgba(247,248,249,.85) 0 21%, transparent 21% 26.3%); }
.bd-ds-plane.is-gradient { background: linear-gradient(120deg, rgba(163,0,190,.55), rgba(250,154,66,.45)); border: 1px solid rgba(247,248,249,.2); }
.bd-ds-plane.is-mask { background: rgba(247,248,249,.06); border: 1px dashed rgba(247,248,249,.5); }
.bd-ds-plane.is-mask .bd-ds-plane__inner { background: radial-gradient(circle at 50% 50%, rgba(247,248,249,.9) 0 54px, rgba(247,248,249,.35) 55px 76px, transparent 77px); }
.bd-ds-plane.is-image { background: linear-gradient(160deg, #3b8f7a, #1a4f6e); box-shadow: 0 30px 40px -10px rgba(0,0,0,.5); }
.bd-ds-layers__legend { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.bd-ds-layers__kicker { margin: 0; }
.bd-ds-layers__heading { margin: 8px 0 0 !important; font: 700 22px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-layers__item { display: flex; gap: 14px; align-items: flex-start; }
.bd-ds-layers__dot { width: 12px; height: 12px; border-radius: 100px; flex: none; margin-top: 5px; background: var(--bd-sun); }
.bd-ds-layers__dot.is-icons, .bd-ds-layers__dot.is-mask { background: var(--bd-haze); }
.bd-ds-layers__dot.is-bg, .bd-ds-layers__dot.is-gradient { background: linear-gradient(120deg, #a300be, #fa9a42); }
.bd-ds-layers__dot.is-stage { background: #3b3966; }
.bd-ds-layers__dot.is-image { background: linear-gradient(160deg, #3b8f7a, #1a4f6e); }
.bd-ds-layers__t { font: 700 15.5px/1.35 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-layers__b { margin-top: 3px !important; font: 600 14px/1.55 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }

/* Formats: 3 columns gap 12, aligned at the bottom; box border 2 orange .7, radius 4; size 700 20 (mt 6). */
.bd-ds-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 0; padding: 0; list-style: none; }
.bd-ds-formats li { display: flex; align-items: flex-end; gap: 18px; }
.bd-ds-formats__box { flex: none; border: 2px solid rgba(250,154,66,.7); border-radius: 4px; box-sizing: border-box; }
.bd-ds-formats .bd-kicker { display: block; }
.bd-ds-formats__size { display: block; margin-top: 6px; font: 700 20px/1.2 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }

/* Cards (2 columns gap 24/36), cards3 (3 columns gap 24/32), states (5 columns gap 20): top hairline .14, padding 14. */
.bd-ds-gcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; margin: 0; padding: 0; list-style: none; }
.bd-ds-gcards.is-cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.bd-ds-gcards.is-states { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.bd-ds-gcards li { padding-top: 14px; border-top: 1px solid rgba(247,248,249,.14); }
.bd-ds-gcards__t { font: 700 17px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-gcards__b { margin-top: 6px !important; font: 600 14.5px/1.6 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }
.bd-ds-gcards.is-states .bd-ds-gcards__t { font-size: 15px; }
.bd-ds-gcards.is-states .bd-ds-gcards__b { font-size: 13.5px; line-height: 1.5; }

/* Steps: 4 columns gap 12; 32px orange number circle with a 1px line; title 17; text 14/1.55. */
.bd-ds-gsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bd-ds-gsteps li { display: flex; flex-direction: column; gap: 12px; }
.bd-ds-gsteps__n { display: flex; align-items: center; gap: 10px; }
.bd-ds-gsteps__n span { width: 32px; height: 32px; border-radius: 100px; background: var(--bd-sun); color: var(--bd-ink); display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--wp--preset--font-family--montserrat); flex: none; }
.bd-ds-gsteps__n::after { content: ""; flex: 1; height: 1px; background: rgba(247,248,249,.2); }
.bd-ds-gsteps__b { font: 600 14px/1.55 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }

/* Checklist: 2 columns gap 36; Do orange with ✓, Avoid with ✕ .58; items 600 14/1.5 .82 gap 10 (mt 14). */
.bd-ds-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.bd-ds-check > div { padding-top: 14px; border-top: 1px solid rgba(247,248,249,.14); }
.bd-ds-check__title { font: 700 15.5px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ds-check__title.is-do { color: var(--bd-sun); }
.bd-ds-check ul { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.bd-ds-check li { display: flex; gap: 10px; font: 600 14px/1.5 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }
.bd-ds-check li > span:first-child { color: var(--bd-sun); flex: none; }
.bd-ds-check ul.is-avoid li > span:first-child { color: var(--bd-disabled); }

@media (max-width: 1023px) {
	.bd-ds-guide__block { padding: 30px 28px; }
	.bd-ds-layers { flex-direction: column; align-items: stretch; gap: 24px; }
	.bd-ds-layers__visual { flex: none; }
	.bd-ds-gcards.is-cards3 { grid-template-columns: 1fr; }
	.bd-ds-gcards.is-states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bd-ds-gsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 767px) {
	.bd-ds-guide__block { padding: 24px 20px; }
	.bd-ds-layers__visual { display: none; }
	.bd-ds-formats { grid-template-columns: 1fr; gap: 18px; }
	.bd-ds-gcards, .bd-ds-gcards.is-states, .bd-ds-check, .bd-ds-gsteps { grid-template-columns: 1fr; }
	.bd-ds-check { gap: 24px; }
}