/* The public pages (blendxapi contract 0.125.0): the home page, the catalogue, a Course's and a Program's page.

   Blend-ed Design System 2.0. `bl-*` rules are the system's components as their specs give them (Button, Badge,
   Icon Badge, Variable Input, Summary card, Pill Button, Segmented Control, Course Card · Discovery, Separator);
   `bxp-*` rules are composed from tokens for the parts the system has no component for (page header and footer,
   the home page's sections, the FAQ list). Tokens come from blendx-ds-tokens.css; the brand colour replaces the
   --primary-* ramp in the page's own <style>. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.bxp {
  margin: 0; background: #fff; color: var(--text-strong);
  font: 400 var(--font-size-16)/var(--line-height-24) var(--font-family);
  letter-spacing: var(--letter-spacing-2); font-feature-settings: "cv09", "ss11", "calt" 0, "liga" 0;
  -webkit-font-smoothing: antialiased;
}
.bxp img { max-width: 100%; display: block; }
.bxp a { color: inherit; }
.bxp h1, .bxp h2, .bxp h3, .bxp p { margin: 0; }
.bxp .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bxp .bxp-skip { position: absolute; left: 16px; top: -48px; z-index: 10; }
.bxp .bxp-skip:focus { top: 16px; }
.bxp-icon { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* Type presets (foundations/Typography) */
.bxp .h2 { font: 500 var(--font-size-48)/var(--line-height-56) var(--font-family-display); letter-spacing: var(--letter-spacing-3); }
.bxp .h4 { font: 500 var(--font-size-32)/var(--line-height-40) var(--font-family-display); letter-spacing: var(--letter-spacing-5); }
.bxp .h5 { font: 500 var(--font-size-24)/var(--line-height-32) var(--font-family-display); letter-spacing: var(--letter-spacing-6); }
.bxp .label-lg { font: 500 var(--font-size-18)/var(--line-height-24) var(--font-family); letter-spacing: var(--letter-spacing-1); }
.bxp .label-md { font: 500 var(--font-size-16)/var(--line-height-24) var(--font-family); }
.bxp .p-lg { font-size: var(--font-size-18); line-height: var(--line-height-28, 28px); color: var(--text-default); }
.bxp .p-md { font-size: var(--font-size-16); line-height: var(--line-height-24); color: var(--text-default); }
.bxp .p-sm { font-size: var(--font-size-14); line-height: var(--line-height-20); letter-spacing: var(--letter-spacing-4); color: var(--text-default); }

