/* Demo harness chrome, deliberately not brand-coloured, so it reads as the
   harness rather than as part of the client's site. */

.demopod{position:fixed;left:18px;bottom:18px;z-index:1400;
  font-family:'Sora','Inter',system-ui,sans-serif}
.demopod__toggle{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px;
  border-radius:999px;border:1px solid rgba(84,238,220,.34);background:rgba(4,0,4,.92);
  backdrop-filter:blur(10px);color:#EFF3F3;font-size:.78rem;font-weight:500;
  letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.34);
  transition:border-color 180ms ease,transform 180ms ease}
.demopod__toggle:hover{border-color:#22CDBE;transform:translateY(-1px)}
.demopod__dot{width:7px;height:7px;border-radius:999px;background:#22CDBE;flex:none;
  animation:demopod-pulse 2.4s ease-in-out infinite}
.demopod__chev{font-size:.68rem;opacity:.6;transition:transform 200ms ease}
.demopod[data-open] .demopod__chev{transform:rotate(180deg)}
@keyframes demopod-pulse{0%,100%{opacity:1}50%{opacity:.28}}

.demopod__panel{position:absolute;left:0;bottom:46px;width:230px;padding:6px;
  border-radius:14px;border:1px solid rgba(84,238,220,.22);background:rgba(4,0,4,.97);
  backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:2px}
.demopod__group{display:flex;flex-direction:column;padding:6px 4px}
.demopod__group + .demopod__group{border-top:1px solid rgba(255,255,255,.08)}
.demopod__group--row{flex-direction:row;gap:4px}
.demopod__group--row a{flex:1;text-align:center;padding:8px 4px}
.demopod__head{font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:#66787C;padding:2px 10px 7px}
.demopod__panel a{display:block;padding:8px 10px;border-radius:8px;font-size:.8rem;
  font-weight:600;color:#C3D2D0;text-decoration:none;
  transition:background 140ms ease,color 140ms ease}
.demopod__panel a:hover{background:rgba(34,205,190,.14);color:#EFF3F3}
.demopod__panel a.on{color:#22CDBE}

/* The WhatsApp float sits bottom-right; this sits bottom-left. On a phone the
   panel would otherwise run off the edge. */
@media(max-width:520px){.demopod__panel{width:min(74vw,230px)}}
@media print{.demopod{display:none!important}}

/* ── vendor credit ───────────────────────────────────────────────────────── */
.tv-credit{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:30px 16px 26px;text-align:center;font-family:'Sora','Inter',system-ui,sans-serif}
.tv-credit img{display:block;height:auto;transition:opacity .18s}
.tv-credit-main{opacity:.94}
.tv-credit-main:hover{opacity:1}
.tv-credit-line{margin:0;font-size:12.5px;line-height:1.5;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.tv-credit-by{display:inline-flex;align-items:center;gap:11px;margin-top:5px;
  padding-top:15px;border-top:1px solid;min-width:230px;justify-content:center}
.tv-credit-by span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.tv-credit-by img{width:118px;opacity:.92}
.tv-credit-by a:hover img{opacity:1}

.tv-credit.on-dark .tv-credit-line{color:#9FB0B3}
.tv-credit.on-dark .tv-credit-by{border-top-color:rgba(255,255,255,.14)}
.tv-credit.on-dark .tv-credit-by span{color:#8FA3A7}
.tv-credit.on-light .tv-credit-line{color:#5E6B6F}
.tv-credit.on-light .tv-credit-by{border-top-color:rgba(28,35,38,.14)}
.tv-credit.on-light .tv-credit-by span{color:#5E6B6F}

/* One meta line under the credit, in both stylesheet families. */
.foot-meta{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;align-items:center;
  font-size:12px;padding:4px 16px 6px;text-align:center;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.foot-meta .sig{font-style:italic}
body.microsite .foot-meta{color:#5E6B6F}
body.microsite[data-mode="dark"] .foot-meta{color:#8FA3A7}
body.suite .foot-meta{color:var(--muted)}