/* 8bitocean.com · the SafeBay film: the player kit, the home hero's film button (scrubber edge) and the SafeBay page's
   film section. Loaded only by pages with `film: yes` (build.py), after site.css (it uses the site's tokens). */
/* 8bitOcean website · the film player kit (Bridge Night). Load after site.css: it uses the site's tokens
   (--bg, --panel, --fg, --t2…--t4, --am, --ink, --ln, --ln2, --al…--al3, --bf/--hf/--mf, --ease, --ease-io, --hdr).
   Structure: .bo-film (keeps the 16:9 place in the page) > .bo-film-frame (the player; fixed in the corner when docked)
   > video, poster, captions, controls. States sit on .bo-film: is-idle · is-started · is-live · is-playing · is-paused ·
   is-ended · is-error · is-loading · is-ui (controls shown) · is-cc · is-muted · is-menu · is-docked · is-parked · is-fs ·
   is-tip (the scrubber's tip is up). Options: .bo-film--corner (the poster button bottom left), .bo-film--title-top (the
   poster has a title at the top: a small player's button keeps clear of it). --bo-film-dock-w / -m: the mini player's size.
   Also here: the teaser (.bo-film--teaser), the chapter rail (.bo-rail), the theatre (dialog.bo-theatre) and the page
   button (.bo-film-play). The site's reduced-motion rule (site.css) stops every transition and animation. v1.2.0 */

/* the mini player's size, for pages that keep content clear of it (film.js reads the real size from layout) */
:root{--bo-film-dock-w:clamp(240px,23vw,340px);--bo-film-dock-m:16px}
@media (max-width:759px){:root{--bo-film-dock-w:min(54vw,224px);--bo-film-dock-m:12px}}

