/* ═══════════════════════════════════════════════════════════════════════
   OUR BOARDS — "hardware lab" layer for /boards and /board/{slug}
   ───────────────────────────────────────────────────────────────────────
   Loaded AFTER base1.css (and boards.css on the detail page). Everything is
   scoped under .bl so kit, project and catalogue pages cannot pick it up —
   the boards line is deliberately its own thing, not a product category.

   Colour: the site's own tokens (--primary green, --bg/--fg) plus one blue
   and two supporting accents for the explanatory cards. Accents mark
   meaning (a status, a card's topic); resting boxes stay neutral.
   ═══════════════════════════════════════════════════════════════════════ */

.bl {
  --bl-green:  var(--primary);
  --bl-blue:   #2f7df6;
  --bl-amber:  #d9951c;
  --bl-violet: #8a5cf0;
  --bl-grey:   #7b8f99;
  --bl-radius: 10px;
  --bl-sans: 'DM Sans', system-ui, sans-serif;
  --bl-mono: 'JetBrains Mono', ui-monospace, monospace;
}
[data-theme="light"] .bl { --bl-blue: #1f66d9; --bl-amber: #b7760c; --bl-violet: #6f43d6; }

.bl .bl-ic { width: 22px; height: 22px; display: block; flex: none; }

/* ── Shared type ─────────────────────────────────────────────────────── */
.bl-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--bl-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 14px;
}
.bl-kicker::before { content: ''; width: 18px; height: 2px; background: currentColor; }
.bl-h2 {
  font-family: var(--bl-sans); font-weight: 700; letter-spacing: -.025em; line-height: 1.08;
  font-size: clamp(28px, 3.8vw, 44px); color: var(--fg); margin: 0 0 14px;
}
.bl-lead { font-family: var(--bl-sans); font-size: 17px; line-height: 1.7; color: var(--fg2); max-width: 64ch; margin: 0; }
.bl-head { margin-bottom: 38px; }
.bl-head--center { text-align: center; }
.bl-head--center .bl-lead { margin: 0 auto; }
.bl-sec { padding: 88px 0; border-top: 1px solid var(--border); position: relative; }
.bl-sec--tint { background: color-mix(in srgb, var(--primary) 4%, var(--bg)); }

