/* circlesco.tech · Circles Community case study only (brand: Circles blue #1264FF + ink #1a1d23; faces Poppins + Inter in the specimen only) */
.cs-comm{--p-bg:#1264FF;--p-fg:#fff;--p-acc:#1264FF;--n-bg:#0B0B0F;--n-fg:#fff}
.cs-comm .cs-stage .frame-bar{background:#fff}
.cs-comm .cs-logo-mat{background:#fff;color:var(--ink)}
.cs-comm .cs-logo-mat img{width:52%;max-width:440px}
.cs-comm .cs-spec-big,.cs-comm .kit-type .aa{font-family:"Poppins",var(--sans);font-weight:600;letter-spacing:-.03em}
.cs-comm .cs-spec-big{line-height:1.02}
.cs-comm .kit-type .face.f-pop{font-family:"Poppins",var(--sans);font-weight:600}
.cs-comm .kit-type .face.f-inter{font-family:"Inter",var(--sans);font-weight:400}
.cs-comm .cs-mark-row .mk.white{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cs-comm .cs-mark-row .mk.blue{background:#1264FF}
.cs-comm .cs-mark-row .mk.ink{background:#1a1d23}
.cs-comm .cs-mark-row .mk{width:auto;aspect-ratio:auto;padding:16px 22px;height:auto}
.cs-comm .cs-mark-row .mk img{width:clamp(80px,7vw,112px);max-width:none;height:auto;object-fit:contain}
.cs-comm .cs-mark-row .mk.blue img,.cs-comm .cs-mark-row .mk.ink img{filter:brightness(0) invert(1)}
.cs-comm .cs-next .link-arrow{color:#fff}
/* coded components: Community skin (Inter body, Poppins titles, Circles blue, fully round buttons) */
.cs-comm .ui{--ui-font:"Inter",var(--sans);--ui-acc:#1264FF;--ui-ink:#1a1d23;--ui-mute:#6b7280;--ui-line:rgba(26,29,35,.12);--ui-g:#F3F4F6;--ui-r:999px}
.cs-comm .ui h5,.cs-comm .ui .t,.cs-comm .ui-card h5{font-family:"Poppins",var(--sans)}
.cs-comm .ui-btn{border-radius:999px;font-weight:600;height:3.2em;padding:0 1.6em}
.cs-comm .ui-btn.outline{box-shadow:inset 0 0 0 2px var(--ui-acc)}
.cs-comm .ui-btn.white{background:#fff;color:var(--ui-acc)}
.cs-comm .ui-pill.caps{background:#EEF2FF;color:var(--ui-acc);border-radius:.4em;font-size:.68em;letter-spacing:.08em}
.cs-comm .ui-in{border-radius:.5em}
.cs-comm .ui-card{border-radius:.75em;padding:0;overflow:hidden}
.cs-comm .ui-card .ph{aspect-ratio:1;background:#2b3a4a center/cover}
.cs-comm .ui-card .bd{padding:1em 1.1em 1.1em}
.cs-comm .ui.dk{--ui-ink:#fff;--ui-line:rgba(255,255,255,.14);color:#fff}
.cs-comm .ui.blue{--ui-ink:#fff;color:#fff}
.cs-comm .ui-announce{display:flex;gap:1.6em;width:100%;overflow:hidden;background:#1264FF;color:#fff;font-size:.8em;font-weight:600;padding:.6em 1em;border-radius:.4em;white-space:nowrap}
.cs-comm .ui-announce b{background:#fff;color:#1264FF;border-radius:999px;padding:.1em .7em;font-weight:700;margin-left:.6em}
.cs-comm .cs-mark-row{gap:12px;flex-wrap:nowrap}
.cs-comm .cs-mark-row .mk{padding:14px 18px}
.cs-comm .cs-mark-row .mk img{width:clamp(72px,6vw,96px)}
.cs-comm .cs-mark-row{flex-wrap:wrap}
.cs-comm .cs-mark-row .mk{width:auto;height:auto;flex:0 0 auto;padding:16px 20px;aspect-ratio:auto}
.cs-comm .cs-mark-row .mk img{width:clamp(84px,6.4vw,104px);height:auto;object-fit:contain}
.cs-comm .cs-mark-row>.mono{flex:1 0 100%}