/* ---------- root and frame ---------- */
.bo-film{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:10px;background:#08090B;color:var(--fg);-webkit-tap-highlight-color:transparent}
.bo-film>.bo-film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit} /* a poster in the markup, before the script */
/* the no-script fallback: above a markup poster (z 1), so its own controls take the clicks; it shows its own poster */
.bo-film>noscript video{position:absolute;inset:0;z-index:2;width:100%;height:100%;border-radius:inherit;background:#08090B}
.bo-film [hidden],.bo-theatre [hidden]{display:none!important}
.bo-film-frame{position:relative;width:100%;height:100%;overflow:hidden;border-radius:10px;background:#08090B;border:1px solid rgba(255,181,71,.22);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9);container:bofilm/size;isolation:isolate}
.bo-film-frame:focus{outline:none}
/* the frame's keyboard ring is drawn inside it, above the picture and the controls: a wrapper that clips the player, or a
   full-bleed player at the window's edge, cannot cut it away */
.bo-film-frame:focus-visible::after{content:'';position:absolute;inset:0;z-index:11;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--am);pointer-events:none}
.bo-film-video,.bo-film-poster,.bo-film-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.bo-film-video{z-index:0;object-fit:contain;background:#08090B}
.bo-film-poster{z-index:1;transition:opacity .8s var(--ease),transform 1.6s var(--ease),visibility 0s}
.bo-film.is-live .bo-film-poster{opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility 0s .8s}
@media (hover:hover){.bo-film.is-idle .bo-film-frame:hover .bo-film-poster{transform:scale(1.03)}}

/* shade: a vignette under the play button, a floor under the controls */
.bo-film-shade{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(0deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.42) 16%,rgba(8,9,11,0) 36%)}
.bo-film.is-idle .bo-film-shade{opacity:1;background:radial-gradient(90% 85% at 50% 48%,rgba(8,9,11,0) 35%,rgba(8,9,11,.6) 100%),linear-gradient(0deg,rgba(8,9,11,.55),rgba(8,9,11,0) 40%)}
.bo-film.is-ui .bo-film-shade,.bo-film.is-paused .bo-film-shade{opacity:1}
.bo-film.is-ended .bo-film-shade{opacity:1;background:radial-gradient(90% 85% at 50% 48%,rgba(8,9,11,.2) 35%,rgba(8,9,11,.65) 100%)}
.bo-film-hit{position:absolute;inset:0;z-index:3}
.bo-film.is-playing:not(.is-ui) .bo-film-hit{cursor:none}

/* ---------- the play button on the poster ---------- */
.bo-film-big{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4cqi,22px);
  width:100%;color:var(--fg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility 0s .4s}
/* inherit, not visible: a player waiting inside a hidden wrapper keeps its play button hidden too (out of reach, out of the tab order) */
.bo-film.is-idle .bo-film-big,.bo-film.is-ended .bo-film-big{opacity:1;visibility:inherit;pointer-events:auto;transition:opacity .4s var(--ease)}
.bo-film.is-paused .bo-film-big{opacity:1;visibility:inherit;transition:opacity .4s var(--ease)} /* visual only: clicks go to the surface */
.bo-film-big:focus-visible{outline:none}
.bo-film-ring{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:clamp(60px,8.2cqi,92px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(255,181,71,.72);background:rgba(10,12,14,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--am);
  box-shadow:0 0 44px rgba(255,181,71,.16);transition:background-color .45s var(--ease),color .45s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
.bo-film-ring::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(255,181,71,.2);transition:inset .6s var(--ease),border-color .6s}
.bo-film-ring svg{width:36%;height:36%}
/* no extra shift: the play path is drawn with its centroid on the icon's centre, which is the optical centre
   (a margin here pushed it 3-4 px right of the ring's centre) */
.bo-film-big .i-replay,.bo-film.is-ended .bo-film-big .i-play{display:none}
.bo-film.is-ended .bo-film-big .i-replay{display:block}
.bo-film-big:focus-visible .bo-film-ring{background:var(--am);color:var(--ink);transform:scale(1.04);box-shadow:0 0 0 8px rgba(255,181,71,.12),0 0 64px rgba(255,181,71,.34)}
.bo-film-big:focus-visible .bo-film-ring::after{inset:-17px;border-color:rgba(255,181,71,.32)}
.bo-film-big:focus-visible .bo-film-ring{outline:2px solid var(--am);outline-offset:22px}
/* the label: the site's button type (IBM Plex Sans 15/500), the length in muted mono after a hairline, 4 px corners: the
   same face as the home hero's film button */
.bo-film-lbl{display:flex;align-items:center;gap:12px;height:44px;padding:0 16px 0 18px;border-radius:4px;border:1px solid rgba(238,232,221,.16);
  background:rgba(10,12,14,.64);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 15px/1 var(--bf);letter-spacing:.01em;
  color:var(--fg);white-space:nowrap;transition:border-color .45s var(--ease),background-color .45s var(--ease),color .45s var(--ease)}
.bo-film-big:focus-visible .bo-film-lbl{border-color:var(--al3);color:var(--am);background:rgba(10,12,14,.74)}
.bo-film-big:focus-visible .bo-film-dur{color:var(--am)}
@media (hover:hover){
  .bo-film-big:hover .bo-film-ring{background:var(--am);color:var(--ink);transform:scale(1.04);box-shadow:0 0 0 8px rgba(255,181,71,.12),0 0 64px rgba(255,181,71,.34)}
  .bo-film-big:hover .bo-film-ring::after{inset:-17px;border-color:rgba(255,181,71,.32)}
  .bo-film-big:hover .bo-film-lbl{border-color:var(--al3);color:var(--am);background:rgba(10,12,14,.74)}
  .bo-film-big:hover .bo-film-dur{color:var(--am)}
}
.bo-film-dur{display:inline-flex;align-items:center;font:400 14px/1 var(--mf);color:var(--t3);font-variant-numeric:tabular-nums;transition:color .45s var(--ease)}
.bo-film-dur::before{content:'';width:1px;height:16px;margin-right:12px;background:rgba(238,232,221,.18)} /* the hairline before the length */
/* the kit's own page button (.bo-film-play, unused on the site): a quiet dot before its length */
.bo-film-play-l b::before{content:'·';margin:0 .4em;color:var(--t3)}
.bo-film-dur:empty{display:none}
.bo-film.is-paused .bo-film-lbl{display:none}
.bo-film.is-paused .bo-film-ring{width:clamp(52px,6.2cqi,72px);background:rgba(10,12,14,.72)} /* reads on bright frames */
.bo-film.is-ended .bo-film-dur{display:none}
/* corner variant: the play button and its label sit bottom left, like the film's own section labels */
.bo-film--corner.is-idle .bo-film-big,.bo-film--corner.is-ended .bo-film-big{flex-direction:row;justify-content:flex-start;align-items:flex-end;padding:clamp(16px,4.6cqi,48px)}
.bo-film--corner .bo-film-ring{width:clamp(54px,6.6cqi,76px)}

/* ---------- spinner, bezel, on-screen messages, error ---------- */
.bo-film-spin{position:absolute;left:50%;top:50%;z-index:6;display:flex;flex-direction:column;align-items:center;gap:14px;transform:translate(-50%,-50%);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
.bo-film-spin i{position:relative;display:block;width:60px;height:60px;border-radius:50%;background:rgba(10,12,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* reads on any frame */
.bo-film-spin i::before{content:'';position:absolute;inset:10px;border-radius:50%;border:1.5px solid rgba(255,181,71,.2);border-top-color:var(--am)}
.bo-film-spin b{display:none;padding:7px 12px;border-radius:999px;background:rgba(10,12,14,.62);font:500 10.5px/1 var(--mf);letter-spacing:.22em;text-transform:uppercase;color:var(--fg)}
.bo-film.is-loading .bo-film-spin{opacity:1;visibility:inherit;transition:opacity .3s}
.bo-film.is-loading .bo-film-spin i::before{animation:bo-spin .9s linear infinite}
@keyframes bo-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bo-film-spin b{display:block}} /* the arc stands still, so the word says it */
.bo-film-bezel{position:absolute;left:50%;top:50%;z-index:5;display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;background:rgba(10,12,14,.58);color:var(--fg);opacity:0;pointer-events:none}
.bo-film-bezel svg{width:24px;height:24px}
.bo-film-osd{position:absolute;left:50%;top:clamp(10px,3.2cqi,28px);z-index:9;margin:0;padding:9px 14px;border-radius:999px;background:rgba(10,12,14,.86);
  border:1px solid var(--ln2);font:500 11px/1 var(--mf);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);white-space:nowrap;
  pointer-events:none;opacity:0;transform:translate(-50%,-6px);transition:opacity .25s,transform .35s var(--ease)}
.bo-film.is-osd .bo-film-osd{opacity:1;transform:translate(-50%,0)}
.bo-film-err{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;
  text-align:center;background:rgba(8,9,11,.88)}
.bo-film-err p{margin:0;font:400 15px/1.5 var(--bf);color:var(--t2)}
.bo-film-retry{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:4px;border:1px solid var(--ln2);font:500 14px/1 var(--bf);color:var(--fg);
  transition:border-color .3s,color .3s,background-color .3s}
@media (hover:hover){.bo-film-retry:hover{border-color:var(--al3);color:var(--am);background:rgba(255,181,71,.05)}}

/* ---------- captions: the site's type on a quiet dark band, two lines at most, above the controls ---------- */
/* z 8: above the controls' dark floor (the bar is z 7), so both lines keep their contrast while the controls show; they
   step aside while the scrubber's tip is up (is-tip), and the chapters menu (z 8, later in the frame) covers them */
.bo-film-cc{position:absolute;left:4%;right:4%;bottom:5%;z-index:8;display:flex;justify-content:center;text-align:center;pointer-events:none;
  transition:transform .45s var(--ease),opacity .2s}
.bo-film.is-tip .bo-film-cc{opacity:0}
.bo-film:not(.is-cc) .bo-film-cc,.bo-film:not(.is-started) .bo-film-cc{display:none}
.bo-film-cc p{margin:0;font:400 clamp(13px,2.1cqi,30px)/1.5 var(--bf);letter-spacing:.005em;color:var(--fg);text-wrap:balance}
.bo-film-cc span{padding:.12em .5em .16em;border-radius:3px;background:rgba(10,12,14,.8);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bo-film.is-ui .bo-film-cc,.bo-film.is-paused .bo-film-cc,.bo-film.is-ended .bo-film-cc{transform:translateY(calc(5cqh - var(--barh,80px) - 6px))}

/* ---------- control bar ---------- */
.bo-film-bar{position:absolute;left:0;right:0;bottom:0;z-index:7;padding:0 clamp(8px,1.8cqi,20px) clamp(4px,1cqi,12px);opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .5s var(--ease)}
.bo-film:not(.is-started) .bo-film-bar,.bo-film.is-docked .bo-film-bar,.bo-film.is-error .bo-film-bar{display:none}
.bo-film.is-ui .bo-film-bar,.bo-film.is-paused .bo-film-bar,.bo-film.is-ended .bo-film-bar{opacity:1;transform:none;pointer-events:auto}
/* a floor under the controls that comes and goes with them: the time, labels and scrubber read on the film's bright day-mode frames too */
.bo-film-bar::before{content:'';position:absolute;left:0;right:0;bottom:0;z-index:-1;height:calc(100% + 64px);pointer-events:none;
  background:linear-gradient(0deg,rgba(8,9,11,.94) 0,rgba(8,9,11,.86) calc(100% - 64px),rgba(8,9,11,.3) calc(100% - 28px),rgba(8,9,11,0))}

/* scrubber: one segment per chapter, the film's own labels as dots above it */
.bo-film-seek{position:relative;display:flex;align-items:center;height:20px;margin:0 6px;cursor:pointer;touch-action:none;border-radius:3px}
.bo-film-seek::before{content:'';position:absolute;left:-6px;right:-6px;top:-16px;bottom:-8px} /* 44 px to point at, more than the line itself */
.bo-film-track{position:relative;display:flex;gap:3px;width:100%;height:4px;transition:height .25s var(--ease)}
.bo-film-seek:hover .bo-film-track,.bo-film-seek.is-drag .bo-film-track,.bo-film-seek:focus-visible .bo-film-track{height:6px}
.bo-film-seg{position:relative;flex:1 1 0;min-width:2px;height:100%;border-radius:2px;overflow:hidden;background:rgba(238,232,221,.22);transition:transform .25s var(--ease)}
.bo-film-seg.is-hover{transform:scaleY(1.5)}
.bo-film-buf,.bo-film-fill{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center}
.bo-film-buf{background:rgba(238,232,221,.3)}
.bo-film-fill{background:var(--am)}
.bo-film-marks{position:absolute;left:0;right:0;top:50%;pointer-events:none}
.bo-film-marks i{position:absolute;top:-9px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:rgba(238,232,221,.5);transition:background-color .3s}
.bo-film-marks i.is-past{background:var(--am)}
.bo-film-knobw{position:absolute;left:0;top:50%;width:0;height:0;pointer-events:none}
.bo-film-knob{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--am);box-shadow:0 0 0 4px rgba(255,181,71,.2),0 0 16px rgba(255,181,71,.55);
  transform:scale(0);transition:transform .25s var(--ease)}
.bo-film-seek:hover .bo-film-knob,.bo-film-seek.is-drag .bo-film-knob,.bo-film-seek:focus-visible .bo-film-knob{transform:scale(1)}
.bo-film-tip{position:absolute;left:0;bottom:calc(100% + 12px);display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 12px 8px;border-radius:6px;
  background:rgba(10,12,14,.94);border:1px solid rgba(255,181,71,.25);box-shadow:0 14px 30px -10px rgba(0,0,0,.8);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s}
.bo-film-seek.is-tip .bo-film-tip{opacity:1}
.bo-film-tipc{font:500 10.5px/1.2 var(--mf);letter-spacing:.18em;text-transform:uppercase;color:var(--am)}
.bo-film-tipm{font:400 12.5px/1.2 var(--bf);color:var(--t2)}
.bo-film-tipc:empty,.bo-film-tipm:empty{display:none}
.bo-film-tipt{font:500 13px/1 var(--mf);letter-spacing:.04em;color:var(--fg);font-variant-numeric:tabular-nums}
@media (pointer:coarse){
  .bo-film-seek{height:44px;margin:-8px 6px} /* 44 px to touch; the negative margins keep the bar's layout as it was (28 px) */
  .bo-film-seek::before{top:0;bottom:0}
  .bo-film-knob{transform:scale(.8)}
}

/* buttons */
.bo-film-row{display:flex;align-items:center;gap:2px;margin-top:2px}
.bo-film-btn{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:44px;height:44px;padding:0 10px;border-radius:6px;
  color:var(--fg);transition:color .25s,background-color .25s}
.bo-film-btn svg{flex:none;width:22px;height:22px}
@media (hover:hover){.bo-film-btn:hover{color:var(--am);background:rgba(238,232,221,.06)}}
.bo-film-btn:focus-visible,.bo-film-dbtn:focus-visible,.bo-film-mi:focus-visible{outline-offset:-2px}
.bo-film-pp .i-pause,.bo-film-dpp .i-pause,.bo-film.is-playing .bo-film-pp .i-play,.bo-film.is-playing .bo-film-dpp .i-play{display:none}
.bo-film.is-playing .bo-film-pp .i-pause,.bo-film.is-playing .bo-film-dpp .i-pause{display:block}
.bo-film-mute .i-mute,.bo-film.is-muted .bo-film-mute .i-vol{display:none}
.bo-film.is-muted .bo-film-mute .i-mute{display:block}
.bo-film-fsb .i-fsx,.bo-film.is-fs .bo-film-fsb .i-fs{display:none}
.bo-film.is-fs .bo-film-fsb .i-fsx{display:block}
.bo-film-vol{display:flex;align-items:center}
.bo-film-volr{width:0;height:44px;margin:0;padding:0;opacity:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:width .35s var(--ease),opacity .25s,margin .35s var(--ease)}
.bo-film-volr:focus-visible{outline-offset:-8px}
.bo-film-volr::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--am) calc(var(--v,1) * 100%),rgba(238,232,221,.26) 0)}
.bo-film-volr::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border:0;border-radius:50%;background:var(--am)}
.bo-film-volr::-moz-range-track{height:3px;border-radius:2px;background:rgba(238,232,221,.26)}
.bo-film-volr::-moz-range-progress{height:3px;border-radius:2px;background:var(--am)}
.bo-film-volr::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--am)}
@media (hover:hover) and (pointer:fine){
  .bo-film-vol:hover .bo-film-volr,.bo-film-volr:focus-visible{width:76px;opacity:1;margin:0 10px 0 2px}
}
@media (hover:none),(pointer:coarse){.bo-film-volr{display:none}} /* touch: the device's own volume; mute stays */
.bo-film-time{margin:0;padding:0 8px;font:400 12.5px/1 var(--mf);letter-spacing:.05em;color:var(--fg);white-space:nowrap;font-variant-numeric:tabular-nums}
.bo-film-tot{color:var(--t2)}
.bo-film-gap{flex:1;min-width:4px}
/* 24em: the longest chapter, "04 · Spare parts and purchasing", with its tracking (ch would ignore the letter-spacing) */
.bo-film-chapl{max-width:24em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px/1 var(--mf);letter-spacing:.16em;text-transform:uppercase;color:var(--t2);transition:color .25s}
.bo-film-chap[aria-expanded=true] .bo-film-chapl{color:var(--am)}
@media (hover:hover){.bo-film-chap:hover .bo-film-chapl{color:var(--am)}}
.bo-film-chap[aria-expanded=true]{color:var(--am);background:rgba(255,181,71,.08)}
.bo-film-chapl:empty{display:none}
.bo-film-cci{display:block;padding:4px 5px 3px;border:1.5px solid currentColor;border-radius:3px;font:600 10px/1 var(--mf);letter-spacing:.06em}
.bo-film-ccb[aria-pressed=true]{color:var(--am)}
.bo-film-ccb[aria-pressed=true]::before{content:'';position:absolute;left:13px;right:13px;bottom:6px;height:2px;border-radius:1px;background:var(--am)}