/* ── Buttons (extends .b1-btn, rounder and in sans) ─────────────────── */
.bl .b1-btn {
  font-family: var(--bl-sans); font-weight: 600; font-size: 15px; border-radius: 8px;
  padding: 13px 20px; display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.bl .b1-btn--sm { font-size: 14px; padding: 10px 15px; }
.bl .b1-btn .bl-ic { width: 18px; height: 18px; }
.bl-btn--blue { background: var(--bl-blue) !important; border-color: var(--bl-blue) !important; color: #fff !important; }

/* ── Status chips ────────────────────────────────────────────────────── */
.bl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-chip {
  --c: var(--bl-grey);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--bl-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  color: color-mix(in srgb, var(--c) 78%, var(--fg));
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
}
.bl-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.bl-chip--in-stock, .bl-chip--available { --c: var(--bl-green); }
.bl-chip--register, .bl-chip--preorder  { --c: var(--bl-blue); }
.bl-chip--coming-soon                   { --c: var(--bl-amber); }
.bl-chip--prototype                     { --c: var(--bl-violet); }
.bl-chip--archived                      { --c: var(--bl-grey); }
.bl-chip--in-stock::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bl-green) 25%, transparent); }
.bl-rev {
  font-family: var(--bl-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  padding: 5px 9px; border-radius: 6px; color: var(--fg); background: var(--bg3); border: 1px solid var(--border);
}

/* ═══ INDEX ═════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.bl-hero { position: relative; padding: 56px 0 72px; overflow: hidden; }
.bl-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 60% at 85% 20%, color-mix(in srgb, var(--bl-blue) 14%, transparent), transparent 70%),
    radial-gradient(45% 55% at 10% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    linear-gradient(to right, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.bl-hero > * { position: relative; }
.bl-hero__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.bl-hero__grid > * { min-width: 0; }
.bl-hero__title {
  font-family: var(--bl-sans); font-weight: 800; letter-spacing: -.04em; line-height: .98;
  font-size: clamp(40px, 6.2vw, 76px); color: var(--fg); margin: 0 0 22px;
}
.bl-hero__title em { font-style: normal; color: var(--primary); }
.bl-hero__lead { font-family: var(--bl-sans); font-size: 19px; line-height: 1.6; color: var(--fg); margin: 0 0 10px; max-width: 34ch; }
.bl-hero__lead2 { font-family: var(--bl-sans); font-size: 16px; line-height: 1.7; color: var(--fg2); margin: 0; max-width: 44ch; }
.bl-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.bl-hero__rail {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; padding-top: 22px;
  border-top: 1px dashed var(--border); font-family: var(--bl-mono); font-size: 12px; color: var(--fg2);
}
.bl-hero__rail b { color: var(--primary); font-weight: 700; margin-right: 4px; }

/* The plate: board renders on a lab mat, with crop marks and labels. */
.bl-plate {
  position: relative; border-radius: 16px; padding: 22px;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--primary) 10%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(to bottom, color-mix(in srgb, var(--primary) 10%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(160deg, color-mix(in srgb, var(--primary) 16%, #0b1a14), #0a1216 70%);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
  aspect-ratio: 5 / 4;
}
.bl-plate__mark { position: absolute; width: 16px; height: 16px; border-color: color-mix(in srgb, var(--primary) 70%, transparent); border-style: solid; border-width: 0; }
.bl-plate__mark--tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.bl-plate__mark--tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.bl-plate__mark--bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; }
.bl-plate__mark--br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }
.bl-plate__head {
  position: absolute; top: 18px; left: 34px; right: 34px; display: flex; justify-content: space-between;
  font-family: var(--bl-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #9fdcc4;
}
.bl-plate__stage { position: absolute; inset: 48px 26px 26px; }
.bl-plate__full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bl-plate__piece { position: absolute; margin: 0; }
.bl-plate__piece img {
  display: block; width: 100%; height: auto; border-radius: 8px; background: #fff;
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .55);
}
.bl-plate__piece figcaption {
  position: absolute; left: 10px; bottom: -14px; font-family: var(--bl-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; color: #06140e; background: var(--bl-green); padding: 4px 8px; border-radius: 4px; white-space: nowrap;
}
[data-theme="light"] .bl-plate__piece figcaption { background: #00d98f; }
.bl-plate__piece--0 { left: 0; top: 4%; width: 60%; transform: rotate(-3deg); z-index: 1; }
.bl-plate__piece--1 { right: 0; bottom: 6%; width: 42%; transform: rotate(4deg); z-index: 2; }
.bl-plate__piece--solo { left: 12%; top: 6%; width: 76%; }
.bl-plate__empty {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: var(--bl-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #9fdcc4;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, transparent); border-radius: 10px;
}

/* ── Why cards ── */
.bl-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bl-why__card {
  --c: var(--bl-green);
  position: relative; padding: 26px 22px 24px; border-radius: var(--bl-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 11%, var(--bg2)), var(--bg2) 70%);
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--border));
  overflow: hidden;
}
.bl-why__card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.bl-why__card:nth-child(2) { --c: var(--bl-blue); }
.bl-why__card:nth-child(3) { --c: var(--bl-amber); }
.bl-why__card:nth-child(4) { --c: var(--bl-violet); }
.bl-why__icon {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 18px;
  color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
}
.bl-why__card h3 { font-family: var(--bl-sans); font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--fg); margin: 0 0 8px; line-height: 1.25; }
.bl-why__card p { font-family: var(--bl-sans); font-size: 15px; line-height: 1.65; color: var(--fg2); margin: 0; }

/* ── Board family ── */
.bl-family { display: grid; gap: 28px; }
.bl-board {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch;
  border-radius: 16px; overflow: hidden; background: var(--bg2); border: 1px solid var(--border);
  box-shadow: 0 24px 50px -36px var(--shadow);
}
.bl-board:nth-child(even) .bl-board__media { order: 2; }
.bl-board__media {
  position: relative; min-height: 360px; display: grid; place-items: center; padding: 40px;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg3);
  text-decoration: none;
}
.bl-board__media img {
  max-width: 100%; max-height: 420px; width: auto; height: auto; display: block; border-radius: 8px;
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .35); transition: transform .35s ease;
}
.bl-board__media:hover img { transform: translateY(-4px) scale(1.015); }
.bl-board__media .bl-rev { position: absolute; top: 16px; left: 16px; background: var(--bg2); }
.bl-board__num { position: absolute; bottom: 14px; right: 18px; font-family: var(--bl-mono); font-size: 12px; color: var(--fg3); letter-spacing: .12em; }
.bl-board__body { padding: 40px 42px; display: flex; flex-direction: column; min-width: 0; }
.bl-board__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.bl-board__name { font-family: var(--bl-sans); font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 6px; color: var(--fg); }
.bl-board__name a { color: inherit; text-decoration: none; }
.bl-board__name a:hover { color: var(--primary); }
.bl-board__sub { font-family: var(--bl-sans); font-size: 17px; font-weight: 600; color: var(--primary); margin: 0 0 14px; }
.bl-board__desc { font-family: var(--bl-sans); font-size: 15.5px; line-height: 1.7; color: var(--fg2); margin: 0 0 20px; }
.bl-feat { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.bl-feat li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--bl-sans); font-size: 15px; line-height: 1.5; color: var(--fg); }
.bl-feat li .bl-ic { width: 18px; height: 18px; color: var(--primary); margin-top: 2px; }
.bl-board__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

