body.tbs-tiivii-case-page :is(#tiivii-player-base,#tiivii-player-up,.tiv-stage,.tbs-case-media-wrap:has(.tiv-stage),.tbs-case-media-wrap:has([id^="tiivii-player"])){border:0!important;box-shadow:none!important;outline:0}
body.tbs-tiivii-case-page .tbs-case-media-wrap:has(.tiv-stage){background:transparent!important;padding:0!important}
body.tbs-tiivii-case-page .tiv-stage{background:#c7c7c7;display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:clamp(8px,1.2vw,20px);padding:clamp(12px,2.1vw,32px);align-items:center;box-sizing:border-box;width:100%;margin:0;overflow:hidden}
body.tbs-tiivii-case-page .tiv-stage a{display:block;min-width:0;border:0;padding:0;background:none;text-decoration:none;box-shadow:none}
body.tbs-tiivii-case-page .tiv-screen{display:block;position:relative!important;overflow:hidden;aspect-ratio:var(--screen-aspect);background:#18191b;border-radius:clamp(4px,.7vw,10px)!important;box-shadow:0 3px 11px #15172026}
body.tbs-tiivii-case-page .tiv-screen img{display:block;position:absolute!important;width:var(--img-w)!important;height:auto!important;max-width:none!important;max-height:none!important;left:var(--img-x)!important;top:var(--img-y)!important;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;box-shadow:none!important}
body.tbs-tiivii-case-page .tiv-phone{position:relative;display:block;width:100%;max-width:215px;margin:auto;padding:3.2% 2.3%;border-radius:12% / 5.8%;box-sizing:border-box;background:#c3c4c6;box-shadow:inset 0 0 0 1px #42454b99,0 4px 12px #19202a20}
body.tbs-tiivii-case-page .tiv-phone .tiv-screen{border-radius:10% / 4.8%!important;box-shadow:none}
body.tbs-tiivii-case-page .tiv-single-phone a{width:39%;max-width:210px;margin:auto}
body.tbs-tiivii-case-page .tiv-tag{display:block;padding-top:.55em;color:#414248;font:inherit;font-size:clamp(11px,.82vw,14px);line-height:1.3}
@media(max-width:680px){body.tbs-tiivii-case-page .tiv-wide-set{grid-template-columns:1fr}body.tbs-tiivii-case-page .tiv-single-phone a{width:53%}body.tbs-tiivii-case-page .tiv-mobile-set{gap:6px;padding:12px 8px}}
body.tbs-tiivii-case-page .tiv-phone{background:transparent url(phone-frame.svg) center/100% 100% no-repeat;padding:5.6% 3.9%;box-shadow:none;filter:drop-shadow(0 3px 5px #20232924)}

/* Match the explanatory canvas in Guardian. The wrapper also holds the note. */
body.tbs-tiivii-case-page {
  --tiv-canvas-radius: 25px;
}
@media (max-width: 650px) {
  body.tbs-tiivii-case-page { --tiv-canvas-radius: 16px; }
}
body.tbs-tiivii-case-page :is(.tiv-stage, #tiivii-player-base, #tiivii-player-up) {
  border-radius: var(--tiv-canvas-radius) !important;
  overflow: hidden;
}
body.tbs-tiivii-case-page .tbs-case-media-wrap:has(.tiv-figure) {
  border-radius: 0;
}
body.tbs-tiivii-case-page .tiv-figure > figcaption.wp-element-caption {
  margin: clamp(.75rem, 1vw, 1rem) 0 0;
  max-width: 65ch;
  color: #525256;
  font-size: clamp(.8rem, .76rem + .16vw, .9rem);
  font-weight: 400;
  line-height: 1.48;
  text-align: start;
}
body.tbs-tiivii-case-page .tiv-figure + .tiv-figure {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem) !important;
}
body.tbs-tiivii-case-page :is(.tiv-wide-set, .tiv-single-set) {
  padding: clamp(1.125rem, 6%, 2.5rem);
}
body.tbs-tiivii-case-page .tiv-wide-set {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  row-gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
body.tbs-tiivii-case-page .tiv-mobile-set { align-items: start; }

/* Give the single-screen players the same SVG bezel as the Guardian dashboard.
   Its screen opening runs from 14% to 86%. At 110% scale that becomes 10.4–89.6%. */
body.tbs-tiivii-case-page :is(#tiivii-player-base, #tiivii-player-up) {
  background: #c7c7c7 !important;
}
body.tbs-tiivii-case-page :is(#tiivii-player-base, #tiivii-player-up)::before {
  content: '';
  position: absolute;
  display: block;
  inset: -5%;
  z-index: 1;
  border: 0;
  border-radius: 0;
  background: url('../guardian-case-study/tablet-frame-guardian.svg?v=0.3.12') center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 10px rgb(20 25 28 / 18%));
  pointer-events: none;
}
body.tbs-tiivii-case-page :is(#tiivii-player-base, #tiivii-player-up) > video {
  inset: 10.4% !important;
  width: 79.2% !important;
  height: 79.2% !important;
  box-shadow: none !important;
}