.join-options{width:min(1080px,calc(100% - 40px));max-height:90svh;padding:0;border:0;background:var(--bg);color:var(--fg);margin:auto;overflow:hidden}
.join-options::backdrop{background:#0009}
.join-options[open]{display:flex;flex-direction:column}
.join-options-header{display:flex;gap:24px;justify-content:space-between;padding:28px 32px 20px;flex:none}
.join-eyebrow{font-size:10px;letter-spacing:.16em;color:var(--accent-t);margin:0 0 10px}
.join-options-header h2{font-size:30px;font-weight:400;line-height:1.25;letter-spacing:-.03em;margin:0 0 10px}
.join-options-header p:last-child{font-size:13px;line-height:1.6;color:var(--fg-soft);max-width:680px;margin:0}
.join-close{display:grid;place-items:center;width:40px;height:40px;flex:none;background:transparent;color:var(--fg);border:1px solid var(--line);font-family:inherit;font-size:28px;line-height:1;cursor:pointer}
.join-options-body{overflow:auto;padding:10px 32px 26px;overscroll-behavior:contain}
.join-options-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.join-option{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.join-imac{width:100%;filter:drop-shadow(0 2px 3px #0002);margin-bottom:16px}
.join-imac-screen{padding:7px;background:#e6e7e6;border:1px solid #c3c6c4;border-bottom:0;border-radius:7px 7px 0 0}
.join-imac-screen img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fafafa}
.join-imac-chin{height:18px;background:linear-gradient(100deg,#d9dcda,#edefed,#d8dbd9);border-radius:0 0 5px 5px;border:1px solid #c3c6c4;border-top:0}
.join-imac-stand{height:24px;width:24%;margin:auto;background:linear-gradient(#acb2ae,#e1e4e1);clip-path:polygon(23% 0,77% 0,82% 85%,100% 92%,100% 100%,0 100%,0 92%,18% 85%)}
.join-option h3{font-size:21px;font-weight:400;margin:0 0 8px}
.join-badge{font-size:10px;line-height:1.5;padding:4px 9px;border-radius:20px;background:var(--bg-2);border:1px solid var(--line);margin:0 0 14px}
.recommended .join-badge{color:#385444;background:#edf3ee;border-color:#c9d9cd}
.join-option-description{font-size:13px;color:var(--fg-soft);line-height:1.7;margin:0 0 20px;text-align:left}
.join-option-cta{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:13px 15px;border:1px solid var(--fg);font-size:12px;color:var(--fg);margin-top:auto;min-height:48px;text-decoration:none}
.recommended .join-option-cta{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.join-option-cta:hover{background:var(--fg);color:var(--bg)}
.join-options-note{font-size:12px;line-height:1.7;color:var(--fg-soft);padding:17px 20px;background:var(--bg-2);margin:26px 0 0}
@media(max-width:700px){.join-options{width:calc(100% - 20px);max-height:94svh}.join-options-header{padding:22px 20px 16px;gap:12px}.join-options-header h2{font-size:25px}.join-options-body{padding:4px 20px 24px}.join-options-grid{grid-template-columns:1fr;gap:34px}.join-imac{max-width:300px}.join-option-description{margin-bottom:14px}.join-options-note{padding:15px}}

.join-option-cta{position:relative;justify-content:center;text-align:center;padding-inline:32px}
.join-option-cta>span{position:absolute;right:15px}

.join-mobile-copy,.join-mobile-picker{display:none}
@media(max-width:700px){
 .join-options{width:calc(100% - 16px);max-height:94dvh;border-radius:12px}
 .join-desktop-copy{display:none}.join-mobile-copy{display:inline}
 .join-options-header{padding:18px 16px 10px;gap:8px}.join-options-header h2{font-size:23px}.join-eyebrow{font-size:8px;margin-bottom:8px}.join-options-header p:last-child{font-size:12px;line-height:1.5}
 .join-mobile-picker{display:block;flex:none;padding:0 16px 8px}.join-shop-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.join-shop-buttons button{font-family:inherit;font-size:11px;line-height:1.3;min-height:44px;padding:6px 3px;border:1px solid var(--line);border-radius:5px;background:var(--bg-2);color:var(--fg);cursor:pointer}.join-shop-buttons button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.join-mobile-picker p{font-size:11px;color:var(--fg-soft);margin:8px 0 0}
 .join-options-body{padding:0 0 20px;min-height:0}
 .join-options-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:4px 16px 12px;overscroll-behavior-x:contain;align-items:stretch}
 .join-option{flex:0 0 86%;scroll-snap-align:start;padding:16px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2)}
 .join-imac{max-width:220px;margin-bottom:10px}.join-option h3{font-size:20px}.join-badge{margin-bottom:10px}.join-option-description{font-size:12px;line-height:1.5}.join-option-cta{font-size:11px;padding-inline:22px}.join-option-cta>span{right:8px}.join-options-note{margin:12px 16px 0;padding:14px;font-size:11px}
}