/* Features & pricing (Products - alle einzeln, 2026-10). Plan columns 168px (1 plan 210, 4 → 140, 5+ → 116);
   lg 128 (1 → 168, 4+ → 116), md 112 (1 → 140, 4+ → 100); single-plan view (responsive spec §4.6) one column of 76
   (mobile 72).
   Group boxes .06 with a .12 top line; rows .06 lines; open row .04. */
.bd-ft { --bd-col: 168px; --bd-ft-line: rgba(247,248,249,.06); }
.bd-ft.bd-ft--p1 { --bd-col: 210px; }
.bd-ft.bd-ft--p4 { --bd-col: 140px; }
.bd-ft.bd-ft--p5 { --bd-col: 116px; }
.bd-ft { font-family: var(--wp--preset--font-family--montserrat); }
.bd-ft p { margin: 0; }

/* ---------- Head: tools + plan columns ---------- */
.bd-ft__head { display: flex; align-items: flex-end; }
.bd-ft__tools { flex: 1; min-width: 0; padding: 0 24px 18px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.bd-ft__search { display: inline-flex; align-items: center; border: 1.5px solid rgba(247,248,249,.18); border-radius: var(--bd-r-pill); padding: 0 20px; transition: border-color 180ms ease-out; }
.bd-ft__search:focus-within { border-color: var(--bd-sun); }
.bd-ft__search input { background: none; border: 0; border-radius: 0; outline: 0; box-shadow: none; color: var(--bd-haze); font: 600 13.5px/17px var(--wp--preset--font-family--montserrat); padding: 9px 0; width: 136px; height: auto; min-height: 0; margin: 0; }
.bd-ft__search input::placeholder { color: var(--bd-meta); opacity: 1; }
.bd-ft__search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.bd-ft__new { display: flex; align-items: center; gap: 8px; cursor: pointer; border-radius: var(--bd-r-pill); padding: 9px 18px; font: 700 13.5px/17px var(--wp--preset--font-family--montserrat); border: 1.5px solid rgba(247,248,249,.18); background: transparent; color: var(--bd-body); transition: border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out; }
.bd-ft__new:hover { border-color: rgba(247,248,249,.4); color: var(--bd-haze); }
.bd-ft__new[aria-pressed="true"] { border-color: var(--bd-sun); background: rgba(250,154,66,.14); color: var(--bd-haze); }
.bd-ft__dot { width: 7px; height: 7px; border-radius: 100px; background: var(--bd-sun); flex: none; }

.bd-ft__plans { display: flex; list-style: none; margin: 0; padding: 0; flex: none; }
.bd-ft__plan { width: var(--bd-col); flex: none; box-sizing: border-box; padding: 0 10px 18px; text-align: center; display: flex; flex-direction: column; }
.bd-ft__plan-name { display: block; font: 700 18px/1.22 var(--wp--preset--font-family--montserrat); color: var(--bd-haze); }
.bd-ft__plan-price { display: block; font: 600 12.5px/1.22 var(--wp--preset--font-family--montserrat); color: var(--bd-body); margin: 4px 0 13px; }
.bd-ft .bd-ft__plan .bd-ft__plan-cta { display: flex; width: 100%; margin-top: auto; font: 700 13px/16px var(--wp--preset--font-family--montserrat); padding: 10px 4px; border: 1.5px solid rgba(247,248,249,.5); color: var(--bd-haze); white-space: normal; text-align: center; }
.bd-ft .bd-ft__plan .bd-ft__plan-cta:hover { border-color: var(--bd-haze); background: rgba(247,248,249,.06); color: var(--bd-haze); }
/* Announced plugin: the hinted "· upcoming" pill keeps the dashed, muted look (no hover). */
.bd-ft .bd-ft__plan .bd-ft__plan-cta.bd-upcoming, .bd-ft .bd-ft__plan .bd-ft__plan-cta.bd-upcoming:hover { justify-content: center; border: 1.5px dashed rgba(247,248,249,.32); background: none; color: rgba(247,248,249,.68); }
/* Free download form (somdn) inside a plan column. */
.bd-ft__plan .bd-free-dl { margin-top: auto; width: 100%; }
.bd-ft__plan .bd-free-dl form { margin: 0; width: 100%; }

/* ---------- Table ---------- */
.bd-ft__table { display: block; }
.bd-ft__thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Group head: one box; the stretched toggle makes the whole box clickable. */
.bd-ft__group-row { display: flex; align-items: center; position: relative; cursor: pointer; margin-top: 6px; background: rgba(247,248,249,.06); border-top: 1px solid rgba(247,248,249,.12); border-radius: 4px; }
.bd-ft__group-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 16px 24px 16px 16px; }
.bd-ft__sign { width: 24px; height: 24px; flex: none; box-sizing: border-box; border-radius: 100px; border: 1.5px solid rgba(247,248,249,.55); color: var(--bd-haze); display: flex; align-items: center; justify-content: center; transition: transform 220ms ease-out, color 200ms ease-out, border-color 200ms ease-out; }
.bd-ft__sign svg { display: block; }
.bd-ft__group-row.is-open .bd-ft__sign { transform: rotate(45deg); color: var(--bd-sun); border-color: var(--bd-sun); }
.bd-ft__group-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bd-ft__group-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.bd-ft__group-toggle { background: none; border: 0; padding: 0; margin: 0; color: var(--bd-haze); font: 700 16px/1.22 var(--wp--preset--font-family--montserrat); text-align: left; cursor: pointer; }
.bd-ft__group-toggle::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.bd-ft__group-toggle:focus-visible { outline: 0; }
.bd-ft__group-toggle:focus-visible::after { outline: 2px solid var(--bd-sun); outline-offset: 2px; }
.bd-ft__group-toggle[aria-disabled="true"] { cursor: default; }
.bd-ft__group-row:has([aria-disabled="true"]) { cursor: default; }
.bd-ft__upd { display: flex; align-items: center; gap: 6px; font: 700 12px/1.2 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); }
.bd-ft__upd::before { content: ""; width: 6px; height: 6px; border-radius: 100px; background: var(--bd-sun); flex: none; }
.bd-ft__group-row.is-open .bd-ft__upd { display: none; }
.bd-ft__group-desc { font: 600 13.5px/1.45 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }
.bd-ft__count { width: var(--bd-col); flex: none; box-sizing: border-box; align-self: stretch; padding: 12px 10px; display: flex; align-items: center; justify-content: center; text-align: center; font: 700 13px/1.2 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }
.bd-ft__count.is-all { color: var(--bd-haze); }
.bd-ft__count.is-none { font-size: 15px; color: rgba(247,248,249,.45); }

