/* ─────────────────────────────────────────────────────────────────────────────
   Product page headers in the Oct 18 layout (lane L6 of "Old Layout, New Story",
   2026-11-02): /scope3d/ and /clickpad/, written by
   react-app/scripts/product-headers.mjs.

   The old page-header box stays as it was (inset 15 px, rounded, 500 px on
   desktop, title at its lower left). Its stock 3D-ribbon photo becomes the
   product's opener, played by films.js: bo-hdr-<product>--1920x800 on desktop
   and tablet, --1080x1350 on phones, dark or light with the theme toggle.

   Each opener keeps clean ground where the words sit (the left ~37% of the wide
   cut, the top ~46% of the tall one) and the box's own ground is the film's
   (#121212 dark, #FAFAFA light), so the words never sit on motion. The wide cut
   is pinned to the box's right edge at the box's height; a narrower box crops it
   from the left, which is bare ground.
   ───────────────────────────────────────────────────────────────────────────── */
.bo-ph{--ph-ground:#121212;--ph-ink:#fff;--ph-sub:rgba(255,255,255,.78);--ph-crumb:rgba(255,255,255,.62)}
html[data-color-scheme="light"] .bo-ph{--ph-ground:#FAFAFA;--ph-ink:#1D1E24;--ph-sub:#3A3C44;--ph-crumb:#5E616B}

.page-header.bo-ph .page-header__inner{background:var(--ph-ground)}
.page-header.bo-ph .page-header__inner:after{display:none}

/* the wordmark is the title; the h1 keeps the name as hidden text */
.bo-ph .bo-ph__title{margin:0;line-height:0;font-size:0;color:var(--ph-ink)}
/* !important: the theme resets every img to width:100%;object-fit:cover */
.bo-ph .bo-ph__logo{display:block;width:auto!important;max-width:100%;height:var(--ph-logo-h)!important;object-fit:contain!important}
.bo-ph .bo-ph__logo--light{display:none}
html[data-color-scheme="light"] .bo-ph .bo-ph__logo--dark{display:none}
html[data-color-scheme="light"] .bo-ph .bo-ph__logo--light{display:block}
.bo-ph--scope3d{--ph-logo-h:96px}
.bo-ph--clickpad{--ph-logo-h:64px}
/* .page-header.bo-ph: the theme's .page-header.text-light sets the subtitle white with !important */
.page-header.bo-ph .page-header__subtitle{color:var(--ph-sub)!important;opacity:1}
.bo-ph--clickpad .page-header__subtitle{margin-top:8px}
.bo-ph .jkd-breadcrumbs,.bo-ph .jkd-breadcrumbs a{color:var(--ph-crumb)!important}
.bo-ph .jkd-breadcrumbs span:last-child{color:var(--ph-ink)!important}

/* the opener: right-pinned at the box's height, its left edge fading into the ground */
.bo-ph .page-header__img{background:var(--ph-ground);overflow:hidden}
.bo-ph .bo-ph__film{position:absolute!important;top:0;right:0;bottom:0;left:auto;height:100%;width:auto;aspect-ratio:12/5;margin:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
.bo-ph .bo-ph__film>video,.bo-ph .bo-ph__film>.bo-film__poster{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;display:block}
/* a real recording (data-film-theme="one", "Real footage only" 2026-11-03): ONE render for both themes, footage
   edge to edge with no ground of its own, so the fade into the page's ground is done here, longer than the drawn
   openers needed, and the words never sit on footage */
.bo-ph .bo-ph__film[data-film-theme="one"]{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 6%,#000 38%);mask-image:linear-gradient(90deg,transparent 0,transparent 6%,#000 38%)}
/* a wash of ground behind the words, for widths where the motion comes close to them */
.bo-ph .page-header__img:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--ph-ground) 0,var(--ph-ground) min(30%,420px),transparent min(44%,640px))}

/* tablets: the words on top, the film's moving part whole beneath them, in the same box */
@media (min-width:601px) and (max-width:1024px){
  .page-header.bo-ph{height:auto!important}
  .page-header.bo-ph .page-header__inner{height:auto!important;display:flex;flex-direction:column}
  .page-header.bo-ph .page-header__content{position:relative;padding-top:110px;padding-bottom:6px}
  .bo-ph .page-header__img{position:relative!important;inset:auto;width:100%;aspect-ratio:16/9;height:auto}
  .bo-ph .page-header__img:after{display:none}
  .bo-ph--scope3d{--ph-logo-h:80px}
  .bo-ph--clickpad{--ph-logo-h:54px}
}
/* phones: the 1080x1350 cut sits at the foot of the box, full width; the words sit
   in its clean top, which the box extends by 44 px so the breadcrumbs clear the
   film's step bar (the box is 15 px in from each side) */
@media (max-width:600px){
  .page-header.bo-ph{height:auto!important}
  .page-header.bo-ph .page-header__inner{height:calc((100vw - 30px) * 1.25 + 44px)!important;align-items:flex-start;justify-content:flex-start}
  .page-header.bo-ph .page-header__content{padding-top:96px;padding-bottom:0;justify-content:flex-start}
  .bo-ph .bo-ph__film{top:auto;bottom:0;left:0;width:100%;height:auto;aspect-ratio:4/5;-webkit-mask-image:none;mask-image:none}
  /* the recording's top 40% is under the words: it fades out into the ground there */
  .bo-ph .bo-ph__film[data-film-theme="one"]{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 36%,#000 54%);mask-image:linear-gradient(180deg,transparent 0,transparent 36%,#000 54%)}
  .bo-ph .page-header__img:after{display:none}
  .bo-ph--scope3d{--ph-logo-h:54px}
  .bo-ph--clickpad{--ph-logo-h:38px}
  .bo-ph .page-header__subtitle{font-size:16px}
  .bo-ph .jkd-breadcrumbs{margin-top:2px;font-size:14px}
}

/* Click is Clickpad's agent: the pill under /clickpad/'s intro */
.bo-meet-click{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:6px 16px 6px 6px;
  border:1px solid var(--jkd-border);border-radius:999px;background:var(--jkd-bg-secondary);
  font-size:15px;line-height:1.2;color:var(--jkd-heading);text-decoration:none;transition:border-color .18s}
.bo-meet-click img{width:28px!important;height:28px!important;max-width:none!important;border-radius:50%;display:block;flex:0 0 auto}
.bo-meet-click span{white-space:nowrap}
.bo-meet-click strong{font-weight:600}
.bo-meet-click svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.bo-meet-click:hover{border-color:#00ff85}
.bo-meet-click:hover svg{transform:translateX(3px)}
:root[data-color-scheme="light"] .bo-meet-click:hover{border-color:#00994f}

/* BuiltOS unification (lane S): /studio and /ops carry the BuiltOS Studio and BuiltOS Ops wordmarks, which are
   wide and short (6:1 and 5:1), so they stand lower than the Scope3D and Clickpad marks did. */
.bo-ph--scope3d,.bo-ph--clickpad{--ph-logo-h:58px}
@media (max-width:1024px){.bo-ph--scope3d,.bo-ph--clickpad{--ph-logo-h:48px}}
@media (max-width:767px){.bo-ph--scope3d,.bo-ph--clickpad{--ph-logo-h:34px}}