/* Join the Fringe (Nov 3), from Gary's Oct 30 mockup: perks left, sign-up panel right, goal line under both. */
.join-fringe { max-width:1180px; margin:0 auto; color:#f2f2f2; }
.join-hero { text-align:center; padding:clamp(12px,3vw,32px) 0 clamp(16px,2.5vw,26px); }
.join-kicker { font:700 .8rem Arial,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#ddd; margin:0 0 6px; }
.join-hero h1 { font-family:Anton,Impact,"Arial Narrow",sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(3rem,9vw,6rem); line-height:.95; margin:0; color:#ff3b2b; text-shadow:0 0 6px rgba(255,42,31,.8),0 0 26px rgba(255,42,31,.45); text-wrap:balance; }
.join-price { font:700 clamp(1.4rem,3vw,1.9rem) Arial,sans-serif; margin:8px 0 0; text-shadow:0 1px 8px #000; }
.join-layout, .join-goal { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,56px); }
.join-layout { align-items:start; }
.join-perks h2 { font-family:Anton,Impact,sans-serif; font-weight:400; font-size:clamp(1.8rem,3.4vw,2.4rem); margin:0 0 14px; text-align:center; text-shadow:0 1px 8px #000; color:#fff; }
.join-perks ul { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.join-perks li { display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:start; }
.join-check { width:30px; height:30px; border:2px solid #ff2a1f; border-radius:50%; display:grid; place-items:center; box-shadow:0 0 8px rgba(255,42,31,.6); margin-top:2px; }
.join-check svg { width:14px; height:14px; stroke:#ff2a1f; stroke-width:3; fill:none; }
.join-perks h3 { font-family:Anton,Impact,sans-serif; font-weight:400; font-size:clamp(1.3rem,2.4vw,1.65rem); line-height:1.1; margin:0 0 4px; color:#fff; text-shadow:0 1px 8px #000; }
.join-perks p { margin:0; color:#e9e6df; font-size:.98rem; line-height:1.45; max-width:60ch; white-space:pre-line; text-shadow:0 1px 6px #000; }
.join-panel { background:rgba(8,8,8,.86); border:1px solid rgba(255,42,31,.45); border-radius:12px; padding:22px clamp(18px,3vw,26px); box-shadow:0 0 26px rgba(255,42,31,.18); display:grid; gap:14px; backdrop-filter:blur(3px); }
.join-panel h2 { font-family:Anton,Impact,sans-serif; font-weight:400; font-size:2rem; text-align:center; margin:0; color:#ff3b2b; text-shadow:0 0 6px rgba(255,42,31,.7); }
.join-field { display:grid; gap:6px; }
.join-panel label { font-weight:700; font-size:.88rem; }
.join-panel input:not([type=checkbox]) { width:100%; min-height:48px; background:rgba(0,0,0,.7); border:2px solid #36c6d6; border-radius:7px; color:#fff; padding:10px 14px; box-shadow:0 0 10px rgba(54,198,214,.35); color-scheme:dark; }
.join-panel input::placeholder { color:#7d7d7d; }
.join-password { position:relative; }
.join-password button { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; color:#36c6d6; font:700 .75rem Arial,sans-serif; letter-spacing:.05em; cursor:pointer; padding:8px; }
.join-hint { color:#9a9a9a; font-size:.78rem; margin:0; }
.join-adult { display:flex; gap:10px; align-items:center; font-size:.92rem; }
.join-adult input { width:22px; height:22px; accent-color:#ff2a1f; flex:none; margin:0; }
.join-go { min-height:54px; font-size:1.15rem; display:flex; align-items:center; justify-content:center; }
.join-small { text-align:center; color:#b9b9b9; font-size:.82rem; margin:0; }
.join-small a { color:#fff; font-weight:700; text-underline-offset:4px; }
.join-goal { align-items:center; margin-top:34px; }
.join-goal p { margin:0; font-family:Anton,Impact,sans-serif; font-weight:400; text-align:center; color:#fff; text-shadow:0 1px 8px #000; }
.join-need { font-size:clamp(1.2rem,2.4vw,1.6rem); line-height:1.25; white-space:pre-line; }
.join-count { font-size:clamp(2rem,4.4vw,3.2rem); line-height:1; font-variant-numeric:tabular-nums; }
.join-count strong { font-weight:400; color:#ff3b2b; text-shadow:0 0 8px rgba(255,42,31,.7); }
@media (max-width:820px) { .join-layout, .join-goal { grid-template-columns:1fr; } .join-panel { order:-1; } }