/* tooltips: what a button does and its key (pointer devices only) */
@media (hover:hover) and (pointer:fine){
  .bo-film-btn[data-tip]::after,.bo-film-dbtn[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;padding:7px 10px;border-radius:5px;
    background:rgba(10,12,14,.94);border:1px solid var(--ln2);font:400 12px/1 var(--bf);letter-spacing:.01em;color:var(--fg);white-space:nowrap;pointer-events:none;
    opacity:0;transform:translate(-50%,4px);transition:opacity .2s,transform .25s var(--ease)}
  .bo-film-btn[data-tip]:hover::after{opacity:1;transform:translate(-50%,0)}
  .bo-film-pp[data-tip]::after{left:0;transform:translate(0,4px)}
  .bo-film-pp[data-tip]:hover::after{transform:none}
  .bo-film-fsb[data-tip]::after{left:auto;right:0;transform:translate(0,4px)}
  .bo-film-fsb[data-tip]:hover::after{transform:none}
  .bo-film.is-menu .bo-film-btn::after{display:none}
}

/* ---------- chapters menu ---------- */
.bo-film-menu{position:absolute;right:clamp(8px,1.8cqi,20px);bottom:calc(var(--barh,80px) + 4px);z-index:8;width:min(340px,calc(100% - 16px));
  max-height:calc(100cqh - var(--barh,80px) - 20px);overflow-y:auto;overscroll-behavior:contain;scroll-padding-top:40px;padding:6px;border-radius:10px;
  background:rgba(14,17,20,.985);border:1px solid rgba(255,181,71,.24);box-shadow:0 30px 60px -20px rgba(0,0,0,.85);scrollbar-width:thin} /* bright frames and captions must not ghost through */