/* ── Use cases ── */
.bl-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bl-use {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 20px; border-radius: var(--bl-radius); background: var(--bg2); border: 1px solid var(--border);
}
.bl-use__icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.bl-use:nth-child(3n+2) .bl-use__icon { color: var(--bl-blue); background: color-mix(in srgb, var(--bl-blue) 12%, transparent); }
.bl-use h3 { font-family: var(--bl-sans); font-size: 16.5px; font-weight: 700; color: var(--fg); margin: 2px 0 5px; }
.bl-use p { font-family: var(--bl-sans); font-size: 14.5px; line-height: 1.6; color: var(--fg2); margin: 0 0 10px; }
.bl-use__boards { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-use__boards a {
  font-family: var(--bl-mono); font-size: 11px; color: var(--fg); text-decoration: none;
  padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg3);
}
.bl-use__boards a:hover { border-color: var(--primary); color: var(--primary); }

/* ── Status + docs, side by side ── */
.bl-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.bl-panel { padding: 32px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--border); }
.bl-panel .bl-h2 { font-size: clamp(24px, 2.6vw, 30px); }
.bl-panel .bl-lead { font-size: 15.5px; margin-bottom: 22px; }
.bl-legend { display: grid; gap: 10px; }
.bl-legend__row { display: grid; grid-template-columns: 168px 1fr; gap: 14px; align-items: center; }
.bl-legend__row p { font-family: var(--bl-sans); font-size: 14.5px; color: var(--fg2); margin: 0; line-height: 1.5; }
.bl-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bl-doc {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 9px;
  background: var(--bg3); border: 1px solid var(--border);
  font-family: var(--bl-sans); font-size: 14.5px; font-weight: 600; color: var(--fg);
}
.bl-doc .bl-ic { width: 20px; height: 20px; color: var(--bl-blue); }

