/* Home: the opening (headline + the logo's rising chart), then the two ways in. */
.dbm-home .dbm-main { padding-top: 0; }
.dbm-hero { padding: var(--dbm-s8) 0 var(--dbm-s7); }
.dbm-hero .dbm-container { display: grid; grid-template-columns: 7fr 5fr; gap: var(--dbm-s7); align-items: center; }
.dbm-hero h1 { font-size: var(--dbm-step-5); line-height: 0.98; letter-spacing: -0.035em; max-width: 13ch; margin-bottom: var(--dbm-s5); }
.dbm-hero-lead { font-size: var(--dbm-step-1); line-height: 1.4; max-width: 34ch; margin-bottom: var(--dbm-s6); }
.dbm-hero-actions { display: flex; gap: var(--dbm-s3); flex-wrap: wrap; }
.dbm-chart { width: 100%; max-width: 440px; justify-self: end; }
.dbm-chart .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: dbm-rise 0.7s cubic-bezier(.2,.8,.2,1) both; }
.dbm-chart .bar:nth-of-type(2) { animation-delay: 0.12s; }
.dbm-chart .bar:nth-of-type(3) { animation-delay: 0.24s; }
.dbm-chart .trend { stroke-dasharray: 520; stroke-dashoffset: 520; animation: dbm-draw 0.9s 0.55s ease-out forwards; }
.dbm-chart .head { opacity: 0; animation: dbm-show 0.2s 1.35s forwards; }
@keyframes dbm-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dbm-draw { to { stroke-dashoffset: 0; } }
@keyframes dbm-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dbm-chart .trend { stroke-dashoffset: 0; } .dbm-chart .head { opacity: 1; } }
@media (max-width: 860px) { .dbm-hero { padding-top: var(--dbm-s6); } .dbm-hero .dbm-container { grid-template-columns: 1fr; gap: var(--dbm-s6); } .dbm-hero-lead { font-size: 1.25rem; } .dbm-chart { max-width: 220px; justify-self: start; } }

.dbm-paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dbm-s6); }
.dbm-path { border-top: 8px solid var(--dbm-black); padding-top: var(--dbm-s5); }
.dbm-path--agency { border-top-color: var(--dbm-blue); }
.dbm-path--academy { border-top-color: var(--dbm-green); }
.dbm-path h2 { font-size: var(--dbm-step-2); max-width: 18ch; margin: var(--dbm-s3) 0; }
.dbm-path p { color: var(--dbm-muted); }
@media (max-width: 760px) { .dbm-paths { grid-template-columns: 1fr; } }

.dbm-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--dbm-s7); align-items: start; }
.dbm-split h2 { position: sticky; top: 110px; }
@media (max-width: 860px) { .dbm-split { grid-template-columns: 1fr; } .dbm-split h2 { position: static; } }

/* Course page */
.dbm-course-head { display: grid; grid-template-columns: 1fr auto; gap: var(--dbm-s6); align-items: end; padding-bottom: var(--dbm-s6); border-bottom: 2px solid var(--dbm-black); margin-bottom: var(--dbm-s6); }
.dbm-course-head h1 { max-width: 18ch; margin: var(--dbm-s3) 0; }
.dbm-course-head .dbm-lead { font-size: var(--dbm-step-1); line-height: 1.4; color: var(--dbm-muted); max-width: 40ch; margin: 0; }
.dbm-buy { text-align: right; }
.dbm-buy .dbm-price { font-size: var(--dbm-step-3); font-weight: 800; letter-spacing: -0.02em; display: block; margin-bottom: var(--dbm-s3); }
@media (max-width: 760px) { .dbm-course-head { grid-template-columns: 1fr; } .dbm-buy { text-align: left; } }
.dbm-facts { display: flex; flex-wrap: wrap; gap: var(--dbm-s2) var(--dbm-s6); list-style: none; padding: 0; margin: 0 0 var(--dbm-s6); font-weight: 500; }
.dbm-curriculum { list-style: none; padding: 0; counter-reset: sec; }
.dbm-curriculum > li { counter-increment: sec; padding: var(--dbm-s4) 0; border-bottom: 1px solid var(--dbm-line); }
.dbm-curriculum > li > strong::before { content: counter(sec) ". "; }
.dbm-curriculum ul { margin: var(--dbm-s2) 0 0; padding-left: var(--dbm-s5); color: var(--dbm-muted); font-size: var(--dbm-step--1); }