.bo-film-mh{position:sticky;top:-6px;z-index:1;margin:-6px -6px 0;padding:16px 18px 10px;background:linear-gradient(180deg,rgba(14,17,20,1) 70%,rgba(14,17,20,0));
  font:500 10.5px/1 var(--mf);letter-spacing:.22em;text-transform:uppercase;color:var(--am)}
.bo-film-mi{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border-radius:6px;text-align:left;
  color:var(--t2);transition:background-color .2s,color .2s}
.bo-film-mi .n{font:500 11px/1 var(--mf);letter-spacing:.12em;color:var(--t4);transition:color .2s}
.bo-film-mi .t{font:400 14.5px/1.3 var(--bf)}
.bo-film-mi .tm{font:400 11.5px/1 var(--mf);color:var(--t3);font-variant-numeric:tabular-nums}
.bo-film-mi:focus-visible{background:rgba(238,232,221,.06);color:var(--fg)}
@media (hover:hover){.bo-film-mi:hover{background:rgba(238,232,221,.06);color:var(--fg)}}
.bo-film-mi[aria-checked=true]{background:linear-gradient(90deg,rgba(255,181,71,.12),rgba(255,181,71,0));color:var(--fg)}
.bo-film-mi[aria-checked=true] .n{color:var(--am)}

/* ---------- small players (container queries on the frame: inline on phones, the dock) ---------- */
@container bofilm (max-width:680px){
  .bo-film-chapl{display:none}
  .bo-film-chap{padding:0}
}
@container bofilm (max-width:520px){
  .bo-film-volr{display:none}
  .bo-film-time{padding:0 4px;font-size:11.5px}
  .bo-film-row{gap:0}
  .bo-film-menu{left:0;right:0;top:0;bottom:var(--barh,80px);width:auto;max-height:none;border-radius:0;border-width:0 0 1px;scroll-padding-top:30px}
  .bo-film-mh{padding:12px 14px 7px} /* a phone-sized player: one more chapter in view */
  .bo-film-big{gap:12px}
  /* a poster with its title at the top (the end card's name): opt in with .bo-film--title-top (the theatre does by default) */
  .bo-film--title-top.is-idle .bo-film-big{padding-top:22%}
  .bo-film-ring{width:50px;border-width:1.25px}
  .bo-film-ring::after{inset:-6px}
  .bo-film-big:hover .bo-film-ring::after,.bo-film-big:focus-visible .bo-film-ring::after{inset:-11px}
  .bo-film-big:focus-visible .bo-film-ring{outline-offset:14px}
  .bo-film-lbl{height:38px;gap:10px;padding:0 12px 0 14px;font-size:13.5px}
  .bo-film-dur{font-size:12.5px}
  .bo-film-dur::before{height:13px;margin-right:10px}
}
@container bofilm (max-width:380px){
  .bo-film-tot{display:none}
  .bo-film-osd{font-size:10px;padding:7px 11px}
}
@container bofilm (max-width:299px){
  .bo-film-cc p{font-size:11px}
  .bo-film.is-docked .bo-film-cc{display:none} /* a phone-sized dock has no room for two lines; "back to the film" brings them */
}

/* ---------- dock: the player floats bottom right while the film plays and its place is out of view ---------- */
.bo-film-ph{display:none;position:absolute;inset:0;border-radius:10px;overflow:hidden;border:1px solid var(--ln);background:#08090B}
.bo-film.is-docked .bo-film-ph{display:block}
.bo-film-ph img{width:100%;height:100%;object-fit:cover;opacity:.26;filter:saturate(.7)}
.bo-film-ph span{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:500 11.5px/1.4 var(--mf);letter-spacing:.22em;text-transform:uppercase;color:var(--t2)}
.bo-film.is-docked .bo-film-frame{position:fixed;right:max(var(--bo-film-dock-m),env(safe-area-inset-right));bottom:max(var(--bo-film-dock-m),env(safe-area-inset-bottom));z-index:80;
  width:var(--bo-film-dock-w);height:auto;aspect-ratio:16/9;border-color:rgba(255,181,71,.4);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.5);transition:transform .55s var(--ease),opacity .35s var(--ease),visibility 0s}
/* stepped aside: out of sight and out of the tab order once it has faded */
.bo-film.is-docked.is-parked .bo-film-frame{opacity:0;visibility:hidden;pointer-events:none;transition:transform .55s var(--ease),opacity .35s var(--ease),visibility 0s .35s}
.bo-film.is-docked .bo-film-big{display:none}
.bo-film.is-docked .bo-film-cc{bottom:9%}
.bo-film.is-docked .bo-film-cc p{font-size:12px}
.bo-film-dock{display:none}
.bo-film.is-docked .bo-film-dock{display:block;position:absolute;inset:0;z-index:9;pointer-events:none}
.bo-film-dbtn{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--fg);
  background:rgba(10,12,14,.64);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s,background-color .25s,color .25s}
.bo-film-dbtn svg{width:20px;height:20px}
@media (hover:hover){.bo-film-dbtn:hover{background:var(--am);color:var(--ink)}}
.bo-film.is-docked.is-ui .bo-film-dbtn,.bo-film.is-docked.is-paused .bo-film-dbtn,.bo-film-dbtn:focus-visible{opacity:1;pointer-events:auto}
.bo-film-dback{left:5px;top:5px}
.bo-film-dx{right:5px;top:5px}
.bo-film-dpp{left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px}
.bo-film-dpp svg{width:22px;height:22px}
.bo-film-dbtn[data-tip]::after{top:calc(100% + 6px);bottom:auto}
.bo-film-dback[data-tip]::after{left:0;transform:none}
.bo-film-dx[data-tip]::after{left:auto;right:0;transform:none}
.bo-film-dbtn[data-tip]:hover::after{opacity:1}
.bo-film-dprog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(238,232,221,.16);pointer-events:none}
.bo-film-dprog i{position:absolute;inset:0;background:var(--am);transform:scaleX(0);transform-origin:left center}
@media (max-width:759px){.bo-film.is-docked .bo-film-frame{border-radius:8px}} /* size and margin: --bo-film-dock-w and -m above */