/* ---------- Button (components/Button) ---------- */
.bl-btn {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: var(--radius-3); font: 500 var(--font-size-16)/var(--line-height-24) var(--font-family);
  letter-spacing: var(--letter-spacing-2); font-feature-settings: "cv09", "ss11", "calt" 0, "liga" 0;
  height: 40px; padding: 0 var(--spacing-4); gap: var(--spacing-2); white-space: nowrap; text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out), scale 240ms cubic-bezier(.33, 1, .68, 1);
}
.bl-btn .bxp-icon { font-size: 20px; }
.bl-btn[data-size="medium"] { height: 32px; padding: 0 12px; gap: 4px; font-size: 14px; line-height: 20px; letter-spacing: -0.006em; }
.bl-btn[data-size="medium"] .bxp-icon, .bl-btn[data-size="small"] .bxp-icon { font-size: 16px; }
.bl-btn[data-size="small"] { height: 24px; padding: 0 8px; gap: 4px; font-size: 12px; line-height: 16px; }
.bl-btn:active:not(:disabled) { scale: .95; transition-duration: 180ms; }
.bl-btn:focus-visible { outline: 2px solid var(--primary-alpha-600); outline-offset: 2px; }
.bl-btn[data-color="neutral"]:focus-visible { outline-color: var(--neutral-alpha-8); }
.bl-btn[data-variant="solid"][data-color="primary"] { background: var(--primary-700); color: #fff; }
.bl-btn[data-variant="solid"][data-color="primary"]:hover { background: var(--primary-800); }
.bl-btn[data-variant="solid"][data-color="primary"]:active { background: var(--primary-800); opacity: .92; }
.bl-btn[data-variant="soft"][data-color="primary"] { background: var(--primary-alpha-100); color: var(--primary-900); }
.bl-btn[data-variant="soft"][data-color="primary"]:hover { background: var(--primary-alpha-200); }
.bl-btn[data-variant="soft"][data-color="primary"]:active { background: var(--primary-alpha-300); }
.bl-btn[data-variant="outline"][data-color="primary"] { box-shadow: inset 0 0 0 1px var(--primary-500); color: var(--primary-900); }
.bl-btn[data-variant="outline"][data-color="primary"]:hover { box-shadow: inset 0 0 0 1px var(--primary-600); }
.bl-btn[data-variant="outline"][data-color="primary"]:active { box-shadow: inset 0 0 0 1px var(--primary-600); background: var(--primary-100); }
.bl-btn[data-variant="ghost"][data-color="primary"] { color: var(--primary-900); }
.bl-btn[data-variant="ghost"][data-color="primary"]:hover { background: var(--primary-100); }
.bl-btn[data-variant="ghost"][data-color="primary"]:active { background: var(--primary-200); }
.bl-btn[data-variant="outline"][data-color="neutral"] { box-shadow: inset 0 0 0 1px var(--neutral-alpha-6); color: var(--neutral-11); }
.bl-btn[data-variant="outline"][data-color="neutral"]:hover { box-shadow: inset 0 0 0 1px var(--neutral-alpha-7); }
.bl-btn[data-variant="outline"][data-color="neutral"]:active { box-shadow: inset 0 0 0 1px var(--neutral-alpha-9); }
.bl-btn[data-variant="ghost"][data-color="neutral"] { color: var(--neutral-11); }
.bl-btn[data-variant="ghost"][data-color="neutral"]:hover { background: var(--neutral-alpha-3); }
.bl-btn[data-variant="ghost"][data-color="neutral"]:active { background: var(--neutral-alpha-4); }
.bl-btn[data-variant="ghost"][data-color="neutral"][aria-current="page"] { color: var(--text-strong); background: var(--neutral-alpha-3); }

/* ---------- Badge (components/Badge; Badge words: Course soft accent, Program soft info) ---------- */
.bl-badge {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 4px 8px;
  border-radius: var(--radius-3); font: 500 var(--font-size-12)/var(--line-height-16) var(--font-family);
  letter-spacing: var(--letter-spacing-2); white-space: nowrap;
}
.bl-badge .bxp-icon { font-size: 16px; }
.bl-badge[data-size="1"] { height: 20px; gap: 4px; border-radius: var(--radius-full); }
.bl-badge[data-size="1"] .bxp-icon { font-size: 12px; }
.bl-badge[data-variant="soft"][data-color="neutral"] { background: var(--neutral-alpha-3); color: var(--neutral-alpha-11); }
.bl-badge[data-variant="soft"][data-color="accent"] { background: var(--primary-alpha-100); color: var(--primary-900); }
.bl-badge[data-variant="soft"][data-color="info"] { background: var(--sky-alpha-3); color: var(--sky-11); }
.bl-badge[data-variant="soft"][data-color="success"] { background: rgba(0, 164, 51, .098); color: #193B2D; }
.bl-badge[data-variant="glass"] { background: rgba(0, 0, 0, .2); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: #fff; }

/* ---------- Icon Badge (components/IconBadge) ---------- */
.bl-icon-badge { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 8px; border-radius: var(--radius-4); font-size: 16px; line-height: 1; }
.bl-icon-badge[data-size="large"] { width: 44px; height: 44px; padding: 12px; font-size: 20px; }
.bl-icon-badge[data-color="blue"] { background: var(--primary-alpha-50); color: var(--primary-700); }
.bl-icon-badge[data-color="violet"] { background: var(--violet-alpha-2); color: var(--violet-9); }
.bl-icon-badge[data-color="jade"] { background: var(--jade-alpha-2); color: var(--jade-9); }

/* ---------- Variable Input · search (components/VariableInput) ---------- */
.bl-vinput-box {
  display: flex; align-items: center; gap: 10px; padding: var(--spacing-2) var(--spacing-3); background: #fff;
  border: 1px solid var(--stroke-default); border-radius: var(--radius-3); min-height: 40px;
  transition: border-color var(--duration-base) var(--ease-out);
}
.bl-vinput-box > .bxp-icon { font-size: 16px; color: var(--icons-default); }
.bl-vinput-box > input {
  all: unset; flex: 1; min-width: 0; font: 400 14px/24px var(--font-family); letter-spacing: -0.015em; color: var(--text-strong);
}
.bl-vinput-box > input::placeholder { color: var(--neutral-alpha-9); }
.bl-vinput-box:focus-within { border-color: var(--neutral-9); }
.bl-vinput-box > input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- Pill Button (components/PillButton) ---------- */
.bl-pills { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.bl-pill {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1);
  height: 32px; padding: 6px 12px; border-radius: var(--radius-full); cursor: pointer;
  font: 500 var(--font-size-14)/var(--line-height-20) var(--font-family); letter-spacing: var(--letter-spacing-4);
  color: var(--text-default); box-shadow: inset 0 0 0 1px var(--stroke-default);
  transition: background-color var(--duration-base) var(--ease-out);
}
.bl-pill:hover { background: var(--black-alpha-2); }
.bl-pill[aria-pressed="true"] { background: var(--primary-700); color: var(--neutral-1); box-shadow: none; }
.bl-pill[aria-pressed="true"]:hover { background: var(--primary-800); }
.bl-pill:focus-visible { box-shadow: 0 0 0 1px var(--stroke-accent-strong), 0 0 0 4px var(--primary-300); }

/* ---------- Segmented Control (components/SegmentedControl) ---------- */
.bl-segmented { display: inline-flex; height: 32px; background: var(--neutral-alpha-3); border-radius: var(--radius-3); }
.bl-segment {
  all: unset; box-sizing: border-box; position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--spacing-4); border-radius: var(--radius-3); font: 400 14px/24px var(--font-family);
  letter-spacing: -0.015em; color: var(--text-strong); cursor: pointer; white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-out);
}
.bl-segment + .bl-segment::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; transform: translateY(-50%); background: var(--neutral-alpha-3); }
.bl-segment:hover { background: var(--neutral-alpha-2); }
.bl-segment[aria-checked="true"] { background: #fff; font-weight: 500; letter-spacing: var(--letter-spacing-4); box-shadow: inset 0 0 0 3px var(--neutral-alpha-3); }
.bl-segment[aria-checked="true"]::before, .bl-segment[aria-checked="true"] + .bl-segment::before { display: none; }
.bl-segment:focus-visible { outline: 2px solid var(--neutral-alpha-8); outline-offset: 2px; }

/* ---------- Summary card (components/Kpi) ---------- */
.bl-kpi { display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-5); border-radius: var(--radius-5); background: var(--primary-50); }
.bl-kpi-value { font-family: var(--font-family-display); font-weight: 500; font-size: var(--font-size-32); line-height: var(--line-height-40); letter-spacing: -0.005em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.bl-kpi-label { font: 500 var(--font-size-14)/var(--line-height-20) var(--font-family); letter-spacing: var(--letter-spacing-4); color: var(--text-default); }

/* ---------- Course Card · Discovery (components/CourseCard), filling its grid column ---------- */
.bl-cc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bl-cc {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 16px; background: #fff;
  border-radius: 18px; box-shadow: inset 0 0 0 1px var(--stroke-subtle); text-decoration: none; color: inherit; height: 100%;
}
.bl-cc:focus-visible { outline: 2px solid var(--primary-alpha-600); outline-offset: 2px; }
.bl-cc-pic { position: relative; height: 179.67px; border-radius: 10.97px; overflow: hidden; background: var(--neutral-2); }
.bl-cc-pic img { width: 100%; height: 100%; object-fit: cover; }
.bl-cc-pic .bl-badge { position: absolute; left: 14.54px; bottom: 15.31px; }
.bl-cc-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--icons-minimal); font-size: 40px; box-shadow: inset 0 0 0 1px var(--stroke-subtle); border-radius: inherit; background: #fff; }
.bl-cc-body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bl-cc-title {
  font: 500 20px/28px var(--font-family); color: #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bl-cc-title a { text-decoration: none; }
.bl-cc-title a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.bl-cc-facts { display: flex; align-items: center; gap: 10px; font: 400 11px/16px var(--font-family); color: var(--text-default); }
.bl-cc-fact { display: inline-flex; align-items: center; gap: 4px; }
.bl-cc-fact .bxp-icon { font-size: 16px; color: var(--icons-default); }
.bl-cc-fact .bxp-star { font-size: 10px; color: var(--amber-9); }
.bl-cc-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--icons-minimal); }
.bl-cc-skills { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-cc-price { margin-top: auto; font: 600 22px/140% var(--font-family); letter-spacing: -0.132px; color: #000; }
.bl-cc-price small { font: 400 12px/16px var(--font-family); color: var(--text-default); margin-right: 4px; }

/* ---------- Separator (components/Separator) ---------- */
.bl-separator { height: 1px; background: var(--stroke-subtle); border: 0; margin: 0; }

/* ======================================================================================================
   Composed: page layout (no system component; built from tokens)
   ====================================================================================================== */
.bxp-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
/* The top menu: a floating bar, no rule under it (as www.blend-ed.com's header); sticky 12 from the top. */
.bxp-header { position: sticky; top: 12px; z-index: 5; padding: 12px 24px 0; pointer-events: none; }
.bxp-header-bar {
  pointer-events: auto; position: relative; max-width: 1152px; margin: 0 auto; display: flex; align-items: center; gap: 32px;
  height: 64px; padding: 0 12px 0 20px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--stroke-subtle), var(--shadow-md);
}
.bxp-logo { display: inline-flex; align-items: center; height: 40px; text-decoration: none; }
.bxp-logo img { max-height: 32px; width: auto; }
.bxp-logo span { font: 500 18px/24px var(--font-family-display); }
.bxp-nav { display: flex; align-items: center; gap: 4px; }
.bxp-nav-link {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--radius-3); text-decoration: none;
  font: 500 15px/20px var(--font-family); letter-spacing: var(--letter-spacing-4); color: var(--text-default);
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.bxp-nav-link:hover { color: var(--text-strong); background: var(--neutral-alpha-3); }
.bxp-nav-link[aria-current="page"] { color: var(--text-strong); }
.bxp-nav-link:focus-visible { outline: 2px solid var(--neutral-alpha-8); outline-offset: 2px; }
.bxp-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bxp-menu { display: none; }
.bxp-menu > summary { list-style: none; }
.bxp-menu > summary::-webkit-details-marker { display: none; }
.bxp-menu > summary .bxp-icon { font-size: 20px; }
.bxp-menu-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--stroke-subtle), var(--shadow-md);
  animation: bxp-reveal var(--duration-base) var(--ease-out);
}
.bxp-menu-panel .bxp-nav-link { height: 44px; }