/* Feature rows */
.bd-ft__rows { padding-bottom: 8px; }
.bd-ft__row { display: flex; align-items: stretch; position: relative; cursor: pointer; padding-left: 16px; border-top: 1px solid var(--bd-ft-line); transition: background-color 180ms ease-out; }
.bd-ft__row.is-open { background: rgba(247,248,249,.04); }
.bd-ft__feature { flex: 1; min-width: 0; padding: 12px 24px 12px 0; display: flex; align-items: center; }
.bd-ft__row-toggle { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; margin: 0; color: var(--bd-haze); font: 600 15px/1.22 var(--wp--preset--font-family--montserrat); text-align: left; cursor: pointer; }
.bd-ft__row-toggle::after { content: ""; position: absolute; inset: 0; }
.bd-ft__row-toggle:focus-visible { outline: 0; }
.bd-ft__row-toggle:focus-visible::after { outline: 2px solid var(--bd-sun); outline-offset: -2px; border-radius: 4px; }
.bd-ft__label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.bd-ft__caret { font: 700 15px/1 var(--wp--preset--font-family--montserrat); color: var(--bd-disabled); width: 12px; flex: none; transition: transform 200ms ease-out, color 200ms ease-out; }
.bd-ft__row.is-open .bd-ft__caret { transform: rotate(90deg); color: var(--bd-sun); }
.bd-ft__row:hover .bd-ft__caret { color: var(--bd-sun); }
.bd-ft__badge { padding: 2px 7px; border-radius: 4px; font: 700 10px/1.3 var(--wp--preset--font-family--montserrat); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.bd-ft__badge--new { background: var(--bd-sun); color: var(--bd-ink); padding: 3px 7px; }
.bd-ft__badge--updated { border: 1px solid rgba(250,154,66,.7); color: var(--bd-sun); }
.bd-ft__badge--upcoming { border: 1px dashed rgba(247,248,249,.55); color: var(--bd-body); }
.bd-ft__needs { font: 600 12.5px/1.2 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }
.bd-ft__cell { width: var(--bd-col); flex: none; box-sizing: border-box; padding: 12px 10px; display: flex; align-items: center; justify-content: center; text-align: center; font: 700 15px/1 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.45); }
.bd-ft__cell.is-in { color: var(--bd-haze); }
.bd-ft__cell--all { width: calc(var(--bd-col) * var(--bd-plans)); font: 600 13px/1.3 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }

/* Detail */
.bd-ft__detail-inner { padding: 2px 0 26px 22px; max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.bd-ft__desc { font: 600 15.5px/1.6 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.88); }
.bd-ft__note { font: 600 14px/1.55 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); }
.bd-ft__what { font: 600 15px/1.6 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }
.bd-ft__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px !important; }
.bd-ft__links a { font: 700 13.5px/1.4 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); transition: color 180ms ease-out; }
.bd-ft__links a:hover { color: var(--bd-haze); }
/* Update 8: note under a demo course link that needs an own account (own line, 12.5 .68, max 440). */
.bd-ft__demo-note { flex-basis: 100%; max-width: 440px; margin-top: -4px; font: 600 12.5px/1.5 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.68); }
/* "Watch the video" (2026-10-20b): a lightbox trigger styled as the links, play triangle 11px, gap 7. */
.bd-ft__video { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; border: 0; background: none; font: 700 13.5px/1.4 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); cursor: pointer; transition: color 180ms ease-out; }
.bd-ft__video:hover { color: var(--bd-haze); }

.bd-ft__empty { font: 600 14px/1.5 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); padding: 24px 0 24px 16px; }

/* Footer: legend + release links */
.bd-ft__foot { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid rgba(247,248,249,.12); padding-top: 16px; font: 600 13px/1.4 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }
.bd-ft__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.bd-ft__releases { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.bd-ft__releases a { color: var(--bd-sun); transition: color 180ms ease-out; }
.bd-ft__releases .bd-ft__all-releases { color: var(--bd-body); text-decoration: underline; text-underline-offset: 4px; }
.bd-ft__releases a:hover { color: var(--bd-haze); }

/* Without JS: everything open, no tools. */
html:not(.js) .bd-ft__tools { display: none; }
html:not(.js) .bd-ft__rows[hidden], html:not(.js) .bd-ft__detail[hidden] { display: block; }

/* lg */
@media (max-width: 1279px) {
	.bd-ft { --bd-col: 128px; }
	.bd-ft.bd-ft--p1 { --bd-col: 168px; }
	.bd-ft.bd-ft--p4, .bd-ft.bd-ft--p5 { --bd-col: 116px; }
	.bd-ft__plan { padding-inline: 6px; }
}
/* md: tools above the table, plan columns 96px, 44px targets. */
@media (max-width: 1023px) {
	.bd-ft { --bd-col: 112px; }
	.bd-ft.bd-ft--p1 { --bd-col: 140px; }
	.bd-ft.bd-ft--p4, .bd-ft.bd-ft--p5 { --bd-col: 100px; }
	.bd-ft__head { flex-wrap: wrap; justify-content: flex-end; }
	.bd-ft__tools { flex-basis: 100%; padding: 0 0 22px; }
	.bd-ft__search, .bd-ft__new { min-height: 44px; box-sizing: border-box; }
	.bd-ft__search input { min-height: 41px; }
	.bd-ft__plan { padding-inline: 6px; }
	.bd-ft__plan-name { font-size: 15px; }
	.bd-ft__plan-price { font-size: 12px; }
	.bd-ft .bd-ft__plan .bd-ft__plan-cta { font-size: 12.5px; line-height: 1.2; min-height: 44px; align-items: center; padding: 6px; white-space: normal; }
	.bd-ft__group-head { padding: 14px 16px 14px 14px; gap: 12px; }
	.bd-ft__feature { padding: 13px 16px 13px 0; }
	.bd-ft__cell--all { font-size: 12.5px; }
}
/* Plan switcher: only in the single-plan view. */
.bd-ft__switch { display: none; }

/* ---------- Single-plan view (responsive spec §4.6; view.js .is-single below 900px, or below 1280px with > 4 plans) ----------
   Order: plan switcher (sticky under the navigation) → search / "What's new" → legend (one column) → the selected
   plan's head (name, price, button full width) → table with one plan column → release links. */
.bd-ft.is-single { --bd-col: 76px; display: flex; flex-direction: column; }
.bd-ft.is-single .bd-ft__head, .bd-ft.is-single .bd-ft__foot { display: contents; }
.bd-ft.is-single [data-p]:not(.is-pick) { display: none; }
.bd-ft.is-single .bd-ft__switch { order: 1; display: block; position: sticky; top: calc(var(--bd-header-offset, 60px) + var(--wp-admin--admin-bar--height, 0px)); z-index: 3; margin: 0 calc(-1 * var(--bd-gutter)) 18px; padding: 10px 0; background: rgba(5,1,52,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(247,248,249,.12); transition: top 320ms var(--bd-ease); }
.bd-ft__switch-row { display: flex; gap: 8px; padding: 0 var(--bd-gutter); overflow-x: auto; scroll-padding-inline: var(--bd-gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.bd-ft__switch-row::-webkit-scrollbar { display: none; }
/* More pills to the right (view.js data-more): fade the right edge, as the section bar. */
.bd-ft__switch-row[data-more] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.bd-ft__pill { flex: 1 0 auto; min-height: 44px; margin: 0; padding: 0 18px; box-sizing: border-box; border: 1.5px solid rgba(247,248,249,.24); border-radius: var(--bd-r-pill); background: none; color: var(--bd-body); font: 700 13.5px/1.2 var(--wp--preset--font-family--montserrat); white-space: nowrap; cursor: pointer; transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out; }
.bd-ft__pill:hover { border-color: rgba(247,248,249,.5); color: var(--bd-haze); }
.bd-ft__pill[aria-checked="true"] { background: var(--bd-sun); border-color: var(--bd-sun); color: var(--bd-ink); }
.bd-ft__pill:focus-visible { outline-offset: 2px; }
.bd-ft.is-single .bd-ft__tools { order: 2; flex-basis: auto; padding: 0; }
.bd-ft.is-single .bd-ft__search { flex: 1 1 100%; min-height: 44px; box-sizing: border-box; }
.bd-ft.is-single .bd-ft__search input { width: 100%; min-height: 41px; }
.bd-ft.is-single .bd-ft__new { min-height: 44px; box-sizing: border-box; }
.bd-ft.is-single .bd-ft__legend { order: 3; flex-direction: column; gap: 4px; margin-top: 16px; font: 600 13px/1.4 var(--wp--preset--font-family--montserrat); color: var(--bd-meta); }
/* Plan head of the selected plan: name, price, the button below at full width. */
.bd-ft.is-single .bd-ft__plans { order: 4; display: block; margin-top: 24px; }
.bd-ft.is-single .bd-ft__plan { width: auto; padding: 0 0 18px; align-items: stretch; text-align: left; }
.bd-ft.is-single .bd-ft__plan-name { font-size: 18px; }
.bd-ft.is-single .bd-ft__plan-price { margin: 3px 0 14px; font-size: 13px; }
.bd-ft.is-single .bd-ft__plan .bd-ft__plan-cta { min-height: 44px; padding: 12px 16px; font-size: 14px; align-items: center; }
.bd-ft.is-single .bd-ft__table { order: 5; }
.bd-ft.is-single .bd-ft__empty { order: 6; }
.bd-ft.is-single .bd-ft__releases { order: 7; margin-top: 18px; padding-top: 6px; border-top: 1px solid rgba(247,248,249,.12); font: 600 13px/1.4 var(--wp--preset--font-family--montserrat); gap: 0 18px; }
.bd-ft.is-single .bd-ft__releases a { display: inline-flex; align-items: center; min-height: 44px; }
.bd-ft.is-single:not(:has(.bd-ft__plans)) .bd-ft__table { margin-top: 22px; }

/* Table: feature name (badges below it) + the one plan column. */
.bd-ft.is-single .bd-ft__group-head { padding: 14px 8px 14px 12px; gap: 10px; align-items: flex-start; }
.bd-ft.is-single .bd-ft__sign { width: 22px; height: 22px; margin-top: 1px; }
.bd-ft.is-single .bd-ft__group-toggle { font-size: 15px; }
.bd-ft.is-single .bd-ft__group-title { gap: 4px 10px; }
.bd-ft.is-single .bd-ft__group-desc { font-size: 13px; }
.bd-ft.is-single .bd-ft__count { padding: 12px 6px; font-size: 13px; }
.bd-ft.is-single .bd-ft__count:empty { display: none; }
.bd-ft.is-single .bd-ft__row { padding-left: 12px; }
.bd-ft.is-single .bd-ft__feature { padding: 13px 8px 13px 0; }
.bd-ft.is-single .bd-ft__row-toggle { font-size: 14.5px; gap: 8px; align-items: flex-start; }
.bd-ft.is-single .bd-ft__caret { line-height: 18px; }
.bd-ft.is-single .bd-ft__label { flex-direction: column; align-items: flex-start; gap: 6px; }
.bd-ft.is-single .bd-ft__cell { padding: 12px 6px; }
.bd-ft.is-single .bd-ft__cell--all { width: var(--bd-col); color: var(--bd-haze); font: 700 15px/1 var(--wp--preset--font-family--montserrat); }
.bd-ft.is-single .bd-ft__all-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bd-ft__all-mark { display: none; }
.bd-ft.is-single .bd-ft__all-mark { display: inline; }
.bd-ft.is-single .bd-ft__detail-inner { padding: 2px 12px 22px 32px; }
.bd-ft.is-single .bd-ft__desc { font-size: 15px; }
.bd-ft.is-single .bd-ft__what { font-size: 14.5px; }
.bd-ft.is-single .bd-ft__links { gap: 0 20px; margin-top: 0 !important; }
.bd-ft.is-single .bd-ft__links a, .bd-ft.is-single .bd-ft__video { display: inline-flex; align-items: center; min-height: 44px; }

/* Before view.js has run, and without JS: the full table scrolls inside its box below 900px (never the page). */
@media (max-width: 899px) {
	.bd-ft:not(.is-single) { overflow-x: auto; }
	.bd-ft:not(.is-single) > :is(.bd-ft__head, .bd-ft__table, .bd-ft__foot) { min-width: 640px; }
}
@media (min-width: 768px) {
	.bd-ft.is-single .bd-ft__search { flex: 1 1 260px; } /* tablet: search and "What's new" side by side */
}
@media (max-width: 767px) {
	.bd-ft.is-single { --bd-col: 72px; }
	.bd-ft.is-single .bd-ft__detail-inner { padding-left: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.bd-ft__sign, .bd-ft__caret, .bd-ft__switch, .bd-ft__pill { transition: none; }
}