/* Brand IP is decorative: never a floating control, loading gate or chat agent. */
.meerkat-panel{--ip-ink:#10254b;--ip-blue:#2479ed;--ip-surface:#f1f6fd;display:grid;grid-template-columns:minmax(190px,300px) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px);padding:32px clamp(24px,5vw,64px);background:var(--ip-surface);border:1px solid #dce7f6;border-radius:28px;color:var(--ip-ink);margin-block:32px}
.meerkat-character{width:min(100%,300px);justify-self:center}
.meerkat-panel{--ip-stage-top:32px;--ip-stage-height:453px;background:linear-gradient(to bottom,var(--ip-tone-0,#dcdcde) var(--ip-stage-top),var(--ip-tone-1,#dedede) calc(var(--ip-stage-top) + var(--ip-stage-height)*.25),var(--ip-tone-2,#e4e4e6) calc(var(--ip-stage-top) + var(--ip-stage-height)*.5),var(--ip-tone-3,#eeedf1) calc(var(--ip-stage-top) + var(--ip-stage-height)*.75),var(--ip-tone-4,#f8f7fc) calc(var(--ip-stage-top) + var(--ip-stage-height)));border-color:#e0e0e6}
.meerkat-stage{position:relative;aspect-ratio:45/68;overflow:hidden;background:transparent;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in}
.meerkat-stage>img,.meerkat-stage>video{display:block;width:100%;height:100%;object-fit:contain}
.meerkat-stage{display:block;width:100%;padding:0;border:0;appearance:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.meerkat-stage:disabled{cursor:default;opacity:1}
.meerkat-character:has(.meerkat-stage:focus-visible){outline:3px solid #2479ed;outline-offset:5px;border-radius:20px}
.meerkat-stage>img,.meerkat-stage>video{pointer-events:none}
.meerkat-stage>[hidden],.meerkat-controls>[hidden]{display:none!important}
.meerkat-controls{display:flex;justify-content:center;align-items:center;min-height:48px;margin-top:4px}
.meerkat-controls>button{appearance:none;min-height:44px;padding:8px 16px;border:1px solid #b7c9e0;border-radius:999px;background:#fff;color:#163c76;font:inherit;font-size:13px;cursor:pointer}
.meerkat-controls>button:hover{background:#e8f1fe}
.meerkat-controls>button:focus-visible{outline:3px solid #2479ed;outline-offset:3px}
.meerkat-panel h2{margin:8px 0 16px;font-size:clamp(26px,3vw,38px);line-height:1.25;letter-spacing:-.03em}
.meerkat-panel p{max-width:48ch;line-height:1.8;color:#4a6281}
.meerkat-panel .mascot-kicker{font-size:12px;letter-spacing:.14em;color:#2465b9;font-weight:700}
.meerkat-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:24px}
.meerkat-panel .meerkat-actions>a:first-child{background:#163c76;color:white;border:1px solid #163c76;border-radius:12px;padding:12px 20px;text-decoration:none;font-weight:600}
.meerkat-panel .meerkat-actions>a:focus-visible{outline:3px solid #2479ed;outline-offset:5px}
.meerkat-panel-compact{grid-template-columns:180px minmax(0,1fr);padding-block:20px}
.meerkat-panel-compact .meerkat-character{max-width:180px}
@media(prefers-reduced-motion:reduce){
  .meerkat-stage>video,.meerkat-controls{display:none!important}
  .meerkat-stage>img{display:block!important}
}
@media(max-width:620px){.meerkat-panel,.meerkat-panel-compact{grid-template-columns:1fr;gap:8px;padding:24px;border-radius:20px}.meerkat-character,.meerkat-panel-compact .meerkat-character{max-width:160px}.meerkat-panel h2{font-size:26px}.meerkat-actions{gap:20px}}