/* Preview notice */
.bxp-preview { background: var(--amber-2, #FEFBE9); box-shadow: inset 0 -1px 0 var(--amber-6, #F3D673); }
.bxp-preview .bxp-wrap { display: flex; align-items: center; gap: 12px; min-height: 48px; font: 500 14px/20px var(--font-family); color: var(--amber-11, #AB6400); }

/* Editing in place, on the preview (js/blendx-public-edit.js) */
.bxp-preview { position: sticky; top: 0; z-index: 6; }
.bxp-preview .bxp-wrap { justify-content: space-between; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.bxp-preview-actions { display: flex; gap: 8px; }
.bxp-preview ~ .bxp-header { top: 72px; }
[data-bx-edit] { cursor: text; border-radius: var(--radius-1); outline: 1px dashed transparent; outline-offset: 4px; transition: outline-color var(--duration-base) var(--ease-out); min-width: 2ch; }
[data-bx-edit]:hover { outline-color: var(--primary-500); }
[data-bx-edit]:focus { outline: 2px solid var(--primary-700); background: var(--primary-alpha-50); }
[data-bx-edit][data-bx-default]:not(:focus) { color: var(--text-subtle); }
[data-bx-edit]:empty::before { content: "…"; color: var(--text-subtle); }
[data-bx-section] { position: relative; }
.bxp-edit-tools {
  position: absolute; top: 12px; right: 24px; z-index: 2; display: flex; gap: 2px; padding: 4px; background: #fff;
  border-radius: var(--radius-3); box-shadow: inset 0 0 0 1px var(--stroke-subtle), var(--shadow-md);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-out);
}
[data-bx-section]:hover > .bxp-edit-tools, [data-bx-section]:focus-within > .bxp-edit-tools { opacity: 1; }
.bxp-edit-tools .bl-btn:disabled { background: none; }
@media (hover: none) { .bxp-edit-tools { opacity: 1; } }

/* Sections */
.bxp-section { padding: 56px 0; }
.bxp-section + .bxp-section { padding-top: 0; }
.bxp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.bxp-section-head > div { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }

/* Hero */
.bxp-hero { padding: 72px 0 56px; }
.bxp-hero .bxp-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.bxp-hero.has-picture .bxp-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.bxp-hero-text { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.bxp-hero:not(.has-picture) .bxp-hero-text { margin: 0 auto; text-align: center; align-items: center; }
.bxp-hero-search { display: flex; gap: 8px; width: 100%; max-width: 560px; margin-top: 16px; text-align: start; }
.bxp-hero-search .bl-vinput-box { flex: 1; }
.bxp-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bxp-hero-picture { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; background: var(--neutral-2); }
.bxp-hero-picture img { width: 100%; height: 100%; object-fit: cover; }

/* Cards composed from tokens get card depth (patterns §6) */
.bxp-card { background: var(--white-contrast, #fff); box-shadow: inset 0 0 0 1px var(--stroke-subtle), var(--shadow-sm); border-radius: 18px; padding: 24px; }

/* Text and picture */
.bxp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.bxp-split.picture-start .bxp-split-picture { order: -1; }
.bxp-split-text { display: flex; flex-direction: column; gap: 16px; }
.bxp-split-text .p-md { white-space: pre-line; }
.bxp-split-picture { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--neutral-2); }
.bxp-split-picture img { width: 100%; height: 100%; object-fit: cover; }

/* Figures */
.bxp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

/* Logos */
.bxp-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 48px; }
.bxp-logos img { height: 40px; width: auto; max-width: 160px; object-fit: contain; }

/* Questions */
.bxp-faq { padding: 8px 24px; }
.bxp-faq details { padding: 16px 0; }
.bxp-faq details + details { box-shadow: inset 0 1px 0 var(--stroke-subtle); }
.bxp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font: 500 16px/24px var(--font-family); color: var(--text-strong); border-radius: var(--radius-2); }
.bxp-faq summary::-webkit-details-marker { display: none; }
.bxp-faq summary:focus-visible { outline: 2px solid var(--neutral-alpha-8); outline-offset: 4px; }
.bxp-faq summary .bxp-icon { font-size: 20px; color: var(--icons-default); transition: transform var(--duration-base) var(--ease-out); }
.bxp-faq details[open] summary .bxp-icon { transform: rotate(45deg); }
.bxp-faq details > p { margin-top: 8px; white-space: pre-line; animation: bxp-reveal var(--duration-base) var(--ease-out); }
@keyframes bxp-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* For teams */
.bxp-teams { display: flex; align-items: center; gap: 24px; }
.bxp-teams > div { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bxp-teams .p-md { white-space: pre-line; }

/* Catalogue page */
.bxp-page-head { padding: 40px 0 24px; display: flex; flex-direction: column; gap: 8px; }
.bxp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.bxp-toolbar .bl-vinput-box { flex: 1 1 280px; max-width: 420px; }
.bxp-tags { margin-bottom: 24px; }
.bxp-count { margin-left: auto; }
.bxp-empty { background: var(--gray-2, #F9F9F9); border-radius: 18px; padding: 40px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
[hidden] { display: none !important; }

/* Item page (picture hero, patterns §10, with the buying panel beside the description) */
.bxp-item { padding: 24px 0 56px; }
.bxp-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.bxp-item-hero { position: relative; height: 200px; border-radius: 18px; overflow: hidden; background: var(--neutral-3); }
.bxp-item-hero img { width: 100%; height: 100%; object-fit: cover; }
.bxp-item-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.72) 100%); }
.bxp-item-hero h1 { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; color: var(--text-inverse, #fff); }
.bxp-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 16px 24px 8px; }
.bxp-item-meta .bl-cc-fact { font: 400 14px/20px var(--font-family); }
.bxp-item-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; margin-top: 24px; }
.bxp-item-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.bxp-item-main .bxp-card > h2 { margin-bottom: 12px; }
.bxp-prose { color: var(--text-default); }
.bxp-prose h2, .bxp-prose h3, .bxp-prose h4 { color: var(--text-strong); font: 500 18px/24px var(--font-family); margin: 16px 0 8px; }
.bxp-prose p, .bxp-prose ul, .bxp-prose ol { margin: 0 0 12px; }
.bxp-prose img, .bxp-prose iframe, .bxp-prose video { max-width: 100%; border-radius: 12px; }
.bxp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bxp-list li { display: flex; gap: 8px; align-items: flex-start; color: var(--text-default); }
.bxp-list .bxp-icon { font-size: 16px; margin-top: 4px; color: var(--icons-accent-default); }
.bxp-outline { display: flex; flex-direction: column; }
.bxp-outline details { padding: 12px 0; }
.bxp-outline details + details { box-shadow: inset 0 1px 0 var(--stroke-subtle); }
.bxp-outline summary { cursor: pointer; font: 500 16px/24px var(--font-family); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.bxp-outline summary::-webkit-details-marker { display: none; }
.bxp-outline summary .bxp-icon { font-size: 20px; color: var(--icons-default); transition: transform var(--duration-base) var(--ease-out); }
.bxp-outline details[open] summary .bxp-icon { transform: rotate(45deg); }
.bxp-outline ol { margin: 8px 0 0; padding-left: 20px; color: var(--text-default); display: flex; flex-direction: column; gap: 4px; }
.bxp-buy { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.bxp-buy .bl-btn { width: 100%; }
.bxp-buy-price { font: 600 28px/36px var(--font-family); color: var(--text-strong); }
.bxp-buy-price small { display: block; font: 400 14px/20px var(--font-family); color: var(--text-default); }
.bxp-buy-team { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--stroke-subtle); }
.bxp-buy-team > div { display: flex; gap: 12px; align-items: flex-start; }

/* Footer */
.bxp-footer { margin-top: 24px; box-shadow: inset 0 1px 0 var(--stroke-subtle); padding: 32px 0 40px; }
.bxp-footer .bxp-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.bxp-footer nav { display: flex; flex-wrap: wrap; gap: 4px; }
.bxp-footer .p-sm:last-child { margin-left: auto; }

/* Motion: entrances on mount only; honour reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bl-btn, .bl-pill, .bl-segment { transition: none; scale: none !important; }
  .bxp-faq details > p, .bxp-menu-panel { animation: none; }
  .bxp-nav-link { transition: none; }
  .bxp-faq summary .bxp-icon, .bxp-outline summary .bxp-icon { transition: none; }
}

/* Narrower screens */
@media (max-width: 1023px) {
  .bl-cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bxp-item-grid { grid-template-columns: minmax(0, 1fr); }
  .bxp-buy { position: static; }
}
@media (max-width: 767px) {
  .bxp-wrap { padding: 0 16px; }
  .bxp .h2 { font-size: var(--font-size-32); line-height: var(--line-height-40); }
  .bxp-hero { padding: 40px 0; }
  .bxp-hero.has-picture .bxp-wrap, .bxp-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bxp-split.picture-start .bxp-split-picture { order: 0; }
  .bxp-hero-search { flex-direction: column; }
  .bl-cc-grid { grid-template-columns: minmax(0, 1fr); }
  .bxp-header { padding: 8px 12px 0; top: 8px; }
  .bxp-header-bar { gap: 8px; height: 56px; padding: 0 8px 0 14px; }
  .bxp-nav, .bxp-header-actions .bxp-sign-in { display: none; }
  .bxp-menu { display: block; }
  .bxp-section { padding: 40px 0; }
  .bxp-teams { flex-direction: column; align-items: flex-start; }
  .bxp-section-head { flex-direction: column; align-items: flex-start; }
  .bxp-footer .p-sm:last-child { margin-left: 0; }
}