/* ---------- full screen ---------- */
.bo-film:fullscreen{background:#08090B;border-radius:0}
.bo-film.is-fs .bo-film-frame{border:0;border-radius:0;box-shadow:none;background:#08090B}

/* ---------- teaser: silent loop, decorative; the video fades in over the poster and crossfades between moments ---------- */
.bo-film--teaser{overflow:hidden}
.bo-film--teaser .bo-film-poster{z-index:1}
.bo-film--teaser .bo-film-canvas{z-index:2;opacity:0}
.bo-film--teaser.is-snap .bo-film-canvas{opacity:1}
.bo-film--teaser .bo-film-video{z-index:3;object-fit:cover;background:transparent;opacity:0;transition:opacity 1.1s var(--ease-io)}
.bo-film--teaser.is-live .bo-film-video{opacity:1}
.bo-film--teaser .bo-film-video.is-cut{opacity:0;transition:none}

/* ---------- chapter rail ---------- */
.bo-film-railbox{margin-top:28px}
.bo-rail{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,181,71,.32)}
.bo-rail li{border-bottom:1px solid var(--ln)}
.bo-rail-i{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 8px 12px 0;text-align:left;
  transition:background-color .3s,padding .5s var(--ease)}
.bo-rail-n{font:500 12px/1 var(--mf);letter-spacing:.1em;color:var(--t4);transition:color .3s}
.bo-rail-t{font:400 15.5px/1.35 var(--bf);color:var(--t2);transition:color .3s}
.bo-rail-tm{font:400 12px/1 var(--mf);letter-spacing:.05em;color:var(--t3);font-variant-numeric:tabular-nums}
@media (hover:hover){
  .bo-rail-i:hover .bo-rail-t{color:var(--fg)}
  .bo-rail-i:hover .bo-rail-n{color:var(--t2)}
}
.bo-rail-i:focus-visible{outline-offset:-2px}
.bo-rail-i[aria-current]{background:linear-gradient(90deg,rgba(255,181,71,.09),rgba(255,181,71,0));padding-left:12px}
.bo-rail-i[aria-current] .bo-rail-n{color:var(--am)}
.bo-rail-i[aria-current] .bo-rail-t{color:var(--fg)}
.bo-rail-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden;pointer-events:none}
.bo-rail-bar i{position:absolute;inset:0;background:var(--am);transform:scaleX(0);transform-origin:left center;transition:transform .3s linear}

/* ---------- theatre ---------- */
.bo-theatre{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--fg);
  overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.bo-theatre::backdrop{background:rgba(8,9,11,.8);-webkit-backdrop-filter:blur(14px) saturate(.9);backdrop-filter:blur(14px) saturate(.9);opacity:0;transition:opacity .45s cubic-bezier(.16,.84,.24,1)}
.bo-theatre.is-open::backdrop{opacity:1}
@media (max-width:759px){.bo-theatre::backdrop{background:rgba(8,9,11,.97);-webkit-backdrop-filter:none;backdrop-filter:none}} /* on a phone the theatre is the whole screen */
html.bo-film-lock .radar *{animation-play-state:paused} /* the hero radar rests behind the theatre */
.bo-theatre.is-fallback{z-index:300;background:rgba(8,9,11,.94)} /* no showModal (very old browsers): no ::backdrop either */
.bo-theatre-in{box-sizing:border-box;min-height:100%;display:flex;flex-direction:column;padding:clamp(12px,2vw,28px) clamp(16px,3vw,48px) clamp(20px,3vw,40px);
  opacity:0;transform:translateY(16px) scale(.99);transition:opacity .4s var(--ease),transform .6s var(--ease)}
.bo-theatre.is-open .bo-theatre-in{opacity:1;transform:none}
.bo-theatre-top{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;margin-bottom:clamp(10px,1.6vw,22px)}
.bo-theatre-k{display:flex;align-items:center;gap:14px;margin:0;font:500 12px/1.4 var(--mf);letter-spacing:.24em;text-transform:uppercase;color:var(--am)}
.bo-theatre-k i{flex:none;width:24px;height:1.5px;background:var(--am)}
.bo-theatre-x{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--ln2);color:var(--fg);
  background:rgba(10,12,14,.4);transition:border-color .3s,color .3s,background-color .3s,transform .5s var(--ease)}
.bo-theatre-x svg{width:20px;height:20px}
@media (hover:hover){.bo-theatre-x:hover{border-color:var(--am);color:var(--am);transform:rotate(90deg)}}
.bo-theatre-main{--pw:min(1280px,calc((100dvh - 150px) * 16 / 9));flex:1;display:grid;grid-template-columns:minmax(0,var(--pw));justify-content:center;align-content:center;
  gap:clamp(18px,2.2vw,36px)}
.bo-theatre-stage,.bo-theatre-side{min-width:0}
.bo-theatre-side{position:relative;display:flex;flex-direction:column}
.bo-theatre-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;padding-bottom:14px;font:500 11.5px/1 var(--mf);letter-spacing:.22em;text-transform:uppercase;color:var(--am)}
.bo-theatre-d{color:var(--t3);letter-spacing:.08em}
@media (min-width:1100px){
  .bo-theatre-main{grid-template-columns:minmax(0,var(--pw)) minmax(250px,300px);align-items:stretch}
  .bo-theatre-rail{position:absolute;left:0;right:0;top:26px;bottom:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  /* the nine rows share the player's height (as the SafeBay rail does), so none hides in the box down to a 373 px rail */
  .bo-theatre-rail .bo-rail{min-height:100%}
  .bo-theatre-rail .bo-rail li{flex:1 1 0;display:flex;min-height:38px}
  .bo-theatre-rail .bo-rail-i{min-height:0;padding-top:6px;padding-bottom:6px}
}
/* a phone held sideways: the film takes the full height, the close button sits beside it, the page behind stays dark */
@media (max-height:500px) and (orientation:landscape){
  .bo-theatre::backdrop{background:rgba(8,9,11,.97)}
  .bo-theatre-in{position:relative;padding:10px max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left))}
  .bo-theatre-top{position:absolute;top:8px;right:max(8px,env(safe-area-inset-right));z-index:2;min-height:0;margin:0}
  .bo-theatre-k{display:none}
  .bo-theatre-main{--pw:min(1280px,calc((100dvh - 20px) * 16 / 9),calc(100vw - 136px))}
}

/* scroll lock while the theatre is open. Where the page has a real scrollbar, film.js sets --bo-film-sbw to its width and it
   comes back as padding, so nothing behind moves (scrollbar-gutter is not used: it shrinks vw, and the site sizes in vw).
   Other fixed bars on a page can take the same right: var(--bo-film-sbw,0px) under html.bo-film-lock. */
html.bo-film-lock body{overflow:hidden;padding-right:var(--bo-film-sbw,0px)}
html.bo-film-lock .hdr{right:var(--bo-film-sbw,0px)}

/* ---------- the page button: "Watch the film · 6:41", one look for every placement ----------
   <button class="bo-film-play" type="button" data-film-open aria-label="Watch the film, 6 minutes 41 seconds">
     <span class="bo-film-ring"></span><span class="bo-film-play-l">Watch the film <b>6:41</b></span></button>
   The ring (the poster button's, at row size), the site's mono label, a quiet dot, the length in amber. As tall as the
   site's buttons (54 px), so it sits in a row of them; the focus ring goes round the whole control, as a pill. */
.bo-film-play{position:relative;display:inline-flex;align-items:center;gap:16px;min-height:54px;padding:0 18px 0 5px;border-radius:999px;color:var(--fg);
  text-align:left;text-decoration:none;-webkit-tap-highlight-color:transparent}
