/* ASI Join page stylesheet — matches ASI tokens */
:root {
  --cityu:#6b2c91; --cityu-dark:#4a1e66; --accent:#0f8f8f; --accent2:#38b2b2;
  --energy:#38d5c8; --ink:#14202e; --muted:#5b6673; --bg:#f7f9fb;
  --card:#fff; --border:#e4e9ef; --radius:14px; --shadow:0 10px 30px rgba(20,32,46,.08);
  --max:1160px;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }
.skip-link { position:absolute; left:-999px; top:0; z-index:999; background:var(--cityu); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0; font-weight:600; }
.skip-link:focus { left:0; color:#fff; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

.join-hero { position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1100px 460px at 18% -10%, rgba(56,213,200,.2), transparent 60%),
    radial-gradient(900px 460px at 92% 4%, rgba(107,44,145,.6), transparent 66%),
    linear-gradient(150deg,#2a1140 0%,#3d1c63 45%,#12508f 100%);
  padding:72px 0 80px; }
.join-hero h1 { font-size:clamp(2rem,5vw,3.2rem); font-weight:800; letter-spacing:-.4px; margin:18px 0 12px; }
.join-hero h1 span { color:var(--energy); }
.join-hero .sub { font-size:1.06rem; opacity:.94; max-width:720px; }
.recruit { display:inline-flex; align-items:center; gap:10px; font-size:.9rem; font-weight:700;
  color:#aef7e9; background:rgba(56,213,200,.16); border:1px solid rgba(56,213,200,.4);
  border-radius:999px; padding:9px 16px; }
.dotpulse { width:10px; height:10px; border-radius:50%; background:var(--energy);
  box-shadow:0 0 0 0 rgba(56,213,200,.7); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(56,213,200,.6);} 70%{box-shadow:0 0 0 10px rgba(56,213,200,0);} 100%{box-shadow:0 0 0 0 rgba(56,213,200,0);} }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.pill-btn { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.95rem;
  padding:12px 20px; border-radius:999px; text-decoration:none; transition:transform .16s, background .16s; }
.pill-btn:hover { text-decoration:none; transform:translateY(-2px); }
.pill-btn.solid { background:var(--cityu); color:#fff; box-shadow:0 8px 20px rgba(107,44,145,.28); }
.pill-btn.solid:hover { background:var(--cityu-dark); }
.pill-btn.ghost { color:#d9e8ff; border:2px solid rgba(255,255,255,.3); }
.pill-btn.ghost:hover { border-color:#fff; background:rgba(255,255,255,.1); }

.join-body { padding:56px 0 64px; }
.join-grid { display:grid; grid-template-columns:1fr 300px; gap:44px; }
@media (max-width:900px){ .join-grid{grid-template-columns:1fr;} }
.join-main h2 { font-size:1.3rem; font-weight:800; color:var(--cityu); margin:36px 0 12px; }
.theme-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.theme-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px; }
.theme-card h3 { font-size:1.02rem; font-weight:700; margin-bottom:6px; }
.theme-card p { color:var(--muted); font-size:.9rem; }
.plain-list { margin:8px 0 0 1.1em; color:var(--muted); }
.plain-list li { margin-bottom:8px; }
.plain-list.num li { margin-bottom:12px; }
.plain-list code { font-family:ui-monospace,Menlo,monospace; background:#f2f7f7; padding:2px 6px; border-radius:5px; }
.faq { margin-top:8px; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:12px; }
.faq-item h3 { font-size:.98rem; font-weight:700; margin-bottom:4px; }
.faq-item p { color:var(--muted); font-size:.9rem; }
.join-side .side-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; }
.join-side h3 { font-size:.78rem; letter-spacing:1.2px; text-transform:uppercase; font-weight:800;
  color:var(--cityu); margin-bottom:14px; }
.join-side p { color:var(--muted); font-size:.88rem; }
.alumni-list { list-style:none; margin:10px 0 16px; }
.alumni-list li { padding:7px 0; border-bottom:1px dashed var(--border); font-size:.85rem; font-weight:600; }
.alumni-list li:last-child { border-bottom:0; }