/* Product demonstration refinements. The approved hero is independent. */
body.kerbi-studied .studio-film .film-copy{width:40%;max-width:480px}
body.kerbi-studied .studio-film .film-copy h2{
  font-family:'Switzer','Kerbi Sans',Arial,sans-serif;
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.04;
  font-size:clamp(38px,4.6vw,64px);
}
.studio-film .device-screen{overflow:hidden}
.studio-film .chart-panel{width:100%;margin-left:0;padding:0;border:0;border-radius:0;box-shadow:none}
.studio-film .month[aria-pressed=true] .bar:after{inset:0;border-color:#d9ccef}
.studio-film .month:focus-visible{outline-offset:-2px}

/* Let the copy take its own space before the handset on small screens. */
@media(max-width:740px){
  body.kerbi-studied .studio-film .film-stage{height:auto;min-height:0}
  body.kerbi-studied .studio-film .film-topline{position:relative;top:auto;left:auto;right:auto;margin:26px 26px 0;font-size:8px}
  body.kerbi-studied .studio-film .film-copy{position:relative;top:auto;left:auto;right:auto;width:auto;margin:32px 26px 20px;min-height:260px}
  body.kerbi-studied .studio-film .film-copy h2{font-size:40px;margin-bottom:18px}
  body.kerbi-studied .studio-film .film-copy p{font-size:13px;line-height:1.6;max-width:350px}
  body.kerbi-studied .studio-film .source-link{margin-top:17px;font-size:11px}
  body.kerbi-studied .studio-film .device-wrap{position:relative;top:auto;right:auto;width:100%;height:578px;transform:none;margin:0;perspective:none}
  body.kerbi-studied .studio-film .device{position:absolute;left:50%;top:0;transform:translateX(-50%) translateY(var(--arrival-y,0px)) scale(.85);transform-origin:top center}
  .studio-film .device-wrap:after{left:0;right:0;bottom:0;height:60px}
  .studio-film .film-caption{position:relative;display:block;left:auto;bottom:auto;margin:0;padding:10px 26px 20px;font-size:8px}
}
@media(max-width:370px){
  body.kerbi-studied .studio-film .film-copy h2{font-size:36px}
  body.kerbi-studied .studio-film .device-wrap{height:517px}
  body.kerbi-studied .studio-film .device{transform:translateX(-50%) translateY(var(--arrival-y,0px)) scale(.76)}
}

/* Remotion is rendered at the display's exact 312:608 aspect ratio. */
.studio-film.showing-film .device-screen{background:#111110}
.studio-film.showing-film .app-nav,
.studio-film.showing-film .home-indicator{visibility:hidden}
.studio-film .shift-film-panel,
.studio-film .film-panel{inset:0;overflow:hidden;background:#111110;isolation:isolate;border-radius:15px}
.studio-film .shift-film-video,
.studio-film .chapter-video{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten}

/* ---------------------------------------------------------------------------
   The theatre, second pass.

   Three things changed: the stage sits on a lifted warm black rather than a
   near-absolute one, the counter chip is gone (the index below carries
   position), and the tab bar is now a chapter index — the subject of each film
   in words, with a rail that fills as that film plays. Playback controls belong
   to the film, so they sit on the stage rather than in the index row.
   --------------------------------------------------------------------------- */
body.kerbi-studied .studio-film{--stage:#22221f}
body.kerbi-studied .studio-film .film-stage{
  background:radial-gradient(820px 560px at 74% 26%,rgba(255,255,255,.05),transparent 68%),var(--stage);
}
/* the handset is a darker object on that ground now, so give it an edge */
body.kerbi-studied .studio-film .device{box-shadow:0 34px 75px #00000059,inset 0 0 0 1px rgba(255,255,255,.055)}
body.kerbi-studied .studio-film .device-wrap:after{
  background:linear-gradient(0deg,var(--stage) 5%,rgba(34,34,31,.91) 27%,rgba(34,34,31,0) 100%);
}
body.kerbi-studied .studio-film .film-topline{color:#8d8d84;font-size:9px;letter-spacing:.13em}
body.kerbi-studied .studio-film .film-caption{color:#84847c}
body.kerbi-studied .studio-film .film-copy .eyebrow{color:#919188}
body.kerbi-studied .studio-film .film-copy p{color:#b2b2a9}

/* Playback belongs to the film, so it sits on the stage: in the empty foot of
   the copy column, above the caption, clear of the handset. */
body.kerbi-studied .studio-film .film-controls{position:relative}
body.kerbi-studied .studio-film .transport{
  position:absolute;left:6%;right:auto;bottom:100%;margin-bottom:52px;gap:12px;z-index:6;
  margin-left:-9px; /* the first glyph, not its hit area, lines up with the copy */
}
body.kerbi-studied .studio-film .transport button{width:32px;height:32px;border-radius:50%;color:rgba(241,240,233,.55)}
body.kerbi-studied .studio-film .transport button:hover{color:#fff;background:rgba(255,255,255,.1)}
body.kerbi-studied .studio-film .transport svg{width:14px;height:14px}
body.kerbi-studied .studio-film .transport input{
  width:88px;height:2px;
  background:linear-gradient(90deg,rgba(241,240,233,.85) calc(var(--progress,0)*100%),rgba(241,240,233,.2) calc(var(--progress,0)*100%));
}
body.kerbi-studied .studio-film .transport input::-webkit-slider-thumb{width:7px;height:7px;background:#f1f0e9}
body.kerbi-studied .studio-film .transport input::-moz-range-thumb{width:7px;height:7px;background:#f1f0e9}

/* ---- the chapter index ---- */
body.kerbi-studied .studio-film .film-controls{display:block;padding:0;border-bottom:0}
body.kerbi-studied .studio-film .chapter-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:0;align-items:stretch;margin-top:15px}
body.kerbi-studied .studio-film .chapter-tabs button{
  display:block;position:relative;text-align:left;
  padding:18px 34px 32px 0;min-height:0;gap:0;border-bottom:0;font-size:inherit;color:inherit;
}
body.kerbi-studied .studio-film .chapter-tabs button>span{display:block}
body.kerbi-studied .studio-film .chapter-rail{
  position:absolute;left:0;right:34px;top:0;height:2px;background:#e5e4dc;overflow:hidden;
}
body.kerbi-studied .studio-film .chapter-rail:after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--progress,0)*100%);background:#141412;
}
body.kerbi-studied .studio-film .chapter-tabs button[data-played=true] .chapter-rail:after{background:#c0bfb5}
body.kerbi-studied .studio-film .chapter-tabs button>.chapter-name{
  font-family:'Switzer','Kerbi Sans',Arial,sans-serif;font-weight:600;
  font-size:17px;line-height:1.15;letter-spacing:-.022em;color:#95958c;transition:color .25s cubic-bezier(.22,1,.36,1);
}
body.kerbi-studied .studio-film .chapter-tabs button>.chapter-kicker{
  margin-top:7px;font-size:11.5px;line-height:1.45;letter-spacing:.005em;color:#a7a79e;
  transition:color .25s cubic-bezier(.22,1,.36,1);
}
body.kerbi-studied .studio-film .chapter-tabs button:hover>.chapter-name{color:#141412}
body.kerbi-studied .studio-film .chapter-tabs button:hover .chapter-rail{background:#cfcec5}
body.kerbi-studied .studio-film .chapter-tabs button[aria-selected=true]>.chapter-name{color:#141412}
body.kerbi-studied .studio-film .chapter-tabs button[aria-selected=true]>.chapter-kicker{color:#6b6e63}
body.kerbi-studied .studio-film .chapter-tabs button:focus-visible{outline-offset:-3px}

/* Without the painter (reduced motion) the playing chapter still reads as full. */
@media(prefers-reduced-motion:reduce){
  body.kerbi-studied .studio-film .chapter-tabs button[aria-selected=true] .chapter-rail:after{width:100%}
}

@media(max-width:1180px) and (min-width:741px){
  body.kerbi-studied .studio-film .chapter-tabs button{padding:16px 24px 28px 0}
  body.kerbi-studied .studio-film .chapter-rail{right:24px}
  body.kerbi-studied .studio-film .chapter-tabs button>.chapter-name{font-size:15px}
  body.kerbi-studied .studio-film .chapter-tabs button>.chapter-kicker{font-size:10.5px;margin-top:6px}
}
@media(max-width:960px) and (min-width:741px){
  body.kerbi-studied .studio-film .chapter-tabs button{padding:14px 16px 24px 0}
  body.kerbi-studied .studio-film .chapter-rail{right:16px}
  body.kerbi-studied .studio-film .chapter-tabs button>.chapter-name{font-size:13.5px}
  body.kerbi-studied .studio-film .chapter-tabs button>.chapter-kicker{font-size:10px}
  body.kerbi-studied .studio-film .transport input{width:64px}
}


/* ---------------------------------------------------------------------------
   The chapter index moves inside the stage.

   It was sitting on white below the film, which read as page furniture rather
   than part of the demonstration. It now runs along the foot of the stage, in
   the film's own light-on-dark, and the stage grows by exactly what the index
   used to occupy so the section keeps its height. Playback and the caption
   stack in the empty foot of the copy column, leaving the index the full width.

   Only from 961px: below that the handset already reaches the foot of the
   stage, and there is nowhere for the index to go but on top of it.
   --------------------------------------------------------------------------- */
@media(min-width:961px){
  body.kerbi-studied .studio-film{position:relative}
  body.kerbi-studied .studio-film .film-stage{height:806px}
  body.kerbi-studied .studio-film .film-controls{
    position:absolute;left:0;right:0;bottom:0;z-index:7;padding:0 40px 24px;
  }
  body.kerbi-studied .studio-film .chapter-tabs{margin-top:0}
  body.kerbi-studied .studio-film .film-caption{bottom:124px;left:40px}
  /* the stage grew, so the copy sits where it did against the shorter one */
  body.kerbi-studied .studio-film .film-copy{top:29%}

  /* light on dark, with the playing chapter's rail carrying the accent */
  body.kerbi-studied .studio-film .chapter-rail{background:rgba(241,240,233,.17)}
  body.kerbi-studied .studio-film .chapter-rail:after{background:#5cc99a}
  body.kerbi-studied .studio-film .chapter-tabs button[data-played=true] .chapter-rail:after{
    background:rgba(241,240,233,.34);
  }
  body.kerbi-studied .studio-film .chapter-tabs button>.chapter-name{color:rgba(241,240,233,.46)}
  body.kerbi-studied .studio-film .chapter-tabs button>.chapter-kicker{color:rgba(241,240,233,.32)}
  body.kerbi-studied .studio-film .chapter-tabs button:hover>.chapter-name{color:#f6f5ef}
  body.kerbi-studied .studio-film .chapter-tabs button:hover .chapter-rail{background:rgba(241,240,233,.3)}
  body.kerbi-studied .studio-film .chapter-tabs button[aria-selected=true]>.chapter-name{color:#f6f5ef}
  body.kerbi-studied .studio-film .chapter-tabs button[aria-selected=true]>.chapter-kicker{color:rgba(241,240,233,.6)}
  body.kerbi-studied .studio-film .chapter-tabs button:focus-visible{outline-color:#5cc99a}
}
@media(max-width:1180px) and (min-width:961px){
  body.kerbi-studied .studio-film .film-stage{height:766px}
}

/* The film runs on its own. Pausing lives in one place on this page — the motion
   toggle in the footer — and the transport stays in the document because the
   player reads its scrubber to fill the chapter rails. */
body.kerbi-studied .studio-film .transport{display:none}