.community-circles,
.circle-overview{
  --circles-heading-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --circles-body-font:"Avenir Next","Nunito Sans","Segoe UI",sans-serif;
  --circles-body-letter-spacing:.01em;
  font-family:var(--circles-body-font);
  letter-spacing:var(--circles-body-letter-spacing);
}

.community-circles__hero-title{
  font-family:var(--circles-heading-font);
  font-size:clamp(66px,7vw,98px);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.045em;
}

.community-circles__hero-intro{
  font-family:var(--circles-body-font);
  font-size:18px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:var(--circles-body-letter-spacing);
}

.community-circles__hero-surface{
  background:
    radial-gradient(circle at 12% 20%,rgba(222,242,255,.92),transparent 36%),
    radial-gradient(circle at 86% 16%,rgba(231,219,255,.72),transparent 32%),
    linear-gradient(136deg,#fbfdff 0%,#f5faff 48%,#edf4ff 100%);
}

.community-circles__eyebrow{
  font-family:var(--circles-heading-font);
  font-weight:850;
  line-height:1;
  letter-spacing:.19em;
}

.community-circles__hero h1,
.community-circles__hero-total strong,
.community-circles__hero-public strong,
.community-circles__stat strong,
.community-circles__utility-card header h2,
.community-circles__explore h2,
.community-circles__empty strong{
  font-family:var(--circles-heading-font);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.045em;
}

.community-circles__hero h1{ font-size:clamp(66px,7vw,98px); }
.community-circles__hero-total strong{ font-size:50px; }
.community-circles__hero-public strong{ font-size:36px; }
.community-circles__stat strong{ font-size:40px; }
.community-circles__utility-card header h2,
.community-circles__explore h2{ font-size:26px; }
.community-circles__empty strong{ font-size:25px; }

.community-circles__intro,
.community-circles__utility-card header p,
.community-circles__explore-header p,
.community-circles__activity-copy > span,
.community-circles__finder-action small,
.community-circles__stat span,
.community-circles__search input[type="text"]{
  font-family:var(--circles-body-font);
  font-weight:400;
  line-height:1.55;
  letter-spacing:var(--circles-body-letter-spacing);
}

.community-circles__intro{ font-size:18px; }
.community-circles__promises li{
  font-family:var(--circles-body-font);
  font-weight:500;
  letter-spacing:var(--circles-body-letter-spacing);
}

.community-circles__stat b,
.community-circles__activity-copy > strong,
.community-circles__finder-action strong,
.community-circles__circle-content > strong{
  font-family:var(--circles-heading-font);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.025em;
}

.community-circles__hero-total span,
.community-circles__hero-public div > span{
  font-family:var(--circles-heading-font);
  font-weight:800;
  letter-spacing:.15em;
}

.community-circles__button,
.community-circles__search input[type="submit"],
.community-circles__scope a,
.community-circles__circle-action button,
.community-circles__circle-action > span,
.community-circles__load-more{
  font-family:var(--circles-heading-font);
  font-size:14px;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
}

.community-circles__circle-action button,
.community-circles__circle-action > span{ font-size:11px; }

.community-circles__circle-image{ align-items:center; }
.community-circles__circle-image-target{ position:absolute; z-index:1; inset:0; border-radius:50%; }
.community-circles__circle-content{ position:absolute; z-index:3; display:grid; inset:0; grid-template-rows:1fr auto 1fr; justify-items:center; pointer-events:none; }
.community-circles .community-circles__circle-content > strong{ display:-webkit-box; grid-row:2; max-width:160px; overflow:hidden; color:#fff; font-family:var(--circles-heading-font); font-size:15px; font-weight:700; line-height:1.14; letter-spacing:-.025em; text-align:center; text-shadow:0 2px 5px rgba(5,13,36,.92),0 6px 18px rgba(5,13,36,.72); -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.community-circles__circle-action{ position:relative; z-index:5; display:block; left:auto; right:auto; top:auto; bottom:auto; width:max-content; max-width:calc(100% - 28px); margin-top:12px; grid-row:3; align-self:start; justify-self:center; opacity:1; transform:none; pointer-events:auto; }
.community-circles .community-circles__circle-card:hover .community-circles__circle-action,
.community-circles .community-circles__circle-card:focus-within .community-circles__circle-action{ transform:none; }
.community-circles__circle-action form{ position:relative; display:flex; margin:0; justify-content:center; isolation:isolate; }
.community-circles__circle-action form::before,
.community-circles__circle-action form::after{ content:""; position:absolute; z-index:-1; inset:-13px -20px; border-radius:999px; opacity:0; pointer-events:none; background:radial-gradient(circle at 8% 58%,#fff 0 2px,#78c9ff 3px,transparent 5px),radial-gradient(circle at 24% 12%,#fff 0 1px,#a99cff 2px,transparent 4px),radial-gradient(circle at 73% 5%,#fff 0 2px,#7de5ff 3px,transparent 5px),radial-gradient(circle at 94% 54%,#fff 0 1px,#b194ff 2px,transparent 4px),radial-gradient(circle at 78% 94%,#fff 0 1px,#6bcfff 2px,transparent 4px),radial-gradient(circle at 18% 88%,#fff 0 2px,#9e8cff 3px,transparent 5px); filter:drop-shadow(0 0 5px rgba(111,196,255,.9)); transform:scale(.68) rotate(-5deg); }
.community-circles__circle-action form::after{ inset:-8px -14px; transform:scale(.72) rotate(7deg); }
.community-circles__circle-action button,
.community-circles__circle-action input[type="submit"],
.community-circles__circle-action > span{ display:inline-flex; min-width:124px; min-height:52px; padding:7px 20px; flex-direction:column; gap:3px; align-items:center; justify-content:center; appearance:none; border:1px solid rgba(255,255,255,.92); border-radius:999px; background:linear-gradient(135deg,#fff,#f3f7ff); color:#3048a2; font-family:var(--circles-heading-font); font-size:11px; font-weight:700; line-height:1; letter-spacing:0; text-align:center; box-shadow:0 9px 22px rgba(10,20,48,.3); }
.community-circles__circle-action button > span,
.community-circles__circle-action > span > b{ display:flex; align-items:center; justify-content:center; gap:5px; font:inherit; }
.community-circles__circle-action small{ color:#7180a5; font-size:9px; font-weight:700; line-height:1; }
.community-circles__circle-action button,
.community-circles__circle-action input[type="submit"]{ position:relative; z-index:1; cursor:pointer; transform:none; transition:background .18s ease,color .18s ease,box-shadow .18s ease; }
.community-circles__circle-action > span{ cursor:default; }
.community-circles__circle-action form:hover::before,
.community-circles__circle-action form:focus-within::before{ animation:circlesAuraStardust .76s cubic-bezier(.2,.75,.25,1); }
.community-circles__circle-action form:hover::after,
.community-circles__circle-action form:focus-within::after{ animation:circlesAuraStardust .76s cubic-bezier(.2,.75,.25,1) .1s; }
.community-circles__circle-action button:hover,
.community-circles__circle-action button:focus-visible,
.community-circles__circle-action input[type="submit"]:hover,
.community-circles__circle-action input[type="submit"]:focus-visible{ background:linear-gradient(135deg,#fff,#eef5ff 52%,#f0ebff); color:#20398f; box-shadow:0 0 0 2px rgba(255,255,255,.78),0 0 18px rgba(98,168,255,.82),0 11px 24px rgba(58,67,163,.32); transform:none; }
.community-circles__circle-action button:focus-visible,
.community-circles__circle-action input[type="submit"]:focus-visible{ outline:3px solid rgba(255,255,255,.92); outline-offset:3px; }

@keyframes circlesAuraStardust{ 0%{ opacity:0; transform:scale(.68) rotate(-5deg) } 24%{ opacity:1 } 100%{ opacity:0; transform:scale(1.25) rotate(4deg) } }

@media (prefers-reduced-motion:reduce){
  .community-circles__circle-action form:hover::before,
  .community-circles__circle-action form:hover::after,
  .community-circles__circle-action form:focus-within::before,
  .community-circles__circle-action form:focus-within::after,
  .community-circles__circle-action input[type="submit"]:hover,
  .community-circles__circle-action input[type="submit"]:focus-visible{ animation:none; }
}