/* ─────────────────────────────────────────────────────────────────────────────
   topics.css (HD-4, 2026-11-03): the sections the header's menu rows land on, on
   /clickpad (#assets #warranties #work-orders #capex) and /scope3d (#build
   #finishes #furnish #run). Markup from react-app/scripts/product-topics.mjs.
   The same frame as /handyman's sections (the bb-sec rules in that page): a small
   green eyebrow, an h3-sized heading with a thin muted half, the recording beside
   the words, alternating sides, film first on a phone. Theme tokens only, so both
   themes are one rule. films.js owns the <video>s.
   ───────────────────────────────────────────────────────────────────────────── */
.bo-topics{border-top:1px solid var(--jkd-border)}
.bo-tp{padding:clamp(56px,7vw,104px) 0;border-top:1px solid var(--jkd-border)}
.bo-tp:first-child{border-top:0}
.bo-tp-in{max-width:calc(var(--jkd-container-max) + var(--jkd-container-padding)*2);margin:0 auto;
  padding:0 var(--jkd-container-padding)}
.bo-tp-split{display:grid;gap:clamp(28px,4vw,62px);align-items:center}
@media(min-width:900px){.bo-tp-split{grid-template-columns:1.18fr .82fr}
  .bo-tp-split--rev{grid-template-columns:.82fr 1.18fr}
  .bo-tp-split--rev .bo-tp-media{order:2}}
.bo-tp-eye{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;
  font-size:calc(var(--jkd-font-xs-size) - 1px);font-weight:400;letter-spacing:1.25px;
  text-transform:uppercase;color:var(--jkd-accent)}
.bo-tp-eye::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--jkd-accent)}
/* the brand green is a dark-theme ink; in light, green words take its deep ink (mobile-fix.css (a)) */
:root[data-color-scheme="light"] .bo-tp-eye{color:var(--ct-green-ink,#00703f)}
.bo-tp-h{margin:0;font-size:var(--jkd-font-h3-size);line-height:var(--jkd-font-h3-line);
  letter-spacing:var(--jkd-font-h3-track);color:var(--jkd-heading)}
@media(max-width:767px){.bo-tp-h{font-size:var(--jkd-font-h3-size-mobile)}}
.bo-tp-sub{margin:18px 0 0;max-width:62ch;color:var(--jkd-text)}
.bo-tp-link{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;
  color:var(--jkd-heading);font-weight:500;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(var(--jkd-accent-rgb),.6)}
.bo-tp-link:hover{color:var(--jkd-accent)}
.bo-tp-link span{margin-left:.35em}
.bo-tp-film{position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--jkd-br-lg);overflow:hidden;
  border:1px solid var(--jkd-border);background:#0b0d0c}
:root[data-color-scheme="light"] .bo-tp-film{background:#f4f5f2}
.bo-tp-film>video,.bo-tp-film>img,.bo-tp-film>.bo-film__poster{position:absolute;inset:0;width:100%!important;
  height:100%!important;object-fit:cover;display:block}
.bo-tp-badge{display:block;margin:14px auto 0;width:fit-content;max-width:100%;
  font-size:calc(var(--jkd-font-xs-size) - 2px);letter-spacing:1.1px;text-transform:uppercase;
  padding:4px 12px;border-radius:var(--jkd-br-xl);border:1px solid var(--jkd-border);color:var(--jkd-text)}