@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

:root { --purple:#5b1b84; --purple-dark:#35104f; --yellow:#f7c948; --ink:#21152a; --muted:#70677a; --surface:#fffdfb; --line:#e8dfeb; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f7f2ec; font-family:'DM Sans',Arial,sans-serif; }
.page-shell { width:min(1120px,100%); margin:0 auto; background:var(--surface); box-shadow:0 18px 70px #3e1e4b14; min-height:100vh; }
.hero { position:relative; overflow:hidden; min-height:400px; color:#fff; padding:28px clamp(24px,6vw,76px) 42px; background:linear-gradient(115deg,#3b1056,#7428a3 66%,#a64ac8); }
.brand { position:relative; z-index:1; display:flex; align-items:center; gap:9px; letter-spacing:.05em; }
.brand-mark { display:grid; width:32px; height:32px; place-items:center; border:2px solid var(--yellow); border-radius:50%; color:var(--yellow); font-family:Georgia,serif; font-weight:700; font-size:1.25rem; }.brand strong,.brand small { display:block; }.brand strong{font-size:.83rem}.brand small{font-size:.63rem;font-weight:500;letter-spacing:.16em}.brand-divider{height:26px;border-left:1px solid #ffffff7a;margin-left:8px}.brand-event{font-size:.66rem;font-weight:700;letter-spacing:.11em}
.hero-copy { position:relative; z-index:1; width:min(560px,100%); margin-top:68px; }.eyebrow { margin:0 0 9px; color:var(--yellow); text-transform:uppercase; font-size:.72rem; font-weight:700; letter-spacing:.14em; }.hero h1 { margin:0; font:800 clamp(2.25rem,6vw,4.45rem)/1.04 'Playfair Display',Georgia,serif; }.hero h1 em{color:var(--yellow)}.hero-copy>p:last-child{max-width:440px;line-height:1.6;font-size:1rem;opacity:.9;margin:18px 0 0}.hero-banner { position:absolute; z-index:1; width:min(50%,530px); right:0; bottom:0; opacity:.78; mix-blend-mode:screen; object-fit:cover; object-position:left; }
.selection { padding:clamp(30px,5vw,60px) clamp(24px,6vw,76px) 64px; }.section-heading{max-width:640px}.section-heading .eyebrow{color:var(--purple)}h2{font:700 clamp(1.65rem,3.5vw,2.55rem)/1.2 'Playfair Display',Georgia,serif;margin:0}.section-heading>p:last-child{color:var(--muted);line-height:1.6;margin:12px 0 28px}
.community-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.community-card { overflow:hidden; padding:0; border:1px solid var(--line); border-radius:16px; background:#fff; color:inherit; text-align:left; cursor:pointer; transition:.22s ease; }.community-card:hover,.community-card:focus-visible,.community-card.active{border-color:var(--purple);box-shadow:0 12px 30px #4b17651c;transform:translateY(-3px);outline:none}.community-card img{display:block;width:100%;height:132px;object-fit:cover;background:#eee}.card-body{display:block;padding:17px 18px 9px;color:var(--muted);font-size:.89rem;line-height:1.45}.community-name{display:block;color:var(--ink);font:700 1.35rem 'Playfair Display',Georgia,serif;margin-bottom:4px}.choose-label{display:flex;justify-content:space-between;padding:9px 18px 18px;color:var(--purple);font-size:.84rem;font-weight:700}.choose-label span{font-size:1.2rem;line-height:.8}.community-card.active .choose-label{color:#a46200}.community-card.active{background:#fffaf0}
.community-detail{display:flex;gap:13px;align-items:flex-start;margin:24px 0 20px;padding:17px 18px;border-radius:12px;background:#f6eef8;border-left:4px solid var(--purple)}.detail-icon{color:var(--purple);font-size:1.25rem}.community-detail strong{font-size:.95rem}.community-detail p{color:var(--muted);margin:4px 0 0;font-size:.88rem;line-height:1.5}.continue-button{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;padding:15px 22px;background:var(--purple);border-radius:10px;color:#fff;font-weight:700;text-decoration:none;transition:.2s}.continue-button:not(.is-disabled):hover{background:var(--purple-dark);transform:translateY(-1px)}.continue-button.is-disabled{pointer-events:none;opacity:.42}footer{text-align:center;padding:22px 16px;color:#756a79;background:#eee5ee;font-size:.73rem}
@media(max-width:640px){.hero{min-height:468px;padding-top:22px}.brand-event,.brand-divider{display:none}.hero-copy{margin-top:62px}.hero-banner{width:100%;max-width:none;bottom:-7px;right:0;opacity:.80}.selection{padding-bottom:48px}.community-grid{grid-template-columns:1fr;gap:18px}.community-card img{height:120px}.card-body{padding:15px 16px 7px}.choose-label{padding:7px 16px 14px}.community-detail{flex-direction:column;align-items:flex-start;gap:9px;padding:13px 16px}.detail-icon{font-size:1.15rem}}