.bo-film-play .bo-film-ring{width:44px;box-shadow:0 0 30px rgba(255,181,71,.14)}
.bo-film-play .bo-film-ring::after{inset:-6px}
.bo-film-play .bo-film-ring svg{width:38%;height:38%}
.bo-film-play-l{font:500 12.5px/1.4 var(--mf);letter-spacing:.22em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
.bo-film-play-l b{font-weight:500;color:var(--am);font-variant-numeric:tabular-nums}
.bo-film-play:focus-visible{outline:2px solid var(--am);outline-offset:4px;border-radius:999px}
.bo-film-play:focus-visible .bo-film-ring{background:var(--am);color:var(--ink);transform:scale(1.04);box-shadow:0 0 0 6px rgba(255,181,71,.12),0 0 44px rgba(255,181,71,.3)}
@media (hover:hover){
  .bo-film-play:hover .bo-film-ring{background:var(--am);color:var(--ink);transform:scale(1.04);box-shadow:0 0 0 6px rgba(255,181,71,.12),0 0 44px rgba(255,181,71,.3)}
  .bo-film-play:hover .bo-film-ring::after{inset:-10px;border-color:rgba(255,181,71,.32)}
}
@media (max-width:759px){.bo-film-play-l{font-size:12px;letter-spacing:.2em}}
.no-js [data-film-open],.no-js [data-film-js]{display:none} /* they need the script (openers, a rail's heading and box) */

/* ---------- reduced motion: the site's rule stops transitions on elements; these are the rest ---------- */
@media (prefers-reduced-motion:reduce){
  .bo-theatre::backdrop{transition:none} /* ::backdrop is not matched by *, ::before or ::after */
  .bo-film.is-idle .bo-film-frame:hover .bo-film-poster{transform:none}
}

/* ---------- Windows high contrast: keep the progress and the current chapter visible ---------- */
@media (forced-colors:active){
  .bo-film-seg,.bo-film-fill,.bo-film-buf,.bo-film-knob,.bo-film-marks i,.bo-rail-bar i,.bo-film-dprog i{forced-color-adjust:none}
  .bo-film-seg{background:GrayText}
  .bo-film-buf{background:CanvasText;opacity:.4}
  .bo-film-fill,.bo-film-knob,.bo-rail-bar i,.bo-film-dprog i,.bo-film-marks i.is-past{background:Highlight}
  .bo-film-marks i{background:CanvasText}
  .bo-film-cc span{forced-color-adjust:none;background:Canvas;color:CanvasText}
  .bo-rail-i[aria-current],.bo-film-mi[aria-checked=true]{outline:2px solid Highlight;outline-offset:-2px}
  .bo-film-frame:focus-visible::after{box-shadow:none;outline:2px solid Highlight;outline-offset:-2px} /* box shadows are dropped here */
}

/* ==================== the home hero's film button (scrubber edge) ==================== */
/* Button option 2 · "Scrubber edge": "Watch the film" in the home hero. Loaded after site.css and the kit's film.css;
   the site's tokens only. The hero's third button is the site's outline button (.btn, drawn as .btn-ln) whose bottom
   edge is the film's scrubber:
   - at rest, nine ticks stand on the bottom border at the film's chapter starts (film.json, as fractions of 401.38 s),
     from under the play icon to under the 6:41, the film's length at the end of its line, as on a player;
   - hover (a real pointer) or keyboard focus plays it: the button warms as .btn-ln does, the play icon fills, and an
     amber line runs along the edge in 1.2 s, the playhead at its tip lighting each chapter tick as it passes; when it
     reaches the end the playhead settles into the line and the 6:41 lights. Leaving fades it all back;
   - a press (pointer down, Enter, Space) completes the line at once and the kit opens the theatre (film.js);
   - after a part-way close the edge keeps the watched part and the button reads "Continue the film · 4:27 left";
   - reduced motion: the same states with no run (site.css makes transitions instant; the delays go below).
   Structure: a.btn.sb > svg.sb-ic + .sb-t (label) + .sb-d (duration) + .sb-bar (the scrubber: .sb-tk ticks, .sb-w the
   watched part, .sb-run the line, .sb-hd the playhead). Motion is CSS transitions only (transform and opacity on the
   compositor, a few 1 px ticks repainted): nothing runs at rest, off screen or in a hidden tab.
   --p0 (scrub.js): the watched part after a part-way close, 0 to 1; the run starts there and lasts the rest of the 1.2 s. */

/* Its ground is the page's own --bg, opaque: from about 1020 to 1300 px the button reaches into the radar, and the
   radar's ring, its tick marks and the sweep would cross the label and the chapter ticks. Lit, it takes .btn-ln's 5 %
   amber, worked out over --bg (#161411), so it stays opaque. */
.sb{--sb-run:1.2s;--sb-l:29px;--sb-r:26px;--sb-lit:#161411;--p0:0;
  overflow:visible; /* .btn clips; the scrubber lies on the bottom border, just outside the padding box */
  border:1px solid var(--ln2);background-color:var(--bg);color:var(--fg);-webkit-tap-highlight-color:transparent}
.sb[hidden]{display:none} /* scrub.js hides it when film.js did not run (it would open nothing); .btn would show it */

.sb .sb-ic{fill:transparent;transition:fill .35s var(--ease)} /* the play icon: outline at rest, filled when it plays (.sb: over .btn svg) */
.btn.sb:hover .sb-ic{transform:none} /* the site's buttons nudge their arrow; here the playhead moves instead */
.sb-d{margin:2px 0 0 8px;font:500 12.5px/1 var(--mf);letter-spacing:.04em;color:var(--t3);font-variant-numeric:tabular-nums;
  transition:color .35s var(--ease)} /* 20 px from the label; the top margin sits it on the label's baseline */
.sb-lw{font:400 14px/0 var(--bf);letter-spacing:.01em} /* "left" (continue state): a word, so the site's sans; line-height 0 keeps the numerals' line box, so they stay on the label's baseline */

/* the scrubber: on the bottom border, from the play icon's left edge (--sb-l: the padding and the icon's own inset) to
   the duration's right edge (the padding) */
.sb-bar{position:absolute;left:var(--sb-l);right:var(--sb-r);bottom:-1px;height:9px;pointer-events:none}
.sb-tk{position:absolute;left:calc(var(--f) * 100%);bottom:0;width:1px;height:5px;background-color:rgba(238,232,221,.32);
  transition:background-color .35s var(--ease)} /* they warm with the border when it plays (--al3, as the border) */
.sb-tk::after{content:'';position:absolute;inset:0;background:var(--am);transition:opacity .3s var(--ease);
  opacity:clamp(0,calc((var(--p0) - var(--f)) * 100000),1)} /* lit where the film has been watched (after a part-way close) */
.sb-tk:nth-child(1){--f:0}         /* 01 One platform 0:00 */
.sb-tk:nth-child(2){--f:.08887}    /* 02 Fleet board 0:35 */
.sb-tk:nth-child(3){--f:.14365}    /* 03 Planned maintenance 0:57 */
.sb-tk:nth-child(4){--f:.21212}    /* 04 Spare parts and purchasing 1:25 */
.sb-tk:nth-child(5){--f:.26561}    /* 05 Documents and safety 1:46 */
.sb-tk:nth-child(6){--f:.34977}    /* 06 SafeBay AI 2:20 */
.sb-tk:nth-child(7){--f:.58107}    /* 07 AI at work 3:53 */
.sb-tk:nth-child(8){--f:.73574}    /* 08 Memory and plugins 4:55 */
.sb-tk:nth-child(9){--f:.92939}    /* 09 What comes next 6:13 */

/* the watched part, the line and the playhead: 2 px on the edge (the border and one pixel above it), drawn by scaling
   and moving, never by resizing. At rest the line waits at --p0, unseen; leaving fades it first, then puts it back. */
.sb-w,.sb-run{position:absolute;left:0;right:0;bottom:0;height:2px;transform-origin:0 50%;transform:scaleX(var(--p0))}
.sb-w{background:var(--am2);opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sb.is-resume .sb-w{opacity:.85}
.sb-run{background:var(--am);opacity:0;transition:opacity .3s var(--ease),transform 0s linear .3s}
.sb-hd{position:absolute;left:0;right:0;bottom:0;height:0;transform:translateX(calc(var(--p0) * 100%));opacity:0;
  transition:opacity .3s var(--ease),transform 0s linear .3s} /* as wide as the bar: translateX(100%) is the end */
.sb-hd i{position:absolute;left:-1px;bottom:0;width:2px;height:9px;border-radius:1px;background:var(--am-hi);
  box-shadow:0 0 7px rgba(255,181,71,.75);transform-origin:50% 100%;transition:transform 0s .3s}

/* playing: keyboard focus here, hover below (a real pointer only: a tap would leave a phone's button lit) */
.sb:focus-visible{border-color:var(--al3);color:var(--am);background-color:var(--sb-lit)}
.sb:focus-visible .sb-ic{fill:currentColor}
.sb:focus-visible .sb-tk{background-color:var(--al3)}
.sb:focus-visible .sb-run{opacity:1;transform:scaleX(1);transition:opacity .12s var(--ease),transform calc((1 - var(--p0)) * var(--sb-run)) linear}
.sb:focus-visible .sb-hd{opacity:1;transform:translateX(100%);transition:opacity .12s var(--ease),transform calc((1 - var(--p0)) * var(--sb-run)) linear}
.sb:focus-visible .sb-hd i{transform:scaleY(.23);transition:transform .35s var(--ease) calc((1 - var(--p0)) * var(--sb-run))} /* it lands in the line */
.sb:focus-visible .sb-tk::after{opacity:1;transition:opacity .2s var(--ease) max(0s,calc((var(--f) - var(--p0)) * var(--sb-run)))}
.sb:focus-visible .sb-d{color:var(--am);transition:color .35s var(--ease) calc((1 - var(--p0)) * var(--sb-run))}
@media (hover:hover){
  .sb:hover{border-color:var(--al3);color:var(--am);background-color:var(--sb-lit)} /* as .btn-ln */
  .sb:hover .sb-ic{fill:currentColor}
  .sb:hover .sb-tk{background-color:var(--al3)}
  .sb:hover .sb-run{opacity:1;transform:scaleX(1);transition:opacity .12s var(--ease),transform calc((1 - var(--p0)) * var(--sb-run)) linear}
  .sb:hover .sb-hd{opacity:1;transform:translateX(100%);transition:opacity .12s var(--ease),transform calc((1 - var(--p0)) * var(--sb-run)) linear}
  .sb:hover .sb-hd i{transform:scaleY(.23);transition:transform .35s var(--ease) calc((1 - var(--p0)) * var(--sb-run))}
  .sb:hover .sb-tk::after{opacity:1;transition:opacity .2s var(--ease) max(0s,calc((var(--f) - var(--p0)) * var(--sb-run)))}
  .sb:hover .sb-d{color:var(--am);transition:color .35s var(--ease) calc((1 - var(--p0)) * var(--sb-run))}
}

/* pressed (scrub.js, from pointer down until the theatre covers the page): the line completes at once, the playhead
   has gone ahead into the theatre. Last in the file: it wins over hover and focus at the same specificity. */
.sb.is-go{border-color:var(--al3);color:var(--am);background-color:var(--sb-lit)} /* a tap had no hover */
.sb.is-go .sb-ic{fill:currentColor;transition:none}
.sb.is-go .sb-run{opacity:1;transform:scaleX(1);transition:none}
.sb.is-go .sb-hd{opacity:0;transition:none}
.sb.is-go .sb-tk::after{opacity:1;transition:none}
.sb.is-go .sb-d{color:var(--am);transition:none}

/* phones: the hero's buttons stack full width (site.css). The play icon keeps the line's start and the duration its end;
   the label is centred, as on the buttons above. Under 380 px "Continue the film · 4:41 left" no longer fits centred: it reads
   "Continue" there (the name keeps it all). */
@media (max-width:759px){
  .hero .btns .btn{flex:1 1 100%}
  .sb{display:grid;grid-template-columns:1fr auto 1fr}
  .sb-ic{justify-self:start}
  .sb-d{justify-self:end;margin-left:0}
}
@media (max-width:379px){.sb-tx{display:none}}
@media (max-width:339px){.sb{column-gap:8px}} /* 320 px: "4:41 left" needs the side column's last pixels to keep the label centred */

@media (prefers-reduced-motion:reduce){ /* site.css makes every transition instant; without their delays nothing runs */
  .sb,.sb *,.sb *::after{transition-delay:0s!important}
}

@media (forced-colors:active){ /* Windows high contrast: the ticks and the line keep system colours */
  .sb-tk,.sb-tk::after,.sb-w,.sb-run,.sb-hd i{forced-color-adjust:none}
  .sb-tk{background:GrayText}
  .sb-tk::after,.sb-w,.sb-run,.sb-hd i{background:Highlight;box-shadow:none}
}

/* ==================== the SafeBay page's film section ==================== */
/* Option C · Chaptered film tour (SafeBay page). Load after site.css and the kit's film.css; uses the site's tokens.
   The film sits right after the hero with its chapter rail beside it (from 1240 px; below it on smaller screens), and a
   quiet "Watch this part · m:ss" chip sits under the later section headings. The docked player follows the visitor
   (the kit's dock), and the chip whose part is playing lights up (tour.js sets aria-current and .is-live).
   Nothing here creates a containing block around the player (no transform, filter or contain), so the dock works. */

/* ---------- the section: player, "back to" button, chapter rail ---------- */
/* a band, so the page keeps its rhythm (hero, band, plain, band…); the next section's own top line closes it */
.tour.band{border-bottom:0}
.tour-g{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "foot" "side"}
.tour-stage{grid-area:stage;position:relative;min-width:0}
/* a soft light behind the screen, as the site does behind its pages (painted under the player, no stacking context) */
.tour-stage::before{content:'';position:absolute;left:max(-8%,calc(var(--gut) * -1));right:max(-8%,calc(var(--gut) * -1));top:-14%;bottom:-14%;
  pointer-events:none;background:radial-gradient(closest-side,rgba(255,181,71,.075),rgba(255,181,71,0))} /* never wider than the gutter: no sideways scroll */
.tour-foot{grid-area:foot;min-width:0}
.tour-side{grid-area:side;min-width:0;margin-top:clamp(32px,4vw,44px)}
.tour-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;
  font:500 11.5px/1 var(--mf);letter-spacing:.22em;text-transform:uppercase;color:var(--am)}
.tour-d{color:var(--t3);letter-spacing:.08em}
.tour-side .bo-rail-t{font-size:16px}
/* the kit draws the rail when film.json arrives, after the page has loaded. Its place is kept until then, so nothing below
   it jumps: links from the other pages to /safebay#ai land on that section, and the reading position holds.
   Phones: nine rows of 48 px ("Spare parts and purchasing" takes two lines at 333 px and less); tablets: five rows of
   52 px in two columns; from 1240 px the rail sits beside the player, which sets the height */
.js .tour-rail:empty,.tour-rail .bo-rail:empty{min-height:442px}
@media (max-width:333px){.js .tour-rail:empty,.tour-rail .bo-rail:empty{min-height:461px}}
@media (min-width:700px) and (max-width:1239px){.js .tour-rail:empty,.tour-rail .bo-rail:empty{min-height:266px}}
@media (min-width:1240px){.js .tour-rail:empty,.tour-rail .bo-rail:empty{min-height:0}}
.tour-nometa .tour-side{display:none} /* film.json did not load: no rail, so no heading or kept place either */

@media (max-width:699px){.tour-side .bo-rail-i{min-height:48px}}
/* tablets (an iPad held sideways too): the nine chapters in two columns (01-05, 06-09) under a wide player */
@media (min-width:700px) and (max-width:1239px){
  .tour-side .bo-rail{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:40px}
}
/* a phone held sideways: the player fits the screen's height under the header instead of running off it (the room under
   the site's scroll padding, header + 24 px, where "Back to the film" and the chips centre it, with 10 px to spare) */
@media (orientation:landscape) and (max-height:500px){
  .tour-stage .bo-film{width:min(100%,calc((100svh - var(--hdr) - 34px) * 16 / 9));margin-left:auto;margin-right:auto}
  .tour-g:has(.tour-back:not([hidden])) .tour-stage .bo-film{width:min(100%,calc((100svh - var(--hdr) - 98px) * 16 / 9))}
}
.tour-g:has(.tour-back:not([hidden])) .tour-stage .bo-film{scroll-margin-bottom:72px}
/* desktop: the rail beside the player, its nine rows sharing the player's height (44 px each at least; from 1240 px
   the player is tall enough for that, so the rail ends where the player ends) */
@media (min-width:1240px){
  .tour-g{position:relative;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"stage side";column-gap:40px}
  .tour-side{display:flex;flex-direction:column;margin-top:0}
  .tour-rail{flex:1;display:flex;flex-direction:column}
  .tour-side .bo-rail{flex:1}
  .tour-side .bo-rail li{flex:1 1 0;display:flex;min-height:44px}
  .tour-side .bo-rail-i{min-height:0}
  /* "back to" sits under the player in the section's own bottom space, so showing it never moves the page */
  .tour-foot{position:absolute;left:0;top:100%;grid-area:auto}
  /* no script (the native player stands in) or no kit: there is no rail, so the player takes the full width */
  .no-js .tour-g,.tour-off .tour-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage"}
}

/* "Back to <section>": after a chip brought the visitor here, one press takes them back (the film docks and plays on) */
.tour-back{display:inline-flex;align-items:center;gap:12px;max-width:100%;min-height:46px;margin-top:18px;padding:0 18px 0 7px;
  border-radius:999px;border:1px solid rgba(255,181,71,.42);background:rgba(255,181,71,.06);color:var(--fg);text-align:left;
  transition:border-color .3s,background-color .3s}
.tour-back[hidden]{display:none} /* the UA's [hidden] loses to a class rule, so it is restated */
.tour-back:not([hidden]){animation:tour-in .55s var(--ease) both}
.tour-back-g{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--am);color:var(--ink)}
.tour-back-g svg{width:16px;height:16px}
.tour-back-k{flex:none;font:500 11px/1 var(--mf);letter-spacing:.2em;text-transform:uppercase;color:var(--am)}
.tour-back-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 15px/1.3 var(--bf);color:var(--fg)}
@media (hover:hover){.tour-back:hover{border-color:var(--am);background:rgba(255,181,71,.11)}}
@keyframes tour-in{from{opacity:0;transform:translateY(-6px)}}

