/* ============================================================
   Vibe Crew page /crew (volunteer program; was /community, redesign
   2026-10-26, renamed to the Vibe Crew 2026-11-06)
   Direction A: editorial / crisp. All rules scoped under
   .vcrew so they never collide with global styles.css.
   ============================================================ */
.vcrew{
  --vc-accent:#c8ff00; --vc-accent-dark:#a8d900; --vc-accent-soft:#f3ffbf;
  --vc-ink:#111111; --vc-muted:#555555; --vc-faint:#8a8a8a;
  --vc-bg:#ffffff; --vc-alt:#f7f7f8; --vc-border:#e5e5ea;
  color:var(--vc-ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.vcrew *{box-sizing:border-box}
.vcrew .vc-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.vcrew section{padding:64px 0}
.vcrew .vc-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--vc-accent-dark)}
.vcrew h1{font-size:clamp(34px,6vw,60px);font-weight:900;letter-spacing:-.035em;line-height:1.03;margin:0}
.vcrew h2{font-size:clamp(25px,3.3vw,37px);font-weight:900;letter-spacing:-.03em;line-height:1.08;margin:0;position:relative;display:inline-block}
.vcrew h2:after{content:"";display:block;width:52px;height:4px;background:var(--vc-accent);border-radius:3px;margin-top:14px}
.vcrew .vc-lead{font-size:clamp(16px,1.5vw,19px);color:var(--vc-muted);max-width:640px;line-height:1.55}
.vcrew .vc-seclabel{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--vc-faint);margin-bottom:14px}