/* Checkout */
.dbm-checkout { max-width: 34rem; border: 2px solid var(--dbm-black); border-radius: var(--dbm-radius-lg); padding: var(--dbm-s6); }
.dbm-checkout .dbm-price { font-size: var(--dbm-step-3); font-weight: 800; display: block; margin: var(--dbm-s2) 0 var(--dbm-s5); }

/* Articles */
.dbm-article { max-width: 46rem; }
.dbm-article .dbm-lead { font-size: var(--dbm-step-1); line-height: 1.45; color: var(--dbm-muted); }
.dbm-article img { border-radius: var(--dbm-radius); }
.dbm-results { border-left: 6px solid var(--dbm-green); padding-left: var(--dbm-s5); margin: var(--dbm-s6) 0; }
.dbm-results li { font-weight: 700; font-size: var(--dbm-step-1); line-height: 1.3; margin-bottom: var(--dbm-s3); }

/* Not found */
.dbm-404 h1 { font-size: var(--dbm-step-5); }

/* Plugin pages inside the theme (help centre, quotations, tickets) */
.dbm-plugin-page > * { max-width: 52rem; }
.dbm-plugin-page .msg { border: 1px solid var(--dbm-line); border-radius: var(--dbm-radius); padding: var(--dbm-s3) var(--dbm-s4); margin: var(--dbm-s3) 0; }
.dbm-plugin-page .msg.staff { background: var(--dbm-green-soft); }
.dbm-plugin-page .muted { color: var(--dbm-muted); }
.dbm-plugin-page .ok { font-weight: 700; border-left: 6px solid var(--dbm-green); background: var(--dbm-green-soft); padding: var(--dbm-s3) var(--dbm-s4); }
.dbm-plugin-page .err { font-weight: 700; border-left: 6px solid var(--dbm-red); background: var(--dbm-red-soft); color: var(--dbm-red-text); padding: var(--dbm-s3) var(--dbm-s4); }
.dbm-plugin-page .hp { position: absolute !important; left: -9999px; }
.dbm-row p.dbm-result { color: var(--dbm-black); font-weight: 700; }

