/* R64: representative films first, with clear native video controls.
   Scoped to the showcase and explicitly marked video explainers. */
.r64-showcase,
.r64-showcase *,
.r64-video-explainer,
.r64-video-explainer *{box-sizing:border-box}

body .r64-showcase{
  --r64-ink:#2c244d;
  --r64-muted:#736987;
  --r64-purple:#6246d6;
  width:calc(100% - 2 * max(20px,4vw));
  max-width:1600px;
  min-width:0;
  margin:0 auto;
  padding:clamp(32px,4vw,58px) 0 36px;
  color:var(--r64-ink);
  scroll-margin-top:96px;
}
.r64-showcase .r64-showcase-heading{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr) auto;
  align-items:end;
  gap:20px 28px;
  margin:0 0 26px;
  padding:0;
  min-width:0;
}
.r64-showcase-heading>div{min-width:0}
.r64-showcase-heading .eyebrow{
  margin:0 0 10px;
  color:var(--r64-purple);
  font-size:11px;
  font-weight:650;
  line-height:1.5;
  letter-spacing:.13em;
}
.r64-showcase-heading h1{
  margin:0;
  max-width:100%;
  color:var(--r64-ink);
  font-size:clamp(32px,3.1vw,46px);
  font-weight:750;
  line-height:1.2;
  letter-spacing:-.035em;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.r64-showcase .r64-showcase-intro{
  max-width:440px;
  margin:0 0 2px;
  color:var(--r64-muted);
  font-size:14px;
  line-height:1.75;
  overflow-wrap:break-word;
}
.r64-showcase .r64-browse{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  min-width:0;
  margin:0;
  padding:10px 16px;
  border:1px solid #dcd3f2;
  border-radius:24px;
  background:#f8f5ff;
  color:#5d43c2;
  font-size:13px;
  font-weight:650;
  line-height:1.5;
  text-align:center;
  white-space:normal;
  text-decoration:none;
  transition:background .18s,border-color .18s;
}
.r64-browse:hover{background:#f0eaff;border-color:#bfb0ec}
.r64-showcase .r64-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:24px;
  min-width:0;
  width:100%;
}
.r64-showcase .r64-feature-card{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid #e2dbee;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 28px #3e286509;
}
.r64-showcase .r64-feature-media{
  display:block;
  position:relative;
  isolation:isolate;
  width:100%;
  min-width:0;
  height:auto;
  aspect-ratio:16 / 9;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#101b2e;
  color:#fff;
  font:inherit;
  text-align:center;
  cursor:pointer;
  appearance:none;
  touch-action:manipulation;
}
.r64-showcase .r64-feature-media>img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:none;
  margin:0;
  object-fit:contain;
  object-position:center;
}
.r64-feature-media .r64-play{
  position:absolute;
  z-index:2;
  left:50%;
  top:53%;
  display:grid;
  justify-items:center;
  gap:9px;
  width:max-content;
  max-width:calc(100% - 32px);
  padding:0;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.r64-feature-media .r64-play>svg{
  display:block;
  flex:none;
  width:68px;
  height:68px;
  margin:0;
  padding:22px;
  border:1px solid #ffffffda;
  border-radius:50%;
  background:#fff;
  color:#6246d6;
  box-shadow:0 4px 26px #0b163b38,0 0 0 7px #ffffff1f;
  transition:transform .2s,box-shadow .2s;
}
.r64-feature-media .r64-play>span{
  display:block;
  max-width:100%;
  padding:6px 12px;
  border:1px solid #ffffffc9;
  border-radius:18px;
  background:#ffffffed;
  color:#493776;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.01em;
  box-shadow:0 2px 10px #0b163b1a;
}
.r64-feature-media .r64-runtime{
  position:absolute;
  z-index:2;
  right:12px;
  bottom:12px;
  padding:4px 9px;
  border:1px solid #ffffff29;
  border-radius:6px;
  background:#101a35cc;
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.r64-showcase .r64-feature-caption{
  flex:1;
  min-width:0;
  padding:20px 23px 22px;
  background:linear-gradient(115deg,#fdfbff,#fff 62%);
}
.r64-feature-caption .r64-service-type{
  display:block;
  margin:0 0 7px;
  color:#74629d;
  font-size:11px;
  font-weight:650;
  line-height:1.55;
  letter-spacing:.035em;
}
.r64-feature-caption h2{
  margin:0;
  color:var(--r64-ink);
  font-size:clamp(20px,1.7vw,25px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.025em;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.r64-feature-caption p{
  max-width:55ch;
  margin:9px 0 0;
  color:var(--r64-muted);
  font-size:13px;
  line-height:1.7;
  overflow-wrap:break-word;
}
.r64-showcase .r64-feature-card:nth-child(2) .r64-feature-caption{background:linear-gradient(115deg,#f8fcfd,#fff 62%)}
.r64-showcase .r64-feature-card:nth-child(2) .r64-service-type{color:#377d8d}

/* Explanation films stay inside their original work group and retain its sizing. */
body button.r64-video-explainer{
  position:relative;
  isolation:isolate;
  cursor:pointer;
  touch-action:manipulation;
}
body .r64-video-explainer .r64-video-badge{
  position:absolute;
  z-index:2;
  left:10px;
  top:10px;
  right:auto;
  bottom:auto;
  display:block;
  width:auto;
  max-width:calc(100% - 20px);
  margin:0;
  padding:5px 9px;
  border:1px solid #ffffffbb;
  border-radius:6px;
  background:#f4effff2;
  color:#503779;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.02em;
  text-align:left;
  transform:none;
  pointer-events:none;
}
body .r64-video-explainer .r64-explainer-play{
  position:absolute;
  z-index:2;
  left:50%;
  top:53%;
  right:auto;
  bottom:auto;
  display:grid;
  justify-items:center;
  gap:7px;
  width:max-content;
  max-width:calc(100% - 28px);
  margin:0;
  padding:0;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
body .r64-video-explainer .r64-explainer-play>svg{
  display:block;
  width:50px;
  height:50px;
  margin:0;
  padding:16px;
  border:1px solid #ffffffd6;
  border-radius:50%;
  background:#fff;
  color:#6246d6;
  box-shadow:0 3px 18px #0b163b3d;
  transition:transform .2s;
}
body .r64-video-explainer .r64-explainer-play>span{
  display:block;
  max-width:100%;
  padding:5px 10px;
  border:1px solid #ffffff59;
  border-radius:16px;
  background:#1a1736df;
  color:#fff;
  font-size:11px;
  font-weight:650;
  line-height:1.45;
  text-align:center;
}
body .r64-video-explainer>small.duration{
  position:absolute;
  z-index:2;
  top:auto;
  left:auto;
  right:9px;
  bottom:9px;
  width:auto;
  margin:0;
  padding:4px 7px;
  border-radius:5px;
  background:#101a35d6;
  color:#fff;
  font-size:10px;
  line-height:1.4;
  font-variant-numeric:tabular-nums;
}
/* The central action already names playback; avoid a second caption over subtitles. */
body .r64-video-explainer>small:not(.duration){display:none}
.r64-showcase .r64-feature-media:focus-visible,
body button.r64-video-explainer:focus-visible{outline:3px solid #1eb9c8;outline-offset:-5px}
.r64-showcase .r64-browse:focus-visible{outline:3px solid #6246d6;outline-offset:3px}
@media(hover:hover){
  .r64-feature-media:hover .r64-play>svg{transform:scale(1.055);box-shadow:0 4px 26px #0b163b38,0 0 0 9px #ffffff2e}
  body .r64-video-explainer:hover .r64-explainer-play>svg{transform:scale(1.06)}
}
@media(max-width:1050px){
  .r64-showcase .r64-showcase-heading{grid-template-columns:minmax(0,1fr) auto;gap:13px 22px}
  .r64-showcase-heading>div{grid-column:1/-1}
  .r64-showcase .r64-showcase-intro{max-width:600px;margin:0}
  .r64-showcase .r64-feature-grid{gap:18px}
  .r64-showcase .r64-feature-caption{padding:18px}
}
@media(max-width:760px){
  body .r64-showcase{padding-top:28px;padding-bottom:28px;scroll-margin-top:84px}
  .r64-showcase .r64-showcase-heading{grid-template-columns:minmax(0,1fr);gap:11px;margin-bottom:20px}
  .r64-showcase-heading>div{grid-column:auto}
  .r64-showcase-heading .eyebrow{font-size:10px;margin-bottom:9px}
  .r64-showcase-heading h1{font-size:32px;line-height:1.2}
  .r64-showcase .r64-showcase-intro{font-size:13px;line-height:1.7}
  .r64-showcase .r64-browse{justify-self:start;margin-top:2px;padding:9px 14px;font-size:12px}
  .r64-showcase .r64-feature-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .r64-showcase .r64-feature-card{border-radius:14px}
  .r64-showcase .r64-feature-caption{padding:16px 17px 18px}
  .r64-feature-caption .r64-service-type{font-size:10px;margin-bottom:6px}
  .r64-feature-caption h2{font-size:21px;line-height:1.35}
  .r64-feature-caption p{font-size:12px;margin-top:7px;line-height:1.7}
  .r64-feature-media .r64-play{gap:7px;top:62%}
  .r64-feature-media .r64-play>svg{width:56px;height:56px;padding:18px;box-shadow:0 3px 20px #0b163b38,0 0 0 5px #ffffff21}
  .r64-feature-media .r64-play>span{font-size:11px;padding:5px 10px}
  .r64-feature-media .r64-runtime{font-size:10px;right:9px;bottom:9px;padding:3px 7px}
  body .r64-video-explainer .r64-video-badge{font-size:10px}
  body .r64-video-explainer .r64-explainer-play>svg{width:50px;height:50px;padding:16px}
}
@media(max-width:360px){
  body .r64-showcase{padding-top:24px}
  .r64-showcase-heading h1{font-size:28px}
  .r64-feature-caption h2{font-size:20px}
  .r64-feature-media .r64-play>svg{width:50px;height:50px;padding:16px}
  .r64-feature-media .r64-play>span{font-size:10px;padding:4px 9px}
}
@media(prefers-reduced-motion:reduce){
  .r64-showcase .r64-browse,
  .r64-feature-media .r64-play>svg,
  body .r64-video-explainer .r64-explainer-play>svg{transition:none}
  .r64-feature-media:hover .r64-play>svg,
  body .r64-video-explainer:hover .r64-explainer-play>svg{transform:none}
}
@media(forced-colors:active){
  .r64-feature-media .r64-play>svg,
  .r64-feature-media .r64-play>span,
  body .r64-video-explainer .r64-video-badge,
  body .r64-video-explainer .r64-explainer-play>svg,
  body .r64-video-explainer .r64-explainer-play>span{background:Canvas;color:CanvasText;border:1px solid CanvasText}
}