/* A title identifies its viewers within a wider audience. Illustrative, not measured. */
[data-solution-viz=media]{container-type:inline-size}
.solution-card[data-solution-card=media] .solution-card-viz,.solution-hero-visual[data-solution-viz=media]{background:radial-gradient(ellipse at 76% 46%,#3959525c,transparent 65%),linear-gradient(120deg,#1b2536,#172c35);border-color:#4c6373}
.sa-preview{display:grid;grid-template-columns:1fr 48px 1.65fr;align-items:center;gap:15px;max-width:490px;margin:25px auto 0;position:relative}
.sa-preview-title,.sa-preview-audience{min-width:0;text-align:center}
.sa-preview-label{display:block;font:8px/1.6 var(--mono);letter-spacing:1px;color:#b7c9cd;margin-bottom:17px}
.sa-preview-poster{position:relative;width:116px;height:174px;margin:0 auto;border:1px solid #c6c4ac88;border-radius:6px;box-shadow:0 16px 30px #05101c66;isolation:isolate}
.sa-preview-poster:before{content:'';position:absolute;inset:5px -5px -5px 5px;border:1px solid #808f8a77;background:#596f6944;border-radius:6px;z-index:-1}
.sa-preview-poster>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px}
.sa-preview-poster>span{position:absolute;bottom:0;left:0;right:0;padding:8px 4px;border-radius:0 0 5px 5px;background:#102c2bf0;border-top:1px solid #839c7f88;color:#d6e6c5;font:6px/1.5 var(--mono);letter-spacing:.6px}
.sa-preview-title-name{display:block;font-size:14px;font-weight:500;line-height:1.5;color:#e2e8e1;margin-top:16px}
.sa-preview-link{align-self:stretch;display:flex;align-items:center;padding-top:3px;padding-bottom:2px}
.sa-preview-link svg{width:100%;height:160px;overflow:visible}
.sa-preview-link path{stroke:#6e8f85;stroke-width:1.1;vector-effect:non-scaling-stroke}
.sa-preview-link .sa-preview-trace{stroke:#d2e6b2;stroke-width:1.7;stroke-dasharray:240;stroke-dashoffset:0}
.sa-preview-audience .sa-preview-label{color:#cee3d1}
.sa-preview-crowd{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;align-items:center}
.sa-preview-viewer{position:relative;display:block;aspect-ratio:32/40;padding:3px;border:1px solid transparent;border-radius:5px;color:#6e818d;background:#253b4533;transition:color .4s,background-color .4s,border-color .4s}
.sa-preview-viewer>svg{display:block;width:100%;height:100%;fill:currentColor;opacity:.65}
.sa-preview-viewer.is-matched{color:#dbedc8;border-color:#bfd5a5;background:#89aa8e2b;box-shadow:inset 0 0 14px #bddbb011}
.sa-preview-viewer.is-matched>svg{opacity:1}
.sa-preview-viewer>i{display:none;position:absolute;bottom:2px;right:2px;width:4px;height:4px;border-radius:50%;background:#d7eabf}
.sa-preview-viewer.is-matched>i{display:block}
.sa-preview-match-label{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:17px;min-height:20px}
.sa-preview-match-label>i{display:block;flex-shrink:0;width:8px;height:8px;border:1px solid #d4e8bb;border-radius:2px;background:#96b47a55}
.sa-preview-match-label strong{font-size:13px;line-height:1.5;font-weight:500;color:#dce9cf}
.sa-preview-controls{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;padding-top:20px;border-top:1px solid #526c6755}
.sa-preview-controls>span{font:7px/1.7 var(--mono);letter-spacing:.4px;color:#b9cccc;margin-right:9px}
.sa-preview-controls button{border:1px solid #77948888;background:#1b323d;color:#c9ddd5;border-radius:4px;padding:10px 15px;min-height:40px;cursor:pointer;font:12px/1.5 var(--sans);transition:background .2s,color .2s}
.sa-preview-controls button[aria-pressed=true]{background:#d5e6c3;color:#244236;border-color:#d5e6c3}
.sa-preview-controls button:hover{border-color:#d5e6c3}
.sa-preview-controls button:focus-visible{outline:2px solid #e8f3d0;outline-offset:4px}
[data-solution-viz=media] .solution-viz-caption>span{color:#a8c6c6}
[data-solution-viz=media] .solution-viz-caption>strong{color:#e5eddf}
.solution-hero-visual[data-solution-viz=media] .solution-viz-caption{position:static;margin-top:22px;padding-top:0;gap:7px}
.solution-hero-visual .sa-preview{margin-top:29px}
.solution-hero-visual .sa-preview-label{font-size:9px;margin-bottom:19px}
.solution-hero-visual .sa-preview-title-name{font-size:15px}
.solution-hero-visual .sa-preview-crowd{gap:10px}
.solution-hero-visual .sa-preview-match-label strong{font-size:14px}
/* Reserve a separate caption area in the fixed-height overview cards. */
.solution-card-viz[data-solution-viz=media]{display:flex;flex-direction:column}
.solution-card-viz[data-solution-viz=media] .viz-tag{margin-bottom:0}
.solution-card-viz[data-solution-viz=media] .solution-viz-caption{position:static;margin-top:auto;gap:5px}
.solution-card-viz .sa-preview{width:100%;max-width:340px;grid-template-columns:1fr 32px 1.7fr;gap:10px;margin:12px auto 8px}
.solution-card-viz .sa-preview-label{font-size:6px;letter-spacing:.55px;margin-bottom:10px}
.solution-card-viz .sa-preview-poster{width:65px;height:97px;border-radius:4px}
.solution-card-viz .sa-preview-poster:before{inset:3px -3px -3px 3px;border-radius:4px}
.solution-card-viz .sa-preview-poster>img{border-radius:3px}
.solution-card-viz .sa-preview-poster>span{font-size:4px;letter-spacing:.2px;padding:5px 2px;border-radius:0 0 3px 3px}
.solution-card-viz .sa-preview-title-name{font-size:10px;margin-top:10px}
.solution-card-viz .sa-preview-link svg{height:102px}
.solution-card-viz .sa-preview-crowd{grid-template-rows:repeat(3,27px);gap:5px}
.solution-card-viz .sa-preview-viewer{width:22px;max-width:100%;height:27px;aspect-ratio:auto;justify-self:center;padding:2px;border-radius:3px}
.solution-card-viz .sa-preview-viewer:nth-child(n+19){display:none}
.solution-card-viz .sa-preview-viewer>i{width:2px;height:2px;bottom:1px;right:1px}
.solution-card-viz .sa-preview-match-label{gap:5px;margin-top:10px;min-height:15px}
.solution-card-viz .sa-preview-match-label strong{font-size:9px}
.solution-card-viz .sa-preview-match-label>i{width:5px;height:5px;border-radius:1px}
.compact [data-solution-viz=media] .viz-tag{font-size:7px;line-height:1.5}
.compact .solution-card-viz .sa-preview{grid-template-columns:1fr 23px 1.65fr;gap:8px;max-width:265px;margin:8px auto 4px}
.compact .solution-card-viz .sa-preview-label{font-size:5px;letter-spacing:.3px;margin-bottom:8px}
.compact .solution-card-viz .sa-preview-poster{width:48px;height:72px}
.compact .solution-card-viz .sa-preview-poster>span{display:none}
.compact .solution-card-viz .sa-preview-title-name{font-size:8px;margin-top:9px}
.compact .solution-card-viz .sa-preview-link svg{height:77px}
.compact .solution-card-viz .sa-preview-crowd{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,22px);gap:4px}
.compact .solution-card-viz .sa-preview-viewer{width:18px;height:22px;padding:1px;border-radius:2px}
.compact .solution-card-viz .sa-preview-viewer:nth-child(n+13){display:none}
.compact .solution-card-viz .sa-preview-match-label{margin-top:8px;min-height:12px;gap:4px}
.compact .solution-card-viz .sa-preview-match-label strong{font-size:7px}
.compact .solution-card-viz .sa-preview-match-label>i{width:4px;height:4px}
.sa-preview.preview-in-view .sa-preview-trace{animation:sa-viewing-trace 1.8s ease-out both}
.sa-preview.preview-in-view .sa-preview-viewer.is-matched{animation:sa-viewer-found 1.7s ease-out .3s both}
@keyframes sa-viewing-trace{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
@keyframes sa-viewer-found{0%,100%{box-shadow:inset 0 0 14px #bddbb011}50%{box-shadow:0 0 12px #d0e8b933,inset 0 0 14px #bddbb022}}
@container(max-width:400px){
  .solution-hero-visual .sa-preview{grid-template-columns:1fr 32px 1.65fr;gap:13px}
  .solution-hero-visual .sa-preview-poster{width:91px;height:137px}
  .solution-hero-visual .sa-preview-label{font-size:7px;letter-spacing:.6px;margin-bottom:15px}
  .solution-hero-visual .sa-preview-link svg{height:130px}
  .solution-hero-visual .sa-preview-title-name{font-size:13px;margin-top:13px}
  .solution-hero-visual .sa-preview-crowd{gap:6px}
  .solution-hero-visual .sa-preview-viewer{padding:2px;border-radius:4px}
  .solution-hero-visual .sa-preview-match-label{margin-top:14px;gap:6px}
  .solution-hero-visual .sa-preview-match-label strong{font-size:11px}
  .solution-hero-visual .sa-preview-match-label>i{width:6px;height:6px}
  .sa-preview-controls{margin-top:22px;padding-top:18px;gap:7px}
  .sa-preview-controls>span{font-size:6px;letter-spacing:.2px;margin-right:3px}
  .sa-preview-controls button{padding:9px 12px;font-size:11px}
}
@container(max-width:310px){
  .solution-hero-visual .sa-preview{grid-template-columns:1fr 25px 1.7fr;gap:10px;margin-top:25px}
  .solution-hero-visual .sa-preview-poster{width:77px;height:115px}
  .solution-hero-visual .sa-preview-poster>span{font-size:5px;padding:6px 2px;letter-spacing:.2px}
  .solution-hero-visual .sa-preview-label{font-size:6px;letter-spacing:.4px;margin-bottom:13px}
  .solution-hero-visual .sa-preview-link svg{height:108px}
  .solution-hero-visual .sa-preview-crowd{gap:5px}
  .solution-hero-visual .sa-preview-viewer{padding:1px;border-radius:3px}
  .solution-hero-visual .sa-preview-title-name{font-size:11px;margin-top:12px}
  .solution-hero-visual .sa-preview-match-label strong{font-size:9px}
  .solution-hero-visual .sa-preview-match-label{gap:5px;margin-top:12px;min-height:16px}
  .solution-hero-visual .sa-preview-match-label>i{width:5px;height:5px}
  .solution-card-viz .sa-preview{grid-template-columns:1fr 23px 1.7fr;gap:9px}
  .solution-card-viz .sa-preview-poster{width:61px;height:91px}
  .solution-card-viz .sa-preview-crowd{gap:4px}
  .solution-card-viz .sa-preview-viewer{padding:1px}
  .sa-preview-controls>span{font-size:6px;max-width:53px;text-align:left;line-height:1.8}
  .compact .solution-card-viz .sa-preview-poster{width:47px;height:70px}
}
@container(max-width:250px){
  .solution-hero-visual .sa-preview{grid-template-columns:1fr 20px 1.65fr;gap:8px}
  .solution-hero-visual .sa-preview-poster{width:63px;height:94px}
  .solution-hero-visual .sa-preview-poster>span{display:none}
  .solution-hero-visual .sa-preview-link svg{height:90px}
  .solution-hero-visual .sa-preview-crowd{gap:4px}
  .solution-hero-visual .sa-preview-viewer>i{width:2px;height:2px;bottom:1px;right:1px}
  .solution-hero-visual .sa-preview-match-label strong{font-size:8px}
  .solution-hero-visual .sa-preview-match-label{gap:4px;margin-top:11px}
  .solution-hero-visual .sa-preview-title-name{font-size:10px;margin-top:11px}
  .solution-card-viz .sa-preview-poster{width:52px;height:78px}
  .solution-card-viz .sa-preview-title-name{font-size:9px}
  .solution-card-viz .sa-preview-match-label strong{font-size:8px}
  .compact .solution-card-viz .sa-preview-poster{width:43px;height:65px}
  .compact .solution-card-viz .sa-preview-match-label strong{font-size:7px}
}
@media(prefers-reduced-motion:reduce){.sa-preview *,.sa-preview-controls *{animation:none!important;transition:none!important}}