/* Account area: a menu on the left, the work on the right (a row of tabs on phones). */
.dbm-account { display: grid; grid-template-columns: 15rem 1fr; gap: var(--dbm-s7); align-items: start; }
.dbm-account-nav ul { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--dbm-black); }
.dbm-account-nav li { border-bottom: 1px solid var(--dbm-line); }
.dbm-account-nav a { display: block; padding: var(--dbm-s3) var(--dbm-s2); text-decoration: none; font-weight: 500; }
.dbm-account-nav a[aria-current="page"] { font-weight: 800; box-shadow: inset 6px 0 0 var(--dbm-green); padding-left: var(--dbm-s5); }
.dbm-account-body { min-width: 0; }
.dbm-account-body > h1 { font-size: var(--dbm-step-3); }
.dbm-h3 { font-size: var(--dbm-step-1); margin-top: var(--dbm-s6); }
.dbm-lead { font-size: var(--dbm-step-1); line-height: 1.4; color: var(--dbm-muted); }
@media (max-width: 860px) {
	.dbm-account { grid-template-columns: 1fr; gap: var(--dbm-s5); }
	.dbm-account-nav ul { display: flex; overflow-x: auto; border-top: 0; border-bottom: 2px solid var(--dbm-black); gap: var(--dbm-s4); }
	.dbm-account-nav li { border: 0; flex: 0 0 auto; }
	.dbm-account-nav a[aria-current="page"] { box-shadow: inset 0 -5px 0 var(--dbm-green); padding-left: var(--dbm-s2); }
}
.dbm-panel { border: 2px solid var(--dbm-black); border-radius: var(--dbm-radius-lg); padding: var(--dbm-s5); margin: var(--dbm-s6) 0; }
.dbm-panel > h2 { font-size: var(--dbm-step-1); }
.dbm-panel summary { cursor: pointer; font-weight: 700; margin: var(--dbm-s3) 0; }
.dbm-video { position: relative; aspect-ratio: 16 / 9; margin-bottom: var(--dbm-s5); background: var(--dbm-black); border-radius: var(--dbm-radius); overflow: hidden; }
.dbm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dbm-outline { list-style: none; padding: 0; margin: 0 0 var(--dbm-s5); }
.dbm-outline li { padding: var(--dbm-s3) 0 var(--dbm-s3) var(--dbm-s6); border-bottom: 1px solid var(--dbm-line); position: relative; }
.dbm-outline li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 14px; height: 14px; border: 2px solid var(--dbm-black); border-radius: 50%; }
.dbm-outline .dbm-outline-done::before { background: var(--dbm-green); }
.dbm-outline .dbm-outline-locked, .dbm-outline .dbm-outline-scheduled { color: var(--dbm-muted); }
.dbm-outline .dbm-outline-locked::before, .dbm-outline .dbm-outline-scheduled::before { border-color: var(--dbm-line); }
.dbm-outline-head { font-size: var(--dbm-step-1); margin-top: var(--dbm-s6); }
.dbm-pager { display: flex; justify-content: space-between; gap: var(--dbm-s5); margin-top: var(--dbm-s7); padding-top: var(--dbm-s5); border-top: 2px solid var(--dbm-black); }
.dbm-question { border: 0; border-top: 1px solid var(--dbm-line); padding: var(--dbm-s5) 0; margin: 0; }
.dbm-question legend { font-weight: 700; font-size: var(--dbm-step-0); padding: 0; margin-bottom: var(--dbm-s3); }
.dbm-option { padding: var(--dbm-s2) var(--dbm-s3); border: 2px solid var(--dbm-line); border-radius: var(--dbm-radius); margin: var(--dbm-s2) 0; max-width: 40rem; }
.dbm-option:has(input:checked) { border-color: var(--dbm-black); background: var(--dbm-green-soft); }
.dbm-option.is-right { border-color: var(--dbm-green); }
.dbm-option.is-wrong { border-color: var(--dbm-red); background: var(--dbm-red-soft); }
.dbm-quiz-actions { display: flex; gap: var(--dbm-s3); flex-wrap: wrap; }
.dbm-message { border: 1px solid var(--dbm-line); border-radius: var(--dbm-radius); padding: var(--dbm-s3) var(--dbm-s4); margin: var(--dbm-s3) 0; max-width: 46rem; }
.dbm-message.is-mine { background: var(--dbm-green-soft); margin-left: auto; }
.dbm-submission { border-top: 1px solid var(--dbm-line); padding-top: var(--dbm-s3); }
.dbm-updates { padding-left: var(--dbm-s5); }
.dbm-inline p { margin: var(--dbm-s3) 0 0; }
.dbm-stars { border: 0; padding: 0; display: flex; gap: var(--dbm-s4); }
.dbm-stars label { margin: 0; }
.dbm-section-head h1 { margin: 0; }
.dbm-plugin-page > .dbm-account { max-width: none; }
.dbm-account-body h2 { font-size: var(--dbm-step-2); margin-top: var(--dbm-s6); } .dbm-account-body .dbm-panel h2, .dbm-account-body .dbm-panel h3 { margin-top: 0; }