/* ── Final CTA band ── */
.bl-cta {
  position: relative; overflow: hidden; border-radius: 20px; padding: 56px 48px; text-align: center;
  color: #eafff6;
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(0, 217, 143, .35), transparent 60%),
    radial-gradient(60% 90% at 100% 100%, rgba(47, 125, 246, .35), transparent 60%),
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
    #0b1519;
}
.bl-cta h2 { font-family: var(--bl-sans); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(28px, 4vw, 46px); margin: 0 auto 14px; max-width: 20ch; color: #fff; }
.bl-cta p { font-family: var(--bl-sans); font-size: 17px; line-height: 1.65; color: #b9d6cb; margin: 0 auto 30px; max-width: 56ch; }
.bl-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bl-cta .b1-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.bl-cta .b1-btn--ghost:hover { color: #00d98f; border-color: #00d98f; }
.bl-cta__boards { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-family: var(--bl-mono); font-size: 12px; color: #9fbfb3; align-items: center; }
.bl-cta__boards a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(0, 217, 143, .6); padding-bottom: 1px; }
.bl-cta__boards a:hover { color: #00d98f; }

/* ═══ DETAIL ════════════════════════════════════════════════════════════ */

.bl-dhero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.bl-dhero__name { font-family: var(--bl-sans); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-size: clamp(40px, 6vw, 72px); color: var(--fg); margin: 0 0 12px; }
.bl-dhero__sub { font-family: var(--bl-sans); font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; color: var(--primary); line-height: 1.35; margin: 0 0 16px; }
.bl .bl-dhero .b1-lede { font-family: var(--bl-sans); }
.bl-dhero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bl-dhero__jump { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 20px; font-family: var(--bl-mono); font-size: 12px; }
.bl-dhero__jump a { color: var(--fg2); text-decoration: none; border-bottom: 1px dashed var(--border); }
.bl-dhero__jump a:hover { color: var(--primary); border-color: var(--primary); }

/* Problem */
.bl-problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.bl-problem__quote {
  font-family: var(--bl-sans); font-size: clamp(18px, 1.9vw, 21px); line-height: 1.6; font-weight: 500; color: var(--fg);
  margin: 0; padding-left: 22px; border-left: 3px solid var(--primary);
}
.bl-pains { display: grid; gap: 12px; }
.bl-pain {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 20px; border-radius: var(--bl-radius);
  background: var(--bg2); border: 1px solid var(--border);
}
.bl-pain__n {
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--bl-mono); font-size: 13px; font-weight: 700; color: var(--bl-amber);
  background: color-mix(in srgb, var(--bl-amber) 14%, transparent);
}
.bl-pain h3 { font-family: var(--bl-sans); font-size: 16.5px; font-weight: 700; color: var(--fg); margin: 4px 0 4px; }
.bl-pain p { font-family: var(--bl-sans); font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 0; }

/* Audience */
.bl-aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bl-aud__card { padding: 22px; border-radius: var(--bl-radius); background: var(--bg2); border: 1px solid var(--border); }
.bl-aud__icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.bl-aud__card:nth-child(3n+2) .bl-aud__icon { color: var(--bl-blue); background: color-mix(in srgb, var(--bl-blue) 12%, transparent); }
.bl-aud__card:nth-child(3n) .bl-aud__icon { color: var(--bl-violet); background: color-mix(in srgb, var(--bl-violet) 12%, transparent); }
.bl-aud__card h3 { font-family: var(--bl-sans); font-size: 17px; font-weight: 700; color: var(--fg); margin: 0 0 6px; }
.bl-aud__card p { font-family: var(--bl-sans); font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 0; }

/* Visual guide */
.bl-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border); margin-bottom: 22px; }
.bl-tab {
  font-family: var(--bl-sans); font-size: 14.5px; font-weight: 600; color: var(--fg2); cursor: pointer;
  padding: 9px 20px; border-radius: 7px; border: 0; background: none;
}
.bl-tab[aria-selected="true"] { background: var(--bg2); color: var(--fg); box-shadow: 0 1px 3px var(--shadow); }
.bl-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.bl-side[hidden] { display: none; }
.bl .bl-side .b1-board { margin-top: 0; }
.bl .bl-side .b1-board__figure { border-radius: 12px; border-color: var(--border); }
.bl .bl-side .b1-board__inner img { border-radius: 6px; }
.bl .bl-side .b1-part { border-radius: 9px; }
.bl .bl-side .b1-part__name { font-family: var(--bl-sans); font-size: 15px; font-weight: 700; }
.bl .bl-side .b1-part__why { font-family: var(--bl-sans); font-size: 14px; }
.bl-guide__hint { font-family: var(--bl-mono); font-size: 12px; color: var(--fg3); margin: 14px 0 0; }

/* Key specs, above the full table */
.bl-keyspecs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
/* Rules drawn per tile (clipped by the container) rather than as a 1px gap
   over a coloured background: with 7 specs in a 4-column grid the gap version
   showed the empty eighth slot as a grey block. */
.bl-keyspec { background: var(--bg2); padding: 18px 18px 16px; min-width: 0; box-shadow: 1px 1px 0 var(--border); }
.bl-keyspec span { display: block; font-family: var(--bl-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); margin-bottom: 6px; }
.bl-keyspec b { display: block; font-family: var(--bl-sans); font-size: 15.5px; font-weight: 600; color: var(--fg); line-height: 1.45; overflow-wrap: anywhere; }

/* Safety */
.bl-safety {
  border-radius: 14px; padding: 30px; border: 1px solid color-mix(in srgb, var(--bl-amber) 45%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--bl-amber) 10%, var(--bg2)), var(--bg2));
}
.bl-safety__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.bl-safety__head .bl-ic { width: 34px; height: 34px; color: var(--bl-amber); }
.bl-safety__head h2 { margin: 0; }
.bl-safety__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.bl-safety__list li { padding: 16px 18px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); }
.bl-safety__list li:first-child { border-color: color-mix(in srgb, #e5484d 55%, var(--border)); }
.bl-safety__list b { display: block; font-family: var(--bl-sans); font-size: 16px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.bl-safety__list span { font-family: var(--bl-sans); font-size: 14.5px; line-height: 1.6; color: var(--fg2); }
.bl-safety__printed { margin-top: 18px; }
.bl-safety__printed h3 { font-family: var(--bl-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); margin: 0 0 10px; }

/* Files */
.bl-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bl-file {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 12px;
  background: var(--bg2); border: 1px dashed var(--border); color: var(--fg); text-decoration: none;
}
.bl-file .bl-ic { width: 26px; height: 26px; color: var(--fg3); }
.bl-file b { display: block; font-family: var(--bl-sans); font-size: 15.5px; font-weight: 700; margin-bottom: 3px; }
.bl-file span { display: block; font-family: var(--bl-sans); font-size: 14px; line-height: 1.5; color: var(--fg2); }
.bl-file i { display: inline-block; margin-top: 8px; font-style: normal; font-family: var(--bl-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bl-amber); }
.bl-files__note { font-family: var(--bl-sans); font-size: 14.5px; color: var(--fg2); margin: 14px 0 0; }

/* FAQ — visible, not behind a fold */
.bl .bd-faq { display: grid; gap: 10px; }
.bl .bd-faq__item { border-radius: 10px; }

/* Register interest */
.bl-reg { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start;
  padding: 44px; border-radius: 20px; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: 0 30px 60px -40px var(--shadow);
}
.bl-reg__copy .bl-h2 { font-size: clamp(30px, 3.6vw, 42px); }
.bl-reg__points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.bl-reg__points li { display: flex; gap: 10px; font-family: var(--bl-sans); font-size: 15px; color: var(--fg); line-height: 1.5; }
.bl-reg__points .bl-ic { width: 18px; height: 18px; color: var(--primary); margin-top: 2px; }
.bl .bl-reg .bd-ic { margin-top: 0; }
.bl .bl-reg .bd-ic__form { max-width: none; border-radius: 12px; background: var(--bg); }
.bl .bl-reg .bd-ic__h, .bl .bl-reg .bd-ic__blurb { display: none; }   /* the copy column already says it */
.bl .bd-ic__f select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--fg);
  background: var(--bg2); border: 1px solid var(--border); padding: 11px 12px; border-radius: 6px;
}
.bl .bd-ic__f input, .bl .bd-ic__f textarea { border-radius: 6px; }
.bl .bd-ic__f select:focus { outline: none; border-color: var(--primary); }

.bl-end { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }

/* ═══ Responsive ════════════════════════════════════════════════════════ */
@media (max-width: 1020px) {
  .bl-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-uses, .bl-aud, .bl-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-duo { grid-template-columns: 1fr; }
  .bl-keyspecs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .bl-hero__grid, .bl-problem, .bl-reg { grid-template-columns: 1fr; gap: 32px; }
  .bl-board { grid-template-columns: 1fr; }
  .bl-board:nth-child(even) .bl-board__media { order: 0; }
  .bl-board__media { min-height: 0; padding: 32px 24px; }
  .bl-board__body { padding: 28px 24px; }
  .bl-reg { padding: 26px 20px; }
  .bl-safety__list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bl .b1-wrap { padding: 0 16px; }
  .bl-sec { padding: 60px 0; }
  .bl-why, .bl-uses, .bl-aud, .bl-files, .bl-docs { grid-template-columns: 1fr; }
  .bl-legend__row { grid-template-columns: 1fr; gap: 4px; }
  .bl-cta { padding: 40px 20px; border-radius: 14px; }
  .bl-panel { padding: 22px 18px; }
  .bl-plate { padding: 14px; }
  .bl-plate__stage { inset: 42px 16px 22px; }
  .bl-plate__head { left: 26px; right: 26px; font-size: 9.5px; }
  .bl-keyspecs { grid-template-columns: 1fr; }
  .bl-safety { padding: 20px 16px; }
  .bl-tabs { display: flex; }
  .bl-tab { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-board__media img { transition: none; }
  .bl-board__media:hover img { transform: none; }
}

/* Visual guide — an uploaded photo with the written callout list beside it
   (no marker coordinates, so nothing is pinned to a spot on the image). */
.bl .bl-photo__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.bl .bl-photo__cap { font-family: var(--bl-sans); font-size: 13.5px; color: var(--fg2); margin-top: 10px; line-height: 1.5; }
.bl .bl-photo__list { list-style: none; margin: 0; padding: 0 6px 0 0; }
.bl .bl-photo__list .b1-part { cursor: default; transform: none; }
.bl .bl-photo__list .b1-part:hover { transform: none; }

/* Highlight strip under the detail hero */
.bl-hl { border-top: 1px solid var(--border); background: var(--bg2); padding: 26px 0; }
.bl-hl__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; }
.bl-hl__list li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--bl-sans); font-size: 14.5px; line-height: 1.5; color: var(--fg); }
.bl-hl__list .bl-ic { width: 18px; height: 18px; color: var(--primary); margin-top: 2px; }
@media (max-width: 1020px) { .bl-hl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .bl-hl__list { grid-template-columns: 1fr; } }

/* Accessory link on a board's "You need" list — "Sold separately · AED x →".
   Only drawn when a list item names an active product (board_detail.php). */
.bd-list__buy { grid-column: 2; justify-self: start; margin-top: 6px; font-size: 13px; font-weight: 700;
  color: var(--bl-green, #00a86b); text-decoration: none; }
.bd-list__buy:hover { text-decoration: underline; }
@media (max-width: 700px) { .bd-list__buy { grid-column: 1; } }