/* =============================================================================
   advertisers-split-additions.css
   New styles for the Brands / Agencies split on advertisers.html.
   Paste this block into style.css (recommended) or keep it as a linked file.
   Namespaced (aud-, ask-, proof-, trust-, chip, cap-, leak-) so nothing
   collides with existing rules. Uses your existing brand tokens.
   ========================================================================== */

/* Hero brand line ---------------------------------------------------------- */
.hero-brandline{margin-top:16px;font-size:13.5px;color:var(--indigo-pale);letter-spacing:.02em}
.hero-brandline .brand-dot{color:var(--amber)}

/* Audience toggle ---------------------------------------------------------- */
.aud-toggle-center{display:flex;justify-content:center;margin:0 0 40px}
.aud-toggle{display:inline-flex;background:#FFFFFF;border:1px solid var(--border);
  border-radius:40px;padding:5px;gap:4px}
.aud-toggle button{border:none;background:transparent;font-family:var(--font-body);
  font-weight:700;font-size:15px;color:var(--muted);padding:11px 24px;border-radius:40px;
  cursor:pointer;transition:background .15s ease,color .15s ease;display:flex;align-items:center;gap:8px}
.aud-toggle button .aud-tag{font-weight:600;font-size:12px;color:var(--muted-light)}
.aud-toggle button.active{background:var(--indigo);color:#FFFFFF}
.aud-toggle button.active .aud-tag{color:var(--indigo-pale)}

/* Panels ------------------------------------------------------------------- */
.aud-panel{display:none;animation:audFade .3s ease}
.aud-panel.active{display:block}
@keyframes audFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.aud-panel{animation:none}}
.aud-panel .section-head{margin-bottom:32px}
.aud-pill{display:inline-block;background:var(--indigo-light);color:var(--indigo);font-weight:700;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;
  border-radius:30px;margin-bottom:14px}

/* Infographic labels + budget bar ----------------------------------------- */
.mini-label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.leak-chart{max-width:600px}

/* Capacity strip (agencies) ----------------------------------------------- */
.capacity{margin:44px 0 0;max-width:620px}
.cap-row{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.cap-lbl{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);width:110px;flex:0 0 110px}
.tiles{display:flex;gap:7px;flex-wrap:wrap}
.tile{width:30px;height:30px;border-radius:6px;background:var(--indigo);
  display:flex;align-items:center;justify-content:center}
.tile.add{background:var(--amber)}
.tile svg{width:17px;height:17px}
.cap-add{font-family:var(--font-mark);font-weight:700;color:var(--amber);font-size:15px}
.cap-note{font-style:italic;font-size:13.5px;color:var(--muted);margin:12px 0 0}

/* Ask-anything row --------------------------------------------------------- */
.ask{background:var(--indigo-light);border:1px solid var(--indigo-pale);border-radius:10px;
  padding:26px 28px;margin:44px 0 0}
.ask-title{font-weight:700;font-size:16px;color:var(--ink);margin-bottom:16px}
.ask-title span{color:var(--muted);font-weight:400}
.ask-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ask-cell{background:#FFFFFF;border-radius:8px;padding:14px 16px}
.ask-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.ask-q{font-size:14.5px;font-style:italic;color:var(--text);margin-top:6px}

/* Proof tiles (case studies) ---------------------------------------------- */
.proof-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:44px 0 16px}
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:760px){.proof{grid-template-columns:1fr 1fr}}
.proof-tile{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:24px 18px;text-align:center}
.proof-tile strong{display:block;font-family:var(--font-mark);font-size:30px;color:var(--amber);line-height:1}
.proof-tile span{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.proof-tile b{color:var(--indigo-deep)}

/* Shared trust strip (centered) ------------------------------------------- */
.trust{margin:52px 0 0;padding-top:40px;border-top:1px solid var(--border)}
.trust-centered{text-align:center}
.trust-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 22px}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:26px}
.logo-chip{display:inline-flex;align-items:center;gap:8px;background:#FFFFFF;
  border:1px solid var(--border);border-radius:30px;padding:7px 16px 7px 7px;
  font-size:14px;font-weight:700;color:var(--indigo-deep);
  opacity:0;transform:translateY(8px);animation:logoUp .5s ease forwards}
.logo-chip .mono{display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 5px;border-radius:6px;background:var(--indigo-light);
  color:var(--indigo);font-size:11px;font-weight:700;font-family:var(--font-mark)}
.logo-chip:hover{border-color:var(--indigo-pale)}
@keyframes logoUp{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.logo-chip{opacity:1;transform:none;animation:none}}
.trust-centered .integrations{max-width:66ch;margin:0 auto}
.backed-line{font-size:14px;color:var(--muted);margin:16px 0 0}
.trademark{font-size:12px;color:var(--muted-light);max-width:72ch;margin:20px auto 0;line-height:1.55}
.tm{color:var(--amber);font-weight:700}

/* Centered closing line ---------------------------------------------------- */
.tie-in.tie-in-center{max-width:none;justify-content:center;text-align:center;
  margin-left:auto;margin-right:auto}
.tie-in.tie-in-center::before{display:none}

/* Responsive --------------------------------------------------------------- */
@media (max-width:760px){
  .ask-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .ask-grid{grid-template-columns:1fr}
  .aud-toggle button{padding:10px 16px;font-size:14px}
  .cap-lbl{width:100%;flex:0 0 100%}
}

/* Left-aligned trust strip (house alignment) ------------------------------- */
.trust .logos { justify-content: flex-start; }
.trust .integrations { margin-left: 0; }
.trust .trademark { margin-left: 0; margin-right: 0; }