/* =========================================================
   MountScale — Career page
   Built on the shared design tokens in index.css
   (--blue, --accent, --light, --text, --text-soft, --border,
   --glass, --shadow-soft, --ease). Self-contained: this page
   does not depend on pricing.css or about.css.
   ========================================================= */

/* ---------- Career hero ---------- */
.career-hero{
  position:relative;overflow:hidden;
  padding:180px 24px 70px;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, var(--light) 0%, rgba(234,244,255,0) 60%), #ffffff;
}
.career-hero-glow{
  position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle, rgba(96,165,250,0.22), transparent 70%);
  pointer-events:none;
}
.career-hero-inner{
  position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.career-headline{
  font-size:clamp(2.1rem,4.6vw,3.4rem);
  line-height:1.1;font-weight:700;letter-spacing:-0.03em;color:var(--text);
}
.career-headline .grad{
  background:linear-gradient(100deg,#0055EC);
  -webkit-background-clip:text;background-clip:text;color:transparent;color:#0055EC;
}
.career-sub{
  font-size:1rem;line-height:1.65;color:var(--text-soft);
  max-width:560px;
}

/* ---------- Career content: roles + application form ---------- */
.career-content{padding-top:20px;padding-bottom:100px;}

.careers-wrap{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:start;
}
@media (max-width:900px){ .careers-wrap{grid-template-columns:1fr;} }

.careers-roles{display:flex;flex-direction:column;gap:14px;}
.role-card{
  padding:22px 24px;border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,0.92),rgba(234,244,255,0.55));
  border:1px solid var(--border);
  box-shadow:0 20px 40px -26px rgba(37,99,235,0.2);
}
.role-card h4{font-size:1rem;font-weight:700;color:var(--text);letter-spacing:-0.01em;}
.role-meta{display:block;margin-top:4px;font-size:.82rem;font-weight:600;color:var(--blue);}
.role-card p{margin-top:8px;font-size:.88rem;line-height:1.55;color:var(--text-soft);}
.role-card-open{
  background:linear-gradient(165deg,#1d4ed8,var(--blue) 55%,var(--accent));
  border-color:transparent;box-shadow:0 24px 50px -22px rgba(37,99,235,0.45);
}
.role-card-open h4{color:#fff;}
.role-card-open .role-meta{color:rgba(255,255,255,0.85);}
.role-card-open p{color:rgba(255,255,255,0.85);}

.careers-form{
  padding:32px;border-radius:22px;
  background:var(--glass);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--border);box-shadow:var(--shadow-soft);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }

.form-field{margin-top:16px;}
.form-row .form-field{margin-top:0;}
.form-field:first-child{margin-top:0;}
.form-field label{display:block;font-size:.86rem;font-weight:600;color:var(--text);margin-bottom:6px;}
.field-optional{font-weight:500;color:var(--text-soft);}

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--border);background:#fff;
  font:inherit;font-size:.94rem;color:var(--text);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.form-field input::placeholder,
.form-field textarea::placeholder{color:#9aa5b5;}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}
.form-field textarea{resize:vertical;min-height:96px;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.career-submit{
  margin-top:22px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px;border-radius:12px;border:none;cursor:pointer;
  font:inherit;font-size:.96rem;font-weight:700;color:#fff;
  background:linear-gradient(120deg,var(--blue),var(--accent));
  box-shadow:0 20px 40px -18px rgba(37,99,235,0.55);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}
.career-submit:hover{transform:translateY(-2px);box-shadow:0 26px 50px -18px rgba(37,99,235,0.6);}
.career-submit:disabled{opacity:.7;cursor:not-allowed;transform:none;}

.career-form-status{margin-top:14px;font-size:.88rem;line-height:1.5;min-height:1.3em;}
.career-form-status[data-state="success"]{color:#15803d;font-weight:600;}
.career-form-status[data-state="error"]{color:#dc2626;font-weight:600;}

/* nav active state (career.html only) */
.nav-center a.active{opacity:1;}
.nav-center a.active::after{width:100%;}