#communities{--community-tint:#e1d0ff;--community-accent:#6230ac;padding-top:90px;padding-bottom:95px}
#communities .section-head{margin-bottom:36px}#communities h2{max-width:900px}#communities h2 .flavors{position:relative;white-space:nowrap;isolation:isolate}#communities h2 .flavors:after{content:'';position:absolute;z-index:-1;left:-3%;right:-3%;bottom:3%;height:24%;background:#f7e37c;transform:rotate(-2deg);border-radius:4px}
#communities .tabs{gap:12px;margin-bottom:34px;padding:3px 0 9px}#communities .tabs button{font-size:1rem;font-weight:500;padding:14px 24px;border-radius:15px;background:#e1d0ff;border:1px solid #c4a7e8;color:#352047;transition:transform .18s,box-shadow .18s;box-shadow:0 3px 0 #c4a7e8}#communities .tabs button:nth-child(2){background:#d9edbf;border-color:#b6cc9a;box-shadow:0 3px 0 #b6cc9a}#communities .tabs button:nth-child(3){background:#ffdbbd;border-color:#dfb99a;box-shadow:0 3px 0 #dfb99a}#communities .tabs button:nth-child(4){background:#cce8f6;border-color:#abcddd;box-shadow:0 3px 0 #abcddd}#communities .tabs button:nth-child(5){background:#f5d7ea;border-color:#d6b4cb;box-shadow:0 3px 0 #d6b4cb}#communities .tabs button:hover{transform:translateY(-3px)}#communities .tabs button[aria-selected=true]{background:#6033a6;color:white;border-color:#6033a6;box-shadow:0 5px 0 #362048;transform:rotate(-2deg) translateY(-2px)}
#communities .community-feature{background:var(--community-tint);grid-template-columns:1.04fr 1fr;border:1px solid #c7b3dd;border-radius:32px;overflow:visible;padding:22px;gap:14px;box-shadow:0 10px 0 #d4c3e8;transition:background .25s}
#community-panel[data-theme=company]{--community-tint:#e1efcf;--community-accent:#41602c}#community-panel[data-theme=hobbies]{--community-tint:#ffe0c6;--community-accent:#7e431e}#community-panel[data-theme=neighborhood]{--community-tint:#d4ecf8;--community-accent:#285e7a}#community-panel[data-theme=travel]{--community-tint:#f5dced;--community-accent:#773864}
#communities .scene{border-radius:22px;min-height:460px;border:6px solid #fffaf0;box-shadow:0 7px 18px #29163e18;transform:rotate(-1.5deg)}#communities .scene img{transition:opacity .2s}#communities .scene:after{background:linear-gradient(transparent 45%,#20132b65)}#communities .scene-caption{left:18px;right:auto;bottom:22px;max-width:calc(100% - 36px);padding:17px 22px;color:#352047;background:#f7e37c;font-size:clamp(1.3rem,2vw,1.8rem);font-weight:600;line-height:1.15;text-shadow:none;border-radius:14px;box-shadow:4px 5px 0 #29163e50;transform:rotate(2deg)}
#communities .feature-copy{padding:27px 32px 28px;justify-content:center}#communities .example-label{color:var(--community-accent);font-weight:600;letter-spacing:.12em}#communities .feature-copy h3{font-size:clamp(2rem,3vw,3rem);margin-bottom:18px;line-height:1.05}#communities .feature-copy p{font-size:1.05rem;line-height:1.65;color:#51415d;margin-bottom:25px}#communities .sample-ask{position:relative;background:#fffaf3;border:1px solid #ffffff;padding:22px 25px;border-radius:20px 20px 20px 5px;font-size:1.2rem;line-height:1.4;box-shadow:5px 6px 0 #29163e19;transform:rotate(1deg)}#communities .sample-ask:before{content:'';position:absolute;left:-10px;bottom:10px;border-right:12px solid #fffaf3;border-top:12px solid transparent;border-bottom:2px solid transparent}#communities .feature-copy .text-link{display:inline-flex;padding:12px 19px;margin-top:30px;border-radius:99px;background:#6033a6;color:white;border:1px solid #6033a6;text-decoration:none;font-size:.95rem;font-weight:500}#communities .feature-copy .text-link:hover{background:#452078}
@media(max-width:1000px){#communities .feature-copy{padding:22px}#communities .scene{min-height:450px}#communities .tabs button{padding:12px 18px}}
@media(max-width:760px){#communities{padding-top:65px;padding-bottom:70px}#communities .tabs{gap:10px;margin-bottom:25px}#communities .tabs button{font-size:.875rem;padding:11px 15px;border-radius:12px}#communities .community-feature{grid-template-columns:1fr;padding:14px;gap:6px;border-radius:25px;box-shadow:0 7px 0 #d4c3e8}#communities .scene{min-height:300px;transform:rotate(-1deg);border-width:4px;border-radius:18px}#communities .scene-caption{font-size:1.35rem;padding:13px 16px;bottom:18px;left:14px}#communities .feature-copy{padding:26px 12px 16px}#communities .sample-ask{font-size:1.1rem;padding:19px 20px}#communities .feature-copy h3{font-size:2.2rem}#communities .feature-copy .text-link{margin-top:25px}}
@media(prefers-reduced-motion:reduce){#communities .tabs button,#communities .community-feature,#communities .scene img{transition:none}}
.community-star{position:absolute;z-index:3;pointer-events:none;left:calc(50% - 80px);top:-18px;width:76px;height:76px;background:#b69bce;clip-path:polygon(50% 0,61% 28%,92% 9%,78% 40%,100% 53%,72% 62%,86% 93%,55% 76%,37% 100%,32% 70%,0 77%,20% 51%,0 29%,34% 31%);transform:rotate(12deg)}.community-accent-bottom{left:36%;bottom:5px;transform:rotate(160deg)}
@media(max-width:760px){.community-star{left:auto;right:-5px;top:-15px;width:57px;height:57px}.community-accent-bottom{left:8px;top:290px;bottom:auto;transform:rotate(-130deg)}}
/* Tighten only the transition from communities to the build panel. */
#communities{padding-bottom:50px}#communities + .build-grid{margin-top:30px}@media(max-width:760px){#communities{padding-bottom:32px}#communities + .build-grid{margin-top:24px}}
/* A smaller, balanced community showcase that fits comfortably on desktop. */
#communities{padding-top:48px;padding-bottom:40px}
#communities .section-head{margin-bottom:24px}
#communities .tabs{gap:10px;margin-bottom:24px}
#communities .tabs button{font-size:.92rem;padding:11px 20px}
#communities .community-feature{padding:18px;border-radius:28px}
#communities .scene{min-height:360px}
#communities .scene-caption{font-size:1.5rem;padding:14px 18px}
#communities .feature-copy{padding:20px 24px}
#communities .feature-copy h3{font-size:2.5rem;margin-bottom:14px}
#communities .feature-copy p{font-size:1rem;line-height:1.55;margin-bottom:18px}
#communities .sample-ask{font-size:1.08rem;padding:17px 20px}
#communities .feature-copy .text-link{font-size:.9rem;padding:10px 17px;margin-top:22px}
#communities .community-star{width:62px;height:62px}
@media(min-width:761px){
  #communities{width:min(1160px,calc(100% - 96px))}
  #communities h2{font-size:clamp(2.6rem,3.6vw,3.5rem);line-height:1.1}
}
@media(max-width:760px){
  #communities{padding-top:40px;padding-bottom:32px}
  #communities h2{font-size:2.35rem}
  #communities .tabs button{font-size:.83rem;padding:10px 13px}
  #communities .community-feature{padding:12px}
  #communities .scene{min-height:265px}
  #communities .scene-caption{font-size:1.2rem;padding:12px 14px}
  #communities .feature-copy{padding:20px 10px 14px}
  #communities .feature-copy h3{font-size:2rem}
  #communities .community-star{width:50px;height:50px}
  #communities .community-accent-bottom{top:255px}
}
/* Align the community showcase at the viewport top when reached by its anchor. */
#communities{scroll-margin-top:-110px}