/* ---- hero ---- */
.vcrew .vc-hero{padding:56px 0 40px}
.vcrew .vc-hero .vc-eyebrow{margin-bottom:16px}
.vcrew .vc-hero h1{max-width:920px}
.vcrew .vc-hero h1 .hl{box-shadow:inset 0 -14px 0 var(--vc-accent-soft)}
.vcrew .vc-hero .vc-lead{margin-top:20px}
.vcrew .vc-status{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-size:13.5px;font-weight:700;
  background:var(--vc-accent-soft);border:1px solid var(--vc-accent-dark);color:#4a5600;padding:8px 15px;border-radius:999px}
.vcrew .vc-status .vc-dot{width:8px;height:8px;border-radius:50%;background:var(--vc-accent-dark)}
.vcrew .vc-herobtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.vcrew .vc-btn{font-family:inherit;font-weight:800;font-size:15px;padding:13px 24px;border-radius:999px;cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:.15s;line-height:1}
.vcrew .vc-btn-primary{background:var(--vc-accent);color:#111}
.vcrew .vc-btn-primary:hover{background:var(--vc-accent-dark)}
.vcrew .vc-btn-ghost{background:transparent;color:#111;border:1.5px solid #111}
.vcrew .vc-btn-ghost:hover{background:#111;color:#fff}

/* ---- role cards ---- */
.vcrew .vc-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.vcrew .vc-card{background:#fff;border:1px solid var(--vc-border);border-radius:16px;padding:24px}
.vcrew .vc-card .vc-ic{width:40px;height:40px;border-radius:11px;background:var(--vc-alt);display:grid;place-items:center;font-size:20px;margin-bottom:14px}
.vcrew .vc-card h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.vcrew .vc-card p{font-size:14.5px;color:var(--vc-muted);margin:0}
.vcrew .vc-note{font-size:14px;color:var(--vc-faint);margin-top:18px;max-width:660px;line-height:1.5}

/* ---- takeaway ---- */
.vcrew .vc-take{background:var(--vc-alt);border-radius:24px;padding:44px}
.vcrew .vc-take .vc-lead{margin-top:8px}
.vcrew .vc-takegrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;margin-top:26px}
.vcrew .vc-take-item{display:flex;gap:14px;align-items:flex-start}
.vcrew .vc-take-item .n{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--vc-accent);color:#111;font-weight:900;display:grid;place-items:center;font-size:14px}
.vcrew .vc-take-item h4{font-size:16px;font-weight:800;margin:0 0 3px}
.vcrew .vc-take-item p{font-size:14px;color:var(--vc-muted);margin:0}

/* ---- expectations (right before the form) ---- */
.vcrew .vc-expect{display:grid;grid-template-columns:1fr 1fr;gap:16px 34px;margin-top:22px;margin-bottom:42px}
.vcrew .vc-expect-item{display:flex;gap:13px;align-items:flex-start}
.vcrew .vc-expect-item .vc-xc{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--vc-accent);color:#111;font-weight:900;display:grid;place-items:center;font-size:13px}
.vcrew .vc-expect-item h4{font-size:16px;font-weight:800;margin:1px 0 3px}
.vcrew .vc-expect-item p{font-size:14px;color:var(--vc-muted);margin:0;line-height:1.5}

/* ---- accordions ---- */
.vcrew .vc-acc{border:1px solid var(--vc-border);border-radius:14px;margin-top:12px;overflow:hidden;background:#fff}
.vcrew .vc-acc summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;gap:14px;font-weight:800;font-size:16px}
.vcrew .vc-acc summary::-webkit-details-marker{display:none}
.vcrew .vc-acc summary .vc-plus{margin-left:auto;font-size:20px;color:var(--vc-faint);transition:.2s;line-height:1}
.vcrew .vc-acc[open] summary .vc-plus{transform:rotate(45deg)}
.vcrew .vc-acc summary .vc-k{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--vc-accent-soft);color:#4a5600;display:grid;place-items:center;font-size:13px;font-weight:900}
.vcrew .vc-acc .vc-body{padding:0 22px 20px 62px;font-size:14.5px;color:var(--vc-muted);line-height:1.6}
.vcrew .vc-acc .vc-body ul{margin:8px 0 0 18px}
.vcrew .vc-acc .vc-body li{margin:5px 0}

/* ---- apply form ---- */
.vcrew .vc-apply{background:#111;color:#fff;border-radius:28px;padding:48px}
.vcrew .vc-apply .vc-seclabel{color:#9a9a9a}
.vcrew .vc-apply h2{color:#fff}
.vcrew .vc-apply h2:after{background:var(--vc-accent)}
.vcrew .vc-apply .vc-lead{color:#bdbdbd;margin-top:10px}
.vcrew .vc-formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.vcrew .vc-field{display:flex;flex-direction:column;gap:7px}
.vcrew .vc-field.full{grid-column:1 / -1}
.vcrew .vc-field label{font-size:13px;font-weight:700;color:#e8e8e8}
.vcrew .vc-field label .opt{color:#888;font-weight:500}
.vcrew .vc-field input,.vcrew .vc-field textarea,.vcrew .vc-field select{font-family:inherit;font-size:14.5px;background:#1b1b1b;border:1px solid #333;color:#fff;border-radius:11px;padding:12px 14px;outline:none;width:100%}
.vcrew .vc-field input::placeholder,.vcrew .vc-field textarea::placeholder{color:#777}
.vcrew .vc-field textarea{min-height:86px;resize:vertical}
.vcrew .vc-field input:focus,.vcrew .vc-field textarea:focus,.vcrew .vc-field select:focus{border-color:var(--vc-accent)}
.vcrew .vc-checkrow{grid-column:1 / -1;display:flex;gap:11px;align-items:flex-start;margin-top:2px;font-size:14px;color:#cfcfcf;cursor:pointer}
.vcrew .vc-checkrow input{margin-top:3px;accent-color:var(--vc-accent);width:17px;height:17px;flex:0 0 auto}
.vcrew .vc-submit{grid-column:1 / -1;margin-top:8px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.vcrew .vc-submit .vc-btn-primary{font-size:16px;padding:14px 30px}
.vcrew .vc-submit .vc-btn-primary[disabled]{opacity:.6;cursor:default}
.vcrew .vc-fineprint{font-size:12.5px;color:#888;max-width:460px;line-height:1.5}
.vcrew .vc-formmsg{grid-column:1 / -1;font-size:14px;font-weight:600;padding:12px 16px;border-radius:12px;display:none}
.vcrew .vc-formmsg.err{display:block;background:#2a1414;color:#ffb4b4;border:1px solid #512}
/* success replaces the whole form */
.vcrew .vc-success{display:none;text-align:center;padding:16px 0 6px}
.vcrew .vc-success .vc-check{width:56px;height:56px;border-radius:50%;background:var(--vc-accent);color:#111;display:grid;place-items:center;font-size:28px;margin:0 auto 18px}
.vcrew .vc-success h2{color:#fff}
.vcrew .vc-success h2:after{margin-left:auto;margin-right:auto}
.vcrew .vc-success p{color:#bdbdbd;max-width:460px;margin:14px auto 0;font-size:15px;line-height:1.6}
.vcrew .vc-apply.done .vc-formgrid,.vcrew .vc-apply.done .vc-apply-intro{display:none}
.vcrew .vc-apply.done .vc-success{display:block}

@media(max-width:860px){
  .vcrew section{padding:48px 0}
  .vcrew .vc-grid3{grid-template-columns:1fr}
  .vcrew .vc-take{padding:32px}
  .vcrew .vc-takegrid{grid-template-columns:1fr}
  .vcrew .vc-expect{grid-template-columns:1fr}
  .vcrew .vc-apply{padding:30px 24px}
  .vcrew .vc-formgrid{grid-template-columns:1fr}
}