/* ---------- "Watch this part · m:ss" by a section heading ---------- */
.hd .tour-chip{margin-top:26px}
.tour-chip{position:relative;display:inline-flex;align-items:center;gap:11px;height:36px;padding:0 16px 0 5px;border-radius:999px;
  border:1px solid var(--ln2);background:rgba(10,12,14,.4);font:500 11px/1 var(--mf);letter-spacing:.16em;text-transform:uppercase;
  color:var(--t2);white-space:nowrap}
.tour-chip::before{content:'';position:absolute;left:0;right:0;top:-5px;bottom:-5px} /* 46 px to touch */
/* the site's reveal sets its own transition list on [data-r]; this keeps the reveal and adds the hover colours */
.js .tour-chip[data-r]{transition:opacity 1s var(--ease),transform 1.15s var(--ease),color .3s,border-color .3s,background-color .3s}
.tour-chip-g{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(255,181,71,.5);color:var(--am);transition:background-color .3s,border-color .3s,color .3s}
.tour-chip-g svg{width:10px;height:10px;margin-left:1.5px}
.tour-chip-t{margin-left:-11px;color:var(--am);font-variant-numeric:tabular-nums}
.tour-chip-t::before{content:'·';margin:0 .4em;color:var(--t3)} /* equal air either side, as on every film label */
.tour-chip:focus-visible{color:var(--fg);border-color:var(--al3);background:rgba(255,181,71,.05)}
.tour-chip:focus-visible .tour-chip-g{background:var(--am);border-color:var(--am);color:var(--ink)}
@media (hover:hover){ /* a tapped chip would keep :hover on a touch screen */
  .tour-chip:hover{color:var(--fg);border-color:var(--al3);background:rgba(255,181,71,.05)}
  .tour-chip:hover .tour-chip-g{background:var(--am);border-color:var(--am);color:var(--ink)}
}
/* lit: the film is in this part (docked or in its place). While it plays and the chip is on screen, a slow ripple leaves
   the glyph (the site's .ping motif; transform and opacity only, so it costs no paint) */
.tour-chip[aria-current]{color:var(--am);border-color:rgba(255,181,71,.5);background:rgba(255,181,71,.07)}
.tour-chip[aria-current] .tour-chip-g{background:var(--am);border-color:var(--am);color:var(--ink)}
.tour-chip.is-live .tour-chip-g::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--am);pointer-events:none;
  animation:tour-ripple 2.4s var(--ease) infinite}
@keyframes tour-ripple{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.85);opacity:0}}
@media (prefers-reduced-motion:reduce){.tour-chip.is-live .tour-chip-g::after{content:none}} /* lit, but still */
@media (max-width:759px){.hd .tour-chip{margin-top:22px}}

/* without the kit (film.js failed to load) the chips and the rail would do nothing: they go, like [data-film-js] without JS */
.tour-off [data-film-js]{display:none}

@media (forced-colors:active){
  .tour-chip[aria-current]{outline:2px solid Highlight;outline-offset:2px}
  .tour-stage::before{display:none}
}