/* Join: the reference composition, using the shared HangAgain type and palette. */
body[data-page=join]{background:#f8f5f2;color:#2b2330}.join-nav.home-scene{min-height:0;overflow:visible;isolation:auto;color:#2b2330}.join-nav.home-scene:before,.join-nav.home-scene:after{display:none}.join-page{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:22px;max-width:1540px;margin:auto;padding:30px 28px 36px;align-items:stretch}.join-card{background:#fff;border-radius:24px;padding:34px 46px 30px;min-width:0}.join-card .eyebrow{margin:0 0 20px;color:#3f3044;letter-spacing:2px}.join-card h1{font:400 64px/1.06 var(--font-editorial);letter-spacing:-2px;margin:0 0 22px}.join-card h1 em{font-weight:400;color:#6e4e73}.join-lede{font-size:var(--type-lede);line-height:1.5;color:#6e4e73;margin:0 0 24px}.field{display:flex;flex-direction:column;gap:7px;min-width:0;margin-bottom:18px;font-size:var(--type-body);line-height:1.4;font-weight:600}.first-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}.join-card input:not([type=checkbox]),.join-card select,.interest-picker summary{height:46px;width:100%;border:1px solid #ded5e3;border-radius:7px;background:#fff;color:#2b2330;font-size:var(--type-body);line-height:1.4;font-weight:400;padding:10px 14px;outline-offset:2px}.join-card input::placeholder,.join-card select:has(option:checked[value=""]),.placeholder{color:#8a7796;opacity:1}.join-card input:focus-visible,.join-card select:focus-visible{outline:2px solid #6e4e73;border-color:#6e4e73}.select-wrap{position:relative}.select-wrap select{appearance:none;padding-right:38px}.select-wrap>svg{position:absolute;pointer-events:none;right:12px;top:14px;width:18px;height:18px;stroke-width:1.7;color:#45324d}.interest-picker{position:relative;min-width:0}.interest-picker summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer}.interest-picker summary::-webkit-details-marker{display:none}.interest-picker summary>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.interest-picker summary>svg{width:18px;height:18px;flex:none;stroke-width:1.7;color:#45324d}.interest-picker[open] summary>svg{transform:rotate(180deg)}.interest-picker fieldset{position:absolute;z-index:15;top:calc(100% + 5px);left:0;right:0;border:1px solid #ded5e3;background:#fff;border-radius:9px;padding:8px;box-shadow:0 6px 20px #2b233014;margin:0;max-height:285px;overflow:auto}.interest-picker fieldset label{display:flex;gap:11px;align-items:center;padding:9px 7px;font-size:15px;font-weight:400;cursor:pointer}.interest-picker fieldset label:hover{background:#f7f1f8;border-radius:5px}.interest-picker input{width:18px;height:18px;accent-color:#6e4e73;margin:0;flex:none}.phone-row{display:grid;grid-template-columns:126px minmax(0,1fr);gap:7px}.country-wrap{position:relative;display:flex;align-items:center;border:1px solid #ded5e3;border-radius:7px;gap:6px;padding:0 9px;background:#fff}.country-wrap img{width:24px;height:18px;object-fit:cover;border-radius:1px;flex:none}.join-card .country-wrap select{appearance:none;border:0;background:transparent;padding:9px 15px 9px 0;border-radius:2px;min-width:0;font-size:14px}.country-wrap>svg{width:14px;height:14px;position:absolute;right:6px;pointer-events:none}.phone-note{display:flex;align-items:center;gap:10px;background:#f2eaf5;color:#6e4e73;font-size:13px;line-height:1.45;border-radius:7px;padding:10px 12px;margin:0 0 18px}.phone-note svg{width:20px;height:20px;flex:none;stroke-width:1.8}.join-continue{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;height:54px;border-radius:28px;color:#fff;background:#8c6b8f;font-size:var(--type-button);font-weight:600}.join-continue:hover{background:#755879}.join-continue svg{width:21px;height:21px;stroke-width:1.7}.join-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:1px solid #e6dee8;margin-top:22px;padding-top:20px;text-align:center}.value-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#f0e8f3;color:#6e4e73;margin:0 auto 8px}.value-icon svg{width:28px;height:28px;stroke-width:1.7;fill:none}.value-icon svg:has(path[fill]){fill:currentColor}.join-values h2{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.2px;margin:0 0 3px;white-space:nowrap}.join-values p{font-size:14px;line-height:1.4;color:#6b6470;margin:0}.form-error{font-size:14px;line-height:1.4;font-weight:400;color:#6e4e73}.form-error[hidden]{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.join-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.04fr .94fr 1fr;gap:14px;min-width:0;padding:3px 2px}.join-collage figure{margin:0;min-width:0;min-height:0;border-radius:23px;overflow:hidden;background:#eee9e7;position:relative}.join-collage img{position:absolute;width:100%;height:100%;inset:0;display:block;object-fit:cover;filter:saturate(.8) contrast(.94) brightness(.97)}.photo-drag{transform:rotate(-1.5deg)}.photo-fleet{transform:rotate(1.5deg)}.photo-diwali{transform:rotate(-1deg);margin-right:10px!important}.photo-cycling{transform:rotate(1deg);margin-left:-7px!important}.photo-concert{transform:rotate(-1deg)}.photo-walk{transform:rotate(1deg)}
@media(min-width:1540px){.join-page{padding-top:36px}.join-card{padding:40px 48px}.join-card h1{font-size:64px}.field{margin-bottom:22px}.join-values{padding-top:26px;margin-top:26px}}
@media(max-width:1150px){.join-page{gap:20px;padding:26px 24px}.join-card{padding:32px 30px}.join-card h1{font-size:54px}.first-row{gap:14px}.join-values{gap:8px}.join-values h2{font-size:14px}.join-values p{font-size:13px}.join-nav .top{gap:15px;padding:0 3%}.join-nav .home-nav-left,.join-nav .home-nav-right{gap:17px}.join-nav nav{gap:16px}}
@media(max-width:980px){.join-page{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.join-nav .home-nav-left,.join-nav .home-nav-right{gap:14px}.join-nav nav{gap:12px}.join-nav .top{gap:12px}.join-nav nav a{font-size:13px}.join-nav .join-action{padding:9px 12px}.join-card h1{font-size:50px}.join-card{padding:30px 26px}.join-collage{gap:10px}.join-collage figure{border-radius:18px}}
@media(max-width:760px){.join-nav.home-scene header .top{display:grid;grid-template-columns:1fr;gap:7px;padding:12px 5% 10px}.join-nav .home-nav-left,.join-nav .home-nav-right{display:contents}.join-nav .home-nav-left nav,.join-nav .home-nav-right>.login-action{display:none}.join-nav .logo{grid-column:1;grid-row:1;justify-self:start}.join-nav.home-scene .city-wordmark{grid-column:1;grid-row:1;justify-self:end}.join-nav .join-action{grid-column:1;grid-row:2;justify-self:start;padding:9px 15px}.join-nav .marketing-menu{grid-column:1;grid-row:2;justify-self:end}.join-page{grid-template-columns:1fr;padding:20px 16px 26px;gap:22px}.join-card{padding:27px 24px 26px;border-radius:20px}.join-card .eyebrow{margin-bottom:17px}.join-card h1{font-size:var(--type-display);line-height:1.08;letter-spacing:-1.2px;margin-bottom:16px}.join-lede{font-size:16px;line-height:1.5;margin-bottom:22px}.first-row{grid-template-columns:1fr;gap:0}.field{margin-bottom:18px}.join-card input:not([type=checkbox]),.join-card select,.interest-picker summary{font-size:16px;min-height:48px}.phone-row{grid-template-columns:112px minmax(0,1fr)}.join-card .country-wrap select{font-size:13px}.phone-note{font-size:13px;align-items:flex-start}.join-values{gap:8px;margin-top:22px;padding-top:20px}.value-icon{width:44px;height:44px}.value-icon svg{width:23px;height:23px}.join-values h2{font-size:13px;white-space:normal}.join-values p{font-size:13px;line-height:1.4}.join-collage{height:620px;gap:10px;padding:4px}.join-collage figure{border-radius:16px}.photo-diwali{margin-right:0!important}.photo-cycling{margin-left:0!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* The official WhatsApp mark is a filled vector rather than a stroked line icon. */
.join-values>div:last-child .value-icon svg{fill:currentColor;stroke:none}.join-card input::placeholder,.join-card select:has(option:checked[value=""]),.placeholder{color:#806b8c}
/* Three compact onboarding stages; success is not a numbered step. */
.join-progress{display:flex;gap:17px;align-items:center;padding:0;margin:0 0 24px;list-style:none;color:#6b6470;font-size:12px;line-height:1.4}.join-progress li{display:flex;gap:6px;align-items:center;white-space:nowrap}.join-progress li>span{display:flex;align-items:center;justify-content:center;width:21px;height:21px;border:1px solid #e2d8e4;border-radius:50%;font-size:11px;flex:none}.join-progress [aria-current=step]{color:#6e4e73;font-weight:600}.join-progress [aria-current=step]>span{background:#ede3f0;border-color:#ede3f0}.step-save-status{font-size:14px;color:#6b6470;min-height:20px;margin:6px 0}.step-back{display:inline-block;font-size:14px;color:#6e4e73;margin-top:12px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:1150px){.join-progress{gap:10px;font-size:11px}.join-progress li{gap:4px}.join-progress li>span{width:19px;height:19px}}
@media(max-width:760px){.join-progress{gap:10px;margin-bottom:22px;align-items:flex-start}.join-progress li{white-space:normal;align-items:flex-start;flex:1;line-height:1.4}.join-progress li>span{width:19px;height:19px}.join-collage{height:620px}}
.join-step-two .join-collage{min-height:620px}
/* Step 2 shares the Step 1 card and type system; only the choice controls differ. */
.choice-field{border:0;padding:0;margin:0 0 24px;min-width:0}.choice-field legend{font-size:var(--type-body);font-weight:600;line-height:1.4;margin-bottom:12px;padding:0}.interest-grid,.vibe-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice{position:relative;cursor:pointer;min-width:0}.choice input{position:absolute;opacity:0;width:1px;height:1px}.choice>span{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:54px;padding:12px 14px;border:1px solid #ded5e3;border-radius:7px;background:#fff;font-size:15px;line-height:1.4;color:#2b2330}.choice svg{width:17px;height:17px;flex:none;visibility:hidden}.choice input:checked+span{background:#ede3f0;border-color:#8c6b8f;color:#553b59}.choice input:checked+span svg{visibility:visible}.choice input:focus-visible+span{outline:2px solid #6e4e73;outline-offset:3px}.choice:hover>span{border-color:#8c6b8f}.vibe-grid .choice>span{min-height:46px;font-size:14px}.step-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px}.step-actions .step-back{margin:0;text-decoration:none}.step-actions .join-continue{width:170px;flex:none}.step-two-photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;align-self:stretch;padding:5px 2px;min-width:0}.step-two-photos figure{position:relative;margin:0;min-height:200px;border-radius:23px;overflow:hidden;background:#eee9e7}.step-two-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.65) contrast(.88) brightness(1.02)}
@media(max-width:980px){.choice>span{padding:11px 10px;font-size:14px}.step-two-photos{gap:12px}}
@media(max-width:760px){.join-step-two .join-card{padding:27px 24px 26px}.join-step-two .join-card h1{font-size:var(--type-display)}.interest-grid,.vibe-grid{gap:8px}.choice>span{min-height:52px;font-size:14px;padding:10px}.choice-field{margin-bottom:22px}.step-actions{margin-top:24px}.step-actions .join-continue{width:150px}.step-two-photos{display:none}}
/* Optional context uses the same tap targets and shared onboarding rhythm. */
.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tradition-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.context-helper{font-size:14px;line-height:1.5;color:#6b6470;margin:12px 0 0}.orientation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.orientation-grid .choice>span{font-size:14px}.join-step-three .step-actions .join-continue{width:210px}.step-three-photos{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:16px;padding:5px 2px;min-width:0}.step-three-photos figure{margin:0;position:relative;min-height:200px;overflow:hidden;border-radius:23px;background:#eee9e7}.step-three-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.65) contrast(.88) brightness(1.02)}.join-success .join-card{align-self:start}.join-success .step-three-photos{min-height:620px}.join-success .join-continue{max-width:250px;text-decoration:none}.join-success .step-back{margin-top:24px}
@media(max-width:980px){.tradition-grid,.orientation-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.context-grid,.tradition-grid{grid-template-columns:1fr 1fr;gap:8px}.orientation-grid{grid-template-columns:1fr;gap:8px}.orientation-grid .choice>span{min-height:48px}.step-three-photos{display:none}.join-step-three .step-actions{gap:12px}.join-step-three .step-actions .join-continue{width:205px;font-size:14px}.context-helper{font-size:14px}.join-success .join-card h1{font-size:var(--type-display)}}
/* One subdued line-icon language across optional context chips. */
.join-step-three .choice>span{justify-content:flex-start;gap:8px}.context-choice-icon{width:18px;height:18px;flex:none;opacity:.8}.choice-copy{flex:1;min-width:0}.join-step-three .choice>span>svg{margin-left:auto;width:15px;height:15px}.join-step-three .context-grid .choice>span{height:100%}.community-context h2{font-size:var(--type-body);font-weight:600;line-height:1.4;margin:0 0 12px;color:#6e4e73}.community-helper{margin:0 0 12px}.join-step-three .orientation-grid .choice>span{min-height:48px}
@media(max-width:760px){.join-step-three .choice>span{gap:6px;padding:10px 8px}.context-choice-icon{width:16px;height:16px}.join-step-three .choice>span>svg{width:13px;height:13px}}
/* Onboarding refinements preserve the approved card, palette, typography and photos. */
[hidden]{display:none!important}.join-signin{font-size:14px;text-align:center;color:#6b6470;margin:18px 0 0}.join-signin a{color:#6e4e73;text-underline-offset:3px}.join-card button:disabled{opacity:.6;cursor:wait}.join-card form[aria-busy=true]{cursor:wait}.verification-actions{display:flex;gap:18px;margin:0 0 20px}.verification-actions button{background:none;border:0;color:#6e4e73;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:6px 0;font:inherit;font-size:14px}.join-card #verification-title{font-size:22px;margin:0 0 8px}.join-card #code-destination{margin-bottom:16px}.join-card #verified-note{margin:0 0 20px}.skip-context{display:block;color:#6e4e73;margin:0 0 24px;padding:10px 0;min-height:44px;font-weight:600;text-underline-offset:4px}.optional-section{border-bottom:1px solid #e8e1e9;margin-bottom:12px}.optional-section summary{display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:64px;cursor:pointer;font-size:16px;font-weight:600;list-style:none}.optional-section summary::after{content:'+';font-weight:400;font-size:22px}.optional-section[open] summary::after{content:'−'}.optional-section summary>span{font-size:12px;font-weight:400;color:#6b6470;margin-left:auto}.optional-section .choice-field{margin:12px 0 24px}.optional-section legend{font-size:14px}.join-card :focus-visible{outline:2px solid #6e4e73;outline-offset:4px}.join-card #interest-count{margin:-10px 0 24px}.join-card .step-actions{margin-top:24px}.join-step-three .join-page{align-items:start}.join-step-three .step-three-photos{min-height:620px}.join-card .form-error{padding:12px;background:#f2eaf5;border-radius:7px}
@media(max-width:760px){.join-collage{display:none}.join-card .step-actions{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px}.join-card .step-actions .join-continue{width:100%;font-size:15px}.join-card .step-back{margin-top:0;min-height:44px;display:flex;align-items:center}.optional-section summary{font-size:15px}.join-step-three .join-card{padding:27px 24px}.join-step-three .join-card h1{font-size:40px}.skip-context{font-size:14px}}

/* Pilot: keep the Step 1 composition and make all three stages fit narrow screens. */
.join-progress li{white-space:normal;min-width:0;flex:1;align-items:flex-start}.join-progress li>span{flex:none}.join-progress{gap:10px}.join-card .field-error{font-size:13px;font-weight:400;color:#6e4e73;line-height:1.4}.join-card [aria-invalid=true]{border-color:#6e4e73}.join-card .phone-helper{margin:0 0 8px}.join-card .section-helper{margin:0 0 12px}.join-step-three .step-three-photos{position:sticky;top:80px;align-self:start;height:620px}.join-card .success-edit{display:inline-flex;align-items:center;min-height:44px;color:#6e4e73;margin-top:16px;text-underline-offset:3px}.join-success .join-page{display:block;max-width:620px}.join-success .join-card{padding:32px}.join-card .join-continue{height:auto;min-height:48px;padding:12px 16px}.optional-section summary::-webkit-details-marker{display:none}.optional-section summary{line-height:1.4;padding:10px 0}.optional-section summary>span{flex:none}.join-card .phone-row.verified-phone{grid-template-columns:1fr}.join-card input[readonly]{background:#f8f5f2}.join-card .choice input:disabled+span{opacity:.65;cursor:wait}.join-card .step-actions{flex-wrap:wrap}.join-card .step-actions .join-continue{max-width:100%}
@media(max-width:760px){.join-card .step-actions{gap:12px;grid-template-columns:auto minmax(0,1fr)}.join-card .step-actions .join-continue{width:100%;font-size:14px;padding:12px 10px}.join-success .join-card{padding:22px 20px}.join-progress{font-size:11px}.join-progress li{gap:4px}}
@media(max-width:359px){.join-card .interest-grid,.join-card .vibe-grid,.join-card .context-grid{grid-template-columns:1fr}.join-card .step-actions{grid-template-columns:1fr}.join-card .step-actions .step-back{justify-self:start}}