/* Opt-in components. The first application is the Meus Leads company grid. */
:root .ds-scope .ds-segment{
 --segment-accent:var(--accent-blue);
 --segment-ink:var(--accent-blue-ink);
 --segment-soft:var(--accent-blue-soft);
 --segment-avatar-end:var(--accent-blue-avatar);
}
/* Saturated avatars retain white lettering in both light and dark themes. */
:root .ds-scope .ds-segment-health{--segment-avatar-end:var(--accent-coral-avatar)}
:root .ds-scope .ds-segment-food,:root .ds-scope .ds-segment-restaurants{--segment-avatar-end:var(--accent-orange-avatar)}
:root .ds-scope .ds-segment-publishers,:root .ds-scope .ds-segment-agencies{--segment-avatar-end:var(--accent-violet-avatar)}
:root .ds-scope .ds-segment-industry,:root .ds-scope .ds-segment-associations{--segment-avatar-end:var(--accent-amber-avatar)}
:root .ds-scope .ds-segment-retail,:root .ds-scope .ds-segment-hospitality{--segment-avatar-end:var(--accent-turquoise-avatar)}
:root .ds-scope .ds-segment-beauty,:root .ds-scope .ds-segment-events{--segment-avatar-end:var(--accent-pink-avatar)}
:root .ds-scope .ds-segment-construction{--segment-avatar-end:var(--accent-terracotta-avatar)}
:root .ds-scope .ds-segment-automotive{--segment-avatar-end:var(--accent-graphite-avatar)}
:root .ds-scope .ds-segment-technology{--segment-avatar-end:var(--accent-cyan-avatar)}
:root .ds-scope .ds-segment-corporate-services{--segment-avatar-end:var(--accent-petrol-avatar)}
:root .ds-scope .ds-segment-health{--segment-accent:var(--accent-coral);--segment-ink:var(--accent-coral-ink);--segment-soft:var(--accent-coral-soft)}
:root .ds-scope .ds-segment-food,:root .ds-scope .ds-segment-restaurants{--segment-accent:var(--accent-orange);--segment-ink:var(--accent-orange-ink);--segment-soft:var(--accent-orange-soft)}
:root .ds-scope .ds-segment-publishers,:root .ds-scope .ds-segment-agencies{--segment-accent:var(--accent-violet);--segment-ink:var(--accent-violet-ink);--segment-soft:var(--accent-violet-soft)}
:root .ds-scope .ds-segment-industry,:root .ds-scope .ds-segment-associations{--segment-accent:var(--accent-amber);--segment-ink:var(--accent-amber-ink);--segment-soft:var(--accent-amber-soft)}
:root .ds-scope .ds-segment-retail,:root .ds-scope .ds-segment-hospitality{--segment-accent:var(--accent-turquoise);--segment-ink:var(--accent-turquoise-ink);--segment-soft:var(--accent-turquoise-soft)}
:root .ds-scope .ds-segment-beauty,:root .ds-scope .ds-segment-events{--segment-accent:var(--accent-pink);--segment-ink:var(--accent-pink-ink);--segment-soft:var(--accent-pink-soft)}
:root .ds-scope .ds-segment-construction{--segment-accent:var(--accent-terracotta);--segment-ink:var(--accent-terracotta-ink);--segment-soft:var(--accent-terracotta-soft)}
:root .ds-scope .ds-segment-automotive{--segment-accent:var(--accent-graphite);--segment-ink:var(--accent-graphite-ink);--segment-soft:var(--accent-graphite-soft)}
:root .ds-scope .ds-segment-technology{--segment-accent:var(--accent-cyan);--segment-ink:var(--accent-cyan-ink);--segment-soft:var(--accent-cyan-soft)}
:root .ds-scope .ds-segment-corporate-services{--segment-accent:var(--accent-petrol);--segment-ink:var(--accent-petrol-ink);--segment-soft:var(--accent-petrol-soft)}
:root .ds-scope .ds-segment-badge{
 color:var(--segment-ink);background:var(--segment-soft);
 border:1px solid color-mix(in srgb,var(--segment-accent) 28%,var(--segment-soft));
 align-self:flex-start;max-width:100%;font-weight:var(--weight-label);
}
:root .ds-scope .ds-segment-badge>.ds-icon{color:var(--segment-ink)}
:root .ds-scope .ds-segment-badge>span{min-width:0;overflow-wrap:anywhere}
:root .ds-app .ds-content-card{
 --card-accent-layer:inset 0 0 0 transparent;
 background:linear-gradient(145deg,var(--bg-content-card) 12%,color-mix(in srgb,var(--segment-accent) 10%,var(--bg-content-card-end)));
 border:var(--border-width) solid color-mix(in srgb,var(--segment-accent) 24%,var(--border-content-card));
 box-shadow:var(--card-accent-layer),var(--shadow-content-card);
 transition:transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease,border-color var(--motion-fast) ease;
}
:root .ds-app .ds-content-card.ds-accent-stripe{--card-accent-layer:inset var(--accent-stripe-width) 0 0 var(--segment-accent)}
@media(hover:hover){
 :root .ds-app .ds-content-card.ds-clickable-card:not(:disabled):hover{
  transform:translateY(-2px);border-color:var(--border-active);
  box-shadow:var(--card-accent-layer),var(--shadow-content-card-hover);
 }
}
:root .ds-app .ds-content-card.ds-clickable-card:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
:root .ds-app .ds-company-avatar{
 position:relative;display:grid;place-items:center;overflow:hidden;
 width:46px;height:46px;flex:0 0 46px;font-size:15px;
 background:linear-gradient(135deg,color-mix(in srgb,var(--segment-accent) 60%,var(--segment-avatar-end)),var(--segment-avatar-end));color:var(--accent-avatar-text);
 border:1px solid color-mix(in srgb,var(--segment-accent) 60%,var(--segment-avatar-end));
 border-radius:var(--radius-small);box-shadow:var(--shadow-control);
}
:root .ds-app .ds-company-avatar>img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;border-radius:6px;background:var(--bg-info)}
:root .ds-app .ds-company-avatar>img[hidden]{display:none}
:root .ds-app .ds-company-avatar.ds-logo-loaded{background:var(--bg-info);border-color:color-mix(in srgb,var(--segment-accent) 28%,var(--segment-soft))}
:root .ds-app .ds-company-avatar.ds-logo-loaded>.ds-avatar-initials{visibility:hidden}
:root .ds-app .registry-accent-pilot .registry-company{gap:16px;padding-left:24px}
/* Keep the stripe at rest despite the global card shadow; soften the tint by 15%. */
:root .ds-app .registry-accent-pilot .registry-company.ds-content-card{
 --registry-card-fill:linear-gradient(135deg,color-mix(in srgb,var(--segment-accent) 11.9%,var(--bg-content-card)),color-mix(in srgb,var(--segment-accent) 22.1%,var(--bg-content-card-end)));
 box-shadow:var(--card-accent-layer),var(--shadow-content-card);
}
:root .ds-app .registry-accent-pilot .registry-company.ds-content-card,
:root .ds-app .registry-accent-pilot .registry-company.ds-content-card:is(:hover,:focus,:focus-visible,:active){
 background:var(--registry-card-fill);
 border-color:color-mix(in srgb,var(--segment-accent) 48%,var(--border-content-card));
}
:root .ds-app .registry-accent-pilot .registry-company .person{align-items:flex-start;gap:12px}
:root .ds-app .registry-accent-pilot .registry-company .person>span:last-child{gap:7px;flex:1}
:root .ds-app .registry-accent-pilot .registry-count{display:grid;gap:8px;margin-top:2px}
:root .ds-app .registry-accent-pilot .registry-count>span{display:flex;align-items:center;gap:8px}
:root .ds-app .registry-accent-pilot .registry-count .ds-icon{width:16px;height:16px;flex-basis:16px;color:var(--color-info)}
:root .ds-app .registry-accent-pilot .registry-open{border-top:1px solid color-mix(in srgb,var(--border-soft) 60%,transparent);padding-top:13px;color:var(--color-info)}
:root .ds-app .registry-accent-pilot .registry-open .ds-icon{width:16px;height:16px;flex-basis:16px}
@media(prefers-reduced-motion:reduce){
 :root .ds-app .ds-content-card{transition:none}
 :root .ds-app .ds-content-card.ds-clickable-card:not(:disabled):hover{transform:none}
}